Autor Tema: JavaScript Diferencia entre array_array-like-NodeList unshift CU01180E  (Leído 2519 veces)

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Hola chicos, pongo mis soluciones a este tema, CU01180E del tutorial JavaScript desde cero.

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


a) ¿Qué cometido cumple este código?
El cometido que tiene es pasar los elemento de un array-like a un array.

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 elementosInput = document.getElementsByTagName('input'); //Elementos input

                var elementosSelect = document.getElementsByTagName('select');

                var arrInput = [];
   
                var arrSelect = [];

                for(var i = elementosInput.length; i--; arrInput.unshift(elementosInput[i]));
   
                for(var i= elementosSelect.length; i--; arrSelect.unshift(elementosSelect[i]));
   
                alert ("Tenemos "+arrInput.length+" elementos de tipo input y "+arrSelect.length+" elementos de tipo select.");

}

</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>

Saludos.
« Última modificación: 25 de Marzo 2016, 23:16 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Diferencia entre array_array-like-NodeList.CU01180E
« Respuesta #1 en: 23 de Marzo 2016, 17:09 »
Buenas.

Veo todo bien.

Si no lo viste ya, sería aconsejable leer los comentarios que hay en el siguiente enlace, acerca de este ejercicio.

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

Saludos bermartinv.

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Diferencia entre array_array-like-NodeList.CU01180E
« Respuesta #2 en: 23 de Marzo 2016, 22:14 »
Gracias pedro,, por mandarme el enlace. No lo había leido y me ha gusto mucho, no pensaba que se pudiera hacer tantas cosas con for.
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".