*стучит по микрофону* эта штука включена? тест 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. Мне действительно нравилась каждая секунда его создания. Так что ждите скоро новый пост в блоге!

До скорого.