Тег script и возможности JavaScript. Итоговая работа месяца

Этот урок завершает первый месяц. Сначала мы заглянем в следующую большую тему: узнаем, как тег <script> подключает JavaScript к странице и что вообще умеет этот язык. Затем повторим всё, что прошли по HTML и CSS, пройдёмся по чек-листу навыков и разберём пример итоговой контрольной работы, чтобы вы пришли на неё уверенно.

Тег script

Зачем нужен JavaScript

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

Связь с HTML у него та же, что у CSS со стилями, — через специальный тег. Для JavaScript это <script>.

Встроенный скрипт

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Первый скрипт</title>
</head>
<body>
    <h1>Привет!</h1>

    <script>
        console.log("Скрипт работает!");
    </script>
</body>
</html>

console.log(...) выводит сообщение в консоль браузера — служебную панель для разработчика. Откройте DevTools (F12) → вкладка Console — там будет строка «Скрипт работает!». Консоль — ваш главный помощник: туда же браузер пишет ошибки в коде.

Внешний файл — основной способ

Как и стили, скрипты удобнее держать в отдельном файле:

my-site/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

<head>
    <meta charset="UTF-8">
    <title>Внешний скрипт</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>

// js/main.js
console.log("Подключён внешний файл main.js");

• src — путь к файлу скрипта;
• // — однострочный комментарий в JavaScript;
• у тега <script> всегда есть закрывающий тег, даже если внутри пусто. <script src="..." /> не работает.

Где ставить script и что такое defer

Браузер читает HTML сверху вниз. Встретив обычный <script>, он останавливается, скачивает и выполняет скрипт, и только потом продолжает строить страницу. Из этого две проблемы:

1. Страница показывается позже, пока грузится скрипт.
2. Если скрипт в <head> обращается к элементу из <body>, этого элемента ещё нет — будет ошибка.

Есть два решения:

<!-- Вариант 1: скрипт в самом конце body -->
<body>
    <h1>Заголовок</h1>
    <script src="js/main.js"></script>
</body>

<!-- Вариант 2 (современный): в head с атрибутом defer -->
<head>
    <script src="js/main.js" defer></script>
</head>

Возможности JavaScript

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

Считать и запоминать

const price = 200;
const count = 3;
const total = price * count;

console.log("Итого:", total);   // Итого: 600

const создаёт переменную — именованную «коробку» для значения (похоже на CSS-переменные, но гораздо мощнее).

Общаться с пользователем

alert("Добро пожаловать!");                  // окно с сообщением
const name = prompt("Как вас зовут?");       // окно с полем ввода
console.log("Пользователя зовут", name);

alert и prompt — простейшие встроенные окна. В реальных сайтах ими почти не пользуются, но для первых экспериментов они удобны.

Менять страницу

JavaScript видит всю страницу как дерево объектов — DOM (Document Object Model). Он может найти любой элемент и изменить его текст, стили и классы:

<h1 class="title">Привет!</h1>

const title = document.querySelector(".title");   // найти элемент по CSS-селектору
title.textContent = "Привет от JavaScript!";      // поменять текст
title.style.color = "tomato";                     // поменять стиль

document.querySelector принимает тот же селектор, что и CSS: .title, #logo, .menu a. Знания CSS-селекторов пригодятся прямо сейчас.

Реагировать на события

<button class="btn" id="theme-btn">Сменить тему</button>

.dark {
  background-color: #1a202c;
  color: #f7fafc;
}

const button = document.querySelector("#theme-btn");

button.addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

• addEventListener("click", ...) — «когда по кнопке кликнут, выполни этот код»;
• classList.toggle("dark") — добавить класс dark у body, если его нет, и убрать, если есть.

Обратите внимание на разделение ролей: CSS описывает, как выглядит тёмная тема (класс .dark), а JavaScript только переключает класс. Это правильный подход.

И многое другое

• Формы: проверять, правильно ли заполнены поля, до отправки.
• Запросы к серверу: загружать товары, погоду, курсы валют без перезагрузки страницы (fetch).
• Хранение данных в браузере: запоминать выбранную тему или корзину (localStorage).
• Анимации, слайдеры, модальные окна, вкладки.
• За пределами браузера: серверы (Node.js), мобильные и настольные приложения.

Всё это мы разберём в следующих месяцах — начнём с урока Git, Git Bash и первый проект. Основы JavaScript, а с событиями подробно познакомимся в уроке Введение в DOM.

Итоговая контрольная работа месяца

Повторение ключевых тем

Чек-лист: что нужно уметь

