Операторы if/else в JavaScript

Определение и использование

Операторы if/else выполняют блок кода, если указанное условие истинно. Если условие ложно, можно выполнить другой блок кода.

Операторы if/else являются частью "условных" операторов JavaScript, которые позволяют выполнять различные действия в зависимости от различных условий.

В JavaScript у нас есть следующие условные операторы:

  • Использование if для указания блока кода, который нужно выполнить, если условие истинно
  • Использование else для указания блока кода, который нужно выполнить, если условие ложно
  • Если первое условие ложно, то с помощью else if указывается новый условие для проверки
  • Использование switch для выбора одного из нескольких блоков кода, которые нужно выполнить

Пример

Если текущее время (HOUR) меньше 20:00, то в элементе с id="demo" будет выведено "Good day":

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

попробуйте сами

Более много примеров TIY можно найти внизу страницы.

Синтаксис

Оператор if определяет блок кода, который будет выполнен, если условие истинно:

if (condition) {
  // блок кода для выполнения, если condition истинно
}

else оператор определяет блок кода для выполнения, если условие ложно:

if (condition) {
  // блок кода для выполнения, если condition истинно
} else { 
  // блок кода для выполнения, если condition ложно
}

Если первая условие ложно, то else if оператор определяет новый условие:

if (condition1) {
  // блок кода для выполнения, если condition1 истинно
} else if (condition2) {
  // блок кода для выполнения, если condition1 ложно и condition2 истинно
} else {
  // блок кода для выполнения, если condition1 ложно и condition2 ложно
}

Значение параметра

Параметр Описание
condition Обязателен. Выражение, результатом которого является true или false.

Технические детали

Версия JavaScript: ECMAScript 1

Более примеров

Пример

Если время меньше 20:00, создайте приветствие "Good day",否则 создайте "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

попробуйте сами

Пример

Если время меньше 10:00, создайте приветствие "Good morning", если нет, но время меньше 20:00, создайте приветствие "Good day",否则 создайте приветствие "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

попробуйте сами

Пример

Если第一个 <div> элемента документа имеет id "myDIV", измените его размер шрифта:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

попробуйте сами

Пример

Изменить значение атрибута источника (src) элемента <img> при нажатии на изображение:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

попробуйте сами

Пример

Отображение сообщений в зависимости от ввода пользователя:

var letter = document.getElementById("myInput").value;
var text;
// Если буква "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// Если буква "b" или "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// Если это другие буквы
} else {
  text = "Waaay off..";
}

попробуйте сами

Пример

Проверка вводимых данных:

var x, text;
// Получить значение поля ввода с id="numb"
x = document.getElementById("numb").value;
// Если x не является числом или меньше 1 или больше 10, вывести "input is not valid"
// Если x является числом от 1 до 10, вывести "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

попробуйте сами

поддержка браузера

запрос Chrome IE Firefox Safari Opera
if/else Поддержка Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Уроки JavaScript:Указание If...Else в JavaScript

Уроки JavaScript:Указание Switch в JavaScript