JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

Пример 13.1. Простой клиентский сценарий на языке JavaScript, исследующий содержимое документа

<!DOCTYPE html>

<html>

<head>

<style>

/* Стили CSS для этой страницы */

.reveal * { display: none: } /* Элементы с атрибутом class="reveal" невидимы */

.reveal *.handle { display: block;} /* Кроме элементов c class= "handle" */

</style>

<script>

// Ничего не делать, пока документ не будет загружен полностью

window.onload = function {

// Отыскать все контейнерные элементы с классом "reveal"

var elements = document.getElementsByClassName("reveal");

for(var i = 0; i < elements.length; i++) { // Для каждого такого элемента...

var elt = elements[i];

// Отыскать элементы с классом "handle" в контейнере

var title = elt.getElementsByClassName("handle")[0];

// После щелчка на этом элементе сделать видимым остальное содержимое

addRevealHandler(title, elt);

}

function addRevealHandler(title, elt) {

title.onclick = function {

if (elt.className == "reveal") elt.className = "revealed";

else

if (elt.className == "revealed") elt.className = "reveal";

}

};

</script>

</head>

<body>

<div class="reveal">

<h1 class="handle">Щелкните здесь, чтобы увидеть скрытый текст</h1>

Этот абзац невидим. Он появляется после щелчка на заголовке.

</div>

</body>

</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.