Это 4 неделя.

Я сижу здесь в четверг вечером и думаю о DOM (как и вы), потому что завтра у нас викторина.

Если прошлогоднего Javascript 101 было недостаточно, с его строками, массивами, функциями и объектными литералами, теперь нам действительно нужно применить это к полезным сценариям (то есть не просто менять предложения на поросячью латынь или записывать в консоль слово «ревень», 100 раз).

Не поймите меня неправильно, мне нравится это испытание — просто на этой неделе я чаще, чем обычно, разочаровывался. Я даже немного поплакала прошлой ночью. Я действительно пролил несколько слез. О состоянии. Я даже не знал, что это было в начале дня — полное безумие.

Так или иначе, я также был расстроен, потому что мужчина выкрикивал оскорбления в мой адрес из фургона, пока я ехал на работу на велосипеде. А еще потому, что я забыл купить молока по дороге домой и даже не смог приготовить себе чашку нормального чая. Так что это был действительно не великий день со всех сторон.

Я отвлекся, вернемся к DOM. Я использую этот пост как способ проверки, поэтому, пожалуйста, поправьте меня, где я ошибаюсь.

ДОМ, ДОМ, ДОООООУМ…

DOM — это объектная модель документа, которая позволяет нам использовать Javascript в браузере.

Для этого мы создаем теги ‹script› в нашем HTML, которые могут быть встроенными или могут ссылаться на файл в другом месте (во многом так же, как таблица стилей CSS ссылается на отдельный файл CSS).

документотносится ко всему, что находится между тегами ‹html›, и работает как объект Javascript, поэтому у него есть свойства (например, документ .body) и методы (например, document.getElementById()), которые мы можем использовать для навигации по нему и управления им.

О, пока я не забыл, прежде всего нам нужно поговорить о IIFE’ (которые я в дальнейшем произношу как «неверные»).

По сути, если вы создаете множество переменных в глобальной области видимости, и вы работаете над сайтом с множеством разных скриптов, библиотек или участников, и ваша глобальная переменная уже используется где-то еще, то вы можете по-царски испортить всем удовольствие. .

Чтобы этого не произошло, вы можете обернуть свой код внутри IIFE, который по сути представляет собой функцию, которая вызывается мгновенно. Любая переменная, которую вы объявляете внутри IIFE, теперь «захвачена» внутри области видимости функции и не может загрязнять остальную часть кода.

Ваш IIFE будет выглядеть примерно так…

Чтобы получить что-то из DOM (например, если мы хотим сделать что-то с помощью HTML ‹button› или ‹p› или ‹div›), вы можете получить доступ к элементам и классам несколькими способами:

1) первый (и лучший) способ — document.getElementById(”button”). Этот метод ищет в DOM любой переданный вами идентификатор (в приведенном выше случае id = «button»). Это работает только в том случае, если объекту, к которому вы хотите получить доступ, был присвоен идентификатор.

2) второй способ - найти вещи по их селекторам CSS, которые могут быть тегом html для элемента или его классом. Таким образом, document.querySelector(”ul”) вернет вам первый неупорядоченный список на странице.

3) вы также можете выбрать несколько элементов, используя классы — document.getElementsByClassName(”menu__item”)— или по имени тега -document.getElementsByTagName(”main”) —или по Селекторы CSS — document.querySelectorAll(”li a”). Они также возвращают вам коллекции HTML или списки узлов, которые представляют собой массивоподобные объекты, которые можно превратить в массивы, чтобы сделать их более полезными для работы в Javascript.

4) вы также можете совершить безумный обход генеалогического древа, то есть DOM, что включает в себя понимание таких вещей, как firstElementChild и nextElementSibling. В этом примере я сохраняю дочерние элементы элемента ‹main› (все элементы ‹p›) в массиве.

ЗАПРОС ДОМА

Хотите узнать размер области просмотра? Или текущее положение прокрутки? Конечно, вы делаете.

Вы можете узнать это, запросив DOM с помощью таких вещей, как window.innerHeight (это даст вам высоту текущей области просмотра, windowтакже объект, который представляет все окно браузера) или window.pageYOffset (что дает вам текущую позицию вертикальной прокрутки.

Лучше создавать переменные для хранения ваших запросов DOM, чем обращаться к DOM снова и снова: это не только сделает ваш код более аккуратным, но и ускорит его выполнение. Выиграть.

Все эти инструменты позволяют вам создавать, изменять и удалять элементы, классы и т. д. на вашей веб-странице с помощью Javascript.

Здесь я добавил список названий цветов на страницу:

Эта возможность вносить изменения обеспечивает интерактивность пользователя, и именно здесь вступают в действие события.

СОБЫТИЯ

Событие в Javascript похоже на «щелчок» мышью пользователя. Или нажав клавишу на клавиатуре вниз. Или отпускание ключа. Или отпустить мышь. Или прокручивая страницу вниз или вверх. Или двигать мышкой. Вы поняли идею.

Мы можем «прослушивать» эти события с помощью Javascript и заставлять элемент что-то делать, если это событие должно произойти.

Мы делаем это с помощью метода, называемого addEventListener(). При обнаружении события запускается функция (называемая обработчиком событий).

Например, мы можем захотеть, чтобы что-то происходило, когда пользователь нажимает кнопку. Вот как бы мы это сделали…

Но вот в чем дело. Мы должны быть осторожны с состоянием. Знаешь, то, из-за чего я плакала прошлой ночью #facepalm.

Функция обработчика событий недолговечна. Он существует до тех пор, пока происходит событие, и не задерживается после него. Это одна ночь функций.

Таким образом, любой переменной, которую вы могли бы объявить внутри функции обработчика событий, утром тоже не будет. Они ушли. Вы не увидите их снова до следующего короткого звонка.

Итак, мораль этой истории такова: объявляйте любые важные переменные, которые вы, возможно, захотите использовать позже (например, чтобы отслеживать, как идут дела) вне обработчика событий. Урок для кода (и для любви?).

Я не знаю, почему это заставило меня плакать вчера. Теперь, когда я превратил это в глупую метафору, я полностью понимаю ее основы. Я знал, что этот блог мне как-то поможет.

В завершение вот особенно сложная задача конца недели.

Задача: на странице с несколькими абзацами, когда пользователь нажимает на абзац, цвет фона должен стать розовым. Пользователь может сделать это для любого количества абзацев, а затем, когда он нажмет кнопку «Удалить», выбранные абзацы будут удалены со страницы.

Результат выглядел так:

И мой код выглядел так…

Веселье!

После двух недель работы с Javascript мы заслужили нашу пятничную выпивку :)

…

Эта статья была первоначально опубликована в октябре 2019 года на tumblr.com.