Уроки Javascript / Запуск кода JS при клике на кнопку или ссылку, подключаем событие onclick
Привет друзья! Сегодня мы с вами рассмотрим как подключить к элементам на странице событие onclick, мы его подключим к кнопке и к ссылке. Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами. Событие происходит при клике по элементу левой кнопкой мыши. В нашем случае, чтобы назначить обработчик события click на элементе button, можно использовать атрибут onclick. При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick. Т.к. мы там указали функцию, то выполнится именно она. 😊
✅ Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on_событие.
✅ Обратите внимание, что для передачи данных в функцию JS вызываемую событием onclick используются одинарные кавычки, так как сам атрибут находится в двойных кавычках.
❗ Код из видео расположен в конце описания.
Ставь лайк, если тебе понравилось видео 👍
►► Подписывайся на наш канал: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ?sub_confirmation=1
Рекомендую посмотреть вот эти видео ►
★ [Эффект бьющегося экрана TweenMax + html2canvas / Почти как игра] https://youtu.be/2yTKW72PTqc
★ [Хранилище LocalStorage - учимся сохранять данные о пользователе в браузере] https://youtu.be/5Uaqw8bwkF0
★ [Логические операции ИЛИ, НЕ, И] https://youtu.be/kC-D9-LckbY
★ [Конструкция switch case выбор по условию] https://youtu.be/mOZIeDR8o5U
★ [Как подключить фейерверк к сайту, новогодний салют в праздник] https://youtu.be/jEu2X3pidsw
★ [Как сделать эффект падающего снега за мышкой, снежинки следуют за курсором мыши] https://youtu.be/O9MdnP2CPb4
★ [Как сделать новогоднюю открытку на вашем сайте, новогоднее поздравление!] https://youtu.be/7ui7VqoL5K0
★ [Как подключить новогоднюю гирлянду к вашему сайту, новогоднее украшение для сайта] https://youtu.be/r9aUdRmpFdU
★ [Как сделать метель на сайте] https://youtu.be/vdLQssm4uzU
★ [Как подключить счетчик времени на сайт] https://youtu.be/-WmLOalzvls
★ [Что такое JavaScript пишем первую программу] https://youtu.be/bNgRQ63GX9A
★ [Как подключить JavaScript и вывести результат выполнения на экран] https://youtu.be/8Ay-pm9eZRk
Где нас можно найти ►
--------------------------------------------
Вступай в группу Вк - https://vk.com/wiseplat 🚀
Группа FaceBook - https://www.facebook.com/wiseplat/
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/
Instagram: https://www.instagram.com/shpaginoleg/
Twitter - https://twitter.com/WiseplatSchool
Популярные плейлисты ►
--------------------------------------------
● Уроки программирования для детей по Scratch https://www.youtube.com/watch?v=KoLhF4CRk0g&list=PLxiU3nwEQ4PH7h8vaYenOfxAVZ3qDycWc
● Уроки программирования для детей и подростков на Python https://www.youtube.com/playlist?list=PLxiU3nwEQ4PHtLT8LzGAdcuzE-laotXps
● Уроки HTML/CSS. Учим быстро и эффективно! https://www.youtube.com/watch?v=neKGU07B-VI&list=PLxiU3nwEQ4PEOAW6Zhk8P7dUDXo3jX5gG
● Уроки JavaScript. Изучаем основы языка и практикуемся сразу. https://www.youtube.com/playlist?list=PLxiU3nwEQ4PGG4H77ODa2mC4ldxJPoRSM
● Уроки jQuery. Для начинающих, с нуля https://www.youtube.com/watch?v=m4uzKHfWa04&list=PLxiU3nwEQ4PHbMa7e5WTqHLY2bIejsx0a
● Уроки Bootstrap для начинающих, с нуля учимся сразу делать классно! https://www.youtube.com/playlist?list=PLxiU3nwEQ4PFMTCBXSvpm8tzEXyvlaacV
● Компьютерное железо. Лайфхаки. Обзоры. Ноу-хау. Инструкции. Рекомендации. https://www.youtube.com/playlist?list=PLxiU3nwEQ4PELm5cldvN_-l1Uiqhx24Sq
► Уроки на сайте Wiseplat:
--------------------------------------------
✔ Сообщество программистов: https://wiseplat.org/
✔ Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: https://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]
*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊
Видео Уроки Javascript / Запуск кода JS при клике на кнопку или ссылку, подключаем событие onclick канала Изучаем мир ИТ / Олег Шпагин / WISEPLAT
✅ Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on_событие.
✅ Обратите внимание, что для передачи данных в функцию JS вызываемую событием onclick используются одинарные кавычки, так как сам атрибут находится в двойных кавычках.
❗ Код из видео расположен в конце описания.
Ставь лайк, если тебе понравилось видео 👍
►► Подписывайся на наш канал: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ?sub_confirmation=1
Рекомендую посмотреть вот эти видео ►
★ [Эффект бьющегося экрана TweenMax + html2canvas / Почти как игра] https://youtu.be/2yTKW72PTqc
★ [Хранилище LocalStorage - учимся сохранять данные о пользователе в браузере] https://youtu.be/5Uaqw8bwkF0
★ [Логические операции ИЛИ, НЕ, И] https://youtu.be/kC-D9-LckbY
★ [Конструкция switch case выбор по условию] https://youtu.be/mOZIeDR8o5U
★ [Как подключить фейерверк к сайту, новогодний салют в праздник] https://youtu.be/jEu2X3pidsw
★ [Как сделать эффект падающего снега за мышкой, снежинки следуют за курсором мыши] https://youtu.be/O9MdnP2CPb4
★ [Как сделать новогоднюю открытку на вашем сайте, новогоднее поздравление!] https://youtu.be/7ui7VqoL5K0
★ [Как подключить новогоднюю гирлянду к вашему сайту, новогоднее украшение для сайта] https://youtu.be/r9aUdRmpFdU
★ [Как сделать метель на сайте] https://youtu.be/vdLQssm4uzU
★ [Как подключить счетчик времени на сайт] https://youtu.be/-WmLOalzvls
★ [Что такое JavaScript пишем первую программу] https://youtu.be/bNgRQ63GX9A
★ [Как подключить JavaScript и вывести результат выполнения на экран] https://youtu.be/8Ay-pm9eZRk
Где нас можно найти ►
--------------------------------------------
Вступай в группу Вк - https://vk.com/wiseplat 🚀
Группа FaceBook - https://www.facebook.com/wiseplat/
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/
Instagram: https://www.instagram.com/shpaginoleg/
Twitter - https://twitter.com/WiseplatSchool
Популярные плейлисты ►
--------------------------------------------
● Уроки программирования для детей по Scratch https://www.youtube.com/watch?v=KoLhF4CRk0g&list=PLxiU3nwEQ4PH7h8vaYenOfxAVZ3qDycWc
● Уроки программирования для детей и подростков на Python https://www.youtube.com/playlist?list=PLxiU3nwEQ4PHtLT8LzGAdcuzE-laotXps
● Уроки HTML/CSS. Учим быстро и эффективно! https://www.youtube.com/watch?v=neKGU07B-VI&list=PLxiU3nwEQ4PEOAW6Zhk8P7dUDXo3jX5gG
● Уроки JavaScript. Изучаем основы языка и практикуемся сразу. https://www.youtube.com/playlist?list=PLxiU3nwEQ4PGG4H77ODa2mC4ldxJPoRSM
● Уроки jQuery. Для начинающих, с нуля https://www.youtube.com/watch?v=m4uzKHfWa04&list=PLxiU3nwEQ4PHbMa7e5WTqHLY2bIejsx0a
● Уроки Bootstrap для начинающих, с нуля учимся сразу делать классно! https://www.youtube.com/playlist?list=PLxiU3nwEQ4PFMTCBXSvpm8tzEXyvlaacV
● Компьютерное железо. Лайфхаки. Обзоры. Ноу-хау. Инструкции. Рекомендации. https://www.youtube.com/playlist?list=PLxiU3nwEQ4PELm5cldvN_-l1Uiqhx24Sq
► Уроки на сайте Wiseplat:
--------------------------------------------
✔ Сообщество программистов: https://wiseplat.org/
✔ Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: https://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]
*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊
Видео Уроки Javascript / Запуск кода JS при клике на кнопку или ссылку, подключаем событие onclick канала Изучаем мир ИТ / Олег Шпагин / WISEPLAT
Показать
Комментарии отсутствуют
Информация о видео
8 января 2020 г. 0:51:05
00:09:07
Другие видео канала
![Учим JavaScript 21. События мыши](https://i.ytimg.com/vi/eiih7ydIrj4/default.jpg)
![JavaScript v.2.0 Основы ввода данных, работа с input](https://i.ytimg.com/vi/c6iXfbVRa1Y/default.jpg)
![HTML5 Basics #8 Ссылки и кнопки (Links & Buttons)](https://i.ytimg.com/vi/FA0jjOjTChA/default.jpg)
![Как сделать кнопку в html | Уроки HTML, CSS](https://i.ytimg.com/vi/LYIVMTa8_kM/default.jpg)
![Уроки Javascript Как запустить ваш код](https://i.ytimg.com/vi/eOWiDrkqUgA/default.jpg)
![#18 Криптономикон: рефакторинг - Vue.js: практика](https://i.ytimg.com/vi/AzsO67rloQw/default.jpg)
![2.4 Как изменять элементы HTML по кнопке при помощи JavaScript? | Событие onclick](https://i.ytimg.com/vi/eFe02X_uoRY/default.jpg)
![Учим Html за 35 минут для начинающих от 10 лет (Основы) + Мотивация для разработчиков #ДомаВместе](https://i.ytimg.com/vi/4jYYHaTwWvY/default.jpg)
![Уроки JavaScript | Урок №13 - События и обработчик событий](https://i.ytimg.com/vi/CpMJVKJnMTc/default.jpg)
![Js работа со стилями, className, classList, add, remove, toggle, добавление удаление и переключение](https://i.ytimg.com/vi/aBX_G-Dn1TM/default.jpg)
![Нажатие на кнопку в JavaScript (событие и функции)](https://i.ytimg.com/vi/AOovMks3O-Y/default.jpg)
![JavaScript Практика - THIS - Блоки при клике на 1 из них добавляется новый фон при клике](https://i.ytimg.com/vi/I6l3FVZmZXE/default.jpg)
![Кнопка на CSS / Button animation CSS3](https://i.ytimg.com/vi/jgbDnDirM9s/default.jpg)
![Уроки JavaScript | #17 - Добавление и удаление элементов с помощью DOM](https://i.ytimg.com/vi/2wOJFMZvvYM/default.jpg)
![Получаем текст из input JavaScript. First steps](https://i.ytimg.com/vi/b0OIjyBm024/default.jpg)
![Понимание javascript - работа с DOM](https://i.ytimg.com/vi/-2WiaSvOj78/default.jpg)
![TrueJS 32. AddEventListener - события](https://i.ytimg.com/vi/EZPWupfomss/default.jpg)
![Изучаем JavaScript за 90 минут](https://i.ytimg.com/vi/4QHFhIjF2L0/default.jpg)
![Выпадающее МЕНЮ на чистом CSS / HTML](https://i.ytimg.com/vi/K3C4NdzFHg0/default.jpg)
![Как сделать кнопку Подробнее чтобы показать скрытый текст на чистом JS](https://i.ytimg.com/vi/v186gRZYyo4/default.jpg)