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

Флэнаган Дэвид
Шрифт:

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) { // Функция вычисления факториалов

if (п <= 1) return п;

else return n*factorial(n-1);

}

document.write("<table>"); // Начало HTML-таблицы

document.write("<tr><th>n</thxth>n!</th></tr>"); // Вывести заголовок таблицы

for(var і = 1; і <= 10; і++) { // Вывести 10 строк

document. write("<trxtd>" + і + "</tdxtd>" + factorial(i) + "</td></tr>");

}

document.write("</table>”); // Конец таблицы

document.write("Generated at " + new Date); // Вывести время

</script>

Когда сценарий передает текст методу

document.write,
этот текст добавляется во входной поток документа, и механизм синтаксического анализа разметки HTML действует так, как если бы элемент
<script>
был замещен этим текстом. Использование метода
document.write
более не считается хорошим стилем программирования, но его применение по-прежнему возможно (раздел 15.10.2), и этот факт имеет важное следствие. Когда механизм синтаксического анализа разметки HTML встречает элемент
<script>,
он должен, по умолчанию, выполнить сценарий, прежде чем продолжить разбор и отображение документа. Это не является проблемой для встроенных сценариев, но если сценарий находится во внешнем файле, на который ссылается атрибут
src
, это означает, что часть документа, следующая за сценарием, не появится в окне броузера, пока сценарий не будет загружен и выполнен.

Такой синхронный, или блокирующий, порядок выполнения действует только по умолчанию. Тег

<script>
может иметь атрибуты
defer
и
async
, которые (в броузерах, поддерживающих их) определяют иной порядок выполнения сценариев. Это логические атрибуты - они не имеют значения; они просто должны присутствовать в теге
<script>.
Согласно спецификации HTML5, эти атрибуты принимаются во внимание, только когда используются вместе с атрибутом
src
, однако некоторые броузеры могут поддерживать атрибут
defer
и для встроенных сценариев: