Sentencias if/else en JavaScript

Definición y uso

Las sentencias if/else ejecutan un bloque de código cuando la condición especificada es verdadera. Si la condición es falsa, se puede ejecutar otro bloque de código.

Las sentencias if/else son parte de las "condiciones" en JavaScript, utilizadas para ejecutar diferentes operaciones según diferentes condiciones.

En JavaScript, tenemos las siguientes sentencias de condición:

  • Usa if para especificar el bloque de código que se debe ejecutar si la condición es verdadera
  • Usa else para especificar el bloque de código que se debe ejecutar si la condición es falsa
  • Si la primera condición es falsa, usa else if para especificar una nueva condición a probar
  • Usa switch para seleccionar uno de varios bloques de código a ejecutar

Ejemplo

Si la hora actual (HOUR) es menor que 20:00, muestra "Good day" en el elemento con id="demo":

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

pruébelo usted mismo

Hay más ejemplos TIY en la parte inferior de la página.

Sintaxis

La sentencia if especifica el bloque de código que se debe ejecutar cuando la condición es verdadera:

if (condition) {
  // bloque de código a ejecutar si la condición es verdadera
}

La sentencia else especifica el bloque de código a ejecutar cuando la condición es falsa:

if (condition) {
  // bloque de código a ejecutar si la condición es verdadera
} else { 
  // bloque de código a ejecutar si la condición es falsa
}

Si la primera condición es falsa, la sentencia else if especifica una nueva condición:

if (condition1) {
  // bloque de código a ejecutar si la condición1 es verdadera
} else if (condition2) {
  // bloque de código a ejecutar si la condición1 es falsa y la condición2 es verdadera
} else {
  // bloque de código a ejecutar si la condición1 es falsa y la condición2 es falsa
}

Valores de los parámetros

Parámetros Descripción
condition Necesario. Expresión que da como resultado true o false.

Detalles técnicos

Versión de JavaScript: ECMAScript 1

Más ejemplos

Ejemplo

Si la hora es menor de 20:00, cree un saludo "Good day", de lo contrario, cree un saludo "Good evening":

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

pruébelo usted mismo

Ejemplo

Si la hora es menor de 10:00, cree un saludo "Good morning", si no, pero si la hora es menor de 20:00, cree un saludo "Good day", de lo contrario, cree un saludo "Good evening":

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

pruébelo usted mismo

Ejemplo

Si el id del primer elemento <div> del documento es "myDIV", cambie su tamaño de fuente:

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

pruébelo usted mismo

Ejemplo

Al hacer clic en la imagen, cambiar el valor del atributo de origen (src) del elemento <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>

pruébelo usted mismo

Ejemplo

Mostrar mensaje según la entrada del usuario:

var letter = document.getElementById("myInput").value;
var text;
// Si la letra es "c"
if (letter === "c") {
  text = "¡Justo en el punto! ¡Buen trabajo!";
// Si la letra es "b" o "d"
} else if (letter === "b" || letter === "d") {
  text = "Cerca, pero no lo suficiente.";
// Si es otra letra
} else {
  text = "Muy lejos..";
}

pruébelo usted mismo

Ejemplo

Verificar los datos de entrada:

var x, text;
// Obtener el valor del campo de entrada con id="numb"
x = document.getElementById("numb").value;
// Si x no es un número o es menor de 1 o mayor de 10, se muestra "input is not valid"
// Si x es un número entre 1 y 10, se muestra "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

pruébelo usted mismo

soportado por el navegador

instrucción Chrome IE Firefox Safari Opera
if/else Soporte Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales de JavaScript:Sentencia If...Else en JavaScript

Tutoriales de JavaScript:Sentencia Switch en JavaScript