Одной из возможностей JavaScript по взаимодействию с пользователем является использование стандартных окон сообщений и окна ввода текста.
Программа на JavaScript может выводить два типа окон сообщений: окно с одной кнопкой OK и окно с кнопками OK и Отмена. Для вывода окон сообщений первого типа используется функция alert(), имеющая следующий формат:
alert(текст_сообщения)
Кроме текста сообщения, в функцию alert() можно передавать численные и логические значения, а также массивы, прочие объекты и даже функции (по крайней мере, при использовании Internet Explorer). Эти возможности делают функцию alert() удобным средством не только взаимодействия с пользователем, а также средством отладки сценариев.
Для вывода окна сообщения с возможностью выбора (кнопки OK и Отмена) используется функция confirm():
confirm(текст_сообщения)
Функция confirm() возвращает значение true, если пользователь нажал кнопку OK, и false, если нажата кнопка Отмена.
При необходимости организации ввода текста пользователем можно применять функцию prompt(). Функция имеет следующий формат:
prompt(текст_сообщения, текст_по_умолчанию)
Как видно, функция принимает два параметра. В первый параметр помещается комментарий, который будет показан в окне. Во втором параметре задается текст, который уже будет введен в текстовое поле, как только окно станет видным пользователю. Окно ввода, приведенное на рис. 12.1, появляется при выполнении следующего отрывка программы:
var a = prompt(«Введите свое имя», «Не хочу регистрироваться»));
Рис. 12.1. Окно запроса пользователю
Если пользователь нажимает в окне ввода кнопку OK, то функция prompt() возвращает введенное в текстовое поле значение. В противном случае функция prompt() возвращает значение null.
Примечание
Описанные в этом разделе функции вывода сообщений не являются специфичными только для JavaScript. Это методы глобального объекта window. Они рассмотрены раньше, чем объектная модель документа, ввиду чрезвычайной их полезности для отладки сценариев.
12.10. Поиск ошибок в программе
В заключение краткого рассмотрения языка JavaScript немного поговорим о видах ошибок в программе, а также о сообщениях об ошибках и поиске самих ошибок. Здесь идет речь об отладке программ (сценариев) средствами браузера.
Итак, синтаксические ошибки выявляются при проверке текста программы. Обычно они проявляются как несбалансированные скобки, не там поставленные запятые или точки с запятой, ошибки в выражениях и т. д. В сообщениях о синтаксических ошибках обычно фигурируют слова типа «ожидалось» (expected), «не ожидалось» (unexpected). Пример сообщения об ошибке браузера Internet Explorer приведен на рис. 12.2.
Рис. 12.2. Сообщение о синтаксической ошибке
Эту конкретную ошибку вызвала следующая строка программы (ошибочно использован символ ; вместо , для разделения параметров функции):
prompt(«текст сообщения»;"значение по умолчанию")
Семантическими ошибками являются использование необъявленных переменных, функций, неправильное количество параметров при вызове функций, использование операторов к операндам несовместимых типов и т. д. При отладке программ только с помощью браузера семантические ошибки равносильны ошибкам времени выполнения, так как выявляются только во время исполнения программы. При этом за браузером Internet Explorer (версии 6.0) замечено довольно странное отношение к ошибкам такого рода (хотя и оправданное с точки зрения пользователя). Так, сообщения об использовании необъявленных переменных часто не выдаются. Вместо этого интерпретатор JavaScript просто завершает выполнение функции или последовательности операторов вне функции. В следующем примере сообщения с номером 12 пользователь не увидит, если переменная a не объявлена:
a += 12;
alert(12);
При таком поведении интерпретатора браузера достаточно сложно определить место возникновения ошибки, поэтому приходится прибегать к некоторым уловкам. Например, можно расставлять вызовы функции alert() до и после каждого подозрительного места программы.
Глава 13Динамический HTML
Данная глава предназначена для того, чтобы познакомить вас с применением сценариев для создания динамических HTML‑документов на примере языка программирования JavaScript.
13.1. Основы использования сценариев в HTML-документе
Помещение сценария в документ
Для помещения сценария в документ достаточно использовать HTML‑элемент SCRIPT. Этот элемент задается парными тегами и имеет следующие атрибуты:
• src – URI файла, в котором записан код внешнего сценария;
• type – задает тип содержимого элемента SCRIPT или файла, определенного атрибутом src, принимает значения вида text/язык_сценария (например, text/javascript, text/vbscript);
• language – задает язык сценария (например, javascript или vbscript); при использовании атрибута type этот атрибут излишен.
Элемент SCRIPT может появляться как в заголовке, так и в теле документа произвольное количество раз. Рассмотрим пример внедрения в документ простейшего сценария на JavaScript (язык рассмотрим чуть позже) (пример 13.1).
"http://www.w3.org/TR/html4/frameset.dtd">
Страница, содержащая сценарий
Прочий текст страницы...
Участки кода между , начинающиеся с document.write(), должны быть записаны в одну строку, иначе пример работать не будет. Что же делает сценарий в приведенном примере? Да ничего особенного, просто при загрузке страницы печатает в правом верхнем углу приветствие, цвет и текст которого зависят от времени суток.
Стоит сказать несколько слов о еще одном HTML‑элементе, имеющем отношение к сценариям, – это NOSCRIPT. Этот HTML‑элемент задается парными тегами и полезен, когда автор документа хочет подстраховаться на случай, если его документ будет открыт в браузере, не поддерживающем сценарии вообще или не поддерживающем сценарии на используемом языке программирования. Итак, если сценарий не может быть выполнен, то браузер отобразит содержимое элемента NOSCRIPT (в нем может быть, например, гиперссылка на версию документа, не использующую сценарии).
Скрытие сценария
Рассмотрим прием, который часто применяется для того, чтобы браузер, вообще «не знающий» HTML‑элемента SCRIPT, не показал пользователю текст сценария. Это может случиться, если сценарий помещен в тело документа.
Для предотвращения возникновения такой ситуации текст сценария помещают в HTML‑комментарий следующим образом:
Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML‑комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).
Другим вариантом скрытия, который должен точно работать, является помещение сценария во внешнем файле и подключение его при помощи атрибута src элемента SCRIPT.
13.2. Исполнение сценария
Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ сценариев. Итак, сценарий может исполняться в двух случаях: при загрузке документа и при возникновении события (а также при вызове его интерпретатором, например, по таймеру, но это рассмотрим особо).
Исполнение при загрузке документа
Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой‑либо функции, только один раз по мере загрузке документа. Причем положение HTML‑элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.
Чтобы при загрузке HTML‑документа выполнялась какая‑либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).
...
Страница, содержащая сценарий
Прочий текст страницы...
Если бы в коде сценария не было явного вызова функции greeting(), то на странице не появилось бы приветствие.
Реакция на события
Сценарий может быть также запущен браузером при возникновении на странице какого‑либо события, с которым сопоставлен сценарий, – обработчика события. Генерацию событий могут вызывать различные действия пользователя: щелчок кнопкой мыши на элементе страницы, наведение указателя мыши на элемент и др.
Для назначения обработчиков события используются атрибуты HTML‑элементов, приведенные в табл. 13.1.
Значениями приведенных в таблице атрибутов могут быть фрагменты кода сценариев, например:
Текст абзаца
Текст абзаца
Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то сами кавычки в тексте сценария использовать не следует. Обычной практикой является создание функций‑обработчиков события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге элемента. В таком случае в атрибут onСобытие записывается код вызова функции‑обработчика.
События, возникающие в дочерних элементах, передаются вверх по иерархии родительским элементам. Так, например, если над текстом элемента B в приведенном ниже примере произойдет щелчок кнопкой мыши, то событие получит сначала элемент B, потом элемент P, а затем и элемент BODY:
Обычный текст
полужирный текст