Sentencias condicionales de JavaScript

if else y else if

Las sentencias de condición son un conjunto de comandos que se ejecutan cuando se especifica una condición como verdadera.

En muchos casos, es deseable ejecutar diferentes bloques de código según la entrada del usuario u otros factores.

Las sentencias de condición son parte de la lógica, la toma de decisiones o la especificación del flujo de un programa de computadora.

En JavaScript, contamos con las siguientes sentencias de condición:

• Sentencia if

• Sentencia if...else

• Sentencia else...if

• Sentencia switch

Discutiremos la sentencia switch en el siguiente capítulo.

Sentencia If en JavaScript

Solo cuando la condición especificada en if es verdadera, se ejecutará el código. La sintaxis es:

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

if　(x　<　0)　{
　　　document.getElementById("result").innerHTML = "NEGATIVE";
}

Estructura de control if ... else de JavaScript

La estructura if...else permite ejecutar un bloque de código cuando la condición especificada es verdadera y otro bloque de código cuando la condición es falsa. La sintaxis es:

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
}

var　x　=　-4;
if　(x　<　0)　{
　　　msg　=　"NEGATIVE";
} else {
　　　msg　=　"POSITIVE";　　　
}

Si el usuario hace clic en la imagen, el siguiente ejemplo cambiará el valor de la propiedad src:

<img　id="demo"　onclick="changeImage()"　src="avatar-female.jpg">
<script>
function　changeImage()　{
　　　var　image　=　document.getElementById("demo");
　　　if　(image.src.match("female"))　{
　　　image.src　=　"avatar-male.jpg";
　　　} else {
　　　image.src　=　"avatar-female.jpg";
　　　}
}
</script>

Estructura de control else...if de JavaScript

Con if...else, podemos ejecutar bloques de código según si una condición es verdadera o falsa. Sin embargo, a veces podemos tener múltiples condiciones y resultados posibles, y no necesitamos solo dos opciones. Una manera de hacerlo es usar la estructura else...if, que puede evaluar dos o más resultados posibles. La sintaxis es:

if　(condition1)　{
　　//si condition1si es true, entonces el bloque de código a ejecutar
}　else　if　(condition2)　{
　　//si condition1si es false y condition2si es true, entonces el bloque de código a ejecutar
} else {
　　//si condition1si es false y condition2Bloque de código a ejecutar si es false
}

//　Establecer el nivel actual del estudiante
var　grade　=　88;
//　Verifique si la calificación es A, B, C, D, o F
if　(grade　>=　90)　{
　　　document.write("A");
}　else　if　(grade　>=　80)　{
　　　document.write("B");
}　else　if　(grade　>=　70)　{
　　　document.write("C");
}　else　if　(grade　>=　60)　{
　　　document.write("D");
} else {
　　　document.write("F");
}

Estructura de control if ... else anidada

Puede usar una estructura de control if ... else anidada para mejorar la capacidad de toma de decisiones de los programas JavaScript.

var a =　10, b =　20, c =　30;
var answer;
if (a > b) {
　　　if (a > c) {
　　answer = "A es el mayor de los tres";
　　　} else {
　　answer = "C es el mayor de los tres";
　　　}
} else if (b > c) {
　　　answer = "B es el mayor de los tres";
} else {
　　　answer = "C es el mayor de los tres";　　　
}

Operador ternario

El operador ternario proporciona una manera sencilla de escribir una declaración if ... else.

El operador ternario se escribe con la sintaxis de interrogación (? ) y dos puntos ( : ), como se muestra a continuación:

(condition) ? expresión en verdadero : expresión en falso

En la sintaxis anterior,conditionPrimero se escribe, luego es ??. La primera expresión se escribirá enverdaderoEjecutar, la segunda expresión se escribirá enfalsoEjecutar.

Para entender cómo funciona el operador ternario, considere el siguiente ejemplo:

var status = (age >=　18) ? "adult" : "minor";

Si la edad es18Si la edad es de 18 años o más, la declaración asignará el valor "adult" a la variable status. De lo contrario, asignará el valor "minor" a status.