Целью этого урока – построить Приложение для барабана Kit который работает в браузере. Основные понятия, представленные в видео, являются Ключевые события и CSS Animation Отказ
Код
Написание HTML и CSS самостоятельно было простым. Конструктивно, самая большая разница между кодом проекта и моим было то, что я использовал неупорядоченный список для ключей, и я даже не думал использовать атрибуты данных. Мой CSS был похож на CSS Project, хотя я использовал разные имена классов.
Все было хорошо, пока я не попытался написать JavaScript. Я провел более часа, пытаясь понять, как заставить что -нибудь работать. Наконец, я проглотил свою гордость и последовал вместе с видеоуроком (обратите внимание на себя – не тратьте больше, чем 30 минут пытаясь понять это самостоятельно).
Чтобы сосредоточиться на JavaScript на уроке, я заменил свой HTML и CSS с кодом проекта. Таким образом, я бы не провел много времени, перезаписываю большую часть кода с клавишами данных и клавиш CSS, используемыми в JavaScript в уроке.
JavaScript
Основная концепция этого урока – ключевые события . Я создал много веб -сайтов, форм и интерфейсов, но никогда не работал с ключевыми событиями. Это была новая территория для меня, и барабанный комплект был интересным способом узнать о них. Ключевые события начинаются с использования HTML TAG. Я даже не слышал об этом теге, прежде чем я начал этот урок! В каждом теге Атрибут ключа данных Создан, и его значение устанавливается на значение ключевого кода для каждого ключа. Например, буква «A» на клавиатуре имеет ключевой код «65», «S» на клавиатуре имеет ключевой код «83» и так далее. Чтобы нажатая клавиша воспроизводила свой назначенный звук, он связан с Теги со значением ключа данных, как и так:
Каждый аудио тег затем добавляет исходный аудиофайл и вуаля – HTML для этого проекта завершен. Итак, как насчет JavaScript? Мы добираемся до этого сейчас. Теперь он будет иметь гораздо больше смысла, чтобы у нас есть четкий контекст для того, что нужно сделать JavaScript, что является:
- Слушайте
событие KeydownЧтобы играть на барабанном звуке - Оживить ключи на экране, когда их играют
Событие «KeyDown»
Чтобы воспроизвести правильный звук, когда нажата клавиша, нам нужен слушатель событий, который прослушивает событие Keydown с клавиатуры. Вот код для этого слушателя события и функция его триггеров:
Вместо того, чтобы создать слушатель события для каждого ключа в этом проекте, более эффективно создать слушатель события, который слушает любое событие клавиатуры с клавиатуры. Слушатель событий вызывает Playsound () Функция, которая воспроизводит звук барабана, когда нажата клавиша.
Прежде чем идти дальше, мне нужно сделать резервную копию и объяснить, что те ?| const Переменные есть. Const Audio Vianable Определяет элементы HTML, которые воспроизводят звуки барабана в этом приложении. COND KEY VACTIALIUE Определяет элементы HTML по кодам ключей, чтобы правильный звук воспроизводился при нажатии конкретной клавиши. Твист в этой переменной - это использование Шаблон буквальный (См. Ярко-зеленое поле на скриншоте ниже), чтобы включить ключевые коды в качестве переменных. Использование буквального шаблона в этом контексте позволяет простать втянуть код клавиши любой клавиши, нажатой на клавиатуре.
Чтобы убедиться, что звучит воспроизводится только тогда, когда нажаты правильные клавиши, если состояние включено. На простом английском языке он говорит: «Если срабатывает Tag не имеет KeyCode KeyCode Chood атрибут, выйдите из функции. «Это не все, что интуитивно понятно, потому что то, что мы на самом деле делаем, это убедиться, что, если нажата ключ, это связано с меткой с помощью клавиши Data . Например, если вы нажимаете на клавишу «H», вы услышите звук Ride Cymbal. Если вы нажмете клавишу «Y», ничего не произойдет, потому что клавиша ‘Y’ не определен в HTML.
Мы могли бы просто запустить audio.play () Метод, но это создает немного проблемы. Звук играет один раз, но не будет играть снова, если ключ нажал быстры или удерживается. Чтобы позволить ключу несколько раз воспроизводить звук, нам нужно «перемотать» (сбросить) звук. Мы делаем это, установив audio.currentTime до 0. Теперь, когда мы нажимаем один и тот же ключ действительно быстро или удерживайте его, звук играет снова и снова, как следует.
С аудио частью этого проекта охватывалась, давайте копаемся в анимацию.
Анимация
Приличная маленькая анимация, которая выполняется каждый раз, когда играет ключ барабана, происходит посредством комбинации CSS и JavaScript. Во-первых, соответствующие правила CSS:
… и JavaScript:
Здесь есть несколько вещей. Во -первых, нам нужно определить, какие элементы HTML нацелены на Const Keys Отказ Для этого мы используем foreach () Цикл, чтобы добавить слушатель события на каждый ключ на клавиатуре.
Прежде чем добавить слушателя событий, когда был сыгран ключ, анимация запустила, но застряла, как ниже:
Это определенно нежелательный эффект. Мы хотим, чтобы эффект автоматически исчезал после того, как звук играет. Для этого нам нужно использовать новый метод, «переходный день», для слушателя события.
Когда нажимается клавиша барабана, слушатель событий прослушивает свой свойство перехода CSS.
При реализации слушателя событий каждый ключ барабана отображает переход и автоматически возвращается в свое исходное состояние.
Что я узнал из этого проекта
Я научился кодировать события ключа и связывать их с другими тегами HTML, чтобы что -то сделать, например, воспроизводить звук. В то время как анимации не являются для меня чем -то новым, я узнал о методе addeventListener TransitionEnd и планирую использовать его в других проектах.
Получение новых знаний и сразу же поставить его на работу – это здорово, и я это делаю. Помимо технических аспектов этого проекта, я многое узнал о том, как склонен подходить к новым проектам и где мне нужно улучшить.
Проверьте код, глупый!
Один новый трюк, который я узнал, – это запустить console.log (), чтобы проверить каждую новую функцию и метод (если она не является частью JavaScript). Я вообще сначала написал код, а затем вернулся к отладочному. Это огромная трата времени и усилий! Я буду принимать этот новый подход «Тест в качестве кода» к каждому проекту, над которым я работаю.
Вы не знаете, что Вы не знаете
Я потратил время, пытаясь сделать этот проект, не просмотрев курс. Моя вынос от этого – провести время тщательно исследовать что-то, прежде чем я погрузился. Часть меня чувствует, что это обманывает, но это на самом деле нет. Речь идет о рассмотрении аналогичных проектов от других разработчиков и просмотре их кода, прежде чем я прыгну в слепой проект. Это экономит много времени и разочарования.
Я ценю ваши отзывы. Пожалуйста, поделитесь своими мыслями в разделе комментариев. Спасибо!
Оригинал: “https://dev.to/bfrancoeur/javascript30-lesson-1-drum-kit-project-522m”