Autor Tema: Javascript aplicar estilos CSS mediante una función bucle while letras CU01132E  (Leído 2420 veces)

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
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>

« Última modificación: 01 de Enero 2018, 21:22 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Re:Solución al ejercicio CU01132E Javascript
« Respuesta #1 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

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Re:Solución al ejercicio CU01132E Javascript
« Respuesta #2 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.
 ;)
« Última modificación: 09 de Junio 2018, 19:46 por Ogramar »

 

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".