JavaScript: основные понятия (стр. 1 )

JavaScript: основные понятия

Чтобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать скрипты (сценарии). Сценарий (script, скрипт) — программа, написанная на специальном языке программирования, которая встраивается в HTML-документ.

Стандартным языком для скриптов является JavaScript. Чтобы эффективно использовать скриптовый язык для создания сценариев (скриптов), необходимо знать объектную модель HTML-документа. HTML-документ при загрузке в браузер транслируется в некоторое внутреннее представление в соответствии с объектной моделью. Каждый элемент HTML-документа (заголовок, картинка, кнопка и т. п.) представляется соответствующим объектом. Специфика объектов определяется их свойствами. С другой стороны, браузер, будучи программой, тоже имеет свою объектную модель. Средством манипулирования объектами стал язык JavaScript. Для браузера Internet Explorer, кроме JScript, можно использовать язык VBScript. Это — объектно-ориентированные языки программирования. На них можно писать программы, называемые сценариями (скриптами), и вставлять сценарии в HTML-код, обрамляя тэгами <SCRIPT> и </SCRIPT>.

Рассмотрим объектную модель, представляющую собой частично упорядоченное множество объектов. Некоторые объекты входят в состав других объектов, так что объекты образуют иерархию. Объект — это программная единица, которую можно использовать в программах для выполнения различных задач. О текущем состоянии объекта можно судить только по значениям его свойств. Управлять состоянием объекта (если он допускает это) можно только посредством его свойств.

Объекты имеют фиксированные названия. Например, окну браузера соответствует объект window, a HTML-документу, загруженному в браузер, — объект document. Это основные объекты, но есть и другие. Объекты характеризуются тремя типами свойств:

·  свойства;

·  методы;

·  события.

Свойства представляют собой переменные с фиксированными именами. Свойства имеют значения. Есть свойства, значения которых можно только читать (нельзя изменять). Такие свойства подобны измерительным приборам и датчикам. Значения других свойств можно изменять как обычные переменные. Эти свойства аналогичны элементам управления. Для доступа к свойству объекта используется синтаксис:

объект. свойство;

Например, значением свойства document. location является URL-адрес HTML-документа.

Методы— это внутренние функции объектов. Они имеют фиксированные имена, могут принимать параметры и возвращать значения. Вот синтаксис применения метода:

объект. метод(список_параметров);

Например, метод window, open ("www. *****/~dunaev") открывает новое окно браузера и загружает в него страницу, расположенную по указанному адресу. Некоторые методы не имеют параметров. С точки зрения пользователя методы отличаются от свойств только синтаксисом обращения. Программы (объекты — это тоже программы) могут управляться как данными (т. е. значениями переменных), так и процедурами и функциями (т. е. методами).

Объект может иметь в качестве свойства другой объект. В этом случае говорят, что первый объект содержит (включает в себя) второй объект. При этом первый объект называют также родительским (parent), а второй — дочерним, потомком или подобъектом (child). Если мы хотим обратиться к свойству или методу объекта объект2, являющегося подобъектом объекта объект1 то пишем так:

объект1.объект2.свойство;

объект2.объект2.метод () ;

Например, объект document является подобъектом объекта window. Если мы хотим что-то записать в документ, загруженный в текущее окно, то можем воспользоваться для этого методом write(). Вот пример:

window. document. write("Привет!")

События. Кроме свойств и методов, для каждого объекта определен список событий, на которые он реагировать. События имеют предопределенные названия. Например, событие «щелчок кнопкой мыши» обозначается onclick, «нажатие кнопки мыши» — onmousedown, а «загрузка документа в браузер» — onload.

Все элементы страницы, созданные с помощью тэгов HTML, а также информация о состоянии браузера имеют объектное представление. Доступ к объектам осуществляется с помощью сценариев (скриптов).

Все перечисленные понятия лежат в основе объектно-ориентированных программ. В настоящее время к ним относится основная масса программных продуктов. И в первую очередь таковыми являются современные операционные системы, например Windows.

Можно связать HTML-код с происходящими событиями и использовать эту связь для организации взаимодействия пользователя со страницей. Например, один лишь щелчок порождает сразу несколько событий: onmousedown (нажата кнопка мыши), onmouseup (отпущена кнопка мыши) и onclick (щелчок кнопкой мыши, т. е. кратковременное нажатие и освобождение кнопки).

Если пользователь нажмет кнопку мыши во время нахождения указателя над окном браузера, то Windows пошлет браузеру сообщение, содержащее информацию о том, какая кнопка мыши нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Браузер решает, обрабатывать ли ему это событие. Если пользователь щелкнул на одной из кнопок панели инструментов, то браузер обработает это событие сам. Если во время щелчка указатель находился внутри собственно страницы, то браузер пропустит это событие к странице через свою объектную модель. В HTML-программе страницы может находиться сценарий, который обрабатывает это событие. Имеется и обратный путь. Если мы решаем ответить на событие, то инструкции идут от сценария к браузеру через ту же объектную модель. Браузер теперь решает, что делать со страницей, и сообщает об этом системе. В динамическом HTML мы можем указать, на какие события реагировать странице и что делать браузеру.

Объектная модель

Каждый элемент страницы (HTML-документа) предстает в виде объекта со своими свойствами и методами. Объекты, соответствующие элементам страницы, упорядочиваются иерархическую структуру так, что одни из объектов являются подобъектами других объектов.

Самым главным является объект window (окно), который находится вверху иерархии. Но в то же время основное в модели — объект document, т. к. большая часть страницы состоит из его частей. По существу, объект window — просто контейнер (объект, содержащий другой объект) для объекта document. Кроме объектов, в модель входят коллекции — структуры, аналогичные массивам. В таком массиве каждый элемент принадлежит структуре и связан с соседними элементами. Коллекция — это способ держать объекты вместе для упрощения доступа к ним с помощью программного кода. Коллекция — просто промежуточный (технологический) уровень в иерархии.

Например, объект document может содержать коллекцию images картинок (объектов frame). Мы можем обратиться к картинке либо по ее имени, либо по порядковому номеру:

document. images ( "my_labelture" )

window. images (0)

В коллекциях объектной модели первый элемент имеет нулевой индекс (порядковый номер). Расположение (индекс) элемента в коллекции зависит от его места в исходном тексте HTML-документа.

Рассмотрим пример простого HTML-документа:

<HTML>
<НЕАD> <TITLE>Пример</ТITLE> </НЕАD>
<BODY>
<CENTER>
< ! Рисунок 1 >
<IMG src ="рис1.gif " NAME="image1 ">
</CENTER>

<! Форма, содержащая три элемента > <FORM NAME="myForm">
Имя: <INPUT TYPE="TEXT" NAME="xName" VALUE=""XBR>
E-mail: <INPUT TYPE="TEXT" NAME="email" VALUE=" "><BR><BR>
<INPUT TYPE="BUTTON" NAME="raybutton" VALUE="Нажми меня">
</FORM>
<! Рисунок 2 >
<IMG SRC="pnc2 .gif" NAME="image2 " WIDTH=200>
< ! Ссылка >
<A HREF="www. *****/~dunaev">Mofl
домашняя страница</А>
</BODY>
</HTML>

На этой странице расположены два рисунка, одна ссылка и форма, содержащая два поля ввода текста и кнопку. Окно браузера — это объект window. Он также содержит элементы, такие как строка состояния. Внутри окна браузера размещен HTML-документ. Этот документ представлен объектом document — самый важный объект в объектной модели. Все элементы HTML-документа являются свойствами объекта document и одновременно объектами с точки зрения языка сценариев. Для удобства некоторые объекты объединены в группы, называемые коллекциями. Например, коллекция всех картинок в HTML-документе называется images, а коллекция всех ссылок — links. Чтобы обратиться к объекту из коллекции, нужно указать его номер в этой коллекции. На следующем рисунке приведена иерархическая схема объектного представления HTML-документа из рассматриваемого примера:

Первый объект в этой структуре — document. Первый элемент HTML-документа — картинка с именем image 1. Она представляется в виде объекта images (0) (нумерация элементов коллекции начинается с нуля, поэтому первый элемент коллекции имеет индекс 0). В примере первой картинкой является графическое изображение из файла рис 1.gif. Чтобы получить доступ к этому элементу страницы, требуется записать:

document. images (0)

