Что такое JavaScript? Первая программа

Когда ты нажимаешь «Нравится» в соцсети, сердечко сразу краснеет, а страница не перезагружается. Ты двигаешь карту пальцем, а поле поиска подсказывает слова, пока ты ещё печатаешь. За всем этим обычно стоит один и тот же язык — JavaScript.

Что такое JavaScript?

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

Сначала JavaScript работал только в браузерах. Сегодня он почти везде:

• Сайты: меню, формы, карты, онлайн-игры.
• Серверы: благодаря Node.js JavaScript работает и без браузера — на компьютере и на сервере.
• Приложения: например, популярный редактор кода Visual Studio Code создан на веб-технологиях.

Первая программа: console.log

По традиции, изучая новый язык, программисты первым делом выводят «Hello, world!». В JavaScript для этого есть команда console.log(): она выводит в консоль то, что стоит в скобках. Запусти код ниже и посмотри на результат.

console.log('Hello, world!');
console.log('I am learning JavaScript');
console.log(2 + 3);

Hello, world!
I am learning JavaScript
5

Каждая строка — отдельная инструкция, и компьютер выполняет их по очереди сверху вниз. Текст в кавычках — строка (string) — выводится как есть, а 2 + 3 без кавычек сначала вычисляется. Точка с запятой ; в конце показывает, где инструкция заканчивается.

console.log может вывести и несколько значений сразу: если разделить их запятыми, они появятся в одной строке через пробел. Обрати внимание на разницу между '2 + 3' в кавычках и 2 + 3 без кавычек.

console.log('2 + 3');
console.log(2 + 3);
console.log('Score:', 95, 'points');
console.log('Baku', 'Ganja', 'Sumqayit');

2 + 3
5
Score: 95 points
Baku Ganja Sumqayit

Комментарии и типичные ошибки

Комментарий — это заметка для людей, которую компьютер пропускает. Всё от // до конца строки — комментарий. Многострочный комментарий начинается с /* и заканчивается */. Комментарии помогают потом вспомнить, что делает код, и объяснить это другим.

// This line is a comment: it is not executed
console.log('Comments are for people');

/* A comment
   over several lines */
console.log('Done'); // a comment can also stand here

Comments are for people
Done

Где запускать код?

• В этих уроках: нажми кнопку запуска рядом с примером — код выполнится прямо в твоём браузере.
• В консоли браузера: открой инструменты разработчика и перейди на вкладку Console.
• На HTML-странице: помести код внутрь тега <script>.
• На своём компьютере: установи Node.js и запусти файл командой node app.js.

В браузере JavaScript может менять и саму страницу. В примере ниже в HTML заголовок — «Hello!», но скрипт меняет его сразу после открытия страницы. Не страшно, если пока понятна не каждая строка: подробно это разберём в уроке о DOM.

<h1 id="title">Hello!</h1>
<p>This paragraph comes from HTML.</p>
<script>
  document.getElementById('title').textContent = 'Hello from JavaScript!';
</script>

// 1) print the text Hello, Educora!
// 2) print the result of 365 * 24

Hello, Educora!
8760