*стучит по микрофону* эта штука включена? тест 1,2..
Ну .. давайте начнем с этого. Сначала немного о себе.
Привет! Меня зовут Бобби, и последние 10 лет я работаю в области метеорологии.
Хотя я наслаждался своим временем, изучая погоду, я уже давно жаждал нового вызова. Вот где начинается учебный лагерь по программной инженерии. Еще в мае я начал свой путь в качестве студента-программиста на неполный рабочий день в школе Flatiron.
Почему программная инженерия?
По многим причинам, моей главной целью было сделать карьеру, которая была бы столь же увлекательной, сколь и веселой. Кодирование, безусловно, это!
Итак, примерно через полтора месяца я изучаю основы JavaScript и должен сказать, что наслаждался каждой секундой. Определенно было некоторое разочарование, когда концепции не были полностью поняты, но в целом это было очень полезно.
Я хотел бы немного углубиться в одну из тем, которая поначалу вызвала некоторую путаницу. Это тип прослушивателя событий DOMContentLoaded.
Поехали!
Итак, скажем, например, мы создали очень простой файл HTML и написали небольшое количество кода JavaScript:
Затем мы запускаем этот код, открывая наш HTML-файл из нашего терминала и открывая наши инструменты разработки, в которых мы видим эту ошибку ниже:
Ну... это странно... почему мы получили эту ошибку? позволяет погрузиться глубже.
Я склонен упорядочивать свои мысли списками, так что вот как я обрабатываю то, что здесь происходит.
- Когда делается HTTP-запрос, браузер анализирует HTML-файл сверху вниз, создавая наш объектный режим документа (сокращенно DOM). При этом он перейдет к нашей ссылке на файл JavaScript, а затем начнет синтаксический анализ нашего файла JavaScript.
- Там он попытается создать переменную с именем кнопки и сохранить ее в памяти. Затем он запустит оставшуюся часть нашего кода.
- После запуска нашего JS-кода синтаксический анализатор вернется к нашему HTML и завершит синтаксический анализ HTML-документа.
Хорошо, все это имеет смысл, но почему мы получаем эту ошибку?
Основные проблемы заключаются в первой строке нашего кода JavaScript. Мы пытаемся найти элемент в DOM, а затем назначить его нашей переменной кнопки.
Проблема в том, что наш элемент кнопки еще не создан в DOM. Мы знаем это, так как наш код JS был проанализирован ДО элемента кнопки в документе HTML.
Ну хорошо, но как мы обойдем это? Ну, вот тут и появляется «DOMContentLoaded». Мы можем добавить прослушиватель событий к нашему объекту документа, который говорит нашему синтаксическому анализатору полностью создать DOM, а затем вернуться к коду JS, написанному в нашей функции обратного вызова.
Сделав это, у нас больше не будет ошибки, и наш элемент кнопки будет создан до того, как будет сохранен как переменная. Затем мы нажимаем нашу кнопку и вуаля! все работает!
Это, конечно, один из немногих вариантов, который решит эту проблему. Другими вариантами могут быть добавление отсрочки в ваш тег сценария или просто перемещение вашего тега сценария ниже всего вашего кода в вашем теге тела.
Должен признать, что изначально я тяготел к двум более простым вариантам, описанным выше, поскольку DOMContentLoaded не имел для меня полного смысла. Тем не менее, я решил поработать с DOMContentLoaded в лабораторных условиях и очень этому рад. Это определенно дало лучшее понимание того, как создается DOM.
Итак... на этом моя первая запись в блоге завершена! В настоящее время я работаю над завершением своего первого проекта в качестве студента Flatiron. Мне действительно нравилась каждая секунда его создания. Так что ждите скоро новый пост в блоге!
До скорого.