Три способа подключить JavaScript

Способ 1 - inline (в атрибуте): код пишется прямо в атрибуте элемента, например onclick="alert('Привет')". Удобно для быстрых проб, но плохо масштабируется и смешивает разметку с логикой.

Способ 2 - внутренний скрипт: тег <script> в теле страницы (чаще перед </body>). Код выполняется при достижении этого места. Подходит для небольших страниц.

Способ 3 - внешний файл: <script src="script.js"></script>. Код выносится в отдельный файл - удобно для переиспользования и поддержки. Рекомендуется для проектов.

Код прямо в кнопке

Самый простой способ для начала: написать маленький кусочек JavaScript прямо в атрибуте элемента. Чаще всего используют onclick — «при клике сделай это».

Пример: кнопка с текстом «Нажми меня», при нажатии показывается окошко с приветствием. В разметке это выглядит так:

Плюс: быстро попробовать что-то. Минус: если кода много, страница превращается в кашу, а один и тот же код сложно использовать в нескольких местах. Для учёбы и мелких проб — нормально, для серьёзных проектов лучше не использовать.

Задание: откройте инструменты разработчика (F12), перейдите во вкладку Elements, нажмите кнопку «Выбрать элемент» (стрелка в левом верхнем углу панели) и кликните по кнопке «Нажми меня» на странице. В панели Elements подсветится соответствующий тег <button> с атрибутом onclick — так вы увидите код JavaScript, записанный inline-стилем.

Блок <script> внутри страницы

Код можно написать прямо в HTML-файле внутри тега <script></script>. Обычно его ставят в конце страницы, перед </body>, чтобы к моменту выполнения HTML уже был «прочитан» браузером и элементы на странице существовали.

Пример: на странице есть кнопка с id="myBtn". В скрипте мы находим эту кнопку и при клике меняем текст в другом элементе. getElementById — это метод документа: он ищет на странице один элемент по его уникальному id и возвращает его (объект), чтобы мы могли назначить обработчик клика или изменить содержимое.

Так мы отделяем разметку от логики: в HTML — кнопка и блок для вывода, в скрипте — что делать при клике. Для небольших страниц и учебных примеров этого достаточно.

Отдельный файл .js

Когда кода много или одна и та же логика нужна на нескольких страницах, его выносят в отдельный файл, например script.js. Подключение выглядит так:

Путь к файлу можно указать относительно текущей страницы (например, script.js или js/script.js) или абсолютно (полный URL). Лучше использовать только относительный путь: так проект проще переносить и открывать на другом компьютере или сервере.

Браузер загружает файл и выполняет его с помощью встроенного движка JavaScript: в Chrome и Edge это V8, в Firefox — SpiderMonkey, в Safari — JavaScriptCore. Именно движок «понимает» код и выполняет его. Плюсы внешнего файла: один файл можно подключить на многих страницах, код проще искать и править, можно использовать отступы и комментарии без «раздувания» HTML. Для любых проектов больше одной страницы это самый удобный вариант.

Когда выполняется скрипт

По умолчанию браузер, встретив <script>, останавливает разбор HTML, загружает и выполняет скрипт, потом продолжает. Страница «замирает» до выполнения.

defer: скрипт загружается параллельно, выполняется после полного разбора HTML, в порядке подключения. Идеально для скриптов, которым нужен готовый DOM.

async: скрипт загружается параллельно и выполняется сразу после загрузки (порядок не гарантирован). Подходит для независимых скриптов (аналитика, виджеты).

Почему defer удобен для DOM

С defer браузер не останавливает разбор страницы: он продолжает строить HTML, а скрипт качается в фоне. Как только весь HTML разобран, скрипты с defer выполняются по порядку. В этот момент все теги уже «на месте», и document.getElementById('...') или document.querySelector('...') найдут нужные элементы.

Итог: страница отображается быстрее, а ваш код видит готовый DOM. Для скриптов, которые что-то делают с элементами страницы, defer — отличный выбор.

Скрипты «как загрузились»

async тоже не блокирует разбор HTML: скрипт грузится параллельно. Но выполнится он сразу, как только загрузится – не обязательно после всего HTML и не обязательно в том порядке, в каком указан в разметке. Поэтому для кода, который ищет элементы на странице, async рискован: в момент выполнения нужного тега может ещё не быть.

