Слайд 1Информатика. Спецглавы
Направление: Инфокоммуникационные технологии и системы связи
2012 год
Лекция 6
                            							
							
							
						 
											
                            Слайд 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 -страницу; 
поддержка визуальных и мультимедийных эффектов при отображении страниц; 
механизмы сохранения информации на компьютере-клиенте между сессиями работы. 
                                
                            							
														
						 
											
                            Слайд 4Javascript
Создание
1996 год, Netscape
Компоненты
Ядро
DOM (Document Object Model)
BOM (Browser Object Model)
                            							
														
						 
											
                            Слайд 5Document Object Model (DOM)
DOM — это модель HTML-и XML-документов, независимая от
                                                            
                                    
платформы и языка программирования.
Каждый элемент HTML-и XML-документов представлен в DOM
                                    в виде объекта, обладающего набором свойств, соответствующих набору атрибутов элемента.
Элементы таблиц стилей представлены в виде свойств объектов DOM. 
Согласно DOM документу можно поставить в соответствие дерево объектов, каждый из которых может быть элементом, атрибутом, текстом, графическим объектом...
Узлы дерева связаны между собой отношениями предок-потомок.
Значения свойств объекта-потомка определяются на основе принципа наследования.
                                
                            							
														
						 
											
                            Слайд 6Пример объектной модели документа
Пусть наш документ имеет вид:
 
Моя домашняя
                                                            
                                    
страница 
Моя домашняя страница 
Добро пожаловать! 
 
Тогда мы можем
                                    представить его в виде следующего дерева:
                                
                            							
														
						 
											
                            Слайд 7Структура DOM
 My title
 
  My link
 
                                                            
                                    
My header
Элементы (Element), один из них - корневой
Атрибуты (Attribute)
Текстовые узлы
                                    (Text)
                                
                            							
														
						 
											
                            Слайд 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 - цвет фона
                                                            
                                    
документа, соответствует 
fgColor - цвет текста документа, соответствует 
                                    text="color">
title - название документа, определенное в теге 
body - ссылка на элементы, включенные в тег 
lastModified - дата последнего изменения документа
Методы объекта document
write(text) - вывод текста в окно браузера без перевода строки
close( ) - закрытие документа
	Пример:
document.write(document.title);
                                
                            							
														
						 
											
                            Слайд 14Размещение кода JavaScript на HTML-странице
В элементе  (помещается в элемент
                                                            
                                    
):
     
    
                                    document.write("Привет!");
     window.alert("Большой привет!");
      
В любом элементе HTML в атрибутах, отвечающих событиям (обработчики события):
     
В отдельном файле *.js, который подключается через элемент  
                                
                            							
														
						 
											
                            Слайд 15События и реакции на них
События:
события от мыши (click, dblclick, mousedown,…);
события
                                                            
                                    от клавиатуры (keypress, keydown,…);
события от элементов ввода (focus, submit, select,…);
события
                                    страницы (load, unload, error,…);
Пример:
В семестре 
       onClick="alert('Сейчас идет 13 неделя');">
  18 учебных недель..
                                 
                            							
														
						 
											
                            Слайд 16Обработчик события в виде функции
function myfn1()
{
   alert("Ты
                                                            
                                    
записался в программисты?");
}
День программиста 12 сентября!
   
                                     
                                
                            							
														
						 
											
                            Слайд 17Обработчик события в виде функции
  
  
                                                            
                                      function myfn2(obj)
     {
 
                                         obj.style.color="blue";
       obj.style.width="50%";
     }     
Ячейка 1 | 
Ячейка 2 | 
Ячейка 3 | 
Ячейка 4 | 
                                 
                            							
														
						 
											
                            Слайд 18Позиционирование объектов
position (static, absolute, relative)
top
left
right
bottom
z-index
В семестре 
                                                            
                                    
text-decoration:underline;
position:relative; top:25; left:-40">18 учебных недель.
                                    z-index:-1">