Aprendemos JavaScript: 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>

jueves, 10 de marzo de 2016

La declaración Switch

No hay comentarios:

Publicar un comentario