Если нужна кнопка, то пишем:

document. forms(0).elements(2)

Для доступа к первому полю ввода используется запись:

document. forms(0).elements(0)

Если мы хотим узнать, какой текст ввел пользователь в это поле, то должны выяснить, какое свойство или метод позволяет получить доступ к этой информации. Обращаемся к справочнику и находим, что свойство value имеет в качестве значения текст, содержащийся в поле ввода, — как раз то, что нам нужно. Тогда для получения информации следует записать:

document. forms(0).elements(0).value

В HTML-документе были предусмотрительно определены имена элементов с помощью атрибута NAME. Хотя задание имен не является обязательным, указывать имена полезно, поскольку появляется возможность обращаться к элементам по именам. Например, вместо записи

document. forms(0).elements(0).value

можно было бы записать

document. myForm. xName. value

Это удобно, особенно когда на странице расположено много элементов, и трудно отслеживать, какой индекс имеет тот или иной элемент. Еще раз обратите внимание на то, что регистр букв в имени элемента имеет важное значение. Так, myForm и myform — не одно и то же.

ВЫВОД: для получения доступа к информации об элементах страницы необходимо, во-первых, знать положение соответствующего объекта в иерархии объектов. Во-вторых, нужно знать, как называются объекты, их свойства и методы.

Основные объекты, их свойства и методы

Объект window

Объект window имеет свойства, методы, события, а также дочерние объекты.

Свойства объекта window

·  parent — возвращает родительское для текущего окно;

·  self — возвращает ссылку на текущее окно;

·  top — возвращает ссылку на главное окно;

·  name — название окна;

·  opener — ссылка на исходное окно, в котором было создано данное окно;

·  dosed — сообщает, если окно закрыто;

·  status — текст, показываемый в строке состояния браузера;

·  defaultstatus — текст строки состояния браузера по умолчанию;

·  returnValue — позволяет определить возвращенную переменную для события или диалогового окна;

·  client — ссылка, которая возвращает объект навигатора браузеру;

·  document — ссылка «только для чтения» на объект окна document;

·  event — ссылка «только для чтения» на глобальный объект event;

·  history — ссылка «только для чтения» на объект окна history;

·  location — ссылка «только для чтения» на объект окна location;

·  navigator — ссылка «только для чтения» на объект окна navigator;

·  screen — ссылка «только для чтения» на глобальный объект screen.

«Только для чтения» означает, что данное свойство изменять нельзя.

Свойство parent позволяет обратиться к объекту, находящемуся в иерархии на одну ступень выше, например к окну, содержащему коллекцию фреймов, в которой находится наш фрейм. Для перемещения на две ступени вверх нужно писать parent. parent и т. д.:

parent. window. frames(0)

parent. parent. window. frames(0)

Чтобы обратиться к самому главному окну, т. е. к окну браузера, следует использовать свойство top. Однако top не может обращаться к главному фрейму вашей системы разбиения на фреймы.

Свойство name соответствует имени фрейма, которое мы задаем и тэге <FRAMESET>.

Свойство status полезно использовать для вывода сообщений во время работы сценария, например, при отладке:

window. status="Ceйчac работает сценарий"

Методы объекта window

·  open — открывает новое окно браузера;

·  dose — закрывает текущее окно браузера;

·  showHelp — показывает окно подсказки как диалоговое;

·  showModalDialog — показывает новое окно как диалоговое;

·  alert — показывает окно предупреждения с сообщением и кнопкой ОК;

·  prompt — показывает окно приглашения с сообщением и текстовым полем;

·  confirm — показывает окно подтверждения с сообщением и кнопками ОК и Cancel (Отмена);

·  navigate — загружает другую страницу с указанным адресом;

·  blur — убирает фокус с текущей страницы; соответствующее событие — onblur;

·  focus — устанавливает страницу в фокус; соответствующее событие - onfocus;

·  scroll — разворачивает окно на заданные ширину и высоту;

·  setinterval — указывает процедуре выполняться периодически через заданное количество миллисекунд;

·  setTimeout — запускает программу через заданное количество миллисекунд после загрузки страницы;

·  clear Interval — обнуляет таймер, заданный методом setinterval;

·  clearTimeout — обнуляет таймер, заданный методом setTimeout;

·  execScript — выполняет код сценария; по умолчанию JScript.

Методы объекта window предоставляют возможности управления окнами и выполнения в них различных задач. Например, чтобы создать новое окно браузера, можно использовать метод open, а чтобы его закрыть — close. Следующий фрагмент программы создает новое окно браузера и показывает в нем документ new. htm (в общем случае можно указать URL-адрес документа):

window. open ("new. htm")

Ниже приводится текст HTML-программы, которая просит пользователя ввести адрес страницы и, если введен непустой адрес, пытается загрузить ее в браузер.

<SCRIPT>
window. alert ( "Вы хотите перейти к другой странице!");
Adress=window. prompt ("Введите адрес страницы","");
if (Adress!= null)
{
window. status = "HoBHft адрес: "i-Adress;
window. navigate (Adress) ;
}
</SCRIPT>

Метод scroll позволяет развернуть страницу в заданных пределах. Например, чтобы задать ширину в 300 и высоту в 200 пикселов, надо написать:

window. scroll(300,200)

В ряде случаев может понадобиться, чтобы какая-то процедура была выполнена с некоторой временной задержкой. С этой целью можно применить метод setTimeout (), создающий таймер. Например, следующая строка программы создает таймер, который будет работать 10с (10000 мс) и затем запустит некоторую функцию Myfunc ():

TimeID=window. setTimeout("Myfunc()",10000)

Если потребуется перезапустить таймер, чтобы повторить процесс, то можно применить метод setlnterval. Он работает так же, как и setTimeout, но с той разницей, что вызывается периодически через заданное количество миллисекунд. Например, функция Myfunc() будет периодически вызываться через каждые 5с:

TimeID=window. setlnterval("Myfunс()",5000)

Метод setinterval уже был использован в примере создания движущейся картинки.

События объекта window

·  onblur — выход окна из фокуса;

·  onfocus — окно становится активным;

·  onhelp — нажатие пользователем клавиш <F1>;

·  onresize — изменение пользователем размеров окна;

·  onscroli — прокрутка окна пользователем;

·  onerror — ошибка при передаче;

·  onbeforeunload — перед выгрузкой страницы, что позволяет сохранить данные;

·  onload — страница полностью загружена;

·  onunioad — непосредственно перед выгрузкой страницы.

Среди перечисленных выше событий три происходят в результате действий пользователя. Если открыто несколько окон браузера, пользователь может переключаться между ними, переводя фокус с одного окна на другое. Эти действия инициируют события onblur и onfocus. Заметим, что эти же события можно вызвать программным способом, используя методы blur и focus. Если происходит ошибка при загрузке страницы или ее элемента, то инициируется событие onerror. Мы можем использовать это событие в программе, чтобы, например, попытаться еще раз загрузить страницу или как-то изменить дальнейшие действия. Вот пример:

<SCRIPT>
function window. onerror ()
{
alert("Произошла ошибка! Попробуйте еще раз")
}
</SCRIPT>

Событие onload происходит, когда в окно загружается страница; событие onbeforunload — перед тем как страница покинет окно; событие onunload — когда страница выгружена или перед загрузкой новой страницы, или перед закрытием браузера. Например:

<SCRIPT>
function window. onunload ()
{
alert("Страница выгружается!")
}
</SCRIPT

Объект window имеет несколько дочерних объектов, которые доступны с его помощью: document, history, navigator, location, event и screen.

Объект document

Объект document является центральным в иерархической объектной модели и представляет всю информацию о документе HTML с помощью коллекций и свойств. Он предоставляет множество методов и событий для работы с документами.

Таблица. Свойства объекта document

Свойство	Атрибут	Назначение
activeElement		Идентифицирует активный элемент
alinkColor	ALINK	Задает цвет активных ссылок на странице
bgColor	BGCOLOR	Определяет цвет фона элемента
body		Ссылка только для чтения на неявный основной объект документа, определенный в тэге <BODY>
cookie		Строка пароля для элементов cookie браузера
domain		Устанавливает или возвращает домен документа для его защиты или идентификации
fgColor	TEXT	Устанавливает цвет текста переднего плана
lastModified		Дата последнего изменения страницы, доступна как строка
linkColor	LINK	Цвет еще не посещенных гиперссылок на странице
location		Полный URL-адрес документа
parentWindow		Возвращает родительское окно для документа
readyState		Определяет текущее состояние загружаемого объекта
referer		URL-адрес страницы, которая вызвала текущую
selection		Ссылка «только для чтения» на дочерний для document объект selection
fitle	TITLE	Определяет справочную информацию для элемента, используемую при загрузке или во всплывающей подсказке
url	URL	URL-адрес документа клиента или в тэге <МЕТА>
vlinkColor	VLINK	Цвет посещенных ссылок на странице

Коллекции объекта document

·  аll — коллекция всех тэгов и элементов в основной части документа;

·  anchors — коллекция всех «якорей» (закладок) в документе;

·  applets — коллекция всех объектов в документе, включая встроенные элементы управления, графические элементы, апплеты, внедренные и другие объекты;

·  embeds — коллекция всех внедренных объектов в документе;

·  forms — коллекция всех форм на странице;

·  frames — коллекция всех фреймов, определенных в тэге <FRAMESET>;

·  images — коллекция всех графических элементов (картинок) на странице;

·  links — коллекция всех ссылок и блоков <AREA> на странице;

·  plugins — еще одно название для коллекции внедренных объектов документа;

·  scripts — коллекция всех разделов <SCRIPT> на странице;

·  stylesheets — коллекция всех конкретных свойств стиля, определенных в документе.

Методы объекта document

·  clear — очищает выделенный участок;

·  close — закрывает текущее окно браузера;

·  createEiement — создает экземпляр элемента для выделенного тэга;

·  elementFromPoint — возвращает элемент с заданными координатами;

·  execcommand — выполняет команду (операцию) над выделением или областью;

·  open — открывает документ как поток для обработки результатов применения методов write и writeln;

·  queryCommandEnabled — сообщает, доступна ли данная команда;

·  queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус;

·  queryCommandstate — возвращает текущее состояние команды;

·  querycommandsupported — сообщает, поддерживается ли данная команда;

·  queryCommandText — возвращает строку, с которой работает команда;

·  queryCommandValue — возвращает значение команды, определенное для документа или объекта TextRange;

·  write —записывает текст и код HTML в документ, находящийся в указанном окне;

·  writeln — записываеттекст и код HTML, заканчивающийся возвратом каретки.

События объекта document

·  onafterupdate — возникает при окончании передачи данных;

·  onbeforeupdate — возникает перед выгрузкой страницы;

·  onclick — происходит, когда кнопка мыши щелкнула на документе;

·  ondbidick— происходит, когда пользователь делает двойной щелчок на документе;

·  ondragstart — происходит, когда пользователь начинает перетаскивание;

·  onerror — ошибка при передаче;

·  onhelp — происходит при нажатии пользователем клавиши <F1>;

·  onkeydown — возникает при нажатии клавиши;

·  onkeypress — возникает, когда пользователь нажал клавишу и удерживает ее в нажатом состоянии

·  onkeyup — возникает, когда пользователь отпускает клавишу;

·  onload — возникает при полной загрузке элемента;

·  onmousedown — происходит, когда пользователь нажимает кнопку мыши;

·  omousemove — происходит, когда пользователь перемещает мышь;

·  onmouseout — происходит, когда указатель мыши выходит с элемента;

·  onmouseover — происходит, когда указатель мыши впервые входит на элемент;

·  onmouseup — происходит, когда пользователь отпускает кнопку мыши;

·  onreadystatechange — возникает при изменении свойства readystate;

·  onseiectstart — происходит, когда пользователь в первый раз запускает выделенную часть документа.

Объект history

Объект history содержит информацию об адресах, которые браузер посетил во время текущего сеанса. Мы можем передвигаться по этому списку с помощью сценария, загружая страницы, которые он содержит. Объект history имеет только одно свойство и три метода.

Свойство объекта history

length — количество элементов в списке History браузера.

Методы объекта history

·  back — загружает предыдущую страницу из списка;

·  ffard — загружает следующую страницу из списка;

·  go (n) — загружает страницу с номером n из списка.

В следующем примере сначала загружается первая страница, а затем пятая страница, причем предварительно проверяется, существует ли она.