Загрузка...

JavaScript в HTML

Ранее доступность делала страницу удобной за счёт структуры. JavaScript добавляет поведение поверх HTML: клик, обновление текста, сервер. Этот урок остаётся на стороне HTML: как страница загружает скрипты через <script>, а не полный курс языка.

Почему важна загрузка script

Браузеры сначала рисуют HTML. Скрипты могут задержать это, тихо упасть из‑за плохого пути или спрятать контент, который должен быть в разметке. Знать где ставить <script>, когда src и что принадлежит HTML — значит держать страницу честной. Привычки доступности по-прежнему важны.

Прямой ответ

1) <script>…</script> для крошечного фрагмента или <script src="app.js"></script> для внешнего файла. 2) Внешний .js, когда логика растёт. 3) Многие ставят скрипты ближе к концу body. 4) Осмысленный текст и контролы держите в HTML. 5) Современные приложения могут использовать type="module". 6) Этот курс только про встраивание.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Встроенный script с настоящей кнопкой

Маленькая страница: настоящий <button> с id, затем <script>, который слушает клик и меняет текст. Разметка остаётся доступной; скрипт лишь добавляет поведение.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Читаем встроенное демо

  • Кнопка — настоящий HTML, полезна без JS
  • id даёт стабильный якорь скрипту
  • Блок script держит несколько строк JS inline
  • addEventListener подключает поведение, не заменяет кнопку
  • Без скрипта остаётся «Say hi»
  • Прошлый урок: структура; здесь — подключение поведения

Внешний script с src

Та же идея лучше масштабируется отдельным файлом. HTML только объявляет путь; логика в app.js. Пути должны совпадать с вашей папкой.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Читаем внешний шаблон

  • src просит загрузить и выполнить файл
  • HTML короткий; правки в общем .js
  • Неверный путь = нет загрузки — проверьте Network
  • Ставьте скрипт после кнопки или ждите элемент
  • Предпочитайте это огромным inline-блокам
  • Дальше уроки HTML; глубокий JS — отдельный курс

Как загружать поведение

  • Крошечное демо: inline рядом с контролом может хватить
  • Переиспользуемое/растущее: в app.js и src
  • Критичный текст/навигация: сначала HTML, потом JS
  • Ощущение поломки: сначала проверьте путь src
  • Доступность: сохраняйте button/a/labels — не кликабельные div
  • Полное изучение языка: циклы и фреймворки в курсе JS

Практика — HTML загружает скрипт

  1. Скопируйте встроенное демо; кликните и проверьте.
  2. Перенесите слушатель в app.js, переключитесь на src, проверьте.
  3. Сломайте путь (wrong.js); кнопка остаётся «Say hi».
  4. Уберите скрипт полностью; HTML всё ещё понятен.
  5. Вторая кнопка с новым id и ещё один слушатель.
  6. Фраза: HTML владеет контентом и структурой; script загружает необязательное поведение.
  7. Следующий урок: короткое резюме HTML.

Лёгкие ошибки

  • Критичные фразы только внутри JavaScript
  • Опечатка или неверная папка в src
  • Огромные inline-скрипты трудно поддерживать
  • Запуск скрипта до появления элемента
  • Замена доступных кнопок кликабельными div
  • Считать этот урок полным курсом JS
  • Забыть привычки доступности

Итог

  • script загружает JavaScript на HTML-страницу
  • Inline для крошечных демо; src для внешних .js по мере роста
  • Размещайте скрипты так, чтобы контент появлялся и оставался удобным
  • Держите реальный контент и доступные контролы в HTML
  • Доступность была структурой; этот урок — проводка поведения
  • Далее: короткое резюме HTML пройденного пути

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 58 из 68
Html Урок