outback excel 200 bbq review wellbutrin for bulimia reviews silagra online italia lipitor for sale online joanna vargas vitamin c face wash reviews

En este capítulo vamos a explicar como utilizar JQuery en nuestra web paso a paso, para que podamos hacer nuestros scripts JQuery, y de esta manera comprender los fundamentos de uso de este framework.

Última versión de JQuery

Lo primero que tenemos que hacer es descargarnos la última versión de nuestro framework JQuery desde su página oficial, cuya URL es https://jquery.com. Dan dos posibilidades, una que se denomina production, que es la adecuada para páginas web en producción, la cual está minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio web será mucho más rápida. La otra posibilidad es descargarse la versión denominada development, en la cual, el código está sin comprimir, con lo que ocupa más espacio, pero se podrán leer la implementación de las funciones del framework, el cual puede ser interesante en esta etapa de desarrollo, porque podremos indagar el código de JQuery por si tuviéramos que entender alguna de las partes de nuestro trabajo.

La descarga es un archivo .js el cual contiene el código completo del framework. Hemos de colocar dicho archivo en una carpeta de nuestro servidor para realizar las pruebas oportunas.

También podemos apuntar directamente a la página web del archivo que se encuentra en la web de JQuery, de la siguiente manera en nuestro <head></head>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Crear una página web sencilla

Veamos como quedaría una página web sencilla incluyendo el código JQuery que necesitaremos para trabajar con él

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de página sencilla con JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

</script>
</head>

<body>
</body>
</html>

De esta manera tan sencilla hemos incluido el fichero con todas las funciones JQuery en nuestra web para poder trabajar con él. Quizá el archivo JQuery se llame de otra manera porque sea otra versión del mismo, pero la sintaxis para cargar el archivo en nuestra página sería parecida a la de arriba. Además, si nos fijamos, hemos dejado una etiqueta de apertura y cierre <script> vacía donde incluiremos todo nuestro código Javascript que vamos a utilizar.

Ejecutar código cuando la página haya sido cargada

Este paso es importante entenderlo. Se trata de detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM.

Cuando hacemos ciertas acciones complejas con Javascript, debemos estar seguros que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como puede ser crear elementos, quitarlos, cambiar sus propiedades... Si no esperamos a que la página esté lista para recibir instrucciones, correremos alto riesgo de obtener errores Javascript en la ejecución.

Cuando queremos hacer acciones con Javascript que modifiquen cualquier cosa en nuestra página, hemos de esperar a que la página esté lista para recibir los comandos.

Generalmente, cuando se desea usar Javascript después de cargar la página, si no utilizamos ningún framework, lo lógico es utilizar un código como el siguiente:

window.onload = function() {
alert("cargado");
}

Pero esta sentencia, la cual carga una funcionalidad en el evento onload del objeto window, sólo se ejecutará cuando el navegador haya descargado completamente todos los elementos de la página, lo que incluye imágenes, banners, iframes... lo que puede llevar su tiempo, dependiendo de los elementos que tenga la página y el peso de los mismos.

Pero en realidad, no es necesario esperar dicho tiempo de carga de los elementos de la página para poder ejecutar sentencias Javascript que alteren el DOM de la página. Tan sólo habría que hacerlo cuando el navegador ha recibido el código HTML completo y lo ha procesado al renderizar la página.

Para ello JQuery incluye una manera de hacer acciones justo cuando ya está lista la página, aunque haya elementos que no hayan sido cargados del todo, se hace mediante la siguiente sentencia:

$(document).ready(function(){
// código a ejecutar cuando el DOM está listo para recibir instrucciones
});

Por dar una explicación al código, lo que hacemos ese que con $(document) se obtiene una referencia al documento (la página web) que se está cargando. Después, con el método ready() se define un evento, el cual se lanza al quedar listo el documento para realizar acciones sobre el DOM de la página.

Insertar un manejador de evento a la etiqueta <a> (enlace) que hay en una página

Vamos a ver un ejemplo creando un evento click en el enlace, y que nos va a mostrar un texto cuando se hagan click sobre él. Para crear un evento click sobre un elemento tenemos que invocar al método click() sobre ese elemento, y pasarle como parámetro una función con el código que queremos se ejecute cuando se hace click.

$("a").click(function(evento){
// CÓDIGO A EJECUTARSE CUANDO SE HACE CLICK
});

Como podemos ver, en el código anterior, con $("a") obtenemos una referencia al enlace. En realidad con ello estamos seleccionando todas las etiquetas <a> (enlaces) del documento, aunque en este caso, como sólo tenemos un enlace, nos sirve como ejemplo. Luego con el método click() sobre $("a") estamos definiendo un evento, que se ejecutará cuando se haga click sobre el enlace. A dicho método click() se le pasa una función donde se debe poner el código Javascript que queremos se ejecute cuando se haga click sobre el enlace.

Veamos como queda nuestro código completo, ya colocado dentro del elemento ready del document, para que se asigne cuando la página está lista.

$(document).ready(function(){
$("a").click(function(evento){
alert("Pulsaste el enlace, serás redirigido a Sutil web");
});
});

Recapitulemos

  • $(document).ready(function(){: esta línea sirve para hacer cosas cuando la página está lista para recibir instrucciones JQuery que modifiquen el DOM.
  • $("a").click(function(evento){: con esta línea estamos seleccionando todas las etiquetas <a> del documento, y definiendo un evento click sobre esos elementos.
  • alert("Pulsaste el enlace, serás redirigido a Sutil Web");: con esta línea simplemente mostramos un mensaje de alerta informando al usuario que se ha hecho click sobre el enlace.

Ejemplo completo

Este sería el código completo de lo que acabamos de hacer.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Ejemplo JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
alert("Pulsaste el enlace, serás redirigido a Sutil Web");
});
});
</script>
</head>
<body>
<a href="https://sutilweb.com">Sutil Web</a>
</body>
</html>

Bloquear el comportamiento normal de un enlace

Vamos a ver una pequeña modificación para alterar el comportamiento por defecto de los enlaces. Como se sabe, cuando se pulsa un enlace, nos lleva a la URL. Luego, al hacer click, primero se ejecuta lo que hayamos colocado en el evento click del enlace, y luego el enlace lleva al navegador a una nueva URL.

Este comportamiento se puede bloquear también desde JQuery, añadiendo una llamada al método preventDefault() sobre el evento. Si nos fijamos, la función definida para marcar el comportamiento del evento click sobre el enlace recibía un parámetro. Este parámetro es un manejado de evento. Y tiene sus propios métodos y propiedades, como este preventDefault() que hablamos anteriormente. Veamos su uso:

$(document).ready(function(){
$("a").click(function(evento){
alert("Pulsaste el enlace, pero no vamos a llevarte a Sutil Web");
evento.preventDefault();
});
});

Al invocar a evento.preventDefault() lo que hacemos es no redirigir al enlace de nuestra etiqueta <a>, simplemente ejecuta el código Javascript contenido para el evento click.

Documento básico con JQuery ya cargado por medio de un CDN

El siguiente ejemplo lo podemos usar como base para practicar con JQuery. Se trata de un código sencillo pero con algunos detalles interesantes, como la recomendación de colocar los scripts al final del documento, antes del cierre de la etiqueta <body>, el uso del resumen del 'document.ready' o la utilización de un CDN (esto lo explicaremos a lo largo del curso).

Veamos el código completo para que practiques con él.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Ejemplo con JQuery</title>
</head>
<body>
<a href="https://sutilweb.com">Sutil Web</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$function(){
// NUESTRO CÓDIGO JQUERY
}
</script>
</body>
</html>