Технология Javascript в web-программировании, объекты, методы. Переменные. Управляющие конструкции (лабораторная работа)

Цель работ: ознакомиться с общими понятиями Javascript, научиться организовывать взаимодействие с пользователем, ознакомиться с понятием переменных, научиться использовать условные конструкции и циклы

Краткая теория.

JavaScript - объектно-ориентированный скриптовый язык программирования. Чаще всего применяется в браузерах для создания сценариев. Сценарии размещаются в произвольном месте HTML-документа в соответствии с шаблоном:

<html>

<head><title>…<title>

< script language="JavaScript">

</script>

<head>

<body>

< script language=”JavaScript”>

<! --Фрагмент сценария -->

</script>

</body>

Для того, чтобы пользователь мог взаимодействовать с программой, требуются средства ввода-вывода.

Для ввода и вывода данных можно воспользоваться методами браузера и загруженного в него документа. Объект, представляющий свойства браузера, называется window (окно), а три его метода - alert(), prompt() и confirm() - предназначены для ввода и вывода данных посредством диалоговых окон. Объект, представляющий свойства документа, называется document, а его методы write() и writeln() служат для вывода данных непосредственно в клиентскую область браузера. Объект document очень важный, но не корневой в объектной модели, потому при обращении к его свойствам требуется указывать имя объекта, например, document .write("Здравствуй, Мир").

Проиллюстрируем сказанное на нескольких примерах.

Метод alert()

Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Синтаксис следующий:

alert(сообщение)

В предлагаемом ниже примере будет выведен афоризм Козьмы Пруткова.

alert("Если хочешь быть красивым, поступи в гусары");

Диалоговое окно, выведенное на экран методом alert() является модальным, т.е. пока мы не нажмем кнопку OK, не сможем дальше работать с программой.

Метод confirm()

Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками: ОК и Отмена (Cancel). В отличие от alert(), этот метод возвращает логическую величину, значение которой зависит от того, какую из кнопок нажал пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true (истина, да); если же была нажата кнопка Отмена (Cancel), то возвращается значение false (ложь, нет). Возвращаемое значение можно обработать в программе и, следовательно, создать эффект интерактивности, т. е. диалогового взаимодействия программы с пользователем. Синтаксис метода confirm()следующий:

confirm(сообщение)

Метод prompt()

Метод prompt() позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные. Кроме того, в окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие отalert() и confirm(), данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если пользователь щелкнет на кнопке ОК, метод вернет содержимое поля ввода данных, а если он щелкнет на кнопке Отмена, то возвращается логическое значение false (ложь, нет).

Синтаксис метода prompt () следующий:

prompt (сообщение, зна чение_поля_ввода_ланных)

В предлагаемом примере пользователь вводит свое имя с помощью оператора promt, имя присваивается переменнойFirstName, затем переменная соединяется со статическим текстом и выводится на экран с помощью оператора alert().

var FirstName,str;

FirstName=prompt("Как Вас зовут?", "");

str = "Очень приятно, " + FirstName + "!";

alert(str);

Метод write объекта document

Метод document.write(список_строк) позволяет выводить в окне браузера список текстовых строк, разделенных запятыми. Если выводимая строка представляет собой HTML-код, то браузер отобразит результат его интерпретации, а не последовательность тегов. Иначе говоря, теги HTML в выводимом сообщении будут восприниматься браузером как команды, а не просто как текстовые символы.

Метод document.writeln(список_строк) отличается от предыдущего тем, что выводит указанную строку (или несколько строк), добавляя в конце невидимый управляющий символ перехода на новую строку.

Пример.

var str;

str = "<h1>" + "Бросая в воду камешки, смотри на круги, ими

образуемые," + "<br>" +

"иначе такое бросание будет пустою забавою" + "</h1>";

document.write(str);

Переменные

В языке программирования JavaScript поддерживаются пять примитивных типов данных (числовой, строковый, логический, пустой и неопределенный) и один составной, объектный ( Object )

Переменные объявляются с помощью ключевого слова var.

Автоматическое преобразование типов данных

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

var x, y, z, str;

x = 3; //Числовой тип

y = true; //Логический тип

z = "Вася"; //Символьный тип

str = x+ y + z;

alert(str);

Оператор присваивания

С помощью оператора присваивания переменным присваиваются некоторые значения. В JavaScript имеется много способов записи операций присваивания, аналогичных с C++. Рассмотри различные формы присваивания на следующем примере.

var a, b, c, d, f, str;

a = 1; //Наиболее привычная форма записи

b = 13;

c = 2;

d = 5;

f = 15;

b += a; //То же, что и b=b+a

c++; //То же, что и c=c+1

d *= 2; //То же, что и d=d*2

f %= 7; //Нахождение остатка при делении 15 на 7

str = b + "<br>" + c + "<br>" + d + "<br>" + f;

document.write(str);

Управляющие конструкции.

Условные операторы

Условные операторы изменяют ход выполнения программы в зависимости от некоего условия. Существуют конструкции if…then, условная операция ( ?) и переключатель switch. При разработке программ, использующих условные операторы, нужно учитывать, что при проверке равенства двух величин нужно писать a==b, а не a=b, т.к. выражение a=b в условном операторе будет расценено как оператор присваивания. Второе. При разработке составных условий выражение a>3 && b<5 обозначает операцию конъюнкции, т.е. должны выполняться оба условия. Выражение a>3 || b<5 обозначает дизъюнкцию, т.е. для истинности выражения достаточно выполнение хотя бы одного условия.

Оператор if..then

Синтаксис оператора if…then следующий:

If (Условие) {Действие 1} else {Действие 2}

В случае истинности условия выполняется первое действие, в противном случае - второе действие.

В предлагаемом примере сравниваются два числа, и находится наименьшее.

var a, b, c, str;

a = 1;

b = 300;

if (a < b) { c = a; }

else { c = b; }

str = "Минимальное значение из двух чисел равно " + c;

document.write(str);

Условная операция (оператор ?)

Оператор ? является сокращенной формой оператора if..then. Синтаксис его следующий:

Условие ? действие 1 : действие 2.

Переключатель switch

Этот оператор удобно применять в случае нескольких однородных повторяющихся условий. Его синтаксис следующий:

switch (выражение) {

case вариант 1:

код

[break]

case вариант 2:

код

[break]

…

[default:

код]

}

В квадратные скобки заключены необязательные выражения. Сначала вычисляется выражение, указанное в круглых скобках сразу за ключевым словом switch. Полученное значение сравнивается с тем, которое указано в первом варианте. Если они не совпадают, то код этого варианта не выполняется и происходит переход к следующему варианту. Если же значения совпали, то выполняется код, соответствующий этому варианту. При этом если не указан оператор break, то выполняются коды и остальных вариантов, пока не встретится оператор break. Это же правило действует и для остальных вариантов.

В предлагаемом ниже примере в зависимости от выбранного номера дня недели на экран выводится его шуточный комментарий.

var DayNumber, str;

DayNumber = 5;

switch (DayNumber) {

case 1:

str = "Отдых от рабочего дня";

break

case 2:

str = "Поготовка к рабочему дню";

break

case 3:

str = "Рабочий день";

break

case 4:

str = "Отдых от рабочего дня";

break

case 5:

str = "Подготовка к выходному дню";

break

case 6:

str = "Первый выходной день";

break

case 7:

str = "Второй выходной день";

break

}

document.write(str);

Операторы цикла

Операторы цикла выполняют некоторую последовательность действий до тех пор, пока истинно (ложно) некое условие. Помимо условия операторы цикла содержат также итерационную переменную, которая на каждом шаге работы цикла претерпевает определенные изменения. В JavaScript предусмотрены три оператора цикла: for, while и do-while. В операторе цикла forз аранее известно количество итераций. Его удобно использовать при работе с массивами. Допускаются вложенные операторы цикла for. В циклах while и do-while мы заранее не знаем количество итераций. Их удобно использовать в задачах математического моделирования и при сканировании различного рода последовательностей.

Оператор for

Синтаксис оператора for следующий:

for ([начальное_выражение] ; [условие] ; [выражение обновления])

{

код

}

В предлагаемом примере найдем сумму чисел от нуля до десяти. Как видно из листинга, вначале переменной sum присваивается значение 0, затем на каждом шаге цикла прибавляется по единице.

var i,n, sum,str;

sum = 0;

n = 10;

for (i = 1; i <= n; i++) {

sum += i;

}

str = "Сумма первых " + n + " членов ряда = " + sum;

alert(str);

Оператор while

Синтаксис этого оператора следующий:

while (условие) {

код

}

При выполнении этого оператора сначала проверяется условие, указанное в заголовке, т. е. в круглых скобках справа от ключевого слова while. Если оно истинно, то выполняется код в теле оператора цикла, заключенный в фигурные скобки. В противном случае код не выполняется. При выполнении кода (завершении первой итерации) вычислительный процесс возвращается к заголовку, где снова проверяется условие, и т. д.

В предлагаемом примере решается предыдущая задача. Цикл while работает до тех пор, пока итерационная переменная i не станет равна десяти.

var i,n, sum,str;

sum = 0;

n = 10;

i = 1;

while(i<=n)

{

sum += i;

i++;

}

str = "Сумма первых " + n + " членов ряда = " + sum;

document.write(str);

Оператор do-while

Оператор do-while (делай до тех пор, пока) представляет собой конструкцию из двух операторов, работающих совместно.

Задания.

Разместите во внешнем css файле стилистическое оформление web-страницы: body – 100% на100%,золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px.

Создать web-документ. Стилистическое оформление которого – во внешнем файле css. Название cтраницы– javascript. В мета-тегах укажите себя в качестве автора и правообладателя

В заголовке разместите надпись Javascript. В секции контент: используя технологию Javascript, выведите приветствие и вопрос: Привет! Как тебя зовут? Ответ присвойте переменной а. Выведите на экран с помощью метода alert: «Приятно познакомиться, (дальше –значение переменной а)». Выведите этот же текст в виде строки на экран.

Далее, попросите пользователя ввести два числа и определите, какое из них наибольшее (с помощью условных конструкций, а не объекта math!), выведите на экран результат.

Далее спросите пользователя. факториал какого числа он хочет найти. Рассчитайте факториал с помощью цикла. Выведите результат

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

3.Задание и ход выполнения. В отчете представьте код html-документа. Если возможно – скрины с экрана ваших web-страничек.

4.Сделать выводы.

ЛАБОРАТОРНЫЕ РАБОТЫ №14-15

Технология Javascript. Встроенные и пользовательские функции.

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

Краткая теория.

Функции

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

function имя функции(входные параметры) {тело функции}

При вызове функции указывается ее имя, подставляются фактические параметры:

имя функции (фактические параметры)

Различают встроенные и пользовательские функции. Функции могут быть с входными параметрами и без таковых. Функции могут возвращать значения, а могут и не возвращать.

Встроенные функции

Сюда можно отнести функции работы с датой и временем, математические и некоторые другие функции.

Для примера рассмотрим getYear, getMonth.

var myDate, Year, Month, str;

myDate = new Date;

Year=myDate.getYear();

Month = myDate.getMonth(this) + 1; //Январь - нулевой месяц

str = "Сегодня " + myDate + "<br/>";

str += Month + "-й месяц " + Year + "-го года"

document.write(str);

Встроенная функция getYear() не содержит входных параметров.

Теперь рассмотрим математические функции. В примере находим минимальное из пяти чисел, используя математическую функцию min.

var a1, a2, a3, a4, a5, b1, b2, b3, b4, str;

a1 = 3;

a2 = 5;

a3 = -8;

a4 = 16;

a5 = 32;

b1 = Math.min(a1, a2);

b2 = Math.min(a3, a4);

b3 = Math.min(b1, b2);

b4 = Math.min(b3, a5);

str = "Наименьшее из пяти чисел: " + b4;

document.write(str);

Пользовательские функции.

Приведем пример функции, не возвращающей значения.

function cat() {

var phrase;

phrase = "Кот – священное и неприкосновенное животное!";

document.write(phrase);

}

sentense();

Рассмотрим функции, возвращающие значения.

В примере функция getRandomString генерирует n случайных чисел в диапазоне от 0 до maxvalue.

function getRandomString(n, maxvalue) {

var i, str;

str = "<br/>"

for (i = 0; i < n; i++) {

str += Math.round(Math.random() * maxvalue) + "<br/>";

}

return str

}

Var n, maxvalue, str;

n = 10;

maxvalue = 100;

str = getRandomString(n, maxvalue);

document.write(str);

Еще пример:

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

<html>
<head><title></title>
<script language="JavaScript">
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>

Задания.

Используйте внешний css файл стилистическое оформление web-страницы из предыдущей лабораторной работы (body – 100% на100%,золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

Создайте web-документ. Стилистическое оформление которого – во внешнем файле css. Название cтраницы – javascript. В мета-теге укажите кодировку Unicode

В заголовке разместите надпись Javascript. В секции контент:

1)используя технологию Javascript и встроенную функцию определите год даты выполнения работы. Присвойте переменной а следующее значение : ныне год [год текущей даты] Выведите значение переменной а в окне сообщения.

Используя метод prompt(), обеспечьте введение 4 чисел и определите наибольшее из них с помощью встроенной математической функции. Результат выведите в окне сообщений.

2) разработайте функцию, которая выводит в блок div следующий текст:

Нет! Я не Ведьма! И это не череп в углу,-

Просто муляж, чтоб отпугивать вОров…

Все. Убегаю. Нет-нет, не на Лысую гору!

Рано не жди. Я к подруге… Подай мне метлу.

Обеспечьте вызов этой функции при нажатии на кнопку с надписью «Хэллоуин».

(для выполнения работы используйте при создании функции объект Document c методом и свойством getElementById(“имя блока”).innerHTML=)

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

4.Сделать выводы.

ЛАБОРАТОРНЫЕ РАБОТЫ №16-17

Технология Javascript. Формы. Объекты и методы

Цель работ: ознакомиться со способами работы с формами при использовании различных методов

Краткая теория.

Форма FORM имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

action. Значение атрибута ACTION тега FORM.

encoding. Значение атрибута ENCTYPE тега FORM.

method. Значение атрибута METHOD тега FORM.

target. Значение атрибута TARGET тега FORM.

elements. Массив всех элементов формы.

length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

Элементы форм

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

name. Имя объекта.

value. Надпись на кнопке.

Метод

click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример

<html>

<head>

function btnClick()

{

var Txt1 = "";

var Txt2 = "";

Txt1 = document.Test.bt.value;

Txt2 = document.Test.bt.name;

document.getElementById('ex1').innerHTML="<HR>"+

"Вы нажали кнопку: " + Txt1.bold() +

" с именем: " + Txt2.bold() +"<HR>";

}

</script>

</head>

<body>

<H1>Нажатие кнопки</H1>

<INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"

onClick="btnClick();">

</FORM>

</body>

</html>

Флажок (CHECKBOX)

Свойства

name. Имя объекта.

value. Надпись на кнопке.

checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.

defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

click( ). Вызов этого метода меняет состояние флажка.

Пример

<html>

<head>

</head>

<body>

<H1>Метод click флажка</H1>

Флажок <INPUT TYPE="checkbox" NAME="ch">

<BR>Состояние флажка можно изменить и этой кнопкой

<INPUT TYPE="button" VALUE="Смена состояния"

onClick="document.Test.ch.click();">

</FORM>

</body>

</html>

Переключатель (RADIO)

Свойства

name. Имя объекта.

value. Надпись на кнопке.

length. Количество переключателей в группе.

checked. Состояние переключателя: true - переключатель включен, false - выключен.

defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример

<html>

<head>

function btnClick()

{

if(document.Test1.Sex[0].checked){

document.Test1.Sex[1].click();

}else{

document.Test1.Sex[0].click();

}

</script>

</head>

<body>

<H1>Метод click группы переключателей</H1>

<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской

<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский

<BR>Состояние переключателей можно изменить и этой кнопкой

</FORM>

</body>

</html>

Список (SELECT)

Свойства

name. Имя объекта.

selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).

length. Количество элементов (строк) в списке.

options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

value. Значение атрибута VALUE.

text. Текст, указанный после тега OPTION.

index. Индекс элемента списка.

selected. Присвоив этому свойству значение true, можно выбрать данный элемент.

defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.

Методы

focus( ). Передает списку фокус ввода.

blur( ). Отбирает у списка фокус ввода.

Пример

<html>

<head>

<script><!--

function btnClick2()

{

var sI=document.Test2.Item.selectedIndex;

var Txt="";

Txt="Предложено "+document.Test2.Item.length+" напитков"+

"\nВыбран "+document.Test2.Item.options[sI].text+

" (value= "+document.Test2.Item.options[sI].value+

", index= "+document.Test2.Item.options[sI].index+")";

if(document.Test2.Item.options[sI].defaultSelected)

{Txt+="\nЭтот напиток выбирается по умолчанию";}

alert(Txt);

}

//-->

</script>

</head>

<body>

<H1>Работа с готовым списком</H1>

<OPTION VALUE="tea" SELECTED>Чай

<OPTION VALUE ="coffee">Кофе

<OPTION VALUE ="milk">Молоко

<OPTION VALUE ="cocoa">Какао

<OPTION VALUE ="juice">Сок

</SELECT>

<INPUT TYPE="button" VALUE="Пусть кофе"

onClick="Test2.Item.options[1].selected=true;">

