Javascript html условие if

if . else

В зависимости от условия выполняет один или другой вариант кода.

Обновлено 9 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 if (условие)  console.log('выполнится, если условие истинное (true)')> else  console.log('выполнится, если условие ложное (false)')> if (условие)  console.log('выполнится, если условие истинное (true)') > else  console.log('выполнится, если условие ложное (false)') >    Скопировать Скопировано Не удалось скопировать   

 if (условие)  console.log('выполнюсь, если условие истинное')> if (условие)  console.log('выполнюсь, если условие истинное') >    Скопировать Скопировано Не удалось скопировать   

• Выполнить блок кода, у которого условие истинное и находится выше всего в списке, остальные проверки проигнорировать:

 if (условие1)  // . > else if (условие2)  // . > else if (условие3)  // . > else  // выполнится, если все условия выше были ложными> if (условие1)  // . > else if (условие2)  // . > else if (условие3)  // . > else  // выполнится, если все условия выше были ложными >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Зачем нужны управляющие конструкции, читайте в статье «Порядок выполнения».

В разработке много задач, в которых нужно по-разному обрабатывать данные. Все эти примеры описываются фразой «если . то . »:

• если пользователь вошёл в систему, то показать содержание почтового ящика. В противном случае — форму логина.
• если сумма покупки больше 2000₽, то посчитать скидку 10%.
• если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.

Фразой «если . » определяется условие. Если условие выполняется, то мы выполняем часть, описанную фразой «то. ». Если условие не выполняется, то нужно смотреть на фразу «В противном случае . », когда она есть.

Если мы хотим решать подобные задачи с помощью кода, то язык программирования должен содержать аналогичные конструкции. Конструкция должна выбирать, какой код выполнять, в зависимости от условия. Такая конструкция называется if . . . else . Она предоставляет возможность ветвления.

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

 if (условие)  // блок кода, выполнится если условие выполняется> else  // блок кода, выполнится в противном случае> if (условие)  // блок кода, выполнится если условие выполняется > else  // блок кода, выполнится в противном случае >    Скопировать Скопировано Не удалось скопировать   

Пример ниже выведет на печать слово «Привет», если во всплывающее окно ввести «Друг» и «Я тебя не знаю» в противном случае:

 let phrase = prompt('Скажи слово друг и заходи') if (phrase === 'Друг')  alert('Привет')> else  alert('Я тебя не знаю')> let phrase = prompt('Скажи слово друг и заходи') if (phrase === 'Друг')  alert('Привет') > else  alert('Я тебя не знаю') >    Скопировать Скопировано Не удалось скопировать   

Условие

Скопировать ссылку «Условие» Скопировано

Для того чтобы хорошо понимать if, нужно разобраться с понятием условие. Условие — это выражение, которое JavaScript вычислит в значение.

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

 // применяем скидку, если цена больше или равна 2500 рублейif (price >= 2500)  price = price * 0.9> if (foundItems === 0)  console.log('Ничего не найдено')> else  console.log('печатаем результаты поиска')> if (user.isAdmin)  // сокращенная запись user.isAdmin === true console.log('Привет, админ!')> else  console.log('Привет, пользователь!')> // применяем скидку, если цена больше или равна 2500 рублей if (price >= 2500)  price = price * 0.9 > if (foundItems === 0)  console.log('Ничего не найдено') > else  console.log('печатаем результаты поиска') > if (user.isAdmin)  // сокращенная запись user.isAdmin === true console.log('Привет, админ!') > else  console.log('Привет, пользователь!') >    Скопировать Скопировано Не удалось скопировать   

Выражения в условии можно комбинировать с помощью логических операторов.

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

Какой из блоков кода выполнится?

 let foundItems = 0 if (foundItems)  console.log('Ничего не найдено')> else  console.log('печатаем результаты поиска')> let foundItems = 0 if (foundItems)  console.log('Ничего не найдено') > else  console.log('печатаем результаты поиска') >    Скопировать Скопировано Не удалось скопировать   

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

Все, что не приводится к false , будет true

Осталось запомнить 8 значений, которые приводятся к false :

Зная это правило, мы поймём, что в примере выше есть баг: мы будем писать «Ничего не найдено» всегда, кроме случая, когда в переменной found Items окажется 0 . Тогда мы попытаемся напечатать результаты поиска.

Вариации

Скопировать ссылку «Вариации» Скопировано

if без else

Скопировать ссылку «if без else» Скопировано

Если мы хотим выполнить действие, когда условие верно, но в противном случае не делать ничего, то достаточно написать только іf без блока else .

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

 if (username === 'Виктор')  console.log('Привет, Витёк! Эта пасхалка для тебя')> if (username === 'Виктор')  console.log('Привет, Витёк! Эта пасхалка для тебя') >    Скопировать Скопировано Не удалось скопировать   

if . . . else if . . . else

Скопировать ссылку «if . else if . else» Скопировано

Задача может содержать больше чем два случая. Для её решения можно собирать if . . . else в цепочки:

Например, в зависимости от статуса пользователя менять размер скидки:

 let discount = 0if (userStatus === 'VIP')  discount = 25> else if (userStatus === 'privileged')  discount = 15> else if (userStatus === 'clubMember')  discount = 5> let discount = 0 if (userStatus === 'VIP')  discount = 25 > else if (userStatus === 'privileged')  discount = 15 > else if (userStatus === 'clubMember')  discount = 5 >    Скопировать Скопировано Не удалось скопировать   

В этом случае выполнится тот блок кода, условие которого истинное и находится выше по коду. Остальные условия будут проигнорированы.

Когда условий становится много, то страдает читаемость кода. В этом случае лучше писать switch, но он подходит не всегда.

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Если нужно сохранить в переменную одно, либо другое значение, в зависимости от условия, то можно это сделать двумя путями.

 let value = 1 // значение по умолчаниюif (day === 'Tuesday')  value = 50> let value = 1 // значение по умолчанию if (day === 'Tuesday')  value = 50 >    Скопировать Скопировано Не удалось скопировать   

С использованием тернарного оператора (короткая запись if . . else ):

 let value = day === 'Tuesday' ? 50 : 1 // во вторник значение 50, во всех остальных случаях 1 let value = day === 'Tuesday' ? 50 : 1 // во вторник значение 50, во всех остальных случаях 1    Скопировать Скопировано Не удалось скопировать   

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

Роман Баранников советует

Скопировать ссылку «Роман Баранников советует» Скопировано

🛠 Частая задача — вызвать функцию при выполнении условия. Для этого можно использовать трюк с логическим И && :

 const processTuesday = () =>  // . полезный код> if (day === 'Вторник')  processTuesday()> const processTuesday = () =>  // . полезный код > if (day === 'Вторник')  processTuesday() >    Скопировать Скопировано Не удалось скопировать   

Более короткая и лаконичная запись:

 day === 'Вторник' && processTuesday() day === 'Вторник' && processTuesday()    Скопировать Скопировано Не удалось скопировать   

В таком коде функция process Tuesday ( ) будет вызвана только в тех случаях, когда первое выражение day = = = ‘Вторник’ будет true . Если же выражение будет false , то вторая часть выражения — process Tuesday ( ) не будет вычисляться совсем, потому что вычисления первого выражения достаточно, чтобы получить результат всего выражения с логическим И — оно будет false . Такой подход называется вычислением по короткой схеме и используется, чтобы не выполнять лишней работы.

Александр Леоненко советует

Скопировать ссылку «Александр Леоненко советует» Скопировано

🛠 Частый паттерн — установить значение по умолчанию, если в переменной нет значения. Можно сделать так:

 let value = 0 // значение по умолчанию if (externalValue)  value = externalValue // установить значение, если в externalValue что-либо хранится> let value = 0 // значение по умолчанию if (externalValue)  value = externalValue // установить значение, если в externalValue что-либо хранится >    Скопировать Скопировано Не удалось скопировать   

Код можно сократить, воспользовавшись операцией логического ИЛИ || .

Если external Value не объявлен, то значение установится в 0 :

 const value = externalValue || 0 const value = externalValue || 0    Скопировать Скопировано Не удалось скопировать   

Неявное приведение external Value к логическому типу также игнорирует определённые ложные значения, возможно, вполне валидные: » , NaN , 0 , -0 , 0n , false . Чтобы их не терять, нужно вместо || использовать ? ? — новый, уже неплохо поддерживаемый логический оператор nullish coalescing из ES2020:

 const value = externalValue ?? 42 const value = externalValue ?? 42    Скопировать Скопировано Не удалось скопировать   

Что будет аналогично записи:

 const value = (externalValue !== null && externalValue !== undefined) ? externalValue : 42 const value = (externalValue !== null && externalValue !== undefined) ? externalValue : 42    Скопировать Скопировано Не удалось скопировать   

Оператор ? ? возвращает первый операнд ( external Value ), если он не null и не undefined , иначе — второй ( 42 ). Теперь через external Value можно передать » , NaN , 0 , -0 , 0n , false , в отличие от кейса с || .

Сравните результат операций с || и ? ? :

external Value	external Value || 42	external Value ? ? 42
1	1	1
‘hi’	‘hi’	‘hi’
null	42	42
undefined	42	42
0	42	0
»	42	»
false	42	false

Источник

JavaScript if, else, and else if

Conditional statements are used to perform different actions based on different conditions.

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified condition is true
• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed

The switch statement is described in the next chapter.

The if Statement

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax

Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.

Example

Make a «Good day» greeting if the hour is less than 18:00:

The result of greeting will be:

The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

if (condition) // block of code to be executed if the condition is true
> else <
// block of code to be executed if the condition is false
>

Example

If the hour is less than 18, create a «Good day» greeting, otherwise «Good evening»:

The result of greeting will be:

The else if Statement

Use the else if statement to specify a new condition if the first condition is false.

Syntax

if (condition1) // block of code to be executed if condition1 is true
> else if (condition2) // block of code to be executed if the condition1 is false and condition2 is true
> else // block of code to be executed if the condition1 is false and condition2 is false
>

Example

If time is less than 10:00, create a «Good morning» greeting, if not, but time is less than 20:00, create a «Good day» greeting, otherwise a «Good evening»:

if (time < 10) <
greeting = «Good morning»;
> else if (time < 20) <
greeting = «Good day»;
> else <
greeting = «Good evening»;
>

The result of greeting will be:

More Examples

Random link
This example will write a link to either W3Schools or to the World Wildlife Foundation (WWF). By using a random number, there is a 50% chance for each of the links.

Источник