Введение в JavaScript

JavaScript оживляет страницы. Начинаем с переменных, типов данных и первой программы.

Зачем нужен JavaScript

HTML — скелет, CSS — внешность, JavaScript — мозг. На JS писались и простейшие счётчики кликов, и сложные веб-приложения вроде Google Maps. Он выполняется прямо в браузере пользователя.

Как подключить

Файл подключается в конце <body>, чтобы страница успела отрисоваться до выполнения скрипта:

<script src="js/main.js"></script>

Переменные

Переменная — именованное хранилище данных. Три способа объявления:

const siteName = "WebDev";      // не изменится
let count = 0;                 // будет меняться
var oldStyle = 1;              // устаревший способ

count = count + 1;                 // меняем значение

Типы данных

const student = {
  name: "Аня",
  age: 25,
  tech: ["HTML", "CSS", "JS"]
};

console.log(student.name);      // "Аня"
console.log(student.tech[0]); // "HTML"

Операции с числами и строками

let a = 10;
let b = 3;
console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1 (остаток)
console.log(a ** 2); // 100 (степень)

const name = "Мир";
console.log("Привет, " + name);  // склейка
console.log(`Привет, ${name}!`); // интерполяция

Работа с числами: живой пример

Преобразование типов

JS автоматически превращает типы, но в самый нужный момент лучше управлять этим руками:

const str = "42";
const num = Number(str);        // число 42
const back = String(num);       // строка "42"
const ok = Boolean(1);        // true
const rounded = Math.round("3.7"); // 4

console.log("5" + 3);   // "53" — конкатенация! Не 8
console.log("5" - 3);   // 2 — вычитание работает с числами

Методы строк

У строк куча готовых методов, меняющих регистр, отрезающих и подменяющих части:

const name = "Анна";

name.length;               // 4
name.toUpperCase();        // "АННА"
name.toLowerCase();        // "анна"
name.trim();               // убрать пробелы по краям
name.includes("нн");     // true
name.startsWith("А");    // true
name.slice(0, 2);       // "Ан"
name.replace("Анна", "Иванова"); // "Иванова"

Методы массивов на практике

Массивы сопровождают каждую задачу: список задач, товары корзины, комментарии:

const cart = ["хлеб", "молоко"];
cart.push("сыр");            // добавить в конец
cart.pop();                 // убрать с конца
cart.unshift("яйца");      // в начало
cart.indexOf("хлеб");       // индекс 1 или -1
cart.join(", ");            // "яйца, хлеб, молоко"
cart.includes("молоко");   // true

console: красивые выводы

В консоли можно наводить красоту и структуру — это здорово ускоряет отладку:

console.log("Обычное сообщение");
console.warn("Предупреждение");
console.error("Что-то сломалось");

const users = [{ name: "Аня" }, { name: "Петя" }];
console.table(users);      // удобная табличка в консоли

console.log("Пользователь:", users[0]);  // объект раскроется интерактивно

null, undefined и NaN

Три «странных» значения JS преследуют новичков. Разберёмся раз и навсегда:

• null — «значения нет», мы его сами туда положили;
• undefined — «значения не задавали вовсе»;
• NaN (Not a Number) — результат неудачной математики: 1 / "abc".

let a;                 // undefined
const b = null;        // null
console.log("5" * "x"); // NaN

Number.isNaN(NaN);      // true — правильная проверка NaN
NaN === NaN;            // false! NaN не равен сам себе

Многострочные шаблонные строки

Шаблонные строки (обратные кавычки) позволяют писать текст в несколько строк и встраивать выражения без склейки:

const name = "Аня";
const lines = `
Привет, ${name}!
Первая строка.
Вторая строка.
`;

console.log(lines);
// Выведет три строки с подставленным именем.

Опциональная цепочка: ?.

Обращение obj?.prop не бросает ошибку, если obj окажется null или undefined:

const user = { profile: { city: "Москва" } };

user.profile?.city;               // "Москва"
user.account?.balance;            // undefined, а не ошибка
user.settings?.theme ?? "light"; // "light", если theme нет

find, some, every

Три метода для поиска по массиву, которые встречаются в коде на каждом шагу:

const users = [
  { name: "Аня", age: 25 },
  { name: "Петя", age: 17 },
  { name: "Оля", age: 30 }
];

const petya = users.find(u => u.name === "Петя");   // первый совпавший
const hasKids = users.some(u => u.age < 18);      // true — хоть один
const allAdult = users.every(u => u.age >= 18);   // false — не все

== и ===: разница критична

Двойное равно приводит типы, тройное — сравнивает честно:

5 == "5"   // true,  сработало приведение
5 === "5"  // false, типы разные
0 == false // true (фу)
0 === false // false

Тернарный оператор

Условие в одну строку: условие ? да : нет:

const age = 17;
const label = age >= 18 ? "взрослый" : "несовершеннолетний";

Логика: && , || , !

И, ИЛИ, «не»: собирайте сложные условия:

const opened  = true;
const weekend = false;

if (opened && !weekend) {
  console.log("Офис открыт");
}
if (opened || user.isCool) {
  console.log("Проходи");
}

switch: множество веток

Сравнение значения с рядом вариантов — бесконечные else if заменяет switch:

switch (status) {
  case "new":
    console.log("Новый заказ");
    break;
  case "done":
    console.log("Готов");
    break;
  default:
    console.log("Другое");
}

Области видимости

Где переменная живёт, зависит от способа объявления:

let a = 1;        // виден в своём блоке
const b = 2;      // то же + переприсваивать нельзя
var c = 3;        // всплывает в функцию (устарел)

if (true) {
  let inner = 5;
}
console.log(inner);  // ReferenceError

Ловушка дробей

Компьютер хранит числа в двоичной системе, поэтому 0.1 + 0.2 ≠ 0.3:

console.log(0.1 + 0.2);   // 0.30000000000000004

const sum = (0.1 + 0.2).toFixed(2);  // "0.30"

Math: округление и случайность

Полезные методы встроенного объекта Math:

Math.round(2.6);   // 3
Math.floor(2.9);   // 2 — вниз
Math.ceil(2.1);    // 3 — вверх

// случайное целое от 1 до 6:
const dice = Math.floor(Math.random() * 6) + 1;

Форматирование toFixed

Сколько знаков после запятой показывать — решает toFixed:

const price = 19.956;
price.toFixed(2);    // "19.96"
price.toFixed(0);    // "20"

const text = +price.toFixed(2);  // число 19.96

Строки в числа: parseInt и parseFloat

Парсят число с начала строки и игнорируют «хвост»:

parseInt("42px");     // 42 — отбросил px
parseInt(" 7 дней");  // 7 — пробел стёрт
parseFloat("2.5кг");  // 2.5 — дробь
parseInt("abc");      // NaN

length и доступ к символам

Длина строки и отдельный символ по индексу:

const name = "web";
name.length;      // 3
name[0];          // "w"
name[name.length - 1]; // "b" — последний символ

indexOf и includes

Поиск подстроки в строке:

"hello world".indexOf("world");  // 6
"hello world".indexOf("x");      // -1 — не найдено

"hello".includes("ell");       // true
"hello".startsWith("he");     // true

NaN и Infinity

Особые числа, с которыми всё «странно»:

0 / 0;         // NaN
1 / 0;         // Infinity

Number.isNaN("x" * 2);  // true
// NaN !== NaN, поэтому проверяйте только через Number.isNaN

Инкремент и декремент

Счетчики: ++ и --, и чем они отличаются до/после:

let n = 5;
console.log(n++);   // выведет 5, потом становится 6
console.log(++n);   // сразу 7

Дефолт через ||

Классический приём: если слева пусто, берём запасной вариант:

const username = user.name || "Гость";
const price    = rawPrice || 0;

// современный вариант для null/undefined:
const cute = rawCuteness ?? 100;

Тренировка

1. Объявите const с вашим именем и let с годом рождения.
2. Вычислите среднее арифметическое трёх чисел и выведите в консоль.
3. Создайте массив технологий и выведите вторую из него в консоль.
4. Соберите приветствие с интерполяцией: Привет, ${имя}!

Консоль браузера: первая «поговорим»

Консоль DevTools (F12 → Console) выполняет код по мере записи — это идеальная песочница тестов без файлов. Написали строку, нажали Enter, видите результат мгновенно.

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

Синтаксис JS: точка с запятой и отступы

Каждое выражение обычно завершают «;», фигурные скобки группируют блоки, отступы делают код читаемым. Опечатка в имени переменной — самая частая «ошибка чтения».

let a = 2;
let b = 3;
console.log(a + b);

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

const — значение «навсегда» (для этого объявления), let — можно переназначить. Стартовое правило: начинайте с const, меняйте на let, когда код просит.

const pi = 3.14;
let score = 0;
score = score + 10;  // let — можно переприсвоить

Именование переменных: читаемость

Имена должны «проговариваться»: totalPrice, userName, hasAccess. Короткие «x1, x2» убивают смысл. Используйте camelCase и осмысленные слова.

const totalPrice = 490;
const hasDiscount = true;
console.log(totalPrice);

Числа: целые и дробные

Числа в JS — одно семейство, без деления «int/float»: все арифметические операции работают честно. Техническая точность дробей бывает хитрой — об этом в следующих уроках.

const a = 10;
const b = 3;
console.log(a / b);   // 3.33333...
console.log(a % b);   // 1 (остаток)

Строки: кавычки и шаблоны

Строки пишут в 'одинарных', "двойных" или `обратных`. Кавычки внутри строки — тоже строка, если тип кавычек другой.

const name = "Анна";
console.log('Привет, ' + name + '!');
console.log(`Привет, ${name}!`);   // шаблон

Явное преобразование: String() и Number()

Перевод между типами: String(5) — «5», Number("12") — 12. Внимание: Number("12abc") даст NaN, а пусто превращается в 0.

const year = "2026";
console.log(Number(year) + 1);  // 2027
console.log(String(10) + 10);   // "1010" (склейка!)

Булевы значения: истина и ложь

true/false рождаются из сравнений и логики. В условиях «работают» и не-булевы: пустая строка, 0, null, undefined — ложь; «непустые» значения — истина.

