martes 8 de abril de 2008

Eventos

De nada nos sirve poder seleccionar lo elementos del DOM si no podemos usarlos cuando los necesitemos, podemos definir un evento como una accion del usuario en una pagina web, ante la cual se podria responder don un proceso determinado. los principales son el evento change y el evento click. Usando jquery la sintaxis seria la siguiente:

$("elementoseleccionado").click(function() {
//sentencias
});

$("elementoseleccionado").change(function() {
//sentencias
});

Tomando el mismo ejemplo anterior (no hace falta recordarles que si cambian el nombre de la imagen el ejemplo resultara mejor).

<img src="imagenes/imagen.jpg"/>

Hagamos uso de el omnipresente alert para implementar nuestro pequeño ejemplo.

$(document).ready(function(){
//seleccionamos el elemento deseado
$("img").click(function(){
alert("funciona!!!");
});

});

Como notaran, cuando clickemos sobre la imagen, se lanza el proceso alert, por la naturaleza del selector usado el alert se lanzara cuando se haga click sobre cualquiera de las imagenes de las que disponemos en nuestra pagina.
Existen otros tipos de eventos, pero a mi parecer estos dos son los que mas utilidad pueden brindarnos al momento de interactuar con el usuario.

sábado 5 de abril de 2008

Selectores

Seleccionar elementos del DOM se simplifica con jquery, es cuestión de acostumbrarse un poco a su notación; supongamos que tenemos el siguiente elemento:

<img name="dibujo" id="dibujoid" class="dibujoclase" src="/imagenes/imagen.jpg"/>

Pueden existir diferentes formas de acceder a este elemento usando sus propiedades

//usando el tipo de elemento
$("img")
//usando la propiedad name
$("[@name=dibujo]")
//usando la propiedad id
$("#dibujoid")
//usando la propiedad class
$(".dibujoclase")

En cada caso hacemos referencia al mismo elemento, o grupos de elementos que tengan la misma propiedad.
Si usamos el tipo de elemento se seleccionaran, en este caso todos los img del documento asociandolos a una matriz.
En el caso de seleccionar usando la propiedad clase, se seleccionarán todos los elementos del DOM que esten asociados a esta clase.
En el caso de seleccionar usando el id, solo se seleccionará el primer elemento del DOM asociado a ese id, ignorando los demás.

El javascripy

No necesita presentacion:

¡¡¡Teclea, teclea!!!
El javascripy mola mogollón,funciona en explorer y también en firefox.
Ponle javascripy a esa paginita,que el javascripy la deja muy bonita.
Abre ventanas,muestra mensajes,valida formularios,mi amol ya tu sabes!
Programan los seniors,Programan los juniors,Programa mi jefe con acentos en el function!
Y el javascripy se programa asi:1-El tag script2-el function vars3-el alert-confirm4-el return trú
Programa el javascripy,Programa el javascripy,programan los heavys también los frikis
Programan en la offis, programan en la uni,Programan los fruittis y también los lunnis.
Programa Maradona esnifando una raya,y Juan Carlos le dice: ¿Porque no usas ajax?
En el formulario de un triste portal,pusieron javascripy y ya pudo validar
¡¡¡Validar!! ¡¡Validar, validarr, validarrr!!!
Y el javascripy se programa asi:1-El tag script2-el function vars3-el alert-confirm4-el return trú.


Y la version en audio (alguien se animara a sacar el video):

http://www.youtube.com/watch?v=_OI-rjMH5yk

jueves 3 de abril de 2008

En un principio era el DOM...

Para aprovechar adecuadamente el potencial de jquery, es preciso tener ciertos conocimientos de DOM, CSS, HTML, javascript y ciertos conocimientos de programación, la estructura de un script en jquery tendria la siguiente estructura:

$(document).ready(function()
{
//Tus sentencias
});

Pueden existir varias estrucutras de este tipo en un documento, puedes crear funciones o declarar variables "globales" ubicandolas fuera de esta estructura; para crear/editar tu código puedes usar el editor de textos de tu preferencia, yo uso el Eclipse con un plugin de Aptana que tiene un depurador de código y te subraya los errores de sintaxis o estructura.

Si quieres usar las funciones ajax que trae jquery, también necesitaras de conocimientos de un lenguaje de programación del lado del servidor, en mi caso PHP.