Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Создание сценариев с использованием условных операторов и операторов цикла




 

Цель работы: Изучить основы организации циклов и применения условных операторов при создании сценариев 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

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...