Структура объекта document

ОСНОВЫ СОЗДАНИЯ СЦЕНАРИЕВ

Способы создания динамических HTML-документов

HTML-документы (страницы), которые видит пользователь Интернета в окне браузера, могут храниться на веб-сервере в виде готовых к использованию файлов, или формироваться по запросу пользователя. Будем называть заранее подготовленные к просмотру страницы статическими. Страницы, формирующиеся «на лету» по запросу пользователя, назовём динамическими.

Типичным является формирование динамической страницы из информации, выбранной из базы данных по запросу пользователя. Например, пользователь просит показать курсы некоторых валют за определённый период времени. Результаты будут выданы в форме таблицы, количество строк и столбцов которой будет зависеть от запроса пользователя. Страница в этом случае формируется на веб-сервере специальной программой, имя которой и параметры для её работы содержатся в адресе (URL), передаваемом браузером. Веб-сервер идентифицирует программу по расширению имени файла и запускает её выполнение. Программа создаёт HTML-документ, который веб-сервер возвращает браузеру в качестве ответа на запрос пользователя.

Желание снизить нагрузку на сеть и на веб-сервер приводит к идее выполнять некоторые преобразования страницы прямо в браузере, например, перемещать рисунок в окне браузера. Для этого в HTML-документ встраивают небольшую программу (сценарий), выполняемую по мере необходимости браузером. Стандартным языком для написания сценариев является JavaScript. Фирма Microsoft разработала язык сценариев VBScript, не получивший широкого распространения.

Придание динамичности страницам сайтов обеспечивается совокупностью языков HTML и JavaScript. В HTML для расширения возможностей управления видом и расположением элементов на странице стали применяться каскадные таблицы стилей (Cascading Style Sheets или CSS). Браузер при открытии HTML-документа строит его объектную модель (Document Object Model или DOM), используемую как при отображении документа, так и при его изменении скриптом. Организация World Wide Web Consortium (W3C) разработала стандарты на CSS и DOM. Версия HTML 4, поддерживающая стандарты DOM и CSS, называется динамическим HTML (Dynamic HTML или DHTML ).

К сожалению, разработчики браузеров не строго придерживаются стандартов, вносят свои элементы в HTML и JavaScript. Скрипт, написанный для конкретной версии какого-либо браузера, может не выполняться даже на других версиях того же браузера, не говоря о браузерах других фирм. Программист, создающий сайт, должен предусмотреть, как будут работать на различных браузерах скрипты, входящие в состав сайта. Кроме того, он должен подумать, как будет выглядеть сайт на браузерах с установленным в целях безопасности запретом на выполнение скриптов.

Объектная модель документа

Объектная модель документа имеет иерархическую структуру. На вершине этой иерархии находится объект window . Он имеет следующие дочерние объекты:

• navigator,
• screen,
• history,
• location,
• document.

В скриптах, в основном, используется объект document, так как он целиком описывает загружаемый в браузер HTML-документ. Объекты navigator, screen и history используются для справки о свойствах браузера и компьютера пользователя. Объект location удобно использовать для загрузки страниц или фреймов.

Структура HTML-документа

HTML-документ состоит из элементов (абзацев, гиперссылок, таблиц и т. д.). Элемент обычно делится на три части: начальный тег, содержимое и конечный тег. Название элемента появляется в начальном теге (<название_элемента>) и в конечном теге (</название_элемента >). Пример элемента:

<H1> Структура HTML-документа</H1>

Начальный тег может содержать атрибуты, определяющие свойства элемента. Для некоторых элементов допускается отсутствие конечного тега (например, для тегов P, TR, TD). Некоторые типы элементов HTML-документа не имеют содержимого. Например, обрыв строки BR не имеет содержимого, его единственная задача - обозначить конец строки текста. Такие пустые элементы никогда не имеют конечного тега.

Элементы HTML-документа могут входить друг в друга, образуя сложную иерархическую структуру.

Структура объекта document

Объект document ставится в соответствие всему HTML-документу и создаётся браузером при его загрузке. Всем элементам HTML-документа ставятся в соответствие объекты, входящие в состав объекта document, т. е. структура объекта document повторяет структуру порождающего его HTML-документа. Атрибутам элемента соответствуют свойства объекта, имеющие те же названия, что и атрибуты.

В HTML-документе может быть несколько элементов с одинаковым названием, например, контейнеров DIV . Поэтому каждый элемент имеет атрибут ID – идентификатор элемента. Объекту, соответствующему элементу, автоматически присваивается ID этого элемента. Кроме того, объекты в модели нумеруются по порядку их появления в модели. Использовать номера объектов нужно осторожно, так как при внесении иэменений в документ количество и порядок объектов могут меняться.

