Книга: JavaScript. Подробное руководство, 6-е издание

13.2.1. Элемент

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

Клиентские 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
      var now = new Date(); // Получить текущее время
      elt.innerHTML = now.toLocaleTimeString(); // Отобразить его
      setTimeout(displayTime, 1000); // Вызвать снова через 1 сек.
    }
    window.onload = displayTime; // Начать отображение времени после загрузки документа.
  </script>
  <style> /* Таблица стилей CSS для часов */
    #clock { /* Стили применяются к элементу с */
      font: bold 24pt sans; /* Использовать большой полужирный шрифт */
      background: #ddf; /* Светлый, голубовато-серый фон */
      padding: 10px; /* Отступы вокруг */
      border: solid black 2рх; /* И сплошная черная рамка */
      border-radius: 10px; /* Закругленные углы (если поддерживаются) */
    }
  </style>
</head>
<body> <!-- Тело - отображаемая часть документа -->
  <h1>Цифровые часы</h1> <!-- Вывести заголовок -->
  <span></span> <!-- Время выводится здесь -->
</body>
</html>

Оглавление книги


Генерация: 0.051. Запросов К БД/Cache: 0 / 2
поделиться
Вверх Вниз