Старт курса и настройка среды

01 Как JavaScript работает в браузере

Страница состоит из трёх языков, и у каждого своя работа. Вы уже знаете два из них:

Что делает браузер, когда вы открываете страницу

Внутри каждого браузера есть «двигатель», который понимает JavaScript: в Chrome и Edge он называется V8, в Firefox — SpiderMonkey, в Safari — JavaScriptCore. Вам не нужно ничего устанавливать, чтобы JavaScript заработал: он уже есть в вашем браузере. Именно поэтому мы начинаем с браузера, а Node.js — программу для запуска JS вне браузера — подключим позже, на уроке 17.

Как JavaScript читает код

• Сверху вниз, строка за строкой. Как вы читаете рецепт: сначала первый шаг, потом второй.
• Одна команда — одно действие. Команды (их называют «инструкциями») принято заканчивать точкой с запятой ;.
• Регистр важен. console и Console для JavaScript — два разных слова.
• Если на какой-то строке случилась ошибка, код ниже не выполнится. Браузер остановится и напишет сообщение в консоль.

Самая первая команда, которую вы выучите, — console.log. Она «печатает» значение в консоль. Попробуйте: нажмите «Запустить», потом поменяйте текст и запустите снова.

console.log("Салом, JavaScript!");
console.log("Я учусь программировать в MakeFirstStep");

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

console.log("Первый шаг");
console.log("Второй шаг");
console.log("Третий шаг");

А вот что бывает, когда на середине программы — ошибка. Третья команда обращается к несуществующему слову, и четвёртая уже не выполняется:

console.log("Шаг 1: всё хорошо");
console.log("Шаг 2: всё хорошо");
console.log(шаг3);
console.log("Шаг 4: сюда мы не дойдём");

Читать подробнее: learn.javascript.ru — Привет, мир! · MDN — Что такое JavaScript

// напишите команду console.log с текстом в кавычках

Салом, Душанбе!

console.log("3. Подать плов с салатом");
console.log("1. Обжарить мясо и морковь");
console.log("2. Добавить рис и воду");

1. Обжарить мясо и морковь
2. Добавить рис и воду
3. Подать плов с салатом

02 Подключаем скрипт: inline, внешний файл, defer

Чтобы браузер выполнил JavaScript, код нужно «положить» на страницу с помощью тега <script>. Есть два способа.

Способ 1. Код прямо в HTML (inline)

<body>
  <h1>Моя страница</h1>

  <script>
    console.log("Салом из inline-скрипта!");
  </script>
</body>

Удобно для короткой проверки, но в настоящих проектах так не делают: HTML превращается в кашу, а код нельзя использовать на другой странице.

Способ 2. Отдельный файл (внешний скрипт)

Это основной способ. Код лежит в файле script.js рядом с index.html, а в HTML вы только ссылаетесь на него через атрибут src — точно так же, как <link href="style.css"> подключает CSS.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первый скрипт</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Салом, JavaScript!</h1>
</body>
</html>

console.log("Салом из script.js!");

src

Адрес файла со скриптом. script.js — рядом с HTML, js/script.js — в подпапке js, ../script.js — на уровень выше.

Закрывающий тег

Всегда нужен: <script src="..."></script>. Записать как <script src="..." /> нельзя — страница сломается.

defer

Атрибут «подожди». Браузер скачивает файл параллельно с чтением страницы, но запускает его только после того, как весь HTML прочитан.

Где держать тег script

Помните схему из прошлого раздела: браузер читает HTML сверху вниз. Если скрипт стоит выше элемента, к которому обращается, то в момент запуска такого элемента ещё нет. Посмотрите на живом примере. В трёх местах мы просим у страницы заголовок h1 (как это работает, разберём на уроке 8 — пока важно только слово null — «ничего нет»).

<script>
  console.log("скрипт ВЫШЕ заголовка:", document.getElementById("title"));
</script>

<h1 id="title">Салом, MakeFirstStep!</h1>

<script>
  console.log("скрипт НИЖЕ заголовка:", document.getElementById("title"));
</script>

