Tutorial HTML-CSS-JAVASCRIPT
appsRegnare.com

Episodio 7 - Familiarizándonos con la consola

Mencionamos anteriormente que podíamos ver los errores de código Javascript en la consola del navegador web (para abrirla desplegar el menú de Opciones y buscar las herramientas para desarrolladores del navegador que estemos usando). Es habitual durante la fase de desarrollo que dejemos la consola abierta para ver errores. Otra utilidad es poder ejecutar comandos javascript, como si hiciéramos la llamada a una función. Desde la consola tenemos acceso a las variables globales que definimos y podemos manipularlas. Todo el documento es accesible desde la consola. Veamos un ejemplo:

Usando la consola del navegador web


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            #tabla_datos {
                width: 100%;
            }
            #tabla_datos td {
                vertical-align: top;
            }
            #tabla_datos .consola1 {
                font-family: 'Courier New', Courier, monospace;
            }
            #td_datos {
                width: 88%;
                padding: 0 40px;
            }
            .option_select {
                padding: 10px;
            }
        </style>

        <script>
            // definimos dos variables globales
            var global1 = "La variable global1 es un string, y por lo tanto se muestra entre comillas";
            var global2 = 5;


            function mostrar_div(s)
            {
                var divs = document.getElementById("td_datos").getElementsByTagName("div");
                for (var div of divs)
                {
                    div.style.display = "none";
                }
                
                divs[parseInt(s)].style.display = "block";
            }
        </script>

    </head>
    <body>

    <h2 style="text-align: center; font-family: Helvetica;">Usando la consola del navegador web</h2>

    <table id="tabla_datos">
        <tbody>
            <tr>
                <td>
                    <select style="overflow-y: hidden; outline: none;" multiple>
                        <option class="option_select" value="0" onclick="mostrar_div(this.value)" selected>Consola 1</option>
                        <option class="option_select" value="1" onclick="mostrar_div(this.value)">Consola 2</option>
                        <option class="option_select" value="2" onclick="mostrar_div(this.value)">Consola 3</option>
                        <option class="option_select" value="3" onclick="mostrar_div(this.value)">Consola 4</option>
                    </select>
                </td>
                <td id="td_datos">
                    <div>
                        <h3>Primera instrucción de consola</h3>
                        <p>Tipeando el nombre de alguna variable global (+Enter) obtendremos el valor de la misma. Por lo tanto tipeamos:</p>
                        <p class="consola1">global1</p>
                        <p>Verifiquemos ahora el valor de la variable <i>global2</i>. Tipeamos (+Enter):</p>
                        <p class="consola1">global2</p>
                        <p>(El resultado de la instrucción será el dígito 5)</p>
                    </div>
                    <div style="display: none;">
                        <h3>Segunda instrucción de consola</h3>
                        <p>Modificamos el valor de la variable <i>global1</i>. Tipeamos (+Enter):</p>
                        <p class="consola1">global1 = "nuevo valor";</p>
                        <p>Verificamos el nuevo valor de <i>global1</i>. Tipeamos nuevamente:</p>
                        <p class="consola1">global1</p>
                        <p>(El resultado de la instrucción: "nuevo valor")</p>
                    </div>
                    <div style="display: none;">
                        <h3 id="titulo1">Tercera instrucción de consola</h3>
                        <p>Moficamos el texto del título. Tipeamos (+Enter):</p>
                        <p class="consola1">document.getElementById("titulo1").innerText = "Titulo personalizado";</p>
                    </div>
                    <div style="display: none;">
                        <h3>Cuarta instrucción de consola</h3>
                        <p>Cambiamos el color de fondo del elemento <i>body</i> e iteramos por todos los elementos del documento para establecer el atributo de estilo <i>color</i> con valor "#ffffff" (blanco). Evitamos modificar el <i>select</i>. Tipeamos (+Enter):</p>
                        <p class="consola1">document.body.style.backgroundColor = "#464646"; var nodos = document.getElementsByTagName('*'); for (var nodo of nodos) {if (nodo.nodeName.toLowerCase() !== 'option' && nodo.nodeName.toLowerCase() !== 'select') nodo.style.color = "#ffffff";}</p>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    

    </body>
    </html>

Algunos comentarios del ejemplo anterior:

En las opciones del select llamamos a la función mostrar_div(this.value). Estamos pasando como parámetro el valor del elemento, y no así todo el elemento como veníamos haciendo en capítulos anteriores. Dentro de la función iteramos por todos elementos que tengan nombre de etiqueta "div" y estén dentro del elemento con id "td_datos", para los cuales definimos la propiedad de estilo display con valor "none"; de manera que no se visualizará ningún div. El valor del parámetro que recibe la función se corresponde con el número de elemento que queremos mostrar, pero este valor es un string y para acceder al elemento de la colección el valor entre corchetes debe ser un entero, por lo que usamos el método parseInt para obtener su valor numérico.

Las instrucciones de consola deben ser de una línea. Varias instrucciones deben ir separadas por ; que define el fin de la instrucción. En la cuarta instrucción de consola usamos una propiedad y un método no mencionados anteriormente: La propiedad nodeName devuelve el nombre del nodo. Mientras que el método toLowerCase convierte los caracteres de un string a minúsculas.



← Anterior Siguiente →