Техника Web-дизайна для студента
Оператор условного перехода
Оператор условного перехода является одним из важнейших операторов не только языка JavaScript, но и многих других языков программирования. Оператор позволяет на определенном этапе работы программы осуществить анализ возникшей к этому моменту ситуации и (в зависимости от результатов анализа) приступить к выполнению тех или иных операторов. Оператор записывается следующим образом:
If (условие) {группа операторов 1}; eise { группа операторов 2} В качестве условия можно использовать любое выражение, результат которого является логическим, т. е. true (истина) или false (ложь). Оператор работает следующим образом. Проверяется условие: если его результат true, то выполняется "группа операторов 1", а "группа операторов 2" не выполняется; если результат false, то выполняется "группа операторов 2", а "группа операторов 1" не выполняется. Дополнительно проиллюстрировать работу оператора можно с помощью блок-схемы, приведенной на рис. 8.4.
Конструкция eise может использоваться не всегда. В упрощенной форме оператор условного перехода можно записать так:
If (условие) {группа операторов 1}
В этом случае, если результат условия — true, то выполняется "группа операторов 1", а если false, то "группа операторов 1" не выполняется. На рис. 8.5 представлена блок-схема, показывающая работу оператора в упрощенной форме.
|
Рис. 8.4. Блок-схема работы оператора условного перехода (полная форма записи) |
|
Рис. 8.5. Блок-схема работы оператора условного перехода (упрощенная форма записи) |
|
Рис. 8.6. Внешний вид формы с полями, обязательными для заполнения |
Если в "группу операторов 1" или "группу операторов 2" входит только один оператор, то соответствующие фигурные скобки можно не ставить.
Приведем примеры программ, использующих оператор условного перехода.
Проверка заполнения формы перед отправкой.
Программа проверяет, заполнены ли обязательные поля формы перед ее отправкой. Внешний вид формы показан на рис. 8.6.
Текст документа, с включенной в него программой, приведен в листинге 8.9.
Листинг 8.9. HTML-документ с программой проверки заполнения полей формы
<html>
<head>
< t i 11е>Форма</1 i tle>
</head>
<script> function PR()
If (Fl. Tl. value=="" II Fl. T2.value=="") alert ("Заполните все поля")
Function PR1()
Alert ("Готово к отправке")
</script>
<body>
<form method="POST" action="" name="Fl">
Ctable border="0" width="250" style="font-size: 12pt">
<tr>
<td width="150">®aMnnnH</td>
<td width="100">
<input type="text" name="Tl" size="20">
</td>
</tr>
<tr>
<td width="150">Anpec</td>
<td width="100">
<input type="text" name="T2" size="20">
</td>
</tr>
</table>
<p><input type="submit" value="Отправить" name="Bl" on - MouseOver=PR() onclick=PRl()>
<input type="reset" value="Очистить" name="B2">
</form>
</body>
</html>
Программа включает две функции. В функции pr () используется упрощенная форма оператора условного перехода. Условием является логическое выражение, включающее две операции сравнения, объединенные логической операцией ИЛИ. Если хотя бы одно из полей не заполнено, то результатом операции сравнения, следовательно, и всего выражения, будет являться true. В этом случае метод alert () создаст диалоговое окно с предупреждающим текстом. Вызов функции pr () осуществляется при наведении указателя мыши на кнопку "Отправить" (событие onMouseOver). Таким образом, пользователь не успеет щелкнуть по кнопке, как откроется диалоговое окно.
Функция pri () играет вспомогательную, но очень важную роль. Дело в том, что после заполнения всех полей и щелчка по кнопке "Отправить" поля очищаются, а так как указатель в этот момент находится над кнопкой, то функция pro будет вызвана вновь, что приведет к повторному появлению диалогового окна с предупреждающим текстом. Чтобы избавиться от этого, функция PR1 () в момент щелчка по кнопке откроет другое диалоговое окно с подтверждением правильности действий пользователя, указатель будет отведен от кнопки "Отправить" для нажатия кнопки ОК в диалоговом окне и проблема будет устранена.
Вычисления с использованием выбранных полей формы.
Программа осуществляет вычисления, используя поля формы, выбранные пользователем, и выводит результат также в поле формы. Пользователь, устанавливая соответствующие флажки, выбирает предметы, которые хотел бы заказать, вводит число предметов и нажимает кнопку "Сумма". Вычисляется только сумма предметов, отмеченных флажком. Результат работы программы показан на рис. 8.7.
|
Рис. 8.7. Результат работы программы определения суммарной стоимости элементов, выбранных пользователем |
Текст документа приведен в листинге 8.10.
Листинг 8.10. Пример программы, вычисляющей сумму содержимого полей формы, выбранных пользователем
<ЬШ1>
<1іеас!>
<1;і1;1е>вьмисления в форме</1;і1;1е>
<script>
Divan=5700
Kreslo=3400
Stol=3800
Stul=800
Function nznach()
{FI. ST1.value=divan
|
FI |
ST2.value=kreslo |
|||
|
FI |
ST3.value=stol |
|||
|
FI |
ST4.value=stul |
|||
|
! Function sum() |
||||
|
{if |
(FI. FL1.checked) |
Kl=Fl. KOL1.value; |
Else |
Kl=0 |
|
If |
(FI. FL2.checked) |
K2=Fl. KOL2.value; |
Else |
O II CM M |
|
If |
(FI. FL3.checked) |
K3=Fl. KOL3.value; |
Else |
K3=0 |
|
If |
(FI. FL4.checked) |
K4=Fl. KOL4.value; |
Else |
O II |
Sl=kl*divan
S2=k2*kreslo
S3=k3*stol
S4=k4*stul
FI. SUM. value=sl+s2+s3+s4
}
</script>
</head>
<body onLoad=nznach()>
<fieldset style="padding: 10; width: 310">
<legend style="font-size: 16pt">3aKas Me6ejiM</legend> <form method="POST" action="" name="Fl">
<table width="290" border="0" style="font-size: 12pt"> <tr>
<td width="30"> </td>
<td width="60"> </td>
<td width="60" align="center">Koji-BO</td>
<td width="80"align="center">CTOMMOCTb</td> <td> </td>
</Ьг>
•сЬг >
|
> |
<td> <л. пр1гЬ type="checkbox" пате="ЕЬ1" value="checkbox' </td>
<td>Дивaн</td>
<td аИдп="сегЛег">
<л. пр1гЬ пате="К0Ь1" type="text" з1ге="2">
</td>
<td аИдп="сеггЬег">
<л. пр1гЬ пате="ЗТ1" type="text" з1ге="б">
</td>
<td> pyб.</td>
</Ьг>
<tr>
|
> |
<td> <л. пр1гЬ type="checkbox" пате="ЕЬ2" value="checkbox' </td>
<td>Kpecлo</td>
АИдп="сеггЬег">
<л. пр1гЬ пате="К0Ь2" type="text" з1ге="2">
</td>
<td аИдп="сеггЬег">
<л. пр1гЬ пате="ЗТ2" type="text" з1ге="6">
</td>
<td> руб.</^>
</tr>
<tr>
<td> <л. пр1гЬ type="checkbox" пате="ЕЬЗ" value="checkbox' </td>
<М>Стол</td>
<td аИдп="сеггЬег">
<л. пр1гЬ пате="КОЬЗ" type="text" з1ге="2">
</td>
<td аИдп="сеггЬег">
<1прггЬ пате="ЗТЗ" type="text" з1ге="6">
</td>
<М> pyб.</td>
</tr>
<tr>
<td> <input type="checkbox" name="FL4" value="checkbox"> </td>
<td>Oyn</td>
<td align="center">
<input name="K0L4" type="text" size="2">
</td>
<td align="center">
<input name="ST4" type="text" size="6">
</td>
<td> py6.</td>
</tr>
<tr>
<td colspan="3" align="right">
Cinput name="KNl" type="button" value="Сумма" on-
Click=sum()>
</td>
<td align="center">
<input name="SUM" type="text" size="6">
</td>
<td> py6.</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
Программа начинается несколькими операторами присваивания. Переменным divan, kresio, stoi и stui присваиваются значения стоимостей соответствующих предметов. Переменные являются глобальными и могут использоваться в любой функции. При необходимости изменения стоимости предмета, достаточно внести изменения только в этом месте.
Для расчетов стоимости заказа используются значения переменных, а не содержимое полей "Стоимость", которые могут быть изменены пользователем. Функция nznach () ПредназНЕ - чена для заполнения полей "Стоимость" сразу после загрузки документа, поэтому вызывается на выполнение событием onLoad. Функция sum () вызывается после нажатия кнопки "Сумма" (событие ondick). Операторами условного перехода осуществляется проверка установки каждого из четырех флажков выбора предмета. Свойство checked объекта checkbox ("флажок") принимает значение true, если флажок установлен, и false — в противном случае. Переменным kl...k4, относящимся к предметам, отмеченным флажками, будут присвоены значения соответствующих полей группы "Кол-во", в противном случае им будет присвоено нулевое значение. Далее вычисляется стоимость покупки каждого предмета с учетом количества, и полученные значения присваиваются переменным S1...S4. В последней строке в поле с именем зим выводится сумма заказа.
Движение изображения по экрану.
Изображение движется внутри условного прямоугольника. Достигнув края прямоугольника, оно "отражается" от него и продолжает движение до достижения другого края и т. д. Например, логотип фирмы можно заставить пробежаться по странице и остановить в нужном месте или можно изобразить на странице падающие снежинки, движущиеся автомобили и т. д. Текст документа следующий (листинг 8.11).
Листинг 8.11. Пример программы перемещающей изображение внутри условного прямоугольника
<html>
<head>
<title>flHHaMH4ecKne KapTHHKH</title>
<script>
Z=0
X=50
Y=50
Sx=3
Sy=2 function nach()
{
Il. style. left=x il. style. top=y il. style. display="block" si=setlnterval("dv()", 100)
}
Function dv()
{
Z++
X+=sx
Y+=sy
If (x<50 || x>350) sx =-sx
If (y<50 || y>200) sy=-sy
Il. style. left=x
Il. style. top=y
If (z>200) clearlnterval(si)
}
</script>
</head>
<body>
<p>
<img id=il border="0" style="position: absolute; display: none" src="l. jpg">
<pxfont size="5" color="#0000FF" onclick=nach () >Начать движение</fontx/p>
</body>
</html>
Программа начинается с присваивания начальных значений переменным: z — счетчик числа шагов, х — положение изображения относительно левого края страницы, у — положение изображения относительно верхнего края страницы, SX — ШЭГ перемещения изображения по горизонтали, sy — шаг перемещения изображения по вертикали. Перемещаемое изображение, имеющее индивидуальное имя il, в момент загрузки документа скрыто. Чтобы сделать его видимым и заставить
Перемещаться, щелчком по текстовой строке "Начать движение" вызывается функция nach о (событие onclick). Очевидно, что можно предусмотреть и другие способы начала движения, например можно вызвать функцию после загрузки документа (событие onLoad) и т. д. В функции nach () задается: начальное положение изображения по горизонтали (значение свойства ii. style. left) и по вертикали (значение свойства il. style, top), видимость изображения и вызов метода setinterval () на выполнение. Метод имеет два параметра, которые записываются в круглых скобках через запятую. Первый параметр ("dv()") — имя вызываемой функции, второй (100) — временной интервал (в мс). Таким образом, метод setinterval () постоянно вызывает заданную функцию на выполнение через указанный временной интервал. Чтобы остановить этот процесс нужно использовать идентификатор и метод clear - interval () (идентификатор). В нашем примере идентификатором является переменная si, которой присваивается значение самим же методом setinterval (). Метод clear - interval () используется в функции dv (). Функция dv() вызывается методом setinterval () через каждые 100 мс. При каждом вызове счетчик числа шагов / увеличивается на 1, координата изображения х увеличивается на шаг перемещения по горизонтали sx, а у — на шаг перемещения по вертикали sy. Далее с помощью операторов условного перехода осуществляются проверки нахождения координат изображения в заданных интервалах. Например, если значение координаты х больше 350, то шаг перемещения по горизонтали станет отрицательным и при следующем вызове функции dv () координата х начнет уменьшаться, а изображение перемещаться по горизонтали влево. Изображение изменит свое положение после присваивания свойствам il. style. left и il. style. top новых значений. Оператор условного перехода в конце функции сравнивает значение счетчика числа шагов с максимально возможным значением и в случае превышения его вызывает метод clearlnterval (), вследствие чего работа метода setinterval () будет прервана. Скорость движения изображения регулируется изменением временного интервала в методе setinterval () и изменением шагов sx и sy.
