13.2.1. Элемент <script>

We use cookies. Read the Privacy and Cookie Policy

Клиентские JavaScript-сценарии могут встраиваться в HTML-файлы между тегами <script> и </script>:

<script>

  // Здесь располагается JavaScript-код

</script>

В языке разметки XHTML содержимое тега <script> обрабатывается наравне с содержимым любого другого тега. Если JavaScript-код содержит символы < или &, они интерпретируются как элементы XML-разметки. Поэтому в случае применения языка XHTML лучше помещать весь JavaScript-код внутрь секции CDATA:

<script><![CDATA[

// Здесь располагается JavaScript-код

]]></script>

В примере 13.2 демонстрируется содержимое HTML-файла, включающего простую программу на языке JavaScript. Действия программы описываются в комментариях, тем не менее замечу, что главная цель этого примера в том, чтобы продемонстрировать, как JavaScript-код встраивается в файлы HTML наряду со всем остальным, в данном случае - со стилями CSS. Обратите внимание, что этот пример по своей структуре напоминает пример 13.1 и точно так же использует обработчик события onload.

Пример 13.2. Простые часы с цифровым табло на JavaScript

<! DOCTYPE html> <!-- Это файл HTML5 -->

<html> <!-- Корневой элемент -->

<head> <!-- Заголовок, здесь располагаются сценарии и стили -->

  <title>Digital Clock</title>

  <script> // Сценарий на JavaScript

    // Определение функции для отображения текущего времени

    function displayTime() {

      var elt = document.getElementById("clock"); // Найти элемент c id="clock"

      var now = new Date(); // Получить текущее время

      elt.innerHTML = now.toLocaleTimeString(); // Отобразить его

      setTimeout(displayTime, 1000); // Вызвать снова через 1 сек.

    }

    window.onload = displayTime; // Начать отображение времени после загрузки документа.

  </script>

  <style> /* Таблица стилей CSS для часов */

    #clock { /* Стили применяются к элементу с id="clock" */

      font: bold 24pt sans; /* Использовать большой полужирный шрифт */

      background: #ddf; /* Светлый, голубовато-серый фон */

      padding: 10px; /* Отступы вокруг */

      border: solid black 2рх; /* И сплошная черная рамка */

      border-radius: 10px; /* Закругленные углы (если поддерживаются) */

    }

  </style>

</head>

<body> <!-- Тело - отображаемая часть документа -->

  <h1>Цифровые часы</h1> <!-- Вывести заголовок -->

  <span id="clock"></span> <!-- Время выводится здесь -->

</body>

</html>