<INPUT TYPE="button" VALUE="Посмотрим"

onClick="btnClick2();">

</FORM>

</body>

</html>

Поле ввода (TEXT)

Свойства

name. Имя объекта.

defaultValue. Начальное содержимое поля.

value. Текущее содержимое поля.

Методы

focus( ). Передает полю фокус ввода.

blur( ). Отбирает у поля фокус ввода.

select( ). Выделяет содержимое поля.

Пример

<html>

<head>

<!--

function Complete()

{

var Elem="Фамилия: " + document.Sel1.Family.value +

"\nИмя: " + document.Sel1.Name.value +

"\nВозраст: " + document.Sel1.Age.value +

"\nТелефон: " + document.Sel1.Phone.value;

alert(Elem);

}

function CheckAge(age)

{

if(age<18)

return "18";

else

return age;

}

//-->

</script>

</head>

<body>

<H1>Заполните анкету</H1>

<TABLE>

<TR><TD><B>Фамилия:<B></TD>

<TD><INPUT NAME="Family" SIZE=20

onBlur="this.value=this.value.toUpperCase()"></TD></TR>

<TD><INPUT NAME="Name" SIZE=20

onBlur="this.value=this.value.toUpperCase()"></TD></TR>

<TR><TD><B>Возраст:<B></TD>

<TD><INPUT NAME="Age" SIZE=3 VALUE="18"

onBlur="this.value=CheckAge(this.value)"

onFocus="this.select()"></TD></TR>

<TR><TD><B>Телефон:<B></TD>

</TABLE>

</FORM>

</body>

</html>

Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.

Текстовая область (TEXTAREA)

Свойства

name. Имя объекта.

defaultValue. Начальное содержимое области.

value. Текущее содержимое области.

Методы

focus( ). Передает области фокус ввода.

blur( ). Отбирает у области фокус ввода.

select( ). Выделяет содержимое области.

Пример

<html>

<head>

var OK="Кот Плинтус чувствует себя хорошо.\nЮстас.";

var Problem="Кот Плинтус нуждается в ветеренаре.\nЮстас.";

function getDate()

{

var today=new Date();

return today.toLocaleString()+"\n";

}

function CheckRadio(form,value)

{

if(value=="Good")

form.Letter.value=getDate()+OK;

else

form.Letter.value=getDate()+Problem;

}

</script>

</head>

<H1>Отправьте сообщение</H1>

<label><INPUT TYPE="radio" NAME="Code" VALUE="Good"

onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка в норме

</label>

<BR>

<label><INPUT TYPE="radio" NAME="Code" VALUE="Bad"

onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка провалена

</label>

</TEXTAREA>

</FORM>

</body>

</html>

Задания.

