JavaScript if else y else if

Las declaraciones condicionales son usadas para realizar diferentes acciones basadas en diferentes condiciones.

Declaraciones condicionales

A menudo, cuando escribimos código, quieres realizar distintas acciones para distintas decisiones. Puedes usar declaraciones condicionales en tu código para realizar estas tareas repetitivas. En Javascript se usan las siguientes declaraciones condicionales.

  • Usa if para especificar un bloque de código que será ejecutado, si una condición específica es verdadera.
  • Usa else especificar un bloque de código que será ejecutado si la misma condición en este caso es falsa.
  • Usa else if para especificar una nueva condición a testear si la primera condición es falsa.
  • Usa switch para especificar varios bloques de alternativas de código que pueden ser ejecutados

La declaración if

Utiliza la condición if para especificar un bloque de código Javascript que es ejecutado si la condición es true.

Sintaxis

if(condición)
{
bloque de código que es ejecutado si la condición es true
}

Observa que if está en minúsculas. Si lo escribes con mayúsculas generará un error.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<p>Muestra Buen día si la hora es menor que las 18:00</p>
<p id="demo">Buenos días</p>

<script>
if(new Date().getHours() < 18)
{
document.getElementById("demo").innerHTML = "Buen día!!";
}
</script>
</body>
</html>

La declaración else

Usamos la declaración else para especificar un bloque de código que se ejecutará si la condición es falsa.

Sintaxis

if (condición) {
  //  bloque de código ejecutado si la condición es true
else {
  //  bloque de código ejecutado si la condición es false
}

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
<p>Haz clic en el botón para mostrar un saludo basado en el tiempo</p>

<button onClick="myFunction()">Haz clic</button>

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

<script>
function myFunction()
{
var hour = new Date().getHours();
var greeting;
if(hour < 18)
{
greeting = "Buenos días";
}
else
{
greeting = "Buenas tardes";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>

La declaración else if

Usamos la declaració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
}

Ejm

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
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>