Итоги и следующие шаги
Эта страница не добавляет новый синтаксис. Она собирает весь курс в один заказ: напиток tea, размер regular. Строка, которую нужно уметь объяснить, — tea / regular.
Откуда взялась эта строка
Страница доступности записала её настоящей кнопкой button type=button. Mouse, Enter и Space запускают один и тот же щелчок. aria-live="polite" произносит текст после текущей фразы. Если size нет, button.disabled равен true и кнопка остаётся. Фокус остаётся на кнопке.
Две прежние строки
При отладке читали order.cup у { drink: "tea", size: "regular" }. У объекта есть size, а не cup. console.error не бросает, и сценарий идёт дальше. Та строка была fixed / tea / regular.
throw new Error("missing size") останавливает label до return. catch читает error.message, это missing size. error.name равен Error. finally выполняется в обоих случаях. Та строка была caught / missing size.
Семь строк, один заказ
Каждая строка таблицы — часть того же заказа. Открывайте занятие только если результат ещё кажется тонким.
📊 Что курс делает с одним заказом
| Группа | Вы можете | Один результат |
|---|---|---|
| Значения и ход | хранить значения, выбирать через if, идти по списку | tea / regular |
| Функции | принять заказ и вернуть строку | tea / regular |
| Объекты и массивы | прочитать поле, разобрать JSON, скопировать | { drink: "tea", size: "regular" } |
| Страница | найти кнопку и записать строку | tea / regular |
| Ожидание | остановить одну async-функцию; fetch даёт Response | response.ok, затем response.json() |
| Новый синтаксис | достать имена, собрать текст, построить класс | tea / regular |
| Осторожность | читать настоящее свойство, бросать намеренно, оставить кнопку | fixed / tea / regular, затем caught / missing size, затем tea / regular |
Карта — напоминание. Это не второй курс, и в ней нет вопросов.
Значения и решения
Вы храните tea и regular, сравниваете и повторяете. if выбирает. break выходит из цикла. continue пропускает один элемент и идёт дальше.
Функции
Функция возвращает tea / regular. Стрелочная функция — это более короткая функция. closure видит привязку и после возврата внешней функции.
Объекты, JSON и массивы
JSON.parse превращает текст в объект. map строит новый массив. find возвращает одно совпадение. spread копирует. rest собирает то, что вы не назвали. Копия поверхностная.
Страница
querySelector находит кнопку. textContent пишет строку. setTimeout выполняется позже и не заменяет кнопку.
Ожидание
await приостанавливает только эту async-функцию. Остальная страница работает дальше. Async-функция всегда возвращает Promise. fetch завершается Response, а не разобранным телом. response.json() возвращает другой Promise. HTTP 404 обычно не отклоняет fetch. Проверьте response.ok. Сбой сети может отклонить.
Более новый синтаксис
Деструктуризация достаёт drink и size по имени. Отсутствующий вложенный объект может бросить ошибку. Шаблонные строки заполняют ${...} во время выполнения. Модули не лежат на window и грузятся по HTTP. Дочерний класс вызывает super до this. Приватное поле остаётся внутри класса.
Когда заказ неверен
Читайте size, а не свойство, которого нет. console.error не бросает, следующая строка выполняется. throw останавливает функцию, дальше идёт только catch. Действие кладите на кнопку. Контур фокуса оставляйте видимым.
Что дальше
Следующая страница — короткий список дел: добавить, отметить сделанным и удалить. Она всё ещё на основном пути.
После неё по желанию: strict mode, Map и Set, регулярные выражения, web storage, cookies и наследование классов. Для конца основного пути они не нужны.
Скажите эти пять строк вслух
- Кнопка пишет tea / regular, и aria-live="polite" говорит после текущей фразы
- console.error не бросает; строка отладки была fixed / tea / regular
- throw new Error("missing size") останавливает label до return; catch читает missing size; строка была caught / missing size
- fetch завершается Response; проверьте response.ok до response.json()
- Следующая страница — список дел