Autor Tema: Javascript con Notepad++ acceso a los nodos del DOM con bucles for CU01131E  (Leído 1235 veces)

Bettu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 28
    • Ver Perfil
Hola, de la entrega CU01131E del curso de desarrollo web con JavaScript usando Notepad++

Envío el ejercicio 1) usando un bucle for y el método charArt y el ejercicio 2) utilizando el acceso a los nodos del DOM del tipo párrafo juntos.
Espero vuestras críticas.
Saludos!

Código: [Seleccionar]
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Curso javascript aprenderaprogramar.com</title>

    <style media="screen">
        body {
            background-color: #F5F5DC;
            font-family: sans-serif;
        }
        p {font-size: 12px; color: blue; float: left; margin:10px; border: solid green; padding:10px;}
       .boton {
            padding: 15px;
            width: 200px;
            text-align: center;
            clear: both;
            color: yellow;
            border-radius: 40px;
            background: rgb(202, 60, 60);
        }

        .boton:hover {
            background: #8A2BE2;
        }
    </style>
    <script>
        function pedirPalabra() {
            var palabra = prompt('Por favor introduzca una palabra. ')
            var msg = '';
           
            for (var i=0; i<palabra.length; i++) {
               msg = msg + 'Letra '+ (i+1) + ': '+ palabra.charAt(i) + '\n'+'\n'; }
           
            alert(msg);
        }
        function mostrarContParrafos(elemento) {
            var msg = '';
            var elementosObtenidos = document.getElementsByTagName(elemento);

            for (var i=0; i<elementosObtenidos.length; i++) {
                 msg = msg + 'Párrafo '+ (i+1) + ' contiene: ' + elementosObtenidos[i].innerHTML + ';' + '\n';
            }
            alert(msg);           
        }
    </script>
</head>
<body>

    <h1>Portal web aprenderaprogramar.com - Ejercicio CU01131</h1>
    <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>

   <h3 class="boton" onclick="pedirPalabra()"> Click aquí para introducir la palabra</h3>
   <h3 class="boton" onclick="mostrarContParrafos('p')"> Click aquí para mostrar los párrafos</h3>
</body>
</html>
« Última modificación: 17 de Junio 2017, 13:52 por Alex Rodríguez »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Todo bien resuelto.  ;)

 

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