Для идентификации некоторых элементов (FORM, IMG) кроме атрибута ID используется атрибут NAME. Области действия ID и NAME совпадают лишь частично. Рекомендуется в случае одновременного применения обоих атрибутов присваивать им одинаковые значения.

События

Изменения в динамических страницах могут происходить либо циклически, либо в ответ на действия пользователя. Например, чтобы обратить внимание на важную информацию, можно с помощью скрипта периодически менять цвет соответствующей области экрана. Примером реакции на действия пользователя служит увеличение размера рисунка после щелчка по нему мышкой. Во всех случаях сигналом к изменениям служит какое-то событие. В динамическом HTML события включены в число атрибутов элементов. Следующие события используются большинством элементов:

• onclick возникает, когда указательное устройство щёлкает на элементе;
• ondblclick возникает, когда указательное устройство дважды щёлкает на элементе;
• onmousedown возникает, когда кнопка указательного устройства "нажала" на элемент;
• onmouseup возникает, когда кнопка указательного устройства отпущена над элементом;
• onmouseover возникает, когда указательное устройство проходит над элементом;
• onmousemove возникает, когда указательное устройство перемещается в тот момент, когда находится над элементом;
• onmouseout возникает, когда указательное устройство убирается с элемента;
• onkeypress возникает, когда клавиша нажата и отпущена над элементом;
• onkeydown возникает, когда клавиша нажата над элементом.
• onkeyup возникает, когда клавиша отпущена над элементом.

Указательным устройством, как правило, служит мышка.

Рассмотрим пример простейшей динамической страницы. Допустим, что в браузере после загрузки страницы видно только одно слово Письмо. При щелчке по этому слову всплывает маленькое окошко с сообщением Это заголовок. HTML-код этой страницы:

<html> <H1 onclick= "window.alert('Это заголовок')">Письмо</h1> </html>

При загрузке этого документа браузер добавит в объектную модель объекты HEAD и BODY. Вставленный в заголовок H1 атрибут onclickвызовет при щелчке по слову Письмо метод alert, в результате выполнения которого появится окно с сообщением. Так как объект windowнаходится в вершине объектной модели документа, то его можно не указывать. В рассматриваемом примере весь скрипт поместился внутри тега. Для размещения сложных скриптов служат специальные средства языков DHTML и JavaScript.

Основы JavaScript

Переменные

Имя (идентификатор) переменной может состоять из букв, цифр и знаков $ и _ (подчёркивание). Имя переменной не должно начинаться с цифры. В имени различаются строчные (маленькие) и прописные (большие) буквы. Например, Alfa, alfa и aLFa – разные переменные. В качестве имён переменных нельзя использовать ключевые слова языка JavaScript. Переменные могут иметь следующие типы:

• целые числа (integer);
• числа с плавающей запятой (float);
• строки (string);
• логические (booleans);
• объекты.

В JavaScript тип переменной явно не объявляется. Создают переменную чаще всего, присваивая ей начальное значение:

x = 2; // или var a = 2

В приведённом примере две косые черты (//) указывают на комментарий. Начало и конец многострочного комментария обозначаются символами /* и */. После оператора можно ставить точку с запятой. Если в одной строке записано несколько операторов, то точка с запятой отделяет операторы друг от друга. Можно создать переменную без присвоения ей начального значения, например,

Var y;

Ключевое слово var используется для определения области видимости переменных. Переменная, созданная в функции с использованием var, видна только в этой функции и называется локальной. Во всех остальных случаях переменная является глобальной и видна во всей программе, включая функции. Пример:

<HTML>Скрипт
<SCRIPT> var x = 2 //глобальная переменная
y = 3*x //глобальная переменная
z= kvadr(y)
alert( "z="+z +" x ="+x)// z=36 x=2
function kvadr(a)
{ var x = a*a //x - локальная переменная, действующая

//только в kvadr(a)

return x //x=36
}
</script>
</html>

Тип переменной определяется (почти так же как в языках Perl и PHP) из контекста программы. В приведённом примере использованы операторы присваивания в стиле языка С (подробнее в разделе Операторы).

1. a = 2; // целое
2. a + = 1.5 // 2 + 1.5 = 3.5 - число с плавающей запятой
3. a * ="4" //3.5*4=14
4. a + = "2" //конкатенация строковых величин "14" и "2".

//Результат "142"

5. b = 53; //целое число
6. c = " года. ";
7. d = b + c //строка "53 года. "

В строках 4 и 7 знак + использован для обозначения операции конкатенации (слияния) строковых переменных, а не сложения двух чисел. Одинаковое обозначение двух разных операций приводит к необходимости использовать функции явного преобразования переменной из строкового типа в тип числа с плавающей запятой (функция parseFloat()) или в тип целого числа (функция parseInt()). Пример использования функций parseFloat() и parseInt():

1. a ="3.7";
2. b = "6.1";c = a * b // результат 3.7 * 6.1 = 22.57
3. c=a+b; // результат "3.76.1"
4. d=parseFloat(a)+parseFloat(b); // результат 3.7 + 6.1=9.8
5. e=parseInt(a)+parseInt(b); // результат 3 + 6 = 9

В строке 3 переменные a и b перемножаются и поэтому автоматически преобразуются в числа с плавающей запятой. В строке 4 выполняется операции конкатенации, так как в строках 1 и 2 переменным a и b были присвоены строковые значения. В строках 5 и 6 явно задаётся преобразование переменных a и b в числовой тип, поэтому выполняется операция сложения.

Операторы

В JavaScript, как и в большинстве языков программирования, используются традиционные математические операторы и операторы, применяемые только в программировании. Математические операторы делятся на три группы: арифметические, операторы сравнения и логические. Среди арифметических операторов (табл. 1) в JavaScript отсутствует возведение в степень.

Таблица 1. Арифметические операторы
Название	Обозначение	Пример
Сложение	+	a + b
Вычитание	-	a - b
Умножение	*	a * b
Деление	./	a / b
Деление по модулю	%	a % b
Увеличение на 1 (инкремент)	++	a++
Уменьшение на 1 (декремент)	--	a--

Возведение числа A в степень N выполняется так:

x = Math.pow(A,N),
где pow(A,N) – метод объекта Math.

Операторы сравнения (табл. 2) применяются к числовым, строковым и логическим выражениям.

Таблица 2. Операторы сравнения
Название	Обозначение	Пример
Равно	==	a == b
Не равно	!=	a != b
Больше	>	a > b
Меньше	<	a < b
Больше или равно	>=	a >= b
Меньше или равно	<=	a <= b

В JavaScript используются три логических оператора: И, ИЛИ и НЕ, имеющие обозначения &&, || и ! соответственно. Результат логической операции может иметь одно из двух значений: true (истина) и false (ложь). Логической величине true соответствует число 1, а false – 0. Примеры логических операций:

a = 2; b = 3; st = "a"; // исх. данные для лог.выражений
a > b || st == "a" // истина
a > b || st > "a" // ложь
a > b && st == "a" // ложь
a < b &&
st == "a" // истина
!(a < b) // ложь

Операторы, применяемые только в программировании, также можно разделить на три группы: присваивания, условного перехода и циклические.

Примеры операторов присваивания:

a = 5 //записать число 5 в область памяти,

//отведённую под переменную a

a + = 2 //вместо оператора a = a + 5
a - =2;
a * = 2;
a / = 2;
a % = 2

Результаты действия инкремента и декремента зависят от того, как они расположены относительно операнда:

a = b++; // сначала a присваивается значение b, затем b увеличивается на 1
a = ++b; //сначала b увеличивается на 1, затем a присваивается значение b

Примеры операторов условного перехода if и switch:

Var a=3
If (a > 2) alert("a больше двух");
a = 1;
b = -3;
c = 2;
det = Math.pow(b,2) - 4*a*c
if (det < 0)
{ alert("действительных корней нет")
r = 0
}
else if (det == 0)
{ alert("корни одинаковые")
r=1
}
else
{ alert("два корня")
r=2
}

switch (a)
{ case 0:
alert("ноль")
break
case 1:
alert(1)
break
case 2:
alert("два")
break
default:
alert("не подходит");
}

Если в операторе switch убрать ключевое слово break, то будут выполнены все операторы после первого совпадения.

Вместо условного оператора if может использоваться следующая конструкция:

переменная = (условие)? значение 1 : значение 2

Например, в результате выполнения оператора

x = (4 > 2) ? "правильно" : "ошибка"

переменная х примет значение правильно.

Примеры применения операторов цикла for, while и do while

// Оператор for. Сложение всех нечётных чисел от 1 до 10
S = 0;
for(i= 1; i <= 10; i++) {S += i}
S = 0 //сложение чисел 5 ,10,...,25
for(i = 5; i<= 25; i+=5) {S += i}
// Оператор while. Сложение всех нечётных чисел от 1 до10
S = 0; i = 0;
while(i < 10) {S += ++i}
// Оператор do ... while.
//Сложение всех нечётных чисел от 1 до 10
S = 0; i = 0;
do
{ S += ++i}
while(i < 10)

Массивы

Массивы в JavaScript одновременно рассматриваются и как объекты и как массивы в традиционном понимании. Способы создания массивов показаны в следующих примерах:

var a = new Array(5) //создан массив из пяти элементов
var b = new Array(2,7,12) // создан массив b из трёх
//элементов и его элементам присвоены значения

Нумерация элементов массива начинается с нуля. Для обращения к элементу массива используются квадратные скобки, например

x = b[1] // x равен 7

Длина массива определяется как его свойство:

c = a.length // длина массива a c= 5

Элементы одного массива могут иметь разный тип. В следующем примере массив состоит из строковых и числовых элементов.

earth = new Array(4)
earth[0]= "Планета" // строка
earth[1]= "24 часа" // строка
earth[2]= 6378 // целое число
earth[3]= 365.25 // число с плавающей запятой

Информацию о планете Земля удобно хранить в ассоциативном массиве.

earthA = new Array(4)
earthA.type_= "Планета"
earthA.day_= "24 часа"
earthA.radius= 6378
earthA.period = 365.25

Слова type и day – ключевые в JavaScript. Поэтому к идентификаторам переменных type_ и day_ добавлен знак подчёркивания. Для извлечения из обоих массивов радиуса Земли служат операторы:

R=earth[2]
R= earthA.radius

Элементами массива могут служить массивы:

product = new Array()
product[0] = new Array("Пшеница",250)
product[1] = new Array("Рожь",300)
product[2] = new Array("Ячмень",200)

Массив product – двумерный. Элемент product[0][1] имеет значение 250. Длина двумерного массива определяется свойством length:

L = product.length // L = 3
m = product[0].length // m = 2

Элементами массива product являются три массива, каждый из которых состоит из двух элементов.

Строки

Строка в JavaScript является одновременно и объектом string и переменной, поэтому может быть создана двумя способами:

st1 =new String("Строка – это объект")
st2 = "Строка – это переменная"

Строки, рассматривая их как переменные, можно объединять с помощью операции конкатенации. Рассмотрим пример, в котором новая строка получается в результате объединения двух строковых переменных, строковой константы и числовой переменной:

st1 = "Санкт-Петербург основан" n = 1703
st2 =" году"
st3= st1 + " в " + n +st2

В строке st3 будет предложение Санкт-Петербург основан в 1703 году. Тип переменной n изменён автоматически. Наиболее часто над строкой совершаются следующие действия:

• ищется подстрока;
• выделяется несколько символов (подстрока), начиная с символа с заданным номером;
• заменяется одна подстрока другой.

Для поиска подстроки используется метод indexOf(), имеющий следующий синтаксис:

строка.indexOf(подстрока [,начало]) ,
//где начало – номер символа в строке, с которого нужно начинать поиск.

Результат применения метода indexOf() – номер символа, с которого начинается искомая подстрока. Нумерация символов начинается с нуля. Найдём в строке st3 номер символа, с которого начинается подстрока Петербург:

n = st3.indexOf("Петербург") // результат – 6

Для выделения нескольких символов используется метод substr(), имеющий следующий синтаксис:

строка.substr(начало [,длина]) ,
где: начало – номер символа, с которого начинается подстрока,
длина – длина искомой подстроки

Результат применения метода – найденная подстрока. Выделим в st3 слово Петербург:

gorod = st3.substr(6,9)

Для замены подстроки используется метод replace(), имеющий следующий синтаксис:

строка.replace(регулярное выражение, заменяющая подстрока)

В качестве регулярного выражения в простейшем случае можно применить заменяемую подстроку. Заменим в строке st3 подстроку 1703 году на подстроку XVIII веке:

osnovanie=st3.replace(/1703 году/," XVIII веке")

Строка st3 примет значение Санкт-Петербург основан в XVIII веке.

Объекты Math и Number

Свойствами объекта Math служат математические константы, а методами - математические функции. Примеры использования объекта Math:

r = 5 //радиус. Как объект:
r = new Number(5)
L = 2 * Math.PI * r //Длины окружности L=31.41592653589793
Lc =Math.ceil(L) // Lc=32. Округление доближайшего
// большего или равного целого
Ld = Math.floor(L) // Ld=31.Округление до ближайшего
// меньшего или равного целого
Lok =Math.round(L)//Lok=31. Округление до ближайшего целого
S= Math.PI * Math.pow(r,2) //Площадь круга

Все переменные в примере являются объектами Number. Общий вид выражения для создания объекта Number:

переменная = new Number(число)

Создание конкретного объекта:

z = new Number(43.567)

Часто используемые свойства объекта Number:

L = new Number(31.41592653589793)
//L.toFixed(n) - n знаков после запятой
L_3 = L.toFixed(3) // L_3=31.416
//L.toPrecision(n) - n значащих цифр
L4 = L.toPrecision(4) //L4=31.42

ЛАБОРАТОРНЫЕ РАБОТЫ