Detalles del Ejemplo jQuery
Si llevamos la cuenta sabremos que no tenemos ningún paréntesis ni corchete pendiente de cerrar. Se abrió uno tras el dolar, pero ya se cerró, de modo que estamos a cero. Pero después de la palabra ready hemos abierto uno y tendremos que cerrarlo en algún momento.
Dentro de los paréntesis de ready, encontramos la palabra function que además abre y cierra sus paréntesis sin nada dentro. Eso significa que aún debemos cerrar alguna vez el paréntesis del ready, correcto? Acabamos de ver uno de cierre, pero corresponde al que abrió la palabra function.
Y seguidamente nos encontramos con un corchete de apertura {. Tenemos pendiente por tanto cerrar un parentesis y luego un corchete. Esto es un rollo, pero si lo entiendes no tendrás que analizar tanto. Pero como no se cuál es tu nivel, prefiero remarcarlo un poco. Más adelante no te daré tanto la bara, je je je.
Entre los corchetes encontramos otra selección de elemento. En este caso se usa el dolar para seleccionar "a". Y qué es a? Cómo? Que no lo sabes? mmm... Claro! es la etiqueta que se usa para colocar enlaces en Html! Bien por tí! De modo que estamos seleccionando los enlaces. Tras esa selección, que como ves ha cerrado su paréntesis como debe ser, encontramos el punto y el método click. Podríamos decir con lo que llevamos visto, que (tras cargarse todo el Html de la página), en todos los enlaces (que tienen la etiqueta <a>) si hacemos click sobre ellos, ocurrirá lo que se defina entre los corchetes que le siguen a ese trozo de código tan raro.
Y qué es lo que tenemos entre los corchetes? Tenemos la línea siguiente:
Esa línea es lo que queremos que pase cuando se haga clic en un enlace, correcto? Alert lo que hace es mostrar una ventanita de aviso en el navegador, indicando el texto que escribamos entre sus paréntesis y entre dobles comillas.
Aunque para este primer ejemplo solo vamos a querer que se ejecute esa sentencia u orden, podríamos poner un montón más. Cada una de esas ordenes o sentencias hay que terminarla con un punto y coma, para no mezclarlas, oki?
Pues colocado ese punto y coma, solo nos queda pendiente colocar el corchete de cierre que llevábamos pendiente, el paréntesis de cierre del ready y para terminar, otro punto y coma.
{
$("a").click(function(evento)
{
alert("Ha sido todo un éxito!");
});
});
No te preocupes por tantos símbolos. En cuanto tengamos unos cuantos ejemplos hechos verás como te vas familiarizando con esta forma de escribir. Si todo ha salido bien, escribimos eso en el archivo funciones.js, lo guardamos y hacemos doble clic en (o recargamos si tenemos abierto) el index.html, debería aparecer la misma web sencilla de antes, pero....
Pero ahora, si hacemos un clic sobre cualquiera de los dos enlaces existentes, nos aparecerá esa ventana mágica con el texto "Ha sido todo un éxito!". Te salió! guau! Te saliste!! je je je.
Te das cuenta? con un par de líneas de código (bien raro, eso si es verdad) hemos conseguido algo que con Html y Css solamente nos habría costado horrores! Por no hablar del ahorro de tiempo diseñando y dando estilos a la ventanita que aparece, que ya está hecha y terminada! O el trabajo que nos habría costado colocar en ella el botoncito de Aceptar, etc, etc.
Si si, se que es mucho rollo para este resultado tan tan pobretón, je je je, pero es la base para entender esta nueva tecnología. Cuando dominemos un poco más, podrás hacer cualquier cosa que se te ocurra con tu página web en cuanto a movimientos, carga de formularios y un sin fin de cosas, ya lo verás.
Tras pulsar el botón de esa nueva ventanita se vuelve a ver la misma página de la que partíamos. Sabes ya por qué? Normal, porque en la ruta del archivo o mejor dicho, entre las comillas donde se escribe la ruta, hemos escrito una almohadilla "#". Eso es como anular el enlace, no te dirige a ninguna parte.
Introdución al jQuery:
