Jquery if else примеры. Условные операторы в Javascript - Конструкция IF-ELSE - Условия в Javascript - Основы. теги маркированного списка

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

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

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

Оператор 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 + " новых сообщений.");

Оператор 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 предыдущего оператора.

Оператор 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 . В переводе на русский язык это условие читается как Если-То .

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

Например, если вечером будет ясно, то мы пойдём в парк.

если этот автомобиль стоит меньше 1000$, то я его куплю и т.п.

Таким образом, как Вы уже, наверное, поняли условие «Если» и следствие «То» сплошь и рядом встречаются в нашей жизни. То есть наше поведение в различных ситуациях в основном зависит от каких-либо условий.

То же самое относится и к языкам программирования. В них есть специальные конструкции, которые позволяют задавать определённые условия и выполнять действия, если указанные условия выполняются или не выполняются .

Давайте попробуем реализовать какой-нибудь простой пример применения условных операторов, а точнее конструкции If-Else в JavaScript .

Для начала рассмотрим, как работает оператор If в JavaScript

Для этого ниже сначала приведём пример, а затем его разберём.

var pogoda = "ясно" ; /* создаём переменную pogoda и присваиваем ей значение "ясно" */

if(pogoda == "ясно" ) /* создаём условие: если pogoda равно "ясно" - ИСТИНА*/

