Autor Tema: JavaScript Diferencia entre array array-like NodeList unshift ejemplo CU01180E (Leído 2361 veces)

Dimitar Stefanov · « **en:** 22 de Abril 2016, 18:24 »

Buenas tardes. Hago la entrega del ejercicio CU01180E del curso JavaScript desde cero.

Citar

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]));

Citar

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

Primero creamos un array vacío. Luego inicializamos la variable 'divs' como un nodeList de los elementos con tag 'div'. Finalmente añadimos (al principio) del array todos los elementos divs.

Citar

unshift(x) - Añade x al principio del array como nuevo (o nuevos) elementos.

Respuesta obtenida de la entrega CU01153E del curso JavaScript desde cero

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=834:funciones-arrays-javascript-push-sort-ordenar-numeros-concat-join-pop-shift-slice-splice-etc-cu01153e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

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>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<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 elementosInput = document.getElementsByTagName('input'); //Elementos input
		var elementosSelect = document.getElementsByTagName('select');
		var arrayNodos = [];
		for(var i=elementosInput.length; i--; arrayNodos.unshift(elementosInput[i]));
		for(var i=elementosSelect.length; i--; arrayNodos.unshift(elementosSelect[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 action="#" name="formularioContacto" method="get">
			<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 type="text" id="nombre" name="nombre"><br>
			<label>Apellidos</label><input type="text" id="apellidos" name="apellidos"><br>
			<label>Dirección</label><input type="text" id="direccion1" name="direccion1"><br>
			<label>Ciudad</label>
			<select name="ciudad" id="ciudad">
				<option value="">Elija opción</option>
				<option value="Madrid">Madrid (ES)</option>
				<option value="Mexico">México D.F.(MX)</option>
				<option value="Santiago">Santiago (CL)</option>
			</select><br>
			<label>Preferencias</label><input type="checkbox" name="Libros">Libros
			<input type="checkbox" name="Peliculas">Películas
			<input type="submit" value="Enviar"><input type="reset" value="Cancelar">
		</form>
	</div>
</body>
</html>

Lo que no entiendo es la lógica del bucle. Normalmente la estructura de un bucle es: primero se inicializa la variable desde el valor que empezará, luego la condición de su salida y al fin la incrementación o disminución de la variable. Pero en este bucle tenemos el valor inicial de la variable y si disminución, pero no veo la condición de salida del bucle. O al ser un array al que añadimos los elementos al llegar a 0 se saldrá del bucle?

Gracias.

pedro,, · « **Respuesta #1 en:** 24 de Abril 2016, 12:07 »

Buenas.

Todo correcto.

Sobre lo que comentas del bucle, te dejo este enlace donde se explica bastante bien.

https://www.aprenderaprogramar.com/foros/index.php?topic=3827.msg16377#msg16377

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 24 de Abril 2016, 19:53 »

Buenas tardes, pedro,,

Leí el enlace que me facilitasté. Ví que a ti también te surgió la misma duda que a mí

Ahora tengo más claro porque el bucle se formuló de manera no "tradicional". Es un poco lioso, pero supongo que con práctica se me quedará.

Gracias por corregirme el ejericicio y por darme una explicación a mi duda.

Saludos

PD: Releeré otra vez el enlace para poder quedarme con los conceptos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: