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

 var answer = confirm("Ready to move on?");

<b>    // Если пользователь щелкнул на кнопке &quot;OK&quot;, заставить броузер загрузить новую страницу </b>

<b>    if (answer) window.location = &quot;</b><a href="http://google.com/"><b>http://google.com</b></a><b>&quot;;</b>

 }

<b>  // Запустить функцию, объявленную выше, через 1 минуту (60000 миллисекунд).</b>

 setTimeout(moveon, 60000);

</script>

Обратите внимание, что примеры программного кода на клиентском JavaScript в этом разделе длиннее примеров на базовом языке, которые мы видели выше в этой главе. Эти примеры не предназначены для ввода в окне консоли Firebug (или в другом подобном инструменте). Однако вы можете вставлять их в HTML-файлы и затем запускать, открывая файлы в веб-броузере. Так, пример, приведенный выше, является самостоятельным HTML-файлом.

Глава 15 «Работа с документами» переходит к исследованию фактической работы, выполняемой с помощью JavaScript на стороне клиента, - управлению содержимым документа HTML. Она покажет вам, как выбирать определенные элементы HTML из документов, как устанавливать HTML-атрибуты этих элементов, как изменять содержимое элементов и как добавлять в документ новые элементы. Следующая функция демонстрирует некоторые из простейших приемов поиска и изменения элементов документа:

<b>// Выводит сообщение в специальной области для отладочных сообщений внутри документа.</b>

// Если документ не содержит такой области, она создается.

function debug(msg) {

<b>  // Отыскать область для отладочных сообщений в документе, поиск по HTML-атрибуту id </b>

 var log = document.getElementByld("debuglog");

<b>  // Если элемент с атрибутом id=&quot;debuglog&quot; отсутствует, создать его.</b>

 if (!log) {

 log = document.createElementC'div"); // Создать элемент <div>

 log.id = "debuglog"; // Установить атрибут id 

 log.innerHTML = "<h1>Debug Log</h1>"; // Начальное содержимое

 document.body.appendChild(log); // Добавить в конец документа

 }

<b>  // Теперь обернуть сообщение в теги &lt;рге&gt; и добавить в элемент log</b>

 var рге = document.createElement("pre"); // Создать тег <рге>

 var text = document.createTextNode(msg); // Обернуть msg в текстовый узел

 pre.appendChild(text); // Добавить текст в тег <рге>

 log.appendChild(pre); // Добавить <рге> в элемент log

}

Глава 15 демонстрирует, как с помощью JavaScript можно управлять HTML-элементами, которые определяют содержимое веб-страниц. Глава 16 «Каскадные таблицы стилей» демонстрирует, как с помощью JavaScript можно управлять каскадными таблицами стилей CSS, определяющими представление содержимого. Чаще всего для этой цели используется атрибут HTML-элементов style или class:

function hide(e, reflow) { // Скрывает элемент e, изменяя его стиль 

 if (reflow) {// Если 2-й аргумент true,

 e.style.display = "none" // скрыть элемент и использовать

 } // занимаемое им место

 else { // Иначе

 e.style.visibility = "hidden"// сделать е невидимым, но оставить

 } // занимаемое им место пустым

}

function highlight(е) { // Выделяет е, устанавливая класс CSS 

 // Просто добавляет или переопределяет HTML-атрибут class.

<b>  // Предполагается, что таблица стилей CSS уже содержит определение класса &quot;hilite&quot; </b>

 if (!е.className) 

 e.className = "hilite"; 

 else 

 e.className += " hilite";

}

JavaScript позволяет не только управлять содержимым и оформлением HTML-документов в броузерах, но и определять поведение этих документов с помощью обработчиков событий. Обработчик событий - это функция JavaScript, которая регистрируется в броузере и вызывается броузером, когда возникает событие определенного типа. Таким событием может быть щелчок мышью или нажатие клавиши (или какое-то движение двумя пальцами на экране смартфона). Обработчик события может также вызываться броузером по окончании загрузки документа, при изменении размеров окна броузера или при вводе данных в элемент HTML-формы. Глава 17 «Обработка событий» описывает, как определять и регистрировать обработчики событий и как вызываются эти обработчики при появлении событий.

Простейший способ объявления обработчиков событий заключается в использовании HTML-атрибутов, имена которых начинаются с приставки «оп». Обработчик «onclick» особенно удобен при создании простых тестовых программ. Предположим, что вы сохранили функции debug() и hide(), представленные выше, в файлах с именами debug.js и hide.js. В этом случае можно было бы написать простой тестовый HTML-файл, использующий элементы <button> с атрибутами onclick, определяющими обработчики событий:

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