const ready = true;
const sum = 5000;
console.log(sum > 0);     // true
console.log(!ready);      // false

Нестрогое сравнение: почему избегать

== «неполноценно» сравнивает по приведению типа, === — строго. Разница заметна: "5" == 5 — true, но "5" === 5 — false. Правило: всегда ===.

console.log("5" == 5);   // true (сравнит как числа)
console.log("5" === 5);  // false (типы разные)

Подстановка в строку: ${выражение}

Обратные кавычки вставляют значения прямо в текст: `Цена: ${price} ₽`. Внутри ${} можно делать вычисления и вызовы — код короче и яснее конкатенации.

const items = 3;
const total = 1200;
console.log(`Корзина: ${items} шт., сумма ${total} ₽`);

Массив: сигналы под одной переменной

Массив — пронумерованный список: ["а", "б", "в"]. Индексы начинаются с 0, длина — .length. Один массив может держать и строки, и числа, и объекты.

const names = ["Анна", "Борис"];
console.log(names[0]);        // "Анна"
console.log(names.length);    // 2
names.push("Виктор");         // добавить в конец

Объект: «анкета» из свойств

Объект — «карточка» с именованными полями: { name: "Анна", age: 30 }. Значения читают через точку или «[ключ]».

const user = { name: "Анна", age: 30 };
console.log(user.name);
user.age = 31;
console.log(user["age"]);

Метод: действие «через точку»

Метод — функция «привязанная» к значению: "привет".toUpperCase(). Разбиение похоже: строка.метод(), массив.метод(), число.метод().

const s = "Привет";
console.log(s.toUpperCase());    // "ПРИВЕТ"
console.log(s.includes("мир"));  // false

Пустота: undefined против null

undefined — «значения не задано» (так бывает «само собой»), null — «программно пусто» (мы сами его ставим). Строгого деления требует JS-культура, не сам язык.

let a;
let b = null;
console.log(a, b);   // undefined null
console.log(a == null);   // true (undefined == null)

Тип значения: typeof в руках

typeof отвечает «какой тип»: number, string, boolean, object, undefined... Полезно, когда данные пришли «откуда-то» и вы не знаете их природу.

console.log(typeof 42);        // "number"
console.log(typeof "42");      // "string"
console.log(typeof null);      // "object" (историческая странность)

Условие «на лету»: короткое замыкание

&& и || «ленивые»: останавливаются, как только ответ известен. Отсюда приёмы: user && user.name — «верни имя, если user есть», user || guest — «если нет, возьми запасного».

const user = getMaybeUser();
console.log(user && user.name);      // undefined, если user нет
console.log(user ?? userName);       // запасной вариант

Тернарник: условие в одну строку

условие ? если-да : если-нет — «компактный if» для выбора значения: age > 18 ? "взрослый" : "ребёнок". Понятней, когда ветки короткие.

const age = 20;
const label = age >= 18 ? "взрослый" : "ребёнок";
console.log(label);   // "взрослый"

«Пробег» по массиву: for...of

for (const item of list) — «для каждого значения массива по очереди». Не надо индексов и длины — просто «пробегаем» и делаем с каждым одно и то же.

const colors = ["красный", "зелёный"];
for (const c of colors) {
  console.log(c);
}

Документация: MDN — ваш справочник

Из языка не запоминают всё: спрашивают документацию. MDN (developer.mozilla.org) — эталон: описания методов с примерами. Консоль и документация закрывают 90% «как это работает».

Логирование: console.log и его друзья

Помимо логирования значений, консоль умеет структурировать: console.table рисует таблицу из массива, console.warn/error — цветные премию-сообщения. Чем раньше вы начнёте «разговаривать» с консолью, тем быстрее найдёте баги.

console.log("значение:", 42);
console.warn("внимание!");

Отладка шаг за шагом: debugger

Строка debugger ставит «стоп» в выполнении: DevTools открывает Source, показывая значения переменных прямо в окне. Это «приостановленная вселенная» вашего кода.

function calc(a, b) {
  debugger;               // пауза: смотрим a и b
  return a * b;
}

Стрелочные функции: второй стиль

(a, b) => a + b — стрелочная функция: короткая запись «параметры, стрелка, результат». Для простых превращений данных — идеал. Область видимости чуть иная, чем у function — вернёмся в уроке 8.

const double = x => x * 2;
console.log(double(21));   // 42

Код в файле: внешние скрипты

Правило: JS лежит в отдельном файле и подключается тегом <script src="js/main.js">. Перед закрывающим body или с defer — скрипты выполняются после разметки и «видят» её.

<script src="js/main.js" defer></script>

Строгий режим: 'use strict'

"use strict" в начале файла включает «строгие» правила: меньше молчаливых странностей, больше явных ошибок. Лучше знать о проблеме сразу, чем ловить «тихий баг».

"use strict";
let x = 1;   // в strict обязателен let/const/var

«Призраки» переменных: var и поднятие

Старый var «поднимает» объявление вверх блока функции и не уважает «язык блоков». Совсем новый код пишут на let/const; var встречается в legacy — знание спасает при чтении чужих проектов.

if (true) {
  var v = 1;   // просочится наружу блока
}
console.log(v);   // 1

Читаем ошибки: стек-трейс

Ошибка в консоли — не ругань, а карта: «где упало» и «откуда вызвано». Верхняя строка — место сбоя, ниже — цепочка вызовов. Читайте снизу вверх для понимания «кто позвал».

greet();
// Uncaught ReferenceError: greet is not defined

Практика: викторина в консоли

Пять вопросов в массиве объектов {question, answer}; по каждому соберите ответ и сравните ===. Так тренируются массивы, объекты, тернарники и циклы — без страницы вообще.

const quiz = [
  { q: "2+2?", a: "4" },
  { q: "Цвет неба?", a: "blue" },
];
for (const item of quiz) {
  console.log(item.q, item.a);
}

Итоги урока 7: что уже умеет ваш код

Вы знаете переменные и типы, строки и шаблоны, массивы, объекты, тернарники, короткие пути «||» и «??», скрытые функции и отладку. Это база: язык «понимает» вас, вы — язык. Дальше — полноценные функции, условия и циклы: урок 8.

Методы чисел: база для расчётов

Числа имеют «обвязку» методов: toFixed, toString, toPrecision — «преобразования», Math — «математика». Не путайте «свойство» и «метод»: длина — без скобок, метод — «со скобками» (и аргументами).

let price = 12.345;
price.toFixed(2); // "12.35" — строка!

Типы «слухов»: число, строка и правда

JavaScript «мягко» приводит типы: "5" + 2 → "52", "5" * 2 → 10. Разница между «плюс-строкой» и «плюс-числом» — первый «склеивает», второй «складывает». Следите за «типом» — он решает результат.

Обрезка строки: slice и его границы

slice(начало, конец) вырезает часть строки; «конец» — исключая. Отрицательные индексы «с конца». Не меняет исходную строку — возвращает «новую». Точный «скальпель» текста.

"Привет мир".slice(0, 6); // "Привет"

Замена части: replace и replaceAll

replace найдет «первое» вхождение; replaceAll заменит «все». Для «всех с начала» удобен регэксп /.../g. Не «мутирует» строку — вернёт новую. Универсальная «бритва» текста.

let s = "а-а";
s.replaceAll("-", ""); // "аа"

Сравнение строк: лексическое

Строки сравниваются «по кодам символов» (лексикографически): "abc" < "abd". Верхний/нижний регистр «разобщены» («Z» < «a»). Для «людского» сравнения приводите к нижнему регистру — или к «своему порядку».

Конвертация: число в строку и обратно

Число → строка: String(n), n.toString(); строка → число: Number("5"), +"5", parseInt("5px"). parseInt «обрывает» на «не-цифре», Number — строго. «Профиль» преобразования выбирается под задачу.

let n = parseInt("150px", 10); // 150

Округление: контроль точности

Math.round — «до ближайшего», Math.floor — «вниз», Math.ceil — «вверх». «Пол-центовые» дроби 0.1+0.2 «дрожат»; saved fin через toFixed или «умножение на 100». Точное «довершение» денег — округление перед выводом.

Math.round(2.5); // 3

Не-числа: NaN и Infinity

NaN («не число») — результат «битой» арифметики («5" - "x"); Infinity — «перелив» (1/0). NaN «не равен» себе — проверяйте isNaN(); Infinity — через isFinite(). «Тихая» математика требует «стражей».

isNaN("abc");  // true
isFinite(42);     // true

Большие и малые: экспоненциальная запись

Очень большие/малые числа — «экспонента»: 1e6 = 1000000. «Запись» компактна в коде и в выводе, но «глаз» привычнее к «обычным» числам. Форматирование для показа — toLocaleString() «российским» способом.

let big = 1e6;       // 1000000
big.toLocaleString("ru-RU"); // "1 000 000"

Случайность: Math.random для практики

Math.random() — «псевдослучайное» 0≤x<1. «До N»: Math.floor(Math.random() * N); «интервал from..to»: формула с (to-from+1). Случайные имена, «подбрасывание монеты», «перетасовка» — «двигатель» игр и тестов.

let dice = Math.floor(Math.random() * 6) + 1; // 1..6

Тернарный оператор: «вопрос? да : нет»

Тернарный — компактное «если»: условие ? значениеА : значениеБ. Одно выражение в «логическом» присваивании — прекрасно; «много» вложенных — читаемо плохо. Правило: «одна строка — одно решение».

let status = age >= 18 ? "взрослый" : "ребёнок";

Логические И и ИЛИ в условиях

&& — «оба истинны»; || — «хотя бы один». В «условиях if» они «булевы»; в «выражениях» — «возвращают одно из значений» (trick «или-дефолт»). Держите «логику» ясной скобками.

if (user && user.isAdmin) {
  showPanel();
}

Короткое замыкание: && и ||

&&/|| «останавливаются» на «решающем» значении: для || — первая «истина», для && — первая «ложь». Отсюда «дефолты»: name || "Гость". Быстрое «сокращение», но «скрытое» — читается хуже явного if.

let label = name || "Гость";

Приоритет условий: скобки решают

Операторы имеют «приоритет»: `!` > сравнения > && > ||. Спор «логики» решают скобки: `(a || b) && c`. Не надейтесь на «памятки приоритета» — «скобки» всегда «проще прочитать».

if ((a || b) && c) { ... }

Проверка вхождения: includes и indexOf

includes(часть) — «есть ли» (булево), indexOf(часть) — «позицию или -1». Для строк и массивов одинаково «удобно». «Есть ли подстрока» и «где она» — две «близкие», но разные задачи.

"hello".includes("ell"); // true

switch: сравнение «по равенству»

switch (выражение) сравнивает «строго» с case. Удобен для «однозначных» вариантов (День недели, тип). Без break — «проваливание» в следующий case. «Альтернатива» if-цепочке для «фиксированных» значений.

switch (day) {
  case "пн": plan(); break;
  default: rest();
}

Диапазоны: проверка «в интервале»

«Между» проверяют двух-ступенчатым условием: x >= 10 && x <= 20. Бис «интервала» — «границы включены» (или нет) — вопрос «определений». Сравните и «числовые диапазоны», и «строковые» по длине.

if (score >= 10 && score <= 20) {
  /// в "зелёной зоне"
}

Цепочка условий: else if-каскад

Несколько «сортов» правды: if … else if … else. Сверху «узкие» условия, вниз — «широкие». Проверки «по очереди», «первое правдивое» выполняется. Классика «классификации» значений.

if (score >= 90) { "A" }
else if (score >= 75) { "B" }
else { "C" }

Безопасный доступ: «?."» и проверка полей

Опциональная цепочка user?.name вернёт undefined вместо ошибки, если user — null/undefined. Короче «каскада &&» и «тише» исключений. Применяйте к «необязательным» цепочкам вложенных объектов.

let city = user?.address?.city ?? "неизвестно";

Булевый результат: Boolean() явно

"5" || {} «выдают значения», не true/false. Если нужен именно булев «флаг» — оберните: Boolean(x), !!x. В условиях if «неявно» булевы; в возвратах и передаче — «явно» реже «спорно».

let hasItems = Boolean(cart.length);

Цикл по коллекции: for of

for (const x of arr) проходит элементы (значения) — для массивов и строк. Читается «как книжная речь». Нужны индексы? — тогда классический for или entries. «Смысл» по «значениям» — самая частая итерация.

for (const name of names) {
  greet(name);
}

Перебор свойств: for in с осторожностью

for (const key in obj) идёт по «ключам» объекта (и «унаследованным»!). Для «своих» ключей фильтруйте hasOwnProperty. «Свойства объектов» — сфера for-in; массивы он «не любит» (порядок/«дыры»).

for (const key in user) {
  if (user.hasOwnProperty(key)) log(key, user[key]);
}

Цикл по строке: разбор по символам

Строку можно «обойти» как массив символов: for-of даёт «буквы», цикл с индексом — по positions. «Вычеркнуть» символы, «подсчитать» буквы, «собрать» обратно — «атомарная» работа с текстом.

let count = 0;
for (const ch of "абв") { if (ch === "б") count++; }

Прерывание цикла: break и его границы

break «выходит» из цикла полностью — «достаточно нашли». В вложенных циклах break выходит «из одного уровня». «Искать первое вхождение» — родной дом break. Не «бегите» дальше «незачем».

for (const item of list) {
  if (item.id === target) { found(item); break; }
}

Пропуск шага: continue

continue «перескакивает» на следующую итерацию, не выполняя хвост тела. «Пропустить пустые строки», «игнорировать чётные» — сито внутри цикла. Условие «invert» через continue — читается «сверху вниз».

for (const s of lines) {
  if (s === "") continue;
  process(s);
}

Вложенные циклы: логика «квадрата»

Внутри одного цикла — другой: «строки»×«столбцы». Таблицы, «координаты», «пирамиды» из символов — классика. Наблюдайте за «именами» (i, j) и «границами» — итерации «обвесить» легко.

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) draw(i, j);
}

Бесконечный цикл: как не «завесить»

Забыли «приращение» или условие «всегда истинно» — цикл «зависнет» (вкладка «повиснет»). Спасают: инкремент в приращении, «граница-ссылку» обновлять в теле, «внешний» предохранитель (итерации < N). «Пока-истина» — сила и риска верный спутник.

let i = 0;
while (i < 10) { work(); i++; }

Накопление в цикле: счётчики-суммы

Цикл «накапливает»: сумма, произведение, «минимум/максимум», количество «подходящих». Мысль — «аккумулятор» перед циклом, «обновление» в теле. «Данные из цикла» — базовый шаблон «отчёта».

let sum = 0;
for (const n of nums) sum += n;

Практика: пирамида из символов

Нарисуйте «пирамиду» из «*»: цикл по строкам, внутри — «пробелы» и «звёзды» по номеру строки. «Собрать» строки и «console.log». Упражнение закрепляет «вложенные циклы» наглядной «картинкой».

for (let i = 1; i <= 5; i++) {
  console.log("*".repeat(i));
}

Практика: проверка простого числа

Простое число — «делится только на себя и 1». Циклом проверяем «делители от 2 до √n» (Math.sqrt ускоряет). Нашли «делитель» — break. Цикл с «ранним выходом» — «структурная» практика контроля.

let isPrime = true;
for (let d = 2; d * d <= n; d++) {
  if (n % d === 0) { isPrime = false; break; }
}

Что умеет JavaScript в браузере

JavaScript «оживляет» страницу: меняет текст, реагирует на клики, получает данные. Он работает «здесь и сейчас» в браузере пользователя. HTML — скелет, CSS — вид, JS — поведение. Изучение начинается «с самих основ» языка.

Где живёт JS: тег script

Скрипт встраивается в <script>: в head, в конце body или в отдельном .js файле. Код «выполняется» при загрузке. Файл подключается: <script src="app.js"></script>.

<script src="app.js"></script>

console.log: первые слова кода

console.log выводит значение «в консоль» браузера. «Печать» — способ «увидеть» переменные и результаты. Откройте DevTools (F12) — там «отчёты». Экспериментируйте «безнаказанно».

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

Переменные: три способа объявления

let — «меняемая», const — «постоянная», var — «старая». Правило: const по умолчанию, let — если понадобится менять. Имя — «ярлык» для значения. Переменная «хранит», а не «ссылается» на магию.

const answer = 42;
let score = 0;

Имена переменных: правила и вкус

Имя — буквы, цифры (не первая), $ и _. Пробелы и дефисы нельзя. Стиль: camelCase — myFavoriteColor. Имя «говорит»: totalPrice, isReady. «Плохие» имена — a, x1 — «проклятие» чтения.

Типы данных: примитивы

В JS живут типы: number (число), string (строка), boolean (да/нет), undefined, null. typeof «называет» тип значения. Примитивы «просты», объекты — «сложны». Понимание типа — «половина» решения.

Выражение и инструкция

Выражение «возвращает» значение: 2 + 2, name.toUpperCase(). Инструкция «делает» действие: let x = 5. Строки кода — «смесь» обоих. Возврат «значения» — «сердце» программирования.

Присваивание: знак равенства

= «кладёт» значение в переменную: x = 10. Правая часть «вычисляется» первой, результат — «в лево». Сравнение — «двойное» равно ==. «Одно равно» — «запись», «не путайте» со «сравнением».

Комментарии: заметки для людей

// — «однострочный», /* */ — «блочный». Комментарий игнорируется кодом. Объясняет «зачем», не «что». «Отключить» строку кода — поставить //. Аккуратные заметки — «карта» для будущего «себя».

// итог корзины
const total = items * price;

Ошибки первой программы

Оператка, «незакрытая» скобка, «необъявленная» переменная — «первые» гости. Console «покажет» строку и «вид» ошибки. Чтение ошибки — «навык»: начните с «первого» слова сообщения. Ошибаться — «нормально».

Числа: целые и с плавающей точкой

Numbers — и «целые» (42), и «дробные» (3.14). Плюс «специальные»: Infinity, NaN. Арифметика над числами — «обычная» математика. Для денег «осторожно» с дробями: точность «с плавающей» «обманывает».

Арифметика: пять операторов

+ сложение, − вычитание, * умножение, / деление, % остаток. % — «остаток деления»: 7 % 3 → 1. Удобно для «чётность», «циклы», «рамки». Арифметика — «база вычислений» в программах.

Порядок операций и скобки

Умножение «раньше» сложения: 2 + 3 * 4 = 14. Скобки «передают» приоритет: (2 + 3) * 4 = 20. «Скобочная» ясность — «лучше» «интуитивных» догадок. Прочитайте формулу «вслух» — и скобки найдутся.

Сокращённые приращения: ++ и -- на практике

counter++ — «увеличить на 1»; counter-- — «уменьшить». Короткая запись «++». Разница «пост/пре» — «тонкость» с «использованием» значения. Для «счётчиков» ваша формула. «Знак» кладётся «по вкусу».

let n = 0;
n++; // 1

Присваивания с операцией: +=, -=, *=

total += 5 — «прибавить 5»; total *= 2 — «удвоить». Запись = «переменная + операция + равно». Коротко и «по месту». Для накопления сумм — «естественная» форма. Читается «привычнее», чем полная.

Проверка чисел: NaN и typeof

NaN — «не число»: итог «нечислинных» операций. isNaN() «проверяет»; Number() «превращает» строку в число. typeof NaN → "number" — «ирония». «Валидируйте» ввод: число или «мусор»?

Округление: Math.round и друзья

Math.round — «к ближайшему»; Math.floor — «вниз»; Math.ceil — «вверх»; Math.trunc — «отрезать» дробь. Округление «для цен» — с сотыми: «умножить-округлить-разделить». «Три» округлителя — «нужные» «разы».

Случайные числа: Math.random

Math.random() → «от 0 до 1» (без 1). Умножение задаёт «размах»: Math.floor(Math.random() * 6) + 1 — «кубик». Случайность для «игр», «выбора», «данных». «Засев» не нужен — «браузер» сам.

Сравнение чисел и точность

