Categoria: Programacion Tema: Java script - Java Titulo: Nueva manera de programar JavaScript con jQuery
Fecha del Tema: 2013-04-15 18:52:36Nueva manera de programar JavaScript con jQuery Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento. Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery: pagina1.html <?php //esto no va <html> <head> <title>Problema</title> </head> <body> <h2>Captura del evento click de un control HTML de tipo button.</h2> <a href="pagina2.html">Método tradicional con las funciones del DOM </a><br> <a href="pagina3.html">Utilizando la librería jQuery</a><br> </body> </html> pagina2.html <html> <head> <title>Problema</title> <script type="text/javascript" src="funciones1.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> ?>//esto no va funciones1.js <?php //esto no va addEvent(window,`load`,inicializarEventos,false); function inicializarEventos() { var boton1=document.getElementById(`boton1`); addEvent(boton1,`click`,presionBoton,false); } function presionBoton(e) { alert(`se presionó el botón`); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent(`on`+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } ?>//esto no va pagina3.html <?php //esto no va <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> ?>//esto no va Lo primero que tenemos en cuenta es que debemos importar la librería: <?php //esto no va <script type="text/javascript" src="../jquery.js"></script> ?>//esto no va Como se encuentra en la carpeta superior a donde se encuentra el archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma carpeta disponemos src="jquery.js", es decir directamente el nombre de la librería. Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden: <?php //esto no va <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> ?>//esto no va funciones2.js <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton) } function presionBoton() { alert("Se presionó el botón"); } ?>//esto no va En este archivo (funciones2.js) comienza nuestro estudio de la librería jquery La función principal de esta librería se llama $. A la función $ le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la segunda el id del control button): <?php //esto no va x=$(document); ... x=$("#boton1"); ?>//esto no va Esta función nos devuelve un objeto de tipo jQuery. El primer método que nos interesa de esta clase es el ready: <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); ?>//esto no va El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Es importante notar que solo pasamos el nombre de la función y no disponemos los paréntesis abiertos y cerrados al final. El código de esta función: <?php //esto no va function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton) } ?>//esto no va Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero ahora asociándolo al botón (esto lo hacemos pasando el id del control button precediéndolo por el carácter # y encerrado entre paréntesis. Finalmente llamamos al método click pasando como parámetro el nombre de la función que se ejecutará al presionar dicho botón.
Nueva manera de programar JavaScript con jQuery Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento. Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery: pagina1.html <?php //esto no va <html> <head> <title>Problema</title> </head> <body> <h2>Captura del evento click de un control HTML de tipo button.</h2> <a href="pagina2.html">Método tradicional con las funciones del DOM </a><br> <a href="pagina3.html">Utilizando la librería jQuery</a><br> </body> </html> pagina2.html <html> <head> <title>Problema</title> <script type="text/javascript" src="funciones1.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> ?>//esto no va funciones1.js <?php //esto no va addEvent(window,`load`,inicializarEventos,false); function inicializarEventos() { var boton1=document.getElementById(`boton1`); addEvent(boton1,`click`,presionBoton,false); } function presionBoton(e) { alert(`se presionó el botón`); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent(`on`+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } ?>//esto no va pagina3.html <?php //esto no va <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> ?>//esto no va Lo primero que tenemos en cuenta es que debemos importar la librería: <?php //esto no va <script type="text/javascript" src="../jquery.js"></script> ?>//esto no va Como se encuentra en la carpeta superior a donde se encuentra el archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma carpeta disponemos src="jquery.js", es decir directamente el nombre de la librería. Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden: <?php //esto no va <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> ?>//esto no va funciones2.js <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton) } function presionBoton() { alert("Se presionó el botón"); } ?>//esto no va En este archivo (funciones2.js) comienza nuestro estudio de la librería jquery La función principal de esta librería se llama $. A la función $ le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la segunda el id del control button): <?php //esto no va x=$(document); ... x=$("#boton1"); ?>//esto no va Esta función nos devuelve un objeto de tipo jQuery. El primer método que nos interesa de esta clase es el ready: <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); ?>//esto no va El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Es importante notar que solo pasamos el nombre de la función y no disponemos los paréntesis abiertos y cerrados al final. El código de esta función: <?php //esto no va function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton) } ?>//esto no va Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero ahora asociándolo al botón (esto lo hacemos pasando el id del control button precediéndolo por el carácter # y encerrado entre paréntesis. Finalmente llamamos al método click pasando como parámetro el nombre de la función que se ejecutará al presionar dicho botón.