Используйте async для скриптов, которые не зависят от DOM: счётчики, реклама, виджеты с других сайтов. Для своей логики с кнопками и блоками на странице — defer или скрипт в конце body.

Аналогия с дальнобойщиком: defer — как водитель, который сначала доезжает до места (страница загружена), потом спокойно обедает в порядке очереди (скрипты выполняются по порядку). async — как приём пищи во время вождения: дальнобойщик ест «на ходу», когда успел; порядок выполнения скриптов не гарантирован, зато страница не ждёт. Обычный <script> без атрибутов — как остановка в пути: водитель остановился, поел, потом поехал дальше; разбор HTML при этом блокируется до выполнения скрипта.

Что такое DOM подробнее

DOM (Document Object Model) - это представление HTML-документа в виде дерева объектов. Браузер строит это дерево при загрузке страницы. Каждый тег становится узлом (элементом), у элементов есть родители, дети, атрибуты.

JavaScript может читать и изменять DOM: находить элементы, менять текст, добавлять или удалять узлы, менять стили. Так страница становится интерактивной.

Страница — это дерево узлов

Представьте страницу как матрёшку: снаружи — html, внутри — body, внутри него — заголовки, параграфы, кнопки. У каждого элемента может быть «родитель» (тот, кто его оборачивает) и «дети» (элементы внутри). Так и получается дерево.

Пример: у вас есть <div id="block">, а внутри — <p>Текст</p>. В DOM div — родитель, p — его дочерний узел. JavaScript позволяет «ходить» по этому дереву: искать родителей, детей, соседей и по ним менять содержимое или стили.

getElementById — найти по id

document.getElementById('id') — это способ найти на странице один-единственный элемент по его id. В HTML вы пишете, например, id="myButton", в коде вызываете document.getElementById('myButton') и получаете этот элемент (объект), с которым можно дальше работать: менять текст, стили, вешать клики.

Важно: на странице не должно быть двух элементов с одинаковым id — он должен быть уникальным. Если элемента с таким id нет, метод вернёт null (ничего). Обращение к свойствам «ничего» приведёт к ошибке, поэтому результат лучше проверять.

Попробуйте в консоли

Ниже кнопка выполняет тот же код, что и в примере: находит элемент по id и выводит информацию. Чтобы увидеть, что именно «попадает» в переменную (сам элемент или null), удобно смотреть в консоль разработчика.

Поиск по классу (коллекция)

document.getElementsByClassName('имя-класса') возвращает «живую» коллекцию (HTMLCollection) всех элементов, у которых есть указанный CSS-класс. Имя можно передать одно или несколько через пробел — тогда подойдут элементы, у которых есть все эти классы.

Пример: getElementsByClassName('btn') — все элементы с классом btn. Результат похож на массив: есть .length, к элементам можно обращаться по индексу [0], [1]. Для перебора удобно превратить в массив или использовать цикл. Если нужен только первый элемент с классом, проще написать querySelector('.имя-класса').

Поиск по CSS-селектору

document.querySelector('селектор') ищет элемент по тому же правилу, что и в CSS: по классу (точка), по тегу, по вложенности. Возвращается первый подходящий элемент или null, если ничего не найдено.

Примеры: querySelector('.btn') — первый элемент с классом btn; querySelector('header nav') — первый nav внутри header; querySelector('#main') — элемент с id="main". querySelector — самый удобный и универсальный метод: как швейцарский нож, умеет искать и по id, и по классу, и по тегу, и по сложным комбинациям селекторов. Для одного элемента в большинстве случаев достаточно именно его.

Что возвращает querySelector

Нажмите кнопку — скрипт найдёт первый элемент с классом message-bubble и выведет его в консоль и кратко на страницу. Откройте консоль (F12), чтобы увидеть сам объект элемента.

Список всех элементов по селектору

document.querySelectorAll('селектор') возвращает не один элемент, а коллекцию (NodeList) всех элементов, подходящих под селектор. По ней можно пройти циклом и, например, поменять цвет всем кнопкам или посчитать количество.

Пример: document.querySelectorAll('.screen') — все элементы с классом screen. Результат похож на массив: у него есть .length, и можно перебирать элементы в цикле for или forEach.

Сколько экранов на странице?

Код находит все элементы с классом screen и выводит их количество. В консоли вы увидите саму коллекцию — список найденных элементов.

Консоль браузера подробнее

Консоль — это окно в браузере, где выполняется JavaScript и показываются сообщения (ошибки, вывод console.log()). Туда же можно вводить команды вручную и смотреть, что возвращают методы вроде getElementById или querySelector.

Зачем ещё нужна консоль: отладка кода (поиск ошибок по сообщениям и стеку вызовов), проверка элементов и стилей в реальном времени, выполнение произвольного JS на странице, просмотр сетевых запросов (во вкладке Network) и структуры DOM (во вкладке Elements).

Как открыть инструменты разработчика:

• F12 — универсальный способ в Chrome, Edge, Firefox;
• Ctrl+Shift+I (Windows/Linux) или Cmd+Option+I (macOS);
• правой кнопкой по странице → «Просмотреть код» / «Inspect»;
• в меню браузера: «Дополнительные инструменты» → «Инструменты разработчика».

Основные вкладки панели: Elements (DOM и стили, выбор элемента стрелкой); Console (вывод JS, ввод команд, ошибки); Network (запросы к серверу, загрузка файлов); Sources (исходный код, точки останова для отладки); Application (локальное хранилище, куки). Для работы с DOM и проверки скриптов чаще всего используют Elements и Console.

Попробуйте в консоли набрать: document.querySelector('h1') и нажать Enter. Вы увидите первый заголовок на странице — так вы «вживую» видите, что возвращает поиск по DOM.

Проверять перед использованием

Элемент на странице можно получить самым простым способом — по имени его id: в консоли браузера элемент с id="myBtn" в старых средах доступен как глобальная переменная myBtn. Но полагаться на это не стоит: такой способ не универсален. Надёжнее везде использовать document.getElementById('myBtn').

Методы поиска возвращают null (ничего не найдено) или пустую коллекцию. Если написать, например, el.textContent = 'Привет', а el оказался null, браузер выдаст ошибку и скрипт может остановиться.

Проверка: перед использованием результата проверяйте его: if (el) { el.textContent = 'Привет'; } или if (el !== null). Для коллекции: if (list.length > 0). Ещё удобна опциональная цепочка: el?.classList.add('active') — если el есть, класс добавится, если нет — ничего не произойдёт, ошибки не будет.

Узнать тег и атрибуты элемента

element.tagName — имя тега в верхнем регистре (например, BUTTON, DIV). Полезно, когда нужно понять, с каким элементом мы работаем.

Атрибуты: element.hasAttribute('href') — есть ли атрибут href (true/false); element.getAttribute('href') — получить значение атрибута; element.setAttribute('href', 'https://...') — установить значение.

Добавить, убрать, переключить класс

Этот метод особенно важен: он отделяет оформление (CSS) от логики (JS). Конкретные кейсы: подсветка активной вкладки или пункта меню (добавляем класс active), показ и скрытие блоков (класс hidden или open), смена темы (класс dark на body), состояние кнопки «нажато» (класс pressed). Во всех этих случаях в CSS описаны стили, а в JavaScript мы только переключаем классы.

element.classList даёт доступ к списку CSS-классов элемента. Основные методы: add('имя') — добавить класс, remove('имя') — убрать, toggle('имя') — если класса нет, добавить; если есть — убрать. contains('имя') — проверить, есть ли класс (true/false).

Менять оформление через классы удобнее, чем через element.style: стили остаются в CSS, а в JS вы только переключаете классы (например, «активная» кнопка, «скрытый» блок).

innerHTML — подставить HTML-строку

element.innerHTML = '<p>Текст</p>' заменяет всё содержимое элемента заданной HTML-строкой. Браузер разбирает эту строку и создаёт из неё реальные теги внутри элемента. Удобно для простых вставок готового куска разметки.

Осторожно: не подставляйте в innerHTML строки, введённые пользователем, без специальной обработки — злоумышленник может подсунуть свой код (XSS). Для своего статического контента или аккуратно сформированных строк — нормально.

Вставка HTML через innerHTML

Ниже есть контейнер. По нажатию кнопки в него подставится готовый HTML: заголовок и параграф. Каждое нажатие заменяет содержимое целиком.

let, const и var — как объявлять

В JavaScript переменные объявляют тремя способами. let — переменная, которую можно менять; область видимости ограничена блоком { } (цикл, условие, функция). const — константа, переприсвоить нельзя (но содержимое объекта или массива менять можно); тоже блочная область видимости. var — устаревший вариант, область видимости — функция, а не блок; может приводить к неочевидным ошибкам. Для нового кода лучше использовать let и const, var — только в старых проектах.

Создать элемент из кода

Вместо строки с HTML можно создавать элементы по шагам: let div = document.createElement('div'); — создали элемент; div.textContent = 'Текст'; — задали текст (безопасно, он не выполнится как HTML); затем parent.appendChild(div); — добавили в конец родителя. Так вы работаете с узлами DOM, а не с разметкой — это безопаснее, когда контент может приходить от пользователя.

Добавить элемент через createElement

Кнопка создаёт новый параграф, задаёт ему текст и добавляет в контейнер. Каждое нажатие добавляет ещё один пункт — содержимое не заменяется, а дополняется.

Пример кода, который при этом выполняется:

Вставить HTML в нужное место

element.insertAdjacentHTML('где', '<li>пункт</li>') вставляет HTML не вместо всего содержимого, а в одно из четырёх мест: beforebegin — перед элементом, afterbegin — в начало внутри, beforeend — в конец внутри, afterend — после элемента. Удобно, когда нужно добавить разметку в конкретную позицию, не трогая остальное.

Вставка в конец элемента (beforeend)

Кнопка вставляет новый пункт списка в конец блока через insertAdjacentHTML('beforeend', '...'). Содержимое не заменяется — новый HTML добавляется в конец.

element.style — инлайн-стиль

Через element.style можно менять внешний вид элемента: element.style.color = 'red', element.style.fontSize = '16px'. Имена свойств пишутся в camelCase: в CSS было font-size, в JS — fontSize. Так задаётся инлайн-стиль (как атрибут style в HTML). Подходит для разовых изменений.

Часто удобнее не перечислять стили в коде, а менять классы: element.classList.add('active'), element.classList.remove('hidden'), element.classList.toggle('open'). Стили опишите в CSS, в JS только переключайте классы — так проще поддерживать и менять дизайн.

Пример с кнопками: одна кнопка добавляет класс (например, «активная»), вторая убирает, третья переключает:

Меняем цвет и класс

Первая кнопка меняет цвет текста блока через style.color. Вторая переключает класс, который в CSS задаёт фон — так наглядно видна разница между прямым стилем и переключением класса.

Одна переменная — много элементов

В CSS можно объявить переменную, например --main-color: #5b8de9;, и использовать её в стилях: color: var(--main-color);. Из JavaScript эту переменную можно изменить для всего документа: document.documentElement.style.setProperty('--main-color', '#333'); — и все элементы, где использовалась var(--main-color), сразу поменяют цвет. Удобно для тем (светлая/тёмная) или настроек пользователя.

Поменять переменную — поменяется оформление

На этой странице в корне задана переменная --accent (основной синий цвет). Кнопка ниже меняет её на другой цвет — вы увидите, как поменяется цвет кнопок и акцентов в интерфейсе (если они используют эту переменную).

Как лучше подключить скрипт для работы с DOM?

Выберите один верный вариант.

Метод - назначение

Сопоставьте метод с описанием.

Почему нужна проверка на null?

Выберите верное утверждение.

Краткий тест (8 вопросов)

Порог прохождения - 80%. После успешного прохождения откроется экран практики.

Страница с кнопкой и выводом через DOM

Создайте один HTML-файл, в котором: (1) есть кнопка и контейнер для вывода (например div с id); (2) подключён свой скрипт (внутренний или внешний); (3) по клику на кнопку скрипт находит элемент (getElementById или querySelector), проверяет его наличие и выводит в него текст или сгенерированный HTML (innerHTML или createElement). Дополнительно: меняется стиль или класс у элемента. Загрузите файл и нажмите «Проверить». Порог зачёта - 70 баллов.