Итоги

В этом уроке вы узнали, что:

• Страница пишется на HTML и состоит из элементов, записанных с помощью тегов: <h1>Заголовок</h1>. У элементов могут быть атрибуты, например id (уникальное имя) и class (имя группы).
• Страница загружает скрипт с помощью <script src="script.js"></script> в конце body, чтобы к моменту запуска скрипта элементы уже существовали. Скрипт запускается при загрузке страницы; то, что он выводит, и его ошибки появляются в консоли под страницей.
• document.querySelector() находит первый элемент, подходящий под селектор: "h1", "#id" или ".class". Если ничего не подошло, он возвращает null, и попытка его использовать заканчивается ошибкой вроде TypeError: Cannot read properties of null (reading 'textContent').
• textContent — это текст элемента; его можно прочитать и изменить.
• element.style.color = "red" меняет один стиль (названия свойств CSS пишутся в camelCase, например backgroundColor); classList.add(), remove() и toggle() добавляют и убирают классы из CSS страницы.
• button.addEventListener("click", function () { ... }) запускает функцию при каждом нажатии. Передавайте саму функцию, без ().
• Данные живут в переменных (счётчик — в переменной let, пункты — в массиве); обработчик меняет их и снова показывает на странице.
• input.value — это текст в поле; Number() превращает его в число.
• document.createElement("li") создаёт элемент, а list.append(item) помещает его на страницу. Чтобы показать массив, очистите список через list.textContent = "" и создайте по одному пункту для каждого элемента в цикле.

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

Но сначала немного практики: копилка, которая складывает ваши сбережения. На этот раз script.js пуст, и всю программу вы напишете сами.