JavaScript делает страницу интерактивной: находит элементы, меняет их и реагирует на действия пользователя. Код выполняется в браузере посетителя.
Что нужно знать
- Подключение: <script src="app.js"></script> в конце body (или с атрибутом defer).
- Переменные: let (можно менять), const (нельзя переприсвоить). Типы: number, string, boolean, массивы [ ], объекты { }.
- Приведение: '5' + 2 = '52' (склейка), '5' * 2 = 10. Сравнивать — === (без приведения типов).
- Условия, циклы и функции — как в C++: if (…) { }, for (let i = 0; i < n; i++) { }, function f(x) { return …; }.
- DOM: document.getElementById('id'), document.querySelector('.класс'); текст — textContent, стиль — el.style.color.
- События: el.addEventListener('click', f); click, mouseover, keydown, input, submit, load. Отменить действие по умолчанию — event.preventDefault().
- window: location (адрес), history (история), alert/confirm/prompt; таймеры setTimeout (один раз), setInterval (повторять).
- Безопасность: ввод пользователя выводить через textContent, не через innerHTML (XSS); проверка в браузере не заменяет проверку на сервере. Cookie хранятся в браузере и уходят на сервер с запросами.
Где чаще всего ошибаются
- Складывать значения полей формы без перевода в число: «2» + «3» = «23».
- Сравнивать через ==, получая неожиданные совпадения разных типов.
- Вставлять введённый пользователем текст через innerHTML.
- Обращаться к элементу из скрипта в head до того, как страница загрузилась.
Проверить себя
По этой же теме курса есть проверочная работа из 15 заданий на 25 минут. Проверка автоматическая, результат виден сразу — и по работе целиком, и по каждой теме.
Web-дизайн · 7–9 классы · JavaScript: основы, DOM, события и формы