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

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

2

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

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

57 слайдов

3

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

57 слайдов

4

Объектная модель (коллекции объекта document)

57 слайдов

5

Объект window

Находится в вершине иерархии и является контейнером для других объектов
Представляет текущее окно браузера

57 слайдов

6

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

status
document
event
history
location
navigator
screen
…

57 слайдов

7

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

open() – открытие нового окнаnew=window.open(URL,name,features,replace)
URL – адрес загружаемого документа
name – имя окна
features – характеристики окна
replace – замещение в списке истории
close() – закрытие окна

57 слайдов

8

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

features
fullscreen (0 или 1)
toolbar (0 или 1)
…
resizable (0 или 1)
width (размер в пикселах)
heigth (размер в пикселах)
top (координата в пикселах)
left (координата в пикселах)

57 слайдов

9

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

newwin=window.open('',null,'height=100,width=300,toolbar=1,status=1')
newwin.close()
window.close()

57 слайдов

10

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

focus() – окно получает фокус
blur() – окно теряет фокус
wnd1=window.open()wnd2=window.open()wnd1.focus()wnd1.blur()

57 слайдов

11

Таймеры

setTimeout() – создает таймер, выполняющий указанные действия по истечению времени
clearTimeout() – сбрасывает таймер
setInterval() – создает таймер, выполняющий указанные действия с заданным интервалом
clearInterval() – сбрасывает таймер

57 слайдов

12

Таймеры

57 слайдов

13

Таймеры

id=window.setInterval('alert("Прошла еще минута!")',60000)

57 слайдов

14

Таймеры

document.write('Окно браузера закроется через 5 секунд...
')
id=window.setTimeout('window.close()',5000)
window.clearTimeout(id)

57 слайдов

15

Текущее время в статусной строке

57 слайдов

16

Таймеры - часы

57 слайдов

17

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

print() – печать страницы

Печать

57 слайдов

18

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

57 слайдов

19

Объект navigator

Обеспечивает информацию о браузере
Свойства
appName
appVersion
appCodeName
userAgent
cookieEnabled

57 слайдов

20

Объект navigator

57 слайдов

Объект navigator

Google Chrome

57 слайдов

21

Объект navigator

Mozilla Firefox

57 слайдов

22

23

Объект navigator

if (navigator.cookieEnabled==false)alert ("Для нормальной работы включите поддержку cookie!")

57 слайдов

24

Объект history

Свойства
length – число записей в истории
Методы
back() – загружает предыдущую страницу
forward() – загружает следующую страницу
go(n) – загружает n-ю страницу

57 слайдов

25

Объект history

alert('В течение сессии Вы были на '+history.length+' страницах')





Назад
Вперед

57 слайдов

26

Объект location

Свойства
href – URL документа
protocol – имя протокола
…
Методы
reload() – перезагружает текущий документ

57 слайдов

27

Объект screen

Свойства
height – высота экрана
width – ширина экрана

57 слайдов

28

Объект event

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

57 слайдов

29

События

Концепция событий лежит в основе создания интерактивных, динамических документов
Обработчики событий задаются не внутри тега
НГТУ

57 слайдов

31

События

НГТУ

57 слайдов

32

События

57 слайдов

33

Базовые события

onBlur – при потере элементом фокуса
onChange – при изменении значения текстового поля
onClick – при нажатии кнопки мыши
onError – при ошибке загрузки
onFocus – при получении элементом фокуса
onLoad – при завершении загрузки
onMouseOver – при наведении указателя мыши
onMouseOut – при убирании указателя мыши
onReset – при нажатии кнопки Reset
onSelect – при выборе текста в текстовом поле
onSubmit – при нажатии кнопки Submit
onUnload – при выгрузке

57 слайдов

34

Объект event

Свойства
type – тип события
srcElement – источник события
srcElement.tagName – имя тега, описывающего данный элемент
keyCode – код нажатой клавиши
altKey, ctrlKey, shiftKey – булево значение, соответствующее типу нажатой клавиши
x, y – координаты события
button – число, соответствующее нажатой кнопке мыши

57 слайдов

35

Объект event

Гиперссылка

57 слайдов

36

Объект event

57 слайдов

37

Объект event

57 слайдов

38

Объект event

57 слайдов

39

Объект document

Позволяет получать детальную информацию о документе, отображаемом в окне браузера

57 слайдов

40

Объект document

Свойства
bgColor, fgColor, linkColor, alinkColor, vlinkColor – цвет различных элементов документа
cookie – cookie для документа
location – адрес документа
title – заголовок документа
…

57 слайдов

41

Цветная таблица

57 слайдов

43

Объект document

Коллекции
all – всех тегов и элементов
frames – фреймов
forms – форм
images – изображений
links – ссылок
…

57 слайдов

44

Коллекции

представляют наборы элементов HTML-документа
являются аналогами индексных массивов
позволяют обращаться к отдельным элементам по индексу или идентификатору

57 слайдов

45

Коллекции

Свойство
length – число элементов в коллекции
Методы
item() – возвращает все элементы, соответствующие указанному индексу или идентификатору
tags() – возвращает коллекцию, содержащую только указанные теги

57 слайдов

46

Доступ к элементам коллекции

по индексу
document.images[1]второе изображение, встречающееся в документе
по имени
document.roseизображение, определяемое тегом

57 слайдов

47

Замена изображения

57 слайдов

48

Замена изображения

Первый


Второй


Третий

57 слайдов