jueves, 10 de marzo de 2016

La declaración Switch

El interruptor switch se emplea para llevar a cabo diferentes acciones basadas en diferentes condiciones..
Del contenido del capítulo Switch Statements W3Schools.

Ejemplo 1. Este es el código exacto del documento que se muestra:
<body>
<h2>Primer ejemplo con <i>switch</i>.</h2>
<button onclick="myFunction()">¿Qué día es hoy?</button>
<p id="demo">Mostrar el resultado aquí</p>
<script>
var day;
function myFunction(){
switch (new Date().getDay()) {
    case 0:
        day = "Domingo";
        break;
    case 1:
        day = "Lunes";
        break;
    case 2:
        day = "Martes";
        break;
    case 3:
        day = "Miércoles";
        break;
    case 4:
        day = "Jueves";
        break;
    case 5:
        day = "Viernes";
        break;
    case  6:
        day = "Sábado";
        break;
}
document.getElementById("demo").innerHTML = "Hoy es " + day;
}
</script>
</body>
</html>


Ejemplo 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Mensaje por defecto.</h2>
<button onclick="myFunction()">¿Qué día es hoy?</button>
<p id="demo">Mostrar el resultado aquí</p>
<script>
function myFunction(){
var text;
switch (new Date().getDay()) {
    case 6:
        text = "Hoy es Sábado";
        break;
    case 0:
        text = "Hoy es Domingo";
        break;
    default:
        text = "Deseando que llegue el fin de semana";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>


Ejemplo 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Varios casos comparten código y el <i>default</i> no tiene por qué ir al final.</h2>
<button onclick="myFunction()">¿Qué día es hoy?</button>
<p id="demo">Mostrar el resultado aquí</p>
<script>
var text;
function myFunction(){
switch (new Date().getDay()) {
    case 1:
    case 2:
    case 3:
    default:
        text = "Esperando que llegue el fin de semana";
        break;
    case 4:
    case 5:
        text = "Pronto va a ser el fin de semana";
        break;
    case 0:
    case 6:
        text = "Estamos en fin de semana";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>


Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript. Ejercicio 1</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Añadir un <i>case</i> para <i>manzana</i> con el texto <i>¿Te gustan las manzanas?</i>.</h2>
<input id="myInput" type="text" value="Manzana">
<button onclick="checkFruit()">Comprobar fruta</button>
<p id="demo"></p>
<script>
function checkFruit() {
  var text;
  var fruits = document.getElementById("myInput").value;

  switch(fruits) {
    case "Plátano":
      text = "¡El plátano es bueno!";
      break;
    case "Naranja":
      text = "La naranja tiene vitamina C";
      break;
case "Manzana":
 text="¿Te gustan las manzanas?";
 break; 
    default:
      text = "Nunca he oído hablar de esa fruta.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>


Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript. Ejercicio 2</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Añadir un <i> default case</i> con el texto <i>No conozco esa fruta</i>.</h2>
<input id="myInput" type="text" value="Tutti Frutti">
<button onclick="checkFruit()">Comprobar fruta</button>
<p id="demo"></p>
<script>
function checkFruit() {
  var text;
  var fruits = document.getElementById("myInput").value;

  switch(fruits) {
    case "Plátano":
      text = "El plátano contiene potasio y magnesio.";
      break;
    case "Naranja":
      text = "La mejor fuente de vitamina C.";
      break;
    case "Manzana":
      text = "La manzana reduce la tensión arterial.";
      break;
    default:
 text = "No conozco esa fruta.";
 break;
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>


Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript. Ejercicio 3</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El script no funciona. Intenta arreglarlo</i>.</h2>
<input id="myInput" type="text" value="Plátano">
<button onclick="checkFruit()">Comprobar frutas</button>
<p id="demo"></p>
<script>
function checkFruit() {
  var text;
  var fruits = document.getElementById("myInput").value;
  switch(fruits) {
    case "Plátano":
      text = "El plátano contiene potasio y magnesio.";
 break;
    case "Naranja":
      text = "La mejor fuente de vitamina C.";
 break;
    case "Manzana":
      text = "La manzana reduce la tensión arterial.";
 break;
    default:
      text = "No conozco esa fruta.";
 break;
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>


Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Switch JavaScript. Ejercicio 4</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Completar la declaración del switch con los <i>case</i> BMW, Ford y Peugeot</i>.</h2>
<p>El texto variable será relativo a la nacionalidad de cada marca.</p>
<p>Añadir también un <i>default case</i>.</p>
<input id="myInput" type="text" value="BMW">
<button onclick="checkCar()">Comprobar coche</button>
<p id="demo"></p>
<script>
function checkCar() {
  var text;
  var favCar = document.getElementById("myInput").value;
  switch(favCar) {
    case "BMW":
text = "El BMW es un coche alemán.";
break;
case "Ford":
text = "El ford es un coche americano.";
break;
case "Peugeot":
text = "El Peugeot es un coche francés.";
break;
default:
text = "No conozco este coche";
break;
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

No hay comentarios:

Publicar un comentario