Шрифт:
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 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>
13.2.2. Сценарии во внешних файлах
Тег <script> поддерживает атрибут
src
, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:
<script src="../../scripts/util.js"></script>
Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов
<script>
или любого другого HTML-кода.