Честно говоря, я должен сказать, что одна из самых крутых вещей, которые я узнал во время прохождения Bootcamp, — это кнопка. Перед тем, как завершить свой первый проект, я часто упускал из виду галочку «нажмите здесь, и что-то произойдет», которую можно найти в каждом приложении. От перехода на страницу назад до редактирования внешнего вида вашего персонажа — многое скрывается за кулисами в отношении кнопки.
Эй, послушай
Он начинается с использования HTML, чтобы сказать: «Эй, можешь сделать кнопку». Мы используем тег «кнопка», чтобы создать его с небольшим текстом между ними и тем, что мы хотели бы, чтобы кнопка сказала. Ему также должен быть присвоен «id», чтобы его можно было найти позже. Мы назначим его «click-me».
И результат:
Не пытайтесь нажать на кнопку, она пока ничего не сделает, кроме, ну, «нажмите». В файле Javascript нам нужно получить кнопку с помощью Query Select и назначить ее переменной. Присвоение этого переменной помогает сделать код более аккуратным. Мы можем использовать идентификатор, установленный в предыдущей строке кода, который сообщает Javascript, где находится кнопка.
Далее мы добавим «слушатель», который прослушивает происходящее. Он сообщает кнопке, что должно произойти «событие», и ждет его. Мы используем метод addEventListener, который принимает событие, здесь мы назовем его «щелчок», и функцию или выражение. Это аргументы, которые требуются addEventListener для выполнения действия. Функция или выражение будут «делать что-то» после запуска события (щелчка) всякий раз, когда оно запускается.
Здесь мы используем метод оповещения, чтобы убедиться, что кнопка была нажата и действие было выполнено успешно. Вверху страницы всплывает это.
Какова ваша функция
«Функция» функции состоит в том, чтобы делать что-то при вызове. Функции — это нечто большее, но, проще говоря, функция — это то, как что-то происходит. Во время моего путешествия по расшифровке Матрицы я узнал три разных способа выполнения функции. Каждый тип функции имеет сходство, например получение параметров, и немного отличается в том, как он используется.
Нормальная работа
Первый стиль функции, который я изучил, мы назовем нормальной функцией. Он определяется словом «функция», за которым следует имя функции, которое может состоять из нескольких слов, но без пробелов, а первое слово в нижнем регистре. Установив эту функцию в качестве аргумента внутри нашего прослушивателя событий, мы можем вызвать обычную функцию, а затем определить ее. С помощью этой функции ее можно определить до или после ее вызова, и она будет работать одинаково.
Результаты такие же. Когда мы нажимаем кнопку «Я кнопка», появляется предупреждение с сообщением «Меня нажали!! Ура!". С помощью этой функции я мог решить вызвать ее из нескольких мест или использовать функцию с другой кнопкой без необходимости изменения кода. Мы также используем эту функцию, когда нам нужно несколько строк кода внутри самой функции.
АНОНИМНАЯ ФУНКЦИЯ
С помощью анонимной функции мы можем напрямую поместить только что созданную функцию в прослушиватель событий. «Анонимный» означает, что у него нет имени, поэтому, когда мы удалим имя, оно будет выглядеть так.
Еще раз, результаты те же. Здесь мне не нужно отделять функцию от события и действия Event Listener. Сама функция является вторым аргументом. Преимущество этой функции проявляется, когда требуется всего несколько строк кода.
Функция стрелки
Функция стрелки удаляет слово «функция» и добавляет «стрелку» (=›). Это та функция, которую я использовал ранее, когда представлял прослушиватель событий.
Это имеет то преимущество, что находится на одной строке, если сама функция имеет только одну строку кода. Лучшая часть стрелочной функции заключается в том, что она возвращается автоматически без явного кодирования вашей функции для «возвращения» значения или результата. Два других типа функций нуждаются в методе возврата. В этом случае возврат не требовался, так как предупреждение было выполненным действием.
Кнопка уже не такая загадочная, как была до того, как я начал это путешествие, но стала более увлекательной. С помощью 3 строк кода я смог создать простую кнопку, которая захватывающим образом выражала факт нажатия. Возможные результаты нажатия кнопки могут сильно различаться. Особенно при использовании любой или комбинации упомянутых функций на сайте можно сделать больше, чем просто «назад» или «вперед». Кнопки — это аспект, который при правильной настройке может привести к тому, что все произойдет простым щелчком.
