jueves, 10 de marzo de 2016

El bucle for

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

Ejemplo 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Primer ejemplo del bucle <i>for</i>.</h2>
<button onclick="myFunction()">Mostrar listado de coches</button>
<p id="demo"></p>
<script>
function myFunction(){
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</body>
</html>

Ejemplo 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Segundo ejemplo del bucle <i>for</i>.</h2>
<button onclick="myFunction()">Púlsame</button>
<p id="demo"></p>
<script>
function myFunction() {
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
        text += "El número es " + 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>Bucle for 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> permite varias sintaxis diferentes.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}
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 for 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 primer parámetro es prescindible.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Ejemplo 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for JavaScript</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Podemos eliminar también el tercer parámetro.</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
var text = "";
for (; i < len; ) {
    text += cars[i] + "<br>";
    i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Ejemplo 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for 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 <i>for/in</i> entra en las propiedades de un objeto</h2>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
    txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for 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>En el bucle <i>for</i>, cambiar <i>num1</i> a <i>0</i> y <i>num2</i> a <i>10</i> y ejecutar el código.</h2>
<p id="demo"></p>
<script>
var i;
for (i = 0; i < 10; i++) {
    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>Bucle for 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 contar al bucle desde 5 en lugar de desde 0.</h2>
<p id="demo"></p>
<script>
var i;
for (i = 5; i < 10; i++) {
    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>Bucle for 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 al bucle contar desde <i>5</i>, llegando al <i>50</i> (incluido) y contando de <i>5</i> en <i>5</i>.</h2>
<p id="demo"></p>
<script>
var i;
for (i = 5; i <= 50; i=i+5) {
    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>Bucle for 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>Contar desde <i>10</i> hasta <i>1</i>.</h2>
<p id="demo"></p>
<script>
var i;
for (i = 10; i > 0; i--) {
    document.getElementById("demo").innerHTML += i + "<br>";
}
</script>
</body>
</html>

Ejercicio 5. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for 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>Establecer <i>i</i> a <i>0</i> y recorrer todo el array.</h2>
<p id="demo"></p>
<script>
var text = "";
var food = ["Pizza", "Beans", "Tacos", "Fish", "Chicken"];
var i;
for (i=0; i<food.length; i++) {
    text += "I love " + food[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Bucle for JavaScript. Ejercicio 6</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="../estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Crear un bucle <i>for</i> para mostrar los números impares del <i>1</i> al <i>9</i>.</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for(i = 1; i < 10; i=i+2){
text += 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)