Объектная модель DOM javascript. Иерархия классов. - презентация

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

2 Иерархия классов

3 В сценарии JavaScript могут использоваться объекты клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web- странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window,document, location, navigator и т.п. клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web- странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window,document, location, navigator и т.п. серверные объекты, отвечающие за взаимодействие клиент- сервер. Примеры: Server, Project, Client, Fileи т.п. Серверные объекты в этом курсе рассматриваться не будут. серверные объекты, отвечающие за взаимодействие клиент- сервер. Примеры: Server, Project, Client, Fileи т.п. Серверные объекты в этом курсе рассматриваться не будут. встроенные объекты. Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array,String, Date, Number, Function, Boolean, а также встроенный объект Math. встроенные объекты. Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array,String, Date, Number, Function, Boolean, а также встроенный объект Math. пользовательские объекты. Они создаются программистом в процессе написания сценария с использованиемконструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog. Создание и использование таких объектов будет рассмотрено далее в этом курсе. пользовательские объекты. Они создаются программистом в процессе написания сценария с использованиемконструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog. Создание и использование таких объектов будет рассмотрено далее в этом курсе.

4 Объект window Класс объектов Window это самый старший класс в иерархии объектов JavaScript. Объект window, относящийся к текущему окну (т.е. в котором выполняется скрипт), является объектом класса Window. Класс объектов Frame содержится в классе Window, т.е. каждый фрейм это тоже объект классаWindow. Класс объектов Window это самый старший класс в иерархии объектов JavaScript. Объект window, относящийся к текущему окну (т.е. в котором выполняется скрипт), является объектом класса Window. Класс объектов Frame содержится в классе Window, т.е. каждый фрейм это тоже объект классаWindow.

5 Свойства, методы и события объекта window

6 Параметры метода window.open()

7 Пример создания окна

8 Контейнер FORM Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Поэтому в программах на JavaScript к ним обращаются по имени: Поэтому в программах на JavaScript к ним обращаются по имени: window.document.f_name.i_name.value="Текстовое поле"; window.document.f_name.i_name.value="Текстовое поле"; Того же эффекта можно достичь, используя массив форм загруженного документа: Того же эффекта можно достичь, используя массив форм загруженного документа: window.document.forms[0].elements[0].value="Текстовое поле"; window.document.forms[0].elements[0].value="Текстовое поле";

9 объект Form

10 Объект Text

11 Защита поля ввода Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus: Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus: В этом примере значение поля ввода можно изменить, только нажав на кнопки Change и Reset. При попытке установить курсор в поле ввода он немедленно оттуда убирается, и таким образом, значение поля не может быть изменено пользователем. В этом примере значение поля ввода можно изменить, только нажав на кнопки Change и Reset. При попытке установить курсор в поле ввода он немедленно оттуда убирается, и таким образом, значение поля не может быть изменено пользователем.

12 Кнопки Кнопка вводится в форму главным образом для того, чтобы можно было обработать событие click: Кнопка вводится в форму главным образом для того, чтобы можно было обработать событие click:

13