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

ОГЛАВЛЕНИЕ

Введение

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

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

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

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

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

События

Основы JavaScript

Переменные

Операторы

Массивы

Строки

Объекты Math и Number

 

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

 

Лабораторная работа №2.1Доступ к объектам и сценариям

Доступ к свойствам и методам объектов

Размещение сценариев в HTML-документе

Лабораторная работа №2.2События

Реакция на событие в отдельном элементе

Фиксация события в родительском элементе

Предотвращение всплывания события. Свойство cancelBubble

Лабораторная работа №2.3Формы

Проверка данных перед отправкой на сервер

Получение данных из всплывающего списка

Проверка данных сразу после ввода

Лабораторная работа №2.4Изображения и рисование

Предварительная загрузка изображений

Рисование

Лабораторная работа №2.5Движение и перетаскивание

Движение

Перетаскивание

Лабораторная работа №2.6Совместимость браузеров

Свойства браузеров и объект Navigator

Способы преодоления несовместимости браузеров

Лабораторная работа №2.7Окна и таблицы

Создание нового окна

Управление таблицей

Введение

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

Так как сценарии передаются на компьютер пользователя по сети, то от их размера зависит время загрузки сайта. Часто сценарий служит для внесения очень простых изменений в HTML-документ, например, требуется изменить цвет или размер какого-нибудь объекта на экране. Поэтому сценарии, как правило, небольшие, часто состоят из нескольких строк. Формально на их размер никаких ограничений не накладывается.

Наибольшие трудности у разработчика сценариев вызывают необходимость постоянно использовать объектную модель HTML-документа и несовместимость браузеров. Модель состоит из множества объектов, каждый из которых имеет большое количество свойств и методов. Многие свойства имеют большой набор специальных значений. Объекты реагируют на большое число событий. Например, объект div в объектной модели, применяемой в одном из наиболее распространённых браузеров, имеет 51 свойство, 38 методов и 35 событий. Запомнить все необходимые для разработки сценариев сведения об объектной модели очень трудно, поэтому необходимо использовать специализированный редактор с хорошей справочной системой. Некоторые фирмы создают редакторы для разработки сценариев, предназначенных только для одного типа браузера, причём в справочной системе об этом не сообщается. Такой подход является проявлением войны браузеров.

Причина войны браузеров – конкуренция на рынке браузеров. Положительный результат этой войны – появление новых средств разработки сайтов. Отрицательный – увеличение в несколько раз времени разработки сайта, правильно отображаемого браузерами нескольких типов, по сравнению с временем разработки сайта для одного браузера.

В предлагаемом лабораторном практикуме подробно на примерах рассматриваются основные приёмы программирования на языке JavaScript. Первая часть практикума – справочная. В ней излагаются сведения о языке JavaScript, достаточные для решения задач, предлагаемых в лабораторных работах, описанных во второй части практикума.

Лабораторные работы построены по следующей схеме: описывается проблема, методы её решения, рассматривается пример и предлагается задача для самостоятельного решения.

Большое внимание уделяется проблеме совместимости браузеров. Из-за слишком большой сложности разработки сценариев, предназначенных для работы на браузерах многих типов, рассматривается совместимость только браузеров Internet Explorer 6.0 и Mozilla FireFox 2.0. Все примеры, приводимые в лабораторных работах, проверены на этих браузерах. Часть примеров специально разработана только для одного браузера.

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

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

Объектная модель документа имеет иерархическую структуру. На вершине этой иерархии находится объект 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

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

Лабораторная работа №2.1
Доступ к объектам и сценариям

Пример 1.1.

<HTML ID='DOCUM'>
<CENTER><H1 ID='zag'> ВАСЬКА</h1>
Вариант, совместимый с Mozilla<P>
<FORM NAME='f1'>
<INPUT TYPE=BUTTON name="bot" onclick=bm() value='Увеличить'>
<P>
</FORM >
<IMG SRC="VaskaM.jpg" ID='Vas' onclick=bm()>
</center>
<!--В скрипте закомментирован вывод окна со списком объектов -->
<SCRIPT>
/*var
msg=''
for(i=0; i<document.all.length;i++)
msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n'
alert(msg) */
flag=true
function bm()
{ if(flag)

{ document.images[0].src='VaskaB.jpg' flag=false;
document.forms[0].bot.value="Уменьшить"
document.forms[0].bot.style.background='red'
document.all.bot.style.color='black';
}
else
{ document.getElementById("Vas").src='VaskaM.jpg';
//обращение к кнопке по индексу
document.forms[0].bot.value="Увеличить"
document.forms[0].bot.style.background='green'
document.all.bot.style.color='white'; flag= true
}

}
</script>
</HTML>

Выполнить пример 1.1

В примере 1.1 сценарий используется для замены фотографии и изменения цвета кнопки и надписи на ней. Друг друга меняют маленькая и большая фотографии кота Васьки.

Замена фотографии и изменение вида кнопки в примере происходят при щелчке мышкой по кнопке или по самой фотографии. В тегах <INPUT> и <IMG> помещён атрибут onclick=bm(), при помощи которого в ответ на щелчок мышкой вызывается функция bm(). Такой атрибут называют обработчиком событий. Имя файла с фотографией является свойством SRC объекта IMG. Замена фотографии делается в сценарии двумя равнозначными способами:

document.images[0].src='VaskaB.jpg'
document.getElementById("Vas").src='VaskaM.jpg'

В первом варианте доступ к фотографии происходит через коллекцию images, в которой все расположенные на странице фотографии (в примере одна фотография) пронумерованы. Нумерация начинается с нуля. Во втором варианте используется метод getElementById() объекта document. Параметром в методе getElementById() служит ID (идентификатор) объекта IMG. Весь оператор читается так: "свойству src объекта, имеющего ID=Vas и входящего в состав объекта document, присвоить значение VaskaM.jpg ". Сам объект document является дочерним по отношению к объекту window. Поэтому полное обращение к свойству src следовало бы писать так:

window.document.images[0].src='VaskaB.jpg'
window.document.getElementById("Vas").src='VaskaM.jpg'

Обычно, за исключением тех случаев, когда нужно воспользоваться свойствами или методами самого объекта window, это слово опускают.

Более сложная иерархия объектов наблюдается при обращении к свойствам кнопки:

document.forms[0].bot.value="Уменьшить"

document.forms.f1.bot.style.background='red'

Первый оператор служит для изменения надписи на кнопке. Доступ к кнопке происходит по её имени (name='bot'). Доступ к форме осуществляется через коллекцию forms и номер формы в коллекции.

С помощью второго оператора меняется цвет кнопки. Доступ к форме осуществляется через коллекцию forms и имя формы f1. Своеобразие доступа к свойствам, задаваемым стилем, состоит в том, что style выступает формально как дочерний объект. В рассматриваемом примере родительским по отношению к style является объект с именем bot, то есть, кнопка.

Для обращения к объектам удобна коллекция all объекта document. В коллекцию all входят все объекты HTML-документа, поэтому выбирать объект нужно по его ID или имени. Коллекция all использована для изменения цвета надписи на кнопке:

document.all.bot.style.color='black'

Все описанные способы доступа к объектам HTML-документа базируются на объектной модели документа (DOM). Наиболее трудной задачей, стоящей перед разработчиком сценариев, является разработка сайтов, которые будут одинаково выполняться на всех браузерах. Рассматриваемый пример HTML-документа подобран так, что он (почти) одинаково выполняется на браузерах Internet Explorer 6.0 и Mozilla Firefox 2.0, несмотря на то, что объектные модели в этих браузерах отличаются друг от друга. Для того, чтобы убедиться в этом уберите символы комментариев /* и */ из первой и пятой строчек скрипта и откройте страницу в обоих браузерах. Появится окно со списком всех объектов, созданных браузером для открытого документа. В созданной браузером Internet Explorer модели – 12 объектов, а у Mozilla Firefox – 10.

Рассмотрим подробнее раскомментированный фрагмент скрипта.

var msg=''
for(i=0; i<document.all.length;i++)
msg+=i + ' ' + document.all[i].tagName +' ID=' + document.all[i].id+'\n'
alert(msg)

Коллекция all всех объектов HTML-документа имеет свойство length, равное количеству всех объектов модели документа. Любой объект имеет свойство tagName, значение которого совпадает с именем объекта. В приведённом фрагменте скрипта в цикле формируется строковая переменная msg, состоящая из номеров, имён и ID объектов. Сочетание символов \n служит для перевода строки.

Задача 1.1. Напишите HTML-документ, который в окне браузера отображается в виде следующих трёх строк:

• ДОСТУП К СВОЙСТВАМ И МЕТОДАМ
• Коллекция all
• Метод getElementById()

Первую строку поместите в контейнер <H2>...</h2>, вторую – в контейнер <P> …</p>, третью – в контейнер <DIV> … </div>. Напишите скрипт для изменения цветов фона и букв надписей, при щелчке по этим строкам. При щелчке по первой строке цвет букв должен меняться с чёрного на белый или с белого на чёрный, а фон – с жёлтого на синий или с синего на жёлтый. Так же должны меняться цвета третьей строки.

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

Для изменения первой и третьей строк примените метод getElementById(), а для второй строки – коллекцию all.

Пример 1.2

html><!-- СКРИПТ загружается из файла primJs.js--> <HEAD>
<TITLE>Сеть</title>
</head>
<body>
<SCRIPT language="JavaScript" src="PrimJs.js">
</script>
<H2 align=center style="color:green">Магазин "ПОДАРКИ"</h2>
Адрес: Лесная ул., д.2<P>
Транспорт: трамваи 7, 23, автобусы 56, 93
</body>
</html>
// Файл primJs.js
a="background-color:#00ffff; color:#ff00ff;"
a+="font-size:24pt; font-family:'Times New Roman'"
naim='Сеть магазинов "ВСЁ ДЛЯ ДОМА"'
var da=new Date()
d=da.getDate()+"."+da.getMonth()+"."+da.getYear()
document.write('<P align=center style= "'+a+'">'+
naim+'</p><P>Сегодня '+d+'</p>')

Выполнить пример 1.2

Общие для страниц всех магазинов сети заголовок с названием сети и сегодняшняя дата формируются скриптом, размещённым в отдельном файле primJs.js. Метод write(HTML-код) служит для вставки в страницу размеченного текста (HTML-кода). Этот метод применяется только при загрузке страницы, так как его применение после окончания загрузки приведёт к стиранию старого содержимого страницы.

Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.

Лабораторная работа №2.2
События

Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.

Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.

Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.

Пример 2.1.

<HTML>
<BODY>
<P align=right ID='alfa'
onMouseOver="document.all.alfa.align='center'
"onMouseOut="this.align='left'">
События onMouseOver и onMouseOut </p>
</body>
</html>

Выполнить пример 2.1

Страница в примере 2.1 состоит из одной строки, заключённой в контейнер <P> …</p>. В объектной модели страницы событие, происходящее с объектом P, происходит также и с родительским объектом BODY. Чтобы локализовать реакцию на событие только пределами строки, то есть объекта P, сценарий реакции на события помещен в тег <P >.

В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0. Ключевое слово this означает ссылку на текущий объект.

Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.

Пример 2.2

<HTML>
<P align=right ID='alfa' onMouseOver="M_Over()"
onMouseOut="M_Out()">
Событие onMouseOver</p>
<SCRIPT>
function M_Over()
{ document.all.alfa.align='center'
document.all.alfa.style.color='FF00FF'
}
function M_Out()
{ document.all.alfa.align='left'
document.all.alfa.style.color='0000FF'
}
</script>
</html>

Выполнить пример 2.2

Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:

• Пять событий с мышкой
• Щёлкните по мне мышкой
• На этом тексте нажмите, подержите и отпустите левую кнопку мышки
• Медленно проведите курсором мышки по этой надписи

Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:

• шрифт увеличивается до 48pt;
• цвет шрифта меняется на белый;
• цвет фона меняется на голубой.

Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.

Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.

При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.

Пример 2.3

<HTML>
<HEAD>
<TITLE>Реакция на событие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:FF00FF} #k1{position:absolute; left:50;top:200;
width:300; height:100;background-color:blue}
#k2{position:relative;
left:50;top:25; width:200; height:50;}
</STYLE></HEAD> <BODY ID="B" bgcolor="AAAAAA"
onclick="rodEl()">
<H1 ID="HH" >ЦВЕТ</H1> <DIV ID="k1" >
<DIV ID="k2">
</div>
</div>
</BODY>
<SCRIPT> /*
Функция запускается при щелчке мышкой по любой точке документа */
function rodEl()
{ var e=window.event
id1=e.srcElement.id
switch(id1)
{ case "k1":

//Изменение цвета внешнего прямоугольника
z=document.getElementById(id1).style.backgroundColor
if(z!="red")z="red"
else
z="green" document.getElementById(id1).style.backgroundColor=z
break

case "k2":

//Изменение цвета внутреннего прямоугольника
z=document.getElementById(id1).style.backgroundColor
if(z!="#00ffff"){z="#00ffff"} else{z="FF00FF"}
document.getElementById(id1).style.backgroundColor=z
break

case "B": //Изменение цвета заднего плана документа
document.getElementById(id1).bgColor="777777"
break
case "HH": //Изменение цвета слова "Цвет"
document.getElementById(id1).style.color= "AA00AA"
}
}
</SCRIPT>
</HTML>

Выполнить пример 2.3

В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.

В момент наступления события вся информация о нём запоминается в объекте event, дочернем по отношению к объекту window. В примере используется свойство srcElement, хранящее в качестве значения объект на котором произошло событие. Поэтому выражение srcElement.Id читается так: Id объекта, на котором произошло событие. К сожалению, свойство srcElement имеется только в объектной модели, поддерживаемой браузером Internet Explorer, поэтому сценарий данного примера в других браузерах работать не будет.

В сценарии сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента. Цвет слова ЦВЕТ и фона документа меняется только один раз, а цвет прямоугольников – при каждом щелчке по ним мышкой.

В примере 2.3 для того, чтобы хорошо была видна структура документа, громоздкие описания параметров вынесены в CSS.

Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.

Пример 2.4

HTML>
<HEAD><TITLE>Реакция насобытие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:FF00FF} #k1{position:absolute;
left:50;top:200; width:300; height:100;background-color:blue}
#k2{position:relative; left:50;top:25; width:200;
height:50;</STYLE></HEAD>
<BODY ID="B" bgcolor= "AAAAAA" onclick="rodEl()">
<H1 ID="HH"onclick="H_l()">
ЦВЕТ</H1>
<DIV ID="k1" onclick="D_l()">
<DIV ID="k2" style=" background-color:yellow" onclick="D_2(this)"></div>
</div>
</BODY>
<SCRIPT>
/* Функция запускается при щелчке мышкой по
любой точке документа */
function rodEl()
{ //Изменение цвета заднего плана документа

z=document.all.B.bgColor
if(z!="#777777"){z="#777777"}
else{z="AAAAAA"}
document.all.B.bgColor =z

}
function D_l()
{ //Изменение цвета внешнего прямоугольника

z= document.all.k1.style.backgroundColor
if(z!="red")z="red"
else z="green"
document.all.k1.style.backgroundColor=z

}
function D_2(thi)
{ //Изменение цвета внутреннего прямоугольника

z=thi.style.backgroundColor
if(z!="#00ffff"){z="#00ffff"}
else{z="FF00FF"}
thi.style.backgroundColor=z

}
function H_l()
{ //Изменение цвета слова "Цвет"

z=document.all.HH.style.colorif(z!="#aa00aa"){z="#aa00aa"}
else{z="00FFFF"}
document.all.HH.style.color= z

}
</SCRIPT>
</HTML>

Выполнить пример 2.4

Для лучшего проявления эффекта всплывания событий в пример 2.4 добавлено изменение фона всего документа и цвета надписи при каждом щелчке мышкой по ним. Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.

Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор

window.event.cancelBubble=true

Лабораторная работа №2.3
Формы

Цель работы: научиться управлять формой через сценарий.

Форма служит для ввода пользователем через окно браузера данных и передачи их на веб-сервер. Форма состоит из контейнера <FORM> …</form> и заклю