Instructions if/else en JavaScript

Définition et utilisation

Les instructions if/else exécutent un bloc de code lorsque la condition spécifiée est vraie. Si la condition est fausse, un autre bloc de code peut être exécuté.

Les instructions if/else font partie des "instructions conditionnelles" de JavaScript, qui permettent d'exécuter différentes opérations en fonction de différentes conditions.

En JavaScript, nous avons les instructions conditionnelles suivantes :

  • Utilisez if pour spécifier le bloc de code à exécuter si la condition spécifiée est vraie
  • Utilisez else pour spécifier le bloc de code à exécuter si la même condition est fausse
  • Si la première condition est fausse, utilisez else if pour spécifier la nouvelle condition à tester
  • Utilisez switch pour choisir l'un des blocs de code à exécuter

Example

Si l'heure actuelle (HOUR) est inférieure à 20:00, "Good day" est affiché dans l'élément d'id="demo" :

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

try it yourself

Plus d'exemples TIY sont disponibles en bas de la page.

Syntaxe

L'instruction if spécifie le bloc de code à exécuter lorsque la condition est vraie :

if (condition) {
  // bloc de code à exécuter si la condition est vraie
}

L'instruction else spécifie le bloc de code à exécuter si la condition est fausse :

if (condition) {
  // bloc de code à exécuter si la condition est vraie
} else { 
  // bloc de code à exécuter si la condition est fausse
}

Si la première condition est fausse, l'else if spécifie une nouvelle condition :

if (condition1) {
  // bloc de code à exécuter si condition1 est vraie
} else if (condition2) {
  // bloc de code à exécuter si la condition1 est fausse et condition2 est vraie
} else {
  // bloc de code à exécuter si la condition1 est fausse et condition2 est fausse
}

Valeur du paramètre

Paramètres Description
condition Obligatoire. Expression qui renvoie true ou false.

Détails techniques

Version JavaScript : ECMAScript 1

Plus d'exemples

Example

Si l'heure est inférieure à 20:00, créer un salut "Good day", sinon, créer un salut "Good evening":

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

try it yourself

Example

Si l'heure est inférieure à 10:00, créer un salut "Good morning", sinon, si l'heure est inférieure à 20:00, créer un salut "Good day", sinon, créer un salut "Good evening":

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

try it yourself

Example

Si l'identifiant de l'élément <div> premier du document est "myDIV", modifier sa taille de police :

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

try it yourself

Example

When the user clicks the image, change the value of the source attribute (src) of the <img> element:

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

try it yourself

Example

Display messages based on user input:

var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// If it is another letter
} else {
  text = "Waaay off..";
}

try it yourself

Example

Verify input data:

var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is not a number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

try it yourself

browser support

instruction Chrome IE Firefox Safari Opera
if/else Support Support Support Support Support

Pages associées

Tutoriel JavaScript :Instruction If...Else JavaScript

Tutoriel JavaScript :Instruction Switch JavaScript