(3) Hola mundo con jquery

6 septiembre , 2008  |  General, Principiantes, Tutorial jquery  |  3 Comentarios

Una vez dados los pasos previos, ya podemos empezar a hacer cosas un poco mas interesantes. En primer lugar y como no podía ser de otra forma, veremos el típico “hola mundo”.

Una de las funcionalidades más interesantes de jquery, es lo mucho que facilita interactuar con los elementos de nuestras páginas webs. Vamos a ver un ejemplo en el que usamos un botón y el evento de hacer click en él. Veamos el código y lo explicaremos paso a paso después:

[html]

[/html]

Para ver el resultado pulsa aquí

En primer lugar, hemos creado un botón html en nuestro documento html. Después creamos nuestro código jquery el cual tiene la siguiente sintaxis: $("elemento").evento(parametro)

Como elemento ponemos nuestro botón, y como evento "click". Como parámetro, podemos poner una función, que será la encargada de mostrar el mensaje por pantalla.

Con este simple ejemplo ya vemos el abanico de posibilidades que se nos abre con este framework. En el siguiente post, vamos a ver todos los eventos que hay con algunos ejemplos

(2) Evento ready en jquery

5 septiembre , 2008  |  Principiantes, Tutorial jquery  |  5 Comentarios

En este segundo post todavía no veremos en acción a jquery, pero hay que explicar una cosita un poco antes.

Para asegurarnos de que todo va a funcionar correctamente, debemos esperar que se carguen ciertas cosas antes. Para eso usaremos el evento ready, el cual chequea a la espera de que llegue ese momento. El problema que anteriormente nos encontrábamos es que había que esperar a que todos los elementos de la página estuvieran cargados (imágenes, banner…), lo cual no era lo más óptimo. Con este evento sólo habrá que esperar a que se cargue la estructura de la página.

Si has programado antes en javascript, todo esto te sonará, pero si no es el caso sólo tienes que saber que nuestro código deberá ir siempre en el sitio indicado a continuación:

[html]

[/html]

(1) Descargar y enlazar jquery.js

5 septiembre , 2008  |  Principiantes, Tutorial jquery  |  3 Comentarios

Lo primero que tenemos que hacer para empezar a usar jquery, es descargarnos la librería desde aquí. Podemos descargar el archivo comprimido o el .js directamente.

Una vez tenemos el archivo jquery.js, lo situamos en la misma carpeta donde vayamos a tener nuestro archivo .html para después podere importarlo desde dicho documento. Nuestro primero código quedará así:

[html]

Importar archivo jquery.js

[/html]

Como dije en el anterior post del tutorial, vamos a ir paso a paso, y aunque esto puede ser aburrido para muchos, habrá gente que necesite dar este primer paso. La acción vendrá en breve.

Comienzo del tutorial de jquery

2 septiembre , 2008  |  Tutorial jquery  |  3 Comentarios

jquery es un framework de javascript que nos facilitará la interacción con los elementos de una página html, a añadir efectos de forma rápida y sencilla a nuestras webs, y a interactuar con AJAX.

No soy ni mucho menos un experto en esta tecnología, pero voy a usarla bastante a partir de ahora, así que me he propuesto ir posteando todas las cosas que vaya aprendiendo, intentando llevar un orden lógico de aprendizaje, que por un lado me sea útil para repasar lo que voy aprendiendo y al mismo tiempo pueda ser útil para los que en un momento determinado comiencen a usar esta tecnología.

Para poder seguir el tutorial, habrá que saber un mínimo de html y también de javascript.

Si a alguien le surgen dudas, estaría bien que las propusiera en forma de comentario, y entre todos vayamos resolviéndolas para así poder aprender  nuevas cosas.