Нестандартные атрибуты, 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

Ссылочные типы данных

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

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

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

#данные #const

Мутации и неизменяемость

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

Если нужно безопасно модифицировать объект, то для начала придётся его скопировать. Скопировать объект можно двумя способами: через Object.assign() или используя спред-синтаксис .

#данные #const

Функция

Функция — это блок из различных команд. С ней легко создавать порядок в коде программы, избавляясь от ненужных повторений и запутанных частей.

Один из способов создания — просто объявить функцию в коде (по-английски Function Declaration).

#функции

Подробнее

Объявление функции

Объявление функции расшифровывается так:

1. В начале идёт ключевое слово function, чтобы заявить о наших намерениях объявить функцию;
2. Затем имя функции, чтобы можно было отличить одну функцию от другой (у нас лаконичное hello, но бывает лаконичное ничего...);
3. В круглых скобках мы указываем параметры (можно и без), которые передадим внутрь;
4. Наконец, тело функции — это код в фигурных скобках, который выполняется при её вызове.

#функции #alert

Подробнее

.findIndex()

Метод findIndex() возвращает индекс первого найденного в массиве элемента, который подходит под условие переданной функции. Если же ни одного подходящего элемента не найдётся, то метод вернёт -1.

Если вам нужно получить элемент, а не его индекс, то используйте метод find(). А если необходимо проверить наличие чего-либо в массиве, то сначала обратите внимание на метод includes().

#массив #findIndex

Подробнее

Параметры

При вызове функции можно передать данные, они будут использованы кодом внутри.

Например, функция showMessage принимает два параметра под названиями user и message, а потом соединяет их для целого сообщения. При вызове функции ей нужно передать аргументы. Функцию можно вызывать сколько угодно раз с любыми аргументами.

#функции #параметры