Первая программа

Что такое JavaScript

Страница, которую вы умеете делать, пока только показывает. Она не считает сумму заказа, не проверяет форму, не прячет меню по нажатию. Всё это делает JavaScript — третий язык страницы и единственный из трёх, который действует.

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

Отсюда и новое слово: программа. Это список указаний, которые браузер выполняет сверху вниз, по одному.

let цена = 100;
let скидка = 20;
console.log(цена - скидка);

Три строки — три шага. Запомнить сто. Запомнить двадцать. Напечатать разницу. Браузер не угадывает и не переставляет: он делает ровно то, что написано, и ровно в том порядке.

Это и есть главная перемена по сравнению с разметкой. Там вы описывали результат: вот заголовок, вот карточка, вот отступ. Здесь вы описываете путь к результату — и путь надо продумать целиком, потому что додумывать за вас никто не станет.

JavaScript живёт не только в браузере. На нём пишут серверы, приложения для телефона, программы для рабочего стола и даже управление лампочками. Но начинается всё с браузера: это единственное место, где он есть у всех и где ничего не нужно устанавливать.

console.log

Самая первая команда, которую учат в любом языке, — «напечатай это».

console.log("Привет!");

Разберём по частям. console — консоль, то самое окно в браузере. log — «записать». Точка между ними означает «возьми у консоли её умение записывать». Скобки — то, что нужно записать. Точка с запятой — конец команды.

console.log("Привет!");
console.log(2 + 2);
console.log("2 + 2");

Третья строка — важная. В кавычках текст, и он печатается как есть. Без кавычек — выражение, и оно сначала вычисляется. Кавычки превращают что угодно в буквы.

Это различение — первое, на чём спотыкаются. Кавычки не «оформляют» текст и не делают его красивее: они меняют смысл написанного. 100 - 20 — это задача, "100 - 20" — это надпись.

Печатать можно несколько значений сразу, через запятую:

console.log("Итого:", 100 - 20, "рублей");

Порядок и ошибки

Программа выполняется строго сверху вниз. Это звучит очевидно, пока не наступишь:

console.log("раз");
console.log("два");
console.log("три");

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

Теперь про ошибки. Их будет много, и это нормально — их делают все, всегда.

console.log("Привет!)

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

Ошибки бывают трёх видов, и различать их полезно:

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

Первые две браузер называет сам. Третью не заметит никто, кроме вас, — и именно поэтому console.log в середине программы бывает полезнее любого учебника.

Способ разбираться с третьим видом простой и работает всегда: напечатать то, в чём сомневаешься. Не уверены, что в переменной лежит число, — напечатайте её. Не уверены, что программа дошла до этой строки, — напечатайте что угодно рядом. Догадки в программировании стоят дороже проверки: проверка занимает десять секунд.

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