Щелчок на ссылке открывает простейший обработчик JavaScript-выражений, который позволяет вычислять выражения и выполнять инструкции в контексте страницы:
<a href='javascript:
var e = r = /* Вычисляемое выражение и результат */
do {
/* Отобразить выражение и результат, а затем запросить новое выражение */
e = prompt("Выражение: " + e + "\n" + r + "\n", e);
try { r = "Результат: " + eval(e); } /*
Попробовать вычислить выражение */
catch(ex) { r = ex; } /* Или запомнить ошибку */
} while(e); /* продолжать, пока не будет введено пустое выражение */
/* или не будет выполнен щелчок на кнопке Отмена*/
void 0; /* Это предотвращает затирание текущего документа */
'>
Обработчик JavaScript-выражений
</а>
Обратите внимание: несмотря на то что этот программный код записан в нескольких строках, синтаксический анализатор разметки HTML обработает его как одну строку, а потому однострочные комментарии (//) здесь работать не будут. Кроме того, не забывайте, что весь этот программный код является частью значения HTML-атрибута, заключенного в одиночные кавычки, поэтому этот программный код не может содержать одиночные кавычки.
Ссылки, подобные этой, удобны, когда они «зашиты» в тело разрабатываемой страницы, но еще более удобны, когда они хранятся как закладки, которые можно запустить из любой страницы. Обычно закладки создаются щелчком правой кнопкой мыши на странице и выбором в контекстном меню пункта Добавить страницу в закладки или подобного ему. В броузере Firefox для этого достаточно просто перетащить ссылку на панель закладок.
13.3. Выполнение JavaScript-программ
Вообще говоря, не существует формального определения программы на клиентском языке JavaScript. Можно лишь сказать, что программой является весь программный код на языке JavaScript, присутствующий в веб-странице (встроенные сценарии, обработчики событий в разметке HTML и URL-адреса
javascript:
), а также внешние сценарии JavaScript, на которые ссылаются атрибуты
src
тегов
<script>.
Все эти отдельные фрагменты программного кода совместно используют один и тот же глобальный объект
Window
. Это означает, что все они видят один и тот же объект
Document
и совместно используют один и тот же набор глобальных функций и переменных: если сценарий определяет новую глобальную переменную или функцию, эта переменная или функция будет доступна любому программному коду на языке JavaScript, который будет выполняться после этого сценария.
Если веб-страница содержит встроенный фрейм (элемент
<iframe>
), JavaScript-код во встроенном документе будет работать с другим глобальным объектом, отличным от глобального объекта в объемлющем документе, и его можно рассматривать как отдельную JavaScript-программу. Однако напомню, что не существует формального определения, устанавливающего границы JavaScript-программы. Если оба документа, вмещающий и вложенный, получены с одного сервера, то программный код в одном документе сможет взаимодействовать с программным кодом в другом документе и их можно считать взаимодействующими частями одной программы. Подробнее о глобальном объекте
Window
и о взаимодействии программ, выполняющихся в разных окнах и фреймах, рассказывается в разделе 14.8.3.
URL-адреса
javascript:
в букмарклетах существуют за пределами какого-либо документа, и их можно рассматривать, как своего рода пользовательские расширения или дополнения к другим программам. Когда пользователь запускает букмарклет, программный код в букмарклете получает доступ к глобальному объекту и содержимому текущего документа и может манипулировать им как угодно.
Программы на языке JavaScript выполняются в два этапа. На первом этапе производится загрузка содержимого документа и запускается программный
код в элементах
<script>
(и встроенные сценарии, и внешние). Обычно (но не всегда - подробнее об этом рассказывается в разделе 13.3.1) сценарии выполняются в порядке их следования в документе. Внутри каждого сценария программный код выполняется последовательно, от начала до конца, с учетом условных инструкций, циклов и других инструкций управления потоком выполнения.
После загрузки документа и выполнения всех сценариев начинается второй этап выполнения JavaScript-программы, асинхронный и управляемый событиями. На протяжении этого этапа, управляемого событиями, веб-броузер вызывает функции обработчиков (которые определены в HTML-атрибутах обработчиков событий, установлены сценариями, выполненными на первом этапе, или обработчиками событий, вызывавшимися ранее) в ответ на события, возникающие асинхронно. Обычно обработчики событий вызываются в ответ на действия пользователя (щелчок мышью, нажатие клавиши и т. д.), но могут также вызываться в ответ на сетевые взаимодействия, по истечении установленного промежутка времени или при возникновении ошибочных ситуаций в JavaScript-коде. Подробнее о событиях и обработчиках событий рассказывается в главе 17. Некоторая дополнительная информация о них будет также приводиться в разделе 13.3.2. Обратите внимание, что URL-адреса
javascript:
, встроенные в веб-страницу, также можно отнести к категории обработчиков событий, т. к. они не выполняются, пока не будут активированы действиями пользователя, такими как щелчок мышью на ссылке или отправка формы на сервер.
Одно из первых событий, возникающих на управляемом событиями этапе выполнения, является событие
load
, которое сообщает, что документ полностью загружен и готов к работе. JavaScript-программы нередко используют это событие как механизм запуска. На практике часто можно увидеть программы, сценарии которых определяют функции, но не выполняют никаких действий, кроме определения обработчика события
onload
, вызываемого по событию
load
и запускающего управляемый событиями этап выполнения. Именно обработчик события
onload
выполняет операции с документом и реализует все, что должна делать программа. Этап загрузки JavaScript-программы протекает относительно быстро, обычно он длится не более одной-двух секунд. Управляемый событиями этап выполнения, наступающий сразу после загрузки документа, длится на протяжении всего времени, пока документ отображается веб-броузером. Поскольку этот этап является асинхронным и управляемым событиями, он может состоять из длительных периодов отсутствия активности, когда не выполняется никакой программный код JavaScript, перемежающихся всплесками активности, вызванной действиями пользователя или событиями, связанными с сетевыми взаимодействиями. Подробнее оба этапа выполнения JavaScript-программ рассматриваются в разделе 13.3.4.
Обе разновидности языка, базовый JavaScript и клиентский JavaScript, поддерживают однопоточную модель выполнения. Сценарии и обработчики событий выполняются последовательно, не конкурируя друг с другом. Такая модель выполнения обеспечивает простоту программирования на языке JavaScript и обсуждается в разделе 13.3.3.
13.3.1. Синхронные, асинхронные и отложенные сценарии
Когда поддержка JavaScript впервые появилась в веб-броузерах, не существовало никаких инструментов обхода и управления структурой содержимого документа. Единственный способ, каким JavaScript-код мог влиять на содержимое документа, - это генерировать содержимое в процессе загрузки документа. Делалось это с помощью метода
document.write.
В примере 13.3 показано, как выглядел ультрасовременный JavaScript-код в 1996 году.
Пример 13.3. Генерация содержимого документа во время загрузки
<h1>Таблица факториалов</h1>
<script>
function factorial(n) { // Функция вычисления факториалов