Различия

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

--- software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/08 17:43] – [4.5.1 Файл scripts.js] VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/08 20:05] (текущий) – [Файл sample.html] VladPolskiy
@@ Строка 4: / Строка 4: @@
 </note>
 ====== 4.3.2 Файл scripts.js ======
   * [[software:development:demo:cms:ucms:sample_html5_and_dinamic_page|Глава 4.0. Шаблон HTML и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_html5_page|4.1 Шаблон HTML5]]
     * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_php_page_sample|4.3. Файл sample.html]]
-    * [[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
-      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.4.1. Файл style.css]]
+      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.3.2 Файл scripts.js]]
-    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
-      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.5.1 Файл scripts.js]]
+    * [[software:development:demo:cms:ucms:sample_php_page_header|4.5. Файл header.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page_index|4.6. Файл index.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.6. Файл footer.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page|4.7. page.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index_part_2|4.7. Файл index.php часть 2]]
       * [[software:development:demo:cms:ucms:sample_php_page_home.php|4.7.1 Файл home.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_about.php|4.7.2 Файл about.php]]
       * [[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"
@@ Строка 32: / Строка 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** в следующей главе
 ===== Дополнения и Файлы =====
 см. также:
@@ Строка 39: / Строка 67: @@
 <note page>
 <wrap left>{{:icons:16:arrow-transition-180.png?|}}
-[[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+[[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
 </wrap>
 <wrap right>
-[[software:development:demo:cms:ucms:sample_php_page_index|4.6. Файл index.php]]
+[[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
  {{:icons:16:arrow-transition.png?|}}</wrap>
 </note>