03.osnovy_dynamic_html__2

Основы Dynamic HTML
(продолжение)
Лекция по дисциплине
«Программные средства гипермедиа»
Подготовил: Д. А. Быстров
Поддержка скритов в HTML-документах




Скрипт – это внедренная в HTML-документ
программа, написанная на интерпретируемом
алгоритмическом проблемно-ориентируемом
языке
JavaScript – разработан Netscape
JScript – его модификация Microsoft
VBScript – скриптовый язык от Microsoft на
основе Visual Basic
Внедряемые языки программирования
Универсальные языки
Процедурные языки
Объектноориентированные языки
Внедряемые языки
Проблемно-ориентированные языки
Языки запросов
Логическое
программирование
Функциональные
языки
Вставка скрипта в HTML-документ


Скрипт вставляется с помощью тэга <script>
Вариант 1
–
–

<script language=“язык”>
текст_программы
</script>
язык := javasript | vbscript
Вариант 1
–
–
<script language=“язык” src=“файл”>
</script>
файл – имя файл с текстом программы
Введение в JavaScript




JavaScript – это созданный фирмой Netscape
межплатформенный объектно-ориентированный язык
скрипта (сценариев).
JavaScript – небольшой компактный язык.
JavaScript предназначен для упрощенного внедрения
в другие приложения и продукты.
Ядро JavaScript содержит набор основных объектов,
таких как Array, Date и Math, и основной набор
элементов языка, таких как операции, управляющие
структуры и операторы.
Простые типы данных





Числа, такие как 42 или 3.14159
Логические значения: true или false.
Строки, такие как "Howdy!"
null – специальное ключевое слово,
обозначающее нулевое значение ссылки
undefined – свойство верхнего уровня, значение
которого не определено
Переменные.

Переменные обьявляются с помощью
ключевого слова var или путем присвоения
значения
var x, y, z;
var hello = “Привет”;


Идентификатор состоит из букв латинского
алфавита, цифр, символов подчеркивания (_)
и знака доллара ($)
Идентификатор не должен начинаться с цифр
Преобразование типов



JavaScript – это динамически типизированный
язык
Типы данных преобразуются автоматически
При наличии операции "+" числа преобразуются в
строки
x = "The answer is " + 42;
y = 42 + " is the answer";

// возвращает "The answer is 42"
// возвращает "42 is the answer"
В выражениях, с использованием других
операций, числа не преобразуется в строки
x = "37" – 7; // возвращает 30
y = "49" / 7; // возвращает 7
Глобальные и локальные переменные
globalX = 55; // глобальная переменная
function funcExample()
{
var localX = 15; // локальная переменная
globalX += localX;
globalY = globalX; // объявление глобальной
// переменной в теле функции
}
Выражения

Арифметические
5+5

или
"234"
Логические
x>5

4–3*7
Строковые
"Fred"

или
или
Объекты
str==“hello”
Арифметические операции




сложение (+)
вычитание (-)
умножение (*)
деление (/).
Операция присваивания

Операция присвоения присваивает левому
операнду значение на базе правого операнда
x=y=z=0
Функции. Объявление и вызов

В своей простейшей форме функция представляет
собой часть программного кода, который в любое
время может быть вызван по его имени.
глобальная
переменная
локальная
переменная
имя функции
var globalVar = 0;
function factorial( n) {
if ((n == 0) || (n == 1))
return 1;
else
return n * factorial( n - 1);
}
function factorial2( n) {
var m = 1;
for (var i=0; i<n; i++)
m=m * I;
}
список аргументов
Объекты. Методы. Свойства

JavaScript не является объектноориентированным языком, подобным Java или
C++, поскольку в нем не реализовано понятие
класса. И хотя в JavaScript отсутствует
наследование на основе классов, тем не
менее, имеется возможность наследования на
базе прототипов. В силу этого обстоятельства
JavaScript попадает в категорию языков
программирования, основанных на объектах.
Объекты.

Объект – это структура, имеющая свойства
Car
make : "Ford"
model : "Mustang"
year : 1969

Car = {
make : "Ford ",
model : "Mustang",
year : 1969
}
Функции, ассоциированные с объектом,
называются методами объекта.
Car = { make : "Ford ", model : "Mustang", year : 1969 }
Car.drive = function() {
….
}
Свойства


Свойства объекта описывают характеристики
и особенности конкретного объекта.
Доступ к свойствам и методам объекта
осуществляется с помощью точечной или
скобочную формы записи.
имяОбъекта."имяСвойства"
имяОбъекта["имяСвойства"]
Методы



Под методом понимается услуга, которую
данный объект предлагает другим объектам.
Методы подразделяются на следующие
четыре категории:
Модификатор (modifier), селектор (selector),
конструктор (constructor).
имяОбъекта.имяФункции(агрументы)
имяОбъекта["имяФункции"](агрументы);
Объект String

