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.


miércoles, 2 de abril de 2008

JQUERY

Hace algún tiempo que me dedico al desarrollo de páginas web, solía entretenerme escribiendo lineas y lineas de código javascript con el objeto de manipular los elementos HTML y personalizar la página de acuerdo a las necesidades del momento; cambiar colores, validar formularios, reemplazar texto o imágenes, etc. muchas veces el código resultante era extenso y, combinado con mi "particular" modo de programar, ilegible.
Un dia de esos, en los cuales lo único que haces es ir navegando intentando perderte entre las oleadas de páginas y blogs que se te presentan y que no puedes dejar de leer por que link tras link ves cosas que te puedan interesar o simplemente curioseables, encontre Jquery una nueva libreria javascript que segun decian te hacia el javascripting un poco mas llevadero; y es verdad, desde que uso jquery ahorro mucho tiempo y muchas rabietas, si "le pillas la maña", puede ayudarte a manipular tu codigo html de una manera limpia y sencilla; tambien puedes olvidarte de lidiar con tus rutinas ajax para verificar que trabajan en todos los navegadores, jquery las tiene probadas y lo unico que tienes que hacer es usar sus funciones y listo.
La pagina oficial de jquery es http://www.jquery.com/ donde encontraras la libreria y amplia documentacion sobre como manejarlo, ademas de plugins y tutoriales.