Autor Tema: Ejercicio resuelto for in JavaScript recorrer arrays propiedades objeto CU01135E (Leído 2980 veces)

Cabanota · « **en:** 29 de Abril 2015, 02:51 »

Hola colegas. Aquí traje una posible solución al ejercicio CU01135E del tutorial JavaScript con ejercicios resueltos de aprenderaprogramar.

Lo modifiqué un poco a mi gusto con el fin de retar mis propios conocimiento e ir practicando de lo que he aprendiendo hasta ahora, pero sin perder el enfoque de su tema principal que es: for in.

Espero sus opiniones para saber que debo ir mejorando o ir haciendo. De ante mano muchas gracias.

Citar

1) Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación usando un for in que recorra el array, muestra un mensaje informando del resultado de multiplicar cada uno de los números por 3. Ejemplo:

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación se mostrará el mensaje:

Multiplicamos por 5 los números introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="UTF-8">
   <style type="text/css">
      div#salida{
         width: 100%;
         border: 1px solid black;
         height: 20px;
      }
      #vaMostrando{
         width: 20%;
         margin: 10px 0px 20px 0px;
         padding: 3px; 
      }
      h2{
         margin: 0;
      }
   </style>
   <script type="text/javascript">
      var datoEntrada, datoBoton, datoSalida, iteractivo;
      var arreglo = new Array();
      var cont = 0;

      function capturaDeDatos() {   
         datoEntrada = document.getElementById("entrada");
         iteractivo = document.getElementById("vaMostrando");
         if (cont < 5) {
            arreglo[cont] = datoEntrada.value;
            iteractivo.childNodes[1].nodeValue = arreglo[cont];
         }else{
            alert("Ya se sobrepaso de datos.");
         }
         cont++;
         if (cont == 5) {
            var resul = "Multiplicamos por 5 los números introducidos: ";

            datoSalida = document.getElementById("salida");
            for (i in arreglo) {
               resul = resul + arreglo[i] + "*5 = " + (arreglo[i] * 5) + ", ";
            };
            datoSalida.childNodes[0].nodeValue = resul;
            iteractivo.childNodes[1].nodeValue =  "Finish";
         };
      }
      
      function resetMen() {
         var resetCaja = document.getElementById("salida").childNodes[0].nodeValue = "";
         var resetCaja2 = document.getElementById("vaMostrando").childNodes[1].nodeValue = "";
         cont = 0;   
      }
   </script>
</head>
<body>
   <form>
      <h2>Ingrese 5 numeros solamente.</h2>
      <input id="entrada" type="text"/>
      <input id="boton" type="reset" value="Acept" onclick="capturaDeDatos()" />
      <input id="reseteo" type="button" value="Limpar cajas" onclick="resetMen()" />
      <div id="vaMostrando" style="font-size: 20px;"><span style="font-size: 15px">Ingreso el numero: </span> </div>
      <span>Resultado:</span>
      <div id="salida"> <div>
   </form>
</body>
</html>

César Krall · « **Respuesta #1 en:** 30 de Abril 2015, 10:26 »

Hola Cabanota el ejercicio está bien resuelto.

Tienes un despiste de no cerrar <div id="salida"> <div> ahí faltó el cierre </div>

También tienes una construcción extraña <span>Resultado:</span> sin estar dentro de otro elemento (bueno está dentro del form pero no dentro de algo que envuelva el span). El span suele estar dentro de un div o un p, no suele dejarse suelto dentro de un form.

Al principio creí que no funcionaba bien porque no se ven todos los números introducidos, he hecho algunos pequeños cambios para que se vea un poco más claro, aquí los dejo (básicamente es lo mismo, lo único que se van mostrando los números introducidos)

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset="UTF-8">
   <style type="text/css">
   h2, input, form{margin:20px;}
      div#salida{
         width: 100%;
         border: 1px solid black;
         height: 20px;
      }
      #vaMostrando{
         width: 20%;
         margin: 10px 0px 20px 0px;
         padding: 3px; 
      }

   </style>
   <script type="text/javascript">
      var datoEntrada, datoBoton, datoSalida, iteractivo;
      var arreglo = new Array();
      var cont = 0;

      function capturaDeDatos() {   
         datoEntrada = document.getElementById("entrada");
         iteractivo = document.getElementById("vaMostrando");
         if (cont < 5) {
            arreglo[cont] = datoEntrada.value;
			iteractivo.childNodes[1].nodeValue = cont==0 ? arreglo[cont]:iteractivo.childNodes[1].nodeValue+'-'+arreglo[cont];
         }else{
            alert("Ya se sobrepaso de datos.");
         }
         cont++;
         if (cont == 5) {
            var resul = "Multiplicamos por 5 los números introducidos: ";

            datoSalida = document.getElementById("salida");
            for (i in arreglo) {
               resul = resul + arreglo[i] + "*5 = " + (arreglo[i] * 5) + ", ";
            };
            datoSalida.childNodes[0].nodeValue = resul;
            iteractivo.childNodes[1].nodeValue =  iteractivo.childNodes[1].nodeValue+" Finish";
			
         };
      }
      
      function resetMen() {
         var resetCaja = document.getElementById("salida").childNodes[0].nodeValue = "";
         var resetCaja2 = document.getElementById("vaMostrando").childNodes[1].nodeValue = "";
         cont = 0;   
      }
   </script>
</head>
<body>
   <form>
      <h2>Ingrese 5 numeros solamente.</h2>
      <input id="entrada" type="text"/>
      <input id="boton" type="reset" value="Acept" onclick="capturaDeDatos()" />
      <input id="reseteo" type="button" value="Limpar cajas" onclick="resetMen()" />
      <div id="vaMostrando" style="font-size: 20px;"><span style="font-size: 15px">Ingreso el numero: </span> </div>
      <div><span>Resultado:</span></div>
      <div id="salida"> </div>
   </form>
</body>
</html>

Saludos

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

Noticias: