Вернёмся к нашим зайцам

Вспомним задание про зайцев и Мазая из прошлой главы.
Без использования условий и действий, выполняемых (или не выполняемых)
в зависимости от условий, подсчитать количество зайцев в последней
лодке будет непросто.

Добавим в фунцию lastBoatRabbits ветвление:

var lastBoatRabbits = function (totalRabbits ) { if (totalRabbits === 0 ) { // return 0 ; } else { var restRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) { // return 6 ; } else { return restRabbits; } } };

Итак, если зайцев на речке нет , последняя лодка никого не привезёт (на самом деле, она вернётся почти сразу же, т.к. дедушка точно будет знать, что зайцев на речке нет).

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

Что ещё можно было бы улучшить в этой программе? Я бы использовал отдельную переменную,
хранящую количество зайцев, помещающихся в лодке, на тот случай, если благодарные
зайцы подарят Мазаю лодку побольше. Мало ли что вдруг.

function (totalRabbits ) { if (totalRabbits === 0 ) { return 0 ; } else { var restRabbits = totalRabbits % boatCapacity; if (restRabbits === 0 ) { return boatCapacity; } else { return restRabbits; } } };

Синтаксис ветвления

Ветвление может иметь часть, которая выполняется, если условие неверно,
а может его не иметь:

// Вариант с двумя ветками: if (rainIsFalling) { stayHome(); // Если rainIsFalling == true, выполняется эта часть } else { walkInAPark(); // Иначе выполняется эта часть } // Вариант с одной веткой: if (musicIsPlaying) { dance(); } // Если musicIsPlaying == false, выполнение программы просто идёт дальше

Условия

В качестве условия в if может выступать выражение сравнения двух чисел или строк,
с использованием операций == , > , < , >= , <= , != и === , любая переменная, которой
было присвоено логическое значение и просто любое значение, которое в результате работы
if будет приведено к логическому значению.

Примеры сравнения:

10 > 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 ; // => true false || false ; // => false !false ; // => true

Логическое И возвращает true только в том случае, если с обоих сторон от него true ,
логическое ИЛИ возвращает false только в том случае, если с обоих сторон от него — false .
Отрицание возвращает false для true и, наоборот, true для false .

По правилам Javascript значения 0 , null и undefined приводятся к false .
Однако, получая результат && мы получим первое неприведённое значение, которое
приводится к false , а получая результат || — первое неприведённое значение,
которое приводится к true:

0 && true ; // => 0 6 || 7 || false ; // => 6 !0 ; // => true

Таким образом, функцию, возвращающую количество зайцев в последней лодке можно было бы переписать так:

var boatCapacity = 6 ; var lastBoatRabbits = function (totalRabbits ) { return totalRabbits && (totalRabbits % boatCapacity || boatCapacity); };

Задания

1. Напишите функцию fizzbuzz , которая принимает параметр number и:
   • Для чисел, кратных трём, возвращает "Fizz"
   • Для чисел, кратных пяти, возвращает "Buzz"
   • Для чисел, кратных пятнадцати (одновременно трём и пяти), возвращает "FizzBuzz"
   • В остальных случаях возвращает исходное число
2. Напишите фунцию iGoToNorth , которая принимает параметр number и определяет, подходит ли нам переданное число. Число подходит если оно больше 10, меньше 30 и кратно 7.

В JavaScript есть конструкция условий, которая влияет на выполнения ход программы. Если (по английски if) что-то есть, что-то истинно, тогда делать одно, иначе (по английски else) - делать другое.

Инструкция if

Давайте сразу рассмотрим схему работы инструкции if , она проста и не требует больших объяснений.

If (условие) { код для выполнения, если условие истинно }

Всё просто: если условие истинно, тогда код в блоке {...} выполняется.

Var digit = 4; if (digit == 4) { document.write("Значение переменной digit равно 4."); }

Можно сделать немного странный код:

Var digit = 4; if (true) { document.write("Условие истинно."); }

Инструкция else

В паре с инструкцией if может использоваться инструкция else . Она переводится как "иначе" и задаёт альтернативный код.

Var digit = 4; if (digit

Обратите внимание на разное написание фигурных скобок в данном примере у инструкций if и else. Так писать совсем не обязаетльно, оба синтаксиса правильны.

После инструкции else может идти новая инструкция if. Так мы выполним проверку множественных условий.

Var digit = 4; if (digit

В JavaScript нет инструкции elseif (одним словом), как в PHP.

Если вам нужно выполнить только одну инструкцию, то фигурные скобки блока {...} не нужны. В нашем примере их можно не писать:

Var digit = 4; if (digit

Ложь в JavaScript

Инструкция if (условие) вычисляет и преобразует условие (выражение) в скобках к логическому типу boolian (истина или ложь).

Повторим что есть ложь в JavaScript.

• Число 0 (ноль).
• Пустая строка "".
• Логическое значение false:)
• Значение null.
• Значение undefined.
• Значение NaN (Not a Number - не число).

Всё остальное является истиной.

Пара возможных ошибок:

If ("false") document.write("Это истина.
"); if (false) document.write("Это истина.

");

Тут нужно отличить строку "false" (взята в кавычки), от значения булевого типа false.

If (" ") document.write("Это истина.
"); else document.write("Это ложь.
");

Тут нужно отличить строку " " (внутри пробел), от пустой строки "". Пробел внутри строки делает её не пустой, а содержащий символ. Для интерпритатора не важно буква или пробел - символ есть символ.

Другие условные конструкции в JavaScript

• Консрукция switch JavaScript .
• Оператор вопросительный знак

JavaScript - Урок 7. Ветвления в программе - оператор if

Очень часто возникает ситуация, когда нам нужно выполнить какое-либо действие в зависимости от какого-либо условия. Например, у нас интернет-магазин одежды. Мы спрашиваем у пользователя кто он (мужчина или женщина) и в зависимости от ответа отображаем список соответствующих товаров (мужских или женских). При написании подобных программ используется условный оператор if . Синтаксис у него следующий:

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 пиксела). Если не получится, то скачайте

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

Условные операторы позволяют пропустить или выполнить другие операторы в зависимости от значения указанного выражения. Эти операторы являются точками принятия решений в программе, и иногда их также называют операторами «ветвления» .

Если представить, что программа - это дорога, а интерпретатор 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.

Если бы программирование было бы всегда линейным, то, наверное, его бы и не было. Ведь практически в любой программе присутствуют различные разветвления, которые зависят от определённых внешних или внутренних факторов. Вот такие разветвления создаются с помощью условных операторов , о которых в этой статье я Вам и расскажу.

Общий вид условного оператора в JavaScript такой:

If (условие) {
//Блок операторов
}
else {
//Блок операторов
}

Сначала идёт ключевое слово if , которое сообщает браузеру, что дальше идёт условный оператор. Внутри скобок указывается условие, которое, соответственно, возвращает true или false . Если выражение в скобках было true (истинно ), то выполняется первый блок операторов, если условие false (ложно ), то выполняется блок операторов в else . Также блок else не является обязательным, и дальше я приведу такой пример.

Давайте теперь потренируемся уже на практике. Решим такую задачу: пользователь вводит число, а мы выводим сообщание - больше оно или меньше 5 .

if (x < 5) alert ("Введённое число меньше пяти");

Разберём этот пример. Первой строкой мы вызываем функцию prompt , которая выводит окно с просьбой ввести число. Дальше пользователь вводит число, которое записывается в переменную x . А дальше идёт условие, которое я перевожу так: Если x меньше 5, то вывести сообщение: "Введённое число меньше пяти", иначе вывести сообщение "Введённое число больше пяти" . Выражение x < 5 возвращает либо true ( < 5 ) или false (x >= 5 ). Также обратите внимание, что мы не используем фигурные скобки. Почему? Потому, что мы используем всего один оператор (функцию alert() ). В принципе, мы можем их поставить, и ничего не поменяется, однако, здесь они будут лишними.

Однако, наша задача содержит существенную ошибку. Если пользователь введёт "5 ", то у нас выводится сообщение "Введённое число больше пяти ", однако, это не совсем правильно. Поэтому давайте преобразуем условие таким образом:

If (x < 5) alert ("Введённое число меньше пяти");
else
if (x == 5) alert ("Вы ввели пять");
else alert("Введённое число больше пяти");

Как видите, блок else в первом условии преобразился. В блоке else проверяется на равенство x и 5-ти. И если это так, то выводится соответствующее сообщение, в противном случае, выводится, что число больше пяти. То есть условие внутри условия - это совершенно нормально. Также обратите внимание, что я по-прежнему не поставил фигурные скобки, так как if-else это один оператор. А когда только один оператор наличие скобок необязательно.

Давайте разберём ещё один пример. Создадим переменную, которая будет true , если введённое число положительное, и false , если число отрицательное.

Var x = prompt("Введите число");
var positive = true;
if (x < 0) positive = false;
alert (positive);

В данном примере используется классический пример, когда мы берём какую-то переменную и присваиваем ей значение по умолчанию. И если это требуется, то меняем. В данном случае, мы меняем значение по умолчанию, если число отрицательное. Однако, данный пример можно было бы написать ещё красивее:

Var x = prompt("Введите число");
var positive = x < 0;

Другими словами, мы переменной positive сразу присваиваем результат сравнения x и нуля.

Теперь поговорим о так называемых сложных условиях . В примерах выше мы рассматривали лишь простые условия, однако, существуют также и другие условия, которые состоят из нескольких условий. И здесь используются две операции: && - логическое И и || - логическое ИЛИ . Давайте напишем такое условие:

If ((x <= 5) && (x >= 0)) {//блок операторов}

Данное условие (сложное условие) даст true , тогда и только тогда, когда x <= 5 И x >= 0 . В противном случае, вернётся false .

Рассмотрим сложное условие с логическим ИЛИ .

If ((x <= 5) || (x == 6)) {//блок операторов}

Перевести это можно так: если x <= 5 ИЛИ x == 6 , то вернуть true , иначе false .

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

Вот и всё, что хотелось сказать по условным операторам в JavaScript . А дальше нужна лишь практика. Увы, но без практики, Вы никогда не научитесь использовать этот оператор, без знания которого двигаться дальше просто бессмысленно. Так что придумайте какую-нибудь несложную задачу (на подобии той, что мы решили выше) и решите её.