cabecera javascript para novatos

Estructuras «else if» y «switch» | JavaScript para novatos #7º

Hoy trataremos las dos últimas estructuras condicionales que nos faltan, “else if” y “switch”.

Índice general del «Curso de JavaScript»:

  1. Introducción
  2. Las variables
  3. Tipos de datos
  4. Los operadores
  5. Declaraciones if y else
  6. Condiciones complejas y anidadas
  7. Estructuras else if y switch
  8. Bucles while y do while
  9. Bucle for
  10. Integrando JavaScript
  11. Las funciones
  12. Alcance de las variables
  13. Funciones predefinidas
  14. Programación orientada a objetos I
  15. Programación orientada a objetos II
  16. Herencia y prototipos
  17. Closure
  18. Los array I
  19. Los array II
  20. El DOM
  21. Acceso a los nodos del DOM
  22. Crear nuevos nodos en el DOM
  23. Eliminar nodos del DOM
  24. Modificar contenido de los nodos
  25. Modificar atributo style (DOM)
  26. Modificar atributo class (DOM)
  27. Programación basada en eventos I

Declaración «else if»

Otra forma de comprobar múltiples condiciones es utilizar varias sentencias “if else” encadenadas (en cascada), lo que se denomina “else if”.

Gráfico diagrama "else if"
Gráfico 7.1

Como se aprecia en el gráfico, primero nos encontramos con una condición si ésta no se cumple nos encontramos con otra condición, si esta última tampoco se cumple pasaremos a otra nueva condición, y así sucesivamente hasta que una condición se cumpla y se ejecute el bloque de instrucciones que le corresponda.

Sintaxis:

Sintaxis "else if"
Gráfico 7.2

Veámoslo con código.

var nota = 8;
if (nota <= 2){
      document.write("Muy deficiente");
} else if ((nota >= 3) && (nota < 5)){
      document.write("Insuficiente");
} else if ((nota >= 5) && (nota <= 6)){
      document.write("Suficiente");
} else if ((nota >= 7) && (nota <= 8)){
      document.write("Notable");
} else if ((nota > 8)){
      document.write("Sobresaliente");
} else {
      document.write("Debe hacer el examen");
}

Si ejecutamos el código anterior, se irán comprobando una a una todas las condiciones hasta encontrar una que pueda cumplir el valor de la variable “nota”. En este caso que el valor es 8, se detendrá en la condición ((nota >= 7) && (nota <= 8)) mostrando en pantalla el texto “Notable”.

Si bien esta estructura es totalmente correcta, para este tipo de situaciones se suele utilizar “switch”, ya que es más eficaz y legible. Pasemos a verlo.

Declaración “switch”

Con “switch” podemos también evaluar condiciones múltiples, pero su estructura es ligeramente diferente.

Gráfico diagrama "switch"
Gráfico 7.3

En el diagrama superior podemos observar cómo se van comprobando diferentes condiciones una a una, si hay coincidencia se ejecuta la declaración que aparece a la izquierda y se sale del “switch”, en caso contrario se pasa a comprobar la siguiente condición y así sucesivamente. En caso de que ninguna condición se cumpla se ejecutará la instrucción  por defecto que aparece al final.

Esta sería la sintaxis

Sintaxis "switch"
Gráfico 7.4

La declaración comienza con la palabra clave “switch”, a continuación entre paréntesis se coloca la expresión a evaluar, es decir, el valor que tiene que coincidir con alguno de los valores que aparecen en los case.

En la siguiente línea a continuación de la palabra clave “case”, viene el valor que se va a comparar con la expresión del comienzo. En el caso que haya coincidencia se ejecutará la instrucción que aparece debajo y seguidamente con “break” se sale de la declaración “Switch”, en caso contrario se pasa al siguiente “case” y así sucesivamente hasta encontrar una coincidencia.

En el caso de no haber encontrado ninguna coincidencia al llegar a “default” se ejecutará la instrucción que este contiene. Utilizar “default” es opcional.

Veamos un ejemplo basándonos en el caso propuesto anteriormente para “else if”.

var nota = 4;

switch (nota) {
      case 0 :
      case 1 :
      case 2 :
            document.write("Muy deficiente");
            break;
      case 3 :
      case 4 :
            document.write("Insuficiente");
            break;
      case 5 :
      case 6 :
            document.write("Suficiente");
            break;
      case 7 :
      case 8 :
            document.write("Notable");
            break;
      case 9 :
      case 10 :
            document.write("Sobresaliente");
            break;
      default :
            document.write("Debe hacer el examen");
}

En este código se irán comparando los valores de los diferentes “case” con “nota” hasta encontrar una coincidencia. En este caso la coincidencia llegará en el “case” con valor 4, que hará que se muestre en pantalla el texto “Insuficiente”.

En el ejemplo vemos cómo varios case pueden compartir una misma instrucción a ejecutar.

Hasta aquí las declaraciones condicionales, en el siguiente capítulo veremos las otras estructuras de control de flujo, los bucles.


Ir a Javascript para novatos 8ª parte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *