JavaScript

JavaScript (сокращённо JS) — язык программирования, который понимает каждый браузер. Кнопки, которые что-то делают, формы с проверкой, меню, карты, чаты, игры прямо на странице — всё это JavaScript. С программой Node.js тот же язык работает и без браузера: на нём пишут серверы сайтов, утилиты для командной строки, сборщики проектов.

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

Стандарт и версии

Язык описывает стандарт ECMAScript. Большое обновление вышло в 2015 году — ES2015, его ещё называют ES6: с ним появились let и const, стрелочные функции, классы, промисы. С тех пор новая редакция стандарта выходит каждый год. Курс учит современному языку: всё, что в нём есть, работает в свежих версиях Chrome, Firefox, Edge, Safari и Node.js.

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

Что нужно для начала

• Браузер — любой современный. В нём уже есть консоль для запуска кода: она открывается клавишей F12.
• Редактор кода. Подойдёт бесплатный Visual Studio Code или Notepad++; Блокнот Windows тоже справится, но без подсветки кода.
• Node.js — бесплатная программа для запуска JavaScript на компьютере. Как её поставить — в справке Как установить Node.js.

Знать HTML заранее не обязательно: всё нужное для работы со страницей объясняется по ходу. Чтобы делать свои сайты, пригодится тема HTML и CSS.

Как пройти курс

Уроки идут по порядку: от первой строчки кода до запросов к серверу. Первые восемь уроков — сам язык; примеры в них запускаются в Node.js или в консоли браузера, а под каждой программой показано, что она выводит. Урок о DOM учит управлять страницей, последний урок — асинхронности: таймерам, промисам и fetch.

Набирайте примеры сами, а не копируйте: ошибки при наборе и их исправление учат не меньше, чем сам текст. Меняйте числа и строки в примерах и смотрите, что изменилось. После каждого урока — несколько вопросов для проверки, в конце — итоговый тест. В справочнике — короткие ответы на частые вопросы: как округлить число, перевести строку в число, получить значение поля формы, что значит ошибка Cannot read properties of null.

Курс с нуля

1. 1.Первая программа: где запускать JavaScriptТри места, где работает JavaScript: консоль браузера, страница .html с тегом script и Node.js. Первая программа, комментарии и первые ошибки.
2. 2.Переменные let и const, типы данныхКак хранить значения в переменных let и const, какие бывают типы данных — числа, строки, логические, undefined, null, объекты — и как узнать тип через typeof.
3. 3.Операторы и сравнение: == и ===Арифметика, склейка строк, сравнение чисел и строк, разница между == и ===, логические операторы && и ||, оператор ?? и приведение типов.
4. 4.Условия: if, else, switch и тернарный операторКак программа выбирает, что делать: if, else if и else, истинные и ложные значения, тернарный оператор и switch — с примерами и частыми ошибками.
5. 5.Циклы: for, while и for...ofКак повторять действия: цикл for со счётчиком, while и do...while, перебор массивов и строк через for...of, break и continue, вложенные циклы и бесконечный цикл.
6. 6.Функции и стрелочные функцииКак объявить функцию, передать ей параметры и вернуть результат через return, значения по умолчанию, область видимости, стрелочные функции и функции обратного вызова.
7. 7.Массивы и методы map, filter, reduceКак создать массив, добавить и удалить элементы, найти значение, перебрать, преобразовать через map, отобрать через filter, свернуть через reduce и правильно отсортировать числа.
8. 8.Объекты и JSONКак хранить данные в объектах: свойства и методы, this, перебор через Object.keys и Object.entries, деструктуризация, оператор ?. и перевод объектов в JSON и обратно.
9. 9.DOM: элементы страницы и событияКак JavaScript управляет страницей: найти элемент через querySelector, поменять текст, классы и атрибуты, создать и удалить элементы, обработать нажатие кнопки и отправку формы.
10. 10.Асинхронность: setTimeout, промисы, async/await и fetchКак JavaScript ждёт таймеры и ответы сервера, не останавливая страницу: setTimeout, промисы, then и catch, async/await, try...catch, Promise.all и запросы через fetch.

Начать с первого урока

Справочник

• npm install: как установить пакетКак поставить библиотеку через npm: npm init, npm install, что такое package.json, package-lock.json и node_modules, установка для разработки и глобально, npx и частые ошибки npm.
• Как вывести в консоль: console.log и другиеКак вывести значение в консоль браузера или Node.js: console.log, несколько значений, шаблонные строки, console.error, console.table и почему вывод иногда не виден.
• Как округлить число: Math.round, toFixed и другиеКак округлить число в JavaScript до целого и до двух знаков после запятой: Math.round, Math.floor, Math.ceil, Math.trunc, toFixed — и почему 1.005 округляется до 1.00.
• Как перевести строку в числоСтрока в число через Number, parseInt, parseFloat и унарный плюс: чем они отличаются, почему Number пустой строки даёт 0, как быть с запятой и как проверить, что получилось число.
• Как подключить JavaScript к HTMLКак подключить файл .js к странице тегом script с атрибутом defer, куда его ставить, как писать путь к файлу и почему скрипт может не работать.
• Как получить значение inputКак прочитать текст из поля input, число из type=number, флажок checkbox, выбранный пункт select и radio — и почему value пустой, если прочитать его при загрузке страницы.
• Как проверить, что массив пустойПроверка пустого массива через length, почему не работают if (arr) и сравнение с пустым массивом, как проверить, что значение — массив, и пуст ли объект или строка.
• Как сделать таймер: setInterval и обратный отсчётТаймер и обратный отсчёт на JavaScript: setTimeout и setInterval, как остановить через clearInterval, вывод минут и секунд на страницу и почему интервал со временем отстаёт.
• Как скопировать объект или массивПочему присваивание не копирует объект и как сделать копию: оператор spread, Object.assign, structuredClone для вложенных данных и чем плох JSON.parse(JSON.stringify()).
• Как сравнить два массиваПочему одинаковые массивы не равны через === и как сравнить их по содержимому: every, JSON.stringify и его ловушки, без учёта порядка, вложенные массивы, разница между массивами.
• Как удалить элемент из массиваУдаление из массива по индексу через splice, по значению через indexOf или filter, первого и последнего элемента, и почему delete оставляет дыру.
• Как установить Node.jsУстановка Node.js и npm в Windows, macOS и Linux: какую версию выбрать, установщик с nodejs.org, менеджер версий nvm, проверка node -v и что делать, если команда не найдена.
• Ошибка Cannot read properties of nullПочему появляется Uncaught TypeError: Cannot read properties of null (reading ...) и как исправить: скрипт до элемента и defer, опечатка в селекторе, элемент на другой странице.
• Ошибка ReferenceError: … is not definedЧто значит ReferenceError is not defined и как найти причину: опечатка, переменная из другой области видимости, порядок скриптов, document и window в Node.js, require в браузере.
• Случайное число: Math.random и целое в диапазонеКак получить случайное число в JavaScript: Math.random, целое от min до max включительно, случайный элемент массива, перемешивание и случайность для паролей через crypto.
• Чем undefined отличается от nullundefined — значение не задано, null — пусто нарочно. Откуда берётся каждое, как их проверить одной строкой и где разница важна: ?? и параметры по умолчанию, JSON.
• Чем отличаются var, let и constРазница var, let и const: область видимости функции и блока, обращение до объявления, повторное объявление, переприсваивание и классическая ловушка var в цикле с setTimeout.

Официальная документация

• Справочник JavaScript на MDN — https://developer.mozilla.org/ru/docs/Web/JavaScript
• Документация Node.js — https://nodejs.org/docs/latest/api/
• Документация npm — https://docs.npmjs.com/

Близкие темы

HTML и CSSPHPPython