Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
12 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
194.00 kB
Просмотров:
70
Скачиваний:
1
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![УПРАВЛЕНИЕ ОБЪЕКТАМИ браузера](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img0.jpg)
Содержание слайда: УПРАВЛЕНИЕ ОБЪЕКТАМИ
браузера и WEB-страницы
на основе языка JavaScript
№2 слайд![Типы данных JavaSript](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img1.jpg)
Содержание слайда: Типы данных 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)
№3 слайд![Свойства и методы объекта](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img2.jpg)
Содержание слайда: Свойства и методы объекта window
Window – объект высшего уровня, представляющий свойства и методы окна браузера
Объекты window:
document – Web-страница
frames – окна фреймов
history – список открытых ранее в браузере окон
location – URL-адрес текущего документа
navigator – содержит сведения о браузере
Свойства window:
parent – ссылка на родительское окно
top – ссылка на главное окно
document – ссылка на документ (Web-страницу)
name – имя окна
status – текст в строке состояния
№4 слайд![Свойства и методы объекта](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img3.jpg)
Содержание слайда: Свойства и методы объекта window
Методы window:
alert() – выводит окно сообщения;
confirm() – задает вопрос для ответа (да/нет);
prompt() – принимает от пользователя текстовое значение;
open() – создает новое окно;
close() – закрывает окно;
navigate – загружает в окно страницу с указанным адресом
scrollBy(x,y) – смещает окно на указанные в параметрах число пикселей
scrollTo(x,y) – смещает окно в указанную позицию на экране
resizeBy(w,h) – изменяет размеры окна на указанные в параметрах число пикселей
resizeTo(w,h) – устанавливает размеры окна
setInterval(процедура, интервал) – запускает процедуру периодически через заданный интервал в миллисекундах
setTimeout(интервал) – запускает программу через заданный интервал
№5 слайд![Объектная модель Web-страницы](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img4.jpg)
Содержание слайда: Объектная модель Web-страницы
Методы (задаются функциями JavaScript):
alert() – выводит окно сообщения;
confirm() – задает вопрос для ответа (да/нет);
prompt() – принимает от пользователя текстовое значение;
open() – создает новое окно;
close() – закрывает окно;
focus() – передает фокус (активизацию элемента).
Обработчики событий JavaScript:
onLoad – загрузка документа (Web-страницы)
onChange – изменение значения свойств элемента
onClick – щелчок мышью
onSelect – выделение фрагмента документа
onSubmit – передача сообщения на сервер по сети
onUnload – выгрузка документа (закрытие окна)
№6 слайд![Свойства и методы объекта](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img5.jpg)
Содержание слайда: Свойства и методы объекта document
Свойства document:
bgColor – цвет фона документа
documentElement – ссылка на корневой объект в иерархии
fgColor – устанавливает цвет текста
selection – ссылка на выделенный в документе текст
title – определяет название документа в окне браузера
Методы document:
clear – очищает выделенный участок документа
open() – окрывает документ для обработки
close() – заканчивает загрузку документа
getElementById () – возвращает коллекцию документов со значением атрибута id
getElementByName () – возвращает коллекцию документов со значением атрибута name
write() – записывает текст и код HTML в документ
№7 слайд![Коллекции объекта document](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img6.jpg)
Содержание слайда: Коллекции объекта
document
all – все теги и элементы документа
anchors – якори (закладки) в документе
embeds – внедренные в документ объекты (звук, видео,…)
forms – формы на странице
frames – фреймы, определенные в теге <frameset>
images – рисунки на странице
links – ссылки
styleSheets – свойства стиля CSS, определенных в документе
№8 слайд![Свойства и методы объекта](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img7.jpg)
Содержание слайда: Свойства и методы объекта location
Объект location содержит информацию об URL-адресе текущей страницы
Свойства объекта location:
href – полный URL-адрес в виде строки
location.href=«http://www.bstu.unibel.by»
pathname – путь к объекту или файлу
Методы объекта location:
reload() – обновляет текущую страницу
replace() – загружает страницу с указанным URL-адресом и заменяет URL-адрес текущей страницы
№9 слайд![Свойства объекта screen](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img8.jpg)
Содержание слайда: Свойства объекта
screen
availWidth – возвращает ширину экрана пользователя (в пикселях) за вычетом элементов оформления окна, задаваемых операционной системой (например, панели инструментов Windows):
screen.availWidth
availHeight – возвращает высоту экрана пользователя (в пикселях) за вычетом элементов оформления окна, задаваемых операционной системой
width – возвращает ширину экрана пользователя (в пикселях)
height – возвращает высоту экрана пользователя (в пикселях)
№10 слайд![Доступ к объектам браузера и](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img9.jpg)
Содержание слайда: Доступ к объектам
браузера и документа
Синтаксис доступа к объектам:
объект1.объект2….объектN.свойство
или
объект1.объект2….объектN.метод
Доступ по номеру в коллекции:
document.links[0]
Доступ по имени (name=«имя»):
document.images[«рис1»]
Доступ по идентификатору элемента (id=«значение»):
document.images[«рис2»]
или
document.all[«рис2»]
или
document.getElementById(«рис2»)
№11 слайд![Обработка событий Событие](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img10.jpg)
Содержание слайда: Обработка событий
Событие возникает в результате действий пользователя или компьютера (например, загрузка документа), происходит при каких-либо обстоятельствах (в контексте) и может быть как-то обработано браузером:
событие – контекст – обработчик
Основные события:
onclick – щелчок мышью
onmousedown – щелчок мышью
onmouseover – надвижение курсора мыши
onmouseout – уход курсора мыши
onload – загрузка страницы
onunload – закрытие страницы
onfocus – активизация html-элемента
onkeypress – нажатие на клавишу клавиатуры
№12 слайд![Способы привязки обработчика](/documents_5/147f4c6b9b97ae213fa276bba07fece9/img11.jpg)
Содержание слайда: Способы привязки обработчика события к 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>