Сравнение «через» == и — и «строгость» — отдельно. Числа «равен» при «одинаковой» величине. «Дробная» точность «вводит» «почти-равенство»: проверяйте «разность < мал». «Спор» о равенстве — «вечная» тема чисел.

Практика: маленький счётчик-фантазия

Посчитайте «сами»: сумма корзины из пары товаров, процент скидки, остаток. Напечатайте в console каждый итог. Имена — осмысленные, формулы — в скобках. «Счётная» практика — «разминка» арифметики.

Строки: кавычки и шаблонные строки

Строка — «текст» в кавычках: 'одинарные', "двойные", — обратные. Выбор «по вкусу», «последовательность» важна. Обратные кавычки «разрешают» интерполяцию и переносы. Строки «неизменяемы» — методы «возвращают» новые.

Сложение строк: конкатенация

+ «склеивает» строки: "привет" + " мир". Числа рядом «станут» строками при «+" со строкой. «Порядок» смеси — «внимание»: 1 + "2" → "12". Конкатенация — «древняя» техника «сборки» текста.

console.log("Имя: " + name);

Интерполяция: ${} в шаблонах

В обратных кавычках ${выражение} «подставляет» значение. «Чище», чем «гроздья» +. Можно нырять «в любые» выражения: ${price * 2}. «Шаблоны» — «современный» стандарт «сборки строк».

Длина строки: свойство length

str.length — «число символов». Пробелы «считаются». Пустая строка "" — 0. «Длина» — для «проверки длины пароля», «номеров», «полей». Базовое «свойство», не «метод» — без скобок.

Буквы по индексу: str[i]

str[0] — «первый» символ, str[str.length - 1] — «последний». Индексы «с нуля». str[i] «достаёт» букву, «не меняет» строку. Обращение «по позиции» — путь к «анализу» текста.

Поиск внутри: indexOf и includes

str.includes("кот") → true/false; str.indexOf("кот") → позиция или -1. «Хочет» спросить «есть ли» — includes; «где именно» — indexOf. Поиск «регистр»-чувствителен. Проверки «в тексте» — «повседневность».

Вырезание: slice и substring

str.slice(start, end) «вырезает» подстроку (end — «не включительно»). str.substring(start, end) — «похоже», но с «меньше» «капризов». Отрицательные «в slice» — «с конца». «Фрагменты» строк — «химзавод» обработки текста.

Регистр букв: верхний и нижний

str.toUpperCase() — «ВВЕРХ», str.toLowerCase() — «вниз». Сравнение «без регистра»: оба «к нижнему» перед ==. «Поиск» и «сортировка» не любят «РегистрRы» обмана. Нормализация «к единому виду» — «тривиальный» трюк.

Замена и разбиение: replace, split

str.replace("а", "б") — «первая» замена; с regex — «все». str.split(",") — «разбиение» в массив по разделителю. Обратно — arr.join(","). «Разбор» текста — «вход» в мир данных.

const parts = "а-б-в".split("-"); // ["а", "б", "в"]

Практика: строка о себе

Соберите «биографию» строкой: имя, город, возраст «через» шаблон. Посчитайте length, найдите «ключевое» слово includes, срежьте фрагмент slice. Выведите этапы в console. Строки — «второй» «член» семьи данных.

Булевы значения: true и false

Boolean — «два» значения: true и false. Рождается «из сравнений»: 5 > 3 → true. Логика «да/нет» — «выбор» программы. Ветвления и условия строятся «на мечах» булевых.

Сравнения: ===, ==, больше/меньше

=== — «строгое» равенство (тип+значение); == — «мягкое» (типы «договорятся»). Живут и <, <=, >, >=. «Правило привычки»: всегда «тройное» ===. Строгость типов «спасает» от «сюрпризов».

console.log(5 === "5"); // false

Логика: И, ИЛИ, НЕ

&& — «обе правды»; || — «хоть одна»; ! — «инверсия»: !true → false. Сочленение условий: isLoggedIn && hasAccess. «Отрицание» — «переворот»: !isValid. Логика — «блоки сборки» сложных проверок.

Правдивость: truthy и falsy

В «условии» любое значение «становится» булевым. Falsy: 0, "", null, undefined, NaN, false. Всё «остальное» — truthy. «Пусто» и «ноль» «лгут» false. Опечатки «нет»: проверьте на «0» перед «делением».

Условный оператор: if и else

if (условие) { … } else { … } — «развилка». Истина — «первая» ветка, ложь — «вторая». Фигурные скобки «рамка» блока. Условие «читается» как предложение: «если…, то…». Развилки — «нервная система» программ.

if (score > 50) {
  console.log("Отлично");
} else {
  console.log("Стоит подтянуть");
}

Несколько веток: else if

Ступени условий: if → else if → else. Программа «проверяет» по очереди «первой» правды. Порядок веток «важен»: узкие «сначала». «Лестницы» условий — «трамплин» к «prefет» выборам.

Тернарный оператор: ?:

Условие ? «да» : «нет» — «короткое» if в выражении. Возвращает «значение», поэтому «присваивается»: const msg = ok ? "yes" : "no". «Вложенность» тернарников — «плохо для глаз». Для «простых» развилок — «элегантность».

Нулевое слияние: ??

a ?? b — «значение a», если «не null/undefined»; иначе b. «Запасной» ответ, когда данных «нет». Отличие от ||: ?? «не трогает» 0 и "". «Право» на «дефолты» без «обмана нулём».

const name = user.name ?? "Гость";

Цепочка без сбоев: оператор ?. подробнее

user?.address?.city — если «нет user.address», вернёт undefined «без» крика. Опра the «несуществующей» дорожки. «Спокойный» доступ к вложенным данным API. Цепочка «обрывается» на первом отсутствии.

Практика: логика входа в систему

Сделайте «проверку входа»: имя не пустое, возраст 18+, согласие с правилами. if/else + логические «сочленения». Выведите «пущен» или «отказано». Логика «входа» — «живая» модель «настоящих» форм.

switch: выбор из многих вариантов

switch (value) сравнивает value с case-метками. При «совпадении» — «выполняется» ветка. break «заканчивает» ветку. default — «что по умолчанию». Меню из «5+» пунктов читается «свитчем» «яснее», чем лестницей if.

switch (day) {
  case 1: console.log("Пн"); break;
  default: console.log("?");
}

case против if: когда что выбрать

Одно «значение» и «много» вариантов — switch «чище». Сложные условия (}, &&, сравнения) — if. Классика: switch «для» выбора «по значению», if — «по логике». «Читатели» «выигрывают» от «правильного» выбора.

break и default: управление таблицей

break «выпрыгивает» из switch (без него — «провал» в следующую ветку). default — «безусловная» ветка «если никто не подошел». Иногда «провал» намерен: два case «по одному коду» — «фолл-тру». Обычно break «обязателен».

switch со строками: меню команд

Ключ — не только числа: case "start": «строй» по строкам. Командный «пульт»: "play", "pause", "stop". «Строковые» метки «читаются», как предложения. Программы «на русском» выигрывают от строк-«сигналов».

Практика: меню программы на switch

Соберите «консольное» меню: «1 — показать», «2 — добавить», «3 — выход». Обработайте command switch-ом, default — «ошибка выбора». «Меню-логика» — «каркас» будущих «интерактивных» интерфейсов.

Ошибка switch: забытый break

Без break «выполняются» все «последующие» работы до конца switch. «Случайные» побочные действия «невинно» ломают логику. Диагностика проста: «лишний вывод» → «вставь break». «Рефлекс»: писать break «сразу», не «после».

Вложенные if: осторожная глубина

if «внутри» if допустим, но «глубина» «съедает» читаемость. «Выровненные» проверки: «ранний» return/выход из веток. Цель — «плоская» логика. «Вложенность ≤ 2» — «золотой» потолок.

Тернарник и читаемость

Простой «да/нет» — тернарник «элегантен»; три+ веток — if/switch. Цепочки «a ? b : c ? d : e» — «нелепо» глазу. Правило: «на линии» помещается «одна» развилка? Тогда «тернарник». Иначе — «лестница» или switch.

Практика: рейтинг отзывов

Оценка «звёзд» 1–5: switch «называет» вердикт — «ужасно», «средне», «супер». Число → смысл. Добавьте default для «несуществующей» оценки. «Рейтинг-машина» — «очень честная» практика «выбора».

Проверка ввода: число или мусор

Валидация «числа»: Number(value), проверка isNaN, верх/низ диапазона. «Строковый» ввод с «пробелами» — trim. «Плохие» данные «не пускать». Программа — «фильтр», а не «мусоросборник».

Цикл for: повторение классическое

Цикл for — «повторяй» по «счётчику»: старт; условие; шаг. Тело в { } выполняется, пока условие true. «Знакомый» вид: for (let i = 0; i < 10; i++). Счётчики «сомнительные» — «общее место» программирования.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

Счётчик цикла: шаги и границы

i «растёт» на шаг; условие i < N «стоп» при равенстве/за. «Ошибка» классовая — i <= обычно «лишний» заход. Ноль «отсчёта» — «естественный» старт. «Границы» — «самое» важное «зрение» циклов.

Цикл while: пока условие верно

while (условие) { … } — «пока true, повторяй». Число «заранее» неизвестно — while «уместен». Счётчик «обновляйте» «внутри», иначе — «вечность». «Считывание» условий — «естественное» чтение «потока».

Цикл do…while: хотя бы один раз

do { … } while (условие); — тело «выполняется» первым, условие «проверяется» потом. Гарантия: «минимум» одна «итерация». «Один» проход даже при «локинувшем» условии. «Редкий», но «свой» «уголок» задач.

Бесконечный цикл: как не сгореть

Забыли «шаг» или условие «никогда false» → «зависание». Закладка «F» / закрыть вкладку — «внешний» ремонт. Условие «видимое», счётчик «растёт». «Гвардейцы» — консоль-«трассировка». «Бесконечность» — «враг» номер один.

Прерывание: break в цикле

break «выпрыгивает» из цикла «досрочно» — «нашёл» и «перестал». Поиск «первого» соответствия — «частый» адресат. «Хвост» цикла «не нужен», раз «ответ найден». «Стоп» — «инструмент» «экономии» работы.

