Instrukcje if/else w JavaScript

Definicja i zastosowanie

Instrukcje if/else wykonują blok kodu, gdy warunek jest prawdą. Jeśli warunek jest fałszywy, można wykonać inny blok kodu.

Instrukcje if/else są częścią "warunków" w JavaScript, które pozwalają wykonywać różne operacje w zależności od różnych warunków.

W JavaScript, mamy następujące instrukcje warunkowe:

  • Użyj if, aby określić blok kodu do wykonania, jeśli warunek jest prawdą
  • Użyj else, aby określić blok kodu do wykonania, jeśli warunek jest fałszywy
  • Jeśli pierwszy warunek jest fałszywy, użyj else if, aby określić nowy warunek do testowania
  • Używaj switch, aby wybrać jeden z wielu bloków kodu do wykonania

Przykład

Jeśli bieżąca godzina (HOUR) jest mniejsza niż 20:00, wyświetli się w elemencie o id="demo" tekst "Good day":

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

spróbuj sam

Więcej przykładów TIY znajduje się na dole strony.

Gramatyka

Jeśli warunek jest prawdą, wykona się blok kodu określony przez instrukcję if:

if (condition) {
  // blok kodu do wykonania, jeśli warunek jest prawdziwy
}

else zdanie określa blok kodu do wykonania, jeśli warunek jest fałszywy:

if (condition) {
  // blok kodu do wykonania, jeśli warunek jest prawdziwy
} else { 
  // blok kodu do wykonania, jeśli warunek jest fałszywy
}

Jeśli pierwsza warunek jest fałszywy, to else if zdanie określa nowy warunek:

if (condition1) {
  // blok kodu do wykonania, jeśli condition1 jest prawdziwy
} else if (condition2) {
  // blok kodu do wykonania, jeśli condition1 jest fałszywy i condition2 jest prawdziwy
} else {
  // blok kodu do wykonania, jeśli condition1 jest fałszywy i condition2 jest fałszywy
}

Wartości parametrów

Parametry Opis
condition Wymagane. Wyrażenie, które zwraca wartość true lub false.

Szczegóły techniczne

Wersja JavaScript: ECMAScript 1

Więcej przykładów

Przykład

Jeśli czas jest mniejszy niż 20:00, utwórz powitanie "Good day", w przeciwnym razie utwórz powitanie "Good evening":

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

spróbuj sam

Przykład

Jeśli czas jest mniejszy niż 10:00, utwórz powitanie "Good morning", jeśli nie, ale czas jest mniejszy niż 20:00, utwórz powitanie "Good day", w przeciwnym razie utwórz powitanie "Good evening":

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

spróbuj sam

Przykład

Jeśli id pierwszego elementu <div> w dokumencie wynosi "myDIV", zmień jego rozmiar czcionki:

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

spróbuj sam

Przykład

Zmień wartość atrybutu src elementu <img>, gdy użytkownik kliknie obraz:

<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>

spróbuj sam

Przykład

Wyświetl wiadomość na podstawie wprowadzenia użytkownika:

var letter = document.getElementById("myInput").value;
var text;
// Jeśli litera to "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// Jeśli litera to "b" lub "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// Jeśli to inne litery
} else {
  text = "Waaay off..";
}

spróbuj sam

Przykład

Weryfikacja danych wejściowych:

var x, text;
// Pobierz wartość pola wejściowego o id="numb"
x = document.getElementById("numb").value;
// Jeśli x nie jest liczbą lub jest mniejszy niż 1 lub większy niż 10, wyświetl "input is not valid"
// Jeśli x jest liczbą z zakresu 1 do 10, wyświetl "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

spróbuj sam

obsługa przeglądarki

zapytanie Chrome IE Firefox Safari Opera
if/else Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Podręcznik JavaScript:Znakowanie If...Else w JavaScript

Podręcznik JavaScript:Znakowanie Switch w JavaScript