Спецификация HTML5 (которая на момент написания этих строк еще находилась в состоянии проекта) и ряд связанных с ней спецификаций определяют ряд других важных прикладных интерфейсов для веб-приложений. В их число входят прикладные интерфейсы для сохранения данных и рисования графики, которые описываются в главах 21 и 20, а также множество других возможностей, таких как геопозиционирование (geolocation), управление журналами посещений и фоновые потоки выполнения. Когда все эти прикладные интерфейсы будут реализованы, они обеспечат дальнейшее расширение возможностей веб-приложений. Подробнее о них рассказывается в главе 22.
Безусловно, сценарии на языке JavaScript занимают в веб-приложениях более важное положение, чем в веб-документах.
Сценарии на JavaScript расширяют возможности веб-документов, но при правильном оформлении документы остаются полностью доступными даже при отключенной поддержке JavaScript. Вебприложения по определению являются программами на языке JavaScript, использующими механизмы, предоставляемые веб-броузерами, и не будут работать при отключенной поддержке JavaScript. [28]
28
Интерактивные веб-страницы, взаимодействующие с серверными CGI-сценариями посредством форм HTML также можно считать «веб-приложениями», и они могут быть написаны без применения JavaScript. Однако это не тот тип веб-приложений, которые мы будем обсуждать в этой книге.
13.2. Встраивание JavaScript-кода в разметку HTML
Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:
• встроенные сценарии между парой тегов
<script>
и
</script>;
• из внешнего файла, заданного атрибутом
src
тега
<script>;
• в обработчик события, заданный в качестве значения HTML-атрибута, такого
как
onclick
или
onmouseover;
• как тело URL-адреса, использующего специальный спецификатор псевдопротокола JavaScript:.
В следующих далее подразделах описываются все четыре способа встраивания программного кода на языке JavaScript. Следует отметить, что HTML-атрибуты обработчиков событий и адреса URL с псевдопротоколом javascript: редко используются в современной практике программирования на языке JavaScript (они были более распространены на раннем этапе развития Всемирной паутины). Встроенные сценарии (в тегах
<script>
без атрибута
src
) также стали реже использоваться по сравнению с прошлым. Согласно философии программирования, известной как ненавязчивый JavaScript (unobtrusive JavaScript), содержимое (разметка HTML) и поведение (программный код на языке JavaScript) должны быть максимально отделены друг от друга. Следуя этой философии программирования, сценарии на языке JavaScript лучше встраивать в HTML-документы с помощью элементов
<script>,
имеющих атрибут
src.
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рх; /* И сплошная черная рамка */