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: paramonso en 17 de Octubre 2017, 13:41

Título: Javascript aplicar estilos CSS mediante una función bucle while letras CU01132E
Publicado por: paramonso en 17 de Octubre 2017, 13:41
Hola. Dejo la solucion al ejercicio CU01132E javascript while; do while del curso pdf de programación JavaScript para principiantes.

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
/*EJERCICIO 1
1) Crea una función que pida una palabra al usuario y usando un bucle
while y el método charAt, muestre cada una de las letras que componen
la entrada. Por ejemplo si se introduce “ave” debe mostrar:
Letra 1: a             Letra 2: v             Letra 3: e
*/
/*0000000000000000000000000000000000000000000000000000000000000*/
/*1111111111111111111111111111111111111111111111111111111111111*/

function cogerPalabra() {

// Llamada a cuadro de texto para para maquetar y presentar datos
var r;
r=txtAlert();
var texto = document.getElementById("cuadro");
        texto.innerHTML = "";

 // Núcleo de la función del ejercicio

var palabra, subpalabra = new Array();
palabra=prompt('Entre una palabra:','');
var bFor= palabra.length
    var subpalabra = new Array();
subpalabra[0]='';
var i=0;
var msg = 'Letras Introducidas por el teclado:<br/><br/>';


while (i<bFor)
{   
i++;
subpalabra[i] = subpalabra[i-1] + palabra.charAt(i-1);
if (i%4==0)
                {
                msg=msg+'Letra '+i+' : '+palabra.charAt(i-1)+'<br/>';msg=msg+'<br/>';
                }
else {msg=msg+'Letra '+i+' : '+palabra.charAt(i-1)+',&nbsp;&nbsp;' ;}
}

// presentar datos en pantalla
texto.innerHTML = msg;
}
/*0000000000000000000000000000000000000000000000000000000000000*/
/*1111111111111111111111111111111111111111111111111111111111111*/


function txtAlert()
{
var texto = document.getElementById("cuadro");
texto.style.backgroundColor="white";
texto.style.width="430px";
texto.style.height="400px";
texto.style.overflow="scroll";
texto.style.marginLeft="20px";
texto.style.border="5px AntiqueWhite solid";
texto.style.float="left"; 

}
 
function borrar(){

var texto = document.getElementById("cuadro");
texto.innerHTML = "";
var msg=""
texto.innerHTML = msg;
}
</script>
<style type="text/css">
body {background-color:yellow;
font-family: sans-serif;  }
p {font-size: 20px;
color: maroon;
float: left;
margin:5px;
border: solid black;
padding:5px;}

.boton, .boton2{padding:5px;
margin:15px;
width: 205px;
float:left;
text-align:center;border:solid;
color: white; border-radius: 40px;
background: rgb(202, 60, 60);
box-shadow:5px 5px 10px 5px black;}

h3:hover{background-color:BurlyWood;
box-shadow:5px 5px 10px 5px grey;
color:black;}

 
</style>
</head>

<body>

<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<h3 class="boton" onclick="cogerPalabra()">Pulsa aquí</h3>
<h3 class="boton" onclick="borrar()">Borrar Cuadro</h3>

<div id="cuadro">
</div>
</body>
</html>

Título: Re:Solución al ejercicio CU01132E Javascript
Publicado por: Ogramar en 01 de Enero 2018, 21:20
Buenas paramonso, como ya hemos comentado en otros hilos por favor para poner título a los temas en los foros sigue las indicaciones que se dan en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

En este ejercicio no solo has hecho lo que se pedía, sino mucho más (presentación en un cuadro, posibilidad de borrar, etc.).

En general se ve buen código y buen manejo de los conceptos. Las únicas sugerencias que te haría serían las siguientes:

- Dale nombres adecuados a las funciones. Por ejemplo la función cogerPalabra no tiene un nombre adecuado, porque el nombre de la función no describe lo que hace la función, el cometido principal de esta función no es coger una palabra.

- Divide en distintas funciones las distintas acciones a realizar. Por ejemplo si quieres adecuar  y dar estilos al cuadro, podrías hacer eso en una función dotarCuadroConEstilos(), otra función si es para pedir la palabra sería pedirPalabra, otra si fuera para extraer y mostrar las letras extraerYMostrarLetras(), etc. Las funciones a definir debe pensarlas cada programador.

Salu2
Título: Re:Solución al ejercicio CU01132E Javascript
Publicado por: paramonso en 02 de Enero 2018, 15:51
Hola Ogramar. Totalmente de acuerdo con lo que me dices. Tenía que haber creado una función para coger la palabra y pasarla a otra función para que la deletreara. Ok. Gracias.
 ;)