Пропуск итерации: continue

continue «перескакивает» на «следующую» итерацию, «не заканчивая» тело. Фильтр «не делай для» одного случая. Цикл «шает» дальше. «Фильтрация» без «неудобных» вложений — «чистое» логическое «плетение».

Вложенные циклы: таблица умножения

Цикл «внутри» цикла: for i { for j { … } }. Внутренний «прокручивается» целиком на каждый внешний шаг. Таблица умножения: «ряд за рядом». Сложность «растёт»: 10×10 = 100 итераций. «Матрицы» — «рядовая» арена.

Перебор массива: for и for…of

For «по индексу»: arr[i]. for…of «по значению»: for (const x of arr). «Значенье» вместо «позиции» — там «где не надо». Оба «живут» — первый для «индексов», второй для «сумм». «Проход» побеждает «повторение».

for (const item of items) {
  console.log(item);
}

Практика: сумма и факториал

Сумма 1..N: аккумулятор sum += i в цикле. Факториал: умножение подобное. «Аккумуляция» — «вершина» практики циклов. Проверьте «на 5» и «на 10» руками. Циклы «складывают» миры.

Массив: список значений

Массив — «упорядоченный» список: [1, 2, 3] или ["а", "б"]. Держит десятки и сотни значений. Объявление: const names = ["Аня", "Боря"]. «Коллекция» — «второе сердце» данных после переменной.

Создание и чтение массива

Читайте по индексу: arr[0] — «первый». Индексы «с нуля»; arr[arr.length - 1] — «последний». Создание «квадратными» скобками. «Чтение» — «как» у строк: «по позиции». Массив — «место» для «внешних» данных в коде.

const days = ["Пн", "Вт", "Ср"];
console.log(days[1]); // "Вт"

Длина массива: length

arr.length — «сколько элементов». Изменяемость «вручную» возможна, но «редкость». Срез «правила» `arr.length - 1` для последнего. «Длина» — «калибр» для циклов. Аккуратные сортировки «не» «играют» с ней.

Запись и изменение элементов

arr[0] = "новый" — «запись» по индексу. «Замена» старого значения. Массив «мутируем» — тот же объект «ДНК». «Индексируемое» изменение — «мощная» техника списка. «Пейзажа» «не ломая», «меняйте» «часть».

Добавление: push и unshift

arr.push(x) — «в конец»; arr.unshift(x) — «в начало». Возвращают «новую длину». «Хвост»-добавление — «самое частое». «Голова» — «сдвигает» все: «дорогой» трюк. «Динамика» списков — «бедра» приложений.

Удаление: pop и shift

arr.pop() — «снять» с конца (возвращает удалённое); arr.shift() — «с головы». «Очередь/стек» — «две» классики. pop «дёшев», shift «съезд» всех. «Управление» размером «на лету» — «магия» динамики.

Перебор массива: for…of и индексы

for…of — «сами значения»; for-по индексу — «с позициями». Суммирование «значений» — for…of. «Точка» вставки — для индексов. Выбирайте по «задаче»: коллекция или «карта мест». Оба «прогонят» «весь список».

Массивы и строки: split и join

"а-б".split("-") → ["а", "б"]; ["а","б"].join("-") → "а-б". «Туда-обратно» — «мост» текста и списка. Разбор ввода «по разделителю» — «хлеб» парсера. «Сборка» вывода из частей — «глазу» приятно.

const words = "кот собака мышь".split(" ");

Практика: список покупок

Заведите cart = []; добавьте push-ом покупки; выведите «по одной»; пересчитайте length. «Снимите» последний pop. «Корзина-список» — «самый честный» учебный проект «массивов».

Практика: генератор чисел-ряда

Цикл «наполняет» массив: for (i) nums.push(i * 2). Затем «суммируйте» for…of. «Генерация» и «расчёт» — «этапы» одна «тренировка». Математика «на ходу» — «движная» работа со списком.

Практика: простой калькулятор

Калькулятор «на консоль»: два числа + действие. Свитч по действию: +, -, *, /. Проверьте деление на ноль. Результат — console.log. «Калькулятор» — «первоклассное» упражнение арифметики и выбора.

switch (op) {
  case "+": console.log(a + b); break;
  // другие операции
}

Практика: викторина на if

«Вопрос-ответ»: задайте строку, сравните с правильным ответом (регистр!). Сообщение «верно/неверно». Повторите «три» вопроса. Викторина пробует «условия» в игре. «Знание» закрепляется «мерой» «удовольствия».

Практика: таймер-счётчик

Цикл «тик» от 10 «вниз»; на каждом шаге — печать. При 0 — «время вышло». Вложенный if внутри цикл. «Обратный» отсчёт — «динамическая» иллюстрация счётчика. «Тайминг» — «сюжетная» магия.

Практика: «угадай число» логикой

Секретное число Math.random; игрок «угадывает»; подсказки «больше/меньше». do…while «хотя бы один раз» спросить. Сравнения в ветках. «Угадайка» — «игровой» сад циклов и условий.

Практика: ряды в консоль

Печать «рядами»: for — «столбик» чисел, вложенный — «таблица». «Вид» результата — «наглядная» обратная связь. Символы «*» в строчках: «полоски» из циклов. «Рисунок» консолью — «занятие» для зрения.

Практика: FizzBuzz на цикле

Классика собеседований: числа 1..100; кратное 3 — Fizz, пяти — Buzz, обоим — FizzBuzz. Печать каждого шага. Один цикл + if/else. FizzBuzz — «проверка» базы на «любой» встрече.

Практика: таблица умножения

Вложенные циклы: внешний — «множимое», внутренний — «множитель». Напечатайте «вычисления» рядами. Классика 1..9. Вложенные превращения — «тренировка» вложенности. Математика «на экране» — «приятное» зрелище.

Практика: палиндром строки

Палиндром — «туда и обратно» то же: «топот». Сравните строку с «развёрнутой»: s.split("").reverse().join(""). Сравнение «вниз» до середины — «оптимизация» будущего. Перевёртыши — «гимнастика» для строк.

Практика: среднее арифметическое

Сумма чисел «списком» через for…of, деление на length. Среднее — «мера» центральной тенденции. Статистика «на карандаше» — «первый» шаг анализа данных. Считайте «по-человечески» и «кодом» — сравните.

Практика: поиск максимума

«Стартовое» предположение — «первый» элемент; дальше «сравнивай» и «переписывай». Единственный проход — и победа. Максимум/минимум — «повторяющаяся» задача. «Код» минимума — «зеркало» максимума.

Итоги урока 7: язык JavaScript начался

Урок 7 открыл JavaScript: переменные, типы, арифметика, строки, логика, циклы, массивы. Консоль стала «полигоном» идей. Это «фундамент» для функций и объектов — следующих уроков.

Частые ошибки новичка в JS

Спутать == и = ; забыть тип при сравнении; «синтаксис» скобок; бесконечные циклы; путаница names и length. Каждая «ошибка» кодирует «характер» известного правила. Список ошибок — «оптический» тренажёр.

Закрепление: операторы по памяти

Назовите с закрытой тетрадью: арифметика (5 шт), сравнения (6), логические (3), присваивания. Вспомнили лишней? Нет — «пишите» от руки шпаргалку. «Воспроизведение» по памяти — «настоящее» закрепление.

Домашнее задание: консольный справочник

Соберите «мини-справочник»: меню на switch, массив тем, цикл печати, поиск includes. Всё «в консоли». Задание «сшивает» многие куски урока. «Справочник» — «продукт», не просто «упражнение».

Дальше: урок 8 — функции и структуры

Функции упакуют «повторы» и «возвратят» значения. Объекты соберут «данные по имени». Массивы и методы станут «гладкими». Урок 7 — «примитивы»; урок 8 — «организация». «Рефакторинг» начинает «пахнуть».

Область видимости: краткое вступление

let «живёт» в своём блоке { }. Переменная «снаружи» — глобальная, «внутри» — локальная. Одинаковые имена «в разных» блоках — «разные» сущности. «Область» — «адрес» каждой переменной в программе.

Форматирование кода: читаемость сразу

Отступы в 2 пробела, «скобки» на строке с if, точка с запятой. Единый стиль — «юридический» код «без споров». Форматтер (Prettier) «сглаживает» споры. «Красивый» код «читается» как «любимая» книга.

Среда практики: консоль браузера

DevTools → Console — «песочница» мгновенных экспериментов. Вводите выражения и «жгите» Enter. console.log «из» страницы «течёт» сюда же. Консоль — «скорый» транспорт «к знанию».

Отладка первой ошибки: путь

Читайте «первую» строку ошибки; затем «номер» строки. Проверьте «троицу»: имя, скобки, тип. Печатайте «промежуточные» значения. «Ошибся» — не «позор», а «точные» показания прибора. «Путь» находит «рублями».

Заключение урока 7: логика — это мышца

JavaScript «проснулся»: числа, строки, решения и повторения подчиняются. «Мыслительные» мышцы «раскладывают» задачи на шаги. Примитивы — «алфавит»; урок 8 «создаст» слова и фразы. Продолжайте практиковаться «ежедневно».

Заголовок 7000: демо со связкой <label> + <fieldset> (атрибут aria-live=polite)

Задание 7000 на тему «демо». Урок пары: <label> и <fieldset>, атрибут «aria-live=polite» и «aria-pressed». Практика: трек наставника. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: skip-ссылка. Продумайте «озвучьте переход без мыши». Доступность «демо» читается как имя, затем пояснение.

Заголовок 7001: уведомление со связкой <th scope> + <header> (атрибут role=region)

Задание 7001 на тему «уведомление». Урок пары: <th scope> и <header>, атрибут «role=region» и «aria-valuetext». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: стрелки по сворачиваемому меню. Свяжите «проверьте сообщение об ошибке». Доступность «уведомление» читается как имя, затем пояснение.

Заголовок 7002: тест со связкой <button> + <label> (атрибут aria-relevant)

