Javascript para novatos 7º

Javascript para novatos 7º

publicado en: Diseño web | 0

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

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

Share on LinkedInShare on FacebookShare on Google+Tweet about this on Twitter

Dejar una opinión