Смотрите задание № 3, которое Вам необходимо выполнить.
Задания
Задание № 1
Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.
Задание № 2
Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.
Задание № 3
Переделайте задание № 2, создав две функции для смены картинки.
Лабораторная работа № 6
Первая часть
Цель — познакомиться с использованием JavaScript в формах.
Рассмотрим скрипт, который через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>.
Скрипт:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<p>Выбрать цвет фона</p>
<FORM>
<INPUT TYPE="button" VALUE="Голубой"
onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
onClick="newcolor('white')">
</FORM>
</BODY>
</HTML>
Разбор скрипта
function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}
<FORM>
<INPUT TYPE="button" VALUE="Голубой"
onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
onClick="newcolor('white')">
</FORM>
- передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
- Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
- Функция ждет, пока поступит необходимая ей информация. Ранее в функциях скобки были пустые. Потому что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет.
Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона. - Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.
Вторая часть
Теперь попробуем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
function Gofindit()
{
var search = document.formsearch.find.value;
{
var searchUrl = "http://av.yahoo.com/bin/query?p=" + search;
location.href = searchUrl;}}
</SCRIPT>
<FORM NAME="formsearch">Найдите в Yahoo:
<INPUT NAME="find" SIZE="40" TYPE="text">
<INPUT TYPE="button" VALUE="Искать" onClick="Gofindit()">
</FORM>
Разбор скрипта
Необходимо четкое понимание иерархии объектов.
- Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
- Вторую функцию помещаем внутри первой.
- Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
- Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
- Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
- Обратите внимание, что форма в целом получила имя formsearch.
- Затем называем текстовое поле find. Опять иерархия.
- Дальше соединяем кнопку с командой onClick, которая запускает функцию.
- Наконец заканчиваем командой </FORM>. Готово.
Третья часть
Продолжаем рассматривать взаимодействие форм и JavaScript.
Обычно JavaScript в соединении с формами используется для проверки ввода данных..
Скрипт
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doit()
{
alert("document.myform.fname.value — это "
+ document.myform.fname.value)
var greeting="Привет, "
alert(greeting + document.myform.fname.value
+ " " + document.myform.lname.value)
alert("Количество букв в имени "
+ document.myform.fname.value.length)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
Ваше имя:
<INPUT TYPE="text" NAME="fname"><p>
Ваша фамилия:
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" VALUE="Отправить" onClick="doit()">
</FORM>
</BODY>
</HTML>
Разбор скрипта
Начнем с элементов формы:
<FORM NAME="myform">
Ваше имя:
<INPUT TYPE="text" NAME="fname"><p>
Ваша фамилия:
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" VALUE="Отправить" onClick="doit()">
</FORM>
Дали форме имя myform. Поле ввода для имени пользователя названо fname, а поле для фамилии — lname. Теперь у каждого элемента есть имя.
Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Тому, что написано в поле fname, будет присвоено имя fname.
Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция doit().
Теперь посмотрим на функцию:
function doit()
{
alert("document.myform.fname.value — это "
+ document.myform.fname.value)
var greeting="Привет, "
alert(greeting + document.myform.fname.value + " "
+ document.myform.lname.value)
alert("Количество букв в имени "
+ document.myform.fname.value.length)
}
Такой передачи данных, как рассматривали в предыдущих частях не происходит. Видите, в скобках функции doit() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму.
Следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, fname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.
Дальше переменная greeting (приветствие). Приветствие показано в команде alert(greeting).
Когда пользователь нажимает на кнопку, всплывает окно с его именем.
Второе окно включает в себя переменную greeting. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.
Наконец всплывает третье окно c неким текстом и вызывает следующее: document.myform.fname.value.length. Этo команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Коля», то длина равна 4. Команда length следует за value.Таким образом она точно сосчитает буквы в тексте, а не что-нибудь другое. length — это тоже свойство.
Задания
Задание по первой части
Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.
Задание по второй части
Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»
Задание по третьей части
Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:
- Мне нравится геометрическая фигура такого-то цвета. (по результатам тех данных, которые пользователь вводит в форму)
- Покажите длину (length) «фигуры».
Лабораторная работа № 7
Часть первая
Рассматривается случайный выбор чисел. Генерируя случайные числа, JavaScript пользуется датой и временем.
Скрипт
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
{
var now=new Date()
var num=(now.getSeconds())%10
var num=num+1
alert(num)
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Случайное число</h1>
<form>
<INPUT TYPE="button"
VALUE="Случайное число от 1 дo 10"
onClick="rand()">
</FORM>
</BODY>
</HTML>
Разбор скрипта
· функция:
function rand()
{
var now=new Date()
var num=(now.getSeconds())%10
var num=num+1
alert(num)
}
· Случайный выбор числа осуществляется в несколько шагов:
Во-первых, создаем функцию, к примеру, rand().
Потом создаем переменную для метода new Date().
И еще одну переменную, num. Она содержит метод getSeconds(), так как в данном случае мы воспользуемся секундами, чтобы выбрать случайное число. Элемент %10говорит скрипту, что нужно выбирать из десяти чисел.
· JavaScript, как и многие другие компьютерные языки, начинает отсчет с нуля. Таким образом, прибавляя к случайному числу единицу (num=num+1), мы задаем числа не от 0 до 9, а от 1 до 10.
· alert показывает число.
· Теперь элемент, запускающий функцию:
<form>
<INPUT TYPE="button" VALUE="Случайное число от 1 дo 10" onClick="rand()">
</form>
· Это обыкновенная кнопка и событие через onClick.
Часть вторая
Рассмотрим командуIF (если), которая дает возможность выбора.
За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.
Скрипт
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function askuser() {
var answer=" "
var statement="Отвечай, да или нет"
var answer=prompt("Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}
</SCRIPT>
</HEAD>
<BODY>
<h2>Горчица</h2>
<FORM>
<INPUT TYPE="button" VALUE="Жми!" onClick="askuser()">
</FORM>
</BODY>
</HTML>
Разбор скрипта
<FORM>
<INPUT TYPE="button" VALUE="Жми!" onClick="askuser()">
</FORM>
Здесь ничего нового, простая форма с кнопкой, которая запускает функцию askuser() (спросить пользователя).
- Фрагмент скрипта с функцией:
function askuser() {
var answer=" "
var statement="Отвечай, да или нет"
var answer=prompt("Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}
- Значение переменной answer (ответ) равно тому, что введет пользователь по запросу.
- На все те случаи, когда пользователь не отвечает «да» или «нет», создается переменная statement (заявление).
- Дальше запрос prompt приравнивается к answer. Теперь две переменные под одним именем.
- Следом за ifидет условие в (круглых скобках).
- В условии ставим не один, а два знaка равенства ==! Одинарный знак = используется вне скобок.
- Помните, отрезки текста ставятся в кавычки.
- Вот как это работает:
- Запрашивается ваше мнение;
- Скрипт сверяет его с условиями;
- Если ответ «да», появляется окно со словами: «Я тоже обожаю горчицу!»
- Если ответ «нет», появляется окно со словами: «Я тоже терпеть не могу горчицу!»
- Если ответ ни тот, ни другой, тогда переменная answer остается пустой и заявление «Отвечай, да или нет» отсылается в alert.
- Помните, что JavaScript чувствителен к регистру. Tо есть если вы напишете «НЕТ»или «Нет», условие не будет выполнено! Чтобы условие было верно, необходимо ввести «нет». Исправить это можно, добавив еще несколько условий IF на все случаи жизни.
Часть третья
Рассматривается случайное число, две функции и командаElse.
If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.
Скрипт
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
{now=new Date()
num=(now.getSeconds())%10
num=num+1
}
function guessnum()
{guess=prompt("Угадай, какое?")
if (eval(guess) == num)
{alert("ПРАВИЛЬНО!!!")
rand()
}
else
alert("Нет. Попробуй еще раз.")
}
</SCRIPT>
<BODY onLoad="rand()">
<h3>Я загадал число от 1 до 10</h3>
<FORM NAME="myform">
<INPUT TYPE="button" VALUE="Угадай"
NAME="b1" onClick="guessnum()">
</FORM>
</BODY>
</HTML>
Разбор скрипта
<body bgcolor="хххххх" onLoad="rand()">
На этот раз функция запускается не кнопкой через onClick, а командой onLoad, чтобы к тому времени, когда пользователь нажмет на кнопку, число уже было выбрано.
function rand() {
now=new Date()
num=(now.getSeconds())%10
num=num+1
}
Функция выбирает наугад число от 0 до 9 и привязывает его к num. Потом прибавляет к num единицу, чтобы выбор осуществлялся между 1 и 10.
function guessnum()
{guess=prompt("Угадай, какое?")
if (eval(guess) == num)
{alert("ПРАВИЛЬНО!!!")
rand()
}
else
alert("Нет. Попробуй еще раз.")
}
Как это работает:
- С помощью запроса создается переменная guess (догадка).
Функция eval() вычисляет или выполняет строку в скобках (выражение, команду или последовательность команд) и подставляет полученное значение вместо себя. Она не является методом какого-либо объекта, но может использовать свойства уже существующего. В данном случае переводит текст, полученный с помощью запроса, в нашу функцию для последующей обработки.
Обратите внимание на {фигурные скобки}. - Переходим к IF/Else. Если (if) guess (догадка) равна загаданному числу num, тогда запускается команда alert("ПРАВИЛЬНО").
- Если это не так, а иначе (else), тогда запускается другая команда alert.
- Дальше просто:
<form name="myform">
<input type="button" value="Угадай" name="b1" onClick="guessnum()">
</form>
Кнопка запускает функцию, которая дает возможность угадать задуманное число.
Часть четвертая
Продолжаем рассматривать команду IF
Скрипт
<SCRIPT LANGUAGE="JavaScript">
var0="От пирогов не толстеют"
var1="Кто ходит в гости по утрам"
var2="До пятницы я совершенно свободен"
now=new Date()
num=(now.getSeconds() )%3
if (num == 0)
{cliche=var0}
if (num == 1)
{cliche=var1}
if (num == 2)
{cliche=var2}
document.write(cliche + "<br>")
document.write("Случайная цифра: "
+ num)
</SCRIPT>
</BODY>
</HTML>
Разбор скрипта
var0="От пирогов не толстеют"
var1="Кто ходит в гости по утрам"
var2="До пятницы я совершенно свободен"
now=new Date()
num=(now.getSeconds() )%3
document.write("Случайная цифра: "
+ num)
document.write должна располагаться на одной строке!
- Мы создали три переменные. Это неизменяемые фрагменты текста, и потому заключены в двойные кавычки.
- Следующий шаг: программа берет случайную цифру с помощью часов вашего компьютера. %3 указывает на то, что будет выбрана цифра между 0, 1 и 2. На этот раз мы не прибавляем к num единицу, так как нам подходит и 0.
- Наконец команда document.write() говорит, что выбранная цифра будет показана на странице.
- Теперь взглянем на другой фрагмент скрипта:
if (num == 0)
{cliche=var0}
if (num == 1)
{cliche=var1}
if (num == 2)
{cliche=var2}
document.write(cliche + "<br>") >
- Помните, что условия после IFтребуют двойного знака равенства ==.
- Если условие верно, будет выполнена команда, заключенная в {фигурные скобки}. Возможны только три результата, поэтому мы написали три условия, чтобы одно из них оказалось верным.
- Обратите внимание еще раз, что условие заключено в (круглые скобки), а результат в {фигурные}.
- Наконец команда document.write(cliche) напишет на странице то изречение, которое было присвоено переменной cliche (см. начало скрипта).
ЗАДАНИЯ
Часть первая
Напишите программу JavaScript, в которой пользователь нажимал бы кнопку, а программа предлагала бы ему случайную цифру от 0 до 5 со словами: "Ваша случайная цифра: "х".
Часть вторая
Перепишите программу так, чтобы она спрашивала, какого вы пола. Пусть в зависимости от ответа меняется фоновый цвет страницы. Помните, что в JavaScript различаются строчные и заглавные буквы, так что будьте внимательны в своих условиях.
Часть третья
Измените сегодняшний скрипт так, чтобы при неверной догадке он сообщал пользователю, что он назвал слишком большое или слишком маленькое число.
Часть четвертая
Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif.
Лабораторная работа № 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>
Разбор скрипта
В скрипте две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Рассмотрим первую:
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Вы должны ввести свое имя")
document.dataentry.fn.focus()}
}
.....
<body>
.....
<INPUT TYPE="text" NAME="fn"
onBlur="validfn(fn.value)">
- Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn.
- Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.
- Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.
- Длине имени пользователя присвоена переменная fnlen. Таким образом, если пользователь введет имя Коля, значение fnlen будет равно 4. Помните свойство length?
- Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа вызывает окно с сообщением об ошибке, и ставит курсор или 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}
}
- Во-первых, длине телефонного номера присваивается переменная len. Переменная digits содержит все цифры.
- Потом команда If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак && в Javascript означает «проверить оба свойства».
- Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или focus в поле для ввода.
- for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.
- if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt().
- Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции — цифра 3. Это не опечатка! Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3!
- indexOf — это метод, дающий порядковый номер для заданного значения. При if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.
Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = «0123456789».
Если номер телефона 12д и i = 2, программа ищет «д»; в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 (<0), тогда появляется окно с сообщением об ошибке и курсор или focusустанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.
- И последнее — код HTML для формы:
Введите свое имя:<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)">
- Используя JavaScript с формами, давайте каждому элементу уникальное имя, которое потом будет обозначено в скрипте.
Задания
Задание к первой части
Перепишите скрипт. Покажите первым leo.gif, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3.
В общем, перепишите скрипт задом наперед.
Задание ко второй части
Во-первых, изучите сегодняшнюю программу и заставьте ее работать. Потом внесите несколько изменений. Попросите ввести телефонный номер в формате ххх-хххх. Пусть функция validphone(phone) проверит, стоит ли дефис на позиции 3. Команда != в JavaScript означает «не равно». Это вам понадобится.
|
