ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JavaScript Учебник

JavaScript Старт Введение в JavaScript Справочники Редакторы кода Консоль разработчика Привет, Мир! Структура кода Строгий режим Переменные Типы данных Alert. Prompt. Confirm Преобразование типов Базовые Операторы Операторы сравнения If... Else Логические операторы Оператор объединения Циклы While и For Switch Базовые функции Функции-выражения Функции-стрелки Особенности JavaScript Дебаггинг в Chrome Стиль кода Комментарии Ниндзя-код Тестирование с Mocha Полифилы Объекты Копирование объектов Уборка мусора Методы объекта Конструктор, New Опциональная цепочка Тип данных Symbol Преобразование объектов Методы примитивов Числа Строки Массивы Методы массивов Перебираемые объекты Map и Set WeakMap и WeakSet Object.keys, values, entries Деструктурирующее присваивание Дата и время Формат JSON Рекурсия и стек Остаточные параметры и оператор расширения Замыкание Ключевое слово var Глобальный объект Объект функции, NFE Синтаксис "new Function" Планирование: setTimeout и setInterval Декораторы и переадресация вызова, call/apply Привязка контекста к функции Повторяем стрелочные функции Флаги и дескрипторы свойств Свойства - геттеры и сеттеры Прототипное наследование F.prototype Встроенные прототипы Методы прототипов Класс: базовый синтаксис Наследование классов Статические свойства и методы Приватные и защищённые методы и свойства Расширение встроенных классов Проверка класса: "instanceof" Примеси Обработка ошибок, "try..catch" Пользовательские ошибки Введение: кэлбэки Промисы Цепочка промисов Промисы: обработка ошибок Promise API Промисификация Микрозадачи Async/await Генераторы Асинхронные итераторы и генераторы Модули. Введение Экспорт и импорт Динамические импорты Proxy и Reflect Eval: выполнение строки кода Каррирование Побитовые операторы BigInt Intl: интернационализация в JavaScript

Браузер: документ, события, интерфейсы

Браузерное окружение, спецификации DOM-дерево Навигация по DOM-элементам Поиск: getElement*, querySelector* Свойства узлов: тип, тег и содержимое Атрибуты и свойства Изменение документа Стили и классы Размеры и прокрутка элементов Размеры и прокрутка окна Координаты Введение в браузерные события Всплытие и погружение Делегирование событий Действия браузера по умолчанию Генерация пользовательских событий Основы событий мыши Движение мыши: mouseover/out, mouseenter/leave Drag'n'Drop с событиями мыши Клавиатура: keydown и keyup События указателя Прокрутка Свойства и методы формы Фокусировка: focus/blur События: change, input, cut, copy, paste Отправка формы: событие и метод submit Страница: DOMContentLoaded, load, beforeunload, unload Скрипты: async, defer Загрузка ресурсов: onload и onerror MutationObserver: наблюдатель за изменениями Selection и Range Событийный цикл: микрозадачи и макрозадачи

JavaScript. Уроки для начинающих

JavaScript Структура кода


Начнём изучение языка JavaScript с рассмотрения основных «строительных блоков» кода.


Инструкции

Инструкции – это синтаксические конструкции и команды, которые выполняют действия.

Мы уже видели инструкцию alert('Привет, мир!'), которая отображает сообщение «Привет, мир!».

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

Например, здесь мы разделили сообщение «Привет, Мир!» на два вызова alert:

alert('Привет,'); alert('Мир!');

Но обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:

alert('Привет,');
alert('Мир!');

Точка с запятой

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

Так тоже будет работать:

alert('Привет,')
alert('Мир!')

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

alert(3 +
1
+ 2);

Код выведет 6, потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком '+', значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

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

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

[1, 2].forEach(alert)

Пока нет необходимости знать значение скобок [] и forEach. Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится 1, а затем 2.

А теперь добавим alert перед кодом и не поставим в конце точку с запятой:

alert('Сейчас будет ошибка')
[1, 2].forEach(alert)

Теперь, если запустить код, выведется только первый alert, а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после alert:

alert('Теперь всё в порядке'); [1, 2].forEach(alert)

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут 1 и 2.

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками [...]. И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:

alert('Сейчас будет ошибка')[1, 2].forEach(alert)

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.


Комментарии

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

Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.

Однострочные комментарии начинаются с двойной косой черты //.

Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Как здесь:

// Этот комментарий занимает всю строку
alert('Привет');
alert('Мир'); // Этот комментарий следует за инструкцией

Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.

Как вот здесь:

/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
alert('Привет');
alert('Мир');

Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */, он не будет исполняться.

Это бывает удобно для временного отключения участка кода:

/* Закомментировали код
alert('Привет');
*/
alert('Мир');

Используйте горячие клавиши!

В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl+/ для однострочного комментария и что-то вроде Ctrl+Shift+/ – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl и Option вместо Shift.


Вложенные комментарии не поддерживаются!

Не может быть /*...*/ внутри /*...*/.

Такой код «умрёт» с ошибкой:

/*
/* вложенный комментарий ?!? */
*/
alert( 'Мир' );

Не стесняйтесь использовать комментарии в своём коде.

Комментарии увеличивают размер кода, но это не проблема. Есть множество инструментов, которые минифицируют код перед публикацией на рабочий сервер. Они убирают комментарии, так что они не содержатся в рабочих скриптах. Таким образом, комментарии никоим образом не вредят рабочему коду.

Позже в данном учебнике на нашем сайте W3Schools на русском будет глава Качество кода, которая объяснит, как лучше писать комментарии.