Autor Tema: Ejercicios while JavaScript. do while. continue (saltar bucle) contar CU01132E  (Leído 385 veces)

DRANXZ88

  • Avanzado
  • ****
  • Mensajes: 356
    • Ver Perfil
Ejercicios resueltos. Propuesta de solución para el ejercicio CU01132E del curso de programación con JavaScript desde cero de aprenderaprogramar.


Citar
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

Código: [Seleccionar]
<!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

Código: [Seleccionar]
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

Código: [Seleccionar]
function dividirPalabra(palabra) {
  var contador = 0;
  while (contador < palabra.length) {
    alert("Letra " + (contador + 1) + " : " + palabra.charAt(contador));
    contador++;
  }
}
« Última modificación: 29 de Agosto 2021, 20:03 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
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

 

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