Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Учебник-по-JavaScript_part1.doc
Скачиваний:
1
Добавлен:
01.05.2025
Размер:
245.25 Кб
Скачать

I f (условие) {операторы 1} else {операторы 2}

Механизм управления

  1. Условие вырабатывает значение логического выражения: true или false при проверке знака сравнения (== равно, != не равно, > больше, < меньше, >= больше или равно, <= меньше или равно). Например: сравнение 7>5 вырабатывает значение true, а 7<5 вырабатывает значение false.

  2. Для значения true выполняется блок {операторы 1}

Для значения false выполняется блок {операторы 2}

Неполная форма оператора if

Б лок else является необязательным, тогда условный оператор имеет вид:

If (условие) {операторы}

Блок-схема условного алгоритма

Данные

false условие true

Операторы 2 Операторы 1

Результаты

Задача “Сравнение чисел”. Даны два числа. Если первое число больше второго, то увеличить эти числа вдвое, в противном случае разделить их на семь.

1. Блок-схема:

a, b

false a>b true

a = a/ 7 a = a*2

b = b/ 7 b = b*2

a, b

  1. Скрипт:

< html><head><script>

function Start() {

a=prompt(“Введи 1 число”, “”);

a=parseFloat(a);

b=prompt(“Введи 2 число”, “”);

b=parseFloat(b);

document.write(“<h2>Старые числа ”+a+” и ”+b+”</h2>”);

if (a>b) {

a=a*2;

b=b*2} else {

a=a/7;

b=b/7}

document.write(“<h2>Новые числа ”+a+” и ”+b+”</h2>”);

}

</script></head>

<body onLoad=”Start()”>

</body></html>

  1. Протестируйте программу со следующими исходными данными:

  1. a=10; b=2

  2. a=24; b=24

  3. a=8; b=10

Контрольные вопросы

  1. Как выполняется скрипт в тегах заголовка документа?

  2. Каков синтаксис элемента function?

  3. Какое событие происходит, когда страница загружена? Обработчик события?

  4. В каких структурах программирования применяется условный оператор?

  5. Каков синтаксис оператора if?

  6. Каков механизм управления условного оператора?

  7. Какие операции сравнения выполняет условный оператор?

  8. Назовите две формы условного оператора.

Выводы

Программы сложных структур выполняются в тегах <head>…</head> с помощью функции-подпрограммы function Имя( ) { тело функции } . В разветвляющихся структурах программирования используется условный оператор if, который проверяет истину операции сравнения в условии. В зависимости от значения логического выражения условия в программе выполняется одна из веток: либо - true, либо - false.

Практическая работа «Программирование условий»

  • Постройте блок-схему алгоритма. Запишите скрипт

  • Создайте html-файл js4.htm с текстом данного скрипта и проверьте его работу в броузере с разными исходными данными

  • Отформатируйте вывод информации в методе document.write

Задача 1. Даны два числа. Если числа не равны, то удвойте их значения, в противном случае возведите эти числа в квадрат.

Задача 2. Введите слово. Если введённое слово – «земля», то замените его на слово

«небо», в противном случае замените его на слово «мир».

Задача 3. Даны два числа. Если первое число больше или равно второго, то замените

числа нулями, в противном случае оставьте числа без изменения.

Задача 4. Вычислите выражение Y=1/X, при заданном значении X. При вводе значения 0

выведите панель alert с сообщением “Делить на 0 нельзя!”.

Задача 5. Выведите панель confirm с сообщением «Пора отдыхать?». Если нажата кнопка «Оk», то выведите панель alert с сообщением «Отдыхать – не работать!» и установите красный фон страницы. Если нажата кнопка «Cancel», то выведите текст «Работа – не волк, в лес не убежит!», при этом используйте размер и цвет шрифта.

Задача 6*. «Предметы». Выведите панель confirm с сообщением «Предмет – программирование». При нажатии кнопки «Ok» выведите фамилии учеников вашей группы в виде списка, отформатируйте текст и установите цвет фона страницы. В противном случае (при нажатии «Cancel») выведите панель alert с сообщением «Другие предметы», а затем таблицу по образцу и установите цвет фона страницы

Экономика Иванов

Экология Петров

Проверочная работа «Условный оператор»

Задание 1. Какая последовательность символов является условным оператором в

языке JavaScript?

  1. If x=1 {x=x*2} else {x=0}

  2. If (a>=b) {a=a/2; b=b/2}

  3. If (x!=y) then {x=1; y=1} else {x=0; y=0}

  4. If (a==b) {document.write(a+”,”+b)} else {document.write(“числа не равны”)}

  5. If (x<1) {alert(“Выход”)!} else {alert(“Продолжаем работу!”)}

Задание 2. Какие будут значения переменных j и k после выполнения условного

оператора:

If (j>k) {j=k+2} else {k=k+2}

если исходные значения переменных таковы:

  1. j=3; k=5

  2. j=3; k=3

  3. j=3; k=2

Задание 3. Постройте блок-схему алгоритма и запишите html-файл с текстом скрипта для

следующей задачи:

Даны два числа, определите и напечатайте, какое из чисел больше, а какое меньше?

