Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

К примеру, elem.onclick.

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

#браузер #документ #события

Обработчик в атрибуте и свойстве

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя.

P.S. Два примера кода на картинке работают одинаково.

#браузер #документ #события

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.

#браузер #документ #атрибуты_свойств

Расширенная демонстрация работы с атрибутами

Пожалуйста, обратите внимание:

1. getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.

2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123".

3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML.

4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.

#браузер #документ #атрибуты_свойств

Свойства className и classList

Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class.
Поэтому для классов было введено схожее свойство "className": elem.className соответствует атрибуту "class".

Если мы присваиваем что-то elem.className, то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.
Для этого есть другое свойство: elem.classList - это специальный объект с методами для добавления/удаления одного класса.

#браузер #документ #свойства

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип.

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом (как в примере на картинке).

#браузер #документ #свойства_узлов

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body.

Для этого есть метод append, в нашем случае: document.body.append(div).

На картинке выше полный пример

Нестандартные атрибуты, dataset

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset.

Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.

Как в примере на картинке.

Function Declaration

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

Для верхнеуровневых функций это означает момент, когда скрипт начинает выполнение.

Вот почему мы можем вызвать функцию, объявленную через Function Declaration, до того, как она определена.

Следующий код демонстрирует, что уже с самого начала в лексическом окружении что-то есть. Там есть say, потому что это Function Declaration. И позже там появится phrase, объявленное через let

#функции #function_declaration

Вложенные функции

Функция называется «вложенной», когда она создаётся внутри другой функции. Это очень легко сделать в JavaScript.

Мы можем использовать это для упорядочивания нашего кода, например, как в картинке выше.

Здесь вложенная функция getFullName() создана для удобства. Она может получить доступ к внешним переменным и, значит, вывести полное имя. В JavaScript вложенные функции используются очень часто.

Что ещё интереснее, вложенная функция может быть возвращена: либо в качестве свойства нового объекта (если внешняя функция создаёт объект с методами), либо сама по себе. И затем может быть использована в любом месте. Не важно где, она всё так же будет иметь доступ к тем же внешним переменным.

#функции #вложенные

For, while

Для цикла у каждой итерации своё отдельное лексическое окружение. Если переменная объявлена в for(let ...), то она также в нём

Обратите внимание: let i визуально находится снаружи {...}. Но конструкция for – особенная в этом смысле, у каждой итерации цикла своё собственное лексическое окружение с текущим i в нём.

И так же, как и в if, ниже цикла i невидима.

#циклы #for #while

Блоки кода

Мы также можем использовать «простые» блоки кода {...}, чтобы изолировать переменные в «локальной области видимости».

Например, в браузере все скрипты (кроме type="module") разделяют одну общую глобальную область. Так что, если мы создадим глобальную переменную в одном скрипте, она станет доступна и в других. Но это становится источником конфликтов, если два скрипта используют одно и то же имя переменной и перезаписывают друг друга.

Это может произойти, если название переменной – широко распространённое слово, а авторы скрипта не знают друг о друге.

Если мы хотим этого избежать, мы можем использовать блок кода для изоляции всего скрипта или какой-то его части(на картинке выше)

Из-за того, что у блока есть собственное лексическое окружение, код снаружи него (или в другом скрипте) не видит переменные этого блока.

#функции #блоки

Не используйте setAttribute для обработчиков

Такой вызов работать не будет, т.к. setAttribute приводит все в строковый тип.

#браузер #документ #события

if...else

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

В разработке много задач, в которых нужно по-разному обрабатывать данные. Все эти примеры описываются фразой «если ..., то ...»:

- если пользователь вошёл в систему, то показать содержание почтового ящика. В противном случае — форму логина.
- если сумма покупки больше 2000₽, то посчитать скидку 10%.
- если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.

Фразой «если ...» определяется условие. Если условие выполняется, то мы выполняем часть, описанную фразой «то...». Если условие не выполняется, то нужно смотреть на фразу «В противном случае ...», когда она есть.

#переменные #if #else

Цикл

Цикл — это повторяющаяся последовательность действий.

Цикл состоит из условия и тела цикла.

Перед запуском цикла проверяется условие. Если условие истинное, то выполняется блок кода, который называется телом цикла. Затем этот шаг повторяется. Так будет продолжаться, пока условие не станет ложным.

Каждое выполнение тела цикла называется итерацией.

JavaScript предоставляет несколько способов создания цикла. Самые распространённые из них — while и for (инициализация; условие; завершающая операция) {}

#циклы

switch

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

Похож на if...else, но решает более узкую задачу.

#переменные #switch

while

Управляющая конструкция, которая создаёт цикл.

#циклы #while

for

Классический цикл максимально удобен для работы со счётчиками. Управляющая конструкция, которая создаёт цикл.

Что произойдёт при запуске данного кода?

Один раз выполнится инициализация.

Потом создастся переменная i и ей присвоится значение 0, let i = 0. Эта переменная доступна только пока работает цикл, так как мы её объявили через let. Переменные созданные через let доступны только в рамках блока, где они созданы. В нашем случае блок — это тело цикла и шаги инициализации, условия и итоговой операции.

Идёт проверка условия i < 5. Значение переменной в текущий момент времени это 0. 0 меньше 5, значит условие истинно.

Так как условие истинно, выполняется тело цикла: console.log('Счётчик равен: ' + i);

#цикл #for #переменная

Инструкция

Работа с данными — это ещё не все, что нужно для создания программы. Выражения не решают много вопросов: Как описать с помощью выражения действие по определённому условию? Да, у нас будут данные и можно написать выражение, чтобы вычислить условие, но как сказать программе делать то или иное действие? А если какое-то действие нужно повторить несколько раз?

Для этого в языках программирования существуют инструкции. Они не являются выражениями, но позволяют правильно настроить порядок их выполнения.

#выражения #инструкции

Выражения

Любая программа — это набор операций. Чтобы описать программу, разработчик пишет различные выражения на языке программирования. Посмотрим на самое простое выражение — откроем консоль любого браузера и введём туда элементарное выражение — число 123.

Когда мы нажмём Enter, консоль ответит нам тем же самым числом. Поздравляю, это было самое простое выражение. Интерпретатор JavaScript выполнил его и вернул результат последней (в данном случае единственной) операции.

#числа #выражения

Примитивные типы данных

Когда мы объявляем переменную и сохраняем в неё примитивное значение, то в память записывается какое-то количество байт, которое описывает это значение. Таким образом можно сказать, что наша переменная уже сразу содержит эти байты.

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

Когда мы сравниваем два значения, то у нас по сути произойдёт побайтовое сравнение этих величин.

#данные #const