Los Lazos
Los lazos ejecuta repetidamente un bloque de códigos.
El Lazo for
El lazo for ejecuta las sentencias repetidamente hasta que se cumpla una condición (Código_108).
El lazo for tiene cuatro partes:
- Valor inicial de la variable
- Condición de repetición
- Incremento de la variable
- Sentencia: Ejecuta los códigos repetidamente según la condición.
En el Código 108, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), dentro de la función mensaje(), el lazo for se inicializa con i=0, la condición es i<5 y se incrementa con i++ para que el mensaje Hola Mundo se imprima cinco veces en la pantalla con la propiedad document.write().
Descargar archivo codigo108.html
Copiar enlace:
Pegar enlace en la url del explorador web y descarga el archivo:
Código 108: El Lazo for
<!-- Archivo: codigo108.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Imprime Hola Mundo 5 veces
for(var i=0; i<5; i++) {
// Mensaje por pantalla
document.write("Hola Mundo");
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo108.html
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Imprime Hola Mundo 5 veces
for(var i=0; i<5; i++) {
// Mensaje por pantalla
document.write("Hola Mundo");
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo108.html
En la Figura_110, si se presiona el botón Mensaje aparece el mensaje “Hola Mundo” cinco veces, Figura 111.
Figura 110 – Vista en el explorador Web
Código 108: El Lazo for
Figura 111 – Vista en el explorador Web
Código 108: El Lazo for
El Lazo for … of
El lazo for … of itera objetos como los arreglos (array) y cadenas de caractéres (strings) (Código_109).
El lazo for … of tiene tres partes:
- Variable
- Objeto a iterar
- Sentencia: Ejecuta los códigos
En el Código 109, al hacer click en el botón que es la etiqueta <button>, invoca la función ciudades(), dentro de la función ciudades(), el lazo for … of la variable es ciudad y el objeto es ciudades que es un arreglo (array), el lazo for itera la variable ciudad y lo imprima en la pantalla con la propiedad document.write().
Código 109: El Lazo for … of
<!-- Archivo: codigo109.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Ciudades -->
<button onclick="ciudades()">Ciudades</button>
<!-- Códigos de JavaScript -->
<script>
// Función ciudades
function ciudades() {
// iniciar variable con datos
var ciudades = ["Caracas", "Valencia", "Valera"];
// Lazo for ... of
for(ciudad of ciudades) {
// Imprimir por pantalla
document.write(ciudad);
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo109.html
En la Figura_112, si se presiona el botón Ciudades, aparece los nombres de ciudades: Caracas, Valencia y Valera, Figura 113.
Figura 112 – Vista en el explorador Web
Código 109: El Lazo for … of
Figura 113 – Vista en el explorador Web
Código 109: El Lazo for … of
En el Código 110, al hacer click en el botón que es la etiqueta <button>, invoca la función letras(), dentro de la función letras(), la variable es letra y el objeto a iterar es palabra que tiene un texto, el lazo for … of itera la variable letra y lo imprima en la pantalla con la propiedad document.write().
Código 110: El Lazo for … of
<!-- Archivo: codigo110.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<p>Candela</p>
<!-- Botón -->
<button onclick="letras()">Deletrear</button>
<!-- Códigos de JavaScript -->
<script>
// Función letras
function letras() {
// iniciar variable con dato
var palabra = "Candela";
// Lazo for ... of
for(letra of palabra) {
// Imprimir por pantalla
document.write(letra);
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo110.html
En la Figura_114, si se presiona el botón Deletrear, aparece la palabra Candela deletreado, Figura_115.
Figura 114 – Vista en el explorador Web
Código 110: El Lazo for … of
Figura 115 – Vista en el explorador Web
Código 110: El Lazo for … of
El Lazo while
El lazo while ejecuta un bloque de códigos hasta que se cumpla una condición (Código_111).
El lazo while tiene dos partes:
- Condición
- Sentencia: Ejecuta los códigos
En el Código 111, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), dentro de la función mensaje(), en el lazo while la variable de condición es i, el lazo while ejecuta el bloque de códigos hasta que i < 3, dentro del bloque de códigos la variable se incrementa en uno (i++), antes del lazo while la variable i=0, el lazo while imprime el mensaje “Hola Mundo” tres veces en la pantalla con la propiedad document.write().
Código 111: El Lazo while
<!-- Archivo: codigo111.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Iniciar variable con cero
var i = 0;
// Imprime Hola Mundo 5 veces
while(i<3) {
// Mensaje por pantalla
document.write("Hola Mundo");
// Salto de línea
document.write("<br/>");
// Incrementa la variable en 1
i++;
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo111.html
En la Figura 116, si se presiona el botón Mensaje, aparece el mensaje Hola Mundo tres veces, Figura 117.
Figura 116 – Vista en el explorador Web
Código 111: El Lazo while
Figura 117 – Vista en el explorador Web
Código 111: El Lazo while
En el Código 112, al hacer click en el botón que es la etiqueta <button>, invoca la función frutas(), dentro de la función, en el lazo while la variable de condición es i, while ejecuta el bloque de códigos hasta que i < nro_frutas, donde nro_frutas=3, dentro del bloque de códigos la variable i se incrementa en uno (i++), antes de while la variable i=0, el arreglo frutas[ ] se inicializa con tres futas: manzanas, bananas y naranja y luego se calcula el número de frutas que es la variable nro_frutas=3, el lazo while imprime en contenido del arreglo frutas[ ] en la pantalla con la propiedad document.write().
Código 112: El Lazo while
<!-- Archivo: codigo112.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Frutas -->
<button onclick="frutas()">Frutas</button>
<!-- Códigos de JavaScript -->
<script>
// Función frutas
function frutas() {
// iniciar el arreglo (array) con sus datos
var frutas = ["manzanas", "bananas", "naranjas"]
// Calcula número de frutas
var nro_frutas = frutas.length;
// Iniciar variable con cero
var i = 0;
// Imprime Hola Mundo 5 veces
while(i<nro_frutas) {
// Mensaje por pantalla
document.write(frutas[i]);
// Salto de línea
document.write("<br/>");
// Incrementa la variable en 1
i++;
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo112.html
En la Figura 118, si se presiona el botón Frutas, aparece en pantalla manzanas, bananas y naranjas, Figura 119.
Figura 118 – Vista en el explorador Web
Código 112: El Lazo while
Figura 119 – Vista en el explorador Web
Código 112: El Lazo while
El lazo do … while
El lazo do … while ejecuta un bloque de códigos hasta que se cumpla una condición (Código_113).
El lazo while tiene dos partes:
- Sentencia: Ejecuta los códigos
- Condición
En el Código 113, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), dentro de la función mensaje(), en el lazo do … while la variable de condición es i, do ejecuta el bloque de códigos mientras la condición sea i < 3, dentro del bloque de códigos la variable se incrementa en uno (i++), antes de do la variable i=0, el lazo do … while imprime el mensaje “Hola Mundo” tres veces en la pantalla con la propiedad document.write().
Código 113: El lazo do … while
<!-- Archivo: codigo113.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Iniciar variable con cero
var i = 0;
// Imprime Hola Mundo 5 veces
do {
// Mensaje por pantalla
document.write("Hola Mundo");
// Salto de línea
document.write("<br/>");
// Incrementa la variable en 1
i++;
} while(i<3)
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo113.html
En la Figura 120, si se presiona el botón Mensaje, aparece el mensaje Hola Mundo tres veces, Figura 121.
Figura 120 – Vista en el explorador Web
Código 113: El lazo do … while
Figura 121 – Vista en el explorador Web
Código 113: El lazo do … while
En el Código 114, al hacer click en el botón que es la etiqueta <button>, invoca la función frutas(), dentro de la función, en el lazo do … while la variable de condición es i, do ejecuta el bloque de códigos mientras while sea i < nro_frutas, donde nro_frutas=3, dentro del bloque de códigos la variable i se incrementa en uno (i++), antes de do la variable i=0, el arreglo frutas se inicializa con tres futas: manzanas, bananas y naranja y luego se calcula el número de frutas[ ] que es la variable nro_frutas=3, el lazo do … while imprime en contenido del arreglo frutas[ ] en la pantalla con la propiedad document.write().
Código 114: El lazo do … while
<!-- Archivo: codigo114.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Frutas -->
<button onclick="frutas()">Frutas</button>
<!-- Códigos de JavaScript -->
<script>
// Función frutas
function frutas() {
// iniciar el arreglo (array) con sus datos
var frutas = ["manzanas", "bananas", "naranjas"]
// Calcula número de frutas
var nro_frutas = frutas.length;
// Iniciar variable con cero
var i = 0;
// Imprime Hola Mundo 5 veces
do {
// Mensaje por pantalla
document.write(frutas[i]);
// Salto de línea
document.write("<br/>");
// Incrementa la variable en 1
i++;
} while(i<nro_frutas)
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo114.html
En la Figura 122, si se presiona el botón Frutas, aparece en pantalla manzanas, bananas y naranjas, Figura 123.
Figura 122 – Vista en el explorador Web
Código 114: El lazo do … while
Figura 123 – Vista en el explorador Web
Código 114: El lazo do … while
La Sentencia break
La Sentencia break termina la ejecución del lazo.
En el Código 115, al hacer click en el botón que es la etiqueta <button>, invoca la función numeros(), dentro de la función numeros(), el lazo for se inicializa con i=0, la condición es i<10, el incremento se hace con i++, los números se imprime del 0 al 4 porque cuando i=5 el lazo termina con la instrucción break, el lazo for imprime en contenido de la variable i en la pantalla con la propiedad document.write().
Código 115: La Sentencia break
<!-- Archivo: codigo115.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón números -->
<button onclick="numeros()">Números</button>
<!-- Códigos de JavaScript -->
<script>
// Función numeros
function numeros() {
// Lazo for
for(var i=0; i<10; i++) {
if(i==5) {
break;
}
// Imprimir por pantalla
document.write("Número="+i);
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo115.html
En la Figura 124, si se presiona el botón Números, aparece en pantalla la numeración del Número 0 hasta el Número 4, Figura 125.
Figura 124 – Vista en el explorador Web
Código 115: La Sentencia break
Figura 125 – Vista en el explorador Web
Código 115: La Sentencia break
La Sentencia continue
La Sentencia continue termina la ejecución de la sentencia actual del lazo.
En el Código 116, al hacer click en el botón que es la etiqueta <button>, invoca la función numeros(), dentro de la función numeros(), el lazo for se inicializa con i=0, la condición es i<10, el incremento se hace con i++, los números se imprime del 0 al 10 menos el 5 porque cuando i=5 el lazo actual termina con la instrucción continue, el lazo for imprime en contenido de la variable i en la pantalla con la propiedad document.write().
Código 116: La Sentencia continue
<!-- Archivo: codigo116.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón números -->
<button onclick="numeros()">Números</button>
<!-- Códigos de JavaScript -->
<script>
// Función numeros
function numeros() {
// Lazo for
for(var i=0; i<10; i++) {
if(i==5) {
continue;
}
// Imprimir por pantalla
document.write("Número="+i);
// Salto de línea
document.write("<br/>");
}
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo116.html
En la Figura 126, si se presiona el botón Números, aparece en pantalla la numeración del Número 0 hasta el Número 10 menos el Número 5, Figura 127.
Figura 126 – Vista en el explorador Web
Código 116: La Sentencia continue
Figura 127 – Vista en el explorador Web
Código 116: La Sentencia continue
Comentarios
Publicar un comentario