3. Простые и составные условия

Определение. Условие, содержащее в себе одно логическое выражение, называется простым. Например: (а>=1); (а==true). Составное условие содержит в себе два простых условия, которые могут объдиняться логическими операциями И и ИЛИ. Например, логическое выражение (a>0 && a<1) определяет попадание числа а в интервал (0,1), то есть 0<a<1.

Правила выполнения логических операций

Операция И – &&. Составное условное выражение равно значению true, когда оба логических выражения в нём равны true.

Операция ИЛИ – ||. Составное условное выражение равно значению true, когда хотя бы одно из логических выражений в нём равно true.

Логическое выражение 1

Логическое выражение 2

Результат операции && (И)

Результат операции || (ИЛИ)

True

True

True

True

True

False

False

True

False

True

False

True

False

False

False

False

Составные условия применяются для записи двойных неравенств.

Контрольные вопросы

  1. Какое условие называется простым?

  2. Какие знаки сравнения проверяются в логических выражениях?

  3. Какие значения вырабатываются после вычисления логических выражений?

  4. Какое условие называется составным?

  5. Как работает логическая операция И – &&?

  6. Как работает логическая операция ИЛИ – ||?

Выводы

  • Условие в операторе if… может быть простым или составным.

  • Простое условие содержит одно, а составное условие – два логических выражения.

  • Логические выражения составного условия связаны логическими операциями И и ИЛИ.

  • Для получения значения true в составном условии операция И требует true в обоих логических выражениях, а ИЛИ требует true хотя бы в одном логическом выражении.

  • Логические выражения в условии могут быть вложенными, тогда они выделяются в круглые скобки. Круглые скобки определяют приоритет действий.

Практическая работа «Вычисление логических выражений»

Задание 1. Вычислите значения логических выражений:

  1. (z>0 && z<1) при а). z=8; b). z=0.2

  2. (z<=3 || z>=5) при a). z=5; b). z=4

  3. ((z1 &&z2) || z3) при а).z1=true; z2=false; z3=true b). z1=false; z2=true; z3=false

Задание 2. Запишите логические выражения на JavaScript для выполнения следующих

условий:

  1. значение z принадлежит интервалу (0,1)

  2. значение z принадлежит интервалу [1,10)

  3. значение z не принадлежит интервалу (-1,0]

  4. значение z не принадлежит интервалу (-40,1)

Справочная информация «Интервалы».

Пусть X – действительное переменное. Множество всех значений X (точек), удовлетворяющих условиям:

  1. A < X < B, есть ограниченный открытый интервал (A, B), не включает границы,

  2. A < X, есть неограниченный открытый интервал (A, +∞),

  3. X < A, есть неограниченный открытый интервал (–∞, A),

  4. A ≤ X ≤ B, есть ограниченный замкнутый интервал [A, B], включает границы.

Замкнутый интервал называют также отрезком, или замкнутым промежутком.

Множество точек (X), удовлетворяющих условиям:

A ≤ X < B, A < X ≤ B, X ≥A, X ≤ A, можно называть полуоткрытыми интервалами.

Задание 3. Вычислите значения переменных j и k после выполнения условного

оператора:

If ((j>1 || k>4) && k==0) {j=j+2} else {k=k+2}

для следующих исходных данных:

  1. j=1; k=4

  2. j=2; k=3

  1. j=3; k=0

Практическая работа «Составные условия»

  • Составьте и запишите скрипты

  • Создайте html-файл js5.htm и поочерёдно проанализируйте его работу в броузере

  • Выполните тестирование с разными исходными данными

Задача 1. «Установка фона страницы по условию».

Введите число. Если это число равно 0 или 1, то установите красный фон страницы, в противном случае – установите зелёный фон страницы.

Задача 2. «Обработка заданного числа по условию».

Введите число b. Если введённое число удовлетворяет условию 10b50, то удвойте значение b и выведите отформатированный результат. В противном случае, выведите панель alert (“число”+b+” не в интервале (0,50)”).

Задача 3. «Обработка панели prompt по условию»

Введите число, используя панель prompt. Если нажата кнопка «Cancel», то выведите панель alert с сообщением «Загрузи программу ещё раз!». В противном случае выведите результат умножения введённого числа на 3 и 4 в таблице:

Умножение Результат

,,, х 3 ,,,

,,, х 4 ,,,

Задача 4*. «Обработка панели prompt»

При вводе пользователем с клавиатуры фамилии автора Кинг выведите список предлагаемых вашей фирмой его произведений, при вводе других данных или нажатии кнопки “Cancel” выведите панель alert с соответствующим сообщением.

4. Сложное ветвление

Применение в программе нескольких условных операторов есть сложное ветвление. Различают два типа задач: линейность независимых условий и применение вложенных операторов if….

Линейность независимых условий. Часто в задачах требуется выполнить несколько условий, которые не зависят друг от друга. Тогда, в программе операторы if выполняются последовательно, по мере их написания.

Задача «Три числа»

Даны три целых числа. Неотрицательные числа заменить нулями, а отрицательные – удвоить.

Блок-схема: Программа:

a,b,c

<script>

f alse a>=0 true function Start(){

a=prompt(“введи а”,“”);

a=a*2 a=0 a=parseInt(a);

b=prompt(“введи b”,””);

b=parseInt(b);

c=prompt(“введи c”,””);

f alse b>=0 true c=parseInt(c);

b=b*2 b=0 if (a>=0) {a=0} else {a=a*2};

if (b>=0) {b=0} else {b=b*2};

if (c>=0) {c=0} else {c=c*2};

document.write(a+”,”+b+”,”+c)

false c>=0 true }

</script>

c=c*2 c=0

Вопросы к программе:

1.Протестируйте программу с исходными данными:

а) 5, -10, 2 б) 0, 55, -9 в) -7, -8, -9 г) 7, 8, 9

a,b, c 2. Как изменится алгоритм при перестановке условий?

Вложенные условные операторы

В программах на JavaScript разрешено применение вложенных операторов if .

Б лок-схема (общий вид)

false true

Условие1

false true false true

Условие3 Условие2

Операторы4 Операторы3 Операторы2 Операторы1

С интаксис

if (Условие 1) {

ifсловие 2) {Опреаторы 1} else {Операторы 2} }

else {

if (условие 3) {Операторы 3} else {Операторы 4} }

5. Задача «Светофор»

Введите данные в диалоговую панель prompt: red, yellow или green. Используйте структуру вложенных условий для вывода сообщений методом alert по заданной схеме. Оформите вывод соответствующим цветом фона страницы.

Ввод red yellow green

true true true

Стой! Жди! Иди!

f unction Start() {

b=prompt (“Введи цвет: red, yellow или green”,””);

if (b==”red”) { alert (“Стой!”); document.bgColor=”red” }

else { if (b==”yellow”) { alert (“Жди!”); document.bgColor=”yellow” }

else {if (b==”green”) { alert (“Иди!”); document.bgColor=”green” }

}

}

}

Выводы

  • Сложное ветвление предполагает использование в программе нескольких операторов if .

  • Независимые друг от друга условия выполняются в программе последовательно.

  • Решение задачи со сложным ветвлением лучше начинать с построения блок-схемы алгоритма.

  • Вложенные операторы if требуют внимательного подхода при описании каждой ветки в программе.

Практическая работа «Светофор»

  1. Объясните алгоритм решения задачи «Светофор» по блок-схеме.

  2. Объясните выполнение программы при разных исходных данных.

  3. Дополните программу для следующих возможных действий пользователя:

  1. Ввод любого значения.

  2. Нажатие кнопки «Cancel» в панели prompt.

  1. Создайте html-файл светофор.htm и протестируйте программу в броузере.

Практическая работа «Вложенные if»

  • Составьте блок-схему алгоритма решения задачи.

  • Запишите скрипт по составленной блок-схеме.

  • Создайте html-файл js6.htm и проверьте его работу в броузере.

  • Протестируйте программу с разными исходными данными.

Задача 1. Введите число X. Вычислите значение Y для заданных условий.

2X – 5 , если X > 5

Y = 1 – X , если 2  X  5

1/X , если X  0

0 , в остальных случаях

Задача 2. «Книжный магазин».

Напишите программу, которая работает вместо кассира в книжном магазине. При вводе цены книги и полученной суммы от покупателя программа подсказывает, сколько надо взять сдачи, либо какую сумму покупателю доплатить, либо благодарит за покупку.

Задача 3*. Введите числа X, Y, Z. Вычислите V = max ( min ( X,Y ), Z )

6. Программирование вложенных ветвлений

Задача «Книжный магазин» выполняет функции кассира. При вводе цены книги и полученной суммы от покупателя программа подсказывает, сколько надо взять сдачи, либо какую сумму покупателю доплатить, либо благодарит за покупку.

Описание переменных

A – цена книги; B – сумма, полученная с покупателя; C – разница между суммой покупателя и ценой книги.

Блок-схема

a, b

false true

a или b=null

Запусти

c = b – a программу

false true

c > 0

false true Возьмите

c < 0 сдачу (c)

Благодарю Доплатите

за покупку (с)

Код html-файла

< html><head><script>

function Start() {

var a=prompt('Какова цена книги?',"");

var b=prompt('Сколько вы платите?',"");

if (a==null || b==null) {

alert("Зачем нажал 'Отмена'?\nЗапусти программу ещё раз!");

document.write('<h1 align=center>Хулиган</h1>');

document.bgColor="braun"

} else {

document.write('<font color="green" size=6 align=center>Книжный магазин<br></font>');

c=parseInt(b)-parseInt(a);

if(c>0) {

document.write("<font color='red' size=7 align=center>Возьмите сдачу "+c+" у.е.!</font>")

} else {

if (c<0){

document.write("<font color='red' size=7 align=center>Вы не доплатили "+c+" у.е.!</font>")

} else {

document.write("<font color='red' size=7 align=center>Благодарим за покупку!</font>")

}

}

document.write('<p><font color="green" size=6>Как здорово работать кассиром! </font> </p>');

}

}

</script></head>

<body onLoad="Start()">

</body>

</html>

7. Контрольная работа «Сложное ветвление»