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: DRANXZ88 en 25 de Marzo 2021, 17:35
-
Ejercicios resueltos. Propuesta de solución para el ejercicio CU01132E del curso de programación con JavaScript desde cero de aprenderaprogramar.
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
Html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<div style="width:450px;">
<form name="formularioContacto" class="formularioTipo1" method="get">
<h2>Escriba un palabra:</h2>
<label for="palabra"><span>Palabra:</span> <input id="palabra" type="text" name="palabra" /></label>
</form>
</div>
<h3 class="boton" onclick="dividirPalabra(document.getElementById('palabra').value);">Deletrear palabras</h3>
<script src="js/funciones.js"></script>
<script>
</script>
</body>
</html>
Css
body {
background-color: white;
font-family: sans-serif;
}
.boton {
padding: 15px;
width: 330px;
text-align: center;
clear: both;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
.boton:hover {
background: rgb(66, 184, 221);
}
.formularioTipo1 {
margin: 10px;
padding: 1px;
}
label {
color: maroon;
display: inline-block;
padding: 5px;
}
.formularioTipo1 input {
background-color: yellow;
width: 250px;
height: 20px;
border-radius: 5px;
}
Funciones
function dividirPalabra(palabra) {
var contador = 0;
while (contador < palabra.length) {
alert("Letra " + (contador + 1) + " : " + palabra.charAt(contador));
contador++;
}
}
-
Buenas, para quien revise este ejercicio, cumple con lo que se pedía. En el código se usan algunas cosas que creo que no se han trabajado durante el curso como http-equiv, viewport. El lugar "natural" para insertar el script sería en el head y no al final del html (esto es algo que a veces se hace, pero en general en el curso los scripts se insertan en el head).
El código supone que por cada letra haya que pulsar aceptar. Una posible mejora sería generar todo lo que hay que mostrar en pantalla y mostrarlo de una vez, en lugar de tener que ir aceptando cada vez que nos muestra una letra.
En https://aprenderaprogramar.com/foros/index.php?topic=4041.0 hay una solución donde todo el código está en un mismo archivo, y donde nos muestra todas las letras sin tener que ir aceptando una a una, lo que puede ser un poco más cómodo para quien quiera revisarlo.
Salu2