Existen muchas bibliotecas de JavaScript, además de p5.js y ml5.js.
La biblioteca de JavaScript que exploraremos hoy será jQuery - A fast, small, and feature-rich JavaScript library.
jQuery es una biblioteca que nos simplifica la redacción de instrucciones en JavaScript, sobre todo cuando se busca manipular el DOM y hacer transiciones animadas. Su primera versión estable fue lanzada el año 2006, lo que es anterior a la primera revisión importante del estándar de JavaScript, la ES5 del 2009, con la que se comenzó a simplificar la redacción del mismo lenguaje.
Conviene partir con un ejemplo: En una página web tenemos varios elementos con una clase a la que denominamos "media". Para afectar a todos los elementos que tienen esa clase con un cambio de color desde JavaScript, sin usar bibliotecas, hace algunos años habríamos escrito la siguiente instrucción:
var elementos = Array.from(document.getElementsByClassName("media"));
elementos.forEach(function(elemento){
elemento.style.color="red";
});
Pero con el estándar de JavaScript actual se simplifica un poco:
var elementos = document.querySelectorAll(".media");
elementos.forEach(elemento => elemento.style.color="red");
Ahora bien, usando jQuery, basta con escribir:
$(".media").css("color","red");
Para la primera década del 2000, jQuery ofrecía una simplificación radical en el trabajo con JavaScript. Pero en los años más recientes el mismo lenguaje ha tendido a simplificarse o hacerse más moderno, como veremos líneas más abajo: ¡No conviene perder de vista esta tendencia por prestarle mucha atención a la biblioteca!
Hecha la advertencia, agreguemos un nivel más al ejemplo para poder entender el uso de la biblioteca:
function enrojece() {
$(".media").css("color","red");
}
$("#cambio").on("click", enrojece);
Tal instrucción está abreviando, mediante jQuery, lo siguiente:
function enrojece(){
var elementos = document.querySelectorAll(".media");
elementos.forEach(elemento => elemento.style.color="red");
}
document.querySelector("#cambio").addEventListener("click", enrojece);
Con la última instrucción de jQuery, el cambio de color sobre todos los elementos de clase "media" se hace al presionar el botón de identidad "cambio". Y ya resulta evidente que la clave del uso de jQuery está en la concatenación de un selector y una acción: $(selector).action()
Para la práctica será necesario tener a la mano estas ayudas
- abreviadas: https://htmlcheatsheet.com/jquery/
- detalladas: https://api.jquery.com/
Con tales referencias se podrá avanzar en la edición de este index.html, que consulta a una de las aternativas de Feed en GeoJSON Summary Format que ofrece el Earthquake Hazards Program de la USGS.
La práctica se completa cuando cada estudiante publica, con GitHub Pages, su versión ajustada del sitio web contenido en esta carpeta de repositorio.
La dirección de su página debe ser ingresada en el foro correspondiente a la clase: URL pendiente.
Lo publicado en GitHub Pages e ingresado en el foro, será evaluado como:
-
0.00 → no logrado.
-
0.50 → medianamente logrado.
-
0.75 → logrado.
-
1.00 → completamente logrado.
El puntaje que se obtenga será considerado en la Evaluación Nº2, de la clase-08.