• Создать проект с правильной структурой папок и именами файлов.
• Написать скелет HTML-документа по памяти и объяснить каждую строку.
• Разметить страницу семантическими тегами: header, nav, main, section, footer.
• Правильно использовать заголовки, списки, ссылки (внешние, относительные, якоря) и картинки с alt.
• Подключить внешний CSS и шрифт, задать базовые стили для body.
• Объяснить, какое правило победит, по специфичности и порядку.
• Задать отступы, рамки, скругления; понимать box-sizing: border-box.
• Выбрать подходящие единицы: rem для шрифтов, % для ширины, px для рамок.
• Поставить бейдж в угол карточки через relative + absolute, сделать липкую шапку.
• Построить шапку и ряд карточек на Flexbox, отцентрировать блок.
• Сделать плавный :hover с transition.
• Выбрать между <img> и background-image и объяснить выбор.
• Вынести цвета и отступы в CSS-переменные и написать простой медиазапрос.
• Подключить скрипт с defer и увидеть сообщение в консоли.

Пример контрольной работы

Формат, сроки и критерии оценки итоговой работы ментор объявит отдельно. Ниже — пример, на котором удобно потренироваться.

Задание: страница-визитка кофейни.

1. Структура. Создайте проект coffee/ с папками css, images, js. В index.html — правильный скелет с lang="ru", charset, viewport и title.
2. Шапка. header с логотипом (SVG или текст) слева и меню из трёх якорных ссылок справа. Шапка липкая, ссылки меню плавно меняют цвет при наведении.
3. Первый экран. Секция на всю высоту экрана с фоновой фотографией, затемнением градиентом и центрированными заголовком h1, текстом и кнопкой.
4. Меню кофейни. Секция с заголовком h2 и шестью карточками напитков на Flexbox с переносом. В каждой: фото через <img> с alt и object-fit: cover, название, цена. У двух карточек — бейдж «Хит» в углу. При наведении карточка приподнимается.
5. Контакты. Таблица часов работы (thead, tbody) и адрес со ссылками tel: и mailto:.
6. Подвал. footer с копирайтом через ©.
7. Стили. Подключите шрифт из Google Fonts. Все цвета, скругления и основные отступы — в переменных :root. Для всех элементов — box-sizing: border-box. Шрифты — в rem.
8. Медиазапрос. При ширине ≤ 768px меню в шапке прячется или переносится, заголовок первого экрана уменьшается.
9. Скрипт. Подключите js/main.js с defer, выведите в консоль приветствие и сделайте кнопку переключения тёмной темы (по примеру из урока).

Каркас, с которого можно начать:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кофейня «Утро»</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>
<body>
    <header class="header">...</header>
    <main>
        <section class="hero">...</section>
        <section class="menu" id="menu">...</section>
        <section class="contacts" id="contacts">...</section>
    </main>
    <footer class="footer">...</footer>
</body>
</html>

:root {
  --color-primary: #6b3e26;
  --color-text: #2d2a26;
  --color-bg: #faf7f2;
  --radius: 12px;
  --space: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
}

Советы по подготовке

• Повторите руками, а не глазами. Сверстайте без подсказок хотя бы одну страницу из практики прошлых уроков.
• Планируйте до кода. Пять минут на схему блоков сэкономят час переделок.
• Проверяйте в DevTools. Блочная модель во вкладке Computed и зачёркнутые правила в Styles отвечают на большинство вопросов «почему не работает».
• Пишите понятные классы и держите стили в одном аккуратном файле с комментариями-разделами.
• Проверяйте мелочи в конце: у всех картинок есть alt, ссылки ведут куда нужно, страница не ломается при сужении окна, в консоли нет ошибок.
• Застряли больше чем на 20–30 минут — спросите ментора, сформулировав вопрос по схеме из первого урока.

Практика

1. Первый скрипт. Подключите js/main.js с defer и выведите в консоль своё имя и результат умножения двух чисел. Результат: две строки в Console без ошибок.
2. Меняем страницу. Найдите заголовок через document.querySelector и поменяйте его текст и цвет. Результат: после загрузки страницы заголовок другой.
3. Тёмная тема. Сделайте кнопку, которая переключает класс dark у body; цвета темы опишите через CSS-переменные. Результат: страница меняет тему по клику и обратно.
4. Чек-лист. Пройдите чек-лист выше и отметьте пункты, в которых не уверены; повторите соответствующие уроки. Результат: список тем, которые нужно подтянуть, и решённая практика по ним.
5. Пробная контрольная. Выполните пример контрольной работы целиком за ограниченное время (например, за 3 часа). Результат: готовая страница кофейни, которая проходит все проверки из советов по подготовке.

Итоги

• <script> подключает JavaScript; основной способ — внешний файл <script src="..." defer></script>.
• defer загружает скрипт параллельно и выполняет после разбора HTML; ошибки ищите в Console.
• JavaScript умеет считать, менять DOM, реагировать на события, общаться с сервером и хранить данные.
• Хороший подход: CSS описывает состояния (классы), JavaScript их переключает.
• За месяц вы освоили HTML5, CSS3, блочную модель, позиционирование, Flexbox, шрифты, картинки, переменные и медиазапросы.
• Перед контрольной пройдите чек-лист и сверстайте пробную работу руками.