4.3.2 Файл scripts.js

Глава 4.0. Шаблон HTML и динамические страницы

Введение

Файл scripts.js — это внешний файл, содержащий код JavaScript, который обеспечивает интерактивность веб-страниц (обработка событий, анимация, работа с формами). Вынос кода в отдельный файл улучшает читаемость HTML, позволяет кэшировать скрипты браузером и использовать один файл на нескольких страницах. Подключается через <script src="scripts.js"></script>.
Ключевые аспекты использования scripts.js:

Назначение: Реализация динамического поведения, манипуляция элементами DOM (Document Object Model).
Подключение: Файл подключается в теге <head> или перед закрывающим тегом </body> с помощью атрибута src.
Атрибуты загрузки:
- defer: Скрипт загружается в фоновом режиме и выполняется только после полной загрузки HTML (рекомендуется).
- async: Скрипт выполняется асинхронно, сразу после загрузки, не дожидаясь разбора HTML.
Преимущества: Повторное использование кода, повышение производительности за счет кэширования, разделение разметки (HTML) и логики (JS).

Для открытия и редактирования файла scripts.js подходят текстовые редакторы (Notepad++, VS Code) или IDE (WebStorm).

Файл script.js

Создадим корневую директорию (папку) скриптов ./js и в ней создадим в блокноте файл script.js и вынесем из файла sample.html код блока javascript, заключенный между тегами <script> и </script>.

script.js

  // Находим кнопку по ID
  const button = document.getElementById('searchButton');
 
  // Добавляем обработчик события "click"
  button.addEventListener('click', function() {
    // Выводим alert
    alert('Кнопка была нажата!');
  });

Файл sample.html

В строке 79 файла sample.html тег <script>

sample.html

    <!-- Optional: Link to a JavaScript file -->
    <script>
	// Находим кнопку по ID

заменим на <script src="js/script.js"></script> (код подключения внешнего файла javascript).

sample.html

    <!-- Optional: Link to a JavaScript file -->
    <script src="js/script.js"></script>

Строку 87 файла sample.html с закрывающим тегом </script> удалим за ненадобностью.

sample.html

	</script>
  </body>

Проверим правильность подключения файла script.js в браузере

На этом с выносом из файла sample.html скриптов закончим и перейдем к файлу index.php в следующей главе

Дополнения и Файлы

см. также:

4.3.1. Файл style.css 4.4. Файл index.php часть 1