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

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

Эта глава начинается с краткого обзора клиентского JavaScript. Она представляет простой пример и описание роли JavaScript в веб-документах и в веб-приложениях. Кроме того, здесь приводится краткое содержание глав второй части книги. Последующие разделы описывают, как программный код на языке JavaScript встраивается в HTML-документы и выполняется в них. Далее следуют разделы с обсуждением трех важных тем программирования на JavaScript: совместимости, удобства и безопасности.

13.1. Клиентский JavaScript

Объект

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.