Объект String является оболочкой вокруг
примитивного типа данных string.
s1 = "foo"; //создаётся строковое литеральное значение
s2 = new String("foo"); //создаётся String-объект
Объекты Number

Объект Number содержит свойства для работы
с числовыми константами, такими как
максимальное значение, not-a-number и
infinity/бесконечность.
biggestNum = Number.MAX_VALUE;
smallestNum = Number.MIN_VALUE;
infiniteNum = Number.POSITIVE_INFINITY;
negInfiniteNum = Number.NEGATIVE_INFINITY;
notANum = Number.NaN;
Объекты Boolean.

Объект Boolean является оболочкой вокруг
примитивного типа данных Boolean. Для
создания Boolean-объекта используйте
следующий синтаксис:
booleanObjectName = new Boolean( value)
JavaScript
if (…) {
…
}
while (…) {
…
}
if (…) {
…
} else {
…
}
for (var I = 0; I < n; I++) {
…
}
function имя( аргументы) {
…
}
Массивы. Объект Array.

объект Array создается одним из следующих
способов:
arrayObject = new Array(element0, element1, ..., elementN);
arrayObject = new Array(arrayLength);

Индексы элементов начинаются с нуля (0), но
размер массива (например, myArray.length)
отражает точное количество элементов в
массиве.
Глобальный объект Global


Глобальный объект Global – это контекст выполнения
программы
При инициализации объекта Global устанавливаются
следующие свойства:
–
–


Date – объект доступа к текущей дате и времени;
Math – объект доступа к математическим функциям.
Свойства и методы объекта Global являются
доступными из любой части JavaScript-программы.
Глобальные переменные и функции в JavaScriptпрограммы на самом деле являются свойствами и
методами объекта Global.
Функция как объект. Объект Function.



В JavaScript функции тоже являются
объектами.
Создания функции является создание объекта
Function.
Объект Function обладает всеми свойствами,
присущие другим объектам JavaScript
var onClickFunc = function() {
this.image.visible = true;
}
onClickFunc();
Объект Object. Создание собственных
объектов




JavaScript разработан с использованием простой
объектно-ориентированной парадигмы.
Объект - это конструкция со свойствами, которые
являются переменными JavaScript или другими
объектами.
Объект также может иметь ассоциированные с ним
функции, которые известны как методы объекта.
Все объекты JavaScript унаследованы от объекта
Object.
Объект Object. Создание собственных
объектов



Вы можете определять свои собственные
объекты. Создание вашего собственного
объекта требует двух шагов:
Определить тип объекта, написанной функции.
Создать образец объекта с new.
Объект Object. Создание собственных
объектов
var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;
Объекты. Классы. Прототипы


Иерархия классов (С++, Java)
Прототипы объектов (JavaScript)
–
Шаблон, на основе которого создается объект
Эмуляция наследования
// Базовый объект представление химической формулы
function CFormulaBase() {}
CFormulaBase.prototype.left = "";
CFormulaBase.prototype.type = null;
CFormulaBase.prototype.value = null;
CFormulaBase.prototype.oExpression = null;
CFormulaBase.prototype.Create = function( node) {
…
}
// Объект представление химической формулы
function CFormula() {}
CFormula.prototype = new CFormulaBase();
CFormula.prototype.CFormulaBase_Create = CFormulaBase.prototype.Create;
CFormula.prototype.Create = function( node) {
this.CFormulaBase_Create( node);
…
}
Объектная модель


Каждый тэг – это объект
Объект характеризуется:
–
–
–


атрибутами – задают параметры объекта
методами – задают его функциональность
событиями – генерируются в процессе его работы
Коллекция объектов – это объект специального
типа, обеспечивающий простой механизм
хранения и доступа сразу ко многим объектам
Каждый контейнер имеет коллекцию из
входящих в него объектов
Объектная модель DHTML
Объект window





document – объект загруженного документа
event – объект, описывающее последнее
событие
location – информация о текущем URL
alert – выдает сообщение
navigate – загружает новую страницу
Объект document

all – коллекция всех элементов в документе
body – объект элемента <body>
title – заголовок документа

write – вставить текст в документ


События



Каждый объект может сгенерировать событие
Описание последнего порожденного события
находится в объекте window.event
События порождаются в результате действий
пользователя или работы броузера
Синтаксис обработчиков событий



<тег событие = "обработчик" ... > - все платформы
объект.событие = обработчик - Java Script
объект.событие = GetRef("обработчик") - Visual Basic
Основные события
















onclick
ondblclick
onmousedown
onmouseup
onmouseenter
onmouseleave
onmouseover
onkeydown
onkeypress
onkeyup
onresize
onresizeend
onresizestart
onscroll
onselectstart
oncontextmenu