Los selectores propios de JQuery. Seleccionando un conjunto de elementos del DOM: El uso del alias $ cuando trabajamos con JQuery.

Para finalizar la línea de post que habla de la (gran) potencia de selección de la que goza JQuery, solo nos queda ver, los selectores propios de JQuery. Como ya hemos visto en anteriores post, una de las principales características de JQuery es que podemos seleccionar un conjunto de elementos de una forma muy simple, potente y elegante. Esta funcionalidad nos la proporciona la función $ (alias de objeto JQuery), pero no solo puede hacer esto, sino que también nos permite:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Los selectores propios de JQuery.

JQuery, para completar la capacidad de selección de la que goza nos proporciona una serie de selectores propios. Estos selectores nos van a permitir realizar acciones que por su naturaleza o finalidad no las podemos realizar con selectores CSS. Supón que quieres seleccionar todos los checkboxes chequeados. Este tipo de acciones son las que nos permiten realizar los selectores propios de JQuery. Veamos cuales son:

Anuncio publicitario

Selectores basados en la posición. Seleccionando un conjunto de elementos del DOM.

Volvemos a hablar de JQuery y seguimos con los selectores (aunque ya queda poco). Hoy vamos a ver los selectores que se basan en la posición de un objeto dentro del árbol del DOM de la página. Recordar que para poder seleccionar un conjunto de elementos, lo hacemos mediante la función $ (alias del objeto JQuery). Esta función tiene 4 usos principales:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Seleccionando un conjunto de objetos del DOM en función de la posición.

Algunas veces, nos vamos a encontrar con la tesitura de querer seleccionar un conjunto de objetos del DOM, en función de la posición que tienen en la página o en función de la relación que tienen con otros objetos.

Selectores basados en atributos, hijos y contenedores padres. Como seleccionar un conjunto de elementos del DOM

Siguiendo con la línea de post sobre JQuery, hoy vamos a continuar con los selectores. Vamos a ver cómo realizar selecciones en base a atributos, hijos y contenedores, pero antes, recordemos que hace la función $ (el alias del objeto JQuery).

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Como he dicho vamos a seguir hablando sobre cómo seleccionar un conjunto de elementos del DOM. JQuery, para seleccionar elementos lo realiza por medio de las siguientes acciones:

• Selección básica con selectores CSS.
• Selecciones por medio de atributos, hijos y contenedores.
• Selecciones por medio de la posición.
• Selecciones gracias a los selectores que nos proporciona JQuery.

Selecciones por medio de atributos, hijos y contenedores.

Estos selectores, son más avanzados que los basados en los selectores CSS. Aun así, están basados en la siguiente generación de selectores CSS (que ya esta soportada por Firefox, IE7, Safari etc…). Estos selectores incluyen selección en función de atributos (en base a una condición), e hijos (directos) de un objeto padre.

Los selectores basicos de JQuery basados en CSS. Seleccionando un conjunto de elementos del DOM.

Como ya hemos visto anteriormente, el «$» de JQuery, es un alias que nos permite acceder al objeto jQuery.

Este objeto, realiza varias funciones:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Hoy vamos a ver qué posibilidades tenemos para seleccionar conjuntos de elementos del DOM.

Seleccionando un conjunto de elementos del DOM con JQuery.

La capacidad de selección de elementos del DOM, seguramente es la mayor fortaleza de JQuery frente a otras librerías, ya que de una forma muy sencilla y elegante (y potente) podemos ir seleccionando elementos a los cuales, después, les podemos suscribir eventos, podemos operar con ellos etc..

Para seleccionar elementos, JQuery se basa en la sintaxis de las hojas de estilo CSS y además la extiende para realizar selecciones comunes y potentes.

JQuery nos proporciona distintos mecanismos para seleccionar objetos del DOM, y los podemos resumir en:

• Selección básica con selectores CSS.
• Selecciones por medio de atributos, hijos y contenedores.
• Selecciones por medio de la posición.
• Selecciones gracias a los selectores que nos proporciona JQuery.

Selección básica con selectores CSS.

Estableciendo el ciclo de vida de la funcionalidad cliente por medio del evento ready: El uso del alias $ cuando trabajamos con JQuery.

El día 29, Scott Guthrie (y muchos otros bloggers) anuncio la relación de colaboración entre JQuery y Microsoft, siendo esta distribuida con Visual Studio y el ide dotado de intellisense para que el desarrollo sea más sencillo.

