Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 56

Visitas el mes pasado: 145

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF


Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




8. Otras estructuras (II)

8.2 Estructura switch

javascript

La estructura switch

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:

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



Sentencias break y continue

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.

Funciones eval y location.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com