ВВЕДЕНИЕ:
Если вы еще не знали, создание веб-сайта только с HTML и CSS или даже только с HTML вполне возможно. Но при этом вы упускаете прекрасную возможность включить интерактивность. Сегодня мы обсудим важность интерактивности и один из лучших способов включить ее в ваш сайт.
НЕМНОГО ИСТОРИИ JAVASCRIPT:
JavaScript впервые появился в 1995 году, через два года после выпуска HTML. С тех пор одной из его главных ролей была помощь HTML и CSS в разработке веб-сайтов и веб-приложений. К настоящему моменту вы можете спросить себя, зачем был изобретен JavaScript, если без него вполне возможно создавать веб-сайты? Что ж, ответ на этот вопрос — интерактивность.
JAVASCRIPT И ИНТЕРАКТИВНОСТЬ:
Как мы уже говорили, основная роль JavaScript во всей веб-разработке — интерактивность. Итак, что я имею в виду под интерактивностью, когда речь идет о веб-разработке? Google определяет интерактивность в компьютерном мире как «способность компьютера реагировать на действия пользователя». Теперь подумайте о своей любимой веб-странице на мгновение. У него есть кнопки? Например, у него есть текстовое поле, где вы можете поделиться новым рецептом, который вы нашли. Возможно, даже сердце, которое при нажатии будет светиться красным, а количество лайков увеличится. Все эти вещи связаны с интерактивностью браузера пользователя JavaScript. Без JavaScript веб-сайты, которые вы знаете и любите, становятся пресными. Один из лучших способов включить интерактивность — прослушивание событий.
ПРОСЛУШИВАНИЕ СОБЫТИЙ В JAVASCRIPT:
Прослушивание событий — это возможность нашей веб-страницы прослушивать «событие», например нажатие кнопки, а затем выполнять действие после того, как это событие произошло. Прослушивание событий — это способ, которым мы можем сделать кнопки, формы или пользователя, перемещающего мышь над элементом, более интерактивными. Позвольте мне привести пример. Допустим, вы разрабатываете веб-сайт, на котором есть кнопка, и вы хотите, чтобы ваш пользователь мог нажать эту кнопку, чтобы написать «Привет!» на экран. Вы можете знать, как создать кнопку с помощью HTML, но как сделать так, чтобы сообщение печаталось? Вот тут-то и появляется удивительный метод JavaScript .addEventListener.
.addEventListener:
.addEventListener — это встроенный метод JavaScript, который позволяет нам делать то, что обсуждалось в предыдущем абзаце. Итак, как это работает? Метод принимает два параметра: 1) тип события для прослушивания. 2) Что делать, когда происходит указанное событие. Начиная с первого параметра, мы можем прослушивать множество различных событий. Возвращаясь к нашему примеру выше, мы хотим услышать «щелчок» этой кнопки. Итак, мы знаем, что прослушиваем событие «щелчок». Со вторым параметром нам нужно создать функцию, которая будет регистрировать наше сообщение. Для этого мы можем создать анонимную функцию, которая принимает наше событие в качестве параметра, а затем регистрирует «Hello!» К нашей консоли. Вот как все это вместе может выглядеть:
.addEventListener("click", function(event) {
console.log("Hello!");
}
Возможно, вы пробовали приведенный выше пример с большими надеждами, но когда вы запустили программу, консоль вернула ошибку. Вы, возможно, перепроверили его пару раз, но безрезультатно. Причина, по которой наша консоль продолжает выдавать ошибку, заключается в том, что консоль не знает, где именно мы прослушиваем это событие! Итак, как мы сообщаем нашему методу, что мы хотим прослушивать нажатие нашей кнопки? Один из наиболее распространенных способов сделать это — взять нашу кнопку по ее HTML-коду и присвоить его переменной, чтобы мы могли использовать ее в нашем коде JavaScript. Скажем, идентификатор нашей кнопки — htmlBtn, чтобы получить его из нашего HTML-документа, мы можем использовать document.getElementById с нашим идентификатором htmlBtn и назначить его переменной, как показано ниже:
const htmlBtnVar = document.getElementById("htmlBtn");
Теперь, когда у нас есть элемент кнопки, мы можем добавить прослушиватель событий!
htmlBtnVar.addEventListener("click", function(event) {
console.log("Hello!");
}
Вы сделали это! Вы успешно добавили интерактивную кнопку на свою веб-страницу, похлопайте себя по плечу.
ЗАКЛЮЧЕНИЕ:
Теперь вы знаете, как добавить интерактивности на свою веб-страницу. Однако это только одна часть головоломки. В мире интерактивности веб-сайтов на JavaScript есть еще много чего интересного, но пусть это вас не обескураживает. Я надеюсь, что вы продолжите свое приключение в этом удивительном мире веб-разработки!
