Чтение онлайн

на главную - закладки

Жанры

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

Пример 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
и для встроенных сценариев:

<script defer src="deferred.js"></script>

<script async src="async.js"></script>

Оба атрибута,

defer
и
async
, сообщают броузеру, что данный сценарий не использует метод
document.write
и не генерирует содержимое документа, и что броузер может продолжать разбор и отображение документа, пока сценарий загружается. Атрибут
defer
заставляет броузер отложить выполнение сценария до момента, когда документ будет загружен, проанализирован и станет готов к выполнению операций. Атрибут
async
заставляет броузер выполнить сценарий, как только это станет возможно, но не блокирует разбор документа на время загрузки сценария. Если тег
<script>
имеет оба атрибута, броузер, поддерживающий оба этих атрибута, отдаст предпочтение атрибуту
async
и проигнорирует атрибут
defer
.

Обратите внимание, что отложенные сценарии выполняются в порядке их следования в документе. Асинхронные сценарии выполняются сразу же, как только будут загружены, т. е. они могут выполняться в произвольном порядке.

На момент написания этих строк атрибуты

async
и
defer
поддерживались не всеми броузерами, поэтому их следует рассматривать лишь как подсказки для оптимизации: веб-страницы должны проектироваться так, чтобы они продолжали корректно работать, даже если отложенные и асинхронные сценарии выполняются броузером синхронно.

Имеется возможность загружать и выполнять сценарии асинхронно, даже если броузер не поддерживает атрибут

async
, для чего достаточно динамически создать элемент
<script>
и вставить его в документ. Это действие реализует функция
loadasync
, представленная в примере 13.4. Используемые ею приемы описываются в главе 15.

Пример 13.4. Асинхронная загрузка и выполнение сценария

// Асинхронная загрузка сценария из указанного URL-адреса и его выполнение

function loadasync(url) {

var head = document.getElementsByTagName("head")[0]; // Отыскать <head>

var s = document.createElement("script"); // Создать элемент <script>

s.src = url; // Установить атрибут src

head.appendChild(s); // Вставить <script> в <head>

}

Примечательно, что данная функция

loadasync
загружает сценарии динамически - сценарии, не включенные в веб-страницу, и на которые отсутствуют статические ссылки из веб-страницы, загружаются в документ и становятся частью выполняемой JavaScript-программы.

13.3.2. Выполнение, управляемое событиями

Древняя JavaScript-программа, представленная в примере 13.3, является синхронной: она запускается на выполнение в процессе загрузки страницы, производит вывод и завершается. Такие программы редко используются в наши дни. Программы, которые пишутся в настоящее время, регистрируют функции обработчиков событий. Эти функции вызываются асинхронно, по событиям, для обработки которых они были зарегистрированы. Веб-приложения, в которых требуется реализовать поддержку горячих комбинаций клавиш для выполнения типичных операций, могут, например, регистрировать обработчики событий нажатия клавиш. Даже неинтерактивные программы используют события. Представьте, что требуется написать программу, которая должна проанализировать структуру документа и автоматически сгенерировать оглавление. В этом случае не требуется обрабатывать события, возникающие в результате действий пользователя, однако программа все же должна зарегистрировать обработчик события

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

Поделиться:
Популярные книги

Комментарии к «Евгению Онегину» Александра Пушкина

Набоков Владимир Владимирович
Документальная литература:
критика
5.00
рейтинг книги
Комментарии к «Евгению Онегину» Александра Пушкина

Дважды одаренный. Том III

Тарс Элиан
3. Дважды одаренный
Фантастика:
альтернативная история
аниме
фэнтези
фантастика: прочее
юмористическое фэнтези
5.50
рейтинг книги
Дважды одаренный. Том III

Под-Московье

Калинкина Анна
Фантастика:
боевая фантастика
постапокалипсис
5.00
рейтинг книги
Под-Московье

Гримуар темного лорда VIII

Грехов Тимофей
8. Гримуар темного лорда
Фантастика:
боевая фантастика
альтернативная история
аниме
фэнтези
фантастика: прочее
попаданцы
5.25
рейтинг книги
Гримуар темного лорда VIII

Из истории русской, советской и постсоветской цензуры

Рейфман Павел Семенович
Научно-образовательная:
история
5.00
рейтинг книги
Из истории русской, советской и постсоветской цензуры

Точка Бифуркации XI

Смит Дейлор
11. ТБ
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Точка Бифуркации XI

50 знаменитых городов мира

Скляренко Валентина Марковна
31. 100 знаменитых
Научно-образовательная:
история
4.75
рейтинг книги
50 знаменитых городов мира

Барон диктует правила

Ренгач Евгений
4. Закон сильного
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Барон диктует правила

Последний реанорец. Том XII – Часть II

Павлов Вел
12. Высшая Речь
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний реанорец. Том XII – Часть II

Под знаком Песца

Видум Инди
1. Под знаком Песца
Фантастика:
альтернативная история
аниме
5.00
рейтинг книги
Под знаком Песца

Дневники

Толстой Лев Николаевич
Проза:
русская классическая проза
6.83
рейтинг книги
Дневники

Искусство управления складом

Улыбина Юлия Николаевна
Деловая литература:
о бизнесе популярно
5.00
рейтинг книги
Искусство управления складом

Испытания

Мусаханов Валерий Яковлевич
Проза:
новелла
повесть
5.00
рейтинг книги
Испытания

Экспансия

Каменев Алекс
8. Цитадели гордыни
Фантастика:
героическая фантастика
боевая фантастика
5.00
рейтинг книги
Экспансия