Презентация Динамическое изменение Web-страниц онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Динамическое изменение Web-страниц абсолютно бесплатно. Урок-презентация на эту тему содержит всего 18 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:18 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:201.50 kB
- Просмотров:64
- Скачиваний:1
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Информатика. Спецглавы
Направление: Инфокоммуникационные технологии и системы связи
2012 год
№2 слайд
Содержание слайда: Динамическое изменение Web-страниц
Обработка данных на стороне сервера
CGI-сценарии (Common Gateway Interface)
Скрипты PHP (Hypertext Preprocessor)
Технология JSP (JavaServer Pages, Sun Microsystems)
Скрипты Javascript (Netscape>>Oracle)
Обработка данных на стороне клиента
Скрипты Javascript (Netscape>>Oracle)
Скрипты VBScript (Microsoft)
№3 слайд
Содержание слайда: Задачи обработки данных на стороне клиента
динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;
контроль ввода данных перед отправкой запроса серверу
динамическое извлечение данных из внешних источников и включение их в Web -страницу;
поддержка визуальных и мультимедийных эффектов при отображении страниц;
механизмы сохранения информации на компьютере-клиенте между сессиями работы.
№4 слайд
Содержание слайда: Javascript
Создание
1996 год, Netscape
Компоненты
Ядро
DOM (Document Object Model)
BOM (Browser Object Model)
№5 слайд
Содержание слайда: Document Object Model (DOM)
DOM — это модель HTML-и XML-документов, независимая от платформы и языка программирования.
Каждый элемент HTML-и XML-документов представлен в DOM в виде объекта, обладающего набором свойств, соответствующих набору атрибутов элемента.
Элементы таблиц стилей представлены в виде свойств объектов DOM.
Согласно DOM документу можно поставить в соответствие дерево объектов, каждый из которых может быть элементом, атрибутом, текстом, графическим объектом...
Узлы дерева связаны между собой отношениями предок-потомок.
Значения свойств объекта-потомка определяются на основе принципа наследования.
№6 слайд
Содержание слайда: Пример объектной модели документа
Пусть наш документ имеет вид:
<HTML>
<HEAD><TITLE>Моя домашняя страница</TITLE></HEAD>
<BODY>
<H1>Моя домашняя страница</H1>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
Тогда мы можем представить его в виде следующего дерева:
№7 слайд
Содержание слайда: Структура DOM
№8 слайд
Содержание слайда: Доступ к элементам страницы
Свойства для идентификации объектов:
name - имя
id - идентификатор
№9 слайд
Содержание слайда: Объектная модель браузера (BOM)
BOM - браузеро-специфичная часть языка, являющаяся прослойкой между ядром и объектной моделью документа.
Основное предназначение объектной модели браузера - управление окнами браузера и обеспечение их взаимодействия.
Каждое из окон браузера представляется объектом window (центральным объектом BOM).
Помимо управления окнами, в рамках объектной модели браузера, браузерами обычно обеспечивается поддержка следующих сущностей:
управление адресом открытой страницы (location),
управление информацией о браузере (navigator),
управление информацией о параметрах монитора (screen),
ограниченное управление историей просмотра страниц,
поддержка работы с HTTP cookie.
№10 слайд
Содержание слайда: Язык Javascript
Назначение Javascript:
Предоставить пользователю возможность изменения элементов оформления и содержания HTML-страницы в процессе ее просмотра.
Области использования Javascript:
Динамическое создание документа с помощью сценария.
Проверка заполнения полей форм HTML до передачи на сервер.
Создание динамических HTML страниц совместно с CSS и DOM.
№11 слайд
Содержание слайда: Характеристика Javascript
Объектно-ориентированный язык разработки встраиваемых приложений,
выполняемых как на стороне клиента, так и на стороне браузера.
Интерпретируемый язык. Его интерпретатор обычно встроен в браузер.
Текст на Javascript может быть вложен в HTML-страницу
непосредственно или находиться в отдельном файле (*.js).
Похож на языки Java и C# синтаксически, но сильно отличается от них по внутреннему содержанию.
Нетипизированный язык.
№12 слайд
Содержание слайда: Объекты Javascript
window — окно браузера, имеет набор атрибутов и методов управления окном (заголовок, строка состояния, открытие, закрытие окна),
navigator - объект, представляющий браузер и его свойства
location — URL-адрес загруженного документа
screen — объект, содержащий свойства экрана (разрешение по горизонтали)
document - загруженная страница со своей структурой элементов
№13 слайд
Содержание слайда: Свойства и методы объекта document
Свойства объекта document
bgColor - цвет фона документа, соответствует <body bgcolor="color">
fgColor - цвет текста документа, соответствует <body text="color">
title - название документа, определенное в теге <title>
body - ссылка на элементы, включенные в тег <body>
lastModified - дата последнего изменения документа
Методы объекта document
write(text) - вывод текста в окно браузера без перевода строки
close( ) - закрытие документа
Пример:
document.write(document.title);
№14 слайд
Содержание слайда: Размещение кода JavaScript на HTML-странице
В элементе <SCRIPT> (помещается в элемент <HEAD>):
<SCRIPT>
document.write("Привет!");
window.alert("Большой привет!");
</SCRIPT>
В любом элементе HTML в атрибутах, отвечающих событиям (обработчики события):
<FORM><INPUT type="button" value="Кнопка"
onClick="alert('Вы нажали кнопку');"></FORM>
В отдельном файле *.js, который подключается через элемент <SCRIPT>:
<SCRIPT SRC="myscript.js"></SCRIPT>
№15 слайд
Содержание слайда: События и реакции на них
События:
события от мыши (click, dblclick, mousedown,…);
события от клавиатуры (keypress, keydown,…);
события от элементов ввода (focus, submit, select,…);
события страницы (load, unload, error,…);
Пример:
<p>В семестре
<span style="color: blue; text-decoration: underline;"
onClick="alert('Сейчас идет 13 неделя');">
18 учебных недель.</span>.
</p>
№16 слайд
Содержание слайда: Обработчик события в виде функции
<SCRIPT type="text/javascript">
function myfn1()
{
alert("Ты записался в программисты?");
}
</SCRIPT>
<P onClick="myfn1();">День программиста 12 сентября!</P>
№17 слайд
Содержание слайда: Обработчик события в виде функции
<SCRIPT type="text/javascript">
function myfn2(obj)
{
obj.style.color="blue";
obj.style.width="50%";
}
</SCRIPT>
<TABLE border name="first" onClick="myfn2(this);">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
№18 слайд
Содержание слайда: Позиционирование объектов
position (static, absolute, relative)
top
left
right
bottom
z-index
<P style="font-size:26pt">
В семестре
<SPAN style="color: blue; text-decoration:underline;
position:relative; top:25; left:-40">18 учебных недель.</SPAN>
</P>
<IMG src="150.jpg" style="position:absolute; left:180; top:15; height:120px; z-index:-1">
Скачать все slide презентации Динамическое изменение Web-страниц одним архивом:
