Глубокое погружение в JavaScript началось!
За последние 5 недель я начал изучать основы JavaScript и его возможности для того, чтобы сделать веб-страницы интерактивными, доступными и организованными.
На этой неделе я сосредоточился на развитии понимания трех концепций, необходимых для изучения JavaScript: стек вызовов, очередь событий и DOM. Я решил написать о каждой концепции в контексте класса начальной школы, чтобы проверить свое понимание и укоренить большие идеи в среде, с которой я знаком.
Стек вызовов. Измученный учитель сидит перед классом в четверг днем. Некоторые ученики бегают по классу; большинство из них выстроились перед ней, у каждого есть вопрос, просьба или история. Эта очередь студентов похожа на стек вызовов — очередь событий, по которым нужно двигаться по порядку.
Некоторые просьбы студентов могут быть рассмотрены прямо здесь и сейчас. Другие требуют, чтобы что-то произошло; может быть, ученику нужно вернуться с каникул, чтобы поиграть вместе, или ему нужно найти свой научный журнал, чтобы закончить домашнюю работу. Эти учащиеся ожидают события, чтобы обработать свой запрос. В стеке вызовов многие функции JavaScript сопровождаются прослушивателями событий, которые определяют, что должно произойти для выполнения этой функции.
Очередь событий. Сосредоточьтесь на одном ученике, которому нужно найти свой научный журнал, прежде чем приступить к домашнему заданию. Пока этот ученик ищет, другие ученики продолжают свою работу — один ученик, ищущий свою тетрадь, не сдерживает других учеников в комнате. Вот как работает очередь событий: одна функция, ожидающая обработчика события, не останавливает выполнение других функций. Вместо этого очередь событий удерживает эти запросы событий до тех пор, пока они не произойдут.
Когда учащийся, наконец, находит свой научный журнал, он может приступить к домашнему заданию — запускается событие, и функция может выполняться. То же самое происходит, когда пользователь инициирует событие щелчка или событие успеха — событие запускается, и функция может выполняться.
Объектная модель документа DOM: чтобы объяснить DOM, мы делаем шаг из класса и идем по коридору в главный офис. Здесь информация о студентах систематизируется и анализируется для поддержки обучения и структуры класса. Директор имеет широкое представление об учениках в списках классов. Эти списки предоставляют систематизированную информацию о том, кто присутствует в каждом классе. DOM похож; theDOM — это API для HTML, определенного на странице. Это означает, что DOM используется для представления и взаимодействия с HTML на странице. Каждый раз, когда загружается страница, создается экземпляр DOM — так же, как и каждый день, учителя определяют посещаемость, и экземпляр их класса устанавливается на день.
В школе директор взаимодействует с этими данными об учениках для планирования, внесения изменений и организации. JavaScript делает то же самое с DOM. Функции JavaScript взаимодействуют с моделью DOM, которая используется для передачи изменений в HTML.
Укоренение больших концепций компьютерного программирования в моем комфортном пространстве образования помогло мне глубже понять. Я могу вернуть абстрактные идеи к чему-то конкретному и знакомому.
