trisquel

Aprende JavaScript con ejemplos (XIII). Sentencias condicionales.

JavaScript tiene diferentes sentencias condicionales. Hagamos un repaso de cada una de ellas:

  • If. Se ejecutará el bloque de código siguiente si la condición es verdadera.
  • Else.Se ejecutará el bloque de código siguiente si la condición es verdadera.
  • Else if. Una combinación de las anteriores. Utilízala cuando la primera condición es falsa.
  • Switch. Utilízalo para especificar una serie de códigos que se ejecutarán de forma alternativa.

Todo esto se ve más fácil con ejemplos:

La sentencia IF

if (new Date().getHours() < 18) {
saludo = "Buenos días";
}

El código anterior hace que la variable saludo valga "Buenos días" si es antes de las 18:00;

La sentencia ELSE

if (new Date().getHours() < 18) {
saludo = "Buenos días";
}else{
saludo = "Buenas tardes";
}

El código anterior hace que la variable saludo valga "Buenos días" si es antes de las 18:00 y "Buenas tardes" en caso contrario";

La sentencia ELSE IF

if (new Date().getHours() < 10) {
saludo = "Al que madruga Dios le ayuda";
}else if (new Date().getHours() < 18) {
saludo = "Buenos días";
}else {
saludo = "Buenas tardes";
}

El código anterior hace que la variable saludo valga "Al que madruga Dios le ayuda" si la hora es antes de las 10 de la mañana, "Buenos días" si es antes de las 18:00 y "Buenas tardes" en caso contrario".

Ejercicio 13.1
Realiza un ejercicio que muestre un enlace a Myfpschool.com si sacando un número de forma aleatoria es menor que 0.5. En caso contrario que salude con buenos días o buenas tardes dependiendo de la hora en la que se cargue la página.

Utiliza el método Math.random() y el atributo document.getElementById("id").innerHTML para realizar el ejercicio.

La sentencia SWITCH

Veamos un ejemplo de utilización de la sentencia switch:

var = new Date().getDay();
switch (var) {
case 0:
dia = "Domingo";
break;
case 1:
dia = "Lunes";
break;
case 2:
dia = "Martes";
break;
case 3:
dia = "Miércoles";
break;
case 4:
dia = "Jueves";
break;
case 5:
dia = "Viernes";
break;
case 6:
dia = "Sábado";
}

Como se puede ver, dependiendo del valor de la variable var, la variable dia tendra un valor u otro en función del día de la semana en el que nos encontremos.

Importante
Se utiliza la sentencia break para salir de cada bloque del switch.
Ejercicio 13.2
Investiga la sentencia default del switch y pon un ejemplo de uso.
generador de historias

Ejercicio 13.3 Proyecto: Generador de historias

El objetivo es crear un generador de historias como el que ves en la imagen. Tendrás que crear varios párrafos diferentes y combinarlos aleatoriamente.

Las historias tienen que enlazar correctamente.

También tendrá que aparecer el nombre del protagonista y dependiendo si es una historia de leperos o murcianos el argumento tendrá que cambiar.

Otro aspecto importante es que para dejar el ejercicio más bonito deberías hacer que el aspecto de tu solución y del ejemplo sean iguales.

Se pide que HTML y javascript estén en ficheros separados. Para una carga rápida coloca la llamada al script al final del fichero HTML.