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

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

<!DOCTYPE html>

<html>

 <head>

 <style>

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

<b>      .reveal * { display: none: } /* Элементы с атрибутом class=&quot;reveal&quot; невидимы */</b>

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

 </style>

 <script>

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

 window.onload = function() {

<b>        // Отыскать все контейнерные элементы с классом &quot;reveal&quot; </b>

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

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

 var elt = elements[i];

<b>          // Отыскать элементы с классом &quot;handle&quot; в контейнере </b>

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

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

 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">

<b>      &lt;h1 class=&quot;handle&quot;&gt;Щелкните здесь, чтобы увидеть скрытый текст&lt;/h1&gt;</b>

<b>      &lt;p&gt;Этот абзац невидим. Он появляется после щелчка на заголовке.&lt;/p&gt;</b>

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