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

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.

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++;
  }
}

Ogramar · « **Respuesta #1 en:** 29 de Agosto 2021, 20:03 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: