Различия

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

--- software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/08 19:19] – [Введение] VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_scripts_js [2026/02/09 18:17] (текущий) – [4.3.2 Файл scripts.js] VladPolskiy
@@ Строка 5: / Строка 5: @@
 ====== 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_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_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_style_css|4.3.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_scripts_js|4.3.2. Файл scripts.js]]
     * [[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
     * [[software:development:demo:cms:ucms:sample_php_page_header|4.5. Файл header.php]]
     * [[software:development:demo:cms:ucms:sample_php_page_footer|4.6. Файл footer.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_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_about.php|4.7.2. Файл about.php]]
-      * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3 Файл contact.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3. Файл contact.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_like.php|4.7.4. Файл like.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_404.php|4.7.5. Файл 404.php]]
 ===== Введение =====
 Файл **scripts.js** — это внешний файл, содержащий код JavaScript, который обеспечивает интерактивность веб-страниц (обработка событий, анимация, работа с формами). Вынос кода в отдельный файл улучшает читаемость HTML, позволяет кэшировать скрипты браузером и использовать один файл на нескольких страницах. Подключается через **%%<script src="scripts.js"></script>%%**. \\
@@ Строка 28: / Строка 30: @@
 Для открытия и редактирования файла 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"
@@ Строка 39: / Строка 42: @@
   });
 </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** в следующей главе
 ===== Дополнения и Файлы =====
 см. также: