Когда интерпретатор JavaScript встраивается в веб_броузер, результатом явля_ ется клиентский JavaScript. Это, безусловно, наиболее распространенный вари_ ант JavaScript, и большинство людей, упоминая JavaScript, обычно подразуме_ вают именно клиентский JavaScript. В этой книге клиентский язык JavaScript описывается вместе с базовымJavaScript, который представляет собой подмно_ жество клиентского JavaScript.
Клиентский JavaScript включает в себя интерпретатор JavaScript и объектную модель документа (Document Object Model, DOM), определяемую веб_броузером. Документы могут содержать JavaScript_сценарии, которые в свою очередь могут использовать модель DOM для модификации документа или управления способом его отображения. Другими словами, можно сказать, что клиентский JavaScript позволяет определить поведение статического содержимого веб_страниц. Клиент_ ский JavaScript является основой таких технологий разработки веб_приложений, как DHTML (глава 16), и таких архитектур, как Ajax (глава 20). Введение к главе 13 включает обзор большинства возможностей клиентского JavaScript.
Спецификация ECMA_262 определила стандартную версию базового языка Java_ Script, а организация World Wide Web Consortium (W3C) опубликовала специфи_ кацию DOM, стандартизующую возможности, которые броузер должен поддер_ живать в своей объектной модели. (В главах 15, 16 и 17 содержится более под_ робное обсуждение этого стандарта.) Основные положения стандарта W3C DOM достаточно полно поддерживаются наиболее распространенными броузерами за одним важным исключением – Microsoft Internet Explorer; в этом броузере от_ сутствует поддержка механизма обработки событий.
Примеры использования клиентского JavaScript
Веб_броузер, оснащенный интерпретатором JavaScript, позволяет распространять через Интернет исполняемое содержимое в виде JavaScript_сценариев. В приме_ ре 1.1 показана простая программа на языке JavaScript, которая и представляет собой сценарий, встроенный в веб_страницу.
Пример 1.1. Простая программа на языке JavaScript
<html>
<head><title>Факториалы</title></head>
<body>
<h2>Таблица факториалов</h2> <script>
var fact = 1;
for(i = 1; i < 10; i++) { fact = fact*i;
document.write(i + "! = " + fact + "<br>");
}
</script>
</body>
</html>
После загрузки в броузер, поддерживающий JavaScript, этот сценарий выдаст результат, показанный на рис. 1.1.
24 Глава 1. Введение в JavaScript
Рис. 1.1. Веб'страница, сгенерированная с помощью JavaScript
Как видно из этого примера, для встраивания JavaScript_кода в HTML_файл были использованы теги <script> и </script>. О теге <script> подробнее рассказывается в главе 13. Главное, что демонстрируется в данном примере, – это использование метода document.write().1 Этот метод позволяет динамически выводить HTML_ текст внутри HTML_документа по мере его загрузки веб_броузером.
JavaScript обеспечивает возможность управления не только содержимым HTML_ документов, но и их поведением. Другими словами, JavaScript_программа мо_ жет реагировать на действия пользователя: ввод значения в текстовое поле или щелчок мышью в области изображения в документе. Это достигается путем опре_ деления обработчиков событий для документа – фрагментов JavaScript_кода, исполняемых при возникновении определенного события, например щелчка на кнопке. В примере 1.2 показан простой фрагмент HTML_кода, который включа_ ет в себя обработчик события, вызываемый в ответ на такой щелчок.
Пример 1.2. HTML'кнопка с обработчиком события на языке JavaScript
<button onclick="alert('Был зафиксирован щелчок на кнопке');"> Щелкни здесь
</button>
На рис. 1.2 показан результат щелчка на кнопке.
Атрибут onclick из примера 1.2 – это строка JavaScript_кода, исполняемого, ко_ гда пользователь щелкает на кнопке. В данном случае обработчик события on_ click вызывает функцию alert(). Как видно из рис. 1.2, функция alert() выво_ дит диалоговое окно с указанным сообщением.
Примеры 1.1 и 1.2 демонстрируют лишь простейшие возможности клиентского JavaScript. Реальная его мощь состоит в том, что сценарии имеют доступ к со_
1 Метод – это объектно_ориентированный термин, обозначающий функцию или процедуру.
1.3. Клиентский JavaScript
Рис. 1.2. Отклик JavaScript на событие
держимому HTML_документов. В примере 1.3 приводится листинг полноценной нетривиальной JavaScript_программы. Программа вычисляет месячный платеж по закладной на дом или другой ссуде исходя из размера ссуды, процентной ставки и периода выплаты. Программа считывает данные, введенные пользова_ телем в поля HTML_формы, выполняет расчет на основании введенных данных, после чего отображает полученные результаты.
На рис. 1.3 показана HTML_форма в окне веб_броузера. Как видно из рисунка, HTML_документ содержит саму форму и некоторый дополнительный текст. Од_ нако рисунок – это лишь статический снимок окна программы. Благодаря Java_ Script_коду она становится динамической: как только пользователь изменяет сумму ссуды, процентную ставку или количество платежей, JavaScript_код за_ ново вычисляет месячный платеж, общую сумму платежей и общий процент, уплаченный за все время ссуды.
Первая половина примера – это HTML_форма, аккуратно отформатированная с помощью HTML_таблицы. Обратите внимание, что обработчики событий
Рис. 1.3. Калькулятор платежей по ссуде на языке JavaScript
26 Глава 1. Введение в JavaScript
onchange и onclick определены лишь для нескольких элементов формы. Веб_бро_ узер запускает эти обработчики в тот момент, когда пользователь изменяет вход_ ные данные или щелкает на кнопке Рассчитать, отображаемой на форме. Во всех этих случаях значением атрибута обработчика события является строка Java_ Script_кода calculate(). Вызываемый обработчик события исполняет этот код, приводящий к вызову функции calculate().
Функция calculate() определена во второй половине примера внутри тега <script>. Функция читает введенные пользователем данные из формы, выполняет мате_ матические действия, требуемые для вычисления платежей по ссуде, и отобра_ жает результаты этих действий внутри тегов <span>, каждый из которых имеет уникальный идентификатор, определяемый атрибутом id.
Пример 1.3 прост, но на его внимательное рассмотрение стоит потратить время. Вам не обязательно сейчас понимать весь JavaScript_код, однако комментарии в HTML_, CSS_ и JavaScript_коде, а также внимательное изучение этого примера должны дать вам хорошее представление о том, как выглядят программы на клиентском языке JavaScript.1
Пример 1.3. Вычисление платежей по ссуде с помощью JavaScript
<html>
<head>
<title>калькулятор выплат по ссуде на JavaScript</title> <style>
/* Это каскадная таблица стилей: с ее помощью определяется внешний вид документа */
.result { font_weight: bold; } /*стиль отображения элементов с class="result"*/ #payment { text_decoration: underline; } /* для элемента с id="payment" */ </style>
</head>
<body>
<!—
Это HTML_форма, дающая пользователю возможность вводить
данные и с помощью JavaScript показывать ему результат вычислений. Элементы формы для улучшения их внешнего вида помещены в таблицу. Сама форма имеет имя "loandata", а поля в форме – такие имена, как "interest" и "years". Эти имена полей используются
в JavaScript_коде, следующем за кодом формы. Обратите внимание: для некоторых элементов формы
определены обработчики событий "onchange" и "onclick". В них заданы строки JavaScript_кода, выполняемого
при вводе данных или щелчке на кнопке.
__>
<form name="loandata"> <table>
<tr><td><b>Введите данные о ссуде:</b></td></tr> <tr>
1 Если интуиция подсказывает вам, что смешивать HTML_, CSS_ и JavaScript_код, как в данном примере, не очень хорошо, знайте, что вы не одиноки. В настоящее время в кругах, связанных с веб_дизайном, наблюдается тенденция выделения содержимого, представления и поведения в отдельные файлы. Как это сделать, рассказывается в разделе 13.1.5 главы 13.
