🗊Презентация УПРАВЛЕНИЕ ОБЪЕКТАМИ браузера и WEB-страницы на основе языка JavaScript

УПРАВЛЕНИЕ ОБЪЕКТАМИ браузера и WEB-страницы на основе языка JavaScript

Типы данных JavaSript JavaScript – язык со слабым (динамическим) контролем данных: переменная может принимать значения разных типов. 5 примитивных типов: строковый или символьный (String) – последовательность символов, заключенная в кавычки (двойные или одинарные) числовой (Number) – 3.14 ,-567, 5.7е16 логический (Boolean) – true/false пустой (Null) – null (не имеет значения) Неопределенный (Undefined) – undefined (значение не присвоено) 3 составных типа: объекты (Object) – встроенные объекты JavaScript (Date, Math,…) массивы (Array) функции (Function)

Свойства и методы объекта window Window – объект высшего уровня, представляющий свойства и методы окна браузера Объекты window: document – Web-страница frames – окна фреймов history – список открытых ранее в браузере окон location – URL-адрес текущего документа navigator – содержит сведения о браузере Свойства window: parent – ссылка на родительское окно top – ссылка на главное окно document – ссылка на документ (Web-страницу) name – имя окна status – текст в строке состояния

Свойства и методы объекта window Методы window: alert() – выводит окно сообщения; confirm() – задает вопрос для ответа (да/нет); prompt() – принимает от пользователя текстовое значение; open() – создает новое окно; close() – закрывает окно; navigate – загружает в окно страницу с указанным адресом scrollBy(x,y) – смещает окно на указанные в параметрах число пикселей scrollTo(x,y) – смещает окно в указанную позицию на экране resizeBy(w,h) – изменяет размеры окна на указанные в параметрах число пикселей resizeTo(w,h) – устанавливает размеры окна setInterval(процедура, интервал) – запускает процедуру периодически через заданный интервал в миллисекундах setTimeout(интервал) – запускает программу через заданный интервал

Объектная модель Web-страницы Методы (задаются функциями JavaScript): alert() – выводит окно сообщения; confirm() – задает вопрос для ответа (да/нет); prompt() – принимает от пользователя текстовое значение; open() – создает новое окно; close() – закрывает окно; focus() – передает фокус (активизацию элемента). Обработчики событий JavaScript: onLoad – загрузка документа (Web-страницы) onChange – изменение значения свойств элемента onClick – щелчок мышью onSelect – выделение фрагмента документа onSubmit – передача сообщения на сервер по сети onUnload – выгрузка документа (закрытие окна)

Свойства и методы объекта document Свойства document: bgColor – цвет фона документа documentElement – ссылка на корневой объект в иерархии fgColor – устанавливает цвет текста selection – ссылка на выделенный в документе текст title – определяет название документа в окне браузера Методы document: clear – очищает выделенный участок документа open() – окрывает документ для обработки close() – заканчивает загрузку документа getElementById () – возвращает коллекцию документов со значением атрибута id getElementByName () – возвращает коллекцию документов со значением атрибута name write() – записывает текст и код HTML в документ

Коллекции объекта document all – все теги и элементы документа anchors – якори (закладки) в документе embeds – внедренные в документ объекты (звук, видео,…) forms – формы на странице frames – фреймы, определенные в теге <frameset> images – рисунки на странице links – ссылки styleSheets – свойства стиля CSS, определенных в документе

Свойства и методы объекта location Объект location содержит информацию об URL-адресе текущей страницы Свойства объекта location: href – полный URL-адрес в виде строки location.href=«http://www.bstu.unibel.by» pathname – путь к объекту или файлу Методы объекта location: reload() – обновляет текущую страницу replace() – загружает страницу с указанным URL-адресом и заменяет URL-адрес текущей страницы

Свойства объекта screen availWidth – возвращает ширину экрана пользователя (в пикселях) за вычетом элементов оформления окна, задаваемых операционной системой (например, панели инструментов Windows): screen.availWidth availHeight – возвращает высоту экрана пользователя (в пикселях) за вычетом элементов оформления окна, задаваемых операционной системой width – возвращает ширину экрана пользователя (в пикселях) height – возвращает высоту экрана пользователя (в пикселях)

Доступ к объектам браузера и документа Синтаксис доступа к объектам: объект1.объект2….объектN.свойство или объект1.объект2….объектN.метод Доступ по номеру в коллекции: document.links[0] Доступ по имени (name=«имя»): document.images[«рис1»] Доступ по идентификатору элемента (id=«значение»): document.images[«рис2»] или document.all[«рис2»] или document.getElementById(«рис2»)

Обработка событий Событие возникает в результате действий пользователя или компьютера (например, загрузка документа), происходит при каких-либо обстоятельствах (в контексте) и может быть как-то обработано браузером: событие – контекст – обработчик Основные события: onclick – щелчок мышью onmousedown – щелчок мышью onmouseover – надвижение курсора мыши onmouseout – уход курсора мыши onload – загрузка страницы onunload – закрытие страницы onfocus – активизация html-элемента onkeypress – нажатие на клавишу клавиатуры

Способы привязки обработчика события к HTML-элементам Подробная информация о прошедшем событии сохраняется в глобальном объекте event до тех пор, пока не произойдет следующее событие Способы привязки В теге <тег…событие=«программный код»>: <img id=«рис1» src=«рис2.jpg» onclick=«func1()»> По схеме document.getElementById(«id-значение»).событие=функция: document.getElementById(«рис1»).onclick=func1 К одному HTML-элементу можгно привязать несколько обработчиков событий: <p onmouseover=«alert(‘Привет!’)» onclick=«alert(‘До свидания!’)» >….</p>