// файл script.js в этой песочнице запускается после всей страницы, как с defer
console.log("script.js (как defer):", document.getElementById("title"));

Первый скрипт увидел null: заголовка на странице ещё не было. Второй и третий — нашли <h1#title>. Отсюда три рабочих правила:

Есть ещё атрибут async: он запускает скрипт сразу, как только скачал, не дожидаясь страницы и других скриптов. Так подключают счётчики аналитики. Для наших программ он не подходит: порядок запуска не гарантирован. А type="module" (уроки 17–18) ведёт себя как defer автоматически.

Читать подробнее: learn.javascript.ru — Структура кода · MDN — элемент <script>

Console.log("Урок 1 начался");
console.Log("Скрипт работает");

Урок 1 начался
Скрипт работает

<h1>Мой первый сайт</h1>
<p>Если скрипт подключён, смотрите консоль.</p>

console.log("Скрипт подключён"

Скрипт подключён

<script>
  console.log(document.getElementById("title"));
</script>

<h1 id="title">Салом, MakeFirstStep!</h1>

<h1#title>

03 Консоль: log, warn, error, table

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

console.log — печатаем значение

В скобках можно писать текст, числа и даже вычисления. Текст всегда берётся в кавычки: двойные "..." или одинарные '...' — без разницы, главное, чтобы открывающая и закрывающая были одинаковые.

console.log("Это текст");          // строка — в кавычках
console.log('Одинарные тоже можно');
console.log(2026);                 // число — без кавычек
console.log(7 * 8);                // JavaScript сам посчитает: 56
console.log(100 - 35);             // 65

Чем отличается "5" от 5? В кавычках — текст (строка), без кавычек — число. Для человека одинаково, а для программы нет. Подробно разберём на следующем уроке, пока достаточно запомнить: кавычки = текст.

Арифметика: что умеет JavaScript

Порядок действий такой же, как в школьной математике: сначала умножение и деление, потом сложение и вычитание, а скобки меняют порядок. Дробная часть в JavaScript пишется через точку: 2.5, а не 2,5.

console.log(10 + 5 * 2);     // умножение первым: 10 + 10
console.log((10 + 5) * 2);   // скобки первыми: 15 * 2
console.log(10 / 4);         // 2.5
console.log(17 % 5);         // остаток: 17 = 3 * 5 + 2

Несколько значений в одном log

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

console.log("Курутоб:", 35, "сомони");
console.log("Два чайника по 12 сомони:", 2 * 12);
console.log("Хуш омадед", "в", "MakeFirstStep");

Текст можно и склеивать знаком +. Но осторожно: пробелы между словами придётся ставить самим — внутри кавычек.

console.log("Урок " + 1 + ": старт курса");
console.log("MakeFirstStep" + " " + "2026");
console.log("MakeFirstStep" + "2026");     // без пробела — слиплось

warn, error, info, table

У консоли есть разные «голоса». В настоящей консоли браузера они выглядят по-разному: warn — жёлтая строка, error — красная, info — обычная с иконкой, а table рисует таблицу.

console.log("Обычное сообщение");
console.info("Информация: курс начался");
console.warn("Предупреждение: осталось мало риса");
console.error("Ошибка: казан сломан");
console.table(["самбуса", "курутоб", "чой"]);

Консоль как калькулятор

В DevTools консоль можно использовать и напрямую: напечатали выражение, нажали Enter — получили результат, без console.log. Стрелка ↑ достаёт предыдущую команду, Shift + Enter переносит строку, не выполняя команду. Удобно проверять мелочи: 2 ** 10, 17 % 5, "a" + "b".

Читаем сообщение об ошибке

Красная строка — не приговор, а подсказка. В ней всегда три части:

1. Вид ошибки — SyntaxError (нарушены правила записи: не хватает скобки, кавычки), ReferenceError (используете слово, которого JavaScript не знает).
2. Описание — например, Console is not defined («Console не определено») или missing ) after argument list («после аргументов не хватает )»).
3. Место — имя файла и номер строки, например script.js:3. В настоящей консоли это ссылка: клик открывает именно эту строку.

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

