martes, 15 de marzo de 2016

Break y continue

El break interrumpe el recorrido de un bucle.
El continue salta por encima del elemento.
Del contenido del capítulo JavaScript break and continue W3Schools.

Ejemplo 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Un bucle con un <i>break</i>.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    text += "El número es " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Ejemplo 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>El bucle saltará cuando <i>i = 3</i>.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    text += "The number is " + i + "<br>";
}
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>Break y Continue JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Listar el array con un <i>break</i>.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
list: {
    text += cars[0] + "<br>";
    text += cars[1] + "<br>";
    text += cars[2] + "<br>";
    break list;
    text += cars[3] + "<br>";
    text += cars[4] + "<br>";
    text += cars[5] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
</html>

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue 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>Usar el <i>break</i> para parar el bucle en <i>5</i>.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 1; i < 10; i++) {
    if (i === 5) break;
    document.getElementById("demo").innerHTML += i + "<br>";
}
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue 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>Usar <i>continue</i> para no considerar al <i>5</i> en el bucle.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 1; i < 10; i++) {
    if (i === 5) continue;
    document.getElementById("demo").innerHTML += i + "<br>";
}
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue 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>Usar <i>continue</i> para saltar el <i>5</i> y el <i>7</i>.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 1; i < 10; i++) {
    if (i === 5 || i === 7) continue;
    document.getElementById("demo").innerHTML += i + "<br>";
}
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue 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>El <i>switch</i> no funciona, hay que arreglarlo.</h2>
<input id="myInput" type="text" value="BMW">
<button onclick="checkCar()">Check Car</button>
<p id="demo"></p>
<script>
function checkCar() {
  var text;
  var favCar = document.getElementById("myInput").value;

  switch(favCar) {
    case "BMW":
      text = "German car";
      break;
    case "Ford":
      text = "American car";
      break;
    case "Peugeot":
      text = "French car";
      break;
    default:
      text = "No conozco esa marca de coche";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

Ejercicio 5. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Break y Continue JavaScript. Ejercicio 5</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Usar <i>continue</i> para no mostrar el elemento "<i>Saab</i>".</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = ""
var i;
for (i = 0; i < cars.length; i++) {
    if (cars[i] === "Saab") continue;
    text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)