The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax if (condition) statement1 condition An expression that is considered to be either truthy or falsy . statement1 Statement that is executed if condition is truthy . Can be any statement, including further nested if statements. To execute multiple statements, use a block statement ({ ... }) to group those statements. To execute no statements, use an empty statement. statement2 Statement that is executed if condition is falsy and the else clause exists. Can be any statement, including block statements and further nested if statements. DescriptionMultiple if...else statements can be nested to create an else if clause. Note that there is no elseif (in one word) keyword in JavaScript.
If (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementN
To see how this works, this is how it would look if the nesting were properly indented:
If (condition1) statement1 else if (condition2) statement2 else if (condition3) ...
To execute multiple statements within a clause, use a block statement ({ ... }) to group those statements. In general, it is a good practice to always use block statements, especially in code involving nested if statements:
If (condition) { statements1 } else { statements2 }
Do not confuse the primitive Boolean values true and false with truthiness or falsiness of the Boolean object. Any value that is not false , undefined , null , 0 , -0 , NaN , or the empty string (""), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. For example:
Var b = new Boolean(false); if (b) // this condition is truthy
Examples Using if...else if (cipher_char === from_char) { result = result + to_char; x++; } else { result = result + clear_char; } Using else ifNote that there is no elseif syntax in JavaScript. However, you can write it with a space between else and if:
If (x > 50) { /* do the right thing */ } else if (x > 5) { /* do the right thing */ } else { /* do the right thing */ }
Assignment within the conditional expressionIt is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:
If (x = y) { /* do the right thing */ }
If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:
If ((x = y)) { /* do the right thing */ }
SpecificationsECMAScript Latest Draft (ECMA-262) |
Draft | |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of "if statement" in that specification. |
Standard | |
ECMAScript 5.1 (ECMA-262) The definition of "if statement" in that specification. |
Standard | |
ECMAScript 3rd Edition (ECMA-262) The definition of "if statement" in that specification. |
Standard | |
ECMAScript 1st Edition (ECMA-262) The definition of "if statement" in that specification. |
Standard | Initial definition |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop Mobile Server | ||||||||||||
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js | ||||||||||||
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Функции и условия if-else в JavaScriptЧасто при использовании 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() вызовет ошибку.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
var a = 10; var b = (a>1) ? 100: 200; alert(b);
Если условие a>1 истинно, то переменной b присвоить значение 100 , иначе переменной b присвоить значение 200 .
Задание Js 3_4.
Дополнить код: объявлено 3 локальные переменные с использованием ключевого слова var . Необходимо в переменную max присвоить значение следующего тернарного оператора: если a больше b , то возвращаем a , иначе возвращаем b .
Фрагмент кода:
if (a * b < 6) { result = "Мало"; } else { result = "Много"; }
Вопросы для самоконтроля:
Оператор switch javascript служит для проверки переменной на множество значений:
Синтаксис:
switch (переменная или выражение) { case вариант1: //..блок операторов.. break case вариант2: //..блок операторов.. break default: //..блок операторов.. }
Проверяется значение переменной или выражения: в каждом case проверяется одно из значений, в случае подходящего значения выполняется тот или иной блок операторов, соответствующий данному case .
Блок, начинающийся со служебного слова default можно опустить. Операторы блока будут выполнены в случае, если ни одно из перечисленных значений во всех case не подходит.
Важно: Оператор break обязателен после каждого рассмотренного значения переменной (после каждого case ); если его не использовать, то будут выведены все, расположенные ниже операторы
Сравним с оператором IF :
var a = 2; switch(a) { case 0: // if (a === 0) case 1: // if (a === 0) alert("Ноль или один"); // тогда выводим... break; case 2: // if (a === 2) alert("Два"); // тогда выводим... break; default: // else alert("Много"); // иначе выводим... }
Как сгруппировать несколько вариантов?
Для выполнения одних и тех же операторов возможно группировка нескольких case . Как в примере выше:
Case 0: case 1: alert("Ноль или один"); break; ...
При a = 0 и a = 1 выполняется один и тот же оператор: alert("Ноль или один");
Пример 4: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.
✍ Решение:
- Создайте веб-страницу с html-скелетом и тегом script .
- Инициализируйте переменную color
- Проверьте значение переменной с помощью конструкции switсh , выводя на каждое значение - соответствующий перевод:
- Для цветов "синий" и "голубой" выполните группировку:
- Организуйте вывод для тех цветов, которые не предусмотрены программой:
- Протестируйте сценарий в браузере.
var color = prompt("Какой цвет?" ) ; |
var color = prompt("Какой цвет?");
switch (color) { case "красный" : alert("red"); break; case "зеленый": alert("green"); break; // ...
Если переменная color имеет значение "красный", то вывести в модальное окно перевод - "red" и выйти из конструкции (break;). Если переменная color имеет значение "зеленый", то вывести в модальное окно перевод - "green" и выйти из конструкции (break;).
// ... case "синий": case "голубой": alert("blue"); break; // ...
Если переменная color имеет значение "синий" или переменная color имеет значение "голубой", то вывести в модальное окно перевод - "blue" и выйти из конструкции (break;).
// ... default : alert("y нас нет сведений по данному цвету" ) } // конец switch |
// ... default: alert("y нас нет сведений по данному цвету") } // конец switch
Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:
14 15 16 17 | var number = prompt("Введите число 1 или 2:" ) ; switch (number) { case "1" { document.write ("Один" ) ; } ; break ; case "2" { document.write ("Два" ) ; } ; break ; default { document.write ("Вы ввели значение, отличное от 1 и 2" ) ; } ; } |
var number = prompt("Введите число 1 или 2:"); switch (number) { case "1" { document.write("Один"); }; break; case "2" { document.write("Два"); }; break; default { document.write("Вы ввели значение, отличное от 1 и 2"); }; }
Задание Js 3_7. Что выведется на экране при выполнении следующего кода?:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var value = "2" ; switch (value) { case "1" : case "2" : case "3" : document.write ("Hello" ) ; break ; case "4" : case "5" : document.write ("World" ) ; default : document.write ("Error" ) ; } |
var value = "2"; switch (value) { case "1": case "2": case "3": document.write("Hello"); break; case "4": case "5": document.write("World"); default: document.write("Error"); }
Задание Js 3_8. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение: - На ветке сидит 1 ворона - На ветке сидит 4 вороны - На ветке сидит 10 ворон
Вопросы для самоконтроля:
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
- В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
- В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1 :
- Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:
for(var i = 0; условие; приращение счетчика) { //..блок операторов.. }
for(var i = 0; условие; i++) { //..блок операторов.. }
for(var i = 0; i