Я изучал графический дизайн в Вашингтонском университете в Сент-Луисе. Именно во время стажировки летом после первого года обучения я заинтересовался программированием. Я работал в компании, занимающейся графическим дизайном, когда обнаружил, что между дизайном и веб-разработкой существует разрыв. Моя начальница, которая является невероятно талантливым графическим дизайнером, была ограничена, потому что у нее не было знаний в области программирования для создания веб-сайтов, которые она создавала. Это распространенная проблема в отрасли, и я не хотел, чтобы она стояла у меня на пути.
Следующим летом я принял участие в обширном учебном лагере по веб-разработке в Кейптауне, Южная Африка. Во время этой программы у меня была возможность развивать свои технические навыки, проходя обучение у экспертов в этой области. Курс был строгим и сложным, но чрезвычайно полезным. Я мгновенно влюбился в то чувство, которое возникает при написании удачной строчки кода.
Когда я вернулся в Вашингтон осенью, я сосредоточился на интерактивном дизайне. Курсы были сильно сосредоточены на HTML и CSS, поэтому мои знания были ограничены, и я не практиковался. Я быстро забыл понятия, которые я ранее выучил во время моего пребывания за границей.
В конце моего выпускного года меня попросили создать простое веб-приложение для моего финального проекта. Я создал приложение под названием Simply Serene, которое предлагает множество механизмов преодоления стресса и беспокойства. По иронии судьбы, это задание увеличило мой уровень стресса и беспокойства, потому что у меня было мало опыта работы с Javascript. Я неустанно работал над расширением своего набора навыков самостоятельно и полагался на Google при ответах на многие вопросы. Однако я уперся в стену, когда понял, что не знаю, какие поисковые слова использовать, и когда я наконец нашел решение, я не знал, как его реализовать.
Вот почему мне не терпелось начать свое путешествие в школе Flatiron. Хотя временами я все еще чувствую себя потерянным, я знаю, что это часть процесса, и я не одинок. В начале программы меня познакомили с основами программирования и передовым опытом. Это позволило мне глубже понять Javascript и, как следствие, самостоятельно решать сложные проблемы.
Я нахожусь в конце своего пути Фазы 1 и очень рад освоению слушателей событий. Прослушиватели событий являются одной из наиболее часто используемых структур JavaScript в веб-дизайне — они позволяют нам добавлять интерактивные функции к элементам HTML, «прослушивая» различные события, происходящие на странице.
Некоторые из наиболее распространенных событий включают:
• Щелчок мышью
• Нажатие клавиши: нажатие и нажатие клавиши
• Отправка формы.
Следуя этим шагам, вы тоже сможете освоить прослушиватели событий:
Как создать прослушиватели событий с помощью addEventListener()
Во-первых, вам нужно будет выбрать элемент, к которому вы хотите добавить прослушиватель, и сохранить его как переменную, чтобы вы могли ссылаться на него позже.
Затем вам нужно указать ему прослушивать событие, вызвав для него метод addEventListener() и передав два аргумента:
1. Имя события, которое нужно прослушивать (щелчок)
2. Функция обратного вызова
Здесь прослушиватель событий прослушивает событие нажатия одной кнопки. Когда пользователь нажимает кнопку, выполняется функция обратного вызова alert().
Совет: используйте console.log("clicked"), чтобы убедиться, что вы вызываете прослушиватель событий для нужного элемента, прежде чем добавлять тонну кода в свою функцию.
В этом случае мы передаем анонимную функцию, потому что мы вызываем нашу функцию обратного вызова только в этом одном месте. Анонимная функция — это функция, не имеющая имени.
Обычно, если мы не назначаем имя функции, у нас нет возможности ее вызвать, и мы теряем доступ к нашей функции после ее создания. Однако здесь прослушиватель событий обнаруживает событие, переданное в качестве второго аргумента, и механизм javascript сохраняет его и выполняет функцию при нажатии кнопки.
Что, если мы хотим добавить одинаковые функции ко всем кнопкам на странице?
Проще и эффективнее передать именованную функцию в качестве второго аргумента, чем анонимную функцию.
Однако давайте отступим.
Во-первых, мы использовали бы метод querySelectorAll(), чтобы выбрать все кнопки и сохранить их как переменную.
Это вернет NodeList, поэтому нам нужно будет пройтись по нему, чтобы добавить прослушиватель событий к каждой кнопке.
Затем мы создаем отдельную именованную функцию и передаем имя функции в качестве второго аргумента.
Таким образом, мы можем использовать его на других элементах, и если мы решим обновить текст предупреждения, нам нужно будет обновить функцию только в одном месте.
Вот и все!
Помните, что изучение нового навыка может быть стрессовым. Не теряйте надежду, если вы не понимаете этого сразу. Продолжайте практиковаться — неудачи — это часть процесса!
Удачного кодирования!