Задание 7002 на тему «тест». Урок пары: <button> и <label>, атрибут «aria-relevant» и «aria-label». Практика: лендинг курса. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: вкладки и shift+Tab. Продумайте «убедитесь в уровне заголовка». Доступность «тест» читается как имя, затем пояснение.

Заголовок 7003: сертификат со связкой <meter> + <dl> (атрибут role=tab)

Задание 7003 на тему «сертификат». Урок пары: <meter> и <dl>, атрибут «role=tab» и «aria-atomic=true». Практика: лендинг курса. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: логичный порядок полей. Убедитесь «тяните фокус после действия». Доступность «сертификат» читается как имя, затем пояснение.

Заголовок 7004: трек со связкой <meter> + <dl> (атрибут aria-label)

Задание 7004 на тему «трек». Урок пары: <meter> и <dl>, атрибут «aria-label» и «aria-expanded». Практика: каталог уроков. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: видимая рамка фокуса. Добавьте «в режиме вкладок доберитесь до цели». Доступность «трек» читается как имя, затем пояснение.

Заголовок 7005: урок со связкой <fieldset> + <th scope> (атрибут aria-describedby)

Задание 7005 на тему «урок». Урок пары: <fieldset> и <th scope>, атрибут «aria-describedby» и «aria-controls». Практика: окно чата с куратором. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: видимая рамка фокуса. Обеспечьте «на скринридере проверьте имя». Доступность «урок» читается как имя, затем пояснение.

Заголовок 7006: чек-аут со связкой <time> + <ol> (атрибут aria-modal=true)

Задание 7006 на тему «чек-аут». Урок пары: <time> и <ol>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: страница сертификатов. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Убедитесь «убедитесь в уровне заголовка». Доступность «чек-аут» читается как имя, затем пояснение.

Заголовок 7007: программа со связкой <legend> + <caption> (атрибут aria-valuetext)

Задание 7007 на тему «программа». Урок пары: <legend> и <caption>, атрибут «aria-valuetext» и «aria-flowto». Практика: журнал оценок. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: проговаривание при return. Убедитесь «проверьте сообщение об ошибке». Доступность «программа» читается как имя, затем пояснение.

Заголовок 7008: практика со связкой <footer> + <meter> (атрибут aria-pressed)

Задание 7008 на тему «практика». Урок пары: <footer> и <meter>, атрибут «aria-pressed» и «aria-invalid». Практика: расписание группы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: крупный курсор в кастомном фокусе. Убедитесь «на скринридере проверьте имя». Доступность «практика» читается как имя, затем пояснение.

Заголовок 7009: чат со связкой <a> + <select> (атрибут aria-modal=true)

Задание 7009 на тему «чат». Урок пары: <a> и <select>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: страница оплаты. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: логичный порядок полей. Продумайте «проверьте сообщение об ошибке». Доступность «чат» читается как имя, затем пояснение.

Заголовок 7010: сертификат со связкой <progress aria-label> + <time> (атрибут aria-current)

Задание 7010 на тему «сертификат». Урок пары: <progress aria-label> и <time>, атрибут «aria-current» и «aria-hidden=true». Практика: лендинг курса. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус на ближайший заголовок после валидации. Свяжите «на скринридере проверьте имя». Доступность «сертификат» читается как имя, затем пояснение.

Заголовок 7011: запись со связкой <ol> + <a> (атрибут aria-live=assertive)

Задание 7011 на тему «запись». Урок пары: <ol> и <a>, атрибут «aria-live=assertive» и «aria-checked». Практика: страница сертификатов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7012: вход со связкой <select> + <legend> (атрибут aria-current)

Задание 7012 на тему «вход». Урок пары: <select> и <legend>, атрибут «aria-current» и «aria-hidden=true». Практика: прогресс-бар ДЗ. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: стрелки по сворачиваемому меню. Свяжите «убедитесь в уровне заголовка». Доступность «вход» читается как имя, затем пояснение.

Заголовок 7013: тариф со связкой <output> + <ul aria-label> (атрибут aria-valuetext)

Задание 7013 на тему «тариф». Урок пары: <output> и <ul aria-label>, атрибут «aria-valuetext» и «aria-flowto». Практика: форма записи на интенсивы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: стрелки по сворачиваемому меню. Обеспечьте «озвучьте переход без мыши». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 7014: личные данные со связкой <progress aria-label> + <time> (атрибут aria-relevant)

Задание 7014 на тему «личные данные». Урок пары: <progress aria-label> и <time>, атрибут «aria-relevant» и «aria-label». Практика: вопрос-ответ модуля. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: стрелки по сворачиваемому меню. Продумайте «озвучьте переход без мыши». Доступность «личные данные» читается как имя, затем пояснение.

Заголовок 7015: комментарий со связкой <textarea> + <table> (атрибут role=button)

Задание 7015 на тему «комментарий». Урок пары: <textarea> и <table>, атрибут «role=button» и «aria-activedescendant». Практика: расписание группы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: вкладки и shift+Tab. Продумайте «убедитесь в уровне заголовка». Доступность «комментарий» читается как имя, затем пояснение.

Заголовок 7016: запись со связкой <input> + <textarea> (атрибут aria-invalid)

Задание 7016 на тему «запись». Урок пары: <input> и <textarea>, атрибут «aria-invalid» и «role=alert». Практика: страница тарифов. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: крупный курсор в кастомном фокусе. Свяжите «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7017: форум со связкой <dl> + <figure> (атрибут aria-flowto)

Задание 7017 на тему «форум». Урок пары: <dl> и <figure>, атрибут «aria-flowto» и «aria-labelledby». Практика: форма записи на интенсивы. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: фокус не застревает в модалке. Продумайте «на скринридере проверьте имя». Доступность «форум» читается как имя, затем пояснение.

Заголовок 7018: чат со связкой <a> + <select> (атрибут aria-describedby)

Задание 7018 на тему «чат». Урок пары: <a> и <select>, атрибут «aria-describedby» и «aria-controls». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «в режиме вкладок доберитесь до цели». Доступность «чат» читается как имя, затем пояснение.

Заголовок 7019: регистрация со связкой <textarea> + <table> (атрибут aria-required=true)

Задание 7019 на тему «регистрация». Урок пары: <textarea> и <table>, атрибут «aria-required=true» и «aria-valuenow». Практика: страница сертификатов. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: порядок Tab по слоям. Обеспечьте «тяните фокус после действия». Доступность «регистрация» читается как имя, затем пояснение.

Заголовок 7020: корзина со связкой <caption> + <main> (атрибут role=button)

Задание 7020 на тему «корзина». Урок пары: <caption> и <main>, атрибут «role=button» и «aria-activedescendant». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: skip-ссылка. Продумайте «проверьте сообщение об ошибке». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 7021: каталог со связкой <th scope> + <header> (атрибут aria-keyshortcuts)

Задание 7021 на тему «каталог». Урок пары: <th scope> и <header>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: кабинет ученика. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Свяжите «убедитесь в уровне заголовка». Доступность «каталог» читается как имя, затем пояснение.

Заголовок 7022: личные данные со связкой <nav aria-label> + <aside> (атрибут aria-controls)

Задание 7022 на тему «личные данные». Урок пары: <nav aria-label> и <aside>, атрибут «aria-controls» и «aria-haspopup». Практика: лендинг курса. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: стрелки по сворачиваемому меню. Продумайте «убедитесь в уровне заголовка». Доступность «личные данные» читается как имя, затем пояснение.

Заголовок 7023: трек со связкой <table> + <nav aria-label> (атрибут aria-labelledby)

Задание 7023 на тему «трек». Урок пары: <table> и <nav aria-label>, атрибут «aria-labelledby» и «aria-current». Практика: прогресс-бар ДЗ. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: skip-ссылка. Свяжите «тяните фокус после действия». Доступность «трек» читается как имя, затем пояснение.

Заголовок 7024: расписание со связкой <meter> + <dl> (атрибут aria-checked)

Задание 7024 на тему «расписание». Урок пары: <meter> и <dl>, атрибут «aria-checked» и «aria-required=true». Практика: расписание группы. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус не застревает в модалке. Добавьте «проверьте сообщение об ошибке». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 7025: корзина со связкой <table> + <nav aria-label> (атрибут aria-live=polite)

Задание 7025 на тему «корзина». Урок пары: <table> и <nav aria-label>, атрибут «aria-live=polite» и «aria-pressed». Практика: прогресс-бар ДЗ. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Обеспечьте «тяните фокус после действия». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 7026: отзыв со связкой <fieldset> + <th scope> (атрибут aria-describedby)

Задание 7026 на тему «отзыв». Урок пары: <fieldset> и <th scope>, атрибут «aria-describedby» и «aria-controls». Практика: прогресс-бар ДЗ. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Проверьте «озвучьте переход без мыши». Доступность «отзыв» читается как имя, затем пояснение.

Заголовок 7027: домашнее задание со связкой <fieldset> + <th scope> (атрибут aria-valuenow)

Задание 7027 на тему «домашнее задание». Урок пары: <fieldset> и <th scope>, атрибут «aria-valuenow» и «aria-owns». Практика: расписание группы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус не застревает в модалке. Убедитесь «озвучьте переход без мыши». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 7028: форум со связкой <label> + <fieldset> (атрибут aria-selected)

Задание 7028 на тему «форум». Урок пары: <label> и <fieldset>, атрибут «aria-selected» и «role=region». Практика: окно чата с куратором. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: skip-ссылка. Проверьте «тяните фокус после действия». Доступность «форум» читается как имя, затем пояснение.

Заголовок 7029: домашнее задание со связкой <th scope> + <header> (атрибут aria-label)

Задание 7029 на тему «домашнее задание». Урок пары: <th scope> и <header>, атрибут «aria-label» и «aria-expanded». Практика: трек наставника. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: начало: фокус на первую ошибку. Обеспечьте «на скринридере проверьте имя». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 7030: модуль со связкой <button> + <label> (атрибут aria-hidden=true)

Задание 7030 на тему «модуль». Урок пары: <button> и <label>, атрибут «aria-hidden=true» и «role=tab». Практика: трек наставника. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: логичный порядок полей. Проверьте «убедитесь в уровне заголовка». Доступность «модуль» читается как имя, затем пояснение.

