Объект Window является средоточием всех особенностей и прикладных интерфейсов клиентского JavaScript. Он представляет окно веб-броузера или фрейм, а сослаться на него можно с помощью идентификатора window . Объект Window определяет свойства, такие как location , которое ссылается на объект Location , определяющий URL текущего окна, и позволяет сценарию загружать в окно содержимое других адресов URL:

// Установить значение свойства для переход на новую веб-страницу

window.location = " http://www.oreilly.com/ ";

Кроме того, объект Window определяет методы, такие как alert(), который отображает диалог с сообщением, и setTimeout(), который регистрирует функцию для вызова через указанный промежуток времени:

// Ждать 2 секунды и вывести диалог с приветствием

setTimeout(function() { alert("Привет, Мир!"); }, 2000);

Обратите внимание, что программный код выше неявно использует свойство объекта window . Объект Window в клиентском JavaScript является глобальным объектом. Это означает, что объект Window находится на вершине цепочки областей видимости и что его свойства и методы фактически являются глобальными переменными и функциями. Объект Window имеет свойство window , которое всегда ссылается на сам объект. Это свойство можно использовать для ссылки на сам объект, но обычно в этом нет необходимости, если требуется просто сослаться на свойство глобального объекта окна.

Объект Window определяет также множество других важных свойств, методов и конструкторов. Полный их перечень можно найти в главе 14.

Одним из наиболее важных свойств объекта Window является свойство document : оно ссылается на объект Document , который представляет содержимое документа, отображаемого в окне. Объект Document имеет важные методы, такие как getElementByld() , который возвращает единственный элемент документа (представляющий пару из открывающего и закрывающего тегов HTML и все, что содержится между ними), опираясь на значение атрибута id элемента:

// Отыскать элемент с атрибутом id="timestamp"

var timestamp = document.getElementById("timestamp");

Объект Element , возвращаемый методом getElementByld(), также имеет ряд важных свойств и методов, позволяющих сценарию извлекать содержимое элемента, устанавливать значения его атрибутов и т. д.:

// Если элемент пуст, вставить в него текущую дату и время

if (timestamp.firstChild == null)

  timestamp.appendChild(document.createTextNode(new Date().toString()));

Приемы получения ссылок на элементы, обхода элементов и изменения содержимого документа описываются в главе 15.

Каждый объект Element имеет свойства style и className , позволяющие определять стили CSS элемента документа или изменять имена классов CSS, применяемых к элементу. Установка этих свойств, имеющих отношение к CSS, изменяют визуальное представление элемента документа:

// Явно изменить представление элемента заголовка

timestamp.style.backgroundColor = "yellow";

// Или просто изменить класс и позволить определять особенности

// визуального представления с помощью каскадных таблиц стилей:

timestamp.className = "highlight";

Свойства style и className , а также другие приемы управления стилями CSS описываются в главе 16.

Другим важным множеством свойств объектов Window , Document и Element являются свойства, ссылающиеся на обработчики событий. Они позволяют сценариям определять функции, которые должны вызываться асинхронно при возникновении определенных событий. Обработчики событий позволяют программам на языке JavaScript изменять поведение окон, документов и элементов, составляющих документы. Свойства, ссылающиеся на обработчики событий, имеют имена, начинающиеся с «on», и могут использоваться, как показано ниже:

// Обновить содержимое элемента timestamp, когда пользователь щелкнет на нем

timestamp.onclick = function() { this.innerHTML = new Date().toString(); }

Одним из наиболее важных обработчиков событий является обработчик onload объекта Window . Это событие возникает, когда содержимое документа, отображаемое в окне, будет загружено полностью и станет доступно для выполнения манипуляций. Программный код на языке JavaScript обычно заключается в обработчик события onload . События являются темой главы 17. Пример 13.1 использует обработчик onload и демонстрирует дополнительные приемы получения ссылок на элементы документа, изменения классов CSS и определения обработчиков других событий в клиентском JavaScript. В этом примере программный код на языке JavaScript заключен в HTML-тег

 

 

   

 

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

 

13.1.1. Сценарии JavaScript в веб-документах

Программы на языке JavaScript могут манипулировать содержимым документа через объект Document и содержащиеся в нем объекты Element . Они могут изменять визуальное представление содержимого, управляя стилями и классами CSS, и определять поведение элементов документа, регистрируя соответствующие обработчики событий. Комбинация управляемого содержимого, представления и поведения называется динамическим HTML (Dynamic HTML, или DHTML), а приемы создания документов DHTML описываются в главах 15, 16 и 17.

Программный код на языке JavaScript в веб-документах обычно должен использоваться ограниченно и выполнять определенную роль. Основная цель использования JavaScript - облегчить пользователю получение или отправку информации. Работа пользователя не должна зависеть от наличия поддержки JavaScript в броузере; сценарии на JavaScript можно отнести к подручным средствам, которые:

• Создают анимационные и другие визуальные эффекты, ненавязчиво руководя действиями пользователя и помогая ему передвигаться по странице.

• Сортируют столбцы таблиц, упрощая пользователю поиск требуемой информации.

• Скрывают определенное содержимое и отображают детали по мере «погружения» пользователя в содержимое.

 

13.1.2. Сценарии JavaScript в веб-приложениях

Веб-приложения применяют все возможности JavaScript и DHTML, которые используются в веб-документах, но помимо управления содержимым, его представлением и поведением они также используют преимущества других фундаментальных механизмов, предоставляемых веб-броузерами.

Чтобы понять суть веб-приложений, важно осознать, что веб-броузеры развивались не только как инструменты для отображения документов и давно уже трансформировались в некоторое подобие простых операционных систем. Сравните: традиционные операционные системы позволяют создавать ярлыки (представляющие файлы и приложения) на рабочем столе и в папках. Веб-броузеры позволяют создавать закладки (представляющие документы и веб-приложения) на панели инструментов и в папках. Операционные системы выполняют множестве приложений в отдельных окнах; веб-броузеры отображают множество документов (или приложений) в отдельных вкладках. Операционные системы определяют низкоуровневые API для организации сетевых взаимодействий, рисования графики и сохранения файлов. Веб-броузеры определяют низкоуровневые API для организации сетевых взаимодействий (глава 18), сохранения данных (глава 20) и рисования графики (глава 21).

Представляя веб-броузеры как упрощенные операционные системы, веб-приложения можно определить как веб-страницы, в которых используется программный код на языке JavaScript для доступа к расширенным механизмам (таким как сетевые взаимодействия, рисование графики и сохранение данных) броузеров. Самым известным из этих механизмов является объект XMLHttpRequest, который обеспечивает сетевые взаимодействия посредством управляемых НТТР-запросов. Веб-приложения используют этот механизм для получения новой информации с сервера без полной перезагрузки страницы. Веб-приложения, использующие этот прием, часто называют Ajax-приложениями, и они образуют фундамент того, что известно под названием «Web 2.0». Объект XMLHttpRequest во всех подробностях рассматривается в главе 18.

Спецификация HTML5 (которая на момент написания этих строк еще находилась в состоянии проекта) и ряд связанных с ней спецификаций определяют ряд других важных прикладных интерфейсов для веб-приложений. В их число входят прикладные интерфейсы для сохранения данных и рисования графики, которые описываются в главах 21 и 20, а также множество других возможностей, таких как геопозиционирование (geolocation), управление журналами посещений и фоновые потоки выполнения. Когда все эти прикладные интерфейсы будут реализованы, они обеспечат дальнейшее расширение возможностей веб-приложений. Подробнее о них рассказывается в главе 22.

Безусловно, сценарии на языке JavaScript занимают в веб-приложениях более важное положение, чем в веб-документах. Сценарии на JavaScript расширяют возможности веб-документов, но при правильном оформлении документы остаются полностью доступными даже при отключенной поддержке JavaScript. Вебприложения по определению являются программами на языке JavaScript, использующими механизмы, предоставляемые веб-броузерами, и не будут работать при отключенной поддержке JavaScript.

 

Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:

• встроенные сценарии между парой тегов ;

• из внешнего файла, заданного атрибутом src тега :

В языке разметки XHTML содержимое тега

В примере 13.2 демонстрируется содержимое HTML-файла, включающего простую программу на языке JavaScript. Действия программы описываются в комментариях, тем не менее замечу, что главная цель этого примера в том, чтобы продемонстрировать, как JavaScript-код встраивается в файлы HTML наряду со всем остальным, в данном случае - со стилями CSS . Обратите внимание, что этот пример по своей структуре напоминает пример 13.1 и точно так же использует обработчик события onload .

Пример 13.2. Простые часы с цифровым табло на JavaScript

 

 

 

 

Цифровые часы

 

 

13.2.2. Сценарии во внешних файлах

Тег

Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов . Обратите внимание, что закрывающий тег обязателен, даже когда указан атрибут src и между тегами отсутствует JavaScript-код. В разметке XHTML в подобных случаях можно использовать единственный тег будет находиться какой-либо текст, не являющийся пробельными символами или комментариями на языке JavaScript.

Использование тега с атрибутом src дает ряд преимуществ:

• HTML-файлы становятся проще, т. к. из них можно убрать большие блоки JavaScript-кода, что помогает отделить содержимое от поведения.

• JavaScript-функцию или другой JavaScript-код, используемый несколькими HTML-файлами, можно держать в одном файле и считывать при необходимости. Это уменьшает объем занимаемой дисковой памятй и намного облегчает поддержку программного кода, т. к. отпадает необходимость править каждый HTML-файл при изменении кода.

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

• Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.

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

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

 

13.2.3. Тип сценария

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

По умолчанию атрибут type получает значение «text/JavaScript». При желании можно явно указать это значение, однако в этом нет необходимости.

В старых броузерах вместо атрибута type использовался атрибут language тегa

Атрибут language считается устаревшим и не должен более использоваться.

Когда веб-броузер встречает элемент

Когда сценарий передает текст методу document.write(), этот текст добавляется во входной поток документа, и механизм синтаксического анализа разметки HTML действует так, как если бы элемент

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

В этом двустрочном сценарии используется метод window.location.search.substring , с помощью которого извлекается часть адресной строки, начинающаяся с символа ?. Затем с помощью метода document.write() добавляется динамически сгенерированное содержимое документа. Этот сценарий предполагает, что обращение к веб-странице будет производиться с помощью следующего URL-адреса:

http://www.example.com/greet.html?name=Давид

В этом случае будет выведен текст «Привет, Давид». Но что произойдет, если страница будет запрошена с использованием следующего URL-адреса:

http://www.example.com/greet.html?name=%3Cscript%3Ealert('Давид')%3C/script%3E

С таким содержимым URL-адреса сценарий динамически сгенерирует другой сценарий (коды %ЗС и %ЗЕ - это угловые скобки)! В данном случае вставленный сценарий просто отобразит диалоговое окно, которое не представляет никакой опасности. Но представьте себе такой случай:

http://siteA/greet.html?name=%3Cscript src=siteB/evil.js%3E%3C/script%3E

Межсайтовый скриптинг потому так и называется, что в атаке участвует более одного сайта. Сайт В (или даже сайт С) включает специально сконструированную ссылку (подобную только что показанной) на сайт А, в которой содержится сценарий с сайта В. Сценарий evil.js размещается на сайте злоумышленника В, но теперь этот сценарий оказывается внедренным в сайт А и может делать все, что ему заблагорассудится с содержимым сайта А. Он может стереть страницу или вызвать другие нарушения в работе сайта (такие как отказ в обслуживании, о чем рассказывается в следующем разделе). Это может отрицательно сказаться на посетителях сайта А. Гораздо опаснее, что такой злонамеренный сценарий может прочитать содержимое cookies, хранящихся на сайте А (возможно, содержащих учетные номера или другие персональные сведения), и отправить эти данные обратно на сайт В. Внедренный сценарий может даже отслеживать нажатия клавиш и отправлять эти данные на сайт В.

Универсальный способ предотвращения XSS-атак заключается в удалении HTML-тегов из всех данных сомнительного происхождения, прежде чем использовать их для динамического создания содержимого документа. Чтобы исправить эту проблему в показанном ранее файле greet.html, нужно добавить следующую строку в сценарий, которая призвана удалять угловые скобки, окружающие тег

 

14.6. Обработка ошибок

Свойство onerror объекта Window - это обработчик событий, который вызывается во всех случаях, когда необработанное исключение достигло вершины стека вызовов и когда броузер готов отобразить сообщение об ошибке в консоли JavaScript. Если присвоить этому свойству функцию, функция будет вызываться всякий раз, когда в окне будет возникать ошибка выполнения программного кода JavaScript: присваиваемая функция станет обработчиком ошибок для окна.

Исторически сложилось так, что обработчику события опеrror объекта Window передается три строковых аргумента, а не единственный объект события, как в других обработчиках. (Другие объекты в клиентском JavaScript также имеют обработчики onerror , обрабатывающие различные ошибочные ситуации, но все они являются обычными обработчиками событий, которым передается единственный объект события.) Первый аргумент обработчика window.опеrror - это сообщение, описывающее произошедшую ошибку. Второй аргумент - это строка, содержащая URL-адрес документа с JavaScript-кодом, приведшим к ошибке. Третий аргумент - это номер строки в документе, где произошла ошибка.

Помимо этих трех аргументов важную роль играет значение, возвращаемое обработчиком опеrror . Если обработчик опеrror возвращает true , это говорит броузеру о том, что ошибка обработана и никаких дальнейших действий не требуется; другими словами, броузер не должен выводить собственное сообщение об ошибке. К сожалению, по историческим причинам в Firefox обработчик ошибок должен возвращать true, чтобы сообщить о том, что ошибка обработана.

Обработчик оnеrror является пережитком первых лет развития JavaScript, когда в базовом языке отсутствовала инструкция try/catch обработки исключений. В современном программном коде этот обработчик используется редко. Однако на время разработки вы можете определить свой обработчик ошибок, как показано ниже, который будет уведомлять вас о всех происходящих ошибках:

// Вывести сообщение об ошибке в виде диалога, но не более 3 раз

window.опеrror = function(msg, url, line) {

  if (опеrror.num++ < опеrror.max) {

    alert("ОШИБКА: " + msg + "\n" + url + + line):

    return true;

  }

}

опеrror.max = 3;

опеrror.num = 0;

 

14.7. Элементы документа как свойства окна

Если для именования элемента в HTML-документе используется атрибут id и если объект Window еще не имеет свойства, имя которого совпадает со значением этого атрибута, объект Window получает неперечислимое свойство с именем, соответствующим значению атрибута id , значением которого становится объект HTMLElement , представляющий этот элемент документа.

Как вы уже знаете, объект Window играет роль глобального объекта, находящегося на вершине цепочки областей видимости в клиентском JavaScript. Таким образом, вышесказанное означает, что атрибуты id в HTML-документах становятся глобальными переменными, доступными сценариям. Если, например, документ включает элемент

var win = elt.contentWindow;

win.frameElement === elt // Всегда верно для фреймов

window.frameElement === null // Для окон верхнего уровня

Однако, чтобы получить ссылки на дочерние фреймы, обычно не требуется использовать метод getElementByld() и свойство contentWindow . Каждый объект Window имеет свойство frames , хранящее ссылки на дочерние фреймы, содержащиеся в окне или фрейме. Свойство frames ссылается на объект, подобный массиву, который может индексироваться числовыми индексами или именами фреймов. Получить ссылку на первый дочерний фрейм в окне можно с помощью выражения frames[0]. Сослаться на третий дочерний фрейм во втором дочернем фрейме можно с помощью выражения frames[1].frames[2]. Сценарий, выполняющийся во фрейме, может сослаться на соседний фрейм одного с ним уровня, как parent.frames[1]. Обратите внимание, что элементами массива frames[] являются объекты Window, а не элементы