Урок 4

Урок 4. Условные инструкции и функции взаимодействия с пользователем

На данном уроке мы рассмотрим:

  1. Условные конструкции

    • Условный оператор

    • Инструкция if

    • Инструкция switch

  2. Функции взаимодействия с пользователем

    • Функция 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.

Вопросы и задания!

  1. Даны две переменные х, у. Сравнить эти переменные и вывести сообщение "х больше у", иначе "х меньше у". Написать код используя:

    • тернарный оператор

    • инструкцию if/else.

  2. Объявить переменную age. В переменной сохранить свой возраст. Если age<18, то вывести сообщение "совершеннолетний", если age>=18 "совершеннолетний".

  3. Напишите код, которая спрашивает имя и выводит его. Если имя "Студент", то вывести сообщение "Добро пожаловать!", если имя не "Студент", то вывести сообщение "Я тебя не знаю!".

  4. Используя инструкцию switch определить какой сейчас месяц.