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

Если в форме нужно заполнить много полей, то пользователю удобно получать сообщения об ошибках сразу после окончания ввода данных в очередное поле, то есть после нажатия клавиши Tab или клавиши со стрелкой. Для немедленной проверки введённых данных служит событие onchange:

<INPUT TYPE ="text"SIZE=6 onchange="arg(this)">

Функция, вызываемая событием onchange, имеет примерно такую структуру:

function arg(fld)
{ x=fld.value //введённое значение
if(x...) //условия проверки
{ alert("Сообщение об ошибке");
fld.focus();
fld.select()
}
}

Методы focus() и select() служат для возвращения курсора мышки в поле ввода и выделения ошибочных данных. Эти методы без использования специальных приёмов правильно работают только в браузере Mozilla.

Рис. 1

Задача 3.2. Создайте страницу (рис. 1) для вычисления тригонометрических функций. Вводимые пользователем данные должны проверяться немедленно после ввода и после нажатия кнопки Вычислить.

Указания.Не забудьте перевести градусы в радианы. Название тригонометрической функции можно передавать как параметр тега:

<option value="sin"... >

Сформируйте текстовую строку вида

"Math." + имя_ф + "(" + знач_аргумета + ")" // имя_ф – sin,cos или tan

Затем воспользуйтесь функцией eval(строка), которая выполняет выражение, хранящееся в строке.

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

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

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

Изображения, размещаемые на сайтах, должны удовлетворять двум противоречащим друг другу требованиям. Они должны иметь высокое качество и быстро загружаться, но чем выше качество изображения, тем больше занимаемый изображением объём памяти и тем медленнее оно загружается. Задача построения изображения, имеющего приемлемые объём и качество, решается с помощь графических пакетов прикладных программ, например, Photoshop с подключённым к нему пакетом ImageReady.

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

Для загрузки изображения в память без отображения его на экране служит объект Image, которому не соответствует ни один элемент HTML-документа. Создаётся и используется объект Image так:

var risunok = new Image(ширина, высота) //создание объекта
risunok.src = "pict.jpg" //загрузка pict.jpg в память
document.images[0].src = risunok.src //отображение на экране

Задача 4.1. Создайте страницу (рис. 2), на которой пользователь может просматривать фотографии, выбирая их названия из поля со списком (тег <SELECT>).

Рис. 2

Указания. Используйте ассоциативный массив, элементами которого будут объекты Image, то есть фотографии, а ключами – значения атрибута VALUE тега <SELECT>. Создание массива и одного элемента делается так:

var photo= new Array()
photo["les"] = new Image(400,550);//элемент массива - объект
photo["les"].src = "les.jpg";//свойство объекта -имя файла
//с рисунком

Вызов функции, которая вызывает появление в окне браузера выбранной фотография, производится при щелчке мышкой по элементу списка.Это событие называется onchange. В качестве параметра функции передаётся объект SELECT:

<SELECT onchange= "prosm(this)">
<option value="les">Лес

Функция, правильно воспринимаемая браузерами Internet Explorer и Mozilla, состоит из трёх строк:

function prosm(list)
{d = list.options[list.selectedIndex].value //d ="les"
document.fot.src = photo[d].src; //fot – имя тега IMG }

Файлы с фотографиями предоставит преподаватель.

Рисование

В JavaScript нет специальных средств для создания и редактирования изображений. Отрезок вертикальной прямой можно изобразить с помощью тега <DIV>, задав ширину и высоту контейнера равными толщине и длине линии соответственно. Горизонтальный отрезок строится с помощью тега <DIV> и вложенного в него тега <HR>.

Идея метода рисования кривой, описанной аналитически, состоит в следующем:

• создаётся картинка размером 1 пиксель, залитая чёрным или каким-то другим цветом,
• эта картинка размножается по заданной траектории.

В примере 4.1 описанными методами строятся четыре прямых.

Пример 4.1

<HTML>
<HEAD><TITLE>Прямые линии</TITLE>
<script> line(100,100,400,400,3)
line(100,400,400,100,10)
function line(x1,y1,x2,y2,n)
{ var xstr= ""
var xstr0= '<IMG SRC = "Tochka.bmp" WIDTH = '+n+' HEIGHT='+n+' STYLE="position:absolute;"'
var k =(y2-y1)/(x2-x1)
x = x1
while (x<=x2)
{xstr+=xstr0+'top:'+(k*(x-x1)+y1)+';left:'+x+'">' x++
}document.write(xstr)
}</script></HEAD>
<BODY>
<div style="position:absolute;left:110;font-size:20pt">
Рисование прямых линий</div>
<DIV id="dd" STYLE="position:absolute;top:250;left:100;
width:300;height:1;"><hr noshade></div><div ID="kv"
STYLE="position:absolute;top:100;left:250;
width:1;HEIGHT:300;background-color:#ff0099">
</div>
</BODY>
</HTML>

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

Все прямые пересекаются в одной точке (рис. 3). Горизонтальная и вертикальная прямые построены без использования скрипта. Наклонных прямые построены с помощью функции line(x1,y1,x2,y2,n), где x1, y1 – координаты начала отрезка прямой, x2, y2 – координаты конца, n – толщина линии.

Рис. 3

Задача 4.2. Создайте страницу (рис. 4), на которой строится эллипс с задаваемыми пользователем размерами большой и малой полуосей.

Указания. Для построения эллипса удобно использовать его параметрические уравнения:

x = a* cos(t); y = b*sin(t),
где: a, b – полуоси, 0 <= t <= 2?

Рис. 4

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

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

Движение

Для управления движением объекта используются:

• метод имя процесса= setInterval(выражение,период) объекта window, запускающий процесс циклического выполнения выражения (функции);
• метод clearInterval(имя процесса) объекта window, останавливающий процесс.

Методом setInterval(выражение, период) запускается процесс, состоящий в циклическом выполнении заданного в первом параметре выражения с периодом, заданным во втором параметре. Процесс останавливается методом clearInterval(имя процесса). В качестве выражения обычно используется функция. Скрипт, задающий движение фотографии по диагонали экрана, приведён в примере 5.1.

Пример 5.1

<HTML>
<HEAD><TITLE>Движение фотографии</TITLE>
</HEAD>
<BODY >
<BUTTON ID="B1" onclick=Start_stop()
STYLE="position:absolute; left:300;top:5">
Запустить</button>
<IMG ID="lv" src="LV.jpg"
STYLE="position:absolute;top:0;left:20">
</BODY>
<SCRIPT>
dx=8;
dy=3
st=false //остановить процесс
function Start_stop()
{ if(st)
{ window.clearInterval(proc) //остановиться
st=false //заменить надпись на кнопке с именем В1
document.all.B1.innerHTML="Запустить"
}
else //двигаться (запустить процесс с именем proc)
{ proc=window.setInterval("move()",100)

st=true
//заменить надпись на кнопке с именем В1
document.all.B1.innerHTML="Стоп"

}
}
function move()
{ //ордината верхнего края фотографии (переведено

//в тип INTEGER)
var y=parseInt(document.all.lv.style.top)
//абсцисса левого края фотографии
var x=parseInt(document.all.lv.style.left)
document.all.lv.style.top=y+dy //Перемещение по OY
document.all.lv.style.left=x+dx //Перемещение по OX

}
</script>
</HTML>

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

В исходном состоянии фотография находится в верхнем левом углу экрана. Для запуска и остановки движения служит кнопка. Надпись на кнопке меняется. Если фотография неподвижна,то на кнопке написано Запустить, при движении – Стоп.

В браузере Internet Explorer надпись на кнопке можно изменить с помощью свойства innerText:

document.all.B1.innerText="Запустить"
document.all.B1.innerText= "Стоп"

Браузер Mozilla Firefox не поддерживает свойство innerText, поэтому в примере использовано свойство innerHTML, поддерживаемое обоими браузерами. При нажатии кнопки выполняется функция Start_stop, служащая для запуска или остановки процесса proc. Если proc запущен, то через каждые 100 мсек вызывается функция move, перемещающая фотографию на 8 пикселей вправо и на 3 вниз.

Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать параметрическими уравнениями:

y=R*sin(t),
где: R– радиус круга, 0 <= t <= 2

Квадратом может служить контейнер <DIV> …</div> с цветным фоном.

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

В сценариях для перетаскивания какого-либо предмета по окну браузера используется событие onmousemove. Рассмотрим два варианта сценария, в которых используется событие onmousemove. В обоих сценариях пользователь может мышкой передвигать фотографию по всему окну браузера. Первый вариант сценария (пример 5.2) применим только в браузере Internet Explorer. Второй вариант (пример 5.3) правильно выполняется в браузерах Internet Explorer 6.0 и MozillaFirefox 2.0, но он сложнее для понимания.

Пример 5.2.

<HTML>
<HEAD><TITLE>ПЕРЕМЕЩЕНИЕ ИЗОБРАЖЕНИЯ МЫШКОЙ
</TITLE> </HEAD>
<BODY id="body1" STYLE="font-size:12pt">
< H2 align= "center"style= "color:#ff00ff">
Перетаскивание фотографии мышкой</h2>
<P align= "center">
Фотография начинает двигаться при попадании на неё курсора мышки<BR> При захвате и перемещении фотографии не нажимайте кнопки мышки.<BR> Для прекращения движения щёлкните левой кнопкой мышки</p>
<P align= right> Примечание. Страница правильно отображается тольков браузере <i>InternetExplorer 6.0</i></p> <img id= "IM1" src= "LV.jpg"" STYLE= "position:absolute;top:200;left:10">
</BODY>
<SCRIPT> flag= false //запрет на перемещения
// Функция запускается припересечении
// курсором мышки границы изображения
function IM1.onmouseover()
{flag= true }
// Перетаскивание разрешено //
function IM1.onmousemove()
{ if (flag)
{ //пересчёткоординатизображения

document.all.IM1.style.top= event.clientY-170
document.all.IM1.style.left=event.clientX-120

}
}//запрет на перемещения. Запускается при отпускании кнопки мышки
function IM1.onclick()
{flag=false }
</SCRIPT>
<SCRIPT language="JavaScript" src="ProvBrows.js">
</script>
</HTML>

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

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

В сценарии используются три функции:

• IM1.onmouseover() для запуска процесса перетаскивания;
• IM1.onmousemove для перетаскивания;
• IM1.onclick() для прекращения перетаскивания.

Все три функции имеют специальные имена. IM1.onmouseоver() означает, что эта функция выполняется, когда на объекте с ID=IM1 происходит событие onmouseоver(). Для функций со специальным именами не нужны операторы вызова.

Функция IM1.onmousemove() выполняется циклически в течение всего времени нахождения курсора мышки в площади фотографии. Так как частота выполнения функции не бесконечная, то при резком движении мышкой можно сорвать курсор с фотографии и прекратить перетаскивание, но такое завершение процесса неудобно. Для управления процессом перетаскивания предназначена логическая переменная flag. Если щёлкнуть кнопкой мышки по фотографии, то выполнится функция IM1.onclick(), переменная flag примет значение false и функция IM1.onmousemove() прекратит менять координаты фотографии. Можно будет убрать курсор с фотографии. Если снова хотя бы коснуться курсором фотографии, то выполнится функция IM1.onmouseover(), переменная flag примет значении true и перетаскивание возобновится.

Во втором варианте сценария (пример5.3) неиспользуются функции со специальными именами.

Пример 5.3

<html>
<head><title>Перетаскивание</title></head>
<body onload= "init()">
<h2 align= "center" style="color:#ff00ff">
Перетаскиваниеквадрата мышкой</h2> <h3>align="center">
Установите курсор внутри красногоквадрата, нажмите левую кнопку
мышки и тащите квадрат.<BR> Для освобождения квадрата
от захвата отпустите кнопку мышки</h3>
<P align= right> Примечание. Страница правильно
отображается в браузерах <i>Mozilla Firefox 2.0</i>
и <i>Internet Explorer 6.0 </i> </p>
<DIV id= 'kv' style=
"position:absolute;left:10;top:10;width:50;height:50;background-color:red">
</div>
</body>
<SCRIPT>
flag= false; //Связывание событий с функциями
function init()
{ //Если мышка двигается то выполняется ф-ция dragIt

document.all.kv.onmousemove= dragIt
//Если кнопка мышки отпускается, то - ф-ция osvobodi
document.all.kv.onmouseup= osvobodi
document.all.kv.onmousedown=zachvat

}
function dragIt(evt)
{ Параметр evt создаётся самим браузером

sobytie=(evt)? evt:(window.event)?window.event: "";
if(flag)
{ document.all.kv.style.top=sobytie.clientY-25;
document.all.kv.style.left=sobytie.clientX-25; <

}
}
function osvobodi()
{ flag=false;//устанавливается запрет на перетаскивание
}
function zachvat()
{ flag=true;//Перетаскивание разрешается
}
</SCRIPT>
</html>

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

В отличие от первого варианта во втором явно вызывается одна функция. Строка

<bodyonload ="init()">

предписывает при загрузке HTML-документа вызвать функцию init(). В результате выполнения функции init() события, происходящие с объектом, имеющим идентификатор kv, будут вызывать выполнение функций dragIt, osvobodi и zachvat. Объект kv – это контейнер <DIV>, задающий красный квадрат, перетаскиваемый мышкой.

Функция zachvat(), разрешающая начать перетаскивание, выполняется при нажатии кнопки мышки на квадрате, то есть когда происходит событие onmousedown. Функция osvobodi() выполняется при отпускании кнопки мышки (событие onmouseup) и запрещает перетаскивание.

Функция dragIt(evt) связана с событием onmousemove и поэтому циклически выполняется в течение всего времени нахождения курсора мышки на фотографии. Параметр evt – это объект события, созданный в ответ на действие пользователя. В Internet Explorer объект события имеет обозначение window.event или просто event. В Mozilla Firefox объект события обозначается как evt. Для совместимости обоих случаев служит условный оператор

sobytie = (evt)? evt: window.event;

или в более привычной форме

if(evt) sobytie=evt
else sobytie=window.event

Задача 5.2. Измените последний пример так, чтобы красный квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.

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

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

Для разработчиков веб-сайтов было бы идеальным строгое соблюдение стандарта W3C DOM во всех типах и версиях браузеров. К сожалению, даже в самых последних версиях браузеров стандарт объектной модели поддерживается не полностью. В объектные модели браузеров вводятся объекты, события, свойства и методы, отсутствующие в стандарте. Поэтому создание страниц, правильно отображаемых браузерами разных типов, представляет собой очень сложную задачу. В самом простом случае сайт тщательно отлаживается только на браузере одного типа и одной версии, а пользователи всех других браузеров при открытии сайта получают предупреждение об отсутствии гарантий правильного отображения сайта. Такой подход вполне приемлем для информационной системы, используемой одной организацией, например, банком, имеющим свою сеть Интранет.