Autor Tema: JavaScript ejercicios resueltos bucle for document.getElementsByTagName CU01131E  (Leído 846 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Solución propuesta para los ejercicios de la entrega CU01131E del tutorial básico de programación web con JavaScript de aprenderaprogramar.

Citar
1) Crea una función que pida una palabra al usuario y usando un bucle for y el método charAt, muestre cada una de las letras que componen la entrada.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01131E</title>
    <script>
        function palabraElegida(palabra){
            for (i = 0; i < palabra.length; i++){
                document.write('Letra ' + Number(i+1) + ': ' + palabra.charAt(i) + '<br>');
            }
        }
    </script>
</head>
<body>
    <script>
        palabraElegida(prompt('Escribe una palabra'));
    </script>

</body>
</html>


Citar
Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio CU01131E</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:white; font-family: sans-serif;}
            p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
            .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);}
        </style>
        <script type="text/javascript">
            function mostrarContParrafo(elemento){
                var parrafo = document.getElementsByTagName(elemento);
                var msg = '';
                for(i = 0; i < parrafo.length; i++){
                    msg = msg + ('Parrafo ' + Number(i+1) + ': ' + parrafo[i].firstChild.nodeValue + '\n');
                }
                alert(msg)
            }
        </script>
    </head>
    <body>
        <h1>Portal web aprenderaprogramar.com</h1>
        <h2>Didáctica y divulgación de la programación</h2>
        <div style="width:500px; float:left; margin-bottom:30px;">
            <p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>
            <p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>
            <p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
            <p>Nectarina</p><p>Frambuesa</p>
        </div>
        <h2 class="boton" onclick="mostrarContParrafo('p')">Pulse aquí</h2>
    </body>
</html>
« Última modificación: 24 de Septiembre 2020, 18:24 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, ambos ejercicios realizan lo que se pedía. Comentar que en el ejercicio 1 la estructura del código (un script directamente dentro del body) no es la que se utiliza en los ejemplos del curso. También en el ejercicio 1 se utiliza document.write, que tampoco es utilizado en los ejemplos del curso. 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".