Заголовок 7031: квиз со связкой <dl> + <figure> (атрибут aria-modal=true)

Задание 7031 на тему «квиз». Урок пары: <dl> и <figure>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: лендинг курса. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Свяжите «в режиме вкладок доберитесь до цели». Доступность «квиз» читается как имя, затем пояснение.

Заголовок 7032: подписка со связкой <output> + <ul aria-label> (атрибут aria-live=assertive)

Задание 7032 на тему «подписка». Урок пары: <output> и <ul aria-label>, атрибут «aria-live=assertive» и «aria-checked». Практика: форма записи на интенсивы. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: стрелки по сворачиваемому меню. Убедитесь «убедитесь в уровне заголовка». Доступность «подписка» читается как имя, затем пояснение.

Заголовок 7033: форма со связкой <figure> + <input> (атрибут aria-valuenow)

Задание 7033 на тему «форма». Урок пары: <figure> и <input>, атрибут «aria-valuenow» и «aria-owns». Практика: страница оплаты. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: вкладки и shift+Tab. Добавьте «озвучьте переход без мыши». Доступность «форма» читается как имя, затем пояснение.

Заголовок 7034: модуль со связкой <nav aria-label> + <aside> (атрибут aria-atomic=true)

Задание 7034 на тему «модуль». Урок пары: <nav aria-label> и <aside>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: страница оплаты. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «в режиме вкладок доберитесь до цели». Доступность «модуль» читается как имя, затем пояснение.

Заголовок 7035: тариф со связкой <figure> + <input> (атрибут aria-selected)

Задание 7035 на тему «тариф». Урок пары: <figure> и <input>, атрибут «aria-selected» и «role=region». Практика: окно чата с куратором. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: начало: фокус на первую ошибку. Обеспечьте «тяните фокус после действия». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 7036: отзыв со связкой <header> + <footer> (атрибут aria-controls)

Задание 7036 на тему «отзыв». Урок пары: <header> и <footer>, атрибут «aria-controls» и «aria-haspopup». Практика: страница оплаты. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: проговаривание при return. Свяжите «в режиме вкладок доберитесь до цели». Доступность «отзыв» читается как имя, затем пояснение.

Заголовок 7037: личный кабинет со связкой <input> + <textarea> (атрибут aria-labelledby)

Задание 7037 на тему «личный кабинет». Урок пары: <input> и <textarea>, атрибут «aria-labelledby» и «aria-current». Практика: страница тарифов. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «в режиме вкладок доберитесь до цели». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 7038: квиз со связкой <input> + <textarea> (атрибут aria-label)

Задание 7038 на тему «квиз». Урок пары: <input> и <textarea>, атрибут «aria-label» и «aria-expanded». Практика: каталог уроков. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус не застревает в модалке. Свяжите «озвучьте переход без мыши». Доступность «квиз» читается как имя, затем пояснение.

Заголовок 7039: презентация со связкой <input> + <textarea> (атрибут aria-checked)

Задание 7039 на тему «презентация». Урок пары: <input> и <textarea>, атрибут «aria-checked» и «aria-required=true». Практика: трек наставника. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: порядок Tab по слоям. Убедитесь «проверьте сообщение об ошибке». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 7040: баллы со связкой <output> + <ul aria-label> (атрибут aria-selected)

Задание 7040 на тему «баллы». Урок пары: <output> и <ul aria-label>, атрибут «aria-selected» и «role=region». Практика: кабинет ученика. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: вкладки и shift+Tab. Обеспечьте «тяните фокус после действия». Доступность «баллы» читается как имя, затем пояснение.

Заголовок 7041: заказ со связкой <input> + <textarea> (атрибут aria-live=assertive)

Задание 7041 на тему «заказ». Урок пары: <input> и <textarea>, атрибут «aria-live=assertive» и «aria-checked». Практика: трек наставника. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: skip-ссылка. Проверьте «на скринридере проверьте имя». Доступность «заказ» читается как имя, затем пояснение.

Заголовок 7042: корзина со связкой <header> + <footer> (атрибут aria-valuenow)

Задание 7042 на тему «корзина». Урок пары: <header> и <footer>, атрибут «aria-valuenow» и «aria-owns». Практика: анкета студента. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Продумайте «убедитесь в уровне заголовка». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 7043: запись со связкой <output> + <ul aria-label> (атрибут role=button)

Задание 7043 на тему «запись». Урок пары: <output> и <ul aria-label>, атрибут «role=button» и «aria-activedescendant». Практика: карточка вебинара. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Убедитесь «озвучьте переход без мыши». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7044: оплата со связкой <ul aria-label> + <button> (атрибут aria-describedby)

Задание 7044 на тему «оплата». Урок пары: <ul aria-label> и <button>, атрибут «aria-describedby» и «aria-controls». Практика: форма записи на интенсивы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: логичный порядок полей. Свяжите «убедитесь в уровне заголовка». Доступность «оплата» читается как имя, затем пояснение.

Заголовок 7045: корзина со связкой <fieldset> + <th scope> (атрибут aria-relevant)

Задание 7045 на тему «корзина». Урок пары: <fieldset> и <th scope>, атрибут «aria-relevant» и «aria-label». Практика: карточка вебинара. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: skip-ссылка. Продумайте «в режиме вкладок доберитесь до цели». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 7046: домашнее задание со связкой <select> + <legend> (атрибут aria-keyshortcuts)

Задание 7046 на тему «домашнее задание». Урок пары: <select> и <legend>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: страница тарифов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Проверьте «тяните фокус после действия». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 7047: подписка со связкой <aside> + <progress aria-label> (атрибут aria-labelledby)

Задание 7047 на тему «подписка». Урок пары: <aside> и <progress aria-label>, атрибут «aria-labelledby» и «aria-current». Практика: прогресс-бар ДЗ. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: порядок Tab по слоям. Продумайте «озвучьте переход без мыши». Доступность «подписка» читается как имя, затем пояснение.

Заголовок 7048: прогресс со связкой <fieldset> + <th scope> (атрибут aria-selected)

Задание 7048 на тему «прогресс». Урок пары: <fieldset> и <th scope>, атрибут «aria-selected» и «role=region». Практика: лендинг курса. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: проговаривание при return. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 7049: комментарий со связкой <aside> + <progress aria-label> (атрибут aria-keyshortcuts)

Задание 7049 на тему «комментарий». Урок пары: <aside> и <progress aria-label>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: страница оплаты. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус на ближайший заголовок после валидации. Добавьте «убедитесь в уровне заголовка». Доступность «комментарий» читается как имя, затем пояснение.

Заголовок 7050: запись со связкой <fieldset> + <th scope> (атрибут aria-keyshortcuts)

Задание 7050 на тему «запись». Урок пары: <fieldset> и <th scope>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: форма записи на интенсивы. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: фокус не застревает в модалке. Проверьте «тяните фокус после действия». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7051: комментарий со связкой <time> + <ol> (атрибут aria-keyshortcuts)

Задание 7051 на тему «комментарий». Урок пары: <time> и <ol>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: страница оплаты. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: видимая рамка фокуса. Убедитесь «убедитесь в уровне заголовка». Доступность «комментарий» читается как имя, затем пояснение.

Заголовок 7052: оплата со связкой <ol> + <a> (атрибут role=alert)

Задание 7052 на тему «оплата». Урок пары: <ol> и <a>, атрибут «role=alert» и «aria-relevant». Практика: трек наставника. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Добавьте «проверьте сообщение об ошибке». Доступность «оплата» читается как имя, затем пояснение.

Заголовок 7053: практика со связкой <label> + <fieldset> (атрибут aria-labelledby)

Задание 7053 на тему «практика». Урок пары: <label> и <fieldset>, атрибут «aria-labelledby» и «aria-current». Практика: прогресс-бар ДЗ. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: логичный порядок полей. Свяжите «тяните фокус после действия». Доступность «практика» читается как имя, затем пояснение.

Заголовок 7054: тест со связкой <ol> + <a> (атрибут aria-live=assertive)

Задание 7054 на тему «тест». Урок пары: <ol> и <a>, атрибут «aria-live=assertive» и «aria-checked». Практика: журнал оценок. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: проговаривание при return. Свяжите «на скринридере проверьте имя». Доступность «тест» читается как имя, затем пояснение.

Заголовок 7055: баллы со связкой <progress aria-label> + <time> (атрибут aria-describedby)

Задание 7055 на тему «баллы». Урок пары: <progress aria-label> и <time>, атрибут «aria-describedby» и «aria-controls». Практика: кабинет ученика. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: видимая рамка фокуса. Проверьте «озвучьте переход без мыши». Доступность «баллы» читается как имя, затем пояснение.

Заголовок 7056: сертификат со связкой <textarea> + <table> (атрибут aria-keyshortcuts)

Задание 7056 на тему «сертификат». Урок пары: <textarea> и <table>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: журнал оценок. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Обеспечьте «тяните фокус после действия». Доступность «сертификат» читается как имя, затем пояснение.

Заголовок 7057: запись со связкой <table> + <nav aria-label> (атрибут aria-invalid)

Задание 7057 на тему «запись». Урок пары: <table> и <nav aria-label>, атрибут «aria-invalid» и «role=alert». Практика: страница сертификатов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7058: гайд со связкой <label> + <fieldset> (атрибут aria-invalid)

Задание 7058 на тему «гайд». Урок пары: <label> и <fieldset>, атрибут «aria-invalid» и «role=alert». Практика: страница тарифов. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: логичный порядок полей. Убедитесь «проверьте сообщение об ошибке». Доступность «гайд» читается как имя, затем пояснение.

Заголовок 7059: чек-аут со связкой <figure> + <input> (атрибут aria-live=polite)

Задание 7059 на тему «чек-аут». Урок пары: <figure> и <input>, атрибут «aria-live=polite» и «aria-pressed». Практика: окно чата с куратором. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: логичный порядок полей. Проверьте «в режиме вкладок доберитесь до цели». Доступность «чек-аут» читается как имя, затем пояснение.

