Лабораторная работа : Java script

Размещение javascript-кода

Javascript-код может быть размещен как на самой странице, так и во внешнем файле.

Javascript-код на странице

Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами <script></script>, которые в свою очередь обычно находятся в тегах <head></head>. У тега <script> должен быть указан параметр language, который и указывает язык написания скрипта:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</body>

</html>

Теоретически теги <script></script> могут располагаться и в теле документа (в тегах <body></body>). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов <script></script>). Использовать такой способ сейчас не принято.

Javascript-код во внешнем файле

Создайте в блокноте страницу (пока пустую) и сохраните ее как script.js в ту же папку, где лежит html-страница:

JavaScript обработчики событий

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:

<html>

<head>

<title>Заголовок документа</title>

document.write("Моя первая страница.");

</script>

</head>

<body>

</body>

</html>

Откройте эту страницу в браузере, она выглядит так:

Моя первая страница

Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция)

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:

document.write позволяет писать текст в текущую страницу,

window.open открывает новое окно браузера.

Также объекты имеют свойства, например:

document.bgcolor содержит значение фонового цвета текущей страницы,

document.title содержит заголовок страницы.

Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.

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

Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).

Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.

событие	когда происходит	обработчик события
Blur	потеря объектом фокуса	onBlur
Change	пользователь изменяет значение элемента	onChange
Click	пользователь щелкает мыщью по объекту	onClick
DblClick	пользователь делает двойной щелчок мышью по объекту	onDblClick
DragDrop	пользователь перетаскивает мышью объект	onDragDrop
Error	возникновение javascript-ошибки	onError
Focus	окно или элемент формы получает фокус	onFocus
KeyDown	пользователь нажимает клавишу клавиатуры	onKeyDown
KeyPress	пользователь удерживает нажатой клавишу клавиатуры	onKeyPress
KeyUp	пользователь отпускает клавишу клавиатуры	onKeyUp
Load	документ загружается в браузер	onLoad
MouseDown	пользователь нажимает кнопку мыши	onMouseDown
MouseOut	указатель мыши выходит за пределы элемента	onMouseOut
MouseOver	указатель мыши помещается над элементом	onMouseOver
MouseUp	пользователь отпускает кнопку мыши	onMouseUp
Move	пользователь перемещает окно	onMove
Reset	пользователь нажимает кнопку "reset" формы	onReset
Resize	пользователь изменяет размеры окна или элемента	onResize
Select	пользователь выбирает элемент формы	onSelect
Submit	пользователь нажимает кнопку "submit" формы	onSubmit
Unload	пользователь закрывает документ	onUnload

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

Функции

Функция - это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:

function имя (){

оператор;

.......

оператор;

}

Сначала идет ключевое слово function, затем имя функции, затем в круглых скобках перечисляются параметры (если они есть), затем в фигурных скобках перечисляются операторы, т.е. последовательность выполняемых действий. Каждый оператор заканчивается точкой с запятой.

Рассмотрим на примере. Во втором уроке мы создали html-страницу, страницу script.js для функций и подключили одну к другой. Эти страницы мы и будем использовать. Поместим в html-страницу следующий код:

<html>

<head>

<title>Заголовокдокумента</title>

</head>

<body>

<div onClick="showMessage();">Щелкнименя</div>

</body>

</html>

Мы указали, что при щелчке пользователя по div-у (т.е. по словам "Щелкни меня") должна быть вызвана функция с именем "showMessage". Теперь на странице script.js надо написать саму функцию "showMessage". Открываем страницу script.js и пишем:

function showMessage(){

alert ("Вы щелкнули по div-у");

}

Наша функция "showMessage" будет выполнять одно действие - отображать окно предупреждений с текстом "Вы щелкнули по div-у". alert - это стандартная функция javascript, которая и выводит окно предупреждений, мы лишь задаем текст для этого окна.

В javascript есть стандартный набор функций, который можно использовать (например, alert) и так называемые пользовательские функции, т.е. те, которые мы создаем сами. Некоторые функции javascript мы будем изучать по мере необходимости, некоторым же будут посвящены отдельные уроки.

Вернемся к нашему примеру. Откройте вашу html-страницу с помощью браузера и щелкните по div-у. Можете щелкнуть и в примере ниже.

Щелкни меня

Таким образом, мы рассмотрели механизм работы обработки событий:

В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда настанет событие.

На странице с расширение .js мы пишем код этой функции, т.е. инструкции, которые должны быть выполнены, если функция инициализирована (к ней обратились).

Давайте усложним задачу и напишем сценарий, который будет рассчитывать площадь прямоугольника по введенным пользователем длине и ширине. Для этого сначала разместим на html-странице нужные элементы формы:

<html>

<head>

<title>Расчет площади прямоугольника</title>

</head>

<body>

Введитедлинупрямоугольника<input type="text" name="t1" size="10"><br><br>

Введитеширинупрямоугольника<input type="text" name="t2" size="10"><br><br>

Площадьпрямоугольникаравна<input type="text" name="res" size="10">

</form>

</body>

</html>

Итак, пользователь вводит значения ширины и длины и нажимает на кнопку "Вычислить". После чего, в поле площадь должен появиться результат. Таким образом, событие наступает при нажатии на кнопку "Вычислить", значит именно к ней мы и привяжем обработчик события. Функцию вычисления площади назовем "areaRectangle":

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle();"><br><br>

.......

Теперь пришло время написать саму функцию "areaRectangle". Для этого откроем страницу script.js и напишем заготовку для функции:

function areaRectangle(){

}

Теперь надо написать тело функции. Для начала объявим три переменные: a - значение длины прямоугольника, b - значение ширины прямоугольника, s - площадь прямоугольника:

function areaRectangle(){

var a;

var b;

var s;

}

Значение (value) a должно браться из текущей страницы (document), из формы с именем "forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value, т.е. перечисляются через точку имена объектов от родительского до нужного (иерархическую структуру объектов мы обсуждали в предыдущем уроке). Последним указывается необходимое свойство объекта (value).

Аналогично и для значения b - document.forma1.t2.value.

А наша переменная s - есть произведение a на b. Запишем это в тело функции:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

}

Осталось только написать инструкцию записи вычисленной площади в текстовое поле с именем "res" нашей формы. Т.е нам надо, чтобы в текщую страницу, в форму с именем "forma1", в текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Так и запишем:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

document.forma1.res.value=s;

}

Параметры функций

Обратите внимание, в функции мы используем имя формы - forma1, его мы и сделаем параметром. Т.е. перепишем нашу функцию следующим образом:

function areaRectangle(obj){

var a=obj.t1.value;

var b=obj.t2.value;

var s=a*b;

obj.res.value=s;

}

Т.е мы указали, что функция должна принять в качестве параметра какой-то объект (obj) и производить все действия с ним. Нам осталось на нашей html-странице указать имя объекта:

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle(forma1);"><br><br>

.......

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

Ветвления в программе - оператор if

Очень часто возникает ситуация, когда нам нужно выполнить какое-либо действие в зависимости от какого-либо условия. Например, у нас интернет-магазин одежды. Мы спрашиваем у пользователя кто он (мужчина или женщина) и в зависимости от ответа отображаем список соответствующих товаров (мужских или женских). При написании подобных программ используется условный оператор if . Синтаксис у него следующий:

if B {S1}

else {S2}

где B - выражение логического типа, а S1 и S2 - операторы.

Работает это так: вычисляется значение выражения B, если оно истинно, то выполняется оператор S1, если оно ложно, то выполняется оператор S2.

Пример

function maxZnach(obj){

var a=1*obj.zn1.value;

var b=1*obj.zn2.value;

var c=1*obj.zn3.value;

var m=a;

if (b>m) m=b;

if (c>m) m=c;

obj.res.value=m;

}

Оператор выбора switch

В предыдущем уроке мы познакомились с оператором if. Он удобен, когда нужно совершить какое-либо действие в зависимости от выбора пользователя. Но что если таких выборов будет много? Например, мы знаем прогноз погоды на неделю вперед. А выдаем прогноз только на один день, на тот который выберет пользователь. Как это сделать?

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

switch (B)

{

case L1: S1;

case L2: S2;

... ... ...

case Ln: Sn;

default:S

}

где B - выражение, L1, L2, ..., Ln - литералы, а S1, S2, ..., Sn - операторы.

Работает это так: вычисляется значение выражения B. Если B равно L1, то выполняется оператор S1. Если B равно L2, то выполняется оператор S2 и т.д. Если B не равно ни одному из значений, то выполняется оператор S.

Давайте перепишем код нашей последней функции с помощью оператора switch.

function Vday1(obj){

var a=obj.zn.value;

var s;

switch (a)

{

case 'понедельник': s="В понедельник будет ветрено, температура воздуха поднимется до +20 градусов";break;

case 'вторник': s="Во вторник будет солнечно, температура воздуха поднимется до +25 градусов"; break;

case 'среда': s="В среду будет прохладно, температура воздуха опустится до +17 градусов"; break;

case 'четверг': s="В четверг будет пасмурно, температура воздуха опустится до +10 градусов"; break;

case 'пятница': s="В пятницу будет облачно, температура воздуха поднимется до +15 градусов"; break;

case 'суббота': s="В субботу будет ветрено, температура воздуха поднимется до +27 градусов"; break;

case 'воскресенье': s="В воскресенье будет ясно, температура воздуха поднимется до +30 градусов";break;

default: s='Укажите правильно день недели'

}

obj.res.value=s;

}

Результат тот же, а код гораздо короче, да и читабельнее.

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

Циклы

Цикл for

Самый популярный вид циклов - цикл for. Синтаксис у него следующий:

for (A; B; I){S}

где

A - первоначальное выражение,

B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,

I - выражение инкремента,

{} - тело цикла,

S - операторы.

function summa(obj) {

var summa=0;

var a1=1*obj.a1.value;

var a2=1*obj.a2.value;

for (var i = a1; i <= a2; i++) {

summa+=i;

}

obj.result.value = summa;

}

Цикл while

Не менее популярный вид циклов - цикл while. Синтаксис у него следующий:

while (B){S}

где

B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,

{} - тело цикла,

S - операторы.

Иными словами, операторы S, выполняются до тех пор, пока условие B не станет ложным.

var i = 0;

while (i < 3)

{

alert(i);

i++;

}