Pues bien, hoy vamos a ver algún aspecto básico de esta (fabulosa) librería que seguro que de ahora en adelante nos va a ser tremendamente útil y nos va a facilitar la vida.

La función $.

El “$” de JQuery no viene a ser nada más que un alias para usar el objeto jQuery().

Esta función generalmente vamos a ver que se usa para seleccionar elementos del DOM, pero reamente las funciones que realiza son:

Javascript no intrusivo (Unobtrusive JavaScript). ¿Qué es? y ¿en que se fundamenta?

Tras un pico de trabajo que ha superado a los 14 ocho miles juntos, vuelve el hombre!!!

Cuando estamos construyendo nuestras aplicaciones, una de las máximas que tenemos que tener siempre en mente es hacerlo de un forma lógica y desacoplada, para que estas, en un futuro, sean fácilmente mantenibles y escalables.

Para conseguir esto, por norma general, dividimos nuestras aplicaciones en capas, y en cada una de ellas vamos insertando la funcionalidad de la aplicación.

Trabajar con capas (no me voy a extender mucho en esto), es totalmente beneficioso, ya que nos vamos a encontrar principalmente con:

• Código desacoplado.
• Código escalable.
• Código mantenible.

Y si en el futuro nos vemos en la tesitura, de modificar nuestra app, no vamos a tener que modificar toda la aplicación si no simplemente la capa necesaria.

Bien, cuando trabajamos con la interfaz de usuario, tenemos que hacer lo mismo y ya no simplemente por beneficiarnos de un código desacoplado, escalable y mantenible si no también porque si entendemos documento Web, como un documento que nos permite difundir información (y además que tiene que ser accesible), en esta información no se ha de contemplar asuntos como el look & feel de la página o la funcionalidad cliente.

En el principio de los tiempos, las páginas web, estaban creadas de manera que eran ellas las que definían la estructura del sitio y la información a mostrar, el look & feel de la página (quien no se acuerda de los tag Font), y la funcionalidad cliente. Con el paso del tiempo, han aparecido las hojas de estilo, con lo cual nos han permitido separar (o casi en algunos casos) el look & feel de un sitio web del contenido (si no te crees esto puedes darte una vuelta por css zen garden), pero ¿qué pasa con la funcionalidad cliente?.

¿Qué es el Javascript no intrusivo? y ¿en que se fundamenta?

Combinando scripts para mejorar el rendimiento de nuestras aplicaciones web gracias a la característica CompositeScript del ScriptManager.

Con el Service Pack 1 de Visual Studio 2008, se han incluido muchas novedades como ya vimos, pero para trabajar con Ajax, este Service Pack incluía dos mejoras bastante interesantes:

• Historial con ASP.NET Ajax.
• Soporte para combinar ASP.NET Ajax Scripts.

Hoy veremos cómo combinar scripts y que ganamos al hacerlo.

¿Qué ganamos combinando varios archivos Javascript en uno?

Por razones muy diversas, puede ser recomendable que tengamos nuestra funcionalidad cliente en varios archivos de Javascript. Eso si esta practica también tiene consecuencias de cara al rendimiento de nuestra aplicación.

Actualmente cuando un navegador Web comienza a realizar peticiones para servir el contenido de una página, estas peticiones se van procesando de manera que nunca se estén sirviendo más de 4 peticiones simultaneas, que sucede que cuantas más peticiones, más lento es el proceso de carga de una página.

Así pues, como podemos deducir, hay veces que es preferible tener menos peticiones web y archivos más grandes que muchísimos pequeños y muchas peticiones web.

Como combinar scripts.

Gracias a CompositeScript, nueva funcionalidad del ScriptManager que viene con el Service Pack 1 de Visual Studio 2008 y del Framework 3.5 esto, es sumamente sencillo.

El Control ScriptReferenceProfiler.

Como ya hemos vistos en algunos post anteriores el control ScriptManager de Microsoft se traduce en una serie de archivos javascript que son necesarios para trabajar con Ajax, de forma similar, los controles “extender” (como por ejemplo los del AjaxControlToolKit) que nos permiten añadir funcionalidad Ajax a algunos controles de servidor también añaden algunos archivos javascript.

El control ScriptReferenceProfiler, nos va a mostrar en todo momento que archivos javascript (de “sistema”) se están añadiendo a nuestra página. Esto nos puede resultar muy útil a la hora de “afinar” nuestras aplicaciones web.

