Alterna · глава 8 · страница 8.3

JavaScript: оживляем страницу

JavaScript — язык программирования, который делает веб-страницы интерактивными. Кнопки реагируют, данные обновляются, анимации запускаются — всё благодаря JS.

HTML — скелет. CSS — одежда. JavaScript — мышцы и нервная система. Без JS страница мертва: кнопки не работают, формы не отправляются, контент не обновляется.

JavaScript — единственный язык программирования, который браузер понимает «из коробки». Его код выполняется прямо на странице, без установки дополнительных программ.

ФГОС · базовый ФОП · углублённый

Переменные и типы данных

let, const, var — как хранить данные в памяти

Объявление переменных

Ключевое слово	Особенности	Когда использовать
let	Можно переприсвоить, блочная область видимости	Значения, которые меняются
const	Нельзя переприсвоить, блочная область видимости	Константы, значения по умолчанию
var	Можно переприсвоить, функциональная область видимости	Устаревшее, не использовать

let name = "Аня";       // строка
let age = 15;            // число
const PI = 3.14159;     // константа
let isStudent = true;   // булево
let items = [1, 2, 3];  // массив
let user = {name: "Аня", age: 15}; // объект
      

Типы данных

Тип	Пример	Описание
string	"Привет"	Текст (в кавычках)
number	42, 3.14	Целые и дробные числа
boolean	true / false	Логическое значение
null	null	«Ничего», намеренное отсутствие
undefined	undefined	Переменная объявлена, но значение не присвоено
array	[1, 2, 3]	Упорядоченный список значений
object	{key: "value"}	Набор пар ключ-значение

typeof Оператор typeof показывает тип значения: typeof 42 → "number", typeof "hello" → "string". Полезно для отладки.

Условия и циклы

Ветвление логики и повторение действий

Условные конструкции

if (age >= 18) {
  console.log("Совершеннолетний");
} else if (age >= 14) {
  console.log("Подросток");
} else {
  console.log("Ребёнок");
}
      

Операторы сравнения

Оператор	Значение	Пример
===	Строгое равенство (значение И тип)	5 === "5" → false
!==	Строгое неравенство	5 !== "5" → true
> < >= <=	Больше, меньше, больше/равно, меньше/равно	age >= 18
&&	Логическое И (оба условия)	age > 0 && age < 100
\|\|	Логическое ИЛИ (хотя бы одно)	day === "Сб" \|\| day === "Вс"
!	Логическое НЕ (отрицание)	!isStudent

== vs === == сравнивает с приведением типов: "5" == 5 → true. === — строгое: "5" === 5 → false. Всегда используйте ===!

Циклы

// for — когда знаем количество повторений
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}

// while — когда условие, а не счётчик
let n = 10;
while (n > 0) { n = n / 2; }

// forEach — для массивов
["яблоко", "банан"].forEach(function(fruit) {
  console.log(fruit);
});
      

Функции

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

Объявление функции

// Function Declaration
function greet(name) {
  return "Привет, " + name + "!";
}

// Arrow Function (стрелочная)
const greet = (name) => `Привет, ${name}!`;

// Вызов
greet("Аня");  // → "Привет, Аня!"
      

Шаблонные строки

Обратные кавычки `...` позволяют вставлять переменные через ${...}:

const age = 15;
const msg = `Мне ${age} лет, через год будет ${age + 1}`;
      

Связь с главой 5 Функция — это как подсеть в IP-адресации: отдельный блок, который выполняет свою задачу и возвращает результат. Параметры — входные данные, return — выходные.

DOM — управление страницей

Document Object Model: как JavaScript находит и меняет элементы

Что такое DOM

Когда браузер загружает HTML, он строит DOM-дерево — древовидную структуру из всех элементов. JavaScript может читать и менять это дерево.

Поиск элементов

Метод	Что возвращает
document.querySelector('.card')	Первый элемент, matching CSS-селектор
document.querySelectorAll('li')	Все matching элементы (NodeList)
document.getElementById('app')	Элемент с указанным id

Изменение элементов

const el = document.querySelector('.title');

el.textContent = "Новый заголовок";  // текст
el.innerHTML = "<b>Жирный</b>";    // HTML
el.style.color = "red";              // стиль
el.classList.add("active");          // класс
el.classList.toggle("hidden");       // переключить
el.setAttribute("href", "/new");   // атрибут
      

Создание и удаление

const div = document.createElement('div');
div.textContent = "Новый блок";
document.body.appendChild(div);   // добавить в конец
div.remove();                      // удалить
      

События

Реакция на действия пользователя: клики, ввод, наведение

addEventListener

const btn = document.querySelector('#myBtn');

btn.addEventListener('click', function(event) {
  console.log("Кнопка нажата!");
  console.log("Координаты:", event.clientX, event.clientY);
});
      

Основные события

Событие	Когда срабатывает
click	Клик мышью или тап на телефоне
input	Изменение значения поля ввода
submit	Отправка формы
keydown / keyup	Нажатие / отпускание клавиши
mouseover / mouseout	Наведение / уход курсора
scroll	Прокрутка страницы
DOMContentLoaded	HTML полностью загружен и DOM построен

event.preventDefault() Вызов event.preventDefault() отменяет действие по умолчанию: переход по ссылке, отправку формы. Полезно для кастомной обработки.

Таймеры, fetch и JSON

Асинхронность: таймеры, загрузка данных с сервера

Таймеры

// Выполнить один раз через 2 секунды
setTimeout(function() { alert("Прошло 2 сек!"); }, 2000);

// Повторять каждую секунду
const timer = setInterval(function() {
  console.log("Тик!");
}, 1000);
clearInterval(timer); // остановить
      

fetch — загрузка данных

fetch("https://api.example.com/data")
  .then(function(response) {
    return response.json();  // парсим JSON
  })
  .then(function(data) {
    console.log(data);  // используем данные
  })
  .catch(function(err) {
    console.error("Ошибка:", err);
  });
      

JSON

JSON (JavaScript Object Notation) — формат обмена данными. Выглядит как JS-объект, но с двойными кавычками:

{
  "name": "Аня",
  "age": 15,
  "hobbies": ["программирование", "музыка"]
}
      

Связь с предыдущими главами Все наши главы (Web, IP, Net) загружают данные через fetch("assets/data.json") — точно так же, как показано выше. JSON-файлы с вопросами экзамена, блоками конструктора — всё это JSON.

fetch() и сетевые протоколы (глава 6) Когда вы пишете fetch(url), браузер выполняет полный стек TCP/IP: DNS-запрос (порт 53) → TCP-рукопожатие (порт 80/443) → HTTP-запрос → получение JSON. Всё, что вы изучали в главе 6 (протоколы, порты, инкапсуляция) — работает под капотом каждого fetch().

Обработка ошибок

try {
  const data = JSON.parse("невалидный json");
} catch (err) {
  console.error("Ошибка парсинга:", err.message);
}
      

💻

JS-консоль

пиши код · жми Run · смотри результат

интерактив

Напишите JavaScript-код и нажмите ▶ Run. Результат появится внизу. Используйте console.log() для вывода.

🌳

DOM-дерево

кликните на элемент · увидите его свойства

интерактив

Это живое DOM-дерево мини-страницы. Кликните на любой узел — справа появятся его свойства, методы и CSS.

Мини-страница

Заголовок

Карточка 1

Текст карточки

Карточка 2

Ещё текст

Свойства элемента

            Кликните на элемент слева...
          

🎯

CSS-селекторы: практика

введите селектор · увидите, что он выбирает

интерактив

Введите CSS-селектор — все совпавшие элементы подсветятся. Попробуйте задания ниже.

Задания

Тестовая страница

Заголовок

Подзаголовок

Карточка 1

Текст первой карточки

Избранная

Эта карточка выделена

Первый пункт
Второй пункт
Третий пункт

⚡

Песочница событий

взаимодействуйте · смотрите объект event

интерактив

Двигайте мышь, кликайте, нажимайте клавиши, вводите текст — все события записываются в лог.

Двигайте мышь здесь