Cuándo utilizar la sentencia switch para programar html con javascript

Aunque el Si declaración se utiliza comúnmente para las opciones simples en javascript, el cambiar sentencia se utiliza para manejar una amplia gama de opciones. UN cambiar proporciona una manera elegante de manejar datos variables. Hay dos formas de cambiar declaración.

El primero proporciona los medios para trabajar con un rango predefinido de opciones, y el segundo proporciona los medios para trabajar con datos que podrían contener información inesperada. Esta segunda forma hace que el cambiar declaración particularmente útil ya que los usuarios son impredecibles, y esta segunda forma puede tomar tales usuarios en cuenta.

Cómo crear un interruptor básico en javascript

Muchos desarrolladores prefieren cambiar declaraciones más anidada Si declaraciones debido a que la cambiar declaraciones son más fáciles de entender. UN cambiar declaración también requiere menos a escribir para obtener el mismo resultado.

Video: Switch statement in javascript

CheckChoice función (opcional) {// Comprobar que la entrada es una number.if (typeof (opcional)! = "número") {// Mostrar un dialog.alert error ("Por favor proporcionar información numérica!") - // devolver sin hacer nada more.return -} // Asegúrese de que la opción es en realidad un integer.var Seleccionar = Math.round (opcional) - // Comprobar que la entrada está en range.if ((Seleccionar lt; 1) || (Seleccionar gt; 3)) {// Mostrar un dialog.alert error ("El valor suministrado está fuera de rango!") - // Devolver sin hacer nada more.return -} // Hacer un selection.switch (Seleccionar) {case 1: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo A."-break-caso 2: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo B."-break-caso 3: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo C."-descanso-}}

Si se utiliza un cambiar declaración o anidada Si declaración, es necesario proporcionar la lógica para garantizar que la entrada es correcta, o bien su aplicación más probable que no. En este caso, el fallo equivale a la aplicación hacer nada en absoluto, pero el concepto de fracaso es la misma. Siempre revise sus entradas para los valores correctos.

Video: Estructura de control SWITCH en javascript

Algunas personas tienen dificultades para comprender que el valor de verdad se encuentra en la cambiar declaración. los cambiar afirmación requiere una variable, la cual es Seleccionar en este caso. Cada caso cláusula realiza una comparación en contra de la variable. En consecuencia, se podía ver la primera caso cláusula como diciendo, Seleccionar caso == 1.

Cuando se trabaja con cambiar declaraciones, debe también incluir una descanso declaración al final de cada segmento de procesamiento. los descanso declaración simplemente dice que la caso ha sido evaluado y manejado.

Si sale de la descanso comunicado a cabo, el código continúa con la siguiente instrucción ejecutable en el próximo caso. Esta condición se conoce como caer a través, y algunos desarrolladores lo utilizan como una técnica de programación para combinar tareas y reducir la cantidad de código necesario. El uso de esta técnica es peligrosa debido a que otros desarrolladores pueden no darse cuenta de que se requiere la caída a través y por lo tanto puede agregar una descanso declaración para usted.

Cómo utilizar la opción por defecto de javascript

los cambiar declaración incluye otra cláusula, el defecto cláusula. los defecto cláusula es como la cláusula else para el Si declaración. Cuando ninguna de las caso cláusulas son verdaderas, el código se ejecuta el código en el defecto cláusula. El ejemplo siguiente utiliza la defecto cláusula para modificar la forma en que funciona el ejemplo.

Video: Curso HTML5 - Condicional Switch en javascript - Parte 17

MakeAChoice función () {// Preguntar al usuario para proporcionar Selección input.var = prompt ("Escriba una opción de menú.") - // convertir la cadena en un number.var IntSelect = parseInt (Selección) - // Verificar que el usuario ha proporcionado una number.if (isNaN (IntSelect)) {// Mostrar una dialog.alert error ("Por favor proporcionar información numérica!") - // Devolver sin hacer nada more.return -} // Llamar al function.CheckChoice selección (IntSelect) -}

En lugar de proporcionar una miríada de botones, este ejemplo se basa en la rápido() cuadro de diálogo para obtener la entrada del usuario. El resultado es la interfaz más limpia. Cuando el usuario hace clic Elija un elemento de menú, la aplicación muestra una rápido() cuadro de diálogo, donde el usuario puede introducir un valor.

Se podría pensar que esta es una receta para el desastre, pero la aplicación realiza las mismas comprobaciones de validez de entrada como antes, pero utiliza una técnica diferente.

En este caso, la aplicación utiliza partInt () para verificar que la entrada es un número y para convertir el número a un valor entero. Cuando la entrada es incorrecta, IntSelect está ajustado a Not a Number (Yaya). El ejemplo detecta este problema mediante el uso de la isNaN () función. Cuando un usuario proporciona una entrada numérica, la aplicación llama CheckChoice (), que se muestra en el siguiente código:

CheckChoice función (opcional) {// Hacer un selection.switch (opcional) {case 1: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo A."-break-caso 2: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo B."-break-caso 3: document.getElementById ("Resultado") .innerHTML ="Usted eligió artículo C."-break-default: // Muestra un error dialog.alert ("El valor suministrado está fuera de rango!")-descanso-}}

Usted puede preguntarse donde el resto del código es, pero esto es todo lo que necesita. los cambiar comprobaciones de los estados para los valores de 1, 2, o 3. Cuando los valores están fuera de ese rango, el código utiliza la cláusula predeterminada, que contiene el mensaje de error fuera de rango. Como se puede ver, estas dos funciones hacen que las tareas de trabajo con el menú mucho más simple tanto para desarrolladores y usuarios.