Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 56
Visitas el mes pasado: 145
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
La estructura switch
puede reemplazar a la estructura if ... if else
cuando se trata de hacer una selección entre multiples opciones, es decir la estructura if
normalmente se utiliza para elegir entre dos opciones, si hay más opciones para elegir, debemos
encadenarlas mediante if else
. Mediante la estructura
switch
podemos elegir entre multiples opciones (siempre que éstas dependan del
valor de una variable). su forma es la siguiente:
switch(variable) {
case valor_1:
...codigo javascript ...
break;
case valor_2:
...codigo javascript ...
break;
...
case valor_n:
...codigo javascript ...
break;
default:
...codigo javascript ...
break
};
Vamos a explicar la estructura de este código:
switch
y después entre paréntesis
la variable a la que tenemos que comprobar su valor. Dependiendo del valor de la variable,
se elegirá una opción u otra.case
y después escribimos el valor de la variable que queremos comprobar.case
.break
, que significa que
en caso de que la condición se cumpla, no comprobamos más y salimos de esta escructura.case
, escribimos la palabra defalut:
el código escrito aquí será el que se cumpla cuando no se encuentre ningun valor para la variable.
Este elemento lo acabamos también con un break
.El último elemento defalut:
es opcional, y en caso de no ponerse, y no haberse
encontrado un valor para la variable, no se ejecuta ningún código.
Observa que cada instrucción case valor:
y la instrucción default:
acaban con el signo de dos puntos (:
). Hay que tener esto en cuenta para no
cometer errores.
Veamos una página de ejemplo en la que se elige entre varios colores para cambiar el color del texto. su código será el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Estructura switch</title> <script type="text/javascript"> window.onload = function() { document.fgColor = "blue" } function cambia() { opciones = document.formulario.color; //acceso a los botones radio for (i=0;i<opciones.length;i++) { //buscr valor del botón pulsado if (opciones[i].checked == true) { elegido = opciones[i].value } } switch (elegido) { //elegir color según boton pulsado case "rojo": document.fgColor = "red"; break; case "verde": document.fgColor = "green"; break; case "purpura": document.fgColor = "purple"; break; case "oliva": document.fgColor = "olive" break; case "marron": document.fgColor = "maroon" break; case "azul_oscuro": document.fgColor = "navy" break; case "azul_marino": document.fgColor = "teal" break; default: document.fgColor = "blue" break; } } </script> </head> <body > <h1>Cambiar de color el texto de esta página</h1> <p>Usaremos la estructura switch de javascript para cambiar de color el texto de esta página. Elige un color y pulsa luego el botón cambiar.</p> <form action="#" name="formulario" onreset="document.fgColor='blue'"> <input type="radio" name="color" value="rojo" /> Rojo<br/> <input type="radio" name="color" value="verde" /> Verde<br/> <input type="radio" name="color" value="purpura" /> Purpura<br/> <input type="radio" name="color" value="oliva" /> Oliva<br/> <input type="radio" name="color" value="marron" /> Marron<br/> <input type="radio" name="color" value="azul_oscuro" /> Azul oscuro<br/> <input type="radio" name="color" value="azul_marino" /> Azul Marino<br/><br/> <input type="button" onclick="cambia()" value="Cambia" /><br/><br/> <input type="reset" value="reiniciar formulario"/> (color azul) </body> </html>
Puedes ver cómo queda la página anterior en tu navegador pulsando en el siguiente enlace:
Elegir mediante estructura switch
La sentencia break
se usa dentro de un bucle para detenerlo y salir de él. Normalmente se
incluye en una condicional dentro del bucle, para que cuando se cumpla la condición, se pare el bucle.
veamos un ejemplo sencillo:
var num = prompt("Escribe un número del 1 al 10, yo contaré hasta ese número.") num=Number(num) if (num<1 || num>10) {alert("Esto no es un número del 1 al 10")} else { while(i<10) { texto += i + " , " if (i==num) {break;} i++ } alert(texto) }
Al llegar al número indicado, se rompe el bucle y ya no sigue; este ejemplo puedes verlo pulsando en el siguiente párrafo
Pulsa aquí para ver ejemplo anterior
La sentencia continue
se usa dentro de un bucle para hacer que una o varias
repeticiones del bucle no se ejecuten, Normalmente también se incluye dentro de una
condición, la cual al cumplirse, esa repeticion del bucle no se ejecuta, es decir se la salta.
Veamos un ejemplo sencillo con la sentencia continue
:
var texto= "" var num = prompt("Escribe un número del 1 al 10, \n yo contaré hasta 10 pero me saltaré ese número.") num=Number(num) if (num<1 || num>10) {alert("Esto no es un número del 1 al 10")} else { for (i=1;i<=10;i++) { if (i==num) {continue;} texto += i + " , "; } alert(texto) }
Al llegar al número indicado, el bucle no se ejecuta, pasando a la repetición siguiente. este ejemplo puedes verlo pulsando en el siguiente párrafo
Pulsa aquí para ver ejemplo anterior
En la siguiente página veremos otras funciones de caracter general usadas en javascript. En concreto las funciones eval y location.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com