JavaScript si no si no si no

Tabla de contenido

    Mostrar tabla de contenidos

Las declaraciones condicionales se utilizan para realizar diferentes acciones en función de diferentes condiciones.

Declaraciones condicionales

Muy a menudo, cuando escribes código, deseas realizar diferentes acciones para diferentes decisiones.

Puede utilizar declaraciones condicionales en su código para hacer esto.

En JavaScript tenemos las siguientes declaraciones condicionales:

  • Utilice if para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera

  • Utilice else para especificar un bloque de código que se ejecutará, si se cumple la misma condición. FALSO

  • Utilice else if para especificar una nueva condición para probar, si la primera condición es falsa

  • Utilice switch para especificar muchos bloques alternativos de código que se ejecutarán

La instrucción switch se describe en el siguiente capítulo.

La declaración if

Utilice la instrucción if para especificar un bloque de código JavaScript para ejecutarse si una condición es verdadera.

Sintaxis

if (condition) {
  //  block of code to be executed if the condition is true
 }

Tenga en cuenta que if está en letras minúsculas. Las letras mayúsculas (If o IF) generarán un error de JavaScript.

Ejemplo

Haga un saludo de "Buenos días" si la hora es menor que 18:00:

if (hour < 18) {
    greeting = "Good day";
 }

El resultado del saludo será:

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript if</h2>

<p>Display "Good day!" if the hour is less than 18:00:</p>

<p id="demo">Good Evening!</p>

<script>
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = "Good day!";
}
</script>

</body>
</html>

La declaración else

Utilice la instrucción else para especificar un bloque de código que se ejecutado si la condición es FALSO.

if (condition) {
  //  block of code to be executed if the condition is true
 }
else {

  //  block of code to be executed if the condition is false
 }

Ejemplo

Si la hora es menor a las 18, crea un "Buen día" saludo, en caso contrario "Buenas noches":

if (hour < 18) {
    greeting = "Good day";
 }
else {
    greeting = "Good evening";
 }

El resultado del saludo será:

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript if .. else</h2>

<p>A time-based greeting:</p>

<p id="demo"></p>

<script>
const hour = new Date().getHours(); 
let greeting;

if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

document.getElementById("demo").innerHTML = greeting;
</script>

</body>
</html>

La declaración else if

Utilice la instrucción else if para especificar una nueva condición si la primera condición es falsa.

Sintaxis

if (condition1) {
  //  block of code to be executed if condition1 is true
 }
else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
 }

Ejemplo

Si el tiempo es inferior a las 10:00, cree un "Bueno mañana" saludo, si no, pero son menos de las 20:00, cree un saludo de "Buenos días", en caso contrario un "Buenas noches":

if (time < 10) {
    greeting = "Good morning";
 }
else if (time < 20) {
    greeting = "Good day";
 }
else {
    greeting = "Good evening";
 }

El resultado del saludo será:

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript if .. else</h2>

<p>A time-based greeting:</p>

<p id="demo"></p>

<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>

</body>
</html>

Más ejemplos

Enlace aleatorio

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.random()</h2>

<p id="demo"></p>

<script>
let text;
if (Math.random() < 0.5) {
  text = "<a href='https://w3schools.com'>Visit W3Schools</a>";
} else {
  text = "<a href='https://wwf.org'>Visit WWF</a>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>