Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 28 de Enero 2016, 22:47
-
Buenas.
EJERCICIO
Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
var arr = [];
var divs = document.querySelectorAll('div');
for(var i = divs.length; i--; arr.unshift(divs[i]));
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.
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.
<!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...
for(var i=elementosSelectInput.length; i>0; i--){
arrayNodos.unshift(elementosSelectInput[i-1]);
}
Saludos.
-
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
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
-
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.