 |
Создание сценариев с использованием условных операторов и операторов цикла
|
|
|
|
Цель работы: Изучить основы организации циклов и применения условных операторов при создании сценариев JavaScript.
Теоретическая часть:
При составлении программы часто необходимо выполнение различных действий в зависимости от результатов проверки некоторых условий. Для этого используют условный оператор, который имеет вид:
If (условие) {операторы}
else {операторы}
Выполнение условного оператора if осуществляется в том случае, если условие истинно, в противном случае выполняются операторы, следующие за словом else. Если условный оператор состоит из одного оператора, то фигурные скобки можно опустить.
Применяются условные операторы в таких задачах, как нахождение максимального и минимального значения, сортировка чисел, смена изображение, создание визуального приближения и удаления изображения.
Пример 1:
<html>
<head>
<title>Нахождение максимального числа</title>
<script language="JavaScript">
function max(obj) {
var a=obj.a1.value;
var b=obj.b1.value;
var c=obj.c1.value;
var max=a;
if (b>max) max=b;
if (c>max) max=c;
obj.max1.value=max; }
</script>
</head>
<body>
<form name="form1">
Число 1: <input type="text" name="a1" size="20">
<p>число 2: <input type="text" name="b1" size="20"></p>
<p>число 3: <input type="text" name="c1" size="20"></p>
<p>максимальное число<input type="text" name="max1" size="20"></p>
<p><input type="button" value="ok" name="B1" onClick="max(form1)">
<input type="reset" value="cancel" name="B2"><br>
</form>
</body>
</html>
Пример 2.
<html>
<head>
<title>Пример визуального удаления изображения</title>
<script language="JavaScript">
function picture() {
var w=document.ris.width;
if (w>150){document.ris.width=w-10;
document.ris.src="ris3.gif";
setTimeout("picture()", 500);} }
|
|
|
</script>
</head>
<body>
<img src="ris3.gif" name=ris onMouseOver="picture()">
</body>
</html>
Пример 3.
<html>
<head>
<title>Пример визуального приближения изображения</title>
<script language="JavaScript">
function picture() {
var w=document.ris.width;
if (w<1000){document.ris.width=w+100;
document.ris.src="ris3.gif";
setTimeout("picture()", 1000);} }
</script>
</head>
<body>
<img src="ris3.gif" name=ris width=100 onMouseOver="picture()">
</body>
</html>
В тех случаях, когда при решении задачи требуется выбрать один вариант действий из нескольких возможных, удобно пользоваться оператором выбора switch, который имеет вид:
Switch (выражение)
{ case N1: операторы; break;
case N2: операторы; break;
………………………..
default: операторы;
}
Выполнение происходит следующим образом: вычисляется значение выражение в скобках. Если значение выражения равно N1, то выполняются операторы, принадлежащие блоку case N1. Если значение выражения равно N2, то выполняются операторы, принадлежащие блоку case N2 и т.д. Если же значение выражения не равно ни одному из значений, то выполняется оператор default. Оператор switch обычно применяется в сценариях, когда надо определить название месяца по введенному числу или день недели и т.д.
Пример 4
<html>
<head>
<title>Пример определения дня недели по введенному числу</title>
<script language="JavaScript">
function numday(obj)
{ var n=obj.n1.value;
var s
switch (n){
case 1: s="понедельник"; break;
case 2: s="вторник"; break;
case 3: s="среда"; break;
case 4: s="четверг"; break;
case 5: s="пятница"; break;
case 6: s="суббота"; break;
case 7: s="воскресенье"; break;
default: s="ошибка" }
obj.s1.value=s }
</script>
</head>
<body>
<form name="form1">
Число:<input type="text" name="n1" size="20">
<p>Название дня недели: <input type="text" name="s1" size="20"></p>
<p><input type="button" value ="определить" onClick="numday(form1)"></p>
<p><input type="reset" name="Отмена"></p>
</form>
</body>
</html>
Для организации циклов используются операторы for и while. Оператор for состоит из трех частей, заключенных в общие скобки и разделенные точкой с запятой. Первая часть определяется начальное условие, вторая часть – условие завершения цикла, и третья – шаг приращения цикла. Например: for (i=0; i<10; i++) { операторы;}
|
|
|
Принцип работы оператора цикла while отличается от принципа работы оператора for, поскольку он не подсчитывает количество выполняемых циклов. Он просто выполняет операторы, заключенные в скобки, после оператора while, до тех пор, пока условие истинно. Например: while (var i<=10) {операторы;}
Пример 5.
<html>
<head>
<title>Вычисление факториала</title>
<script language="JavaScript">
function fact(obj)
{ var n=obj.n1.value;
var f=1;
for (var i=2; i<=n; i++) {f=f*i}
obj.f1.value=f; }
</script>
</head>
<body>
<form name="form1">
Введите число:<input type="text" name="n1" size="20">
<p>Результат: <input type="text" name="f1" size="20"></p>
<p><input type="button" value ="Вычислить" onClick="fact(form1)"></p>
<p><input type="reset" name="Отмена"></p>
</form>
</body>
</html>
Задание на работу:
1. Вычислить максимальное и минимальное число из трех заданных чисел. Для каждого заданного числа и вывода результата создать поля.
2. Написать сценарий вычисления номера квартала по номеру месяца.
3. Написать сценарий вычисления суммы чисел, кратных 7 в заданном интервале.
Ход работы:
1. Откройте Блокнот, создайте три html – файла для каждого задания.
2. Для каждого файла создайте форму и сценарий для выполнения заданий Вначале сформировать тело страницы — в разделе body создайте форму, назовите ее form1. Внутри формы укажите текстовые поля для задания исходных данных и вывода результата. После текстовых полей разместите кнопки Вычислить, Обновить.
3. В созданные файлы внесите сценарии, соответствующие выполняемым операциям.
4. Сохраните созданные документы, откройте их в браузере и проверьте работоспособность.
ЛАБОРАТОРНАЯ РАБОТА № 4
|
|
|
