2015-10-22
314
На странице выводится изображение pic1.gif и текстовая ссылка " Показать анимацию", при нажатии на которую начинается последовательная смена изображений (анимация).
(Сценарий может не работать в браузере MSIE.)
Разбор сценария
Мы начинаем с предварительной загрузки изображений. Обратите внимание, что это происходит вне функции, так же, как и задание переменной num. Это выглядит следующим образом:
<SCRIPT type="text/javascript"> var num=1 img1 = new Image (150,150) img1.src = "pic1.gif" img2 = new Image (150,150) img2.src = "pic2.gif" img3 = new Image (150,150) img3.src = "pic3.gif"Теперь функция:
function startshow() { for (i=1; i<21; i=i+1){document.mypic.src=eval("img"+num+".src") for(x=1; x<8000; x=x+1) {} num=num+1 if(num==4) {num=1} } document.mypic.src=img1.src } </SCRIPT>startshow() содержит новый элемент, вложенные циклы! Видите, внутри первого цикла for находится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.
Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 8000 после появления каждой картинки. На это уходят доли секунды.
|
|
|
Внешний цикл заставляет программу повторяться в цикле 21 раз. Видите это в функции: в первом операторе цикла for (i=1; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.
Когда цикл закончится, картинка снова вернется к pic1.gif.
Вот команда, которая помещает первое изображение на страницу:
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt="">Обратите внимание, что имя задано как "mypic". Если посмотреть на иерархию операторов в сценарии, то оно находится между document и src.
И наконец ссылка, которая запускает анимацию:
<A HREF="JavaScript:startshow()">Показать анимацию</a>Снова команда HREF указывает на JavaScript:функция(), чтобы все глобальные переменные были доступны.
Задание
Перепишите программу анимации. Пусть первым будет pic1.gif, как в данном примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет "быстро", 1600 — "умеренно", 2400 — "медленно". Запускать анимацию должна текстовая ссылка "Показать анимацию".
Возможное решение
В программу включено окно alert, чтобы показывать значение переменной howfast (как быстро). alert — это хороший инструмент отладки программ. Просмотр значений переменных часто помогает определить, где программа ведет себя не так, как хотелось бы.
Еще обратите особое внимание на параметр sp (speed, скорость) внутри функции startshow(). Он позволяет передавать в функцию данные, которые вводит пользователь.
|
|
|
И последнее — метод toUpperCase(). С его помощью все варианты написания "slow", "Slow", "sLOW" преобразуются в "SLOW". Хороший прием, не правда ли?
Вот сценарий:
<html><head><SCRIPT type="text/javascript"> num=1 img1 = new Image () img1.src = "pic1.gif" img2 = new Image () img2.src = "pic2.gif" img3 = new Image () img3.src = "pic3.gif" function startshow(sp) { howfast=1600 if (sp.toUpperCase() == "SLOW") {howfast=2400} if(sp.toUpperCase() == "FAST") {howfast=800} alert(howfast) for (i=1; i<21; i=i+1) {document.mypic.src=eval("img"+num+".src") for(x=1; x<howfast; x=x+1) {} num=num+1 if(num==4) {num=1} } document.mypic.src=img1.src }</script></head><body><center><form name="myform"><img src="pic1.gif" name="mypic" border=0><p>Задайте скорость анимации: (fast, medium, slow) <input type="text" value="medium" name="speed"><p><a href="JavaScript:startshow(document.myform.speed.value)">Показать анимацию</a> </center></form></body></html>29. Урок: Проверка данных в форме:
Предварительная обработка данных форм.
Концепция
Наш последний сценарий JavaScript не из легких, можете в этом не сомневаться.
Снова придется вернуться к формам. В сегодняшнем примере JavaScript применяется для проверки данных, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх). Необходимо также проверить, что первые 5 символов являются цифрами. Это немного сложнее, чем все остальное, но с этим необходимо разобраться. Проверка данных часто является важной задачей для программистов.
Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt(). Сам сценарий будет длиннее, чем обычно.
Сценарий
<HTML><HEAD><SCRIPT type="text/javascript">function validfn(fnm){fnlen=fnm.lengthif (fnlen == 0){alert("Вы должны ввести свое имя")document.dataentry.fn.focus()}}function validphone(phone){len=phone.lengthdigits="0123456789"if(len!= 7 && len!= 9){alert("Неверное количество знаков в номере")document.dataentry.phone.focus()} for(i=0; i<3; i++){if (digits.indexOf(phone.charAt(i))<0){alert("Это должны быть цифры")document.dataentry.phone.focus()break}} }</SCRIPT></HEAD><BODY><FORM NAME="dataentry"><h2>Подтверждение данных</h2> Введите свое имя:<br> <INPUT TYPE="text" NAME="fn" onBlur="validfn(fn.value)"> <SCRIPT LANGUAGE="JavaScript"> document.dataentry.fn.focus()</SCRIPT> Введите номер телефона (ххх-хх-хх):<br> <INPUT TYPE="text" NAME="phone" SIZE=10 > <INPUT TYPE="button" VALUE="Отправить" onClick="validphone(phone.value)"> </BODY></HTML>
