Уроки Javascript / Запуск кода JS при клике на кнопку или ссылку, подключаем событие onclick

Привет друзья! Сегодня мы с вами рассмотрим как подключить к элементам на странице событие onclick, мы его подключим к кнопке и к ссылке. Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами. Событие происходит при клике по элементу левой кнопкой мыши. В нашем случае, чтобы назначить обработчик события click на элементе button, можно использовать атрибут onclick. При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick. Т.к. мы там указали функцию, то выполнится именно она. 😊
✅ Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on_событие.
✅ Обратите внимание, что для передачи данных в функцию JS вызываемую событием onclick используются одинарные кавычки, так как сам атрибут находится в двойных кавычках.
❗ Код из видео расположен в конце описания.
Ставь лайк, если тебе понравилось видео 👍
►► Подписывайся на наш канал: / @wiseplat
Рекомендую посмотреть вот эти видео ►
★ [Эффект бьющегося экрана TweenMax + html2canvas / Почти как игра] • Уроки Javascript / Эфф...
★ [Хранилище LocalStorage - учимся сохранять данные о пользователе в браузере] • Уроки Javascript / Хра...
★ [Логические операции ИЛИ, НЕ, И] • Уроки Javascript / Лог...
★ [Конструкция switch case выбор по условию] • Уроки Javascript / Кон...
★ [Как подключить фейерверк к сайту, новогодний салют в праздник] • Уроки Javascript / Как...
★ [Как сделать эффект падающего снега за мышкой, снежинки следуют за курсором мыши] • Уроки Javascript. Как ...
★ [Как сделать новогоднюю открытку на вашем сайте, новогоднее поздравление!] • Уроки Javascript / Как...
★ [Как подключить новогоднюю гирлянду к вашему сайту, новогоднее украшение для сайта] • Уроки Javascript / Как...
★ [Как сделать метель на сайте] • Уроки Javascript / Как...
★ [Как подключить счетчик времени на сайт] • Урок Javascript / Как ...
★ [Что такое JavaScript пишем первую программу] • Уроки Javascript / Что...
★ [Как подключить JavaScript и вывести результат выполнения на экран] • Уроки Javascript / Как...
Где нас можно найти ►
--------------------------------------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
Популярные плейлисты ►
--------------------------------------------
● Уроки программирования для детей по Scratch • Программирование с нул...
● Уроки программирования для детей и подростков на Python • Уроки Python программи...
● Уроки HTML/CSS. Учим быстро и эффективно! • Уроки HTML, CSS Как с...
● Уроки JavaScript. Изучаем основы языка и практикуемся сразу. • Уроки JavaScript от ну...
● Уроки jQuery. Для начинающих, с нуля • Уроки jQuery Подключе...
● Уроки Bootstrap для начинающих, с нуля учимся сразу делать классно! • Уроки Bootstrap для на...
● Компьютерное железо. Лайфхаки. Обзоры. Ноу-хау. Инструкции. Рекомендации. • Компьютерное железо. Л...
► Уроки на сайте 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]
*** Не забываем, что Ютуб не дает писать угловые скобки - поэтому здесь они заменены на квадратные!!! - для использования кода - сделайте наоборот 😊

Пікірлер: 36

  • @wiseplat
    @wiseplat4 жыл бұрын

    Ценю твой ЛАЙК и КОММЕНТ! Facebook: facebook.com/wiseplat/ Личный Facebook: facebook.com/oleg.shpagin ВКонтакте: vk.com/wiseplat Личный ВКонтакте: vk.com/bazatut_ru Instagram: instagram.com/wiseplat/ Мой личный Instagram: instagram.com/shpaginoleg/

  • @Linkoln.Abraham

    @Linkoln.Abraham

    3 жыл бұрын

    Прогер который печатает смотря на клаву. Надеюсь не одними указательными пальцами нажимаешь.

  • @Alexsao-gz7uz

    @Alexsao-gz7uz

    3 жыл бұрын

    А как сделать так чтобы, когда нажимаешь на кнопку выводило как бы подсказку и в подсказке были типо кнопки

  • @hrachyabarseghyan9658
    @hrachyabarseghyan96582 жыл бұрын

    Спасибо за человеческое объяснение.

  • @ewewezze
    @ewewezze2 жыл бұрын

    Спасибо! Очень полезно и кратко объяснил!

  • @lovva177
    @lovva1772 жыл бұрын

    это так интересно, спасибо за урок !

  • @user-qr8gp3qt7k
    @user-qr8gp3qt7k2 жыл бұрын

    супер! то что надо)

  • @AXAAAXAXXAXAXXAA
    @AXAAAXAXXAXAXXAA Жыл бұрын

    Спасибо большое) У меня всё получилось!

  • @Nikola_Sv
    @Nikola_Sv4 жыл бұрын

    я не знаю кто ты но ты бог ты мне очень помог прям очень сильно я эту информацию искал 2 дня

  • @kabukijoe99
    @kabukijoe994 жыл бұрын

    Спасибо за уроки. есть вопрос можно ли только кодом перейти по ссылке на страницу? Есть цикл и на 5-ом шаге нужно автоматом кликнуть по ссылке для перехода на др страницу. спасибо

  • @user-bu9hz3xs7o
    @user-bu9hz3xs7o4 жыл бұрын

    Спасибо, очень помогли

  • @detlaffvandereretein1638
    @detlaffvandereretein16384 жыл бұрын

    Спасибо, посмотрел кучу гайдов и ничего не понял, а тут всё коротко и ясно

  • @user-888azim-97

    @user-888azim-97

    4 жыл бұрын

    нифига себе коротко... начало на 5 минуте

  • @user-888azim-97

    @user-888azim-97

    4 жыл бұрын

    а потом повторяет то же самое, но в ссылке ааа!!!

  • @user-ur3jd5jd5l
    @user-ur3jd5jd5l2 жыл бұрын

    Привет. Очень понятный и полезный урок. Очень помогли. Олег, как говориться, но всё-таки... Посмотрите пож. концепцию Ваших уроков (канала). На кого он рассчитан ? На новичка ? Ему будет сложновато. Тогда надо больше "разжевывать тему". Это урок очень простой и понятный. Може есть смысл в самом начале уроков, в начале этого канала дать несколько знятий по основам Джава Скрипт , по основам программирования ? С уважением и пожеланием успехов. Рекомендую этот канал к изучению, не смотря на отдельные недостатки.

  • @animeshnikaaa8992
    @animeshnikaaa89924 жыл бұрын

    Если б не ваши уроки я бы некогда не научился этой полезной функции

  • @failock4404
    @failock44043 жыл бұрын

    1:01 подумал что у меня windows затупил

  • @alexanderpadalka5708
    @alexanderpadalka57083 жыл бұрын

    🗽

  • @bondekrtv
    @bondekrtv3 жыл бұрын

    Здравствуйте, а как можно сделать в трёх браузерах при одном нажатие кликалась одна кнопка от разных пользователей помогите пожалуйста

  • @pupizoid100
    @pupizoid100 Жыл бұрын

    Недавно начал изучать JS. Подскажите вот у меня есть на странице куча картинок. Как мне упростить этот код в одном файле JS? Чтоб не прописывать его у каждой картинки

  • @ProstoSoft79
    @ProstoSoft793 жыл бұрын

    Помогите пожалуйста написать код для такой задачи Есть два div блока: "блок-1" и "блок-2" и две ссылки: "Открыть блок-1" и "Открыть блок-2" при нажатии на ссылку "Открыть блок-1" открывается div "блок-1" а если нажать на ссылку "Открыть блок-2" открывается div "блок-2" а div блок-1 при этом закрывается. И если div блок-1 в данный момент открыт то никаких действий по нажатию на ссылку "Открыть блок-1" не должно происходить.

  • @Gnorrbreed
    @Gnorrbreed3 жыл бұрын

    писали или нет. но у скобок проблемы с es6. в целом хорошо. но вот... ну вы поняли. ST3 пока руль

  • @voda223
    @voda2234 жыл бұрын

    за brackets лайк

  • @_Fantom_.
    @_Fantom_.4 жыл бұрын

    А как нажатием на одну и ту же кнопку, задавать допустим, цвет элементу, а при повторном нажатии, отключать его?

  • @wiseplat

    @wiseplat

    4 жыл бұрын

    Сделай булеву переменную, у которой каждый раз меняй значение при нажатии кнопки, и соответствующим образом меняй стиль элемента

  • @_Fantom_.

    @_Fantom_.

    4 жыл бұрын

    Сделал с помощью флагов..

  • @user-eu2dq5fk1p
    @user-eu2dq5fk1p3 жыл бұрын

    куда нажимать чтобы скелет сайта сам заполнился (тубуляция это что такое?)

  • @shamsibonushokirova2735

    @shamsibonushokirova2735

    3 жыл бұрын

    тубуляция это Tab

  • @damien1758
    @damien17583 жыл бұрын

  • @minibeast159
    @minibeast1594 жыл бұрын

    А как в html перемещать кнопки с одного места на другое? какой код?

  • @wiseplat

    @wiseplat

    4 жыл бұрын

    Привет! Для этого используются блоки div и выравнивание элементов.

  • @minibeast159

    @minibeast159

    4 жыл бұрын

    Можно пример

  • @user-vj1rf5jw1l
    @user-vj1rf5jw1l2 жыл бұрын

    Здравствуйте

  • @russianincomics1236
    @russianincomics1236 Жыл бұрын

    У меня не получилось(((

  • @maestromuzic4554
    @maestromuzic45543 жыл бұрын

    6оюсь огорчить, не то

  • @franysnow9455
    @franysnow94552 жыл бұрын

    я один в js засунул js?

Келесі