1,0×
00:00/09:06
Описание
Уроки Javascript / Запуск кода Js при клике на кнопку или ссылку, подключаем событие onclick
4 года назад • 1,5K просмотров13 поставили "Нравится"
Привет друзья! Сегодня мы с вами рассмотрим как подключить к элементам на странице событие onclick, мы его подключим к кнопке и к ссылке. Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами. Событие происходит при клике по элементу левой кнопкой мыши. В нашем случае, чтобы назначить обработчик события click на элементе button, можно использовать атрибут onclick. При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick. Т.к. мы там указали функцию, то выполнится именно она. 😊✅ Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on_событие.
✅ Обратите внимание, что для передачи данных в функцию JS вызываемую событием onclick используются одинарные кавычки, так как сам атрибут находится в двойных кавычках.
❗ Код из видео расположен в конце описания.
Ставь лайк, если тебе понравилось видео 👍
►► Подписывайся на наш канал: www.youtube.com/...irmation=1
Рекомендую посмотреть вот эти видео ►
★ [Эффект бьющегося экрана TweenMax + html2canvas / Почти как игра] youtu.be/2yTKW72PTqc
★ [Хранилище LocalStorage - учимся сохранять данные о пользователе в браузере] youtu.be/5Uaqw8bwkF0
★ [Логические операции ИЛИ, НЕ, И] youtu.be/kC-D9-LckbY
★ [Конструкция switch case выбор по условию] youtu.be/mOZIeDR8o5U
★ [Как подключить фейерверк к сайту, новогодний салют в праздник] youtu.be/jEu2X3pidsw
★ [Как сделать эффект падающего снега за мышкой, снежинки следуют за курсором мыши] youtu.be/O9MdnP2CPb4
★ [Как сделать новогоднюю открытку на вашем сайте, новогоднее поздравление!] youtu.be/7ui7VqoL5K0
★ [Как подключить новогоднюю гирлянду к вашему сайту, новогоднее украшение для сайта] youtu.be/r9aUdRmpFdU
★ [Как сделать метель на сайте] youtu.be/vdLQssm4uzU
★ [Как подключить счетчик времени на сайт] youtu.be/-WmLOalzvls
★ [Что такое JavaScript пишем первую программу] youtu.be/bNgRQ63GX9A
★ [Как подключить JavaScript и вывести результат выполнения на экран] youtu.be/8Ay-pm9eZRk
Где нас можно найти ►
--------------------------------------------
Вступай в группу Вк - vk.com/wiseplat 🚀
Группа FaceBook - www.facebook.com/wiseplat/
Инстаграм Wiseplat: www.instagram.com/wiseplat/
Instagram: www.instagram.com/shpaginoleg/
Twitter - twitter.com/...platSchool
Популярные плейлисты ►
--------------------------------------------
● Уроки программирования для детей по Scratch www.youtube.com/...AVZ3qDycWc
● Уроки программирования для детей и подростков на Python www.youtube.com/...zE-laotXps
● Уроки HTML/CSS. Учим быстро и эффективно! www.youtube.com/...UDXo3jX5gG
● Уроки JavaScript. Изучаем основы языка и практикуемся сразу. www.youtube.com/...4ldxJPoRSM
● Уроки jQuery. Для начинающих, с нуля www.youtube.com/...Y2bIejsx0a
● Уроки Bootstrap для начинающих, с нуля учимся сразу делать классно! www.youtube.com/...zEXyvlaacV
● Компьютерное железо. Лайфхаки. Обзоры. Ноу-хау. Инструкции. Рекомендации. www.youtube.com/...1Uiqhx24Sq
► Уроки на сайте Wiseplat:
--------------------------------------------
✔ Сообщество программистов: wiseplat.org/
✔ Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
********************************
❤ Если Вам понравилась публикация, подписывайтесь на канал!
👍 Ставьте лайки, тогда будем еще создавать такой контент :)
✉ Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin
#урокиjavascript #урокиhtml #урокиcss
Код из видео:
[!DOCTYPE html]
[html lang=en]
[head]
[meta charset=UTF-8]
[title]tst js[/title]
[script]
function tstjs(){
//document.write(JS успешно запустился!);
document.getElementById(out_rez).append(JS успешно запустился!);
}
function tsta(){
document.getElementById(out_rez_a).append(JS из тега A запустился!);
}
[/script]
[/head]
[body]
[h1]Тест запуска Javascript[/h1]
[button onclick=tstjs()]Запустить функцию из JS[/button]
[div id=out_rez][/div]
[a href=# onclick=tsta()]Нажми меня![/a]
[div id=out_rez_a][/div]
[/body]
[/html]
*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