Autor Tema: JavaScript bucle for vacío sin llaves con dos condiciones significado CU01180E  (Leído 4005 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Buenas.

Citar
EJERCICIO
Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
Código: [Seleccionar]
var arr = [];
var divs = document.querySelectorAll('div');
for(var i = divs.length; i--; arr.unshift(divs[i]));


Citar
a) ¿Qué cometido cumple este código?

'divs' es un array-like, y lo que se hace en el for es introducir el contenido de 'divs' en el array 'arr'.

El método unshift() lo que hace es agregar elementos en el inicio de un array. Por eso el for es usado de forma decreciente, para mantener el mismo orden.


Citar
b) Aplicando la idea que podemos extraer de este código, modifica el código que hemos visto como ejemplo en esta entrega para crear un array con los elementos input y select del formulario y  mostrar por pantalla el número de elementos input y select existentes en el formulario.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}
.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
var elementosSelectInput = document.querySelectorAll('input, select');
var arrayNodos = [];
for(var i=elementosSelectInput.length; i--; arrayNodos.unshift(elementosSelectInput[i]));
alert('Tenemos un número de elementos input ó select en el formulario: ' + arrayNodos.length);
}
</script>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="estiloForm"> <form name ="formularioContacto" method="get" action="#">
<label>Tratamiento</label>
<input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
    <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
    <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad">
<option value="">Elija opción</option>
<option value="Mexico">México D.F. (MX)</option>
<option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox"  />Películas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</form>
</div>
</body>
</html>


Sobre el apartado a, entiendo lo que hace el for, pero no entiendo como puede ir arr.unshift(divs) en donde está colocado y que funcione.  :o :o

Cuando la manera habitual a mi parecer hubiese sido...

Código: [Seleccionar]
for(var i=elementosSelectInput.length; i>0; i--){
arrayNodos.unshift(elementosSelectInput[i-1]);
}

Saludos.
« Última modificación: 11 de Julio 2016, 22:25 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas Pedro

a) Bien

b) Bien

Como bien comentas el for del apartado a) es extraño y no se corresponde con la forma habitual del for que sería la que comentas, simplemente

Código: [Seleccionar]
for(var i=elementosSelectInput.length; i>0; i--){
arrayNodos.unshift(elementosSelectInput[i-1]);
}

que además se entiende mejor.

Para buscarle explicación a esto tendríamos que tener en cuenta lo siguiente:

Igual que un if puede ir sin { } un bucle for también puede ir sin { }, es decir, for (...) sería igual de válido que for (...) { }

Por otro lado, la sentencia for se usa normalmente de una forma estándar, pero admite cosas que a priori pueden parecer extrañas.

Por ejemplo en lugar de declarar una variable de control, declarar varias variables. Por ejemplo var i, j, k=elementosSelectInput.length; sería legal

Otra cosa que admite que puede parecer rara es una condición de terminación del bucle donde aparentemente no hay condición. Por ejemplo en lugar de i>0 la condición podría ser simplemente i. Esto lo que significaría es "para determinar si el bucle debe terminar, evalúa la variable i. En caso de i ser true, continua repitiendo el bucle. En caso de i valer false, termina el bucle.

Finalmente, la cláusula de incremento o decremento del bucle que normalmente es algo que incrementa o decrementa la variable de control puede estar formada por varias sentencias separadas por comas. ¿Qué sentido tiene esto?

Si vemos el bucle for como esta estructura: for (first section; second section; third section);

En la tercera parte del bucle tenemos un código que se ejecuta en cada pasada del bucle. Normalmente usamos este código para controlar la variable índice, pero podemos usarlo para otras cosas.

Fíjate en este código: for(var i = 5; i--; alert('i vale '+i));

Este código es un poco engañoso y no demasiado fácil de entender, aunque es legal para el intérprete. Lo que hacemos aquí es decir "El contador del bucle comienza en 5. La condición de evaluación es i--. Esto supone evaluar si i vale 0 en cuyo caso se detendría el bucle, y reducir el valor de i en una unidad. El truco aquí es que estamos haciendo dos cosas en un mismo paso, en el mismo paso evaluamos y reducimos el valor de i. Finalmente en lugar de usar el código de ejecución en cada pasada para reducir el contador, lo usamos para ejecutar sentencias.

Podría ser más de una sentencia, for(var i = 5; i--; alert('i vale '+i), alert ('Hay que ver'));

Bueno esto no veo demasiado recomendable usarlo pero por lo menos saber interpretarlo si nos lo encontramos por ahí.

Salu2

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola Ogramar.

Como siempre, muchas gracias por la corrección y la explicación del for. Porque aunque estuve buscando por la red, no encontré ninguna explicación que no se basara en el uso tradicional.

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".