Autor Tema: JavaScript ¿cómo crear código eficiente? for bucles array length break CU01131E (Leído 1358 veces)

CodeNann · « **en:** 03 de Abril 2020, 06:58 »

Respuesta planteada al ejercicio CU01131E del curso aprende programación JavaScript como si estuvieras en primero.

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

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]


<html>

<head>
    <title>Ejemplo JavaScript - aprenderaprogramar.com</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: white;
            font-family: sans-serif;
            text-align: center;
        }

        div {
            clear: both;
            margin: 50px auto 50px auto;
            width: 500px;
        }

        h3 {
            background-color: aqua;
            border-radius: 20px;
            float: left;
            height: 50px;
            margin-left: 5px;
            padding: 0;
            text-align: center;
            width: 100px;
        }

        h3:hover {
            cursor: hand;
            box-shadow: 0 0 10px gray;
            transform: scale(1.01);
        }
        
        p {
            display: inline-block;
            margin: 0 0 5px 0;
        }
        
        p:nth-child(even) {
            color: rgb(203, 100, 100);
            background-color:#93fdda;
            border-radius: 5pt;
            padding: 2pt;
        }
        
        p:nth-child(odd) {
            color: rgb(255, 255, 255);
            background-color:rgba(0, 0, 0, 0.29);
            border-radius: 5pt;
            padding: 2pt;
        }
    </style>
    <script>
        function mostrar() {
            var palabra = prompt('Ingrese una palabra:');
            var subpalabra = [];
            subpalabra[0] = '';
            var letra = [];
            letra[0] = '';
            var msg = 'Las diez primeras letras de la palabra ' + '"' + palabra + '"' + ' son: \n\n';
            for (var i = 1; i <= 10; i++) {
                subpalabra[i] = subpalabra[i - 1] + palabra.charAt(i - 1);
            }
            for (var i = 10; i === 10; i++) {
                msg = msg + subpalabra[i];
            }
            msg = msg + '\n\n' + 'La posición numérica de cada letra es la siguiente:\n\n';
            for (var i = 0; i <= palabra.length; i++) {
                letra[i] = palabra.charAt(i - 1);
            }
            for (var i = 1; i <= palabra.length; i++) {
                msg = msg + 'Letra N° ' + i + ':' + ' ' + letra[i] + '\n';
            }
            alert(msg);
        }
        function mostrarP(elemento) {
            var elementoP = document.getElementsByTagName(elemento);
            var msg = 'El texto dentro de cada párrafo del DOM es el siguiente:\n\n';
            for (var i = 1; i <= elementoP.length; i++) {
                msg = msg + 'Parrafo N° ' + i + ': ' + elementoP[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>
        <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>
        <p>Tomate</p>
        <p>Aguacate</p>
        <p>Papaya</p>
        <p>Maracuyá</p>
        <p>Banana</p>
        <p>Blackberry</p>
    </div>
    <h3 type="button" class="boton" onclick="mostrar()">Mostrar Letras</h3>
    <h3 type="button" class="boton" onclick="mostrarP('p')">Mostrar Párrafos</h3>
</body>
</html>

Ogramar · « **Respuesta #1 en:** 03 de Abril 2020, 21:30 »

Buenas, como veo que es tu primer mensaje en el foro darte la bienvenida y espero que te animes a participar respondiendo también a otros usuarios.

Hago algunos comentarios sobre el ejercicio. Tu código hace lo que pedía el ejercicio (y alguna cosa añadida, como mostrar las diez primeras letras de la palabra), por ese lado bastante bien. Sin embargo habría varias cosas que mejorar en el código:

- Como cabecera del código es conveniente que pongas una línea con:
<!DOCTYPE html>

No es lo principal pero si lo haces mejor.

- Hacer cosas como subpalabra[0] = ''; para trabajar con los índices a partir de 1 en general sería calificado de "poco elegante" o "poco profesional". Eres libre de hacerlo, pero te recomendaría que te acostumbres a trabajar con los índices partiendo de cero en lugar de dejar el elemento 0 del array sin utilizar.

- Creo que has cogido código de algún ejemplo del curso CSS. Esto complica para este curso, ya que nos encontramos con decenas de líneas CSS que no son útiles para este curso, e incluso pueden ser perjudiciales. Por ejemplo, p { display: inline-block; margin: 0 0 5px 0;} altera el comportamiento normal de los párrafos haciendo que en lugar de comportarse como elementos block se comporten como elementos inline. Como resultado, los párrafos no se ven uno debajo de otro. Si dejamos simplemente p { margin: 0 0 5px 0;} se ve mucho mejor porque se aprecia que son párrafos. De cualquier manera, en este curso es preferible no meter css ó si se mete, meter lo mínimo imprescindible.
Otro ejemplo: cursor: hand; no es correcto. Lo correcto sería cursor: pointer; pero para evitar estos problemas mejor quitar el css de estos ejercicios.

- Deberías mejorar la lógica que utilizas en la programación. Por ejemplo

Código: [Seleccionar]

            for (var i = 1; i <= 10; i++) {
                subpalabra[i] = subpalabra[i - 1] + palabra.charAt(i - 1);
            }

Con la lógica que utilizas se produce lo siguiente en cuanto al valor de los elementos subpalabra:

Código: [Seleccionar]

subpalabra 1 vale p 
subpalabra 2 vale pa
subpalabra 3 vale pap
subpalabra 4 vale pape
subpalabra 5 vale papel
subpalabra 6 vale papel
subpalabra 7 vale papel
subpalabra 8 vale papel
subpalabra 9 vale papel
subpalabra 10 vale papel

Esto tiene poco sentido y además es ineficiente, estás almacenando en 10 posiciones de memoria algo de escasa o ninguna utilidad.

Otro ejemplo es esto:

Código: [Seleccionar]

            for (var i = 10; i === 10; i++) {
                msg = msg + subpalabra[i];
            }

Este bucle tiene una condición por la cual sólo se produce una ejecución. Si sólo hay una ejecución ¿Para qué queremos un bucle?

Habría que revisar todo el código para hacerlo eficiente. Si no has programado antes puede ser de interés leer https://aprenderaprogramar.com/foros/index.php?topic=1313.0

El segundo ejercicio está bien, lo único que te recomendaría es en lugar de for (var i = 1; i <= elementoP.length; i++) acostumbrarte a usar for (var i = 0; i < elementoP.length; i++) que es la convención habitual entre programadores.

No te desanimes, que quien la sigue la consigue. ¡Animo!

Salu2

CodeNann · « **Respuesta #2 en:** 04 de Abril 2020, 08:11 »

Gracias por la bienvenida.

Errores de principiante, la verdad. Soy nuevo en esto de la programación.

Seguiré las recomendaciones. Me acostumbrare al uso de for (var i = 0; i < elementoP.length; i++). Mi intención es hacer las cosas bien, de forma correcta y ordenada y no solo hacerlas por hacerlas.

Seguiré los consejos y evitare el uso de css innecesario en adelante.

muchas gracias.

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

Noticias: