Первая программа: консоль, переменные, типы данных

Первые команды · 5 минут

Где живёт код: тег <script>

Код JavaScript записывают внутри HTML-страницы между парой тегов <script> и </script>. Браузер читает страницу сверху вниз; встретив <script>, он выполняет команды внутри него.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первая программа</title>
</head>
<body>
  <h1>Моя первая программа</h1>

  <script>
    console.log("Привет, мир!");
  </script>
</body>
</html>

Первые команды · 5 минут

Консоль и правила записи команд

Тренажёр · уровень 1 из 3

Соедините элемент кода и его назначение

Выберите элемент слева, затем подходящее объяснение справа. Одинаковые номера обозначают созданную пару.

Тренажёр · уровень 2 из 3

Соберите программу из готовых частей

Перетащите карточку в пропуск или выберите карточку щелчком, а затем нажмите на нужный пропуск. Щелчок по заполненному пропуску освобождает его. Две карточки лишние.

Тренажёр · уровень 3 из 3

Введите части программы самостоятельно

Карточек больше нет. Следите за регистром букв: JavaScript отличает log от Log.

Самостоятельная работа · 17 минут

Ваша первая программа в Notepad++

Работайте по порядку и набирайте код сами. После каждого шага отмечайте выполненное.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первая программа</title>
</head>
<body>
  <h1>Первая программа</h1>
</body>
</html>

<script>
  console.log("Привет, мир!");
</script>

console.log("Меня зовут ...");
console.log(2 + 3);
console.log("2 + 3");

Перерыв · 8 минут

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

Данные · 5 минут

Переменные: let и const

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

let name = "Анна";
let age = 15;
const thisYear = 2026;

console.log(name);
age = 16;
console.log(age);

Данные · 6 минут

Типы данных и операторы

Тип данных определяет, какие значения бывают и что с ними можно делать. Узнать тип позволяет оператор typeof.

5 + 2    // 7
5 - 2    // 3
5 * 2    // 10
5 / 2    // 2.5
5 % 2    // 1 (остаток от деления)

"5" + 2          // "52" — склейка строк
5 + 2            // 7
Number("5") + 2  // 7
"Я " + "учусь"   // "Я учусь"

Данные · 4 минуты

Диалоги с пользователем: alert, prompt, confirm

Тренажёр · уровень 1 из 3

Соедините выражение и его результат

Подумайте, что выведет console.log для каждого выражения. Одинаковые номера обозначают созданную пару.

Тренажёр · уровень 2 из 3

Соберите программу «Приветствие и возраст»

Заполните пропуски карточками. Одна карточка лишняя.

Тренажёр · уровень 3 из 3

Допишите ключевые слова

Введите пропущенные слова. Регистр букв важен: Number пишется с заглавной.

Самостоятельная работа · 12 минут

Программа «Приветствие и возраст»

Откройте тот же index.html. Старые команды внутри <script> можно закомментировать знаком // или удалить.

let name = prompt("Как вас зовут?");
console.log(name);

let year = Number(prompt("В каком году вы родились?"));
console.log(typeof year);

const thisYear = 2026;
let age = thisYear - year;
console.log(age);

alert("Привет, " + name + "! Вам примерно " + age + " лет.");

Финал · 4 минуты

Что вы узнали на первом занятии