Este control se puede descargar de forma gratuita desde el sitio de codeplex.

Para usarlo, tan simple como esto:

Llamando a Web Services por medio del objeto XMLHttpRequest de Javascript.

De un tiempo a esta parte, estamos viendo como Ajax cada vez tiene más protagonismo en nuestras aplicaciones. Las razones son varias pero las que más peso tienen seguramente son:

• La ganancia en usabilidad que proporciona.
• Lo fácil que es trabajar de esta manera.

Actualmente, existen infinidad de Frameworks que nos facilitan la vida a la hora de trabajar con Ajax o mejor dicho con Javascript como Prototype, JQuery, Microsoft Ajax Library o Microsoft Ajax etc… Por lo tanto, es normal que proliferen este tipo de aplicaciones.

La mayoría del trabajo con Ajax pasa por el uso de llamadas asíncronas a un servidor, y esto, aunque los distintos Frameworks lo gestionen de una forma u otra, lo conseguimos gracias al objeto XMLHttpRequest.

Un poco de historia.

La interfaz XMLHttpRequest fue desarrollada por Microsoft y la lanzo con Internet Explorer 5. Esta versión se publicó utilizando un objeto ActiveX, por lo tanto podía ser utilizada en cualquier entorno de desarrollo con soporte de esta tecnología (prácticamente la totalidad de plataformas de desarrollo de Microsoft).

Posteriormente la interfaz se ha ofrecido de manera integrada tanto en Internet Explorer como en otros navegadores (Firefox desde la versión 1.0, Safari desde la 1.2, Opera desde la 8.0 etc.…) de manera que el acceso a ella se realiza por medio de objetos (Javascript, VBScript etc.…) proporcionados por los navegadores.

El 27 de septiembre de 2006, el World Wide Web Consortium presento el primer borrador de una especificación estándar.

El objeto XMLHttpRequest de Javascript.

Javascript, goza de un objeto que nos permite usar la interfaz XMLHttpRequest, así que los Frameworks anteriormente nombrados (y muchos otros), se basan en este objeto para hacer llamadas síncronas o asíncronas al servidor.

Ahora vamos a ir viendo como realizar peticiones con este objeto.

Trabajando con Ajax y las Microsoft Ajax Library (ScriptManager, UpdatePanel etc…) e IFrames: Como resolver el error «Access Denied».

No es extraño, encontrarse con escenarios de integración de aplicaciones (hablamos de aplicaciones Web) donde tenemos que integrar nuestras apps con aplicaciones de terceros.

Una solución muy extendida, es hacerlo con la ayuda de IFrames, donde en el cargamos nuestra aplicación en un sitio de terceros, de manera que la aplicación de terceros (donde integramos la nuestra) está en un servidor y nuestra aplicación esta en otro servidor.

Si nuestra aplicación, está trabajando con Ajax (y con ScriptManager, UpdatePanel etc…), seguramente cuando la ejecutemos en Internet Explorer (solo lo he probado con IE7 aunque tengo sospechas de que ocurrirá también con IE6) vamos a recibir un error cuya descripción es “Access Denied”.

¿Qué es el ScriptManager?

El ScriptManager, es un control de servidor que nos proporciona el Framework que nos va a gestionar  la descarga de los archivos necesarios de JavaScript  para poder trabajar con Ajax de forma sencilla.

Además, el ScriptManager, también inicializa valores del JavaScript etc… Así que tendremos que estar pendientes del uso que estamos haciendo de este para poder replicar su comportamiento.

¿Qué produce el error?

El error, lo produce la función getLocation del archivo MicrosoftAjax.js. El archivo MicrosoftAjax.js es uno de los que nos descarga el ScriptManager.

La función getLocation determina las coordenadas relativas de un pixel de un elemento del DOM respecto a la esquina superior izquierda del navegador. Como los distintos navegadores, esto lo calculan de distinta forma, esta función hace distinción del browser (algunos tienen en cuenta el scroll otros no etc…) que está ejecutando la página (he aquí la razón por la que únicamente falla en Internet Explorer) así que nos encontramos con que la parte de código que calcula las coordenadas para Internet Explorer, no lo hace demasiado bien.

¿Cómo solucionar el error?

Pues bien, dado que tenemos localizada la razón por la que se produce el error, la solución es sencilla, tenemos hacer un wrapper del código que produce el susodicho error.