{ /* то... */

document .write ();

Мы с семьей вечером идем в Парк

На что следует обратить внимание в примере выше ?

Во-первых , на знаки равенства == и присваивания = в JavaScript . Их следует различать: то есть сначала мы создаём переменную и присваиваем ей значение. Затем в условии If мы говорим уже о равенстве.

Во-вторых , когда говорится о выполнении или же невыполнении условия, заключённого в фигурные скобки {} , то следует понимать, что язык JavaScript воспринимает условие либо как Истину , либо как Ложь . То есть если условие Истинно , как в нашем случае, то выполняется действие, заключённое в фигурные скобки {} .

Если же условие Ложно , как в примере ниже, то условие, заключённое в фигурных скобках {} , выполняться не будет.

var pogoda = "пасмурно" ;

if(pogoda == "ясно" ) /* теперь условие ЛОЖЬ: pogoda не равно "ясно" */

document .write ("Мы с семьей вечером идем в Парк" );

Вот так работает условный оператор If : если условие Истина - действие выполняется, если Ложь - не выполнятся. Всё просто.

Теперь поговорим о том, как работает конструкция If-Else в JavaScript . Else переводится как «Иначе» .

Давайте снова обратимся к реальной жизни. В большинстве случаев, если какое-либо условие выполняется, то мы делаем одно. Если же оно не выполняется - «Иначе» , то мы делаем другое.

Продолжим работать с примерами, приведёнными ранее.

Если вечером будет ясно, то мы пойдём в парк, иначе (если будет пасмурно) мы останемся дома и будем смотреть телевизор .

Или если этот автомобиль стоит меньше 1000$, то я его куплю, иначе (если он стоит дороже ) я на эти деньги отправлюсь в путешествие .

В JavaScript также есть такая возможность - предоставлять альтернативу (делать что-то другое) , если условие не выполняется. В JavaScript мы можем создавать подобные условия при помощи конструкции If-Else . Давайте обратимся к примеру.

var pogoda = "пасмурно" ; /* переменной pogoda присваиваем значение "пасмурно" */

if(pogoda == "ясно" ) /* создаём условие: если pogoda равно "ясно" - это ИСТИНА */

document .write ("Мы с семьей вечером идем в Парк" );

else /* иначе - если pogoda не равно "ясно" - это ЛОЖЬ */

{
document .write ("

" + "Мы остаёмся дома - смотреть телевизор" );
}

Мы остаёмся дома - смотреть телевизор

Разберём приведённый пример.

Итак, если условие Истинно , то выполняется действие, следующее после оператора If , заключённое в фигурные скобки {} .

Если же условие Ложно , то выполняется действие, следующее после оператора Else , также заключённое в фигурные скобки {} .

Мы рассмотрели, как работает простая, но часто использующаяся в JavaScript конструкция If-Else . И здесь, на будущее, следует сказать о том, что каким бы сложным ни было условие, в первую очередь имеет значение то, что Истинно оно или Ложно .

Для закрепления пройденного материала «Условные операторы в Javascript - Конструкция IF-ELSE » рассмотрим ещё один пример.

Только теперь используем условие If-Else при работе с числами.

var count = 10 ;

if(count = 3 ) /* создаём условие: если число элементов массива friends больше или равно 3, то....*/

document .write ("Это большой массив, в котором как минимум 3 элемента" );

else /* иначе... */

{
document .write ("Это маленький массив, в котором менее 3-х элементов" );

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

Часто при использовании JavaScript возникает необходимость выполнить разные действия при выполнении разных условий.

К примеру, вы написали скрипт, который проверяет, каким браузером пользуется посетитель, зашедший на ваш сайт. Если это Internet Explorer, должна быть загружена страница специально разработанная под IE, если это какой либо другой браузер - должен быть загружен другой вариант данной страницы.

Общий синтаксис конструкции if-else следующий:

If (условие) { действие } else { действие2 };

В качестве примера можно рассмотреть такой код:

If (browser=="MSIE") { alert("Вы используете IE") } else { alert("Вы используете не IE") };

Заметьте, что используются все строчные буквы. Если написать "IF", произойдет ошибка.

Также обратите внимание на то, что для сравнения используется двойной знак равенства (==).

Если же мы напишем browser="MSIE" , то мы просто присвоим значение MSIE переменной с именем browser .

Когда мы пишем browser=="MSIE" , то JavaScript "понимает", что мы хотим произвести сравнение, а не присвоить значение.

Более сложные условия if можно создавать просто добавляя их, например, в часть else уже существующей конструкции if-else :

If (условие) { действие1 } else { if (другое условие) { действие2 } else { действие3 }; };

Например:

If (browser=="MSIE") { alert("Вы используете IE") } else { if (browser=="Netscape") { alert("Вы используете Firefox") } else { alert("Вы используете неопознанный браузер:)") }; };

Логические операторы AND, OR и NOT

Для еще более гибкого использования конструкции if-else можно применять так называемые логические операторы.

And записывается как && и используется в тех случаях, когда нужно проверить на истинность более одного условия.

К примеру: Если в холодильнике есть яйца и в холодильнике есть бекон, то мы можем съесть яйца с беконом.

Синтаксис следующий:

If (условие1 && условие2) { действие } if (час==12 && минута==0) { alert("Полдень!") };

Or записывается как || и используется тогда, когда мы хотим проверить на истинность хотя бы одно из двух и более условий. (Получить || можно при зажатой клавише shift и клавише \)

К примеру: Если в холодильнике есть молоко, или в холодильнике есть вода, то нам есть, что попить.

Синтаксис следующий:

If (условие1 || условие2) { действие } if (час==11 || час==10) { alert("Полдень пока еще не наступил!") };

Not записывается как ! и используется для отрицания.

К примеру: Если в холодильнике или нет яиц, или нет бекона, то мы не можем съесть или яйца, или бекон.

Синтаксис такой:

If (!(условие)) { действие } if (!(час==11)) { alert("Сейчас не 11 часов") };

Функции в JavaScript

Вместо того, чтобы просто добавлять Javascript на страницу, чтобы браузер выполнял код, когда дойдет до него, вы можете сделать так, чтобы выполнение скрипта происходило только при происхождении какого-либо события.

К примеру, вы создали JavaScript, задача которого - менять фоновый цвет страницы при клике на определенную кнопку. В этом случае вам нужно "сказать" браузеру о том, что этот скрипт не должен выполняться просто потому, что до него дошла очередь.

Чтобы браузер не выполнял скрипт при его загрузке, нужно написать скрипт как функцию.

В этом случае JavaScript-код не будет выполнятся до тех пор, пока мы не "попросим" его об этом особым образом.

Посмотрите на данный пример скрипта, написанного как функция:

function myfunction() { alert("Добро пожаловать!"); }

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

Если бы строка alert("Добро пожаловать!"); была бы написана не внутри функции, то она выполнялась бы всякий раз, когда браузер доходил бы до этой строки. Но так как мы написали ее внутри функции, эта строка не выполняется до тех пор, пока мы не нажмем кнопку.

Вызов функции (т.е. обращение к ней) происходит в данной строке:

Как вы видите, мы поместили кнопку в форму и добавили событие onClick="myfunction()" для кнопки.

В будущих уроках мы с вами рассмотрим другие типы событий, которые производят запуск функций.

Общий синтаксис для функций следующий:

Function functionname(переменная1, переменная2,..., переменнаяN) { // Здесь идет тело функции, те действия, которые она выполняет }

Фигурные скобки: { и } обозначают начало и окончание функции.

Типичной ошибкой при создании функций является невнимательность и игнорирование важности регистра символов. Слово function должно быть именно function . Вариант Function или FUNCTION вызовет ошибку.

Кроме того, использование заглавных букв играет роль и при задании имен переменных. Если у вас есть функция с именем myfunction() , то попытка обратиться к ней, как к Myfunction() , MYFUNCTION() или MyFunction() вызовет ошибку.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

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

Управляющие инструкции могут быть вложенными, а также использоваться внутри других управляющих инструкций.

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

Инструкция if имеет две формы. Синтаксис первой формы:

Выражение в круглых скобках называется условием выполнения инструкции if или кратко условием . Сначала вычисляется значение выражения. Полученное значение, если необходимо, неявно преобразуется к булеву типу. Если результатом вычисления выражения является значение true , то инструкция выполняется. Если выражение возвращает false , то инструкция не выполняется:

If (true) alert("Выполнено!"); if (false) alert("Не выполнится!");

Синтаксис if позволяет выполнить только одну инструкцию, однако если требуется выполнить более одной инструкции нужно использовать составную инструкцию :

If (true) { var str = "Hello!"; alert(str); }

Синтаксис второй формы:

If (выражение) инструкция; else инструкция;

Ключевое слово else позволяет добавить инструкцию, выполняемую в том случае, если условие имеет ложное значение:

If (false) alert("Не выполнится"); else alert("Выполнится");

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

Var num = 2; if (num == 1) { alert("значение num: " + num); } else if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); }

В этом коде нет ничего особенного. Это просто последовательность инструкций, где каждая инструкция if является частью else предыдущей инструкции if . Такая форма записи на первый взгляд может показаться не совсем понятной, поэтому рассмотрим синтаксически эквивалентную форму, показывающую вложенность инструкций if:

Var num = 2; if (num == 1) { alert("значение num: " + num); } else { if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); } }

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

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

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

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

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

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

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

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

Var digit = 4; if (digit

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

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

Var digit = 4; if (digit

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

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

Var digit = 4; if (digit

Инструкция 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("Это ложь.
");

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

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