Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/08 18:02] – [4.3.2 Файл scripts.js] VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/08 20:05] (текущий) – [Файл sample.html] VladPolskiy
@@ Строка 18: / Строка 18: @@
       * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3 Файл contact.php]]
 ===== Введение =====
+Файл **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).
-===== Файл scripts.js =====
+===== Файл script.js =====
+Создадим корневую директорию (папку) скриптов **./js** и в ней создадим в блокноте файл **script.js** и вынесем из файла **sample.html** код блока **javascript**, заключенный между тегами **%%<script>%%** и **%%</script>%%**.
 <code js script.js>
   // Находим кнопку по ID
-  const button = document.getElementById('myButton');
+  const button = document.getElementById('searchButton');
   // Добавляем обработчик события "click"
@@ Строка 30: / Строка 40: @@
   });
 </code>
+===== Файл sample.html =====
+В //строке 79// файла **sample.html** тег **%%<script>%%**
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="78",highlight_lines_extra="79"]>
+    <!-- Optional: Link to a JavaScript file -->
+    <script>
+	// Находим кнопку по ID
+</code>
+заменим на **%%<script src="js/script.js"></script>%%** (код подключения внешнего файла **javascript**).
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="18",highlight_lines_extra="19"]>
+    <!-- Optional: Link to a JavaScript file -->
+    <script src="js/script.js"></script>
+</code>
+//Строку 87// файла **sample.html** с закрывающим тегом **%%</script>%%** удалим за ненадобностью.
+<code html sample.html [enable_line_numbers="true", start_line_numbers_at="87",highlight_lines_extra="87"]>
+	</script>
+  </body>
+</code>
+Проверим правильность подключения файла **script.js** в браузере
+<note shadow>{{:software:development:demo:cms:ucms:sample_html_js_7.png|переход страниц}}</note>
+На этом с выносом из файла **sample.html** скриптов закончим и перейдем к файлу **index.php** в следующей главе
 ===== Дополнения и Файлы =====
 см. также: