Урок 4
Урок 4. Условные инструкции и функции взаимодействия с пользователем
На данном уроке мы рассмотрим:
Условные конструкции
Условный оператор
Инструкция if
Инструкция switch
Функции взаимодействия с пользователем
Функция alert()
Функция prompt
Функция confirm
Условные конструкции
Условные функции позволяют пропустить или выполнить другие инструкции в зависимости от значения указанного выражения. Эти инструкции являются точками принятия решения в программе, которых иногда называют инструкциями "ветвления".
Условный оператор
Условный оператор – это единственный тернарный (с тремя операндами) оператор в JavaScript, и иногда он так и называется– «тернарный оператор». Этот оператор обычно записывается так: ?:
Он имеет три операнда, первый предшествует символу ?, второй – между ? и :, третий – после :.
Операнды условного оператора могут быть любого типа. Первый операнд вычисляется и используется как логическое значение. Если первый операнд имеет истинное значение, то вычисляется и возвращается значение выражения во втором операнде. Если первый операнд имеет ложное значение, то вычисляется и возвращается значение выражения в третьем операнде. Вычисляется всегда только какой-то один операнд, второй или третий, и никогда оба.
var a=6;
alert( a <= 5 ? "a меньше или равно 5" : "a больше 5");
Инструкция if
Инструкция if – это базовая управляющая инструкция, позволяющая интерпретатору JavaScript принимать решения или, точнее, выполнять инструкции в зависимости от условий. Инструкция имеет две формы. Первая:
if(выражение)
инструкция;
В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то инструкция выполняется. Если выражение возвращает ложное значение, то инструкция не выполняется.
if (a>5)
alert("а больше 5");
Обратите внимание, что скобки вокруг условного выражения являются обязательной частью синтаксиса инструкции if. Синтаксис языка JavaScript позволяет вставить только одну инструкцию после инструкции if и выражения в круглых скобках, однако если требуется выполнить более одной инструкции, её всегда можно заменить блоком инструкций:
if(выражение){
инструкция1;
инструкция2;
инструкция3;
}
Вторая форма инструкции if вводит конструкцию else, выполняемую в тех случаях, когда вы¬ра¬же¬ние возвращает ложное значение. Ее синтаксис:
if(выражение)
инструкция1;
else
инструкция2;
Эта форма инструкции выполняет инструкцию1, если выражение возвращает истинное значение, и инструкцию2, если выражение возвращает ложное значение.
Например,
var a=3;
if (a<=5)
alert('a меньше 5 ');
else
alert('а больше 5');
Эту форму так же можно написать с блоком инструкций:
Инструкция switch
Инструкция switch используется для выбора одного из нескольких вариантов действий, в зависимости от результата сравнения значения выражения с несколькими константами. Синтаксис инструкции switch выглядит следующим образом:
switch(выражение) {
case константа: инструкции;
...
case константа: инструкции;
default: инструкции;
}
Инструкция switch сравнивает значение выражения, расположенного в круглых скобках, со всеми константами, стоящими рядом с ключевыми словами case, в порядке их следования. Каждый из вариантов (блоков case) имеет метку в виде константного значения, за которым ставится двоеточие. Если одна из меток совпадает со значением выражения, то управление передаётся инструкциям, расположенным после этой метки. Блок default выполняется в том случае, если не найдено ни одного соответствия с метками блоков case. Наличие блока default не обязательно, если его нет и не найдено ни одного соответствия, то никакие инструкции выполнены не будут:
var x=3;
switch(x) {
case 1: document.write( "x равен 1");
break;
case 2: document.write( "x равен 2");
break;
case 3: document.write( "x равен 3");
break;
default: document.write("x>3");
}
Данный код выводит на экран одно из четырёх сообщений в зависимости от того, какое число находится в переменной "x". На изображении ниже показан порядок выполнения инструкции switch:
Выведется следующий ответ:
Инструкция break инициирует немедленный выход из инструкции switch, и далее управление передаётся инструкции, следующей за конструкцией switch. При отсутствии инструкции break управление будет передано инструкциям, находящимся в других блоках case, т.е. после выполнения кода в блоке case продолжается выполнение кода следующего блока case и так до тех пор, пока не будет предпринята какая-нибудь операция для выхода из инструкции switch.
Пример. Используя инструкцию switch определить какой сегодня день недели.
Объявляется переменная day. Значения можно дать любую, в нашем случае day=5. Затем выполняется проверка выражения day с константами инструкции switch. Как только программа находит константу, которая совпадает с выражением day, выполняется инструкция и прекращается работа инструкции.
var day=5;
switch (day) {
case 1: document.write("Понедельник");
break;
case 2: document.write("Вторник");
break;
case 3: document.write("Среда");
break;
case 4: document.write("Четверг");
break;
case 5: document.write("Пятница");
break;
case 6: document.write("Суббота");
break;
case 7: document.write("Воскресенье");
break;
default: alert("Не правильное число")
}
Ответ будет выглядеть следующим образом:
Функции взаимодействия с пользователем
Функция alert()
Alert() выводит окно с заданным сообщением и кнопкой ОК.
Например,
alert('Привет,студент! Рад тебя видеть!');
Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберется с окном. В данном случае - пока не нажмет на «OK».
Функция prompt
Функция prompt принимает два аргумента:
result=prompt(title,default);
Она выводит модальное окно с заголовком title, полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL.
Вызов prompt возвращает то, что ввел посетитель - строку или специальное значение null, если ввод отменен.
Как и в случае с alert, окно prompt модальное.
Например,
var name;
name=prompt("Как тебя зовут?", "Nadya");
alert("Hello,"+name);
Вообще, второй default может отсутствовать. И поле ввода при открытии выведется пустым.
Функция confirm
Синтаксис этой функции выглядит следующим образом.
result=confirm(question);
Confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Например,
var pupil;
pupil=confirm("Ты ученик?");
Результатом будет true при нажатии OK и false - при CANCEL.
Вопросы и задания!
Даны две переменные х, у. Сравнить эти переменные и вывести сообщение "х больше у", иначе "х меньше у". Написать код используя:
тернарный оператор
инструкцию if/else.
Объявить переменную age. В переменной сохранить свой возраст. Если age<18, то вывести сообщение "совершеннолетний", если age>=18 "совершеннолетний".
Напишите код, которая спрашивает имя и выводит его. Если имя "Студент", то вывести сообщение "Добро пожаловать!", если имя не "Студент", то вывести сообщение "Я тебя не знаю!".
Используя инструкцию switch определить какой сейчас месяц.