Элементы языка JavaScript

Элементы языка JavaScript

JavaScript - это объектно-ориентированный язык, который хотя и имеет похожее название, не имеет непосредственного отношения к языку Java. Исходные тексты программ на языке JavaScript, как это уже отмечалось в первой части книги, включаются непосредственно в HTML-документы и интерпретируются браузером на компьютере клиента.

Напомним (см. шестую главу первой части книги), что существуют два способа включения программ на языке JavaScript, называемых часто скриптами, в гипертекстовый документ. При первом из них текст программы размещается непосредственно в самом HTML-файле с помощью тега script:

<script language="JavaScript">
<!--
  ... здесь располагается код программы ...
//-->
</script>

Второй способ вполне аналогичен включению в гипертекстовые документы ссылок на аплеты:

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

При этом предполагается, что текст программы размещен в отдельном файле с именем file.js.

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

Напомним, что происходит, когда пользователь сети интернет открывает гипертекстовый документ с помощью браузера:

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

Объектами в указанной модели являются элементы рабочей области браузера и теги языка HTML, которые провязаны в иерархическую структуру, называемую объектной моделью браузера:

window - корневой объект;
- self, window, parent, top - объекты окон;
- navigator - объект, предоставляющий доступ к характеристикам браузера;
  - plugins[] - массив объектов Plugin;
  - mimeTypes[] - массив объектов MimeType;
- frames[] - массив объектов фреймовой структуры;
- location - объект, содержащий текущий URL;
- history - объект, дающий доступ к истории посещенных ссылок;
- document - объект, содержащий документ целиком;
  - forms[] - массив форм;
    - elements[] - массив объектов форм HTML (Button, Checkbox, ...)
  - anchors[] - массив якорей;
  - links[] - массив ссылок;
  - images[] - массив изображений;
  - applets[] - массив аплетов;
  - embeds[] - массив встроенных объектов;
  - scripts[] - массив блоков <script></script>
  - stylesheets[] - массив объектов с индивидуальными стилями.

Используя язык JavaScript, можно манипулировать как характеристиками браузера, так и визуализируемым в его окне документом. При этом программы на языке JavaScript в значительной степени управляются событиями, примерами которых являются нажатие кнопки или просто перемещение мыши. Каждое событие имеет свой собственный обработчик, которому соответствует определенный объект языка. Вот список наиболее часто используемых событий и обработчиков.

Событие Объекты Момент
возникновения Обработчик

click button, radio button, checkboxes, submit button, reset button, links Пользователь "кликает" элемент формы или ссылку onClick

load body Страница загружается в браузер onLoad

mouseover links Пользователь проводит мышь над элементом onMouseover

mouseout links Пользователь убирает мышь с элемента.
Обычно используется в паре с mouseover onMouseout

unload body Пользователь переходит к другой странице onUnload

Событие	Объекты	Момент возникновения	Обработчик
click	button, radio button, checkboxes, submit button, reset button, links	Пользователь "кликает" элемент формы или ссылку	onClick
load	`body`	Страница загружается в браузер	onLoad
mouseover	links	Пользователь проводит мышь над элементом	onMouseover
mouseout	links	Пользователь убирает мышь с элемента. Обычно используется в паре с `mouseover`	onMouseout
unload	body	Пользователь переходит к другой странице	onUnload

Пример
Для того чтобы пользователь при переходе по ссылке из нашего документа на сайт www.site.com увидел некоторое сообщение, разместим в документе следующие строки.

<a href="http://www.site.com/"
onClick="window.alert('Goodbye!')">интересный сайт</a>