Урок № 45
Тема: Язык сценариев JavaScript. ООП
Языки сценариев позволяют включать в web-страницы программный код, который задаст
поведение web-страницы в браузере при работе с ними пользователей. Существуют разные языки
сценариев, но наиболее распространенным является язык JavaScript. JavaScript – это
интерпретируемый
язык
программирования,
стандартизированный
международной
организацией ЕСМА в спецификации ЕСМА-262.
Возможны 3 варианта встраивания кода JavaScript в web-страницы:
1. Расположение внутри страницы. Для добавления JavaScript-кода на страницу можно
использовать тэги <script></script>. Например:
<script type="text/javascript"> alert('Hello, World!'); </script>
2. Расположение внутри тэга. Спецификация HTML описывает набор атрибутов,
используемых для задания обработчиков событий. Пример использования:
<а href='delete.php" onclick-"return confirm ("Вы уверены?');">Удалить</а>
3. Вынесение в отдельный файл. Можно сохранить сценарий в отдельном файле, а потом
подключить его с помощью конструкции
<script type="text/javascript" src="URL_файла_co_cueHapMeM"></script>
Объекты являются
главным
типом
данных
в
JavaScript.
Объекты
–
это
набор свойств и методов. Для объявления переменных можно использовать тип Object. В
сценариях JavaScript используются следующие виды объектов:
Встроенные объекты, представляющие различные типы данных, свойства, методы,
присущие самому языку JavaScript, независимо от содержимого HTML-страницы,
например. Array, String, Date, Number, Function, Boolean, Math.
Объекты элементов документа, входящие в модель DOM, т. е. соответствующие
содержанию и поведению web-страницы, обрабатываемой браузером. Они создаются
браузером при грамматическом разборе (парсинге) HTML-страницы. Примеры: window,
document, location, navigator и т. п.
Пользовательские объекты, которые создаются программистом в процессе создания
сценария с использованием конструкторов типа объектов (класса).
Для работы с элементами web-страницы на клиентской стороне используется объектная модель
документа (Document Object Model, DOM). Она позволяет реализовать обработку содержания
web-страницы с помощью JavaScript.
Смысл DOM-модели состоит в том, что браузер после получения HTML-документа создает в
оперативной памяти для каждого HTML- элемента соответствующий ему объект, который
обладает своими свойствами, методами и событиями. С помощью языка JavaScript можно
получить ссылку на любой объект и выполнить с ним различные действия. Основным
назначением DOM-модели является возможность изменения HTML-страницы (и ее отображения
на экране) в сценариях JavaScript.
Связи между объектами различных уровней, показанные на рис. 1, означают, что объект верхнего
уровня содержит ссылку на объект нижнего уровня. Так, например, между объектами Window и
Document есть связь. Это означает, что объект Window имеет свойство с именем document,
содержащее ссылку на объект типа Document.
1
Рис. 1 - Иерархия объектов web-страницы
Основным объектом для работы с DOM-моделью является глобальная переменная document,
которая ссылается на объект Document, описывающий HTML-документ, отображаемый в окне
браузера.
Для хранения произвольного количества ссылок на объекты, расположенные на web-странице,
используются массивы. Поэтому свойства объекта Document, предназначенные для связи с
компонентами web-страницы, выглядят следующим образом:
links[ ] – массив ссылок на гипертекстовые связи, сформированные в HTML-документе с
помощью элементов <а>;
images[ ] – массив ссылок на изображения, включенные в состав web-страницы с помощью
элемента<img>;< li=""></img>;<>
forms[ ] – массив ссылок на формы, созданные посредством элементов<form>.<
li=""></form>.<>
В этих массивах ссылки на объекты Link, Image и Form содержатся в том же порядке, в котором
они встречаются в исходном тексте HTML- документа. Так, images[0] ссылается на первое
изображение в составе web- страницы, images[1] – на второе изображение и т. д.
Объект Form ссылается на интерактивные элементы, принадлежащие HTML-форме документа.
Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text,
Password, Radio, Checkbox и т. д.), для их описания существует также обобщенный тип Element.
Соответственно, ссылки на интерактивные элементы, принадлежащие форме, содержатся в
свойстве elements объекта Form.
Например, чтобы получить строку текста (value), которую пользователь ввел в первой форме
(forms[0]) с помощью 3-го элемента управления (elements[2]), можно использовать следующее
выражение: line = document.forms[0].elements[2].value;
В результате выполнения данной команды значение третьего элемента управления,
принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в
переменную line.
Вопросы для самоконтроля:
1. Назовите варианты встраивания кода JavaScript в web-страницы
2. Назовите виды объектов, которые используются в JavaScript
3. Какая модель документа используется для работы с элементами web-страницы на
клиентской стороне?
4. Что является основным объектом для работы с DOM-моделью?
2
