martes, 15 de marzo de 2016

El bucle while

Los bucles pueden ejecutar un bloque de código un determinado número de veces.
Del contenido del capítulo JavaScript loop while W3Schools.

Ejemplo 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Recorrer la variable <i>i</i> desde <i>0</i> hasta <i>10</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var text = "";
    var i = 0;
    while (i < 10) {
        text += "<br>El número es " + i;
        i++;
    }
    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>Bucle while JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Otra forma de recorrer la variable <i>i</i> desde <i>0</i> hasta <i>10</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var text = ""
    var i = 0;
    do {
        text += "<br>El número es " + i;
        i++;
    }
    while (i < 10)
    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>Bucle while 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 <i>for</i> hace las cosas de manera similar.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
    text += cars[i] + "<br>";
    i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Ejemplo 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while 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 mismo ejemplo con el bucle <i>while</i>.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
    text += cars[i] + "<br>";
    i++;
}
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>Bucle while 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>Dentro del <i>script</i> cambiar <i>num1</i> por <i>0</i> y <i>num2</i> por <i>10</i> y hacer correr el código.</h2>
<p id="demo"></p>
<script>
var i = 0;
while (i < 10) {
    document.getElementById("demo").innerHTML += i + "<br>";
    i++;
}
</script>
</body>
</html>

Ejercicio 2. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while 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>Hacer que el bucle cuente desde <i>5</i> en lugar de desde <i>0</i>.</h2>
<p id="demo"></p>
<script>
var i = 5;
while (i < 10) {
    document.getElementById("demo").innerHTML += i + "<br>";
    i++;
}
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while 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>Hacer que el bucle comience en <i>5</i> y cuente hasta <i>50</i> (incluido) de cinco en cinco.</h2>
<p id="demo"></p>
<script>
var i = 5;
while (i <= 50) {
    document.getElementById("demo").innerHTML += i + "<br>";
    i = i + 5;
}
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while 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>Hacer que el bucle cuente hacia atrás desde <i>10</i> hasta <i>0</i> con saltos de línea.</h2>
<p id="demo"></p>
<script>
var i = 10;
while (i >= 0) {
    document.getElementById("demo").innerHTML += i + "<br>";
    i--;
}
</script>
</body>
</html>

Ejercicio 5. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle while 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>El bucle <i>do/while</i> debería sacar: <i>0</i>, <i>1</i>, <i>2</i>, <i>3</i>, <i>4</i>. Intenta arreglarlo.</h2>
<p id="demo"></p>
<script>
var i = 0;
do {
    document.getElementById("demo").innerHTML += i + "<br>";
    i++;
}
while (i<5);
</script>
</body>
</html>
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)