Temas > Programacion > Java script - Java > Nueva manera de programar JavaScript con jQuery
Julio

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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
 123456
78910111213
14151617 181920
21222324252627
282930    

Viernes 18 de Abril 2025
Semana 16



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar