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 08 de Octubre 2015, 23:38
-
Hola, otra solución mas.
EJERCICIO
Crea un documento html con un texto en una etiqueta h1 como “Ejercicio curso aprenderaprogramar.com” y un div a continuación. 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, accede al nodo del div y establece que muestre un texto informando del resultado de multiplicar cada uno de los números por 3 (para ello usa textContent). Ejemplo:
Al cargar la página aparecerá: Ejercicio curso aprenderaprogramar.com
… (div vacío)
Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7
A continuación en la página se visualizará: Ejercicio curso aprenderaprogramar.com
Multiplicamos por 5 los números introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.
y por aquí el código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover{background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function multiplicarPorCinco() {
var nodoDiv = document.getElementsByTagName('div');
var numero = new Array();
var num = 0;
var msg = 'Multiplicamos por 5 los número introducidos: ';
for(var i=0; i<5; i++){
num = prompt('Introduce un número: ');
numero[i]= Number(num);
}
for(i in numero){
msg = msg + numero[i] + '*5 = ' + (numero[i]*5);
if(i!=3){
if(i!=4){
msg = msg + ', ';
}else{
msg = msg + '.';
}
}else{
msg = msg + ' y ';
}
}
nodoDiv[0].textContent = msg;
}
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div></div>
<div id ="pulsador" onclick="multiplicarPorCinco()"> Empezar </div>
</body>
</html>
Saludos.
-
Hola Pedro!
El ejercicio cumple con lo solicitado. Pienso que podría mejorarse el diseño de la siguiente manera:
- Definir una función denominada pedirCincoNumeros que no reciba parámetros y devuelva un array con cinco números
- Definir una función multiplicaPorCinco que reciba un array y devuelva un array con cada uno de los números del array recibidos multiplicado por cinco
- Definir una función mostrarResultados que reciba un String y un nodo, y muestre el texto en el nodo deseado por pantalla.
- Definir una función gestionProceso que se encargue de iniciar el proceso e ir invocando las funciones adecuadas para conseguir el objetivo previsto.
En definitiva se trataría de crear funciones donde cada una tiene un cometido específico, no funciones donde se hace "de todo un poco".
En este código usas var nodoDiv = document.getElementsByTagName('div'); con lo cual tienes que acceder al nodo con nodoDiv[0] para acceder al primer div. Esto en programación en general lo usaremos poco porque en el desarrollo de código será frecuente cambiar la estructura y añadir o eliminar div, con lo cual los índices podrían cambiar. Por eso será más frecuente establecer un id para el div que queremos modificar y como el id es único, aunque introduzcamos o eliminemos div el código seguiría funcionando (siempre que no eliminemos el id que nos sirve de referencia).
Saludos!
-
Hola.
Dejo el ejercicio siguiendo las indicaciones que comentaste.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover{background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function gestionProceso(){
var nodoDiv = document.getElementById('respuesta');
var cincoNumeros = pedirCincoNumeros();
var numerosMultiplicados = multiplicarPorCinco(cincoNumeros);
var msg = crearMensaje(numerosMultiplicados, cincoNumeros);
mostrarResultados(msg, nodoDiv);
}
function pedirCincoNumeros(){
var cincoNumeros = new Array;
for(var i=0; i<5; i++){
cincoNumeros[i] = prompt('Introduce un número: ');
cincoNumeros[i] = Number(cincoNumeros[i]);
}
return cincoNumeros;
}
function multiplicarPorCinco(cincoNumeros){
var numerosMultiplicados = new Array;
for(var i=0; i<5; i++){
numerosMultiplicados[i] = cincoNumeros[i]*5;
}
return numerosMultiplicados;
}
function crearMensaje(numerosMultiplicados, cincoNumeros){
var msg = 'Multiplicamos por 5 los número introducidos: ';
for(var i in cincoNumeros){
msg = msg + cincoNumeros[i] + '*5 = ' + (numerosMultiplicados[i]);
if(i!=3){
if(i!=4){
msg = msg + ', ';
}else{
msg = msg + '.';
}
}else{
msg = msg + ' y ';
}
}
return msg;
}
function mostrarResultados(msgParaMostrar, nodo){
nodo.textContent = msgParaMostrar;
}
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div id = "respuesta"></div>
<div id ="pulsador" onclick="gestionProceso()"> Empezar </div>
</body>
</html>
-
Este diseño lo veo mucho mejor! Estas ideas de diseño es bueno que las apliques siempre que puedas pues así el código resulta de más calidad.
Saludos!
-
Tienes razón, además se lee mucho mas fácil.
Saludos.