Autor Tema: DOM nodos for JavaScript (bucles) Saber tamaño de array con length. CU01131E (Leído 2500 veces)

Pandemia · « **en:** 10 de Enero 2017, 21:20 »

Buenas noches amigos aquí dejo una posible solución al ejercicio CU01131E del curso de programación web básica con JavaScript.....

Citar

EJERCICIO

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. Por ejemplo si se introduce “ave” debe mostrar:

Letra 1: a

Letra 2: v

Letra 3: e

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Curso javascript aprenderaprogramar.com</title>
        <style type="text/css">
        body {
            background-color: #F5F5DC;
            font-family: sans-serif;
        }

        .boton {
            padding: 15px;
            width: 200px;
            text-align: center;
            clear: both;
            color: white;
            border-radius: 40px;
            background: rgb(202, 60, 60);
        }
        .boton:hover { background: #8A2BE2;}

        </style>

        <script type="text/javascript">

            function mostrarPalabrasLetraALetra() {
                var palabra=prompt('Por favor introduzca una palabra. ')
                var  msg='';

                for (i=1; i<=palabra.length; i++) {
                        msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';
                }

                alert(msg);

            }

        </script>

    </head>
    <body>
                <h3 class="boton" onclick="mostrarPalabrasLetraALetra()">Clic aquí para ver palabra letra a letra</h3>
    </body>
</html>

Citar

EJERCICIO

2) 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>
        <meta charset="utf-8">
        <title>Curso javascript aprenderaprogramar.com</title>

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

            .boton1 {
                padding: 15px;
                width: 200px;
                text-align: center;
                clear: both;
                float: left;
                color: white;
                border-radius: 40px;
                background: rgb(202, 60, 60);
            }
            .boton1:hover { background: #8A2BE2;}


        </style>

        <script type="text/javascript">
    var izqda_dcha = true;
    function cambiarColores(elemento) {
    var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];
    var elementosObtenidos = document.getElementsByTagName(elemento);
    if (izqda_dcha == true) {
                    for (var i=0; i<elementosObtenidos.length; i++) {
                    elementosObtenidos[i].style.backgroundColor = color[i%4];
                    }
    } else {
                    for (var j=elementosObtenidos.length-1; j>=0; j--) {
                    elementosObtenidos[j].style.backgroundColor = color[(j+3)%4];
                    }
    }
    if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }
    }

    function mostrarContParrafos() {
        var elementosObtenidos = document.getElementsByName('p');
        var  msg = '';
        for (var i=1; i<=elementosObtenidos.length; i++) {
		        msg=msg+'Párrafo'+i+': '+elementosObtenidos[i-1].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>

        <h3 class="boton" onclick="cambiarColores('p')">CLICK AQUÍ PARA CAMBIAR COLORES</h3>

        <h3 class="boton1" onclick="mostrarContParrafos()">CLICK AQUÍ PARA VER EL CONTENIDO DE LOS PÁRRAFOS</h3>

    </body>
</html>

Espero sus correcciones pues en el segundo ejercicio tengo algunas inseguridades....

Saludos y gracias de antemano.....

bermartinv · « **Respuesta #1 en:** 11 de Enero 2017, 18:16 »

Hola Pandemia,
el código no hace nada pero sólo tienes un pequeño error al trabajar en el DOM.
Recuerda para que sirve 'getElementsByName' , esto recoge todos los elementos de un array que tengan el atributo name y no es lo que nosotros vamos buscando. Queremos recoger en un array todos los elementos que esten contenidos en un elemento p.
Piensalo un poco.

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

Noticias: