Páginas Web: Clase 4

Metodos y Eventos Jquery

jQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a paginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. De acuerdo a un análisis de la Web (realizado en 2017) JQuery es la biblioteca de JavaScript más utilizada, por un amplio margen.

La sintaxis de JQuery está diseñada para facilitar la navegación por un documento, seleccionar elementos DOM, crear animaciones, manejar eventos y desarrollar aplicaciones AJAX. JQuery también proporciona capacidades para que los desarrolladores creen complementos en la parte superior de la biblioteca de JavaScript. Esto permite a los desarrolladores crear abstracciones para interacción y animación de bajo nivel, efectos avanzados y widgets temáticos de alto nivel. El enfoque modular de la biblioteca jQuery permite la creación de poderosas paginas web dinamicas y aplicaciones web.

Vision General:

jQuery, en su núcleo, es una biblioteca de manipulación de Modelo de Objetos del Documento (DOM). El DOM es una representación en estructura de árbol de todos los elementos de una página web. JQuery simplifica la sintaxis para buscar, seleccionar y manipular estos elementos DOM. Por ejemplo, JQuery se puede usar para encontrar un elemento en el documento con una determinada propiedad (por ejemplo, todos los elementos con una etiqueta h1), cambiar uno o más de sus atributos (por ejemplo, color, visibilidad) o hacer que responda a un evento (por ejemplo, un clic del ratón).

jQuery también proporciona un paradigma para el manejo de eventos que va más allá de la selección y manipulación básicas de elementos DOM. La asignación de eventos y la definición de la función de devolución de llamada de eventos se realizan en un solo paso en una única ubicación en el código. JQuery también pretende incorporar otra funcionalidad de JavaScript muy utilizada (por ejemplo, entradas y salidas de fundido cuando se ocultan elementos, animaciones mediante la manipulación de las propiedades de CSS).

Los principios de desarrollo con JQuery son:

La separación de JavaScript y HTML: La biblioteca jQuery proporciona la sintaxis simple para añadir eventos manipuladores a la DOM utilizando JavaScript, en lugar de añadir eventos atributos HTML para llamar a funciones de JavaScript. Por lo tanto, alienta a los desarrolladores a separar completamente el código JavaScript del marcado HTML.
Brevedad y claridad: JQuery promueve la brevedad y la claridad con funciones como funciones "chainable" y nombres de funciones abreviados.
Eliminación de incompatibilidades entre navegadores: Los motores de JavaScript de diferentes navegadores difieren ligeramente, por lo que el código JavaScript que funciona para un navegador puede no funcionar para otro. Al igual que otros kits de herramientas de JavaScript, jQuery maneja todas estas inconsistencias en varios navegadores y proporciona una interfaz consistente que funciona en diferentes navegadores.
Extensibilidad: Los nuevos eventos, elementos y métodos pueden agregarse fácilmente y luego reutilizarse como un complemento.

Historia:

JQuery fue creado originalmente en enero de 2006 en BarCamp NYC por John Resig, influenciado por la anterior biblioteca cssQuery de Dean Edwards. Actualmente lo mantiene un equipo de desarrolladores liderado por Timmy Willison (con el motor de selección de jQuery, Sizzle, liderado por Richard Gibson).

JQuery fue originalmente licenciada bajo el CC BY-SA 2.5 , y se le otorgo la licencia MIT en 2006. A fines de 2006, tenía doble licencia bajo las licencias GPL y MIT. Como esto llevó a cierta confusión, en 2012 se eliminó la GPL y ahora solo está autorizada bajo la licencia MIT.

En 2015, JQuery se utilizó en el 63% del millón de sitios web principales (según BuiltWith) y en el 17% de todos los sitios web de Internet. A partir de junio de 2018, JQuery se usa en el 73% del millón de sitios web más importantes y en el 22,4% de todos los sitios web (según Builtwith).

Desde el año 2019, JQuery se usa en el 79,47% del millón de sitios web más importantes y en el 86% de todos los sitios web (según BuiltWith), siendo la biblioteca de JavaScript más popular hasta el momento.

DOM

¿Que es el DOM?

-Antes que nada, sin embargo, es importante que hablemos de DOM, acrónimo de «Modelo de Objetos del Documento», un interfaz de programación de aplicaciones (API) para trabajar con los lenguajes estructurados, como XML o HTML.

Dicho de otra forma menos enrevesada, DOM es un estándar que permite acceder y manipular los elementos de una página web mediante algún lenguaje de programación web, como JavaScript o su librería jQuery. Bueno, es probable que con esta definición sigamos sin haber entendido un pimiento, pero ahora no importa. Vamos a seguir y luego resultará todo más claro.

Árboles y nodos:

-Un árbol tiene muchas ramas y algunas ramas se dividen a su vez en otras ramas con más ramas y así hasta las hojas. Con un documento web sucede lo mismo. Es un árbol que se va ramificando hasta llegar a los datos. Por ejemplo, una rama principal es el <head> y otra el <body>. Dentro de la rama del <head> está la subrama del <title> y dentro del <body> una montonera de tags que incluyen otros tags que... Para hacernos una idea vamos a pensar en una web muy sencilla, una en la que solo se vean dos párrafos, uno que dice «tempus fugit» y en otro «carpe diem».

En HTML esa página se ramificaría en este árbol:

<html>

<head>

<title>

página de ejemplo

</title>

</head>

<body>

<p> Tempus fuggit </p>

<p>Carpe diem</p>

</body>

</html>

Si lo pusiéramos en un esquema quedaría algo así:

1. documento (html)

1.1. Head

1.1.1. Title

1.2. Body

1.2.1. Párrafo 1

1.2.2. Párrafo 2

Esas ramas son lo que en DOM se entiende por nodos. El párrafo 1 y el 2 son dos nodos hermanos, pues no existe jerarquía entre ellos y ambos depende del mismo nodo padre, que es body.

Hay varios tipos de nodos, pero de momento solo es importante que conozcamos dos:

Document: es el nodo raíz del documento DOM, el padre de todos los nodos o, dicho de forma más friki, el nodo para dominarlos a todos.
Element (elementos): en HTML, son las etiquetas, ya sean pares de apertura y cierre —<p></p>,<b></b>,<quote></quote>— o las que funcionan de forma individual, como <img>, <meta>, etcétera.

Como sabemos, las etiquetas de HTML, que de aquí en adelante vamos a llamar elementos, pueden incluir distintos atributos. Por ejemplo, en el elemento imagen <img> se pueden especificar el atributo alto y el atributo ancho.

<img src="imagen.jpg" height="100" width="100">

El ancho y el alto no son atributos válidos para cualquier elemento. Por ejemplo, no se pueden aplicar para el elemento <a>, con el que se marca un enlace. Sin embargo, hay un tipo especial de atributos, llamados «globales», que se pueden incluir en todos los elementos. De estos, hay dos que se usan con frecuencia:

id: identifica de forma única un elemento. Es como ponerle nombre y apellidos. Solo puede haber un elemento con ese identificador.
class: define la clase a la que pertenece un elemento.

Y lo bueno es que se puede acceder y manipular cada elemento a partir de sus atributos. Así, se podría programar un script para que, al pulsarse un botón, todos los elementos de determinada clase se hicieran visibles, lo que permitiría hacer un menú desplegable, o para ampliar una imagen, para desplazarla... incluso para eliminar o añadir nodos.

De hecho, hay varias funciones de JavaScript muy habituales en cualquier página dinámica que permiten seleccionar los elementos por tipo, id o clase:

<script>

// Seleccionamos todos los elementos del tipo <p>

document.getElementsByTagName("p");

// Selecciona el elemento cuyo id se llama monglonfillos

document.getElementById("monglonfillos");

// Seleccionamos todos los elementos cuya clase es "rejurti"

document.getElementsByClassName("rejurti");

</script>

A continuacion una ficha que nos dieron en clase, con su resolucion: