En el artículo "JQuery, descubriendo lo que puede hacer por ti" he desarrollado como cómo crear una página web simple con una etiqueta <script> que llama, o incluye, la librería jQuery, ahora voy a explicar cómo puedes crear tu primer efecto con está potente librería. En esta parte, vas a agregar una imagen a la página de pruebas y a agregar el código jQuery que muestra información sobre la imagen en un cuadro de alerta.
No es el más emocionante uso de jQuery (jQ), pero demuestra las técnicas básicas que usan con está librería.
Añadiendo una imagen a la página HTML
Para agregar una imagen a tu página HTML:
1. Localiza un pequeño archivo de imagen .gif o .png y guárdalo en el directorio de “imagenes” creado anteriormente dentro del directorio webtest. Intenta encontrar una que no sea más grande que 300x300 píxeles.
Yo voy a usar la ventana de Windows 10 y el nombre del archivo es win10.png.
2. Abre test.html en un editor de texto.
3. Agrega el siguiente código después de la línea <p>Esta es mi página para testear</ p> en test.html:
<img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen.">
Asegúrate de cambiar win10.png para que coincida con el archivo que estás utilizando.
Mira de cerca la etiqueta html <img>. Contiene fragmentos de código conocidos como atributos. Los atributos son src, height, width y alt. Cada uno de estos contienen información sobre la imagen. El atributo src contiene el nombre de archivo y la ubicación de la imagen. Los atributos height y width contienen las dimensiones de la imagen en píxeles. El atributo alt es texto adicional para mostrar cuando la imagen no puede se mostrará.
4. Guarda tu archivo test.html pero déjalo abierto en tu editor de texto.
Si ves tu página en un navegador web ahora, el resultado será algo parecido a lo que puedes ver en la Figura 1.
Figura 1
Agregando código jQuery
Estás listo para agregar algún código jQ. En los siguientes pasos, agregaras código que muestra información sobre la imagen:
1. Si test.html aún no está abierto en su editor de texto, ábrelo.
2. Busque la línea de código <script> que agregaste y que llama a jQ.
3. Debajo de esa línea de código, después de la etiqueta </script>, agrega el siguiente código:
<script type="text/javascript">
$(document).ready(function(){
//Hacer algo aquí
});
</script>
Verás este código una y otra vez a lo largo de los ejemplos de jQ. El código $(document).ready llama a una función jQ que le dice al navegador que cuando una cierta porción de la página ha terminado de cargarse, haga algo. Aún necesitas decirle qué hacer.
Cuando ve el signo de dólar en el código, significa que el código está interactuando con jQ llamando a una función jQ. El carácter $ es un suplente (alias) para la palabra de código jQuery.
La línea //Hacer algo aquí es un comentario. Las dos barras oblicuas le dicen al navegador web que ignore el texto que le sigue en la misma línea. A menudo es útil poner comentarios en tu código para documentar lo que todavía necesita hacer o lo que ha hecho.
4. Reemplaza la línea //Hacer algo aquí con el siguiente código:
alert(jQuery('img').attr('alt'));
¿Recuerdas el carácter $? La línea de código anterior también se puede escribir así:
alert($('img').attr('alt'));
5. Guarda tu archivo y pruébalo en un navegador web.
La línea de código que agregaste le dice al navegador que abra un cuadro de alerta de JavaScript cuando la página está lista. La Figura 2 muestra este cuadro de alerta. La alerta muestra el texto que está en la etiqueta de la imagen siguiendo el atributo alt.
La Figura 2 también muestra el código fuente completo para test.html.
Figura 2
6. Cambia el código de alerta para mostrar la altura de la imagen modificándolo de la siguiente manera.
alert($('img').attr('height'));
7. Guarda test.html y pruébalo en un navegador web.
Ahora verás la altura de la imagen que se muestra en el cuadro de alerta.
Puede usar comillas simples o dobles alrededor de elementos y texto en las funciones jQuery, pero las mejores prácticas es usar siempre comillas simples. Las doble comillas se usan mejor en código HTML.
Por ejemplo, esta es una función jQuery con comillas simples:
alert($('img').attr('width'));
y este es código HTML con comillas dobles:
<img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen.">
Cómo funciona jQuery con tu página web
En su aspecto más básico, una página web contiene una Etiqueta <script> que incluye la librería jQuery y un bloque <script> de código JavaScript que contiene las llamadas a funciones de la librería jQuery.
Usar el código de JavaScript para llamar a las funciones jQuery es un poco confuso al principio, pero no te preocupes, los puntos importantes es tener una idea clara de cómo el código que has usado en el ejemplo anterior funciona y qué piezas participan.
Para que tengas claro cómo funciona lo explico línea por línea.
✓ <! Doctype ...>: Este elemento dice el navegador web la versión de HTML que estas utilizando en el código que sigue. Debieras siempre incluirlo al comienzo de cualquier página HTML que crees, en ejemplo he utilizado la sistaxis para HTML 5.
✓ <html>: Este elemento determina donde comienza la página HTML.
✓ <head>: Este elemento designa el comienzo de la sección de la cabeza. Esta sección generalmente contiene el título y cualquier script.
✓ <title>Mi página de prueba</title>: Esta línea muestra el título de la página.
✓ <script src="/js/jquery-3.3.1.min.js "> </script>: Esta línea proporciona la ubicación de la librería jQuery.
✓ <script type = "text/javascript ">: Esta etiqueta de script le dice al navegador que todo lo que sigue es un código JavaScript
✓ $(document).ready(function(){: El signo de dólar es un alias para la función jQuery. La función espera a que la página web este cargada y luego el código contenido dentro de ella se ejecuta.
✓ alert(jQuery('img').attr('height'));: La función de alerta abre un cuadro de alerta emergente. Esta función devuelve el valor de cualquier atributo que está entre comillas, en este caso, la altura. Observa que img precede a la función attr. En resumen, esta función significa, "busca todos los elementos img que encuentres en el código HTML, y devuelve el valor del atributo de altura del primero ".
✓ }) ;: Esta llave y paréntesis está cerrando $(document).ready(function(){
✓ </script>: Esta etiqueta cierra la etiqueta <script> y finaliza el bloque de código JavaScript.
✓ </head>: Esta etiqueta cierra la sección de la cabeza del HTML.
✓ <body>: Esta etiqueta comienza la sección body, donde el contenido principal consiste en código HTML, texto e imágenes.
✓ <p>Esta es mi página para testear.</p>: Esta línea es una línea de texto que aparece en la página.
✓ <img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen."> : Este elemento img muestra una imagen con varios atributos.
✓ </body>: Esta etiqueta finaliza el contenido sección body de la página.
✓ </html>: Esta etiqueta finaliza la página HTML.
