- •Методические указания по выполнению лабораторных работ
- •Задание
- •Часть вторая
- •Задание
- •Часть третья
- •Задание
- •Часть четвертая
- •Рассморим скрипт
- •Задание
- •Лабораторная работа № 2
- •Разбор скрипта
- •Задание
- •Команды и эффекты
- •Задание
- •Лабораторная работа № 3
- •Рассмотрим скрипт.
- •Разбор скрипта
- •События onMouseOut и onUnload
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 4
- •Разбор скрипта
- •Продолжаем рассматривать работу с окнами. Скрипт
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 5
- •Часть 1
- •Разбор скрипта
- •Часть 2
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание № 1
- •Задание № 2
- •Задание № 3
- •Лабораторная работа № 6
- •Скрипт:
- •Разбор скрипта
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание по первой части
- •Задание по второй части
- •Задание по третьей части
- •Начало формы
- •Конец формы
- •Часть вторая
- •Разбор скрипта
- •Часть третья
- •Разбор скрипта
- •Часть четвертая
- •Разбор скрипта
- •Случайное число
- •Лабораторная работа № 8
- •Разбор скрипта
- •Часть вторая
- •Разбор скрипта
- •Задания Задание к первой части
- •Задание ко второй части
Лабораторная работа № 8
Часть первая
Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В данном случае пользователь щелкает по ссылке и переходит к следующей картинке. Используем команду If и переменную num.
Скрипт
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif" function slideshow() { num=num+1 if (num==4) {num=1} document.animal.src=eval("img"+num+".src") } </SCRIPT> </HEAD> <BODY> <CENTER> <IMG SRC="leo.gif" NAME="animal" BORDER=0> <p> <A HREF="JavaScript:slideshow()"> Щелкните, чтобы увидеть следующую картинку</A> </CENTER> </BODY> </HTML>
Разбор скрипта
Разобьем его на две части:
<SCRIPT LANGUAGE="javascript"> var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif"
num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.
(В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.
Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.
Теперь часть №2:
function slideshow() { num=num+1 if (num==4) {num=1} document.animal.src=eval("img"+num+".src") } </script> </head> <body>
Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.
slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.
И наконец:
<a href="JavaScript:slideshow()">Щелкните, чтобы увидеть следующую картинку</a>
Новое заключаетс яв вызове скрипта, а не функции. Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.
В Эксплорере работает и обычная схема, то есть: <a href="" onClick="slideshow()">Щелкайте</a>
Часть вторая
Снова придется вернуться к формам. В попробуем проверить данные, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх). Подтверждение данных часто имеет большое значение.
Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt(). Сам скрипт будет длиннее, чем обычно.
Скрипт
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function validfn(fnm) { fnlen=fnm.length if (fnlen == 0) {alert("Вы должны ввести свое имя") document.dataentry.fn.focus()} } function validphone(phone) { len=phone.length digits="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>