Заголовок 7060: прогресс со связкой <ul aria-label> + <button> (атрибут aria-checked)

Задание 7060 на тему «прогресс». Урок пары: <ul aria-label> и <button>, атрибут «aria-checked» и «aria-required=true». Практика: вопрос-ответ модуля. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «на скринридере проверьте имя». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 7061: оплата со связкой <a> + <select> (атрибут aria-live=polite)

Задание 7061 на тему «оплата». Урок пары: <a> и <select>, атрибут «aria-live=polite» и «aria-pressed». Практика: карточка вебинара. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: крупный курсор в кастомном фокусе. Продумайте «в режиме вкладок доберитесь до цели». Доступность «оплата» читается как имя, затем пояснение.

Заголовок 7062: подписка со связкой <button> + <label> (атрибут aria-labelledby)

Задание 7062 на тему «подписка». Урок пары: <button> и <label>, атрибут «aria-labelledby» и «aria-current». Практика: окно чата с куратором. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: логичный порядок полей. Продумайте «на скринридере проверьте имя». Доступность «подписка» читается как имя, затем пояснение.

Заголовок 7063: расписание со связкой <main> + <details> (атрибут aria-live=assertive)

Задание 7063 на тему «расписание». Урок пары: <main> и <details>, атрибут «aria-live=assertive» и «aria-checked». Практика: анкета студента. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус виден в рамке 3px. Продумайте «проверьте сообщение об ошибке». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 7064: отзыв со связкой <header> + <footer> (атрибут aria-relevant)

Задание 7064 на тему «отзыв». Урок пары: <header> и <footer>, атрибут «aria-relevant» и «aria-label». Практика: форма записи на интенсивы. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: порядок Tab по слоям. Убедитесь «убедитесь в уровне заголовка». Доступность «отзыв» читается как имя, затем пояснение.

Заголовок 7065: баллы со связкой <time> + <ol> (атрибут aria-current)

Задание 7065 на тему «баллы». Урок пары: <time> и <ol>, атрибут «aria-current» и «aria-hidden=true». Практика: вопрос-ответ модуля. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: проговаривание при return. Проверьте «проверьте сообщение об ошибке». Доступность «баллы» читается как имя, затем пояснение.

Заголовок 7066: рассылка со связкой <button> + <label> (атрибут aria-invalid)

Задание 7066 на тему «рассылка». Урок пары: <button> и <label>, атрибут «aria-invalid» и «role=alert». Практика: карточка вебинара. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус не застревает в модалке. Добавьте «в режиме вкладок доберитесь до цели». Доступность «рассылка» читается как имя, затем пояснение.

Заголовок 7067: запись со связкой <ul aria-label> + <button> (атрибут aria-checked)

Задание 7067 на тему «запись». Урок пары: <ul aria-label> и <button>, атрибут «aria-checked» и «aria-required=true». Практика: окно чата с куратором. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: видимая рамка фокуса. Свяжите «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.

Заголовок 7068: домашнее задание со связкой <textarea> + <table> (атрибут role=tab)

Задание 7068 на тему «домашнее задание». Урок пары: <textarea> и <table>, атрибут «role=tab» и «aria-atomic=true». Практика: анкета студента. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 7069: личный кабинет со связкой <dl> + <figure> (атрибут aria-modal=true)

Задание 7069 на тему «личный кабинет». Урок пары: <dl> и <figure>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: карточка вебинара. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: проговаривание при return. Обеспечьте «проверьте сообщение об ошибке». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 7070: форма со связкой <figure> + <input> (атрибут aria-keyshortcuts)

Задание 7070 на тему «форма». Урок пары: <figure> и <input>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: страница тарифов. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Убедитесь «тяните фокус после действия». Доступность «форма» читается как имя, затем пояснение.

Заголовок 7071: прогресс со связкой <ol> + <a> (атрибут aria-valuetext)

Задание 7071 на тему «прогресс». Урок пары: <ol> и <a>, атрибут «aria-valuetext» и «aria-flowto». Практика: вопрос-ответ модуля. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «проверьте сообщение об ошибке». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 7072: каталог со связкой <th scope> + <header> (атрибут aria-checked)

Задание 7072 на тему «каталог». Урок пары: <th scope> и <header>, атрибут «aria-checked» и «aria-required=true». Практика: журнал оценок. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: проговаривание при return. Убедитесь «озвучьте переход без мыши». Доступность «каталог» читается как имя, затем пояснение.

Заголовок 7073: гайд со связкой <header> + <footer> (атрибут aria-required=true)

Задание 7073 на тему «гайд». Урок пары: <header> и <footer>, атрибут «aria-required=true» и «aria-valuenow». Практика: лендинг курса. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: проговаривание при return. Проверьте «в режиме вкладок доберитесь до цели». Доступность «гайд» читается как имя, затем пояснение.

Заголовок 7074: вход со связкой <a> + <select> (атрибут role=tab)

Задание 7074 на тему «вход». Урок пары: <a> и <select>, атрибут «role=tab» и «aria-atomic=true». Практика: лендинг курса. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус виден в рамке 3px. Свяжите «в режиме вкладок доберитесь до цели». Доступность «вход» читается как имя, затем пояснение.

Заголовок 7075: личный кабинет со связкой <nav aria-label> + <aside> (атрибут aria-labelledby)

Задание 7075 на тему «личный кабинет». Урок пары: <nav aria-label> и <aside>, атрибут «aria-labelledby» и «aria-current». Практика: трек наставника. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус на ближайший заголовок после валидации. Свяжите «тяните фокус после действия». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 7076: форум со связкой <input> + <textarea> (атрибут aria-required=true)

Задание 7076 на тему «форум». Урок пары: <input> и <textarea>, атрибут «aria-required=true» и «aria-valuenow». Практика: страница сертификатов. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус на ближайший заголовок после валидации. Продумайте «проверьте сообщение об ошибке». Доступность «форум» читается как имя, затем пояснение.

Заголовок 7077: расписание со связкой <input> + <textarea> (атрибут aria-expanded)

Задание 7077 на тему «расписание». Урок пары: <input> и <textarea>, атрибут «aria-expanded» и «aria-selected». Практика: окно чата с куратором. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 7078: программа со связкой <nav aria-label> + <aside> (атрибут aria-relevant)

Задание 7078 на тему «программа». Урок пары: <nav aria-label> и <aside>, атрибут «aria-relevant» и «aria-label». Практика: страница оплаты. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: порядок Tab по слоям. Свяжите «убедитесь в уровне заголовка». Доступность «программа» читается как имя, затем пояснение.

Заголовок 7079: каталог со связкой <button> + <label> (атрибут aria-atomic=true)

Задание 7079 на тему «каталог». Урок пары: <button> и <label>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: лендинг курса. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: проговаривание при return. Свяжите «озвучьте переход без мыши». Доступность «каталог» читается как имя, затем пояснение.

Заголовок 7080: заказ со связкой <output> + <ul aria-label> (атрибут aria-valuenow)

Задание 7080 на тему «заказ». Урок пары: <output> и <ul aria-label>, атрибут «aria-valuenow» и «aria-owns». Практика: каталог уроков. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: skip-ссылка. Проверьте «убедитесь в уровне заголовка». Доступность «заказ» читается как имя, затем пояснение.

Заголовок 7081: вебинар со связкой <figure> + <input> (атрибут aria-labelledby)

Задание 7081 на тему «вебинар». Урок пары: <figure> и <input>, атрибут «aria-labelledby» и «aria-current». Практика: каталог уроков. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус на ближайший заголовок после валидации. Обеспечьте «озвучьте переход без мыши». Доступность «вебинар» читается как имя, затем пояснение.

Заголовок 7082: корзина со связкой <footer> + <meter> (атрибут aria-required=true)

Задание 7082 на тему «корзина». Урок пары: <footer> и <meter>, атрибут «aria-required=true» и «aria-valuenow». Практика: карточка вебинара. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: фокус не застревает в модалке. Убедитесь «тяните фокус после действия». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 7083: сертификат со связкой <textarea> + <table> (атрибут aria-live=polite)

Задание 7083 на тему «сертификат». Урок пары: <textarea> и <table>, атрибут «aria-live=polite» и «aria-pressed». Практика: журнал оценок. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: начало: фокус на первую ошибку. Добавьте «убедитесь в уровне заголовка». Доступность «сертификат» читается как имя, затем пояснение.

Заголовок 7084: тариф со связкой <select> + <legend> (атрибут aria-flowto)

Задание 7084 на тему «тариф». Урок пары: <select> и <legend>, атрибут «aria-flowto» и «aria-labelledby». Практика: окно чата с куратором. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус на ближайший заголовок после валидации. Проверьте «тяните фокус после действия». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 7085: тариф со связкой <progress aria-label> + <time> (атрибут aria-required=true)

Задание 7085 на тему «тариф». Урок пары: <progress aria-label> и <time>, атрибут «aria-required=true» и «aria-valuenow». Практика: страница сертификатов. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус виден в рамке 3px. Обеспечьте «тяните фокус после действия». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 7086: лекция со связкой <label> + <fieldset> (атрибут aria-expanded)

Задание 7086 на тему «лекция». Урок пары: <label> и <fieldset>, атрибут «aria-expanded» и «aria-selected». Практика: прогресс-бар ДЗ. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Свяжите «тяните фокус после действия». Доступность «лекция» читается как имя, затем пояснение.

Заголовок 7087: прогресс со связкой <button> + <label> (атрибут aria-owns)

Задание 7087 на тему «прогресс». Урок пары: <button> и <label>, атрибут «aria-owns» и «aria-describedby». Практика: форма записи на интенсивы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: skip-ссылка. Свяжите «убедитесь в уровне заголовка». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 7088: личные данные со связкой <output> + <ul aria-label> (атрибут aria-hidden=true)

Задание 7088 на тему «личные данные». Урок пары: <output> и <ul aria-label>, атрибут «aria-hidden=true» и «role=tab». Практика: кабинет ученика. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус виден в рамке 3px. Продумайте «озвучьте переход без мыши». Доступность «личные данные» читается как имя, затем пояснение.