Un pequeño ejemplo de JavaScript

En el marco del curso de HTML5 que estoy dictando en IES, parte del mismo hace referencia a la práctica de JavaScript.

Debido a que mucha de la funcionalidad propuesta por HTML5 requiere de implementar líneas de código en este lenguaje, se hizo una introducción de algunas horas para tratar de nivel los conocimientos.

El ejercicio final que se pidión fue el de poder crear un pseudo objeto que pudiera, mediante una lista desplegable, crear una cantidad X de cajas de texto y botones. Cada botón, luego, debería poder mostrar el contenido de esa caja de texto en pantalla. Por supuesto, la idea no era usar ningun “wrapper” de JavaScript como jQuery, si no, hacerlo a lo guapo, con JavaScript puro.

Ya que quedé en pasar el código (Un posible solución) a los asistentes, aprovecho para colocarlo aquí también, posiblemente sirva para entender algunos conceptos de este hermoso lenguaje.

<select id="valores">
</select>
<div id="contenedor"></div>

<script language="javascript">
    var combo = document.getElementById("valores");
    var isIE = document.addEventListener ? false : true;
    
    for (var i = 1; i <= 100; i++) {
        var option = document.createElement('option');
        option.text = i;
        option.value = i;
        combo.add(option, i);
    }
    
    var dinamico = new HtmlDinamico("contenedor");
    
    if (!isIE) {
        combo.addEventListener("change", dinamico.ComboChange);
    } else {
        combo.attachEvent("onchange", dinamico.ComboChange);
    }
    
    function HtmlDinamico(divName) {
        var self = this;
        var div = document.getElementById(divName);
        
        this.ComboChange = function () {
            for (var i = 0; i < combo.value; i++) {
                var textBox = document.createElement("input");
                textBox.setAttribute("type", "text");
                textBox.setAttribute("id", i);
                textBox.setAttribute("value", "");
                
                var button = document.createElement("input");
                button.setAttribute("type", "button");
                button.setAttribute("value", "Click");
                button.setAttribute("id", i);
                button.setAttribute("data-index", i);
                
                if (!isIE) {
                    button.addEventListener("click", alertButton);
                } else {
                    button.attachEvent("onclick", alertButton);
                }
                
                div.appendChild(textBox);
                div.appendChild(button);
                div.appendChild(document.createElement("br"));
            }
        };
        
        function alertButton(arg) {
            var index;
            if (!isIE) {
                index = this.attributes["data-index"].value;
            } else {
                index = arg.srcElement.attributes["data-index"].value;
            }
            var textBox = document.getElementById(index);
            alert(textBox.value);
        }
    }
</script>

Como podrán notar, el mayor problema con el que nos encontramos cuando trabajamos con JavaScript, en la Web, es la compatibilidad con diferentes navegadores. Cada uno de estos implementa su propia forma de ver el mundo, por lo que es necesario colocar algunos condicionantes para ejecutar determinadas líneas de código que solo funcionarán en un navegador u en otro.



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s