1)Используйте внешний css файл стилистическое оформление web-страницы из предыдущей лабораторной работы (body – 100% на100%,золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

В заголовке разместите надпись Анкета. В секции контент:

используя технологию Javascript разработайте анкету с помощью формы и полей ввода следующего содержания: «Имя», «Город», «Увлечения», “Любимая книга», «Любимый фильм». «Домашний питомец», «Страна, которую хотите посетить». Ниже анкеты разместите кнопку с надписью «готово». При нажатии на кнопку в секцию div, расположенную перед формой анкеты, выведется следующая информация с учетом анкеты: «Я,…, живу в городе…, увлекаюсь…. У меня есть домашний питомец… Мне нравится книга… и фильм…Мечтаю посетить…»

2) Используйте внешний css файл стилистическое оформление web-страницы из предыдущей лабораторной работы (body – 100% на100%,золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

В заголовке разместите надпись Forms. В секции контент: разместите блок div, содержащий надпись : «Лето

Июль, таскающий в одёже
Пух одуванчиков, лопух,
Июль, домой сквозь окна вхожий,
Всё громко говорящий вслух»,

ниже – летнюю картинку, ниже картинки – кнопка с надписью «смена времени года». Нажатие кнопки обрабатывается следующим образом: содержание блока div: «Зима.

Буря мглою небо кроет,
Вихри снежные крутя;
То, как зверь, она завоет,
То заплачет, как дитя»

Картинка меняется на зимнюю.

Внимание, при выполнении работы используйте следующую информацию Каждое изображение в web-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым можно обращаться из языка JavaScript. Чтобы не отслеживать индекс всех изображений назначать изображениям собственные имена. Так, если добавить изображение с помощью тега <img src="img.gif" name="myImage" width=100 height=100>, то можно обращаться к нему, написав document.myImage

И для выполнения работы используйте при создании функции объект Document c методом и свойством getElementById(“имя блока”).innerHTML=

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

4.Сделать выводы.

ЛАБОРАТОРНЫЕ РАБОТЫ №18-19

Изображения в Javascript

Цель работ: ознакомиться со способами работы с изображениями в Javascript

Краткая теория.

Каждое изображение в web-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width можно задать ширину первого изображения на веб-странице (в пикселах). Вместо отслеживания индекс всех изображений можно назначить изображениям своих собственных имен. Так, если добавить изображение с помощью тега

то можно обращаться к нему, написав

document.myImage или document.images["myImage"].

Загрузка новых изображений

Если хотим осуществлять смену изображений на веб-странице и для этого нам понадобится атрибут src. Как и в случае тега <img>, атрибут src содержит адрес представленного изображения. В языке JavaScript есть возможность назначать новый адрес изображению, уже загруженному в веб-страницу. И в результате - изображение будет загружено с этого нового адреса, заменив на веб-странице старое. Рассмотрим, к примеру, код:<img src="img1.gif" name="myImage" width=100 height=100>

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое — img2.gif:

document.myImage.src= "img2.gif";

При этом новое изображение получает тот же размер, что был у старого.

Упреждающая загрузка изображения

После записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки не удобны. Решением проблемы является упреждающая загрузка изображения. Для этого надо создать новый объект Image. Рассмотрим код:

hiddenImg= new Image();

hiddenImg.src= "img3.gif";

В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Чтобы вызвать изображение на экран, следует воспользоваться кодом следующего типа:

document.myImage.src= hiddenImg.src;

Сохранение изображения в переменную.

Для этого используем объект Image

Рассмотрим в примере

var NewImg = new Image ();

NewImg.src = '4.png';

var s = NewImg.cloneNode (1);

Метод cloneNode позволяет клонировать элемент и получить его точную копию. Эту копию затем можно вставить на страницу с помощью методов prepend, append, appendChild, insertBefore или insertAdjacentElement. В параметре метод получает true либо false. Если передан true, то элемент клонируется полностью, вместе со всем атрибутами и дочерними элементами, а если передан false - только сам элемент

Изменение изображений в связи с событиями, инициируемыми самим пользователем

Можно создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Рассмотрим пример:

<a href="#"

onMouseOver="document.myImage.src='img2.gif'"

onMouseOut="document.myImage.src='img1.gif'">

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

onMouseOver="document.myImage.src='img2.gif'"

где myImage — это значение атрибута name= из тега img.

Если курсор мыши выходит за пределы картинки, то возникает событие onMouseOut, в результате обработки которого подставляется первоначальная картинка. Это достигается оператором присваивания

onMouseOut="document.myImage.src='img1.gif'"

Метод setTimeout выполняет действие, задаваемое первым атрибутом, по истечении указанного в миллисекундах промежутка времени, определенного вторым атрибутом. В рассмотренном примере в качестве первого атрибута задается функция succpict(), тем самым обеспечивается повторение вызова функции через каждые две секунды. Просмотр изображений будет прекращен после нажатия кнопки Остановить. Если просмотр изображений требуется продолжить, то следует щелкнуть по кнопке Начать снова.

Пример. Использование функции setTimeout

<HTML>

<HEAD>

<ТITLE>Повторение с помощью функции setTimeout</TITLE>

var k = 1

function ref() {k = 6}

function succpict()

{

var d = document

if (k <= 5)

{if (k == 1) {d.mypict.src = "1.png"; k++}

else if (k == 2) {d.mypict.src = "2.png"; k++}

else if (k == 3) {d.mypict.src = "3.png"; k++}

else if (k == 4) {d.mypict.src = "4.png"; k++}

else if (k == 5) {d.mypict.src = "5.png"; k=1}

setTimeout("succpict()", 2000)

}

</script>

</HEAD>

<Р>Просмотр рисунков</Р>

<FORM>

</FORM>

</BODY>

</HTML>

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

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

При решении такой задачи воспользуемся свойством width объекта image. При каждом вызове функции succpict2() изменяется размер выводимого изображения и этим достигается эффект удаления от зрителя. Функция setTimeout ("succpict2()", 500) производит повторный вызов функции succpict2() через каждые полсекунды. Когда размер изображения уменьшится до заданного, движение прекратится.

Пример. Эффект удаления изображения от зрителя

<HTML>

<HEAD>

<TITLE>Удаляющееся изображение</TITLE>

function succpict()

{

var d = document;

var w = d.mypict.width

if (w > 150)

{d.mypict.width = w-10

d.mypict.src = "msm.gif"

setTimeout("succpict()", 500)

}

</script>

</HEAD>

<BODY>

<H4>При наведении курсора мыши над рисунком изображение начинает удаляться от зрителя</Н4>

</BODY>

</HTML>

Задания.

Создайте web-документ, стилистическое оформление которого – во внешнем файле css. Название cтраницы – javascript. В мета-теге укажите кодировку Unicode

В заголовке разместите надпись Изображения. В секции контент: разместите рисунок размером 600 x 400. Запрограммируйте изменение изображения следующим образом. При перемещении курсора по\над картинкой требуется изменить графическое изображение на другое. Если курсор мыши выходит за пределы картинки, то подставляется первоначальная картинка.

2) Используйте внешний css файл стилистическое оформление web-страницы из предыдущей лабораторной работы (body – 100% на100%, золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

В заголовке разместите надпись Анимация. В секции контент: разместите блок div, содержащий слово: «Зима», ниже – зимнюю картинку размером 600 x 400, ниже картинки – две кнопки с надписями «Начать анимацию» и «Остановить анимацию». Нажатие первой кнопки обрабатывается следующим образом: содержание блока div меняется на «Весна», «Лето», «Осень» и так циклически. Соответствующие картинки меняются аналогично. Периодичность 1 сек.

Нажатие второй кнопки останавливает анимацию.

Для выполнения работы используйте при создании функции объект Document c методом и свойством getElementById(“имя блока”).innerHTML=

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

4.Сделать выводы.

ЛАБОРАТОРНЫЕ РАБОТЫ №20-21

Массивы в Javascript

Цель работ: ознакомиться со способами работы с массивами в Javascript

Краткая теория.

Массивом называется переменная, содержащая данные одного типа. Различают статические и динамические, одномерные и многомерные массивы. Массивы создаются с помощью объекта Array().

Статические массивы

При работе со статическими массивами заранее задается количество элементов. Объявление массива осуществляется следующим образом:

Имя массива= new Array(количество элементов массива)

Затем происходит процедура инициализации массива, когда элементам массива присваиваются значения.

В предлагаемом ниже примере создается статический массив River, содержащий n элементов. Затем происходит процедура инициализации. Далее заполняется строка str, содержащая элементы массива, разделенные тэгом разрыва строки.

var n, i, str;

n = 5;

River = new Array(n);

River[0] = "Амазонка";

River[1] = "Парана";

River[2] = "Нил";

River[3] = "Миссисипи";

River[4] = "Ориноко";

str = "<br/>";

for (i = 0; i < n; i++) {

str += River[i] + "<br/>";

}

document.write(str);

Динамические массивы

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

Имя массива = new Array("элемент 1", "элемент 2", …, "элемент N")

Определение количества элементов динамического массива осуществляется с помощью инструкции следующего вида: количество элементов массива = имя массива.length

В приводимом примере будет показано создание динамического массива.

var n, i, str;

City = new Array("Москва", "Лондон", "Париж", "Токио", "Санкт-Петербург");

n = City.length

str = "<br/>";

for (i = 0; i < n; i++) {

str += City[i] + "<br/>";

}

document.write(str);

Метод reverse() применяется для изменения порядка элементов массива на противоположный. Предположим, массив упорядочен следующим образом:

a = new Array('мать','видит','дочь');

Упорядочим его в обратном порядке, вызвав метод a.reverse(). Тогда новый массив a будет содержать:

a[0]='дочь';

a[1]='видит';

a[2]='мать

Рассмотрим метод sort(). Этот метод интерпретирует элементы массива как строковые литералы и сортирует массив в алфавитном порядке. Если взять массив из предыдущего примера и применить a.sort() , то на выходе будет:

a[0]='видит';

a[1]='дочь';

a[2]='мать';

Но это может оказаться неудобным, если требуется отсортировать числа, поскольку согласно алфавитному порядку 40 идет раньше чем 5. Для решения проблемы у метода sort() имеется необязательный аргумент, являющийся именем функции, согласно которой требуется отсортировать массив, т.е. в этом случае вызов метода имеет вид: a.sort(myfunction). Эта функция должна удовлетворять определенным требованиям: у нее должно быть ровно два аргумента; функция должна возвращать число; если первый аргумент функции должен считаться меньшим (большим, равным) чем второй аргумент, то функция должна возвратить отрицательное (положительное, ноль) значение.

Например, если нам требуется сортировать числа, то можно описать следующую функцию:

function compar(a,b)

{

if(a < b) return -1;

if(a > b) return 1;

if(a == b) return 0;

}

Рассмотрим массив b = new Array(10,6,300,25,18) и сравним результаты сортировки без аргумента и с функцией compar в качестве аргумента:

document.write("Алфавитный порядок:<BR>");

document.write(b.sort());

document.write("<BR>Числовой порядок:<BR>");

document.write(b.sort(compar));

В результате выполнения этого кода будет следующее:

Алфавитный порядок:

10,18,25,300,6

Числовой порядок:

6,10,18,25,300

Стоит обратить внимание, что метод sort() интерпретирует элементы массива как строки (и производит лексикографическую сортировку), но не преобразует их в строки. Если в массиве были числа, то они числами и останутся. В этом убедиться, если в конце последнего примера выполнить команду document.write(b[3]+1): результат будет 26 (т.е. 25+1), а не 251 (т.е. "25"+1).

Многомерные массивы

Многомерными называются массивы, размерность которых больше единицы. Обычно они используются совместно с вложенными операторами цикла For…Next. В приводимой ниже примере находится сумма элементов двумерного массива.

var i, j, n, m, sum,str;

a = new Array();

a[0] = new Array(1, 2, 3, 4);

a[1] = new Array(5, 6, 7,8);

a[2] = new Array(9,10,11,12);

a[3] = new Array(13,14,15,16);

m = 4;

n = 4;

sum = 0;

for (i = 0; i < n; i++) {

for (j = 0; j < m; j++) {

sum += a[j][i];

}

str = "Сумма массива = " + sum;

document.write(str);

Сортировка массивов

Объект Array содержит метод сортировки Sort. С его помощью можно упорядочить массив, а также найти его наибольший и наименьший элементы. После сортировки по возрастанию минимальный элемент массива приобретает индекс, равный нулю, а максимальный элемент - n-1. Сказанное выше проиллюстрировано следующим листингом.

var n, i, str,Alpha_min,Alpha_max;

Alpha = new Array(12, -6, 11, 8, -4, 9, 15, 23, 61, -2);

n = Alpha.length

str = "Массив до сортировки: " + "<br/>";

for (i = 0; i < n; i++) {

str += Alpha[i] + "<br/>";

}

str += "<br/>" + "Массив после сортировки: " + "<br/>";

function compare(x, y) {

return x - y;

}

Alpha.sort(compare);

for (i = 0; i < n; i++) {

str += Alpha[i] + "<br/>";

}

Alpha_min = Alpha[0];

Alpha_max = Alpha[n - 1];

str += "<br>" + "Минимальный элемент массива = " + Alpha_min + "<br>" +

+"Максимальный элемент массива = " + Alpha_max;

document.write(str);

Задания.

1)Используйте внешний css файл стилистическое оформление web-страницы из предыдущих лабораторных работ (body – 100% на100%,золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

Создайте web-документ, стилистическое оформление которого – во внешнем файле css. Название cтраницы – javascript lr20. В заголовке разместите надпись Массивы. В секции контент: создайте секцию div (пока – с пустым содержанием), создайте массив, состоящий из элементов – праздников года (по порядку – Новый год, Рождество, Старый Новый Год, Валентинов День, 23 Февраля, Славянский Новый Год (1 марта) и т.п.). Ниже div – 2 кнопки с надписями «Праздники Год» и «Праздники в обратном порядке». При нажатии на первую в секцию выйдет: Праздники Года: + содержание массива в секции div. При нажатии на вторую - Праздники в обратном порядке: + элементы массива в обратном порядке.

2) Используйте внешний css файл стилистическое оформление web-страницы из предыдущих лабораторных работ (body – 100% на100%, золотистый фон, зеленый шрифт 20px. Внешние отступы 0. Стиль оформления заголовка: красный фон, шрифт черный 30 px, поля 10px, текст-по центру, высота секции 20%. Стиль оформления секции контент: черный фон, шрифт белый, поля 10px).

Создайте web-документ, стилистическое оформление которого – во внешнем файле css. Название страницы – javascript lr21. В заголовке разместите надпись Массивы. В секции контент:

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

Требования к отчетам:

1.Цель работ.

2.Кратко теория\методика.

4.Сделать выводы.