Что такое JavaScript

JavaScript – это язык программирования: на нём записывают команды и правила, по которым программа себя ведёт. Знакомиться с ним удобнее всего в браузере – там он уже установлен у каждого.

Веб-страница обычно собрана из трёх языков. HTML задаёт структуру: заголовки, кнопки, картинки. CSS – внешний вид: цвета, отступы, шрифты. JavaScript – поведение: страница реагирует на действия пользователя и обновляется без перезагрузки.

5 HTML 3 CSS JS JavaScript

JavaScript оживляет веб-страницы

Соберите страницу сами – слой за слоем. Перед вами небольшой магазин: HTML создаёт каталог с фильтрами, корзиной и страницами, CSS задаёт внешний вид, а JavaScript добавляет поведение.

На JavaScript в браузере работают не только кнопки и формы – вот целая игра, нарисованная на холсте Canvas:

JavaScript за пределами браузера

На JavaScript пишут и серверный код (Node.js), и консольные утилиты, и настольные приложения (VS Code, Discord). В этом курсе мы изучаем сам язык – он пригодится в любой из этих сред.

Движок: как выполняется ваш код

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

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

Как движок выполняет программу – строка за строкой
console.log('старт');​
Первая инструкция выполняется: console.log выводит в консоль 'старт'.
console.log(2 + 3);​
console.log('финиш');​
Консоль
старт

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

syntax.jsjs
console.log('до ошибки');​console.log('привет);  // забыта закрывающая кавычка​
Консоль
SyntaxError: Invalid or unexpected token
Ошибка записи останавливает весь файл – не напечаталась даже корректная первая строка.

Теперь попробуйте сами – ниже настоящая программа, и её можно менять. console.log(...) выводит информацию в консоль – так программа показывает результат.

Задание: измените приветствие на своё имя, а выражение 2 + 3 замените другим вычислением – и запустите программу ещё раз.

Один язык – много сред

Язык везде одинаковый, различаются встроенные возможности.

Сам язык везде один: переменные, функции и циклы работают одинаково и в браузере, и в Node.js. Разница – в дополнительных возможностях среды: браузер умеет менять страницу и реагировать на клики, а Node.js – читать файлы и работать с сетью.

Язык один – возможности добавляет среда.

// теперь вы знаете

  1. JavaScript – язык программирования
  2. Браузер и Node.js – разные среды исполнения
  3. Язык даёт переменные, функции и другие конструкции
  4. Среда добавляет работу со страницей, сетью, файлами и устройствами

Проверьте себя

Что делает движок JavaScript?

Отметьте все верные утверждения.

Выбери все верные варианты

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

console.log('начало');​
console.log('привет);​
console.log('конец');​
Это начало курсаJavaScript – оглавлениеСледующий урок Первый код: консоль и console.log
← → переключают уроки · не работают при фокусе в полях ввода