Javascript оператор позволяет задать необходимые ветвления программы. JavaScript: if и else - инструкции для условий. Вернёмся к нашим зайцам
If B {S1}
else {S2}
Где B - выражение логического типа, а S1 и S2 - операторы.
Работает это так: вычисляется значение выражения B , если оно истинно, то выполняется оператор S1 , если оно ложно, то выполняется оператор S2 . Строку else {S2} можно опустить.
Думаю на примере будет понятнее. Пусть у нас есть форма, в которую пользователь вводит 3 значения. Напишем сценарий, который определит максимальное из введеных чисел.
Для начала напишем в html-странице код формы:
Javascript if
Теперь на странице script.js напишем код функции:
function maxZnach(obj){ var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; var m=a; if (b>m) m=b; if (c>m) m=c; obj.res.value=m; }
Итак, наша функция принимает три значения из формы, за максимальное (m ) мы принимаем значение a . Затем мы сравниваем: если значение b больше максимального (т.е. a ), то максимальным становится b , в противном случае максимальным остается a (т.к. выражение в скобках не является истинным). Далее аналогично сравниваем следующее значение c с максимальным. Ответ выводим в поле результата (res ).
Вообще такой сценарий можно было бы написать, используя метод max объекта Math , рассмотренного в прошлом уроке, и код получился бы короче:
function maxZnach(obj){ var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; obj.res.value=Math.max(Math.max(a,b),c); }
Это я к тому, что программирование все-таки процесс творческий, и одну задачу можно решить разными способами. Задача же программиста найти наиболее оптимальный вариант. Но это так, лирическое отступление. Вернемся к условному оператору if и рассмотрим более интересный пример. Напишем сценарий, во-время работы которого, при наведении курсора мыши на изображение, оно будет увеличиваться, создавая эффект приближения.
Как вы помните в HTML можно задать размер вставляемого изображения. Если заданные размеры больше или меньше оригинала, то браузер автоматически подгонит оригинал под эти размеры. Этим мы и воспользуемся. Пусть у нас есть вот такая картинка:
Ширина оригинала 302 пиксела. Мы же хотим, чтобы на странице картинка имела ширину 102 пиксела, а при наведении курсора, увеличивалась до 302 пикселов. С html-страницей все понятно:
Javascript if
А в нашей функции, кроме условного оператора, мы воспользуемся еще стандартной функцией javascript setTimeout , которая вызывает пользовательскую функцию с заданным промежутком времени:
Function bigPict(){ var w=document.tigr.width; if (w Таким образом, функция проверяет ширину картинки (width ) и, если она меньше 302 пикселов, то увеличивает эту ширину на 10 пикселов. Функция setTimeout вызывает нашу функцию bigPict каждые полсекунды, благодаря чему размер картинки будет увеличиваться до тех пор, пока условие w не станет ложным.
Чтобы визуально сделать приближение более плавным попробуйте уменьшить шаг увеличения ширины и время обращения к функции. Поиграйтесь с этими числами и найдите наиболее оптимальные.
На сегодня все, в качестве домашнего задания допишите наш сценарий так, чтобы картинка при выходе курсора мыши принимала исходные значения (т.е. 102 пиксела). Если не получится, то скачайте
Урок №5
Операторы ветвления if в языке JavaScript
Операторы ветвления предназначены для того, чтобы программа могла запускать тот или иной блок кода, в зависимости от верности true или не верности false условия.
Операторов ветвления существует пять видов, в этом уроке мы рассмотрим два из них:
— оператор ветвления if
— оператор ветвления if else
Запускает код, если условие возвращает true .
В качестве условия, в операторах ветвления, обычно выступают операции сравнения или логические операции.
Схема оператора ветвления if , выглядит следующим образом:
If (условие) { код запустится, если условие вернёт true }
Приведём пример с оператором ветвления if:
// создадим две переменные var numOne; var numTwo; // присвоим переменным значения numOne = 5; numTwo = 3; if (numOne > numTwo) { alert("Условие возвратило true"); }
В скрипте мы создали две переменные numOne и numTwo , присвоили им числовые значения 5 и 3 .
Далее создали оператор ветвления if , который сравнивает между собой значения двух переменных. Если операция сравнения вернёт true , то запустится код расположенный между фигурными скобками. В нашем случае, появится окошко с сообщением Условие возвратило true . Если операция сравнения вернёт false , то ничего не произойдёт.
Символы двойного слеша // , являются комментарием. После двойного слэша можно написать любой текст, интерпретатор языка JavaScript, будет воспринимать его как комментарий и обрабатывать не будет. Как мы помним, в языках и , тоже можно создавать комментарии.
Оператор ветвления if else , предназначен для запуска того или иного блока кода, в зависимости от значения которое вернёт условие: true или false
Схема оператора ветвления if else , выглядит следующим образом:
If (условие) { код запустится, если условие вернёт true } else { код запустится, если условие вернёт false }
Приведём пример с оператором ветвления if else:
Var numOne; var numTwo; numOne = 5; numTwo = 3; if (numOne > numTwo) { alert("Условие возвратило true"); } else { alert("Условие возвратило false"); }
Присвойте переменной numTwo , число большее чем 5 , например 7 , тогда условие вернёт false и появится окошко с сообщением Условие возвратило false .
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание циклов в javascript . В данной статье я бы хотел рассказать об условном операторе в JavaScript . Вообще всё программирование состоит из условий, и во всех языках программирования (JavaScript не стал исключением) существует понятие условного оператора. Смысл условного оператора состоит в том, что, если условие выполняется, то делать вот эти действия, если не выполняется — то делать другие действия. Общая схема условного оператора выглядит следующим образом:
If (условие) { //Блок операторов }; else { //Блок операторов }
Давайте сразу напишем какой-нибудь пример: будем запрашивать число у пользователя и, если оно четное, выводить сообщение "Это число четное" , если нет — "это число нечетное" :
Условный оператор JavaScript var a = prompt("Введите число","Ваше число..."); if (a%2 == 0) alert("Это число четное"); else alert("Это число нечетное");
Если вы наберете данный код, то увидите, что всё работает. Сейчас я вам покажу, как важен синтаксис в JavaScript
. Уберите знак ";" перед else и код сразу перестанет работать. Поэтому всегда будьте внимательны. В одной из следующих статей, я расскажу, как отлавливать ошибки в JavaScript
.
Один условный оператор может вставляться в другой. Давайте добавим проверку на то, что пользователь внёс число "0".
Условный оператор JavaScript var a = prompt("Введите число","Ваше число..."); if (a%2 == 0) { if (a == 0) alert("Вы ввели 0"); else alert("Это число четное"); } else alert("Это число нечетное");
Сейчас я вам покажу, как проверять несколько условий. Есть такое понятие, как логическое "И"
(обозначается с помощью символов &&). Также есть понятие логического "ИЛИ"
(обозначается с помощью символов ||). Приоритет у логического "И" выше, т.е. сначала выполнится проверка этого условия, а потом проверка логического "ИЛИ".
Давайте разберем такой пример: пусть у нас создаётся случайное число от 1 до 10. Необходимо вывести фразу "Нужное число = " и само число, если это число не равно 6 и больше 5 или больше 1, но меньше 4:
Условный оператор JavaScript var a = 10 * Math.random(); //Math.random возвращает значение от 0 до 1, поэтому мы умножаем на 10 a = Math.round(a); //Округляем a до целого if ((a != 6 && a > 5) || (a > 1 && a < 4)) alert("Нужное число = "+a); else alert("Не соответствует условию = "+a);
В данном случае нужными числами являются: 2,3,7,8,9,10. Другие числа не соответствуют условию.
Также хочу обратить ваше внимание на оператор "!=", который означает "не равно". Напоследок, при составлении условий всегда обращайте внимание на расстановку скобок. Большинство ошибок связано с их неправильной расстановкой.
Условные операторы
Условные операторы позволяют пропустить или выполнить другие операторы в зависимости от значения указанного выражения. Эти операторы являются точками принятия решений в программе, и иногда их также называют операторами «ветвления» .
Если представить, что программа - это дорога, а интерпретатор JavaScript - путешественник, идущий по ней, то условные операторы можно представить как перекрестки, где программный код разветвляется на две или более дорог, и на таких перекрестках интерпретатор должен выбирать, по какой дороге двигаться дальше.
Оператор if/elseОператор if - это базовый управляющий оператор, позволяющий интерпретатору JavaScript принимать решения или, точнее, выполнять операторы в зависимости от условий. Оператор if имеет две формы. Первая:
if (выражение) оператор
В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то оператор выполняется. Если выражение возвращает ложное значение, то оператор не выполняется. Например:
If (username == null) // Если переменная username равна null или undefined username = "Alex"; // определить ее
Обратите внимание, что скобки вокруг условного выражения являются обязательной частью синтаксиса оператора if.
Вторая форма оператора if вводит конструкцию else, выполняемую в тех случаях, когда выражение возвращает ложное значение. Ее синтаксис:
if (выражение) оператор1 else оператор2
Эта форма выполняет оператор1, если выражение возвращает истинное значение, и оператор2, если выражение возвращает ложное значение. Например:
If (n == 1) console.log("Получено 1 новое сообщение."); else console.log("Получено " + n + " новых сообщений.");
Оператор else ifОператор if/else вычисляет значение выражения и выполняет тот или иной фрагмент программного кода, в зависимости от результата. Но что если требуется выполнить один из многих фрагментов? Возможный способ сделать это состоит в применении оператора else if. Формально он не является самостоятельным оператором JavaScript; это лишь распространенный стиль программирования, заключающийся в применении повторяющегося оператора if/else:
If (n == 1) { // Выполнить блок 1 } else if (n == 2) { // Выполнить блок 2 } else if (n == 3) { // Выполнить блок 3 } else { // Если ни один из предыдущих операторов else не был выполнен, выполнить блок 4 }
В этом фрагменте нет ничего особенного. Это просто последовательность операторов if, где каждый оператор if является частью конструкции else предыдущего оператора.
Оператор switchОператор if создает ветвление в потоке выполнения программы, а многопозиционное ветвление можно реализовать посредством нескольких операторов else if. Однако это не всегда наилучшее решение, особенно если все ветви зависят от значения одного и того же выражения. В этом случае расточительно повторно вычислять значение одного и того же выражения в нескольких операторах if.
Оператор switch предназначен именно для таких ситуаций. За ключевым словом switch следует выражение в скобках и блок кода в фигурных скобках:
switch(выражение) { инструкции }
Однако полный синтаксис оператора switch более сложен, чем показано здесь. Различные места в блоке помечены ключевым словом case , за которым следует выражение и символ двоеточия.
Когда выполняется оператор switch, он вычисляет значение выражения, а затем ищет метку case, соответствующую этому значению (соответствие определяется с помощью оператора идентичности ===). Если метка найдена, выполняется блок кода, начиная с первой инструкции, следующей за меткой case. Если метка case с соответствующим значением не найдена, выполнение начинается с первой инструкции, следующей за специальной меткой default: . Если метка default: отсутствует, блок оператора switch пропускается целиком.
Работу оператора switch сложно объяснить на словах, гораздо понятнее выглядит объяснение на примере. Следующий оператор switch эквивалентен повторяющимся операторам if/else, показанным в предыдущем примере:
Switch(n) { case 1: // Выполняется, если n === 1 // Выполнить блок 1 break; // Здесь остановиться case 2: // Выполняется, если n === 2 // Выполнить блок 2 break; // Здесь остановиться case 3: // Выполняется, если n === 3 // Выполнить блок 3 break; // Здесь остановиться default: // Если все остальное не подходит... // Выполнить блок 4 break; // Здесь остановиться }
Обратите внимание на ключевое слово break в конце каждого блока case. Оператор break приводит к передаче управления в конец оператора switch и продолжению выполнения операторов, следующих далее. Конструкции case в операторе switch задают только начальную точку выполняемого программного кода, но не задают никаких конечных точек.
В случае отсутствия операторов break оператор switch начнет выполнение блока кода с меткой case, соответствующей значению выражения, и продолжит выполнение операторов до тех пор, пока не дойдет до конца блока. В редких случаях это полезно для написания программного кода, который переходит от одной метки case к следующей, но в 99% случаев следует аккуратно завершать каждый блок case оператором break. (При использовании switch внутри функции вместо break можно использовать оператор return. Оба этих оператора служат для завершения работы оператора switch и предотвращения перехода к следующей метке case.)
Ниже приводится более практичный пример использования оператора switch, он преобразует значение в строку способом, зависящим от типа значения:
Function convert(x) { switch(typeof x) { // Преобразовать число в шестнадцатеричное целое case "number": return x.toString(16); // Вернуть строку, заключенную в кавычки case "string": return """ + x + """; // Любой другой тип преобразуется обычным способом default: return x.toString(); } } console.log(convert(1067)); // Результат "42b"
Обратите внимание, что в двух предыдущих примерах за ключевыми словами case следовали числа или строковые литералы. Именно так оператор switch чаще всего используется на практике, но стандарт ECMAScript позволяет указывать после case произвольные выражения.
Оператор switch сначала вычисляет выражение после ключевого слова switch, а затем выражения case в том порядке, в котором они указаны, пока не будет найдено совпадающее значение. Факт совпадения определяется с помощью оператора идентичности ===, а не с помощью оператора равенства ==, поэтому выражения должны совпадать без какого-либо преобразования типов.
Поскольку при каждом выполнении оператора switch вычисляются не все выражения case, следует избегать использования выражений case, имеющих побочные эффекты, такие как вызовы функций и присваивания. Безопаснее всего ограничиваться в выражениях case константными выражениями.
Как объяснялось ранее, если ни одно из выражений case не соответствует выражению switch, оператор switch начинает выполнение оператора с меткой default:. Если метка default: отсутствует, тело оператора switch полностью пропускается. Обратите внимание, что в предыдущих примерах метка default: указана в конце тела оператора switch после всех меток case. Это логичное и обычное место для нее, но на самом деле она может располагаться в любом месте внутри оператора switch.
Вернёмся к нашим зайцамВспомним задание про зайцев и Мазая из прошлой главы.
Без использования условий и действий, выполняемых (или не выполняемых)
в зависимости от условий, подсчитать количество зайцев в последней
лодке будет непросто.
Добавим в фунцию lastBoatRabbits ветвление:
var lastBoatRabbits = function (totalRabbits ) { if (totalRabbits === 0 ) { // return 0 ; } else { var restRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) { // return 6 ; } else { return restRabbits; } } };Итак, если зайцев на речке нет , последняя лодка никого не привезёт (на самом деле, она вернётся почти сразу же, т.к. дедушка точно будет знать, что зайцев на речке нет).
А если количество зайцев на реке кратно 6 , то последней будет лодка, полностью загруженная зайцами.
Что ещё можно было бы улучшить в этой программе? Я бы использовал отдельную переменную,
хранящую количество зайцев, помещающихся в лодке, на тот случай, если благодарные
зайцы подарят Мазаю лодку побольше. Мало ли что вдруг.
Ветвление может иметь часть, которая выполняется, если условие неверно,
а может его не иметь:
В качестве условия в if может выступать выражение сравнения двух чисел или строк,
с использованием операций == , > , < , >= , 5
// => true
11
< 6
// => false
5
>= 5
// => true
3
!= 3
// => false
"abc"
== "abc"
// => true
"abc"
=== "abc"
// => true
Переменные в качестве условия:
var
condition = 10
> 5
;
if
(condition) {
console
.log("10 > 5"
); // Будет выполнено
}
Логические операции над условиями
Несколько выражений, возвращающих логическое (или приводимое к логическому) значений
можно объединить с помощью логических операций. Такими операциями называют:
логическое И && , логическое ИЛИ || и логическое отрицание! .
Логическое И возвращает true только в том случае, если с обоих сторон от него true ,
логическое ИЛИ возвращает false только в том случае, если с обоих сторон от него — false .
Отрицание возвращает false для true и, наоборот, true для false .
По правилам Javascript значения 0 , null и undefined приводятся к false .
Однако, получая результат && мы получим первое неприведённое значение, которое
приводится к false , а получая результат || — первое неприведённое значение,
которое приводится к true:
Таким образом, функцию, возвращающую количество зайцев в последней лодке можно было бы переписать так:
var boatCapacity = 6 ; var lastBoatRabbits = function (totalRabbits ) { return totalRabbits && (totalRabbits % boatCapacity || boatCapacity); }; Задания- Для чисел, кратных трём, возвращает "Fizz"
- Для чисел, кратных пяти, возвращает "Buzz"
- Для чисел, кратных пятнадцати (одновременно трём и пяти), возвращает "FizzBuzz"
- В остальных случаях возвращает исходное число