Содержание
4.3.2 Файл scripts.js
Введение
Файл 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 -->
Строку 87 файла sample.html с закрывающим тегом </script> удалим за ненадобностью.
Проверим правильность подключения файла script.js в браузере
На этом с выносом из файла sample.html скриптов закончим и перейдем к файлу index.php в следующей главе
Дополнения и Файлы
см. также:
