Язык JavaScript. Размещение программного кода в html-странице.
JavaScript - это язык программирования, который "понятен" браузеру. Это означает, что браузер умеет выполнять (интерпретировать) команды этого языка.
Программу на JavaScript можно записывать внутри HTML-документа или размещать в отдельном файле. Этот файл браузер прочитает (по специальной команде) во время интерпретации HTML-программы.
Программы на JavaScript (их еще называют скриптами) не работают самостоятельно. Коды на JavaScript дополняют коды HTML и "живут" вместе с ними, даже если они расположены в отдельном файле.
Программы JavaScript можно записывать в любом месте HTML-документа. В некоторых случаях целесообразно записать одну часть программы в одном месте (например, в заголовке - тэге <HEAD>), а другую - в другом (например, в конце HTML-страницы после тела документа - элемента <BODY>). В любом случае текст фрагмента программы заключается в тэг-контейнер <SCRIPT>:
<SCRIPT LANGUAGE="JavaScript">
// Здесь пишется текст программы (скрипта)
</SCRIPT>
В соответствии со стандартом HTML, теги <SCRIPT LANGUAGE="JavaScript"> и </SCRIPT>, как не принадлежащие к HTML, игнорируются, но текст между этими текстами остается виден. Чтобы его скрыть, необходимо заключить этот текст в контейнер - комментарий HTML:
<SCRIPT LANGUAGE="JavaScript">
<!--
// Здесь располагается текст скрипта
//-->
</SCRIPT>
Объектная модель Internet-броузера. Cвойства и методы окон и документов.
Во главе иерархии находится объект window, который представляет окно браузера и порождает все остальные объекты. При ссылке на любой объект из иерархии можно не указывать родительский объект window.
Содержимое окна браузера может представлять собой набор фреймов, которые как раз представляют собой набор объектов frames. Каждый объект этого набора (объект frame), имеет в своем подчинении объект document, который, как понятно из его названия, содержит описание документа.
Объект location хранит информацию о текущем URL-адресе. Объект navigator предназначен для получения информации о браузере. Объект history является массивом документов (отсчет в массиве начинается с единицы), открытых за текущий сеанс работы с браузером. Используя данный объект, организуется повторная загрузка документов.
Перечислим основные наборы объекта document. Набор links представляет собой массив гиперссылок. Набор anchors представляет собой массив меток документа, на которые осуществляется переход по гиперссылкам. Набор forms является массивом форм документа (отсчет элементов массива начинается с нуля). Каждый объект form, входящий в этот набор, имеет набор подчиненных объектов elements, который представляет собой перечень управляющих элементов, расположенных на этой форме (кнопки, меню, поля для ввода многострочного текста и т.п.).
Объект window представляет собой окно браузера и является начальным (корневым) объектом модели Microsoft Internet Explorer. Напомним, что свойства позволяют управлять "внешним видом" объекта; методы - это те действия, которые может выполнять объект; события - подпрограммы, которые выполняются "в ответ" на возникновение какой-либо особой ситуации (загрузка документа, щелчок мыши и т.п.). Таким образом, чтобы обработать какое-либо событие (выполнить в ответ на его возникновение определенную последовательность действий), достаточно разместить в HTML-документе соответствующую подпрограмму. Обращение к ней браузер осуществит автоматически. Если обработчик какого-либо события отсутствует в HTML-документе, то никаких действий выполняться не будет. В этом случае говорят, что "событие не обработано".
Перечислим основные свойства, методы и события объекта window.
Таблица 1.Основные свойства, методы и события объекта Window |
|
Название |
Описание |
Свойства |
|
defaultStatus |
Значение по умолчанию строки состояния браузера. |
document |
Ссылка на объект document в текущем окне. |
self |
Ссылка на текущее окно. |
status |
Ссылка на строку состояния. |
frames |
Ссылка (имя фрейма или его номер) на массив фреймов текущего окна. |
name |
Имя окна |
parent |
Ссылка на родительский объект. |
top |
Ссылка на самый верхний в иерархии объект window. |
dialogTop dialogLeft dialogHeight dialogWidth |
Соответственно координата Y, координата X, высота и ширина окна (в пикселях), созданного методом showModalDialog. |
Методы |
|
alert (<строка>); |
Вывод диалогового окна с заданной строкой и кнопкой OK. |
<переменная>= confirm( <строка>); |
Вывод диалогового окна с заданной строкой и кнопками OK и Cancel. В переменную помещается true (нажата OK) или false (нажата Cancel). |
<переменная>= prompt(<строка сообщения>, <значение по умолчанию>); |
Вывод диалогового окна со строкой ввода, в которой находится значение по умолчанию. Если нажата кнопка OK, то в переменную помещается значение из строки ввода. При нажатии Cancel - значение null (пусто). |
focus(); |
Получение фокуса. |
blur(); |
Потеря фокуса. |
close(); |
Закрытие окна. |
<переменная>=setInterval (<процедура>, <время в миллисекундах>); |
Указывает процедуре выполняться периодически через заданное количество миллисекунд. |
<переменная>=setTimeout( <процедура>, <интервал>); |
Определяет имя процедуры, выполняемой один раз по прошествии указанного временного интервала (в миллисекундах). Переменная используется для завершения выполнения этого метода методом clearTimeout. |
clearTimeout (<переменная>); |
Завершение выполнения процедуры, связанной с указанной переменной. |
clearInterval (<переменная>); |
Обнуляет таймер, заданный методом setInterval. |
open (<URL-адрес>,<имя нового окна>, <параметры>); |
Открытие HTML-документа с заданным адресом в новом окне. Параметры:
|
execScript (<процедура>, <язык процедуры>); |
Выполнение процедуры с указанным именем. Второй параметр (значение "VBScript" или "JavaScript") может отсутствовать. |
showModalDialog (<URL-адрес>, <аргументы>, <возможности>); |
Выводит диалоговое HTML-окно. Второй и третий параметры могут отсутствовать. |
navigate (<URL-адрес>); |
Загрузка новой страницы с указанным адресом. |
showHelp (<URL-адрес>, <аргументы>); |
Вывод файла справки. |
Объект document - самый важный в объектной модели. Все элементы HTML-документа являются свойствами объекта document и одновременно объектами с точки зрения языка сценариев JavaScript. Для удобства некоторые объекты объединены в наборы, которые еще называют коллекциями. Например, коллекция всех картинок в HTML-документе называется images, а коллекция всех ссылок - links. Чтобы обратиться к объекту из коллекции нужно указать его номер в этой коллекции. Таким образом, коллекция представляет собой аналог массива, причем нумерация элементов коллекции также начинается с 0.
Основные свойства, методы и события объекта document |
|
Название |
Описание |
Свойства |
|
alinkColor |
Задает цвет активной ссылки. |
linkColor |
Задает цвет непосещенной ссылки. |
vlinkColor |
Задает цвет посещенной ссылки. |
bgColor |
Определяет цвет фона документа. |
fgColor |
Определяет цвет текста документа. |
title |
Содержит заголовок документа. |
lastModified |
Дата последнего изменения документа. |
readyState |
Возвращает состояние загружаемого элемента:
|
location |
Возвращает объект location с информацией о текущем URL-адресе. |
referrer |
Возвращает URL-адрес предыдущего объекта location. |
activeElement |
Возвращает активный элемент (элемент, находящийся в фокусе). Конструкция activeElement.name позволяет получить имя элемента, а activeElement.value - его значение. |
domain |
Имя узла с документом. |
url |
URL-адрес документа. |
body |
Возвращает ссылку на объект BODY. Используя ее можно определить, например, размеры рабочей области (свойства clientWidth и clientHeight), размеры содержимого документа (scrollWidth и scrollHeight), местоположение полос прокрутки (scrollLeft и scrollTop). |
parentWindow |
Возвращает ссылку на объект window с документом. |
Методы |
|
close(); |
Закончить запись в документ и отобразить его. |
open(); |
Открытие нового потока для метода write() (формирование новой страницы). |
write (<строка>); |
Вывод в открытый предыдущим методом поток указанной строки . Кавычки внутри строки заменяются апострофами: WriteLn("<IMG SRC='Image1.gif'>"). Метод используется при динамическом формировании Web-страницы. |