console.log("Открываем чойхону");
console.log("Добавьте закрывающую кавычку);
console.log("Закрываем чойхону");

Читать подробнее: MDN — console · learn.javascript.ru — Консоль разработчика

// три строки: имя, город, курс

Имя: Мадина
Город: Душанбе
Курс: Frontend + AI

// 3 самбусы по 5 сомони + 2 чая по 3 сомони

21

// Курутоб: 35 сомони
// Самбуса: 5 сомони

Курутоб: 35 сомони
Самбуса: 5 сомони

// строка 1: "Урок " + 1 + ": старт курса"
// строка 2: MakeFirstStep и 2026 через пробел

Урок 1: старт курса
MakeFirstStep 2026

// 17 лепёшек на 4 гостя

4.25
1
1024

console.log("Салом!");
consol.log("Как дела?");
console.lgo("Всё хорошо");
Console.log("Хайр!");

Салом!
Как дела?
Всё хорошо
Хайр!

console.log("Первая строка);
console.log("Вторая строка"
console.log('Третья строка");
console.log "Четвёртая строка";

Первая строка
Вторая строка
Третья строка
Четвёртая строка

// console.warn(...)

Внимание: в казане осталось мало риса

// Чек
// Самбуса x 3 = 15
// Чой x 2 = 6
// Итого: 21 сомони

Чек
Самбуса x 3 = 15
Чой x 2 = 6
Итого: 21 сомони

console.log(10 + 5 * 2);
console.log((10 + 5) * 2);
console.log("10" + 5);
console.log("10" - 5);
console.log("Скидка:", 100 / 4, "%");

console.log("???");
console.log("???");
console.log("???");
console.log("???");
console.log("???");

20
30
105
5
Скидка: 25 %

console.log("2" + "2");
console.log(2 + 2 + "2");
console.log("2" + 2 + 2);
console.log("5" * "4");
console.log("три" * 2);

console.log("???");
console.log("???");
console.log("???");
console.log("???");
console.log("???");

22
42
222
20
NaN

04 DevTools: инструменты разработчика

Консоль — одна из вкладок большой панели DevTools (Developer Tools, «инструменты разработчика»). Она встроена в каждый браузер и бесплатна. Профессиональные фронтендеры открывают её каждый день: смотрят, как устроена страница, ищут ошибки, проверяют скорость и сетевые запросы. Мы сегодня познакомимся с тремя вкладками: Elements, Console, Sources.

Как открыть

Панель можно закрепить снизу, справа или вынести в отдельное окно: кнопка с тремя точками ⋮ в правом верхнем углу DevTools → «Dock side». Для работы с кодом удобно закрепить справа или снизу.

Вкладка Elements: живая страница

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

• Двойной клик по тексту — меняете его прямо на странице. Двойной клик по атрибуту или значению стиля — тоже.
• Галочки рядом со стилями включают и выключают свойства — удобно искать, какое правило ломает вёрстку.
• Изменения живут до перезагрузки. Файл на диске не меняется — это «репетиция» на копии страницы.

Вкладка Console: сообщения и команды

Всё, что вы выводите через console.log, и все красные ошибки появляются здесь. Рядом с каждым сообщением справа — имя файла и номер строки: клик по ссылке открывает эту строку во вкладке Sources. Значок 🚫 слева очищает консоль, а выпадающий список «Default levels» фильтрует сообщения: например, можно показать только ошибки.

Вкладка Sources: файлы и точки останова

Слева дерево файлов сайта: index.html, style.css, script.js. Откройте script.js — в середине вы увидите свой код. Поиск файла по имени: Ctrl/Cmd + P.

Главная фишка вкладки — точка останова (breakpoint). Кликните по номеру строки — появится синий маркер. Перезагрузите страницу: браузер дойдёт до этой строки и поставит выполнение на паузу. Теперь можно рассмотреть, что уже произошло, и идти дальше по одной команде.

Другие вкладки (знать, что они есть)

• Network — все запросы страницы: файлы, картинки, данные. Здесь мы увидим, как загружаются API на уроках 14–16, а сегодня пригодится, чтобы проверить, что script.js действительно скачался (статус 200, а не 404).
• Application — здесь живёт localStorage (урок 11).
• Lighthouse — автоматическая оценка скорости и доступности страницы.

Читать подробнее: learn.javascript.ru — Консоль разработчика · Chrome DevTools — документация

console.log("Начало");
console.log(Привет);
console.log("Конец");

Начало
Привет
Конец

05 Окна: alert, prompt, confirm

Консоль видна только разработчику. Но иногда нужно поговорить с пользователем: показать сообщение, спросить имя, получить «да» или «нет». У браузера для этого есть три встроенных окна. Они «модальные»: пока окно открыто, страница заморожена, и ничего другого нажать нельзя.

alert — показать сообщение

alert("Салом, MakeFirstStep!");

Окно с текстом и одной кнопкой «OK». Ничего не возвращает: просто показывает и ждёт.

prompt — спросить у пользователя

prompt("Как вас зовут?");                // окно с полем ввода
prompt("В каком вы городе?", "Душанбе"); // второй аргумент — значение по умолчанию

Показывает окно с полем ввода и кнопками «OK» и «Отмена». Что вернёт prompt:

• если нажали OK — то, что ввели, всегда как строку (даже если вы набрали число);
• если нажали «Отмена» или Esc — специальное значение null («ничего»).

confirm — спросить «да или нет»

confirm("Вы точно хотите удалить заказ?");

Окно с вопросом и кнопками «OK» и «Отмена». Возвращает true («да»), если нажали OK, и false («нет»), если «Отмена». Что делать с этим ответом — выбирать, когда мы научимся условиям (урок 3).

Используем ответ сразу, без переменных

Переменных мы пока не знаем (это урок 2), но ответ prompt уже можно использовать — вставив один вызов внутрь другого. Сначала JavaScript выполняет то, что внутри скобок, а потом использует результат.

alert("Салом, " + prompt("Как вас зовут?") + "!");

1. Выполняется внутренний вызов: открывается окно «Как вас зовут?», вы вводите «Мадина».
2. prompt возвращает строку "Мадина".
3. Склеивается "Салом, " + "Мадина" + "!".
4. Внешний alert показывает Салом, Мадина!.

Ловушка: prompt возвращает строку

Если спросить у пользователя два числа и сложить ответы знаком +, получится склейка, а не сумма: "7" + "5" даёт "75". Чтобы превратить строку в число, используйте функцию Number(...). Эту «ловушку» можно проверить даже здесь, без окон — подставим вместо ответов пользователя готовые строки:

console.log("7" + "5");                    // склейка строк
console.log(Number("7") + Number("5"));    // превратили в числа и сложили

alert(Number(prompt("Первое число")) + Number(prompt("Второе число")));

Читать подробнее: learn.javascript.ru — alert, prompt, confirm

console.log("7" + "5");

12

// цена "200", скидка "15" — обе строки
// цена - цена * скидка / 100

170

06 Настройка среды: VS Code, расширения, Live Server, Copilot

Писать код можно и в блокноте, но профессионалы используют редактор кода: он подсвечивает синтаксис, подсказывает команды и сразу показывает опечатки. На курсе мы работаем в Visual Studio Code (VS Code) — это бесплатный редактор, на котором сегодня пишет большинство фронтендеров мира.

Шаг 1. Установка VS Code

Чтобы интерфейс был на русском, откройте Ctrl/Cmd + Shift + X, найдите «Russian Language Pack for Visual Studio Code» и установите. Однако документация и подсказки в основном на английском, поэтому многие оставляют английский интерфейс.

Шаг 2. Рабочая папка

1. Создайте на диске папку для курса, например mfs-js. На Windows лучше путь без кириллицы и пробелов: C:\dev\mfs-js. На Mac — в домашней папке: ~/dev/mfs-js.
2. Внутри создайте папку lesson-01.
3. В VS Code: File → Open Folder… и выберите папку mfs-js. На вопрос «Do you trust the authors?» ответьте «Yes, I trust the authors».
4. Слева в панели Explorer появится папка. Теперь можно создавать файлы: наведите мышь на название папки, нажмите значок «New File».

Шаг 3. Расширения

Расширения ставятся в левой панели Extensions (иконка из четырёх кубиков) — Ctrl/Cmd + Shift + X. Введите название, выберите расширение от нужного автора, нажмите Install.

Шаг 4. Настройки, которые экономят время

Откройте настройки: Ctrl + , (Windows) или Cmd + , (Mac). В строке поиска найдите и включите:

• Files: Auto Save → afterDelay: файл сохраняется сам, и вы никогда не забудете нажать Ctrl/Cmd + S (а вопрос «почему ничего не изменилось» возникает намного реже).
• Editor: Format On Save → включить, а в Editor: Default Formatter выбрать Prettier: код выравнивается при каждом сохранении.
• Editor: Font Size → 16–18: на проекторе и для глаз удобнее.
• Editor: Word Wrap → on: длинные строки переносятся.

Полезные сочетания клавиш

А ещё в пустом HTML-файле наберите ! и нажмите Tab — VS Code сам напишет весь каркас страницы. Это встроенный помощник Emmet.

Шаг 5. GitHub Copilot

GitHub Copilot — ИИ-помощник прямо в редакторе. Он предлагает продолжение кода и отвечает на вопросы в чате. Что нужно для запуска:

1. Аккаунт GitHub. Он у вас уже есть — вы работали с Git. Если нет — зарегистрируйтесь на github.com.
2. Тариф. Для курса достаточно бесплатного тарифа Copilot Free (есть ежемесячные лимиты на подсказки и сообщения чата). Студенты школ и вузов могут оформить GitHub Student Developer Pack и получить расширенный Copilot бесплатно на время обучения. Заявка подаётся на education.github.com/pack: нужен подтверждённый статус студента (учебная почта или документ). Рассматривают её от нескольких дней до пары недель, поэтому подайте заявку сегодня, а пока работайте на бесплатном тарифе. Условия и лимиты периодически меняются — актуальные смотрите на сайте.
3. Вход из VS Code. Установите расширение GitHub Copilot, нажмите иконку аккаунта внизу слева (или значок Copilot в нижней строке состояния) → Sign in with GitHub → браузер попросит подтвердить вход.
4. Проверка. В новом файле script.js напишите комментарий // выведи в консоль приветствие и нажмите Enter. Серым текстом появится подсказка: Tab принимает её, Esc отклоняет.

Шаг 6. Первый скрипт и Live Server

Теперь всё готово. В папке lesson-01 создайте два файла.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой первый скрипт</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Салом, JavaScript!</h1>
  <p>Откройте консоль: F12 или Cmd+Option+I</p>
</body>
</html>

console.log("Салом, JavaScript!");
console.log("Мой первый скрипт работает");

1. Сохраните оба файла (если включён Auto Save — это произойдёт само).
2. Нажмите правой кнопкой на index.html в Explorer → Open with Live Server. Или нажмите кнопку Go Live в правом нижнем углу VS Code.
3. В браузере откроется адрес вида http://127.0.0.1:5500/lesson-01/index.html.
4. Откройте DevTools (F12 или Cmd + Option + I) → вкладка Console. Там должны быть две ваши строки, справа — script.js:1 и script.js:2.
5. Измените текст в script.js, сохраните — страница обновится сама. Это и есть Live Server.
6. Чтобы остановить сервер, нажмите на кнопку Port: 5500 в нижней строке.

Если в консоли пусто или красная ошибка — вернитесь к списку «Частые ошибки при подключении» в разделе 2. В 9 из 10 случаев причина в нём.

Git: первый коммит (по желанию)

Вы уже знакомы с Git — не откладывайте привычку: каждый урок будет в отдельной папке одного репозитория.

git init
git add .
git commit -m "add lesson 01: first script"

Читать подробнее: learn.javascript.ru — Редакторы кода · VS Code — скачать · Live Server

07 ИИ-блок: карта инструментов и правила курса

Три типа ИИ-инструментов

Где ИИ ошибается в JavaScript чаще всего

• Выдумывает команды. Предлагает метод или функцию, которых нет в JavaScript (например, console.print), — звучит убедительно, а в консоли красная ошибка.
• Путает языки. Подсовывает конструкции из Python или другого языка, потому что «похоже».
• Неверно предсказывает вывод. Уверенно пишет «этот код выведет 4», а он выводит 22. ИИ не запускает ваш код — он угадывает.
• Решает не ту задачу. Вы просили одно, а он решил похожее, да ещё добавил лишнее.
• Использует устаревшие приёмы или слишком сложные решения, которые вы не сможете объяснить.

Проверьте сами: ИИ-ассистент мог бы сказать «"2" + 2 даст 4». Запустите и убедитесь, кто прав — консоль или ИИ:

console.log("2" + 2);   // ИИ мог бы уверенно ответить: 4
console.log(2 + 2);     // а это уже правда 4

Вывод: консоль — последняя инстанция. Любой ответ ИИ про код проверяется запуском.

Правила работы с ИИ на курсе

1. Сначала пробуешь сам 15 минут — только потом спрашиваешь ИИ.
2. Не вставляешь код, который не можешь объяснить строчку за строчкой.
3. На проверке ДЗ преподаватель может попросить объяснить любую строку.
4. Промпт всегда содержит: контекст, задачу, ограничения и нужный формат ответа.
5. ИИ пишет черновик — ты проверяешь логику, имена и крайние случаи.
6. Copilot включаем на практике и выключаем на контрольных заданиях.
7. Контрольные на уроках 6 и 18 выполняются полностью без ИИ.

Формула промпта

Из библиотеки промптов курса для первых уроков пригодится шаблон «Не понимаю, почему код ведёт себя странно»: «Вот код: [код]. Объясни построчно, что происходит и почему результат такой. Не переписывай код — только объясни.». Всегда проверяйте: совпадает ли объяснение с тем, что реально выводит консоль.

console.log("3 x 1 =", 3 * 1);
console.log("3 x 2 =", 3 + 2);
console.log("3 x 3 =", 3 * 3);

3 x 1 = 3
3 x 2 = 6
3 x 3 = 9

console.log("Чай:", 3 * 4);
console.log("Самбуса:", 2 + 5);
console.log("Итого:" 12 + 10);
consol.warn("Спасибо за заказ!");

Чай: 12
Самбуса: 10
Итого: 22
Спасибо за заказ!

08 Практика на уроке: окружение и первый скрипт

Это сердце урока: вы своими руками собираете рабочее место и запускаете первую программу. Идите по шагам, не перескакивая. Если что-то не получается — поднимите руку или напишите в чат группы: вместе исправим.

Шаг за шагом

1. Установите VS Code и расширения из раздела 6. Проверьте: Live Server и Prettier видны в списке установленных.
2. Создайте папку mfs-js/lesson-01 и откройте mfs-js в VS Code.
3. Создайте index.html: в пустом файле наберите ! и нажмите Tab. Исправьте lang на ru, title на «Мой первый скрипт».
4. Создайте script.js и подключите его в <head>: <script src="script.js" defer></script>.
5. Напишите в script.js код из примера ниже.
6. Запустите Live Server и откройте консоль браузера. Найдите все шесть сообщений, сравните цвета.
7. Поставьте точку останова на строке console.warn во вкладке Sources, обновите страницу, пройдите дальше клавишей F10.
8. Специально сломайте код: удалите закрывающую кавычку в одной строке. Найдите красную ошибку в консоли и подсветку в VS Code (если установлен Error Lens). Верните как было.
9. Проверьте Copilot: на новой строке напишите комментарий // выведи в консоль название любимого блюда и посмотрите подсказку. Прочитайте её, прежде чем принять. Понятна ли каждая часть?
10. Сделайте первый коммит (по желанию), чтобы закрепить привычку.

console.log("Имя: Мадина");
console.log("Город: Душанбе");
console.log("Курс: Frontend + AI");
console.warn("Предупреждение: это учебный проект");
console.error("Ошибка: просто проба красного цвета");
console.table(["HTML", "CSS", "JavaScript"]);

Мини-страница для экспериментов

Пока не настроили среду на своём компьютере, или чтобы быстро проверить идею, — используйте эту мини-страницу: слева код index.html и script.js, снизу превью и консоль. Это тот же принцип, что и в VS Code с Live Server.

<h1>Салом, JavaScript!</h1>
<p>Откройте консоль: там уже есть сообщения.</p>

console.log("Страница загружена");
console.warn("Это предупреждение");
console.log("Мне", 2026 - 2005, "лет");

<h1>Мой первый сайт</h1>
<p>Результат смотрите в консоли.</p>

// напишите два console.log

Привет из script.js
Урок 1 пройден

// Имя: Мадина
// Год рождения: 2005
// Возраст: 21
// Курс: Frontend + AI

Имя: Мадина
Год рождения: 2005
Возраст: 21
Курс: Frontend + AI

// 15 гостей, 100 г на гостя, мешок 2 кг

Гостей: 15
Риса нужно, г: 1500
Риса нужно, кг: 1.5
Останется из мешка 2 кг: 0.5

★ Домашнее задание: окружение и 5 задач

Закончите настройку среды, пришлите подтверждение и решите пять небольших задач на console.log, alert и prompt. Всё делайте в папке lesson-01 на своём компьютере, а для задач — отдельный файл tasks.js, подключённый к index.html после script.js. Переменные не нужны: используйте только значения, записанные прямо в коде.

Часть 1. Рабочее окружение (скриншоты)

• ☐ VS Code установлен, открыта папка mfs-js, видны lesson-01/index.html и script.js.
• ☐ Установлены Live Server, Prettier и GitHub Copilot, включены Auto Save и Format On Save.
• ☐ Вход в GitHub из VS Code выполнен, Copilot показывает подсказки.
• ☐ Live Server открывает страницу, во вкладке Console видны ваши сообщения.
• ☐ Заявка на GitHub Student Pack отправлена (скриншот письма или страницы статуса) — или вы объяснили, почему не подходите.

Один скриншот должен показывать всё сразу: окно VS Code с открытым script.js и боковой панелью, рядом — браузер со страницей и открытой консолью с вашими сообщениями. Лучше два скриншота: отдельно VS Code (со значком Copilot) и отдельно браузер.

Часть 2. Пять задач

1. Визитка (console.log). Выведите пять строк: имя, город, год рождения, курс, любимое блюдо. В строке возраста посчитайте возраст выражением: 2026 - ваш_год_рождения (число подставьте сами).
2. Счёт в магазине (console.log с несколькими значениями). Три товара с ценой и количеством. В каждой строке: название, количество, знак = и сумма, посчитанная выражением. В конце — итог, тоже вычисленный. Одна строка — один console.log с несколькими значениями через запятую.
3. Приветствие (alert). Покажите alert с приветствием группы, затем второй alert с текстом из двух строк (перенос строки — символ \n внутри текста).
4. Знакомство (prompt + alert). Спросите имя и город двумя prompt и покажите одним alert: Салом, Имя из Город!. Подсказка: два prompt можно вставить в одну склейку строк.
5. Площадь (prompt + Number + confirm). Спросите длину и ширину прямоугольника двумя prompt, превратите ответы в числа через Number и покажите площадь через alert. Затем спросите confirm("Показать периметр?") и выведите ответ (true или false) через console.log. Периметр показывать не нужно, условия мы ещё не учили.

Бонус (по желанию, без баллов): выведите любую строку тремя способами — console.log, console.warn, console.error — и сделайте скриншот того, как они выглядят в настоящей консоли. А ещё попробуйте вывести console.table(["самбуса", "курутоб", "чой"]).

Что сдать

1. Скриншот(ы) рабочего окружения (часть 1).
2. Ссылка на репозиторий GitHub (папка lesson-01 с index.html, script.js, tasks.js) или архив папки в Telegram-группу.
3. Если вы использовали ИИ: в файле README.md три строки — что просили, что взяли, что исправили руками. На проверке преподаватель может попросить объяснить любую строку.

Как оцениваем (0–10)