1 Bienvenido/a
+1 Bienvenido/a
jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web debería de conocer. El propósito de este libro es proveer un resumen de la biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje. El libro fue diseñado para ser utilizado como material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.
La modalidad de trabajo es la siguiente: En primer lugar se dedicará tiempo a comprender un concepto para luego realizar un ejercicio relacionado. Algunos de los ejercicios pueden llegar a ser triviales, mientras que otros no tanto. El objetivo es aprender a resolver de manera fácil lo que normalmente se resolvería con jQuery. Las soluciones a todos los ejercicios están incluidas en el mismo material de aprendizaje.
1.1 Obtener el Material de Aprendizaje
+1.1 Obtener el Material de Aprendizaje
El material de aprendizaje y el código fuente de los ejemplos que se utilizan en el libro están hospedados en un repositorio de Github. Desde allí es posible descargar un archivo .zip o .tar con el código para utilizar en un servidor web.
Si usted suele utilizar Git, es bienvenido de clonar o modificar el repositorio.
1.2 Software
+1.2 Software
Para trabajar con los contenidos del libro, necesitará las siguientes herramientas:
- @@ -306,7 +306,7 @@
1.2 Software<
1.3 Añadir JavaScript a una Página
+1.3 Añadir JavaScript a una Página
Existen dos formas de insertar código JavaScript dentro de una página: escribiendo código en la misma (en ingles inline) o a través de un archivo externo utilizando la etiqueta script. El orden en el cual se incluye el código es importante: un código que depende de otro debe ser incluido después del que referencia (Ejemplo: Si la función B depende de A, el orden debe ser A,B y no B,A).
Para mejorar el rendimiento de la página, el código JavaScript debe ser incluido al final del HTML. Además, cuando se trabaja en un ambiente de producción con múltiples archivos JavaScript, éstos deben ser combinados en un solo archivo.
Ejemplo de código JavaScript en línea
@@ -317,7 +317,7 @@<script src='/js/jquery.js'></script>
1.4 Depuración del Código JavaScript
+1.4 Depuración del Código JavaScript
La utilización de una herramienta de depuración es esencial para trabajar con JavaScript. Firefox provee un depurador a través de la extensión Firebug; mientras que Safari y Chrome ya traen uno integrado.
Cada depurador ofrece:
-
@@ -335,7 +335,7 @@
- 1.5 Ejercicios
+ 1.5 Ejercicios
La mayoría de los capítulos concluyen con uno o más ejercicios. En algunos, podrá trabajar directamente con Firebug; en otros deberá escribir código JavaScript luego de incluir la biblioteca jQuery en el documento.
Aún así, para completar ciertos ejercicios, necesitará consultar la documentación oficial de jQuery. Aprender a encontrar respuestas, es una parte importante del proceso de aprendizaje.
Estas son algunas sugerencias para hacer frente a los problemas:
@@ -348,7 +348,7 @@ 1.5 Ejercic
Podrá encontrar en la carpeta /ejercicios/soluciones ejemplos de soluciones a los ejercicios del libro.
Podrá encontrar en la carpeta /ejercicios/soluciones ejemplos de soluciones a los ejercicios del libro.
1.6 Convenciones Utilizadas en el Libro
+1.6 Convenciones Utilizadas en el Libro
Existen una serie de convenciones utilizadas en el libro:
Los métodos que pueden ser llamados desde el objeto jQuery, serán referenciados como $.fn.nombreDelMetodo. Los métodos que existen en el espacio de nombres (en inglés namespace) de jQuery pero que no pueden ser llamados desde el objeto jQuery serán referenciados como $.nombreDelMetodo. Si esto no significa mucho para usted, no se preocupe — será más claro a medida que vaya progresando en el libro.
Ejemplo de un código
@@ -360,7 +360,7 @@
- 1.7 Notas de la Traducción
+ 1.7 Notas de la Traducción
Debido a que el material tiene como fin el aprendizaje y la enseñanza, el mismo se encuentra traducido a español formal (usted).
Muchos conceptos técnicos son nombrados en su versión traducida a español. Sin embargo, para tener de referencia, también se explica como es llamado en inglés.
1.7
Debido a que el material tiene como fin el aprendizaje y la enseñanza, el mismo se encuentra traducido a español formal (usted).
Muchos conceptos técnicos son nombrados en su versión traducida a español. Sin embargo, para tener de referencia, también se explica como es llamado en inglés.
1.7
1.8 Material de Referencia
+1.8 Material de Referencia
Existe una gran cantidad de artículos que se ocupan de algún aspecto de jQuery. Algunos son excelentes pero otros, francamente, son erróneos. Cuando lea un artículo sobre jQuery, este seguro que se está abarcando la misma versión de la biblioteca que está utilizando, y resístase a la tentación de copiar y pegar el código — tómese un tiempo para poder entenderlo.
A continuación se listan una serie de excelentes recursos para utilizar durante el aprendizaje. El más importante de todos es el código fuente de jQuery, el cual contiene (en su formato sin comprimir) una completa documentación a través de comentarios. La biblioteca no es una caja negra — el entendimiento de ella irá incrementándose exponencialmente si la revisa de vez en cuando — y es muy recomendable que la guarde en los favoritos de su navegador para tenerla como guía de referencia.
-
@@ -381,15 +381,15 @@
1.8
2 Conceptos Básicos de JavaScript
+2 Conceptos Básicos de JavaScript
2.1 Introducción
+2.1 Introducción
jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo.
El capítulo está orientado a personas sin experiencia en el lenguaje, abarcando conceptos básicos y problemas frecuentes que pueden presentarse al trabajar con el mismo. Por otro lado, la sección puede ser beneficiosa para quienes utilicen otros lenguajes de programación para entender las peculiaridades de JavaScript.
Si usted esta interesado en aprender el lenguaje más en profundidad, puede leer el libro JavaScript: The Good Parts escrito por Douglas Crockford.
2.2 Sintaxis Básica
+2.2 Sintaxis Básica
Comprensión de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis básicas de JavaScript.
Declaración simple de variable
var foo = 'hola mundo';2.2 S };
2.3 Operadores
+2.3 Operadores
2.3.1 Operadores Básicos
+2.3.1 Operadores Básicos
Los operadores básicos permiten manipular valores.
Concatenación
var foo = 'hola';
@@ -423,7 +423,7 @@ 2.3.1var k = i++; // incrementación posterior: k es igual a 2; i es igual a 3
2.3.2 Operaciones con Números y Cadenas de Caracteres
+2.3.2 Operaciones con Números y Cadenas de Caracteres
En JavaScript, las operaciones con números y cadenas de caracteres (en inglés strings) pueden ocasionar resultados no esperados.
Suma vs. concatenación
var foo = 1;
@@ -441,7 +441,7 @@ console.log(foo + +bar);
2.3.3 Operadores Lógicos
+2.3.3 Operadores Lógicos
Los operadores lógicos permiten evaluar una serie de operandos utilizando operaciones AND y OR.
Operadores lógicos AND y OR
var foo = 1;
@@ -470,7 +470,7 @@ 2.3.3Este estilo de declaración es muy elegante y conciso; pero puede ser difícil para leer (sobretodo para principiantes). Por eso se explícita, para reconocerlo cuando este leyendo código. Sin embargo su utilización no es recomendable a menos que esté cómodo con el concepto y su comportamiento.
2.3.4 Operadores de Comparación
+2.3.4 Operadores de Comparación
Los operadores de comparación permiten comprobar si determinados valores son equivalentes o idénticos.
Operadores de Comparación
var foo = 1;
@@ -492,7 +492,7 @@ 2.
2.4 Código Condicional
+2.4 Código Condicional
A veces se desea ejecutar un bloque de código bajo ciertas condiciones. Las estructuras de control de flujo — a través de la utilización de las declaraciones if y else permiten hacerlo.
Control del flujo
var foo = true;
@@ -518,7 +518,7 @@ 2.4
Debe tener en cuenta de no definir funciones con el mismo nombre múltiples veces dentro de declaraciones if/else, ya que puede obtener resultados no esperados.
- 2.4.1 Elementos Verdaderos y Falsos
+ 2.4.1 Elementos Verdaderos y Falsos
Para controlar el flujo adecuadamente, es importante entender qué tipos de valores son “verdaderos” y cuales “falsos”. A veces, algunos valores pueden parecer una cosa pero al final terminan siendo otra.
Valores que devuelven verdadero (true)
'0';
@@ -534,7 +534,7 @@ undefined; // tenga cuidado -- indefinido (undefined) puede ser redefinido
- 2.4.2 Variables Condicionales Utilizando el Operador Ternario
+ 2.4.2 Variables Condicionales Utilizando el Operador Ternario
A veces se desea establecer el valor de una variable dependiendo de cierta condición. Para hacerlo se puede utilizar una declaración if/else, sin embargo en muchos casos es más conveniente utilizar el operador ternario. [Definición: El operador ternario evalúa una condición; si la condición es verdadera, devuelve cierto valor, caso contrario devuelve un valor diferente.]
El operador ternario
// establecer a foo igual a 1 si bar es verdadero;
@@ -543,7 +543,7 @@ El operador ternario puede ser utilizado sin devolver un valor a la variable, sin embargo este uso generalmente es desaprobado.
- 2.4.3 Declaración Switch
+ 2.4.3 Declaración Switch
En lugar de utilizar una serie de declaraciones if/else/else if/else, a veces puede ser útil la utilización de la declaración switch. [Definición: La declaración Switch evalúa el valor de una variable o expresión, y ejecuta diferentes bloques de código dependiendo de ese valor.]
Una declaración Switch
switch (foo) {
@@ -585,16 +585,16 @@ 2.4.3
- 2.5 Bucles
+ 2.5 Bucles
Los bucles (en inglés loops) permiten ejecutar un bloque de código un determinado número de veces.
Bucles
// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'
for (var i=0; i<5; i++) {
console.log('intento ' + i);
}
- *Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha variable quede dentro del “alcance” (en inglés scope) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.*
+ Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha variable quede dentro del “alcance” (en inglés scope) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.
- 2.5.1 Bucles Utilizando For
+ 2.5.1 Bucles Utilizando For
Un bucle utilizando for se compone de cuatro estados y posee la siguiente estructura:
for ([expresiónInicial]; [condición]; [incrementoDeLaExpresión])
[cuerpo]
@@ -611,7 +611,7 @@ 2.5.1
- 2.5.2 Bucles Utilizando While
+ 2.5.2 Bucles Utilizando While
Un bucle utilizando while es similar a una declaración condicional if, excepto que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea falsa.
while ([condición]) [cuerpo]
Un típico bucle utilizando while
@@ -631,7 +631,7 @@ 2.5.2
Se comienza en -1 y luego se utiliza la incrementación previa (++i).
- 2.5.3 Bucles Utilizando Do-while
+ 2.5.3 Bucles Utilizando Do-while
Este bucle es exactamente igual que el bucle utilizando while excepto que el cuerpo es ejecutado al menos una vez antes que la condición sea evaluada.
do [cuerpo] while ([condición])
Un bucle utilizando do-while
@@ -646,7 +646,7 @@ 2.
Este tipo de bucles son bastantes atípicos ya que en pocas ocasiones se necesita un bucle que se ejecute al menos una vez. De cualquier forma debe estar al tanto de ellos.
- 2.5.4 Break y Continue
+ 2.5.4 Break y Continue
Usualmente, el fin de la ejecución de un bucle resultará cuando la condición no siga evaluando un valor verdadero, sin embargo también es posible parar un bucle utilizando la declaración break dentro del cuerpo.
Detener un bucle con break
for (var i = 0; i < 10; i++) {
@@ -670,7 +670,7 @@ 2.5.4
- 2.6 Palabras Reservadas
+ 2.6 Palabras Reservadas
JavaScript posee un número de “palabras reservadas”, o palabras que son especiales dentro del mismo lenguaje. Debe utilizar estas palabras cuando las necesite para su uso específico.
abstract2.6
- 2.7 Vectores
+ 2.7 Vectores
Los vectores (en español también llamados matrices o arreglos y en inglés arrays) son listas de valores con índice-cero (en inglés zero-index), es decir, que el primer elemento del vector está en el índice 0. Éstos son una forma práctica de almacenar un conjunto de datos relacionados (como cadenas de caracteres), aunque en realidad, un vector puede incluir múltiples tipos de datos, incluso otros vectores.
Un vector simple
var myArray = [ 'hola', 'mundo' ];
@@ -755,7 +755,7 @@ 2.7 Vectores<
var mySplit = myString.split(''); // [ 'h', 'o', 'l', 'a' ]
- 2.8 Objetos
+ 2.8 Objetos
Los objetos son elementos que pueden contener cero o más conjuntos de pares de nombres claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o número válido. El valor puede ser cualquier tipo de valor: un número, una cadena, un vector, una función, incluso otro objeto.
[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un método del objeto.] De lo contrario, se los llama propiedades.
Curiosamente, en JavaScript, casi todo es un objeto — vectores, funciones, números, incluso cadenas — y todos poseen propiedades y métodos.
@@ -785,7 +785,7 @@ 2.8 ObjetosLos objetos literales pueden ser muy útiles para la organización del código, para más información puede leer el artículo (en inglés) Using Objects to Organize Your Code por Rebecca Murphey.
- 2.9 Funciones
+ 2.9 Funciones
Las funciones contienen bloques de código que se ejecutaran repetidamente. A las mismas se le pueden pasar argumentos, y opcionalmente la función puede devolver un valor.
Las funciones pueden ser creadas de varias formas:
Declaración de una función
@@ -794,7 +794,7 @@ 2.9 Funcione
var foo = function() { /* hacer algo */ }
Es preferible el método de función nombrada debido a algunas profundas razones técnicas. Igualmente, es probable encontrar a los dos métodos cuando se revise código JavaScript.
- 2.9.1 Utilización de Funciones
+ 2.9.1 Utilización de Funciones
Una función simple
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
@@ -822,7 +822,7 @@ 2.9
greeting(); // se muestra en la consola 'Hola, Rebecca'
- 2.9.2 Funciones Anónimas Autoejecutables
+ 2.9.2 Funciones Anónimas Autoejecutables
Un patrón común en JavaScript son las funciones anónimas autoejecutables. Este patrón consiste en crear una expresión de función e inmediatamente ejecutarla. El mismo es muy útil para casos en que no se desea intervenir espacios de nombres globales, debido a que ninguna variable declarada dentro de la función es visible desde afuera.
Función anónima autoejecutable
(function(){
@@ -833,7 +833,7 @@ console.log(foo); // indefinido (undefined)
- 2.9.3 Funciones como Argumentos
+ 2.9.3 Funciones como Argumentos
En JavaScript, las funciones son “ciudadanos de primera clase” — pueden ser asignadas a variables o pasadas a otras funciones como argumentos. En jQuery, pasar funciones como argumentos es una práctica muy común.
Pasar una función anónima como un argumento
var myFn = function(fn) {
@@ -856,7 +856,7 @@ 2.9
- 2.10 Determinación del Tipo de Variable
+ 2.10 Determinación del Tipo de Variable
JavaScript ofrece una manera de poder comprobar el “tipo” (en inglés type) de una variable. Sin embargo, el resultado puede ser confuso — por ejemplo, el tipo de un vector es “object”.
Por eso, es una práctica común utilizar el operador typeof cuando se trata de determinar el tipo de un valor específico.
Determinar el tipo en diferentes variables
@@ -896,7 +896,7 @@
- 2.11 La palabra clave this
+ 2.11 La palabra clave this
En JavaScript, así como en la mayoría de los lenguajes de programación orientados a objetos, this es una palabra clave especial que hace referencia al objeto en donde el método está siendo invocado. El valor de this es determinado utilizando una serie de simples pasos:
- Si la función es invocada utilizando Function.call o Function.apply,
this tendrá el valor del primer argumento pasado al método. Si el argumento es nulo (null) o indefinido (undefined), this hará referencia el objeto global (el objeto window);
@@ -988,7 +988,7 @@ 2.11obj.sayHello(); // registra 'Hola, mi nombre es Rebecca'
- 2.12 Alcance
+ 2.12 Alcance
El “alcance” (en inglés scope) se refiere a las variables que están disponibles en un bloque de código en un tiempo determinado. La falta de comprensión de este concepto puede llevar a una frustrante experiencia de depuración.
Cuando una variable es declarada dentro de una función utilizando la palabra clave var, ésta únicamente esta disponible para el código dentro de la función — todo el código fuera de dicha función no puede acceder a la variable. Por otro lado, las funciones definidas dentro de la función podrán acceder a la variable declarada.
Las variables que son declaradas dentro de la función sin la palabra clave var no quedan dentro del ámbito de la misma función — JavaScript buscará el lugar en donde la variable fue previamente declarada, y en caso de no haber sido declarada, es definida dentro del alcance global, lo cual puede ocasionar consecuencias inesperadas;
@@ -1055,7 +1055,7 @@ 2.12 Alcance// por lo cual se mostrará un error
- 2.13 Clausuras
+ 2.13 Clausuras
Las clausuras (en inglés closures) son una extensión del concepto de alcance (scope) — funciones que tienen acceso a las variables que están disponibles dentro del ámbito en donde se creó la función. Si este concepto es confuso, no debe preocuparse: se entiende mejor a través de ejemplos.
En el ejemplo 2.47 se muestra la forma en que funciones tienen acceso para cambiar el valor de las variables. El mismo comportamiento sucede en funciones creadas dentro de bucles — la función “observa” el cambio en la variable, incluso después de que la función sea definida, resultando que en todos los clicks aparezca una ventana de alerta mostrando el valor 5.
¿Cómo establecer el valor de i?
@@ -1105,9 +1105,9 @@ 2.13 Clausur
3 Conceptos Básicos de jQuery
+3 Conceptos Básicos de jQuery
3.1 $(document).ready()
+3.1 $(document).ready()
No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.
El bloque $(document).ready()
$(document).ready(function() {
@@ -1128,8 +1128,8 @@ 3.1 $(d
$(document).ready(readyFn);
3.2 Selección de Elementos
-El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca.
+3.2 Selección de Elementos
+El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca.
A continuación se muestran algunas técnicas comunes para la selección de elementos:
Selección de elementos en base a su ID
$('#myId'); // notar que los IDs deben ser únicos por página3.2Estos tipos de selectores pueden resultar útiles pero también ser muy lentos. Cuando sea posible, es recomendable realizar la selección utilizando IDs, nombres de clases y nombres de etiquetas.
Si desea conocer más sobre este asunto, Paul Irish realizó una gran presentación sobre mejoras de rendimiento en JavaScript (en ingles), la cual posee varias diapositivas centradas en selectores.
- 3.2.1 Comprobar Selecciones
+ 3.2.1 Comprobar Selecciones
Una vez realizada la selección de los elementos, querrá conocer si dicha selección entregó algún resultado. Para ello, pueda que escriba algo así:
if ($('div.foo')) { ... }
Sin embargo esta forma no funcionará. Cuando se realiza una selección utilizando $(), siempre es devuelto un objeto, y si se lo evalúa, éste siempre devolverá true. Incluso si la selección no contiene ningún elemento, el código dentro del bloque if se ejecutará.
@@ -1200,7 +1200,7 @@ 3.2.1if ($('div.foo').length) { ... }
- 3.2.2 Guardar Selecciones
+ 3.2.2 Guardar Selecciones
Cada vez que se hace una selección, una gran cantidad de código es ejecutado. jQuery no guarda el resultado por si solo, por lo tanto, si va a realizar una selección que luego se hará de nuevo, deberá salvar la selección en una variable.
Guardar selecciones en una variable
var $divs = $('div');
@@ -1215,7 +1215,7 @@ 3.2.2
- 3.2.3 Refinamiento y Filtrado de Selecciones
+ 3.2.3 Refinamiento y Filtrado de Selecciones
A veces, puede obtener una selección que contiene más de lo que necesita; en este caso, es necesario refinar dicha selección. jQuery ofrece varios métodos para poder obtener exactamente lo que desea.
Refinamiento de selecciones
$('div.foo').has('p'); // el elemento div.foo contiene elementos <p>
@@ -1226,50 +1226,50 @@ $('ul li').eq(5); // el sexto item de una lista desordenada
- 3.2.4 Selección de Elementos de un Formulario
+ 3.2.4 Selección de Elementos de un Formulario
jQuery ofrece varios pseudo-selectores que ayudan a encontrar elementos dentro de los formularios, éstos son especialmente útiles ya que dependiendo de los estados de cada elemento o su tipo, puede ser difícil distinguirlos utilizando selectores CSS estándar.
- :button
- Selecciona elementos <button> y con el atributo type='button'
+ - Selecciona elementos
<button> y con el atributo type='button'
- :checkbox
- Selecciona elementos <input> con el atributo type='checkbox'
+ - Selecciona elementos
<input> con el atributo type='checkbox'
- :checked
- Selecciona elementos <input> del tipo checkbox seleccionados
+ - Selecciona elementos
<input> del tipo checkbox seleccionados
- :disabled
- Selecciona elementos del formulario que están deshabitados
+ - Selecciona elementos del formulario que están deshabitados
- :enabled
- Selecciona elementos del formulario que están habilitados
+ - Selecciona elementos del formulario que están habilitados
- :file
- Selecciona elementos <input> con el atributo type='file'
+ - Selecciona elementos
<input> con el atributo type='file'
- :image
- Selecciona elementos <input> con el atributo type='image'
+ - Selecciona elementos
<input> con el atributo type='image'
- :input
- Selecciona elementos <input>, <textarea> y <select>
+ - Selecciona elementos
<input>, <textarea> y <select>
- :password
- Selecciona elementos <input> con el atributo type='password'
+ - Selecciona elementos
<input> con el atributo type='password'
- :radio
- Selecciona elementos <input> con el atributo type='radio'
+ - Selecciona elementos
<input> con el atributo type='radio'
- :reset
- Selecciona elementos <input> con el atributo type='reset'
+ - Selecciona elementos
<input> con el atributo type='reset'
- :selected
- Selecciona elementos <options> que están seleccionados
+ - Selecciona elementos
<options> que están seleccionados
- :submit
- Selecciona elementos <input> con el atributo type='submit'
+ - Selecciona elementos
<input> con el atributo type='submit'
- :text
- Selecciona elementos <input> con el atributo type='text'
+ - Selecciona elementos
<input> con el atributo type='text'
Utilizando pseudo-selectores en elementos de formularios
@@ -1278,10 +1278,10 @@
- 3.3 Trabajar con Selecciones
+ 3.3 Trabajar con Selecciones
Una vez realizada la selección de los elementos, es posible utilizarlos en conjunto con diferentes métodos. éstos, generalmente, son de dos tipos: obtenedores (en inglés getters) y establecedores (en inglés setters). Los métodos obtenedores devuelven una propiedad del elemento seleccionado; mientras que los métodos establecedores fijan una propiedad a todos los elementos seleccionados.
- 3.3.1 Encadenamiento
+ 3.3.1 Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto jQuery, es posible seguir un “encadenado” de métodos en el objeto.
Encadenamiento
$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');
@@ -1306,7 +1306,7 @@ 3.3.1 E
- 3.3.2 Obtenedores (Getters) & Establecedores (Setters)
+ 3.3.2 Obtenedores (Getters) & Establecedores (Setters)
jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un valor posee el mismo nombre que el método para obtener un valor. Cuando un método es utilizado para establecer un valor, es llamado método establecedor (en inglés setter). En cambio, cuando un método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés getter).
El método $.fn.html utilizado como establecedor
$('h1').html('hello world');
@@ -1316,7 +1316,7 @@
- 3.4 CSS, Estilos, & Dimensiones
+ 3.4 CSS, Estilos, & Dimensiones
jQuery incluye una manera útil de obtener y establecer propiedades CSS a los elementos.
Nota
@@ -1339,7 +1339,7 @@ 3.4'paddingTop' : '+=20px' // suma 20px al padding superior original del elemento
});
- 3.4.1 Utilizar Clases para Aplicar Estilos CSS
+ 3.4.1 Utilizar Clases para Aplicar Estilos CSS
Para obtener valores de los estilos aplicados a un elemento, el método $.fn.css es muy útil, sin embargo, su utilización como método establecedor se debe evitar (ya que, para aplicar estilos a un elemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS que se apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo que se desea mostrar.
Trabajar con clases
var $h1 = $('h1');
@@ -1352,9 +1352,9 @@
- 3.4.2 Dimensiones
+ 3.4.2 Dimensiones
jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.
- El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
+ El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
Métodos básicos sobre Dimensiones
$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1
@@ -1369,7 +1369,7 @@ 3.4.2 Dime
- 3.5 Atributos
+ 3.5 Atributos
Los atributos de los elementos HTML que conforman una aplicación pueden contener información útil, por eso es importante poder establecer y obtener esa información.
El método $.fn.attr actúa tanto como método establecedor como obtenedor. Además, al igual que el método $.fn.css, cuando se lo utiliza como método establecedor, puede aceptar un conjunto de palabra clave-valor o un objeto conteniendo más conjuntos.
Establecer atributos
@@ -1384,9 +1384,9 @@ 3.5 Atributo
// al primer elemento <a> del documento
- 3.6 Recorrer el DOM
+ 3.6 Recorrer el DOM
Una vez obtenida la selección, es posible encontrar otros elementos utilizando a la misma selección.
- En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
+ En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
Nota
Debe ser cuidadoso en recorrer largas distancias en un documento — recorridos complejos obligan que la estructura del documento sea siempre la misma, algo que es difícil de garantizar. Uno -o dos- pasos para el recorrido esta bien, pero generalmente hay que evitar atravesar desde un contenedor a otro.
@@ -1413,11 +1413,11 @@ 3.6 Re
});
- 3.7 Manipulación de Elementos
+ 3.7 Manipulación de Elementos
Una vez realizada la selección de los elementos que desea utilizar, “la diversión comienza”. Es posible cambiar, mover, remover y duplicar elementos. También crear nuevos a través de una sintaxis simple.
- La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
+ La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
- 3.7.1 Obtener y Establecer Información en Elementos
+ 3.7.1 Obtener y Establecer Información en Elementos
Existen muchas formas por las cuales de puede modificar un elemento. Entre las tareas más comunes están las de cambiar el HTML interno o algún atributo del mismo. Para este tipo de tareas, jQuery ofrece métodos simples, funcionales en todos los navegadores modernos. Incluso es posible obtener información sobre los elementos utilizando los mismos métodos pero en su forma de método obtenedor.
Nota
@@ -1429,25 +1429,25 @@ html('Nuevo <strong>primer</strong> párrafo');
- 3.7.2 Mover, Copiar y Remover Elementos
+ 3.7.2 Mover, Copiar y Remover Elementos
Existen varias maneras para mover elementos a través del DOM; las cuales se pueden separar en dos enfoques:
querer colocar el/los elementos seleccionados de forma relativa a otro elemento;
// lista de items que se ha movido, ya que devuelve
// la lista en sí
- 3.7.2.1 Clonar Elementos
+ 3.7.2.1 Clonar Elementos
Cuando se utiliza un método como $.fn.appendTo, lo que se está haciendo es mover al elemento; pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento. En este caso, es posible utilizar el método $.fn.clone.
Obtener una copia del elemento
// copiar el primer elemento de la lista y moverlo al final de la misma
@@ -1485,7 +1485,7 @@ 3.7.2.1
- 3.7.2.2 Remover elementos
+ 3.7.2.2 Remover elementos
Existen dos formas de remover elementos de una página: Utilizando $.fn.remove o $.fn.detach. Cuando desee remover de forma permanente al elemento, utilize el método $.fn.remove. Por otro lado, el método $.fn.detach también remueve el elemento, pero mantiene la información y eventos asociados al mismo, siendo útil en el caso que necesite reinsertar el elemento en el documento.
Nota
@@ -1495,7 +1495,7 @@ 3.7.2.2
- 3.7.3 Crear Nuevos Elementos
+ 3.7.3 Crear Nuevos Elementos
jQuery provee una forma fácil y elegante para crear nuevos elementos a través del mismo método $() que se utiliza para realizar selecciones.
Crear nuevos elementos
$('<p>Un nuevo párrafo</p>');
@@ -1532,7 +1532,7 @@ 3.7.3<
$myList.append(myItems.join(''));
- 3.7.4 Manipulación de Atributos
+ 3.7.4 Manipulación de Atributos
Las capacidades para la manipulación de atributos que ofrece la biblioteca son extensos. La realización de cambios básicos son simples, sin embargo el método $.fn.attr permite manipulaciones más complejas.
Manipular un simple atributo
$('#myDiv a:first').attr('href', 'newDestination.html');
@@ -1555,9 +1555,9 @@ 3.
- 3.8 Ejercicios
+ 3.8 Ejercicios
- 3.8.1 Selecciones
+ 3.8.1 Selecciones
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todos los elementos div que poseen la clase “module”.
3.8.1 Sele
- 3.8.2 Recorrer el DOM
+ 3.8.2 Recorrer el DOM
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todas las imágenes en la página; registrar en la consola el atributo alt de cada imagen.
3.8.2
- 3.8.3 Manipulación
+ 3.8.3 Manipulación
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
- Añadir 5 nuevos ítems al final de la lista desordenada #myList. Ayuda:
@@ -1596,9 +1596,9 @@ 3.8.3 Ma
- 4 El núcleo de jQuery
+ 4 El núcleo de jQuery
- 4.1 $ vs $()
+ 4.1 $ vs $()
Hasta ahora, se ha tratado completamente con métodos que se llaman desde el objeto jQuery. Por ejemplo:
$('h1').remove();
Dichos métodos son parte del espacio de nombres (en inglés namespace) $.fn, o del prototipo (en inglés prototype) de jQuery, y son considerados como métodos del objeto jQuery.
@@ -1611,8 +1611,8 @@ 4.1 $
Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con $.each y $.fn.each. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.
- 4.2 Métodos Utilitarios
- jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
+ 4.2 Métodos Utilitarios
+ jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
- $.trim
- Remueve los espacios en blanco del principio y final.
@@ -1687,7 +1687,7 @@
4.2$('#foo').click($.proxy(myObject, 'myFn')); // registra myObject
- 4.3 Comprobación de Tipos
+ 4.3 Comprobación de Tipos
Como se mencionó en el capítulo “Conceptos Básicos de JavaScript”, jQuery ofrece varios métodos útiles para determinar el tipo de un valor específico.
Comprobar el tipo de un determinado valor
var myValue = [1, 2, 3];
@@ -1708,7 +1708,7 @@ 4.3jQuery.isNumeric(16); // verdadero (true). No disponible en versiones inferiores a jQuery 1.7
- 4.4 El Método Data
+ 4.4 El Método Data
A menudo encontrará que existe información acerca de un elemento que necesita guardar. En JavaScript es posible hacerlo añadiendo propiedades al DOM del elemento, pero esta práctica conlleva enfrentarse a pérdidas de memoria (en inglés memory leaks) en algunos navegadores. jQuery ofrece una manera sencilla para poder guardar información relacionada a un elemento, y la misma biblioteca se ocupa de manejar los problemas que pueden surgir por falta de memoria.
Guardar y recuperar información relacionada a un elemento
$('#myDiv').data('keyName', { foo : 'bar' });
@@ -1744,18 +1744,18 @@ 4.4 El
Nota
- Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
+ Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
- 4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
+ 4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
Si esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales también utilizan la variable $, pueden llegar a ocurrir una serie de errores. Para poder solucionarlos, es necesario poner a jQuery en su modo “no-conflicto”. Esto se debe realizar inmediatamente después que jQuery se cargue en la página y antes del código que se va a ejecutar.
Cuando se pone a jQuery en modo “no-conflicto”, la biblioteca ofrece la opción de asignar un nombre para reemplazar a la variable $.
Poner a jQuery en modo no-conflicto
@@ -1779,15 +1779,15 @@
- 5 Eventos
+ 5 Eventos
- 5.1 Introducción
+ 5.1 Introducción
jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.
- Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
- La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
+ Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
+ La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
- 5.2 Vincular Eventos a Elementos
+ 5.2 Vincular Eventos a Elementos
jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.on de jQuery ($.fn.bind en versiones anteriores a jQuery 1.7). El método $.fn.on es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.
Vincular un evento utilizando un método reducido
$('p').click(function() {
@@ -1808,7 +1808,7 @@
}
);
- 5.2.1 Vincular Eventos para Ejecutar una vez
+ 5.2.1 Vincular Eventos para Ejecutar una vez
A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.
Cambiar controladores utilizando el método $.fn.one
$('p').one('click', function() {
@@ -1818,7 +1818,7 @@
- 5.2.2 Desvincular Eventos
+ 5.2.2 Desvincular Eventos
Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.off pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.
Desvincular todos los controladores del evento click en una selección
$('p').off('click');
@@ -1830,7 +1830,7 @@ 5.2.2$('p').off('click', bar); // foo esta atado aún al evento click
- 5.2.3 Espacios de Nombres para Eventos
+ 5.2.3 Espacios de Nombres para Eventos
Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.
Asignar espacios de nombres a eventos
$('p').on('click.myNamespace', function() { /* ... */ });
@@ -1839,7 +1839,7 @@ // el espacio de nombre 'myNamespace'
- 5.2.4 Vinculación de Múltiples Eventos
+ 5.2.4 Vinculación de Múltiples Eventos
Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.on con uno o más pares de nombres claves/valores. Cada clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.
Vincular múltiples eventos a un elemento
$('p').on({
@@ -1853,29 +1853,29 @@
- 5.3 El Objeto del Evento
+ 5.3 El Objeto del Evento
Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:
- pageX, pageY
- La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
+ - La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
- type
- El tipo de evento (por ejemplo “click”).
+ - El tipo de evento (por ejemplo “click”).
- which
- El botón o tecla presionada.
+ - El botón o tecla presionada.
- data
- Alguna información pasada cuando el evento es ejecutado.
+ - Alguna información pasada cuando el evento es ejecutado.
- target
- El elemento DOM que inicializó el evento.
+ - El elemento DOM que inicializó el evento.
- preventDefault()
- Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
+ - Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
- stopPropagation()
- Detiene la propagación del evento sobre otros elementos.
+ - Detiene la propagación del evento sobre otros elementos.
Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:
@@ -1890,7 +1890,7 @@ 5.3
- 5.4 Ejecución automática de Controladores de Eventos
+ 5.4 Ejecución automática de Controladores de Eventos
A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.
Disparar un controlador de eventos de la forma correcta
var foo = function(e) {
@@ -1907,7 +1907,7 @@ foo(); // en lugar de realizar $('p').trigger('click')
- 5.5 Incrementar el Rendimiento con la Delegación de Eventos
+ 5.5 Incrementar el Rendimiento con la Delegación de Eventos
Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede.
La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.
@@ -1925,7 +1925,7 @@ // ...
});
- 5.5.1 Desvincular Eventos Delegados
+ 5.5.1 Desvincular Eventos Delegados
Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método $.fn.off para eventos conectados con $.fn.on, y $.fn.undelegate para eventos conectados con $.fn.delegate. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.
Desvincular eventos delegados
$('#myUnorderedList').off('click', 'li');
@@ -1933,10 +1933,10 @@
- 5.6 Funciones Auxiliares de Eventos
+ 5.6 Funciones Auxiliares de Eventos
jQuery ofrece dos funciones auxiliares para el trabajo con eventos:
- 5.6.1 $.fn.hover
+ 5.6.1 $.fn.hover
El método $.fn.hover permite pasar una o dos funciones que se ejecutarán cuando los eventos mouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el evento mouseenter, mientras que la segunda será ejecutada cuando ocurra mouseleave.
Nota
@@ -1948,7 +1948,7 @@ 5.6.1 $
});
- 5.6.2 $.fn.toggle
+ 5.6.2 $.fn.toggle
Al igual que el método anterior, $.fn.toggle recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, $.fn.toggle es utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.
La función auxiliar toggle
$('p.expander').toggle(
@@ -1962,10 +1962,10 @@ 5.6.2
- 5.7 Ejercicios
+ 5.7 Ejercicios
- 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+ 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
Establecer el valor del elemento input igual al valor del elemento label.
Añadir la clase “hint” al elemento input.
¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?
- 5.7.2 Añadir una Navegación por Pestañas
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
+ 5.7.2 Añadir una Navegación por Pestañas
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
Ocultar todos los elementos div.module.
Crear una lista desordenada antes del primer div.module para utilizar como pestañas.
- 6 Efectos
+ 6 Efectos
- 6.1 Introducción
+ 6.1 Introducción
Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.
- Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
+ Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
- 6.2 Efectos Incorporados en la Biblioteca
+ 6.2 Efectos Incorporados en la Biblioteca
Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:
- $.fn.show
- Muestra el elemento seleccionado.
+ - Muestra el elemento seleccionado.
- $.fn.hide
- Oculta el elemento seleccionado.
+ - Oculta el elemento seleccionado.
- $.fn.fadeIn
- De forma animada, cambia la opacidad del elemento seleccionado al 100%.
+ - De forma animada, cambia la opacidad del elemento seleccionado al 100%.
- $.fn.fadeOut
- De forma animada, cambia la opacidad del elemento seleccionado al 0
+ - De forma animada, cambia la opacidad del elemento seleccionado al 0
- $.fn.slideDown
- Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideUp
- Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideToggle
- Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
+ - Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
Uso básico de un efecto incorporado
$('h1').show();
- 6.2.1 Cambiar la Duración de los Efectos
+ 6.2.1 Cambiar la Duración de los Efectos
Con la excepción de $.fn.show y $.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400ms. Este valor es posible cambiarlo.
Configurar la duración de un efecto
$('h1').fadeIn(300); // desvanecimiento en 300ms
$('h1').fadeOut('slow'); // utilizar una definición de velocidad interna
- 6.2.1.1 jQuery.fx.speeds
+ 6.2.1.1 jQuery.fx.speeds
jQuery posee un objeto en jQuery.fx.speeds el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones “slow” y “fast”.
speeds: {
slow: 600,
@@ -2050,7 +2050,7 @@ 6.2.1.1
- 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
+ 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.] En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave this hace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando $(this).
Ejecutar cierto código cuando una animación haya concluido
$('div.old').fadeOut(300, function() { $(this).remove(); });
@@ -2070,7 +2070,7 @@
- 6.3 Efectos Personalizados con $.fn.animate
+ 6.3 Efectos Personalizados con $.fn.animate
Es posible realizar animaciones en propiedades CSS utilizando el método $.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.
Efectos personalizados con $.fn.animate
$('div.funtimes').animate(
@@ -2086,7 +2086,7 @@ color plugin. Más adelante en el libro de discutirá la utilización de extensiones.
- 6.3.1 Easing
+ 6.3.1 Easing
[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.
A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método $.fn.animate.
Transición de easing por cada propiedad
@@ -2097,18 +2097,18 @@ 6.3.1 Easing300
);
-
Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
+ Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
- 6.4 Control de los Efectos
+ 6.4 Control de los Efectos
jQuery provee varias herramientas para el manejo de animaciones.
- $.fn.stop
- Detiene las animaciones que se están ejecutando en el elemento seleccionado.
+ - Detiene las animaciones que se están ejecutando en el elemento seleccionado.
- $.fn.delay
- Espera un tiempo determinado antes de ejecutar la próxima animación.
+ - Espera un tiempo determinado antes de ejecutar la próxima animación.
$('h1').show(300).delay(1000).hide(300);
@@ -2119,9 +2119,9 @@ 6.4
- 6.5 Ejercicios
+ 6.5 Ejercicios
- 6.5.1 Mostrar Texto Oculto
+ 6.5.1 Mostrar Texto Oculto
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/blog.js. La tarea es añadir alguna interactividad a la sección blog de la página:
al hacer click en alguno de los titulares del div #blog, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
6.5.1
- 6.5.2 Crear un Menú Desplegable
+ 6.5.2 Crear un Menú Desplegable
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/navigation.js. La tarea es poder desplegar los ítems del menú superior de la página:
al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
6.
Para poder realizarlo, utilice el método $.fn.hover para añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo /ejercicios/css/styles.css incluye una clase “hover” para este propósito)
- 6.5.3 Crear un Slideshow
+ 6.5.3 Crear un Slideshow
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/slideshow.js. La tarea es añadir un slideshow a la página con JavaScript.
Mover el elemento #slideshow a la parte superior de la página.
6.5.3
- 7 Ajax
+ 7 Ajax
- 7.1 Introducción
+ 7.1 Introducción
El método XMLHttpRequest (XHR) permite a los navegadores comunicarse con el servidor sin la necesidad de recargar la página. Este método, también conocido como Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.
Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una petición a una URL y cuando recibe una respuesta, una función de devolución puede ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo con ella. Debido a que la respuesta es asíncrona, el resto del código de la aplicación continua ejecutándose, por lo cual, es imperativo que una función de devolución sea ejecutada para manejar la respuesta.
A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer las diferencias que pueden existir entre navegadores. Los métodos en cuestión son $.get(), $.getScript(), $.getJSON(), $.post() y $().load().
@@ -2160,48 +2160,48 @@ 7.1 In
En general, Ajax no trabaja a través de dominios diferentes. Sin embargo, existen excepciones, como los servicios que proveen información en formato JSONP (JSON with Padding), los cuales permiten una funcionalidad limitada a través de diferentes dominios.
- 7.2 Conceptos Clave
+ 7.2 Conceptos Clave
La utilización correcta de los métodos Ajax requiere primero la comprensión de algunos conceptos clave.
- 7.2.1 GET vs. POST
+ 7.2.1 GET vs. POST
Los dos métodos HTTP más comunes para enviar una petición a un servidor son GET y POST. Es importante entender la utilización de cada uno.
El método GET debe ser utilizado para operaciones no-destructivas — es decir, operaciones en donde se esta “obteniendo” datos del servidor, pero no modificando. Por ejemplo, una consulta a un servicio de búsqueda podría ser una petición GET. Por otro lado, las solicitudes GET pueden ser almacenadas en la cache del navegador, pudiendo conducir a un comportamiento impredecible si no se lo espera. Generalmente, la información enviada al servidor, es enviada en una cadena de datos (en inglés query string).
El método POST debe ser utilizado para operaciones destructivas — es decir, operaciones en donde se está incorporando información al servidor. Por ejemplo, cuando un usuario guarda un artículo en un blog, esta acción debería utilizar POST. Por otro lado, este tipo de método no se guarda en la cache del navegador. Además, una cadena de datos puede ser parte de la URL, pero la información tiende a ser enviada de forma separada.
- 7.2.2 Tipos de Datos
+ 7.2.2 Tipos de Datos
Generalmente, jQuery necesita algunas instrucciones sobre el tipo de información que se espera recibir cuando se realiza una petición Ajax. En algunos casos, el tipo de dato es especificado por el nombre del método, pero en otros casos se lo debe detallar como parte de la configuración del método:
- text
- Para el transporte de cadenas de caracteres simples.
+ - Para el transporte de cadenas de caracteres simples.
- html
- Para el transporte de bloques de código HTML que serán ubicados en la página.
+ - Para el transporte de bloques de código HTML que serán ubicados en la página.
- script
- Para añadir un nuevo script con código JavaScript a la página.
+ - Para añadir un nuevo script con código JavaScript a la página.
- json
- Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
+ - Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
Nota
- A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
+ A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en formato JSON.
- jsonp
- Para transportar información JSON de un dominio a otro.
+ - Para transportar información JSON de un dominio a otro.
- xml
- Para transportar información en formato XML.
+ - Para transportar información en formato XML.
A pesar de los diferentes tipos de datos de que se puede utilizar, es recomendable utilizar el formato JSON, ya que es muy flexible, permitiendo por ejemplo, enviar al mismo tiempo información plana y HTML.
- 7.2.3 Asincronismo
+ 7.2.3 Asincronismo
Debido a que, de forma predeterminada, las llamadas Ajax son asíncronas, la respuesta del servidor no esta disponible de forma inmediata. Por ejemplo, el siguiente código no debería funcionar:
var response;
$.get('foo.php', function(r) { response = r; });
@@ -2210,22 +2210,22 @@ 7.2.3 Asi
$.get('foo.php', function(response) { console.log(response); });
- 7.2.4 Políticas de Mismo Origen y JSONP
+ 7.2.4 Políticas de Mismo Origen y JSONP
En general, las peticiones Ajax están limitadas a utilizar el mismo protocolo (http o https), el mismo puerto y el mismo dominio de origen. Esta limitación no se aplica a los scripts cargados a través del método Ajax de jQuery.
La otra excepción es cuando se hace una petición que recibirá una respuesta en formato JSONP. En este caso, el proveedor de la respuesta debe responder la petición con un script que puede ser cargado utilizando la etiqueta <script>, evitando así la limitación de realizar peticiones desde el mismo dominio. Dicha respuesta contendrá la información solicitada, contenida en una función
- 7.2.5 Ajax y Firebug
+ 7.2.5 Ajax y Firebug
Firebug (o el inspector WebKit que viene incluido en Chrome o Safari) son herramientas imprescindibles para trabajar con peticiones Ajax, ya que es posible observarlas desde la pestaña Consola de Firebug (o yendo a Recursos > Panel XHR desde el inspector de Webkit) y revisar los detalles de dichas peticiones. Si algo esta fallando cuando trabaja con Ajax, este es el primer lugar en donde debe dirigirse para saber cual es el problema.
- 7.3 Métodos Ajax de jQuery
+ 7.3 Métodos Ajax de jQuery
Como se indicó anteriormente, jQuery posee varios métodos para trabajar con Ajax. Sin embargo, todos están basados en el método $.ajax, por lo tanto, su comprensión es obligatoria. A continuación se abarcará dicho método y luego se indicará un breve resumen sobre los demás métodos.
Generalmente, es preferible utilizar el método $.ajax en lugar de los otros, ya que ofrece más características y su configuración es muy comprensible.
- 7.3.1 $.ajax
- El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
+ 7.3.1 $.ajax
+ El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
Utilizar el método $.ajax
$.ajax({
// la URL para la petición
@@ -2267,54 +2267,54 @@ 7.3.1 $.ajaxUna aclaración sobre el parámetro dataType: Si el servidor devuelve información que es diferente al formato especificado, el código fallará, y la razón de porque lo hace no siempre quedará clara debido a que la respuesta HTTP no mostrará ningún tipo de error. Cuando esté trabajando con peticiones Ajax, debe estar seguro que el servidor esta enviando el tipo de información que esta solicitando y verifique que la cabecera Content-type es exacta al tipo de dato. Por ejemplo, para información en formato JSON, la cabecera Content-type debería ser application/json.
- 7.3.1.1 Opciones del método $.ajax
- El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
+ 7.3.1.1 Opciones del método $.ajax
+ El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
- async
- Establece si la petición será asíncrona o no. De forma predeterminada el valor es true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
+ - Establece si la petición será asíncrona o no. De forma predeterminada el valor es
true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
- cache
- Establece si la petición será guardada en la cache del navegador. De forma predeterminada es true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
+ - Establece si la petición será guardada en la cache del navegador. De forma predeterminada es
true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
- complete
- Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
+ - Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
- context
- Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
+ - Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de
this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
- data
- Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo foo=bar&baz=bim.)
+ - Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo
foo=bar&baz=bim.)
- dataType
- Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
+ - Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
- error
- Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
+ - Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
- jsonp
- Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
+ - Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
- success
- Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
+ - Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
- timeout
- Establece un tiempo en milisegundos para considerar a una petición como fallada.
+ - Establece un tiempo en milisegundos para considerar a una petición como fallada.
- traditional
- Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
+ - Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
- type
- De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
+ - De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
- url
- Establece la URL en donde se realiza la petición.
+ - Establece la URL en donde se realiza la petición.
La opción url es obligatoria para el método $.ajax;
- Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
+ Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
Nota
- A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
+ A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
Nota
@@ -2323,30 +2323,30 @@ 7.
- 7.3.2 Métodos Convenientes
- En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores pre-establecidos de configuración).
+ 7.3.2 Métodos Convenientes
+ En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
- $.get
- Realiza una petición GET a una URL provista.
+ - Realiza una petición GET a una URL provista.
- $.post
- Realiza una petición POST a una URL provista.
+ - Realiza una petición POST a una URL provista.
- $.getScript
- Añade un script a la página.
+ - Añade un script a la página.
- $.getJSON
- Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
+ - Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
Los métodos deben tener los siguientes argumentos, en orden:
- url
- La URL en donde se realizará la petición. Su valor es obligatorio.
+ - La URL en donde se realizará la petición. Su valor es obligatorio.
- data
- La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como foo=bar&baz=bim).
+ - La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como
foo=bar&baz=bim).
@@ -2355,10 +2355,10 @@ 7.3.2
- success callback
- Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
+ - Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
- data type
- El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
+ - El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
@@ -2384,7 +2384,7 @@ 7.3.2
- 7.3.3 $.fn.load
+ 7.3.3 $.fn.load
El método $.fn.load es el único que se puede llamar desde una selección. Dicho método obtiene el código HTML de una URL y rellena a los elementos seleccionados con la información obtenida. En conjunto con la URL, es posible especificar opcionalmente un selector, el cual obtendrá el código especificado en dicha selección.
Utilizar el método $.fn.load para rellenar un elemento
$('#newContent').load('/foo.html');
@@ -2395,7 +2395,7 @@ 7.3.3 $.
- 7.4 Ajax y Formularios
+ 7.4 Ajax y Formularios
Las capacidades de jQuery con Ajax pueden ser especialmente útiles para el trabajo con formularios. Por ejemplo, la extensión jQuery Form Plugin es una extensión para añadir capacidades Ajax a formularios. Existen dos métodos que debe conocer para cuando este realizando este tipo de trabajos: $.fn.serialize y $.fn.serializeArray.
Transformar información de un formulario a una cadena de datos
$('#myForm').serialize();
@@ -2409,7 +2409,7 @@ 7.4
]
- 7.5 Trabajar con JSONP
+ 7.5 Trabajar con JSONP
En los últimos tiempos, la introducción de JSONP, ha permitido la creación de aplicaciones híbridas de contenidos. Muchos sitios importantes ofrecen JSONP como servicio de información, el cual se accede a través de una API (en inglés Application programming interface) predefinida. Un servicio particular que permite obtener información en formato JSONP es Yahoo! Query Language, el cual se utiliza a continuación para obtener, por ejemplo, noticias sobre gatos:
Utilizar YQL y JSONP
$.ajax({
@@ -2437,17 +2437,17 @@ 7.5
jQuery se encarga de solucionar todos los aspectos complejos de la petición JSONP. Lo único que debe hacer es especificar el nombre de la función de devolución (en este caso “callback”, según lo especifica YQL) y el resultado final será como una petición Ajax normal.
- 7.6 Eventos Ajax
- A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
+ 7.6 Eventos Ajax
+ A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
Mostrar/Ocultar un indicador utilizando Eventos Ajax
$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });
- 7.7 Ejercicios
+ 7.7 Ejercicios
- 7.7.1 Cargar Contenido Externo
+ 7.7.1 Cargar Contenido Externo
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/load.js. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.
Crear un elementos div después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando $.fn.data.
7.7.
Recuerde utilizar console.log para asegurarse que esta realizando lo correcto.
- 7.7.2 Cargar Contenido Utilizando JSON
+ 7.7.2 Cargar Contenido Utilizando JSON
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/specials.js. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.
Añadir un elemento div después del formulario que se encuentra dentro del elemento #specials; allí será el lugar en donde se colocará la información a obtener.
- 8 Extensiones
+ 8 Extensiones
- 8.1 ¿Qué es una Extensión?
+ 8.1 ¿Qué es una Extensión?
Una extensión de jQuery es simplemente un nuevo método que se utilizará para extender el prototipo (prototype) del objeto jQuery. Cuando se extiende el prototipo, todos los objetos jQuery hereden los métodos añadidos. Por lo tanto, cuando se realiza una llamada jQuery(), es creado un nuevo objeto jQuery con todos los métodos heredados.
El objetivo de una extensión es realizar una acción utilizando una colección de elementos, de la misma forma que lo hacen, por ejemplo, los métodos fadeOut o addClass de la biblioteca.
Usted puede realizar sus propias extensiones y utilizarlas de forma privada en su proyecto o también puede publicarlas para que otras personas le saquen provecho.
- 8.2 Crear una Extensión Básica
+ 8.2 Crear una Extensión Básica
El código para realizar una extensión básica es la siguiente:
(function($){
$.fn.myNewPlugin = function() {
@@ -2560,17 +2560,17 @@
$('a').fadeInAndAddClass(400, 'finishedFading');
- 8.3 Encontrar y Evaluar Extensiones
+ 8.3 Encontrar y Evaluar Extensiones
Uno de los aspectos más populares de jQuery es la diversidad de extensiones que existen.
Sin embargo, la calidad entre extensiones puede variar enormemente. Muchas son intensivamente probadas y bien mantenidas, pero otras son creadas de forma apresurada y luego ignoradas, sin seguir buenas prácticas.
Google es la mejor herramienta para encontrar extensiones (aunque el equipo de jQuery este trabajando para mejorar su repositorio de extensiones). Una vez encontrada la extensión, posiblemente quiera consultar la lista de correos de jQuery o el canal IRC #jquery para obtener la opinión de otras personas sobre dicha extensión.
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) Signs of a poorly written jQuery plugin por Remy Sharp.
- Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
- 8.4 Escribir Extensiones
+ 8.4 Escribir Extensiones
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
- La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+ La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover
// definición de la extensión
@@ -2639,7 +2639,7 @@ 8.4
- 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
+ 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
Nota
Esta sección esta basada, con permiso del autor, en el artículo Building Stateful jQuery Plugins de Scott Gonzalez.
@@ -2684,7 +2684,7 @@
- 8.5.1 Añadir Métodos a un Widget
+ 8.5.1 Añadir Métodos a un Widget
Ahora que es posible inicializar la extensión, es necesario añadir la habilidad de realizar acciones a través de métodos definidos en la extensión. Para definir un método en la extensión es necesario incluir la función en el objeto literal que se pasa a jQuery.widget. También es posible definir métodos “privados” anteponiendo un guión bajo al nombre de la función.
Crear métodos en el Widget
$.widget("nmk.progressbar", {
@@ -2743,7 +2743,7 @@
- 8.5.2 Trabajar con las Opciones del Widget
+ 8.5.2 Trabajar con las Opciones del Widget
Uno de los métodos disponibles automáticamente para la extensión es option. Este método permite obtener y establecer opciones después de la inicialización y funciona exactamente igual que los métodos attr y css de jQuery: pasando únicamente un nombre como argumento el método funciona como obtenedor, mientras que pasando uno o más conjuntos de nombres y valores el método funciona como establecedor. Cuando es utilizado como método obtenedor, la extensión devolverá el valor actual de la opción correspondiente al nombre pasado como argumento. Por otro lado, cuando es utilizado como un método establecedor, el método _setOption de la extensión será llamado por cada opción que se desea establecer.
Responder cuando una opción es establecida
$.widget("nmk.progressbar", {
@@ -2768,7 +2768,7 @@
- 8.5.3 Añadir Funciones de Devolución de Llamada
+ 8.5.3 Añadir Funciones de Devolución de Llamada
Uno de las maneras más fáciles de extender una extensión es añadir funciones de devolución de llamada, para que de esta forma el usuario puede reaccionar cuando el estado de la extensión cambie. A continuación se mostrará como añadir una función de devolución de llamada a la extensión creada para indicar cuando la barra de progreso haya alcanzado el 100%. El método _trigger obtiene tres parámetros: el nombre de la función de devolución, el objeto de evento nativo que inicializa la función de devolución y un conjunto de información relevante al evento. El nombre de la función de devolución es el único parámetro obligatorio, pero los otros pueden ser muy útiles si el usuario desea implementar funcionalidades personalizadas.
Proveer funciones de devolución de llamada
$.widget("nmk.progressbar", {
@@ -2828,7 +2828,7 @@
- 8.5.4 Limpieza
+ 8.5.4 Limpieza
En algunos casos, tendrá sentido permitir a los usuarios aplicar y desaplicar la extensión. Esto es posible hacerlo a través del método destroy. Con dicho método, es posible deshacer todo lo realizado con la extensión. También éste es llamado automáticamente si el elemento vinculado a la extensión es eliminado del DOM (por lo cual también es posible utilizarlo para la “recolección de basura”). El método destroy predeterminado remueve el vínculo entre el elemento DOM y la instancia de la extensión
Añadir un método destroy al widget
$.widget( "nmk.progressbar", {
@@ -2865,18 +2865,18 @@ 8.5.4 Limpiez
});
- 8.5.5 Conclusión
+ 8.5.5 Conclusión
La utilización de Widget factory es solo una manera de crear extensiones con mantenimiento de estado. Existen algunos modelos diferentes que pueden ser utilizados y cada uno posee sus ventajas y desventajas. Widget factory resuelve muchos problemas comunes, mejora significativamente la productividad y la reutilización de código.
- 8.6 Ejercicios
+ 8.6 Ejercicios
- 8.6.1 Realizar una Tabla Ordenable
+ 8.6.1 Realizar una Tabla Ordenable
Para este ejercicio, la tarea es identificar, descargar e implementar una extensión que permita ordenar la tabla existente en la página index.html. Cuando esté listo, todas las columnas de la tabla deben poder ser ordenables.
- 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
+ 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/stripe.js. La tarea es escribir una extensión llamada “stripe” la cual podrá ser llamada desde cualquier elemento table y deberá cambiar el color de fondo de las filas impares en el cuerpo de la tabla. El color podrá ser especificado como parámetro de la extensión.
$('#myTable').stripe('#cccccc');
No olvide de devolver la tabla para que otros métodos puedan ser encadenados luego de la llamada a la extensión.
@@ -2884,10 +2884,10 @@
- 9 Mejores Prácticas para Aumentar el Rendimiento
+ 9 Mejores Prácticas para Aumentar el Rendimiento
Este capítulo cubre numerosas mejores prácticas de JavaScript y jQuery,sin un orden en particular. Muchas de estas prácticas están basadas en la presentación jQuery Anti-Patterns for Performance (en inglés) de Paul Irish.
- 9.1 Guardar la Longitud en Bucles
+ 9.1 Guardar la Longitud en Bucles
En un bucle, no es necesario acceder a la longitud de un vector cada vez que se evalúa la condición; dicho valor se puede guardar previamente en una variable.
var myLength = myArray.length;
@@ -2896,7 +2896,7 @@
- 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
+ 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
Si va a insertar muchos elementos en el DOM, hágalo todo de una sola vez, no de una por vez.
// mal
$.each(myArray, function(i, item) {
@@ -2922,7 +2922,7 @@ $('#ballers').html(myHtml);
- 9.3 No Repetirse
+ 9.3 No Repetirse
No se repita; realice las cosas una vez y sólo una, caso contrario lo estará haciendo mal.
// MAL
if ($eventfade.data('currently') != 'showing') {
@@ -2946,7 +2946,7 @@ 9.3 No Re
});
- 9.4 Cuidado con las Funciones Anónimas
+ 9.4 Cuidado con las Funciones Anónimas
No es aconsejable utilizar de sobremanera las funciones anónimas. Estas son difíciles de depurar, mantener, probar o reutilizar. En su lugar,utilice un objeto literal para organizar y nombrar sus controladores y funciones de devolución de llamada.
// MAL
$(document).ready(function() {
@@ -2980,10 +2980,10 @@ $(document).ready(PI.onReady);
- 9.5 Optimización de Selectores
+ 9.5 Optimización de Selectores
La optimización de selectores es menos importante de lo que solía ser, debido a la implementación en algunos navegadores dedocument.querySelectorAll(), pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
- 9.5.1 Selectores basados en ID
+ 9.5.1 Selectores basados en ID
Siempre es mejor comenzar las selecciones con un ID.
// rápido
$('#container div.robotarm');
@@ -2993,7 +2993,7 @@ 9.5.
El ejemplo que utiliza $.fn.find es más rápido debido a que la primera selección utiliza el motor de selección interno Sizzle — mientras que la selección realizada únicamente por ID utiliza document.getElementById(), el cual es extremadamente rápido debido a que es una función nativa del navegador.
- 9.5.2 Especificidad
+ 9.5.2 Especificidad
Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.
// no optimizado
$('div.data .gonzalez');
@@ -3008,7 +3008,7 @@ 9.5.2 Es
La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.
- 9.5.3 Evitar el Selector Universal
+ 9.5.3 Evitar el Selector Universal
Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.
$('.buttons > *'); // muy lento
$('.buttons').children(); // mucho mejor
@@ -3019,7 +3019,7 @@
- 9.6 Utilizar la Delegación de Eventos
+ 9.6 Utilizar la Delegación de Eventos
La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista). jQuery hace fácil este trabajo a través de $.fn.live y$.fn.delegate. En lo posible, es recomendable utilizar $.fn.delegate en lugar de $.fn.live, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.
Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.
// mal (si existen muchos items en la lista)
@@ -3033,7 +3033,7 @@ $('#myList').delegate('li.trigger', 'click', handlerFn);
- 9.7 Separar Elementos para Trabajar con Ellos
+ 9.7 Separar Elementos para Trabajar con Ellos
En lo posible, hay que evitar la manipulación del DOM. Para ayudar con este propósito, a partir de la versión 1.4, jQuery introduce $.fn.detach el cual permite trabajar elementos de forma separada del DOM para luego insertarlos.
var $table = $('#myTable');
var $parent = $table.parent();
@@ -3043,7 +3043,7 @@ $parent.append(table);
- 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
+ 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
Si va a cambiar el CSS en más de 20 elementos utilizando $.fn.css, considere realizar los cambios de estilos añadiéndolos en una etiqueta style. De esta forma se incrementa un 60% el rendimiento.
// correcto hasta 20 elementos, lento en más elementos
$('a.swedberg').css('color', '#asd123');
@@ -3051,7 +3051,7 @@ appendTo('head');
- 9.9 Utilizar $.data en Lugar de $.fn.data
+ 9.9 Utilizar $.data en Lugar de $.fn.data
Utilizar $.data en un elemento del DOM en lugar de $.fn.data en una selección puede ser hasta 10 veces más rápido. Antes de realizarlo, este seguro de comprender la diferencia entre un elemento DOM y una selección jQuery.
// regular
$(elem).data(key,value);
@@ -3060,7 +3060,7 @@ $.data(elem,key,value);
- 9.10 No Actuar en Elementos no Existentes
+ 9.10 No Actuar en Elementos no Existentes
jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.
// MAL: el código a continuación ejecuta tres funciones
// sin comprobar si existen elementos
@@ -3087,7 +3087,7 @@
- 9.12 Condicionales
+ 9.12 Condicionales
// antiguo
if (type == 'foo' || type == 'bar') { ... }
@@ -3113,21 +3113,21 @@ 9.12 Con
if (({ foo : 1, bar : 1 })[type]) { ... }
- 9.13 No Tratar a jQuery como si fuera una Caja Negra
- Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
+ 9.13 No Tratar a jQuery como si fuera una Caja Negra
+ Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
- 10 Organización del Código
+ 10 Organización del Código
- 10.1 Introducción
+ 10.1 Introducción
Cuando se emprende la tarea de realizar aplicaciones complejas del lado del cliente, es necesario considerar la forma en que se organizará el código. Este capitulo está dedicado a analizar algunos patrones de organización de código para utilizar en una aplicación realizada con jQuery. Además se explorará el sistema de gestión de dependencias de RequireJS.
- 10.1.1 Conceptos Clave
+ 10.1.1 Conceptos Clave
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:
el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque $(document).ready(). Este concepto se conoce como encapsulación;
no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
las unidades de funcionalidad deben tener una articulación flexible (en inglés loosely coupled) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
@@ -3135,11 +3135,11 @@ 10.1.1
- 10.2 Encapsulación
+ 10.2 Encapsulación
El primer paso para la organización del código es separar la aplicación en distintas piezas.
Muchas veces, este esfuerzo suele ser suficiente para mantener al código en orden.
- 10.2.1 El Objeto Literal
+ 10.2.1 El Objeto Literal
Un objeto literal es tal vez la manera más simple de encapsular código relacionado. Este no ofrece ninguna privacidad para propiedades o métodos, pero es útil para eliminar funciones anónimas, centralizar opciones de configuración, y facilitar el camino para la reutilización y refactorización.
Un objeto literal
var myFeature = {
@@ -3192,7 +3192,7 @@ 10.2.1urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
@@ -3254,7 +3254,7 @@ 10.2.1Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque $(document).ready(). Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque $(document).ready().
- 10.2.2 El Patrón Modular
+ 10.2.2 El Patrón Modular
El patrón modular supera algunas limitaciones del objeto literal, ofreciendo privacidad para variables y funciones, exponiendo a su vez (si se lo desea) una API pública.
El patrón modular
var feature =(function() {
@@ -3346,7 +3346,7 @@ 10.2.2
- 10.3 Gestión de Dependencias
+ 10.3 Gestión de Dependencias
Nota
Esta sección esta basada en la excelente documentación de RequireJS y es utilizada con el permiso de James Burke, autor de RequireJS.
@@ -3355,11 +3355,11 @@ 10.3
RequireJS es una herramienta de gestión de dependencias creada por James Burke, la cual ayuda a manejar los módulos, cargarlos en un orden correcto y combinarlos de forma fácil sin tener que realizar ningún cambio. A su vez, otorga una manera fácil de cargar código una vez cargada la página, permitiendo minimizar el tiempo de descarga.
RequireJS posee un sistema modular, que sin embargo, no es necesario seguirlo para obtener sus beneficios. El formato modular de RequireJS permite la escritura de código encapsulado, incorporación de internacionalización (i18n) a los paquetes (para permitir utilizarlos en diferentes lenguajes) e incluso la utilización de servicios JSONP como dependencias.
- 10.3.1 Obtener RequireJS
+ 10.3.1 Obtener RequireJS
La manera más fácil de utilizar RequireJS con jQuery es descargando el paquete de jQuery con RequireJS ya incorporado en él. Este paquete excluye porciones de código que duplican funciones de jQuery. También es útil descargar un ejemplo de proyecto jQuery que utiliza RequireJS.
- 10.3.2 Utilizar RequireJS con jQuery
+ 10.3.2 Utilizar RequireJS con jQuery
Utilizar RequireJS es simple, tan solo es necesario incorporar en la página la versión de jQuery que posee RequireJS incorporado y a continuación solicitar los archivos de la aplicación. El siguiente ejemplo asume que tanto jQuery como los otros archivos están dentro de la carpeta scripts/.
Utilizar RequireJS: Un ejemplo simple
<!DOCTYPE html>
@@ -3385,7 +3385,7 @@
- 10.3.3 Crear Módulos Reusables con RequireJS
+ 10.3.3 Crear Módulos Reusables con RequireJS
RequireJS hace que sea fácil definir módulos reusables a través de require.def(). Un modulo RequireJS puede tener dependencias que pueden ser utilizadas para definir un módulo, además de poder devolver un valor — un objeto, una función, u otra cosa — que puede ser incluso utilizado otros módulos.
Si el módulo no posee ninguna dependencia, tan solo se debe especificar el nombre como primer argumento de require.def(). El segundo argumento es un objeto literal que define las propiedades del módulo. Por ejemplo:
Definición de un módulo RequireJS que no posee dependencias
@@ -3414,8 +3414,8 @@ my/cart.js
- my/inventory.js
- my/shirt.js
+ my/inventory.js
+ my/shirt.js
La función que define my/shirt no es llamada hasta que my/cart y my/inventory hayan sido cargadas, y dicha función recibe como argumentos a los módulos como cart y inventory. El orden de los argumentos de la función debe coincidir con el orden en que las dependencias se requieren en el vector. El objeto devuelto define el módulo my/shirt. Definiendo los módulos de esta forma, my/shirt no existe como un objeto global, ya que múltiples módulos pueden existir en la página al mismo tiempo.
Los módulos no tienen que devolver un objeto; cualquier tipo de valor es permitido.
Definición de un módulo RequireJS que devuelve una función
@@ -3433,14 +3433,14 @@
- 10.3.4 Optimizar el Código con las Herramientas de RequireJS
+ 10.3.4 Optimizar el Código con las Herramientas de RequireJS
Una vez incorporado RequireJS para el manejo de dependencias, la optimización del código es muy fácil. Descargue el paquete de RequireJS y colóquelo en cualquier lugar, preferentemente fuera del área de desarrollo web. Para los propósitos de este ejemplo, el paquete de RequireJS esta ubicado en una carpeta paralela al directorio webapp (la cual contiene la página HTML y todos los archivos JavaScript de la aplicación). La estructura de directorios es:
requirejs/ (utilizado para ejecutar las herramientas)
webapp/app.html
- webapp/scripts/app.js
- webapp/scripts/require-jquery.js
- webapp/scripts/jquery.alpha.js
- webapp/scripts/jquery.beta.js
+ webapp/scripts/app.js
+ webapp/scripts/require-jquery.js
+ webapp/scripts/jquery.alpha.js
+ webapp/scripts/jquery.beta.js
Luego, en la carpeta en donde se encuentran require-jquery.js y app.js, crear un archivo llamado app.build.js con el siguiente contenido:
Archivo de configuración para las herramientas de optimización de RequireJS
{
@@ -3469,9 +3469,9 @@
- 10.4 Ejercicios
+ 10.4 Ejercicios
- 10.4.1 Crear un Módulo Portlet
+ 10.4.1 Crear un Módulo Portlet
Abra el archivo /ejercicios/portlets.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/portlets.js. El ejercicio consiste en crear una función creadora de portlet que utilice el patrón modular, de tal manera que el siguiente código funcione:
var myPortlet = Portlet({
title : 'Curry',
@@ -3491,9 +3491,9 @@ 10.4
- 11 Eventos Personalizados
+ 11 Eventos Personalizados
- 11.1 Introducción a los Eventos Personalizados
+ 11.1 Introducción a los Eventos Personalizados
Todos estamos familiarizados con los eventos básicos — click, mouseover, focus, blur, submit, etc. — que surgen a partir de la interacción del usuario con el navegador.
Los eventos personalizados permiten conocer el mundo de la programación orientada a eventos (en inglés event-driven programming). En este capítulo, se utilizará el sistema de eventos personalizados de jQuery para crear una simple aplicación de búsqueda en Twitter.
En un primer momento puede ser difícil entender el requisito de utilizar eventos personalizados, ya que los eventos convencionales permiten satisfacer todas las necesidades. Sin embargo, los eventos personalizados ofrecen una nueva forma de pensar la programación en JavaScript. En lugar de enfocarse en el elemento que ejecuta una acción, los eventos personalizados ponen la atención en el elemento en donde la acción va a ocurrir. Este concepto brinda varios beneficios:
@@ -3580,7 +3580,7 @@ . fn. ony.fn.trigger
+ Recapitulación: $.fn.on y $.fn.trigger
En el mundo de los eventos personalizados, existen dos métodos importantes de jQuery: $.fn.on y $.fn.trigger. En el capítulo dedicado a eventos se explicó la utilización de estos dos métodos para trabajar con eventos del usuario; en este capítulo es importante recordar 2 puntos:
el método $.fn.on toma como argumentos un tipo de evento y una función controladora de evento. Opcionalmente, puede recibir información asociada al evento como segundo argumento, desplazando como tercer argumento a la función controladora de evento. Cualquier información pasada estará disponible a la función controladora a través de la propiedad data del objeto del evento. A su vez, la función controladora recibe el objeto del evento como primer argumento;
$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);
- 11.1.1 Un Ejemplo de Aplicación
+ 11.1.1 Un Ejemplo de Aplicación
Para demostrar el poder de los eventos personalizados, se desarrollará una simple herramienta para buscar en Twitter. Dicha herramienta ofrecerá varias maneras para que el usuario realice una búsqueda: ingresando el término a buscar en una caja de texto o consultando los “temas de moda” de Twitter.
Los resultados de cada término se mostrarán en un contenedor de resultados; dichos resultados podrán expandirse, colapsarse, refrescarse y removerse, ya sea de forma individual o conjunta.
El resultado final de la aplicación será el siguiente:
@@ -3604,7 +3604,7 @@ 11.
La aplicación finalizada
- 11.1.1.1 Iniciación
+ 11.1.1.1 Iniciación
Se empieza con un HTML básico:
<h1>Twitter Search</h1>
<input type="button" id="get_trends"
@@ -3628,19 +3628,19 @@ 11.1.1.1 I
Los contenedores de resultados son el corazón de la aplicación. Se creará una extensión para preparar cada contenedor una vez que éste se agrega al contenedor Twitter. Además, entre otras cosas, la extensión vinculará los eventos personalizados por cada contenedor y añadirá en la parte superior derecha de cada contenedor botones que ejecutarán acciones. Cada contenedor de resultados tendrá los siguientes eventos personalizados:
- refresh
- Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
+ - Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
- populate
- Recibe la información JSON y la utiliza para rellenar el contenedor.
+ - Recibe la información JSON y la utiliza para rellenar el contenedor.
- remove
- Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
+ - Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa
true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
- collapse
- Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
+ - Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
- expand
- Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
+ - Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
Además, la extensión es responsable de añadir los botones de acciones al contenedor, vinculando un evento click a cada botón y utilizando la clase de cada ítem para determinar qué evento personalizado será ejecutado en cada contenedor de resultados.
@@ -3759,10 +3759,10 @@ 11.1.1.1 I
El contenedor Twitter, posee solo dos eventos personalizados:
- getResults
- Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión $.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
+ - Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión
$.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
- getTrends
- Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
+ - Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento
getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
Vinculaciones en el contenedor Twitter:
@@ -3820,7 +3820,7 @@ 11.1.1.1 I
});
- 11.1.1.2 Conclusión
+ 11.1.1.2 Conclusión
Los eventos personalizados ofrecen una nueva manera de pensar el código: ellos ponen el énfasis en el objetivo de un comportamiento, no en el elemento que lo activa. Si se toma el tiempo desde el principio para explicar las piezas de su aplicación, así como los comportamientos que esas piezas necesitan exhibir, los eventos personalizados proveen una manera poderosa para “hablar” con esas piezas, ya sea de una en una o en masa.
Una vez que los comportamientos se han descripto, se convierte en algo trivial ejecutarlos desde cualquier lugar, lo que permite la rápida creación y experimentación de opciones de interfaz. Finalmente, los eventos personalizados también permiten mejorar la lectura del código y su mantenimiento, haciendo clara la relación entre un elemento y su comportamiento.
Puede ver la aplicación completa en los archivos demos/custom-events/custom-events.html y demos/custom-events/js/custom-events.js del material que componen este libro.
@@ -3829,13 +3829,13 @@ 11.1.1.2
- 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
+ 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
- 12.1 Introducción
- A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
+ 12.1 Introducción
+ A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
- 12.2 El objeto diferido y Ajax
+ 12.2 El objeto diferido y Ajax
El caso más común en donde se puede apreciar la utilidad del objeto diferido es en el manejo de las funciones de devolución en peticiones Ajax.
Según se pudo apreciar en el capítulo dedicado, una manera de invocar una petición Ajax es:
Manera tradicional de utilizar el método $.ajax
@@ -3882,8 +3882,8 @@ 12.
ajax.always(function(){
alert('Petición realizada');
});
- A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
- Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
+ A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
+ Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
Colas de funciones de devolución en una petición Ajax
// definición de la petición Ajax
@@ -3917,10 +3917,10 @@ 12.
ajax.fail(function(){
alert('Disculpe, existió un problema');
});
- Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+ Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
- 12.2.1 deferred.then
- Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+ 12.2.1 deferred.then
+ Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
Utilización del método deferred.then
// definición de la petición Ajax
var ajax = $.ajax({
@@ -3935,7 +3935,7 @@ 12.2.1 <
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -3944,7 +3944,7 @@ 12.2.1 <
- 12.3 Creación de objetos diferidos con $.Deferred
+ 12.3 Creación de objetos diferidos con $.Deferred
Así como es posible desacoplar las funciones de devolución en una petición Ajax, también es posible realizarlo en otras funciones utilizando de manera explícita el objeto $.Deferred.
Por ejemplo, una función que verifica si un número es par, de la manera tradicional puede escribirse de la siguiente manera:
Función sin utilizar el objeto $.Deferred
@@ -3996,7 +3996,7 @@ console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -4006,7 +4006,7 @@ http://api.jquery.com/deferred.state/.
+
Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pending, resolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.
- 12.3.1 deferred.pipe
+ 12.3.1 deferred.pipe
Existen casos en que se necesita modificar el estado de un objeto diferido o filtrar la información que viene asociada. Para estos casos existe deferred.pipe. Su funcionamiento es similar a deferred.then, con la diferencia que deferred.pipe devuelve un nuevo objeto diferido modificado a través de una función interna.
Función filtrando valores utilizando deferred.pipe
// función que calcula si un número entero es par o impar
@@ -4098,11 +4098,11 @@ 12.3.1 <
}
);
- Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
+ Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
- 12.3.2 $.when
- El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+ 12.3.2 $.when
+ El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de $.when es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
Utilización de $.when
// primera petición ajax
@@ -4126,7 +4126,7 @@ 12.3.2 $.wh
alert('Disculpe, existió un problema');
}
);
- Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
+ Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
Copyright © 2011
Material licenciado por Rebecca Murphey bajo la licencia Creative Commons Attribution-Share Alike 3.0 United States. Usted es libre de copiarlo, distribuirlo, transmitirlo y modificarlo, siempre y cuando haga referencia a este repositorio y atribuya la autoría original a Rebecca Murphey. Si altera, transforma o crea una obra derivada, deberá distribuir el resultado bajo una licencia igual, similar o compatible. Cualquiera de las condiciones mencionadas pueden no aplicarse si obtiene permisos del autor. Para cualquier reutilización o distribución, deberá dejar en claro la licencia la mejor manera para hacerlo es a través de un enlace hacia la licencia Creative Commons Attribution-Share Alike 3.0 United States.
diff --git a/libro/markdown/cap05-eventos.markdown b/libro/markdown/cap05-eventos.markdown
index d39fccb..6dbaf9f 100644
--- a/libro/markdown/cap05-eventos.markdown
+++ b/libro/markdown/cap05-eventos.markdown
@@ -293,7 +293,7 @@ $('p.expander').toggle(
### Crear una "Sugerencia" para una Caja de Ingreso de Texto
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
1. Establecer el valor del elemento *input* igual al valor del elemento *label*.
@@ -311,7 +311,7 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio ut
### Añadir una Navegación por Pestañas
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
1. Ocultar todos los elementos *div.module*.
diff --git a/libro/markdown/cap07-ajax.markdown b/libro/markdown/cap07-ajax.markdown
index dc7a975..89ad0bd 100644
--- a/libro/markdown/cap07-ajax.markdown
+++ b/libro/markdown/cap07-ajax.markdown
@@ -187,7 +187,7 @@ El método $.ajax posee muchas opciones de configuración, y es justamente esta
~ Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición *JSONP*. De forma predeterminada el nombre es "*callback*
success
- ~ Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
+ ~ Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
timeout
~ Establece un tiempo en milisegundos para considerar a una petición como fallada.
@@ -208,7 +208,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
> **Nota**
>
-> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
+> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
>
@@ -220,7 +220,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
### Métodos Convenientes
-En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores pre-establecidos de configuración).
+En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
diff --git a/libro/markdown/cap08-extensiones.markdown b/libro/markdown/cap08-extensiones.markdown
index a369123..96bf898 100644
--- a/libro/markdown/cap08-extensiones.markdown
+++ b/libro/markdown/cap08-extensiones.markdown
@@ -146,7 +146,7 @@ Google es la mejor herramienta para encontrar extensiones (aunque el equipo de j
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) [Signs of a poorly written jQuery plugin](http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/) por Remy Sharp.
-Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
@@ -154,7 +154,7 @@ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero,
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
-La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
diff --git a/libro/markdown/cap10-organizacion-codigo.markdown b/libro/markdown/cap10-organizacion-codigo.markdown
index b93c3d3..a6f098d 100644
--- a/libro/markdown/cap10-organizacion-codigo.markdown
+++ b/libro/markdown/cap10-organizacion-codigo.markdown
@@ -14,7 +14,7 @@ Antes de comenzar con los patrones de organización de código, es importante en
- el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación;
-- no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
+- no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
- a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
@@ -100,7 +100,7 @@ var myFeature = {
urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
diff --git a/libro/markdown/cap12-funciones-diferidas.markdown b/libro/markdown/cap12-funciones-diferidas.markdown
index 7a5a7fc..d38e5a6 100644
--- a/libro/markdown/cap12-funciones-diferidas.markdown
+++ b/libro/markdown/cap12-funciones-diferidas.markdown
@@ -71,10 +71,10 @@ ajax.always(function(){
```
-A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
+A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
-*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
+*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
@@ -117,13 +117,13 @@ ajax.fail(function(){
```
-Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
### `deferred.then`
-Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
**Utilización del método `deferred.then`**
@@ -142,7 +142,7 @@ ajax.then(
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -216,7 +216,7 @@ isEven(2).then(
console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -232,7 +232,7 @@ Notar que la función `isEven` devuelve el método `deferred.promise`. El mismo
> **Nota**
>
-> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implicitamente dentro del objeto `$.ajax`.
+> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implícitamente dentro del objeto `$.ajax`.
@@ -347,7 +347,7 @@ Para más detalles sobre `deferred.pipe`, puede consultar [http://api.jquery.com
### `$.when`
-El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de `$.when` es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
diff --git a/libro/pdf/Fundamentos_de_jQuery.pdf b/libro/pdf/Fundamentos_de_jQuery.pdf
index a2be6c5..80741e2 100644
Binary files a/libro/pdf/Fundamentos_de_jQuery.pdf and b/libro/pdf/Fundamentos_de_jQuery.pdf differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..464a26a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "librojquery",
+ "version": "1.0.0",
+ "description": "Fundamentos de jQuery: Material de aprendizaje",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/dzignus/librojquery.git"
+ },
+ "author": "Leandro D'Onofrio",
+ "license": "Creative Commons Attribution-Share Alike 3.0 United States",
+ "bugs": {
+ "url": "https://github.com/dzignus/librojquery/issues"
+ },
+ "homepage": "https://github.com/dzignus/librojquery",
+ "dependencies": {
+ "hapi": "^18.1.0"
+ }
+}
3.2.1 Comprobar Selecciones
+3.2.1 Comprobar Selecciones
Una vez realizada la selección de los elementos, querrá conocer si dicha selección entregó algún resultado. Para ello, pueda que escriba algo así:
if ($('div.foo')) { ... }Sin embargo esta forma no funcionará. Cuando se realiza una selección utilizando $(), siempre es devuelto un objeto, y si se lo evalúa, éste siempre devolverá true. Incluso si la selección no contiene ningún elemento, el código dentro del bloque if se ejecutará.
3.2.1if ($('div.foo').length) { ... }
3.2.2 Guardar Selecciones
+3.2.2 Guardar Selecciones
Cada vez que se hace una selección, una gran cantidad de código es ejecutado. jQuery no guarda el resultado por si solo, por lo tanto, si va a realizar una selección que luego se hará de nuevo, deberá salvar la selección en una variable.
Guardar selecciones en una variable
var $divs = $('div');3.2.2
3.2.3 Refinamiento y Filtrado de Selecciones
+3.2.3 Refinamiento y Filtrado de Selecciones
A veces, puede obtener una selección que contiene más de lo que necesita; en este caso, es necesario refinar dicha selección. jQuery ofrece varios métodos para poder obtener exactamente lo que desea.
Refinamiento de selecciones
$('div.foo').has('p'); // el elemento div.foo contiene elementos <p>
@@ -1226,50 +1226,50 @@ $('ul li').eq(5); // el sexto item de una lista desordenada
3.2.4 Selección de Elementos de un Formulario
+3.2.4 Selección de Elementos de un Formulario
jQuery ofrece varios pseudo-selectores que ayudan a encontrar elementos dentro de los formularios, éstos son especialmente útiles ya que dependiendo de los estados de cada elemento o su tipo, puede ser difícil distinguirlos utilizando selectores CSS estándar.
- :button -
Selecciona elementos
+<button>y con el atributotype='button'- Selecciona elementos
<button>y con el atributotype='button'- Selecciona elementos
- :checkbox -
Selecciona elementos
+<input>con el atributotype='checkbox'- Selecciona elementos
<input>con el atributotype='checkbox'- Selecciona elementos
- :checked -
Selecciona elementos
+<input>del tipocheckboxseleccionados- Selecciona elementos
<input>del tipocheckboxseleccionados- Selecciona elementos
- :disabled -
Selecciona elementos del formulario que están deshabitados
+- Selecciona elementos del formulario que están deshabitados
- :enabled -
Selecciona elementos del formulario que están habilitados
+- Selecciona elementos del formulario que están habilitados
- :file -
Selecciona elementos
+<input>con el atributotype='file'- Selecciona elementos
<input>con el atributotype='file'- Selecciona elementos
- :image -
Selecciona elementos
+<input>con el atributotype='image'- Selecciona elementos
<input>con el atributotype='image'- Selecciona elementos
- :input -
Selecciona elementos
+<input>,<textarea>y<select>- Selecciona elementos
<input>,<textarea>y<select>- Selecciona elementos
- :password -
Selecciona elementos
+<input>con el atributotype='password'- Selecciona elementos
<input>con el atributotype='password'- Selecciona elementos
- :radio -
Selecciona elementos
+<input>con el atributotype='radio'- Selecciona elementos
<input>con el atributotype='radio'- Selecciona elementos
- :reset -
Selecciona elementos
+<input>con el atributotype='reset'- Selecciona elementos
<input>con el atributotype='reset'- Selecciona elementos
- :selected -
Selecciona elementos
+<options>que están seleccionados- Selecciona elementos
<options>que están seleccionados- Selecciona elementos
- :submit -
Selecciona elementos
+<input>con el atributotype='submit'- Selecciona elementos
<input>con el atributotype='submit'- Selecciona elementos
- :text -
Selecciona elementos
+<input>con el atributotype='text'- Selecciona elementos
<input>con el atributotype='text'- Selecciona elementos
Utilizando pseudo-selectores en elementos de formularios
@@ -1278,10 +1278,10 @@
- 3.3 Trabajar con Selecciones
+ 3.3 Trabajar con Selecciones
Una vez realizada la selección de los elementos, es posible utilizarlos en conjunto con diferentes métodos. éstos, generalmente, son de dos tipos: obtenedores (en inglés getters) y establecedores (en inglés setters). Los métodos obtenedores devuelven una propiedad del elemento seleccionado; mientras que los métodos establecedores fijan una propiedad a todos los elementos seleccionados.
- 3.3.1 Encadenamiento
+ 3.3.1 Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto jQuery, es posible seguir un “encadenado” de métodos en el objeto.
Encadenamiento
$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');
@@ -1306,7 +1306,7 @@ 3.3.1 E
- 3.3.2 Obtenedores (Getters) & Establecedores (Setters)
+ 3.3.2 Obtenedores (Getters) & Establecedores (Setters)
jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un valor posee el mismo nombre que el método para obtener un valor. Cuando un método es utilizado para establecer un valor, es llamado método establecedor (en inglés setter). En cambio, cuando un método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés getter).
El método $.fn.html utilizado como establecedor
$('h1').html('hello world');
@@ -1316,7 +1316,7 @@
- 3.4 CSS, Estilos, & Dimensiones
+ 3.4 CSS, Estilos, & Dimensiones
jQuery incluye una manera útil de obtener y establecer propiedades CSS a los elementos.
Nota
@@ -1339,7 +1339,7 @@ 3.4'paddingTop' : '+=20px' // suma 20px al padding superior original del elemento
});
- 3.4.1 Utilizar Clases para Aplicar Estilos CSS
+ 3.4.1 Utilizar Clases para Aplicar Estilos CSS
Para obtener valores de los estilos aplicados a un elemento, el método $.fn.css es muy útil, sin embargo, su utilización como método establecedor se debe evitar (ya que, para aplicar estilos a un elemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS que se apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo que se desea mostrar.
Trabajar con clases
var $h1 = $('h1');
@@ -1352,9 +1352,9 @@
- 3.4.2 Dimensiones
+ 3.4.2 Dimensiones
jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.
- El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
+ El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
Métodos básicos sobre Dimensiones
$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1
@@ -1369,7 +1369,7 @@ 3.4.2 Dime
- 3.5 Atributos
+ 3.5 Atributos
Los atributos de los elementos HTML que conforman una aplicación pueden contener información útil, por eso es importante poder establecer y obtener esa información.
El método $.fn.attr actúa tanto como método establecedor como obtenedor. Además, al igual que el método $.fn.css, cuando se lo utiliza como método establecedor, puede aceptar un conjunto de palabra clave-valor o un objeto conteniendo más conjuntos.
Establecer atributos
@@ -1384,9 +1384,9 @@ 3.5 Atributo
// al primer elemento <a> del documento
- 3.6 Recorrer el DOM
+ 3.6 Recorrer el DOM
Una vez obtenida la selección, es posible encontrar otros elementos utilizando a la misma selección.
- En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
+ En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
Nota
Debe ser cuidadoso en recorrer largas distancias en un documento — recorridos complejos obligan que la estructura del documento sea siempre la misma, algo que es difícil de garantizar. Uno -o dos- pasos para el recorrido esta bien, pero generalmente hay que evitar atravesar desde un contenedor a otro.
@@ -1413,11 +1413,11 @@ 3.6 Re
});
- 3.7 Manipulación de Elementos
+ 3.7 Manipulación de Elementos
Una vez realizada la selección de los elementos que desea utilizar, “la diversión comienza”. Es posible cambiar, mover, remover y duplicar elementos. También crear nuevos a través de una sintaxis simple.
- La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
+ La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
- 3.7.1 Obtener y Establecer Información en Elementos
+ 3.7.1 Obtener y Establecer Información en Elementos
Existen muchas formas por las cuales de puede modificar un elemento. Entre las tareas más comunes están las de cambiar el HTML interno o algún atributo del mismo. Para este tipo de tareas, jQuery ofrece métodos simples, funcionales en todos los navegadores modernos. Incluso es posible obtener información sobre los elementos utilizando los mismos métodos pero en su forma de método obtenedor.
Nota
@@ -1429,25 +1429,25 @@ html('Nuevo <strong>primer</strong> párrafo');
- 3.7.2 Mover, Copiar y Remover Elementos
+ 3.7.2 Mover, Copiar y Remover Elementos
Existen varias maneras para mover elementos a través del DOM; las cuales se pueden separar en dos enfoques:
querer colocar el/los elementos seleccionados de forma relativa a otro elemento;
// lista de items que se ha movido, ya que devuelve
// la lista en sí
- 3.7.2.1 Clonar Elementos
+ 3.7.2.1 Clonar Elementos
Cuando se utiliza un método como $.fn.appendTo, lo que se está haciendo es mover al elemento; pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento. En este caso, es posible utilizar el método $.fn.clone.
Obtener una copia del elemento
// copiar el primer elemento de la lista y moverlo al final de la misma
@@ -1485,7 +1485,7 @@ 3.7.2.1
- 3.7.2.2 Remover elementos
+ 3.7.2.2 Remover elementos
Existen dos formas de remover elementos de una página: Utilizando $.fn.remove o $.fn.detach. Cuando desee remover de forma permanente al elemento, utilize el método $.fn.remove. Por otro lado, el método $.fn.detach también remueve el elemento, pero mantiene la información y eventos asociados al mismo, siendo útil en el caso que necesite reinsertar el elemento en el documento.
Nota
@@ -1495,7 +1495,7 @@ 3.7.2.2
- 3.7.3 Crear Nuevos Elementos
+ 3.7.3 Crear Nuevos Elementos
jQuery provee una forma fácil y elegante para crear nuevos elementos a través del mismo método $() que se utiliza para realizar selecciones.
Crear nuevos elementos
$('<p>Un nuevo párrafo</p>');
@@ -1532,7 +1532,7 @@ 3.7.3<
$myList.append(myItems.join(''));
- 3.7.4 Manipulación de Atributos
+ 3.7.4 Manipulación de Atributos
Las capacidades para la manipulación de atributos que ofrece la biblioteca son extensos. La realización de cambios básicos son simples, sin embargo el método $.fn.attr permite manipulaciones más complejas.
Manipular un simple atributo
$('#myDiv a:first').attr('href', 'newDestination.html');
@@ -1555,9 +1555,9 @@ 3.
- 3.8 Ejercicios
+ 3.8 Ejercicios
- 3.8.1 Selecciones
+ 3.8.1 Selecciones
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todos los elementos div que poseen la clase “module”.
3.8.1 Sele
- 3.8.2 Recorrer el DOM
+ 3.8.2 Recorrer el DOM
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todas las imágenes en la página; registrar en la consola el atributo alt de cada imagen.
3.8.2
- 3.8.3 Manipulación
+ 3.8.3 Manipulación
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
- Añadir 5 nuevos ítems al final de la lista desordenada #myList. Ayuda:
@@ -1596,9 +1596,9 @@ 3.8.3 Ma
- 4 El núcleo de jQuery
+ 4 El núcleo de jQuery
- 4.1 $ vs $()
+ 4.1 $ vs $()
Hasta ahora, se ha tratado completamente con métodos que se llaman desde el objeto jQuery. Por ejemplo:
$('h1').remove();
Dichos métodos son parte del espacio de nombres (en inglés namespace) $.fn, o del prototipo (en inglés prototype) de jQuery, y son considerados como métodos del objeto jQuery.
@@ -1611,8 +1611,8 @@ 4.1 $
Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con $.each y $.fn.each. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.
- 4.2 Métodos Utilitarios
- jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
+ 4.2 Métodos Utilitarios
+ jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
- $.trim
- Remueve los espacios en blanco del principio y final.
@@ -1687,7 +1687,7 @@
4.2$('#foo').click($.proxy(myObject, 'myFn')); // registra myObject
- 4.3 Comprobación de Tipos
+ 4.3 Comprobación de Tipos
Como se mencionó en el capítulo “Conceptos Básicos de JavaScript”, jQuery ofrece varios métodos útiles para determinar el tipo de un valor específico.
Comprobar el tipo de un determinado valor
var myValue = [1, 2, 3];
@@ -1708,7 +1708,7 @@ 4.3jQuery.isNumeric(16); // verdadero (true). No disponible en versiones inferiores a jQuery 1.7
- 4.4 El Método Data
+ 4.4 El Método Data
A menudo encontrará que existe información acerca de un elemento que necesita guardar. En JavaScript es posible hacerlo añadiendo propiedades al DOM del elemento, pero esta práctica conlleva enfrentarse a pérdidas de memoria (en inglés memory leaks) en algunos navegadores. jQuery ofrece una manera sencilla para poder guardar información relacionada a un elemento, y la misma biblioteca se ocupa de manejar los problemas que pueden surgir por falta de memoria.
Guardar y recuperar información relacionada a un elemento
$('#myDiv').data('keyName', { foo : 'bar' });
@@ -1744,18 +1744,18 @@ 4.4 El
Nota
- Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
+ Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
- 4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
+ 4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
Si esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales también utilizan la variable $, pueden llegar a ocurrir una serie de errores. Para poder solucionarlos, es necesario poner a jQuery en su modo “no-conflicto”. Esto se debe realizar inmediatamente después que jQuery se cargue en la página y antes del código que se va a ejecutar.
Cuando se pone a jQuery en modo “no-conflicto”, la biblioteca ofrece la opción de asignar un nombre para reemplazar a la variable $.
Poner a jQuery en modo no-conflicto
@@ -1779,15 +1779,15 @@
- 5 Eventos
+ 5 Eventos
- 5.1 Introducción
+ 5.1 Introducción
jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.
- Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
- La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
+ Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
+ La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
- 5.2 Vincular Eventos a Elementos
+ 5.2 Vincular Eventos a Elementos
jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.on de jQuery ($.fn.bind en versiones anteriores a jQuery 1.7). El método $.fn.on es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.
Vincular un evento utilizando un método reducido
$('p').click(function() {
@@ -1808,7 +1808,7 @@
}
);
- 5.2.1 Vincular Eventos para Ejecutar una vez
+ 5.2.1 Vincular Eventos para Ejecutar una vez
A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.
Cambiar controladores utilizando el método $.fn.one
$('p').one('click', function() {
@@ -1818,7 +1818,7 @@
- 5.2.2 Desvincular Eventos
+ 5.2.2 Desvincular Eventos
Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.off pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.
Desvincular todos los controladores del evento click en una selección
$('p').off('click');
@@ -1830,7 +1830,7 @@ 5.2.2$('p').off('click', bar); // foo esta atado aún al evento click
- 5.2.3 Espacios de Nombres para Eventos
+ 5.2.3 Espacios de Nombres para Eventos
Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.
Asignar espacios de nombres a eventos
$('p').on('click.myNamespace', function() { /* ... */ });
@@ -1839,7 +1839,7 @@ // el espacio de nombre 'myNamespace'
- 5.2.4 Vinculación de Múltiples Eventos
+ 5.2.4 Vinculación de Múltiples Eventos
Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.on con uno o más pares de nombres claves/valores. Cada clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.
Vincular múltiples eventos a un elemento
$('p').on({
@@ -1853,29 +1853,29 @@
- 5.3 El Objeto del Evento
+ 5.3 El Objeto del Evento
Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:
- pageX, pageY
- La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
+ - La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
- type
- El tipo de evento (por ejemplo “click”).
+ - El tipo de evento (por ejemplo “click”).
- which
- El botón o tecla presionada.
+ - El botón o tecla presionada.
- data
- Alguna información pasada cuando el evento es ejecutado.
+ - Alguna información pasada cuando el evento es ejecutado.
- target
- El elemento DOM que inicializó el evento.
+ - El elemento DOM que inicializó el evento.
- preventDefault()
- Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
+ - Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
- stopPropagation()
- Detiene la propagación del evento sobre otros elementos.
+ - Detiene la propagación del evento sobre otros elementos.
Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:
@@ -1890,7 +1890,7 @@ 5.3
- 5.4 Ejecución automática de Controladores de Eventos
+ 5.4 Ejecución automática de Controladores de Eventos
A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.
Disparar un controlador de eventos de la forma correcta
var foo = function(e) {
@@ -1907,7 +1907,7 @@ foo(); // en lugar de realizar $('p').trigger('click')
- 5.5 Incrementar el Rendimiento con la Delegación de Eventos
+ 5.5 Incrementar el Rendimiento con la Delegación de Eventos
Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede.
La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.
@@ -1925,7 +1925,7 @@ // ...
});
- 5.5.1 Desvincular Eventos Delegados
+ 5.5.1 Desvincular Eventos Delegados
Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método $.fn.off para eventos conectados con $.fn.on, y $.fn.undelegate para eventos conectados con $.fn.delegate. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.
Desvincular eventos delegados
$('#myUnorderedList').off('click', 'li');
@@ -1933,10 +1933,10 @@
- 5.6 Funciones Auxiliares de Eventos
+ 5.6 Funciones Auxiliares de Eventos
jQuery ofrece dos funciones auxiliares para el trabajo con eventos:
- 5.6.1 $.fn.hover
+ 5.6.1 $.fn.hover
El método $.fn.hover permite pasar una o dos funciones que se ejecutarán cuando los eventos mouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el evento mouseenter, mientras que la segunda será ejecutada cuando ocurra mouseleave.
Nota
@@ -1948,7 +1948,7 @@ 5.6.1 $
});
- 5.6.2 $.fn.toggle
+ 5.6.2 $.fn.toggle
Al igual que el método anterior, $.fn.toggle recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, $.fn.toggle es utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.
La función auxiliar toggle
$('p.expander').toggle(
@@ -1962,10 +1962,10 @@ 5.6.2
- 5.7 Ejercicios
+ 5.7 Ejercicios
- 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+ 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
Establecer el valor del elemento input igual al valor del elemento label.
Añadir la clase “hint” al elemento input.
¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?
- 5.7.2 Añadir una Navegación por Pestañas
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
+ 5.7.2 Añadir una Navegación por Pestañas
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
Ocultar todos los elementos div.module.
Crear una lista desordenada antes del primer div.module para utilizar como pestañas.
- 6 Efectos
+ 6 Efectos
- 6.1 Introducción
+ 6.1 Introducción
Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.
- Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
+ Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
- 6.2 Efectos Incorporados en la Biblioteca
+ 6.2 Efectos Incorporados en la Biblioteca
Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:
- $.fn.show
- Muestra el elemento seleccionado.
+ - Muestra el elemento seleccionado.
- $.fn.hide
- Oculta el elemento seleccionado.
+ - Oculta el elemento seleccionado.
- $.fn.fadeIn
- De forma animada, cambia la opacidad del elemento seleccionado al 100%.
+ - De forma animada, cambia la opacidad del elemento seleccionado al 100%.
- $.fn.fadeOut
- De forma animada, cambia la opacidad del elemento seleccionado al 0
+ - De forma animada, cambia la opacidad del elemento seleccionado al 0
- $.fn.slideDown
- Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideUp
- Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideToggle
- Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
+ - Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
Uso básico de un efecto incorporado
$('h1').show();
- 6.2.1 Cambiar la Duración de los Efectos
+ 6.2.1 Cambiar la Duración de los Efectos
Con la excepción de $.fn.show y $.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400ms. Este valor es posible cambiarlo.
Configurar la duración de un efecto
$('h1').fadeIn(300); // desvanecimiento en 300ms
$('h1').fadeOut('slow'); // utilizar una definición de velocidad interna
- 6.2.1.1 jQuery.fx.speeds
+ 6.2.1.1 jQuery.fx.speeds
jQuery posee un objeto en jQuery.fx.speeds el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones “slow” y “fast”.
speeds: {
slow: 600,
@@ -2050,7 +2050,7 @@ 6.2.1.1
- 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
+ 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.] En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave this hace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando $(this).
Ejecutar cierto código cuando una animación haya concluido
$('div.old').fadeOut(300, function() { $(this).remove(); });
@@ -2070,7 +2070,7 @@
- 6.3 Efectos Personalizados con $.fn.animate
+ 6.3 Efectos Personalizados con $.fn.animate
Es posible realizar animaciones en propiedades CSS utilizando el método $.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.
Efectos personalizados con $.fn.animate
$('div.funtimes').animate(
@@ -2086,7 +2086,7 @@ color plugin. Más adelante en el libro de discutirá la utilización de extensiones.
- 6.3.1 Easing
+ 6.3.1 Easing
[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.
A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método $.fn.animate.
Transición de easing por cada propiedad
@@ -2097,18 +2097,18 @@ 6.3.1 Easing300
);
-
Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
+ Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
- 6.4 Control de los Efectos
+ 6.4 Control de los Efectos
jQuery provee varias herramientas para el manejo de animaciones.
- $.fn.stop
- Detiene las animaciones que se están ejecutando en el elemento seleccionado.
+ - Detiene las animaciones que se están ejecutando en el elemento seleccionado.
- $.fn.delay
- Espera un tiempo determinado antes de ejecutar la próxima animación.
+ - Espera un tiempo determinado antes de ejecutar la próxima animación.
$('h1').show(300).delay(1000).hide(300);
@@ -2119,9 +2119,9 @@ 6.4
- 6.5 Ejercicios
+ 6.5 Ejercicios
- 6.5.1 Mostrar Texto Oculto
+ 6.5.1 Mostrar Texto Oculto
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/blog.js. La tarea es añadir alguna interactividad a la sección blog de la página:
al hacer click en alguno de los titulares del div #blog, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
6.5.1
- 6.5.2 Crear un Menú Desplegable
+ 6.5.2 Crear un Menú Desplegable
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/navigation.js. La tarea es poder desplegar los ítems del menú superior de la página:
al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
6.
Para poder realizarlo, utilice el método $.fn.hover para añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo /ejercicios/css/styles.css incluye una clase “hover” para este propósito)
- 6.5.3 Crear un Slideshow
+ 6.5.3 Crear un Slideshow
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/slideshow.js. La tarea es añadir un slideshow a la página con JavaScript.
Mover el elemento #slideshow a la parte superior de la página.
6.5.3
- 7 Ajax
+ 7 Ajax
- 7.1 Introducción
+ 7.1 Introducción
El método XMLHttpRequest (XHR) permite a los navegadores comunicarse con el servidor sin la necesidad de recargar la página. Este método, también conocido como Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.
Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una petición a una URL y cuando recibe una respuesta, una función de devolución puede ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo con ella. Debido a que la respuesta es asíncrona, el resto del código de la aplicación continua ejecutándose, por lo cual, es imperativo que una función de devolución sea ejecutada para manejar la respuesta.
A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer las diferencias que pueden existir entre navegadores. Los métodos en cuestión son $.get(), $.getScript(), $.getJSON(), $.post() y $().load().
@@ -2160,48 +2160,48 @@ 7.1 In
En general, Ajax no trabaja a través de dominios diferentes. Sin embargo, existen excepciones, como los servicios que proveen información en formato JSONP (JSON with Padding), los cuales permiten una funcionalidad limitada a través de diferentes dominios.
- 7.2 Conceptos Clave
+ 7.2 Conceptos Clave
La utilización correcta de los métodos Ajax requiere primero la comprensión de algunos conceptos clave.
- 7.2.1 GET vs. POST
+ 7.2.1 GET vs. POST
Los dos métodos HTTP más comunes para enviar una petición a un servidor son GET y POST. Es importante entender la utilización de cada uno.
El método GET debe ser utilizado para operaciones no-destructivas — es decir, operaciones en donde se esta “obteniendo” datos del servidor, pero no modificando. Por ejemplo, una consulta a un servicio de búsqueda podría ser una petición GET. Por otro lado, las solicitudes GET pueden ser almacenadas en la cache del navegador, pudiendo conducir a un comportamiento impredecible si no se lo espera. Generalmente, la información enviada al servidor, es enviada en una cadena de datos (en inglés query string).
El método POST debe ser utilizado para operaciones destructivas — es decir, operaciones en donde se está incorporando información al servidor. Por ejemplo, cuando un usuario guarda un artículo en un blog, esta acción debería utilizar POST. Por otro lado, este tipo de método no se guarda en la cache del navegador. Además, una cadena de datos puede ser parte de la URL, pero la información tiende a ser enviada de forma separada.
- 7.2.2 Tipos de Datos
+ 7.2.2 Tipos de Datos
Generalmente, jQuery necesita algunas instrucciones sobre el tipo de información que se espera recibir cuando se realiza una petición Ajax. En algunos casos, el tipo de dato es especificado por el nombre del método, pero en otros casos se lo debe detallar como parte de la configuración del método:
- text
- Para el transporte de cadenas de caracteres simples.
+ - Para el transporte de cadenas de caracteres simples.
- html
- Para el transporte de bloques de código HTML que serán ubicados en la página.
+ - Para el transporte de bloques de código HTML que serán ubicados en la página.
- script
- Para añadir un nuevo script con código JavaScript a la página.
+ - Para añadir un nuevo script con código JavaScript a la página.
- json
- Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
+ - Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
Nota
- A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
+ A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en formato JSON.
- jsonp
- Para transportar información JSON de un dominio a otro.
+ - Para transportar información JSON de un dominio a otro.
- xml
- Para transportar información en formato XML.
+ - Para transportar información en formato XML.
A pesar de los diferentes tipos de datos de que se puede utilizar, es recomendable utilizar el formato JSON, ya que es muy flexible, permitiendo por ejemplo, enviar al mismo tiempo información plana y HTML.
- 7.2.3 Asincronismo
+ 7.2.3 Asincronismo
Debido a que, de forma predeterminada, las llamadas Ajax son asíncronas, la respuesta del servidor no esta disponible de forma inmediata. Por ejemplo, el siguiente código no debería funcionar:
var response;
$.get('foo.php', function(r) { response = r; });
@@ -2210,22 +2210,22 @@ 7.2.3 Asi
$.get('foo.php', function(response) { console.log(response); });
- 7.2.4 Políticas de Mismo Origen y JSONP
+ 7.2.4 Políticas de Mismo Origen y JSONP
En general, las peticiones Ajax están limitadas a utilizar el mismo protocolo (http o https), el mismo puerto y el mismo dominio de origen. Esta limitación no se aplica a los scripts cargados a través del método Ajax de jQuery.
La otra excepción es cuando se hace una petición que recibirá una respuesta en formato JSONP. En este caso, el proveedor de la respuesta debe responder la petición con un script que puede ser cargado utilizando la etiqueta <script>, evitando así la limitación de realizar peticiones desde el mismo dominio. Dicha respuesta contendrá la información solicitada, contenida en una función
- 7.2.5 Ajax y Firebug
+ 7.2.5 Ajax y Firebug
Firebug (o el inspector WebKit que viene incluido en Chrome o Safari) son herramientas imprescindibles para trabajar con peticiones Ajax, ya que es posible observarlas desde la pestaña Consola de Firebug (o yendo a Recursos > Panel XHR desde el inspector de Webkit) y revisar los detalles de dichas peticiones. Si algo esta fallando cuando trabaja con Ajax, este es el primer lugar en donde debe dirigirse para saber cual es el problema.
- 7.3 Métodos Ajax de jQuery
+ 7.3 Métodos Ajax de jQuery
Como se indicó anteriormente, jQuery posee varios métodos para trabajar con Ajax. Sin embargo, todos están basados en el método $.ajax, por lo tanto, su comprensión es obligatoria. A continuación se abarcará dicho método y luego se indicará un breve resumen sobre los demás métodos.
Generalmente, es preferible utilizar el método $.ajax en lugar de los otros, ya que ofrece más características y su configuración es muy comprensible.
- 7.3.1 $.ajax
- El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
+ 7.3.1 $.ajax
+ El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
Utilizar el método $.ajax
$.ajax({
// la URL para la petición
@@ -2267,54 +2267,54 @@ 7.3.1 $.ajaxUna aclaración sobre el parámetro dataType: Si el servidor devuelve información que es diferente al formato especificado, el código fallará, y la razón de porque lo hace no siempre quedará clara debido a que la respuesta HTTP no mostrará ningún tipo de error. Cuando esté trabajando con peticiones Ajax, debe estar seguro que el servidor esta enviando el tipo de información que esta solicitando y verifique que la cabecera Content-type es exacta al tipo de dato. Por ejemplo, para información en formato JSON, la cabecera Content-type debería ser application/json.
- 7.3.1.1 Opciones del método $.ajax
- El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
+ 7.3.1.1 Opciones del método $.ajax
+ El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
- async
- Establece si la petición será asíncrona o no. De forma predeterminada el valor es true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
+ - Establece si la petición será asíncrona o no. De forma predeterminada el valor es
true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
- cache
- Establece si la petición será guardada en la cache del navegador. De forma predeterminada es true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
+ - Establece si la petición será guardada en la cache del navegador. De forma predeterminada es
true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
- complete
- Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
+ - Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
- context
- Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
+ - Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de
this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
- data
- Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo foo=bar&baz=bim.)
+ - Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo
foo=bar&baz=bim.)
- dataType
- Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
+ - Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
- error
- Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
+ - Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
- jsonp
- Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
+ - Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
- success
- Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
+ - Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
- timeout
- Establece un tiempo en milisegundos para considerar a una petición como fallada.
+ - Establece un tiempo en milisegundos para considerar a una petición como fallada.
- traditional
- Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
+ - Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
- type
- De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
+ - De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
- url
- Establece la URL en donde se realiza la petición.
+ - Establece la URL en donde se realiza la petición.
La opción url es obligatoria para el método $.ajax;
- Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
+ Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
Nota
- A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
+ A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
Nota
@@ -2323,30 +2323,30 @@ 7.
- 7.3.2 Métodos Convenientes
- En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores pre-establecidos de configuración).
+ 7.3.2 Métodos Convenientes
+ En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
- $.get
- Realiza una petición GET a una URL provista.
+ - Realiza una petición GET a una URL provista.
- $.post
- Realiza una petición POST a una URL provista.
+ - Realiza una petición POST a una URL provista.
- $.getScript
- Añade un script a la página.
+ - Añade un script a la página.
- $.getJSON
- Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
+ - Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
Los métodos deben tener los siguientes argumentos, en orden:
- url
- La URL en donde se realizará la petición. Su valor es obligatorio.
+ - La URL en donde se realizará la petición. Su valor es obligatorio.
- data
- La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como foo=bar&baz=bim).
+ - La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como
foo=bar&baz=bim).
@@ -2355,10 +2355,10 @@ 7.3.2
- success callback
- Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
+ - Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
- data type
- El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
+ - El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
@@ -2384,7 +2384,7 @@ 7.3.2
- 7.3.3 $.fn.load
+ 7.3.3 $.fn.load
El método $.fn.load es el único que se puede llamar desde una selección. Dicho método obtiene el código HTML de una URL y rellena a los elementos seleccionados con la información obtenida. En conjunto con la URL, es posible especificar opcionalmente un selector, el cual obtendrá el código especificado en dicha selección.
Utilizar el método $.fn.load para rellenar un elemento
$('#newContent').load('/foo.html');
@@ -2395,7 +2395,7 @@ 7.3.3 $.
- 7.4 Ajax y Formularios
+ 7.4 Ajax y Formularios
Las capacidades de jQuery con Ajax pueden ser especialmente útiles para el trabajo con formularios. Por ejemplo, la extensión jQuery Form Plugin es una extensión para añadir capacidades Ajax a formularios. Existen dos métodos que debe conocer para cuando este realizando este tipo de trabajos: $.fn.serialize y $.fn.serializeArray.
Transformar información de un formulario a una cadena de datos
$('#myForm').serialize();
@@ -2409,7 +2409,7 @@ 7.4
]
- 7.5 Trabajar con JSONP
+ 7.5 Trabajar con JSONP
En los últimos tiempos, la introducción de JSONP, ha permitido la creación de aplicaciones híbridas de contenidos. Muchos sitios importantes ofrecen JSONP como servicio de información, el cual se accede a través de una API (en inglés Application programming interface) predefinida. Un servicio particular que permite obtener información en formato JSONP es Yahoo! Query Language, el cual se utiliza a continuación para obtener, por ejemplo, noticias sobre gatos:
Utilizar YQL y JSONP
$.ajax({
@@ -2437,17 +2437,17 @@ 7.5
jQuery se encarga de solucionar todos los aspectos complejos de la petición JSONP. Lo único que debe hacer es especificar el nombre de la función de devolución (en este caso “callback”, según lo especifica YQL) y el resultado final será como una petición Ajax normal.
- 7.6 Eventos Ajax
- A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
+ 7.6 Eventos Ajax
+ A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
Mostrar/Ocultar un indicador utilizando Eventos Ajax
$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });
- 7.7 Ejercicios
+ 7.7 Ejercicios
- 7.7.1 Cargar Contenido Externo
+ 7.7.1 Cargar Contenido Externo
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/load.js. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.
Crear un elementos div después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando $.fn.data.
7.7.
Recuerde utilizar console.log para asegurarse que esta realizando lo correcto.
- 7.7.2 Cargar Contenido Utilizando JSON
+ 7.7.2 Cargar Contenido Utilizando JSON
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/specials.js. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.
Añadir un elemento div después del formulario que se encuentra dentro del elemento #specials; allí será el lugar en donde se colocará la información a obtener.
- 8 Extensiones
+ 8 Extensiones
- 8.1 ¿Qué es una Extensión?
+ 8.1 ¿Qué es una Extensión?
Una extensión de jQuery es simplemente un nuevo método que se utilizará para extender el prototipo (prototype) del objeto jQuery. Cuando se extiende el prototipo, todos los objetos jQuery hereden los métodos añadidos. Por lo tanto, cuando se realiza una llamada jQuery(), es creado un nuevo objeto jQuery con todos los métodos heredados.
El objetivo de una extensión es realizar una acción utilizando una colección de elementos, de la misma forma que lo hacen, por ejemplo, los métodos fadeOut o addClass de la biblioteca.
Usted puede realizar sus propias extensiones y utilizarlas de forma privada en su proyecto o también puede publicarlas para que otras personas le saquen provecho.
- 8.2 Crear una Extensión Básica
+ 8.2 Crear una Extensión Básica
El código para realizar una extensión básica es la siguiente:
(function($){
$.fn.myNewPlugin = function() {
@@ -2560,17 +2560,17 @@
$('a').fadeInAndAddClass(400, 'finishedFading');
- 8.3 Encontrar y Evaluar Extensiones
+ 8.3 Encontrar y Evaluar Extensiones
Uno de los aspectos más populares de jQuery es la diversidad de extensiones que existen.
Sin embargo, la calidad entre extensiones puede variar enormemente. Muchas son intensivamente probadas y bien mantenidas, pero otras son creadas de forma apresurada y luego ignoradas, sin seguir buenas prácticas.
Google es la mejor herramienta para encontrar extensiones (aunque el equipo de jQuery este trabajando para mejorar su repositorio de extensiones). Una vez encontrada la extensión, posiblemente quiera consultar la lista de correos de jQuery o el canal IRC #jquery para obtener la opinión de otras personas sobre dicha extensión.
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) Signs of a poorly written jQuery plugin por Remy Sharp.
- Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
- 8.4 Escribir Extensiones
+ 8.4 Escribir Extensiones
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
- La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+ La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover
// definición de la extensión
@@ -2639,7 +2639,7 @@ 8.4
- 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
+ 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
Nota
Esta sección esta basada, con permiso del autor, en el artículo Building Stateful jQuery Plugins de Scott Gonzalez.
@@ -2684,7 +2684,7 @@
- 8.5.1 Añadir Métodos a un Widget
+ 8.5.1 Añadir Métodos a un Widget
Ahora que es posible inicializar la extensión, es necesario añadir la habilidad de realizar acciones a través de métodos definidos en la extensión. Para definir un método en la extensión es necesario incluir la función en el objeto literal que se pasa a jQuery.widget. También es posible definir métodos “privados” anteponiendo un guión bajo al nombre de la función.
Crear métodos en el Widget
$.widget("nmk.progressbar", {
@@ -2743,7 +2743,7 @@
- 8.5.2 Trabajar con las Opciones del Widget
+ 8.5.2 Trabajar con las Opciones del Widget
Uno de los métodos disponibles automáticamente para la extensión es option. Este método permite obtener y establecer opciones después de la inicialización y funciona exactamente igual que los métodos attr y css de jQuery: pasando únicamente un nombre como argumento el método funciona como obtenedor, mientras que pasando uno o más conjuntos de nombres y valores el método funciona como establecedor. Cuando es utilizado como método obtenedor, la extensión devolverá el valor actual de la opción correspondiente al nombre pasado como argumento. Por otro lado, cuando es utilizado como un método establecedor, el método _setOption de la extensión será llamado por cada opción que se desea establecer.
Responder cuando una opción es establecida
$.widget("nmk.progressbar", {
@@ -2768,7 +2768,7 @@
- 8.5.3 Añadir Funciones de Devolución de Llamada
+ 8.5.3 Añadir Funciones de Devolución de Llamada
Uno de las maneras más fáciles de extender una extensión es añadir funciones de devolución de llamada, para que de esta forma el usuario puede reaccionar cuando el estado de la extensión cambie. A continuación se mostrará como añadir una función de devolución de llamada a la extensión creada para indicar cuando la barra de progreso haya alcanzado el 100%. El método _trigger obtiene tres parámetros: el nombre de la función de devolución, el objeto de evento nativo que inicializa la función de devolución y un conjunto de información relevante al evento. El nombre de la función de devolución es el único parámetro obligatorio, pero los otros pueden ser muy útiles si el usuario desea implementar funcionalidades personalizadas.
Proveer funciones de devolución de llamada
$.widget("nmk.progressbar", {
@@ -2828,7 +2828,7 @@
- 8.5.4 Limpieza
+ 8.5.4 Limpieza
En algunos casos, tendrá sentido permitir a los usuarios aplicar y desaplicar la extensión. Esto es posible hacerlo a través del método destroy. Con dicho método, es posible deshacer todo lo realizado con la extensión. También éste es llamado automáticamente si el elemento vinculado a la extensión es eliminado del DOM (por lo cual también es posible utilizarlo para la “recolección de basura”). El método destroy predeterminado remueve el vínculo entre el elemento DOM y la instancia de la extensión
Añadir un método destroy al widget
$.widget( "nmk.progressbar", {
@@ -2865,18 +2865,18 @@ 8.5.4 Limpiez
});
- 8.5.5 Conclusión
+ 8.5.5 Conclusión
La utilización de Widget factory es solo una manera de crear extensiones con mantenimiento de estado. Existen algunos modelos diferentes que pueden ser utilizados y cada uno posee sus ventajas y desventajas. Widget factory resuelve muchos problemas comunes, mejora significativamente la productividad y la reutilización de código.
- 8.6 Ejercicios
+ 8.6 Ejercicios
- 8.6.1 Realizar una Tabla Ordenable
+ 8.6.1 Realizar una Tabla Ordenable
Para este ejercicio, la tarea es identificar, descargar e implementar una extensión que permita ordenar la tabla existente en la página index.html. Cuando esté listo, todas las columnas de la tabla deben poder ser ordenables.
- 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
+ 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/stripe.js. La tarea es escribir una extensión llamada “stripe” la cual podrá ser llamada desde cualquier elemento table y deberá cambiar el color de fondo de las filas impares en el cuerpo de la tabla. El color podrá ser especificado como parámetro de la extensión.
$('#myTable').stripe('#cccccc');
No olvide de devolver la tabla para que otros métodos puedan ser encadenados luego de la llamada a la extensión.
@@ -2884,10 +2884,10 @@
- 9 Mejores Prácticas para Aumentar el Rendimiento
+ 9 Mejores Prácticas para Aumentar el Rendimiento
Este capítulo cubre numerosas mejores prácticas de JavaScript y jQuery,sin un orden en particular. Muchas de estas prácticas están basadas en la presentación jQuery Anti-Patterns for Performance (en inglés) de Paul Irish.
- 9.1 Guardar la Longitud en Bucles
+ 9.1 Guardar la Longitud en Bucles
En un bucle, no es necesario acceder a la longitud de un vector cada vez que se evalúa la condición; dicho valor se puede guardar previamente en una variable.
var myLength = myArray.length;
@@ -2896,7 +2896,7 @@
- 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
+ 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
Si va a insertar muchos elementos en el DOM, hágalo todo de una sola vez, no de una por vez.
// mal
$.each(myArray, function(i, item) {
@@ -2922,7 +2922,7 @@ $('#ballers').html(myHtml);
- 9.3 No Repetirse
+ 9.3 No Repetirse
No se repita; realice las cosas una vez y sólo una, caso contrario lo estará haciendo mal.
// MAL
if ($eventfade.data('currently') != 'showing') {
@@ -2946,7 +2946,7 @@ 9.3 No Re
});
- 9.4 Cuidado con las Funciones Anónimas
+ 9.4 Cuidado con las Funciones Anónimas
No es aconsejable utilizar de sobremanera las funciones anónimas. Estas son difíciles de depurar, mantener, probar o reutilizar. En su lugar,utilice un objeto literal para organizar y nombrar sus controladores y funciones de devolución de llamada.
// MAL
$(document).ready(function() {
@@ -2980,10 +2980,10 @@ $(document).ready(PI.onReady);
- 9.5 Optimización de Selectores
+ 9.5 Optimización de Selectores
La optimización de selectores es menos importante de lo que solía ser, debido a la implementación en algunos navegadores dedocument.querySelectorAll(), pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
- 9.5.1 Selectores basados en ID
+ 9.5.1 Selectores basados en ID
Siempre es mejor comenzar las selecciones con un ID.
// rápido
$('#container div.robotarm');
@@ -2993,7 +2993,7 @@ 9.5.
El ejemplo que utiliza $.fn.find es más rápido debido a que la primera selección utiliza el motor de selección interno Sizzle — mientras que la selección realizada únicamente por ID utiliza document.getElementById(), el cual es extremadamente rápido debido a que es una función nativa del navegador.
- 9.5.2 Especificidad
+ 9.5.2 Especificidad
Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.
// no optimizado
$('div.data .gonzalez');
@@ -3008,7 +3008,7 @@ 9.5.2 Es
La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.
- 9.5.3 Evitar el Selector Universal
+ 9.5.3 Evitar el Selector Universal
Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.
$('.buttons > *'); // muy lento
$('.buttons').children(); // mucho mejor
@@ -3019,7 +3019,7 @@
- 9.6 Utilizar la Delegación de Eventos
+ 9.6 Utilizar la Delegación de Eventos
La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista). jQuery hace fácil este trabajo a través de $.fn.live y$.fn.delegate. En lo posible, es recomendable utilizar $.fn.delegate en lugar de $.fn.live, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.
Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.
// mal (si existen muchos items en la lista)
@@ -3033,7 +3033,7 @@ $('#myList').delegate('li.trigger', 'click', handlerFn);
- 9.7 Separar Elementos para Trabajar con Ellos
+ 9.7 Separar Elementos para Trabajar con Ellos
En lo posible, hay que evitar la manipulación del DOM. Para ayudar con este propósito, a partir de la versión 1.4, jQuery introduce $.fn.detach el cual permite trabajar elementos de forma separada del DOM para luego insertarlos.
var $table = $('#myTable');
var $parent = $table.parent();
@@ -3043,7 +3043,7 @@ $parent.append(table);
- 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
+ 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
Si va a cambiar el CSS en más de 20 elementos utilizando $.fn.css, considere realizar los cambios de estilos añadiéndolos en una etiqueta style. De esta forma se incrementa un 60% el rendimiento.
// correcto hasta 20 elementos, lento en más elementos
$('a.swedberg').css('color', '#asd123');
@@ -3051,7 +3051,7 @@ appendTo('head');
- 9.9 Utilizar $.data en Lugar de $.fn.data
+ 9.9 Utilizar $.data en Lugar de $.fn.data
Utilizar $.data en un elemento del DOM en lugar de $.fn.data en una selección puede ser hasta 10 veces más rápido. Antes de realizarlo, este seguro de comprender la diferencia entre un elemento DOM y una selección jQuery.
// regular
$(elem).data(key,value);
@@ -3060,7 +3060,7 @@ $.data(elem,key,value);
- 9.10 No Actuar en Elementos no Existentes
+ 9.10 No Actuar en Elementos no Existentes
jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.
// MAL: el código a continuación ejecuta tres funciones
// sin comprobar si existen elementos
@@ -3087,7 +3087,7 @@
- 9.12 Condicionales
+ 9.12 Condicionales
// antiguo
if (type == 'foo' || type == 'bar') { ... }
@@ -3113,21 +3113,21 @@ 9.12 Con
if (({ foo : 1, bar : 1 })[type]) { ... }
- 9.13 No Tratar a jQuery como si fuera una Caja Negra
- Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
+ 9.13 No Tratar a jQuery como si fuera una Caja Negra
+ Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
- 10 Organización del Código
+ 10 Organización del Código
- 10.1 Introducción
+ 10.1 Introducción
Cuando se emprende la tarea de realizar aplicaciones complejas del lado del cliente, es necesario considerar la forma en que se organizará el código. Este capitulo está dedicado a analizar algunos patrones de organización de código para utilizar en una aplicación realizada con jQuery. Además se explorará el sistema de gestión de dependencias de RequireJS.
- 10.1.1 Conceptos Clave
+ 10.1.1 Conceptos Clave
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:
el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque $(document).ready(). Este concepto se conoce como encapsulación;
no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
las unidades de funcionalidad deben tener una articulación flexible (en inglés loosely coupled) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
@@ -3135,11 +3135,11 @@ 10.1.1
- 10.2 Encapsulación
+ 10.2 Encapsulación
El primer paso para la organización del código es separar la aplicación en distintas piezas.
Muchas veces, este esfuerzo suele ser suficiente para mantener al código en orden.
- 10.2.1 El Objeto Literal
+ 10.2.1 El Objeto Literal
Un objeto literal es tal vez la manera más simple de encapsular código relacionado. Este no ofrece ninguna privacidad para propiedades o métodos, pero es útil para eliminar funciones anónimas, centralizar opciones de configuración, y facilitar el camino para la reutilización y refactorización.
Un objeto literal
var myFeature = {
@@ -3192,7 +3192,7 @@ 10.2.1urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
@@ -3254,7 +3254,7 @@ 10.2.1Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque $(document).ready(). Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque $(document).ready().
- 10.2.2 El Patrón Modular
+ 10.2.2 El Patrón Modular
El patrón modular supera algunas limitaciones del objeto literal, ofreciendo privacidad para variables y funciones, exponiendo a su vez (si se lo desea) una API pública.
El patrón modular
var feature =(function() {
@@ -3346,7 +3346,7 @@ 10.2.2
- 10.3 Gestión de Dependencias
+ 10.3 Gestión de Dependencias
Nota
Esta sección esta basada en la excelente documentación de RequireJS y es utilizada con el permiso de James Burke, autor de RequireJS.
@@ -3355,11 +3355,11 @@ 10.3
RequireJS es una herramienta de gestión de dependencias creada por James Burke, la cual ayuda a manejar los módulos, cargarlos en un orden correcto y combinarlos de forma fácil sin tener que realizar ningún cambio. A su vez, otorga una manera fácil de cargar código una vez cargada la página, permitiendo minimizar el tiempo de descarga.
RequireJS posee un sistema modular, que sin embargo, no es necesario seguirlo para obtener sus beneficios. El formato modular de RequireJS permite la escritura de código encapsulado, incorporación de internacionalización (i18n) a los paquetes (para permitir utilizarlos en diferentes lenguajes) e incluso la utilización de servicios JSONP como dependencias.
- 10.3.1 Obtener RequireJS
+ 10.3.1 Obtener RequireJS
La manera más fácil de utilizar RequireJS con jQuery es descargando el paquete de jQuery con RequireJS ya incorporado en él. Este paquete excluye porciones de código que duplican funciones de jQuery. También es útil descargar un ejemplo de proyecto jQuery que utiliza RequireJS.
- 10.3.2 Utilizar RequireJS con jQuery
+ 10.3.2 Utilizar RequireJS con jQuery
Utilizar RequireJS es simple, tan solo es necesario incorporar en la página la versión de jQuery que posee RequireJS incorporado y a continuación solicitar los archivos de la aplicación. El siguiente ejemplo asume que tanto jQuery como los otros archivos están dentro de la carpeta scripts/.
Utilizar RequireJS: Un ejemplo simple
<!DOCTYPE html>
@@ -3385,7 +3385,7 @@
- 10.3.3 Crear Módulos Reusables con RequireJS
+ 10.3.3 Crear Módulos Reusables con RequireJS
RequireJS hace que sea fácil definir módulos reusables a través de require.def(). Un modulo RequireJS puede tener dependencias que pueden ser utilizadas para definir un módulo, además de poder devolver un valor — un objeto, una función, u otra cosa — que puede ser incluso utilizado otros módulos.
Si el módulo no posee ninguna dependencia, tan solo se debe especificar el nombre como primer argumento de require.def(). El segundo argumento es un objeto literal que define las propiedades del módulo. Por ejemplo:
Definición de un módulo RequireJS que no posee dependencias
@@ -3414,8 +3414,8 @@ my/cart.js
- my/inventory.js
- my/shirt.js
+ my/inventory.js
+ my/shirt.js
La función que define my/shirt no es llamada hasta que my/cart y my/inventory hayan sido cargadas, y dicha función recibe como argumentos a los módulos como cart y inventory. El orden de los argumentos de la función debe coincidir con el orden en que las dependencias se requieren en el vector. El objeto devuelto define el módulo my/shirt. Definiendo los módulos de esta forma, my/shirt no existe como un objeto global, ya que múltiples módulos pueden existir en la página al mismo tiempo.
Los módulos no tienen que devolver un objeto; cualquier tipo de valor es permitido.
Definición de un módulo RequireJS que devuelve una función
@@ -3433,14 +3433,14 @@
- 10.3.4 Optimizar el Código con las Herramientas de RequireJS
+ 10.3.4 Optimizar el Código con las Herramientas de RequireJS
Una vez incorporado RequireJS para el manejo de dependencias, la optimización del código es muy fácil. Descargue el paquete de RequireJS y colóquelo en cualquier lugar, preferentemente fuera del área de desarrollo web. Para los propósitos de este ejemplo, el paquete de RequireJS esta ubicado en una carpeta paralela al directorio webapp (la cual contiene la página HTML y todos los archivos JavaScript de la aplicación). La estructura de directorios es:
requirejs/ (utilizado para ejecutar las herramientas)
webapp/app.html
- webapp/scripts/app.js
- webapp/scripts/require-jquery.js
- webapp/scripts/jquery.alpha.js
- webapp/scripts/jquery.beta.js
+ webapp/scripts/app.js
+ webapp/scripts/require-jquery.js
+ webapp/scripts/jquery.alpha.js
+ webapp/scripts/jquery.beta.js
Luego, en la carpeta en donde se encuentran require-jquery.js y app.js, crear un archivo llamado app.build.js con el siguiente contenido:
Archivo de configuración para las herramientas de optimización de RequireJS
{
@@ -3469,9 +3469,9 @@
- 10.4 Ejercicios
+ 10.4 Ejercicios
- 10.4.1 Crear un Módulo Portlet
+ 10.4.1 Crear un Módulo Portlet
Abra el archivo /ejercicios/portlets.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/portlets.js. El ejercicio consiste en crear una función creadora de portlet que utilice el patrón modular, de tal manera que el siguiente código funcione:
var myPortlet = Portlet({
title : 'Curry',
@@ -3491,9 +3491,9 @@ 10.4
- 11 Eventos Personalizados
+ 11 Eventos Personalizados
- 11.1 Introducción a los Eventos Personalizados
+ 11.1 Introducción a los Eventos Personalizados
Todos estamos familiarizados con los eventos básicos — click, mouseover, focus, blur, submit, etc. — que surgen a partir de la interacción del usuario con el navegador.
Los eventos personalizados permiten conocer el mundo de la programación orientada a eventos (en inglés event-driven programming). En este capítulo, se utilizará el sistema de eventos personalizados de jQuery para crear una simple aplicación de búsqueda en Twitter.
En un primer momento puede ser difícil entender el requisito de utilizar eventos personalizados, ya que los eventos convencionales permiten satisfacer todas las necesidades. Sin embargo, los eventos personalizados ofrecen una nueva forma de pensar la programación en JavaScript. En lugar de enfocarse en el elemento que ejecuta una acción, los eventos personalizados ponen la atención en el elemento en donde la acción va a ocurrir. Este concepto brinda varios beneficios:
@@ -3580,7 +3580,7 @@ . fn. ony.fn.trigger
+ Recapitulación: $.fn.on y $.fn.trigger
En el mundo de los eventos personalizados, existen dos métodos importantes de jQuery: $.fn.on y $.fn.trigger. En el capítulo dedicado a eventos se explicó la utilización de estos dos métodos para trabajar con eventos del usuario; en este capítulo es importante recordar 2 puntos:
el método $.fn.on toma como argumentos un tipo de evento y una función controladora de evento. Opcionalmente, puede recibir información asociada al evento como segundo argumento, desplazando como tercer argumento a la función controladora de evento. Cualquier información pasada estará disponible a la función controladora a través de la propiedad data del objeto del evento. A su vez, la función controladora recibe el objeto del evento como primer argumento;
$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);
- 11.1.1 Un Ejemplo de Aplicación
+ 11.1.1 Un Ejemplo de Aplicación
Para demostrar el poder de los eventos personalizados, se desarrollará una simple herramienta para buscar en Twitter. Dicha herramienta ofrecerá varias maneras para que el usuario realice una búsqueda: ingresando el término a buscar en una caja de texto o consultando los “temas de moda” de Twitter.
Los resultados de cada término se mostrarán en un contenedor de resultados; dichos resultados podrán expandirse, colapsarse, refrescarse y removerse, ya sea de forma individual o conjunta.
El resultado final de la aplicación será el siguiente:
@@ -3604,7 +3604,7 @@ 11.
La aplicación finalizada
- 11.1.1.1 Iniciación
+ 11.1.1.1 Iniciación
Se empieza con un HTML básico:
<h1>Twitter Search</h1>
<input type="button" id="get_trends"
@@ -3628,19 +3628,19 @@ 11.1.1.1 I
Los contenedores de resultados son el corazón de la aplicación. Se creará una extensión para preparar cada contenedor una vez que éste se agrega al contenedor Twitter. Además, entre otras cosas, la extensión vinculará los eventos personalizados por cada contenedor y añadirá en la parte superior derecha de cada contenedor botones que ejecutarán acciones. Cada contenedor de resultados tendrá los siguientes eventos personalizados:
- refresh
- Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
+ - Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
- populate
- Recibe la información JSON y la utiliza para rellenar el contenedor.
+ - Recibe la información JSON y la utiliza para rellenar el contenedor.
- remove
- Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
+ - Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa
true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
- collapse
- Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
+ - Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
- expand
- Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
+ - Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
Además, la extensión es responsable de añadir los botones de acciones al contenedor, vinculando un evento click a cada botón y utilizando la clase de cada ítem para determinar qué evento personalizado será ejecutado en cada contenedor de resultados.
@@ -3759,10 +3759,10 @@ 11.1.1.1 I
El contenedor Twitter, posee solo dos eventos personalizados:
- getResults
- Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión $.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
+ - Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión
$.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
- getTrends
- Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
+ - Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento
getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
Vinculaciones en el contenedor Twitter:
@@ -3820,7 +3820,7 @@ 11.1.1.1 I
});
- 11.1.1.2 Conclusión
+ 11.1.1.2 Conclusión
Los eventos personalizados ofrecen una nueva manera de pensar el código: ellos ponen el énfasis en el objetivo de un comportamiento, no en el elemento que lo activa. Si se toma el tiempo desde el principio para explicar las piezas de su aplicación, así como los comportamientos que esas piezas necesitan exhibir, los eventos personalizados proveen una manera poderosa para “hablar” con esas piezas, ya sea de una en una o en masa.
Una vez que los comportamientos se han descripto, se convierte en algo trivial ejecutarlos desde cualquier lugar, lo que permite la rápida creación y experimentación de opciones de interfaz. Finalmente, los eventos personalizados también permiten mejorar la lectura del código y su mantenimiento, haciendo clara la relación entre un elemento y su comportamiento.
Puede ver la aplicación completa en los archivos demos/custom-events/custom-events.html y demos/custom-events/js/custom-events.js del material que componen este libro.
@@ -3829,13 +3829,13 @@ 11.1.1.2
- 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
+ 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
- 12.1 Introducción
- A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
+ 12.1 Introducción
+ A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
- 12.2 El objeto diferido y Ajax
+ 12.2 El objeto diferido y Ajax
El caso más común en donde se puede apreciar la utilidad del objeto diferido es en el manejo de las funciones de devolución en peticiones Ajax.
Según se pudo apreciar en el capítulo dedicado, una manera de invocar una petición Ajax es:
Manera tradicional de utilizar el método $.ajax
@@ -3882,8 +3882,8 @@ 12.
ajax.always(function(){
alert('Petición realizada');
});
- A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
- Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
+ A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
+ Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
Colas de funciones de devolución en una petición Ajax
// definición de la petición Ajax
@@ -3917,10 +3917,10 @@ 12.
ajax.fail(function(){
alert('Disculpe, existió un problema');
});
- Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+ Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
- 12.2.1 deferred.then
- Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+ 12.2.1 deferred.then
+ Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
Utilización del método deferred.then
// definición de la petición Ajax
var ajax = $.ajax({
@@ -3935,7 +3935,7 @@ 12.2.1 <
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -3944,7 +3944,7 @@ 12.2.1 <
- 12.3 Creación de objetos diferidos con $.Deferred
+ 12.3 Creación de objetos diferidos con $.Deferred
Así como es posible desacoplar las funciones de devolución en una petición Ajax, también es posible realizarlo en otras funciones utilizando de manera explícita el objeto $.Deferred.
Por ejemplo, una función que verifica si un número es par, de la manera tradicional puede escribirse de la siguiente manera:
Función sin utilizar el objeto $.Deferred
@@ -3996,7 +3996,7 @@ console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -4006,7 +4006,7 @@ http://api.jquery.com/deferred.state/.
+
Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pending, resolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.
- 12.3.1 deferred.pipe
+ 12.3.1 deferred.pipe
Existen casos en que se necesita modificar el estado de un objeto diferido o filtrar la información que viene asociada. Para estos casos existe deferred.pipe. Su funcionamiento es similar a deferred.then, con la diferencia que deferred.pipe devuelve un nuevo objeto diferido modificado a través de una función interna.
Función filtrando valores utilizando deferred.pipe
// función que calcula si un número entero es par o impar
@@ -4098,11 +4098,11 @@ 12.3.1 <
}
);
- Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
+ Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
- 12.3.2 $.when
- El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+ 12.3.2 $.when
+ El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de $.when es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
Utilización de $.when
// primera petición ajax
@@ -4126,7 +4126,7 @@ 12.3.2 $.wh
alert('Disculpe, existió un problema');
}
);
- Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
+ Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
Copyright © 2011
Material licenciado por Rebecca Murphey bajo la licencia Creative Commons Attribution-Share Alike 3.0 United States. Usted es libre de copiarlo, distribuirlo, transmitirlo y modificarlo, siempre y cuando haga referencia a este repositorio y atribuya la autoría original a Rebecca Murphey. Si altera, transforma o crea una obra derivada, deberá distribuir el resultado bajo una licencia igual, similar o compatible. Cualquiera de las condiciones mencionadas pueden no aplicarse si obtiene permisos del autor. Para cualquier reutilización o distribución, deberá dejar en claro la licencia la mejor manera para hacerlo es a través de un enlace hacia la licencia Creative Commons Attribution-Share Alike 3.0 United States.
diff --git a/libro/markdown/cap05-eventos.markdown b/libro/markdown/cap05-eventos.markdown
index d39fccb..6dbaf9f 100644
--- a/libro/markdown/cap05-eventos.markdown
+++ b/libro/markdown/cap05-eventos.markdown
@@ -293,7 +293,7 @@ $('p.expander').toggle(
### Crear una "Sugerencia" para una Caja de Ingreso de Texto
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
1. Establecer el valor del elemento *input* igual al valor del elemento *label*.
@@ -311,7 +311,7 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio ut
### Añadir una Navegación por Pestañas
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
1. Ocultar todos los elementos *div.module*.
diff --git a/libro/markdown/cap07-ajax.markdown b/libro/markdown/cap07-ajax.markdown
index dc7a975..89ad0bd 100644
--- a/libro/markdown/cap07-ajax.markdown
+++ b/libro/markdown/cap07-ajax.markdown
@@ -187,7 +187,7 @@ El método $.ajax posee muchas opciones de configuración, y es justamente esta
~ Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición *JSONP*. De forma predeterminada el nombre es "*callback*
success
- ~ Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
+ ~ Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
timeout
~ Establece un tiempo en milisegundos para considerar a una petición como fallada.
@@ -208,7 +208,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
> **Nota**
>
-> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
+> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
>
@@ -220,7 +220,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
### Métodos Convenientes
-En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores pre-establecidos de configuración).
+En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
diff --git a/libro/markdown/cap08-extensiones.markdown b/libro/markdown/cap08-extensiones.markdown
index a369123..96bf898 100644
--- a/libro/markdown/cap08-extensiones.markdown
+++ b/libro/markdown/cap08-extensiones.markdown
@@ -146,7 +146,7 @@ Google es la mejor herramienta para encontrar extensiones (aunque el equipo de j
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) [Signs of a poorly written jQuery plugin](http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/) por Remy Sharp.
-Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
@@ -154,7 +154,7 @@ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero,
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
-La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
diff --git a/libro/markdown/cap10-organizacion-codigo.markdown b/libro/markdown/cap10-organizacion-codigo.markdown
index b93c3d3..a6f098d 100644
--- a/libro/markdown/cap10-organizacion-codigo.markdown
+++ b/libro/markdown/cap10-organizacion-codigo.markdown
@@ -14,7 +14,7 @@ Antes de comenzar con los patrones de organización de código, es importante en
- el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación;
-- no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
+- no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
- a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
@@ -100,7 +100,7 @@ var myFeature = {
urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
diff --git a/libro/markdown/cap12-funciones-diferidas.markdown b/libro/markdown/cap12-funciones-diferidas.markdown
index 7a5a7fc..d38e5a6 100644
--- a/libro/markdown/cap12-funciones-diferidas.markdown
+++ b/libro/markdown/cap12-funciones-diferidas.markdown
@@ -71,10 +71,10 @@ ajax.always(function(){
```
-A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
+A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
-*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
+*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
@@ -117,13 +117,13 @@ ajax.fail(function(){
```
-Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
### `deferred.then`
-Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
**Utilización del método `deferred.then`**
@@ -142,7 +142,7 @@ ajax.then(
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -216,7 +216,7 @@ isEven(2).then(
console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -232,7 +232,7 @@ Notar que la función `isEven` devuelve el método `deferred.promise`. El mismo
> **Nota**
>
-> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implicitamente dentro del objeto `$.ajax`.
+> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implícitamente dentro del objeto `$.ajax`.
@@ -347,7 +347,7 @@ Para más detalles sobre `deferred.pipe`, puede consultar [http://api.jquery.com
### `$.when`
-El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de `$.when` es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
diff --git a/libro/pdf/Fundamentos_de_jQuery.pdf b/libro/pdf/Fundamentos_de_jQuery.pdf
index a2be6c5..80741e2 100644
Binary files a/libro/pdf/Fundamentos_de_jQuery.pdf and b/libro/pdf/Fundamentos_de_jQuery.pdf differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..464a26a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "librojquery",
+ "version": "1.0.0",
+ "description": "Fundamentos de jQuery: Material de aprendizaje",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/dzignus/librojquery.git"
+ },
+ "author": "Leandro D'Onofrio",
+ "license": "Creative Commons Attribution-Share Alike 3.0 United States",
+ "bugs": {
+ "url": "https://github.com/dzignus/librojquery/issues"
+ },
+ "homepage": "https://github.com/dzignus/librojquery",
+ "dependencies": {
+ "hapi": "^18.1.0"
+ }
+}
3.3.1 Encadenamiento
+3.3.1 Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto jQuery, es posible seguir un “encadenado” de métodos en el objeto.
Encadenamiento
$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');3.3.1 E
3.3.2 Obtenedores (Getters) & Establecedores (Setters)
+3.3.2 Obtenedores (Getters) & Establecedores (Setters)
jQuery “sobrecarga” sus métodos, en otras palabras, el método para establecer un valor posee el mismo nombre que el método para obtener un valor. Cuando un método es utilizado para establecer un valor, es llamado método establecedor (en inglés setter). En cambio, cuando un método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés getter).
El método $.fn.html utilizado como establecedor
$('h1').html('hello world');
- 3.4 CSS, Estilos, & Dimensiones
+ 3.4 CSS, Estilos, & Dimensiones
jQuery incluye una manera útil de obtener y establecer propiedades CSS a los elementos.
Nota
@@ -1339,7 +1339,7 @@ 3.4'paddingTop' : '+=20px' // suma 20px al padding superior original del elemento
});
- 3.4.1 Utilizar Clases para Aplicar Estilos CSS
+ 3.4.1 Utilizar Clases para Aplicar Estilos CSS
Para obtener valores de los estilos aplicados a un elemento, el método $.fn.css es muy útil, sin embargo, su utilización como método establecedor se debe evitar (ya que, para aplicar estilos a un elemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS que se apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo que se desea mostrar.
Trabajar con clases
var $h1 = $('h1');
@@ -1352,9 +1352,9 @@
- 3.4.2 Dimensiones
+ 3.4.2 Dimensiones
jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.
- El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
+ El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
Métodos básicos sobre Dimensiones
$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1
@@ -1369,7 +1369,7 @@ 3.4.2 Dime
Nota
@@ -1339,7 +1339,7 @@3.4'paddingTop' : '+=20px' // suma 20px al padding superior original del elemento
});
- 3.4.1 Utilizar Clases para Aplicar Estilos CSS
+ 3.4.1 Utilizar Clases para Aplicar Estilos CSS
Para obtener valores de los estilos aplicados a un elemento, el método $.fn.css es muy útil, sin embargo, su utilización como método establecedor se debe evitar (ya que, para aplicar estilos a un elemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS que se apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo que se desea mostrar.
Trabajar con clases
var $h1 = $('h1');
@@ -1352,9 +1352,9 @@
- 3.4.2 Dimensiones
+ 3.4.2 Dimensiones
jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.
- El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
+ El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
Métodos básicos sobre Dimensiones
$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1
@@ -1369,7 +1369,7 @@ 3.4.2 Dime
3.4.1 Utilizar Clases para Aplicar Estilos CSS
+3.4.1 Utilizar Clases para Aplicar Estilos CSS
Para obtener valores de los estilos aplicados a un elemento, el método $.fn.css es muy útil, sin embargo, su utilización como método establecedor se debe evitar (ya que, para aplicar estilos a un elemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS que se apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar la clase del elemento para aplicar el estilo que se desea mostrar.
Trabajar con clases
var $h1 = $('h1');
@@ -1352,9 +1352,9 @@
- 3.4.2 Dimensiones
+ 3.4.2 Dimensiones
jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.
- El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
+ El código mostrado en el ejemplo “Métodos básicos sobre Dimensiones” es solo un breve resumen de las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultar http://api.jquery.com/category/dimensions/.
Métodos básicos sobre Dimensiones
$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1
@@ -1369,7 +1369,7 @@ 3.4.2 Dime
3.5 Atributos
+3.5 Atributos
Los atributos de los elementos HTML que conforman una aplicación pueden contener información útil, por eso es importante poder establecer y obtener esa información.
El método $.fn.attr actúa tanto como método establecedor como obtenedor. Además, al igual que el método $.fn.css, cuando se lo utiliza como método establecedor, puede aceptar un conjunto de palabra clave-valor o un objeto conteniendo más conjuntos.
Establecer atributos
@@ -1384,9 +1384,9 @@3.5 Atributo // al primer elemento <a> del documento
3.6 Recorrer el DOM
+3.6 Recorrer el DOM
Una vez obtenida la selección, es posible encontrar otros elementos utilizando a la misma selección.
-En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
+En http://api.jquery.com/category/traversing/ puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.
Nota
Debe ser cuidadoso en recorrer largas distancias en un documento — recorridos complejos obligan que la estructura del documento sea siempre la misma, algo que es difícil de garantizar. Uno -o dos- pasos para el recorrido esta bien, pero generalmente hay que evitar atravesar desde un contenedor a otro.
@@ -1413,11 +1413,11 @@3.6 Re });
3.7 Manipulación de Elementos
+3.7 Manipulación de Elementos
Una vez realizada la selección de los elementos que desea utilizar, “la diversión comienza”. Es posible cambiar, mover, remover y duplicar elementos. También crear nuevos a través de una sintaxis simple.
-La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
La documentación completa sobre los métodos de manipulación puede encontrarla en la sección Manipulation: http://api.jquery.com/category/manipulation/.
3.7.1 Obtener y Establecer Información en Elementos
+3.7.1 Obtener y Establecer Información en Elementos
Existen muchas formas por las cuales de puede modificar un elemento. Entre las tareas más comunes están las de cambiar el HTML interno o algún atributo del mismo. Para este tipo de tareas, jQuery ofrece métodos simples, funcionales en todos los navegadores modernos. Incluso es posible obtener información sobre los elementos utilizando los mismos métodos pero en su forma de método obtenedor.
Nota
@@ -1429,25 +1429,25 @@html('Nuevo <strong>primer</strong> párrafo');
3.7.2 Mover, Copiar y Remover Elementos
+3.7.2 Mover, Copiar y Remover Elementos
Existen varias maneras para mover elementos a través del DOM; las cuales se pueden separar en dos enfoques:
querer colocar el/los elementos seleccionados de forma relativa a otro elemento;
@@ -1474,7 +1474,7 @@
// lista de items que se ha movido, ya que devuelve
// la lista en sí
- 3.7.2.1 Clonar Elementos
+ 3.7.2.1 Clonar Elementos
Cuando se utiliza un método como $.fn.appendTo, lo que se está haciendo es mover al elemento; pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento. En este caso, es posible utilizar el método $.fn.clone.
Obtener una copia del elemento
// copiar el primer elemento de la lista y moverlo al final de la misma
@@ -1485,7 +1485,7 @@ 3.7.2.1
- 3.7.2.2 Remover elementos
+ 3.7.2.2 Remover elementos
Existen dos formas de remover elementos de una página: Utilizando $.fn.remove o $.fn.detach. Cuando desee remover de forma permanente al elemento, utilize el método $.fn.remove. Por otro lado, el método $.fn.detach también remueve el elemento, pero mantiene la información y eventos asociados al mismo, siendo útil en el caso que necesite reinsertar el elemento en el documento.
Nota
@@ -1495,7 +1495,7 @@ 3.7.2.2
- 3.7.3 Crear Nuevos Elementos
+ 3.7.3 Crear Nuevos Elementos
jQuery provee una forma fácil y elegante para crear nuevos elementos a través del mismo método $() que se utiliza para realizar selecciones.
Crear nuevos elementos
$('<p>Un nuevo párrafo</p>');
@@ -1532,7 +1532,7 @@ 3.7.3<
$myList.append(myItems.join(''));
- 3.7.4 Manipulación de Atributos
+ 3.7.4 Manipulación de Atributos
Las capacidades para la manipulación de atributos que ofrece la biblioteca son extensos. La realización de cambios básicos son simples, sin embargo el método $.fn.attr permite manipulaciones más complejas.
Manipular un simple atributo
$('#myDiv a:first').attr('href', 'newDestination.html');
@@ -1555,9 +1555,9 @@ 3.
3.7.2.1 Clonar Elementos
+3.7.2.1 Clonar Elementos
Cuando se utiliza un método como $.fn.appendTo, lo que se está haciendo es mover al elemento; pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento. En este caso, es posible utilizar el método $.fn.clone.
Obtener una copia del elemento
// copiar el primer elemento de la lista y moverlo al final de la misma
@@ -1485,7 +1485,7 @@ 3.7.2.1
3.7.2.2 Remover elementos
+3.7.2.2 Remover elementos
Existen dos formas de remover elementos de una página: Utilizando $.fn.remove o $.fn.detach. Cuando desee remover de forma permanente al elemento, utilize el método $.fn.remove. Por otro lado, el método $.fn.detach también remueve el elemento, pero mantiene la información y eventos asociados al mismo, siendo útil en el caso que necesite reinsertar el elemento en el documento.
Nota
@@ -1495,7 +1495,7 @@3.7.2.2
3.7.3 Crear Nuevos Elementos
+3.7.3 Crear Nuevos Elementos
jQuery provee una forma fácil y elegante para crear nuevos elementos a través del mismo método $() que se utiliza para realizar selecciones.
Crear nuevos elementos
$('<p>Un nuevo párrafo</p>');
@@ -1532,7 +1532,7 @@ 3.7.3<
$myList.append(myItems.join(''));
3.7.4 Manipulación de Atributos
+3.7.4 Manipulación de Atributos
Las capacidades para la manipulación de atributos que ofrece la biblioteca son extensos. La realización de cambios básicos son simples, sin embargo el método $.fn.attr permite manipulaciones más complejas.
Manipular un simple atributo
$('#myDiv a:first').attr('href', 'newDestination.html');3.
3.8 Ejercicios
+3.8 Ejercicios
3.8.1 Selecciones
+3.8.1 Selecciones
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todos los elementos
divque poseen la clase “module”.
@@ -1569,7 +1569,7 @@
3.8.1 Sele
3.8.2 Recorrer el DOM
+3.8.2 Recorrer el DOM
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
Seleccionar todas las imágenes en la página; registrar en la consola el atributo
altde cada imagen.
@@ -1580,7 +1580,7 @@
3.8.2
3.8.3 Manipulación
+3.8.3 Manipulación
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:
- Añadir 5 nuevos ítems al final de la lista desordenada #myList. Ayuda: @@ -1596,9 +1596,9 @@
3.8.3 Ma
4 El núcleo de jQuery
+4 El núcleo de jQuery
4.1 $ vs $()
+ 4.1 $ vs $()
Hasta ahora, se ha tratado completamente con métodos que se llaman desde el objeto jQuery. Por ejemplo:
$('h1').remove();Dichos métodos son parte del espacio de nombres (en inglés namespace) $.fn, o del prototipo (en inglés prototype) de jQuery, y son considerados como métodos del objeto jQuery.
4.1 $
Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con $.each y $.fn.each. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.
$.each y $.fn.each. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.4.2 Métodos Utilitarios
-jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
4.2 Métodos Utilitarios
+jQuery ofrece varios métodos utilitarios dentro del espacio de nombres $. Estos métodos son de gran ayuda para llevar a cabo tareas rutinarias de programación. A continuación se muestran algunos ejemplos, para una completa documentación sobre ellos, visite http://api.jquery.com/category/utilities/.
- $.trim
- Remueve los espacios en blanco del principio y final.
@@ -1687,7 +1687,7 @@
4.2$('#foo').click($.proxy(myObject, 'myFn')); // registra myObject
4.3 Comprobación de Tipos
+4.3 Comprobación de Tipos
Como se mencionó en el capítulo “Conceptos Básicos de JavaScript”, jQuery ofrece varios métodos útiles para determinar el tipo de un valor específico.
Comprobar el tipo de un determinado valor
var myValue = [1, 2, 3];
@@ -1708,7 +1708,7 @@ 4.3jQuery.isNumeric(16); // verdadero (true). No disponible en versiones inferiores a jQuery 1.7
4.4 El Método Data
+4.4 El Método Data
A menudo encontrará que existe información acerca de un elemento que necesita guardar. En JavaScript es posible hacerlo añadiendo propiedades al DOM del elemento, pero esta práctica conlleva enfrentarse a pérdidas de memoria (en inglés memory leaks) en algunos navegadores. jQuery ofrece una manera sencilla para poder guardar información relacionada a un elemento, y la misma biblioteca se ocupa de manejar los problemas que pueden surgir por falta de memoria.
Guardar y recuperar información relacionada a un elemento
$('#myDiv').data('keyName', { foo : 'bar' });
@@ -1744,18 +1744,18 @@ 4.4 El
Nota
- Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
+ Para más información sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.
4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
+4.6 Evitar Conflictos con Otras Bibliotecas JavaScript
Si esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales también utilizan la variable $, pueden llegar a ocurrir una serie de errores. Para poder solucionarlos, es necesario poner a jQuery en su modo “no-conflicto”. Esto se debe realizar inmediatamente después que jQuery se cargue en la página y antes del código que se va a ejecutar.
Cuando se pone a jQuery en modo “no-conflicto”, la biblioteca ofrece la opción de asignar un nombre para reemplazar a la variable $.
Poner a jQuery en modo no-conflicto
@@ -1779,15 +1779,15 @@
- 5 Eventos
+ 5 Eventos
- 5.1 Introducción
+ 5.1 Introducción
jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.
- Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
- La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
+ Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
+ La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
- 5.2 Vincular Eventos a Elementos
+ 5.2 Vincular Eventos a Elementos
jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.on de jQuery ($.fn.bind en versiones anteriores a jQuery 1.7). El método $.fn.on es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.
Vincular un evento utilizando un método reducido
$('p').click(function() {
@@ -1808,7 +1808,7 @@
}
);
- 5.2.1 Vincular Eventos para Ejecutar una vez
+ 5.2.1 Vincular Eventos para Ejecutar una vez
A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.
Cambiar controladores utilizando el método $.fn.one
$('p').one('click', function() {
@@ -1818,7 +1818,7 @@
- 5.2.2 Desvincular Eventos
+ 5.2.2 Desvincular Eventos
Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.off pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.
Desvincular todos los controladores del evento click en una selección
$('p').off('click');
@@ -1830,7 +1830,7 @@ 5.2.2$('p').off('click', bar); // foo esta atado aún al evento click
- 5.2.3 Espacios de Nombres para Eventos
+ 5.2.3 Espacios de Nombres para Eventos
Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.
Asignar espacios de nombres a eventos
$('p').on('click.myNamespace', function() { /* ... */ });
@@ -1839,7 +1839,7 @@ // el espacio de nombre 'myNamespace'
- 5.2.4 Vinculación de Múltiples Eventos
+ 5.2.4 Vinculación de Múltiples Eventos
Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.on con uno o más pares de nombres claves/valores. Cada clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.
Vincular múltiples eventos a un elemento
$('p').on({
@@ -1853,29 +1853,29 @@
- 5.3 El Objeto del Evento
+ 5.3 El Objeto del Evento
Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:
- pageX, pageY
- La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
+ - La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
- type
- El tipo de evento (por ejemplo “click”).
+ - El tipo de evento (por ejemplo “click”).
- which
- El botón o tecla presionada.
+ - El botón o tecla presionada.
- data
- Alguna información pasada cuando el evento es ejecutado.
+ - Alguna información pasada cuando el evento es ejecutado.
- target
- El elemento DOM que inicializó el evento.
+ - El elemento DOM que inicializó el evento.
- preventDefault()
- Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
+ - Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
- stopPropagation()
- Detiene la propagación del evento sobre otros elementos.
+ - Detiene la propagación del evento sobre otros elementos.
Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:
@@ -1890,7 +1890,7 @@ 5.3
- 5.4 Ejecución automática de Controladores de Eventos
+ 5.4 Ejecución automática de Controladores de Eventos
A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.
Disparar un controlador de eventos de la forma correcta
var foo = function(e) {
@@ -1907,7 +1907,7 @@ foo(); // en lugar de realizar $('p').trigger('click')
- 5.5 Incrementar el Rendimiento con la Delegación de Eventos
+ 5.5 Incrementar el Rendimiento con la Delegación de Eventos
Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede.
La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.
@@ -1925,7 +1925,7 @@ // ...
});
- 5.5.1 Desvincular Eventos Delegados
+ 5.5.1 Desvincular Eventos Delegados
Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método $.fn.off para eventos conectados con $.fn.on, y $.fn.undelegate para eventos conectados con $.fn.delegate. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.
Desvincular eventos delegados
$('#myUnorderedList').off('click', 'li');
@@ -1933,10 +1933,10 @@
- 5.6 Funciones Auxiliares de Eventos
+ 5.6 Funciones Auxiliares de Eventos
jQuery ofrece dos funciones auxiliares para el trabajo con eventos:
- 5.6.1 $.fn.hover
+ 5.6.1 $.fn.hover
El método $.fn.hover permite pasar una o dos funciones que se ejecutarán cuando los eventos mouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el evento mouseenter, mientras que la segunda será ejecutada cuando ocurra mouseleave.
Nota
@@ -1948,7 +1948,7 @@ 5.6.1 $
});
- 5.6.2 $.fn.toggle
+ 5.6.2 $.fn.toggle
Al igual que el método anterior, $.fn.toggle recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, $.fn.toggle es utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.
La función auxiliar toggle
$('p.expander').toggle(
@@ -1962,10 +1962,10 @@ 5.6.2
- 5.7 Ejercicios
+ 5.7 Ejercicios
- 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+ 5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
Establecer el valor del elemento input igual al valor del elemento label.
Añadir la clase “hint” al elemento input.
¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?
- 5.7.2 Añadir una Navegación por Pestañas
- Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
+ 5.7.2 Añadir una Navegación por Pestañas
+ Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
Ocultar todos los elementos div.module.
Crear una lista desordenada antes del primer div.module para utilizar como pestañas.
- 6 Efectos
+ 6 Efectos
- 6.1 Introducción
+ 6.1 Introducción
Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.
- Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
+ Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección effects: http://api.jquery.com/category/effects/.
- 6.2 Efectos Incorporados en la Biblioteca
+ 6.2 Efectos Incorporados en la Biblioteca
Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:
- $.fn.show
- Muestra el elemento seleccionado.
+ - Muestra el elemento seleccionado.
- $.fn.hide
- Oculta el elemento seleccionado.
+ - Oculta el elemento seleccionado.
- $.fn.fadeIn
- De forma animada, cambia la opacidad del elemento seleccionado al 100%.
+ - De forma animada, cambia la opacidad del elemento seleccionado al 100%.
- $.fn.fadeOut
- De forma animada, cambia la opacidad del elemento seleccionado al 0
+ - De forma animada, cambia la opacidad del elemento seleccionado al 0
- $.fn.slideDown
- Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideUp
- Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
+ - Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideToggle
- Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
+ - Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
Uso básico de un efecto incorporado
$('h1').show();
- 6.2.1 Cambiar la Duración de los Efectos
+ 6.2.1 Cambiar la Duración de los Efectos
Con la excepción de $.fn.show y $.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400ms. Este valor es posible cambiarlo.
Configurar la duración de un efecto
$('h1').fadeIn(300); // desvanecimiento en 300ms
$('h1').fadeOut('slow'); // utilizar una definición de velocidad interna
- 6.2.1.1 jQuery.fx.speeds
+ 6.2.1.1 jQuery.fx.speeds
jQuery posee un objeto en jQuery.fx.speeds el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones “slow” y “fast”.
speeds: {
slow: 600,
@@ -2050,7 +2050,7 @@ 6.2.1.1
- 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
+ 6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.] En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave this hace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando $(this).
Ejecutar cierto código cuando una animación haya concluido
$('div.old').fadeOut(300, function() { $(this).remove(); });
@@ -2070,7 +2070,7 @@
- 6.3 Efectos Personalizados con $.fn.animate
+ 6.3 Efectos Personalizados con $.fn.animate
Es posible realizar animaciones en propiedades CSS utilizando el método $.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.
Efectos personalizados con $.fn.animate
$('div.funtimes').animate(
@@ -2086,7 +2086,7 @@ color plugin. Más adelante en el libro de discutirá la utilización de extensiones.
- 6.3.1 Easing
+ 6.3.1 Easing
[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.
A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método $.fn.animate.
Transición de easing por cada propiedad
@@ -2097,18 +2097,18 @@ 6.3.1 Easing300
);
-
Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
+ Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
- 6.4 Control de los Efectos
+ 6.4 Control de los Efectos
jQuery provee varias herramientas para el manejo de animaciones.
- $.fn.stop
- Detiene las animaciones que se están ejecutando en el elemento seleccionado.
+ - Detiene las animaciones que se están ejecutando en el elemento seleccionado.
- $.fn.delay
- Espera un tiempo determinado antes de ejecutar la próxima animación.
+ - Espera un tiempo determinado antes de ejecutar la próxima animación.
$('h1').show(300).delay(1000).hide(300);
@@ -2119,9 +2119,9 @@ 6.4
- 6.5 Ejercicios
+ 6.5 Ejercicios
- 6.5.1 Mostrar Texto Oculto
+ 6.5.1 Mostrar Texto Oculto
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/blog.js. La tarea es añadir alguna interactividad a la sección blog de la página:
al hacer click en alguno de los titulares del div #blog, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
6.5.1
- 6.5.2 Crear un Menú Desplegable
+ 6.5.2 Crear un Menú Desplegable
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/navigation.js. La tarea es poder desplegar los ítems del menú superior de la página:
al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
6.
Para poder realizarlo, utilice el método $.fn.hover para añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo /ejercicios/css/styles.css incluye una clase “hover” para este propósito)
- 6.5.3 Crear un Slideshow
+ 6.5.3 Crear un Slideshow
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/slideshow.js. La tarea es añadir un slideshow a la página con JavaScript.
Mover el elemento #slideshow a la parte superior de la página.
6.5.3
- 7 Ajax
+ 7 Ajax
- 7.1 Introducción
+ 7.1 Introducción
El método XMLHttpRequest (XHR) permite a los navegadores comunicarse con el servidor sin la necesidad de recargar la página. Este método, también conocido como Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.
Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una petición a una URL y cuando recibe una respuesta, una función de devolución puede ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo con ella. Debido a que la respuesta es asíncrona, el resto del código de la aplicación continua ejecutándose, por lo cual, es imperativo que una función de devolución sea ejecutada para manejar la respuesta.
A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer las diferencias que pueden existir entre navegadores. Los métodos en cuestión son $.get(), $.getScript(), $.getJSON(), $.post() y $().load().
@@ -2160,48 +2160,48 @@ 7.1 In
En general, Ajax no trabaja a través de dominios diferentes. Sin embargo, existen excepciones, como los servicios que proveen información en formato JSONP (JSON with Padding), los cuales permiten una funcionalidad limitada a través de diferentes dominios.
- 7.2 Conceptos Clave
+ 7.2 Conceptos Clave
La utilización correcta de los métodos Ajax requiere primero la comprensión de algunos conceptos clave.
- 7.2.1 GET vs. POST
+ 7.2.1 GET vs. POST
Los dos métodos HTTP más comunes para enviar una petición a un servidor son GET y POST. Es importante entender la utilización de cada uno.
El método GET debe ser utilizado para operaciones no-destructivas — es decir, operaciones en donde se esta “obteniendo” datos del servidor, pero no modificando. Por ejemplo, una consulta a un servicio de búsqueda podría ser una petición GET. Por otro lado, las solicitudes GET pueden ser almacenadas en la cache del navegador, pudiendo conducir a un comportamiento impredecible si no se lo espera. Generalmente, la información enviada al servidor, es enviada en una cadena de datos (en inglés query string).
El método POST debe ser utilizado para operaciones destructivas — es decir, operaciones en donde se está incorporando información al servidor. Por ejemplo, cuando un usuario guarda un artículo en un blog, esta acción debería utilizar POST. Por otro lado, este tipo de método no se guarda en la cache del navegador. Además, una cadena de datos puede ser parte de la URL, pero la información tiende a ser enviada de forma separada.
- 7.2.2 Tipos de Datos
+ 7.2.2 Tipos de Datos
Generalmente, jQuery necesita algunas instrucciones sobre el tipo de información que se espera recibir cuando se realiza una petición Ajax. En algunos casos, el tipo de dato es especificado por el nombre del método, pero en otros casos se lo debe detallar como parte de la configuración del método:
- text
- Para el transporte de cadenas de caracteres simples.
+ - Para el transporte de cadenas de caracteres simples.
- html
- Para el transporte de bloques de código HTML que serán ubicados en la página.
+ - Para el transporte de bloques de código HTML que serán ubicados en la página.
- script
- Para añadir un nuevo script con código JavaScript a la página.
+ - Para añadir un nuevo script con código JavaScript a la página.
- json
- Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
+ - Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
Nota
- A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
+ A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en formato JSON.
- jsonp
- Para transportar información JSON de un dominio a otro.
+ - Para transportar información JSON de un dominio a otro.
- xml
- Para transportar información en formato XML.
+ - Para transportar información en formato XML.
A pesar de los diferentes tipos de datos de que se puede utilizar, es recomendable utilizar el formato JSON, ya que es muy flexible, permitiendo por ejemplo, enviar al mismo tiempo información plana y HTML.
- 7.2.3 Asincronismo
+ 7.2.3 Asincronismo
Debido a que, de forma predeterminada, las llamadas Ajax son asíncronas, la respuesta del servidor no esta disponible de forma inmediata. Por ejemplo, el siguiente código no debería funcionar:
var response;
$.get('foo.php', function(r) { response = r; });
@@ -2210,22 +2210,22 @@ 7.2.3 Asi
$.get('foo.php', function(response) { console.log(response); });
- 7.2.4 Políticas de Mismo Origen y JSONP
+ 7.2.4 Políticas de Mismo Origen y JSONP
En general, las peticiones Ajax están limitadas a utilizar el mismo protocolo (http o https), el mismo puerto y el mismo dominio de origen. Esta limitación no se aplica a los scripts cargados a través del método Ajax de jQuery.
La otra excepción es cuando se hace una petición que recibirá una respuesta en formato JSONP. En este caso, el proveedor de la respuesta debe responder la petición con un script que puede ser cargado utilizando la etiqueta <script>, evitando así la limitación de realizar peticiones desde el mismo dominio. Dicha respuesta contendrá la información solicitada, contenida en una función
- 7.2.5 Ajax y Firebug
+ 7.2.5 Ajax y Firebug
Firebug (o el inspector WebKit que viene incluido en Chrome o Safari) son herramientas imprescindibles para trabajar con peticiones Ajax, ya que es posible observarlas desde la pestaña Consola de Firebug (o yendo a Recursos > Panel XHR desde el inspector de Webkit) y revisar los detalles de dichas peticiones. Si algo esta fallando cuando trabaja con Ajax, este es el primer lugar en donde debe dirigirse para saber cual es el problema.
- 7.3 Métodos Ajax de jQuery
+ 7.3 Métodos Ajax de jQuery
Como se indicó anteriormente, jQuery posee varios métodos para trabajar con Ajax. Sin embargo, todos están basados en el método $.ajax, por lo tanto, su comprensión es obligatoria. A continuación se abarcará dicho método y luego se indicará un breve resumen sobre los demás métodos.
Generalmente, es preferible utilizar el método $.ajax en lugar de los otros, ya que ofrece más características y su configuración es muy comprensible.
- 7.3.1 $.ajax
- El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
+ 7.3.1 $.ajax
+ El método $.ajax es configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.
Utilizar el método $.ajax
$.ajax({
// la URL para la petición
@@ -2267,54 +2267,54 @@ 7.3.1 $.ajaxUna aclaración sobre el parámetro dataType: Si el servidor devuelve información que es diferente al formato especificado, el código fallará, y la razón de porque lo hace no siempre quedará clara debido a que la respuesta HTTP no mostrará ningún tipo de error. Cuando esté trabajando con peticiones Ajax, debe estar seguro que el servidor esta enviando el tipo de información que esta solicitando y verifique que la cabecera Content-type es exacta al tipo de dato. Por ejemplo, para información en formato JSON, la cabecera Content-type debería ser application/json.
- 7.3.1.1 Opciones del método $.ajax
- El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
+ 7.3.1.1 Opciones del método $.ajax
+ El método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
- async
- Establece si la petición será asíncrona o no. De forma predeterminada el valor es true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
+ - Establece si la petición será asíncrona o no. De forma predeterminada el valor es
true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.
- cache
- Establece si la petición será guardada en la cache del navegador. De forma predeterminada es true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
+ - Establece si la petición será guardada en la cache del navegador. De forma predeterminada es
true para todos los dataType excepto para “script” y “jsonp”. Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.
- complete
- Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
+ - Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success, notmodified, error, timeout, abort, o parsererror).
- context
- Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
+ - Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de
this dentro de las funciones). De manera predeterminada this hace referencia al objeto originalmente pasado al método $.ajax.
- data
- Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo foo=bar&baz=bim.)
+ - Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo
foo=bar&baz=bim.)
- dataType
- Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
+ - Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
- error
- Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
+ - Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout, error, abort, o parsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemplo Not Found o Internal Server Error).
- jsonp
- Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
+ - Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
- success
- Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
+ - Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.
- timeout
- Establece un tiempo en milisegundos para considerar a una petición como fallada.
+ - Establece un tiempo en milisegundos para considerar a una petición como fallada.
- traditional
- Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
+ - Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
- type
- De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
+ - De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
- url
- Establece la URL en donde se realiza la petición.
+ - Establece la URL en donde se realiza la petición.
La opción url es obligatoria para el método $.ajax;
- Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
+ Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
Nota
- A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
+ A partir de la versión 1.5 de jQuery, las opciones beforeSend, success, error y complete reciben como uno de sus argumentos el objeto jqXHR siendo este una extensión del objeto nativo XMLHTTPRequest. El objeto jqXHR posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto jqXHR puede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.
Nota
@@ -2323,30 +2323,30 @@ 7.
- 7.3.2 Métodos Convenientes
- En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores pre-establecidos de configuración).
+ 7.3.2 Métodos Convenientes
+ En caso que no quiera utilizar el método $.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método $.ajax con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
- $.get
- Realiza una petición GET a una URL provista.
+ - Realiza una petición GET a una URL provista.
- $.post
- Realiza una petición POST a una URL provista.
+ - Realiza una petición POST a una URL provista.
- $.getScript
- Añade un script a la página.
+ - Añade un script a la página.
- $.getJSON
- Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
+ - Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
Los métodos deben tener los siguientes argumentos, en orden:
- url
- La URL en donde se realizará la petición. Su valor es obligatorio.
+ - La URL en donde se realizará la petición. Su valor es obligatorio.
- data
- La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como foo=bar&baz=bim).
+ - La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como
foo=bar&baz=bim).
@@ -2355,10 +2355,10 @@ 7.3.2
- success callback
- Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
+ - Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
- data type
- El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
+ - El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
@@ -2384,7 +2384,7 @@ 7.3.2
- 7.3.3 $.fn.load
+ 7.3.3 $.fn.load
El método $.fn.load es el único que se puede llamar desde una selección. Dicho método obtiene el código HTML de una URL y rellena a los elementos seleccionados con la información obtenida. En conjunto con la URL, es posible especificar opcionalmente un selector, el cual obtendrá el código especificado en dicha selección.
Utilizar el método $.fn.load para rellenar un elemento
$('#newContent').load('/foo.html');
@@ -2395,7 +2395,7 @@ 7.3.3 $.
- 7.4 Ajax y Formularios
+ 7.4 Ajax y Formularios
Las capacidades de jQuery con Ajax pueden ser especialmente útiles para el trabajo con formularios. Por ejemplo, la extensión jQuery Form Plugin es una extensión para añadir capacidades Ajax a formularios. Existen dos métodos que debe conocer para cuando este realizando este tipo de trabajos: $.fn.serialize y $.fn.serializeArray.
Transformar información de un formulario a una cadena de datos
$('#myForm').serialize();
@@ -2409,7 +2409,7 @@ 7.4
]
- 7.5 Trabajar con JSONP
+ 7.5 Trabajar con JSONP
En los últimos tiempos, la introducción de JSONP, ha permitido la creación de aplicaciones híbridas de contenidos. Muchos sitios importantes ofrecen JSONP como servicio de información, el cual se accede a través de una API (en inglés Application programming interface) predefinida. Un servicio particular que permite obtener información en formato JSONP es Yahoo! Query Language, el cual se utiliza a continuación para obtener, por ejemplo, noticias sobre gatos:
Utilizar YQL y JSONP
$.ajax({
@@ -2437,17 +2437,17 @@ 7.5
jQuery se encarga de solucionar todos los aspectos complejos de la petición JSONP. Lo único que debe hacer es especificar el nombre de la función de devolución (en este caso “callback”, según lo especifica YQL) y el resultado final será como una petición Ajax normal.
- 7.6 Eventos Ajax
- A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
+ 7.6 Eventos Ajax
+ A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
Mostrar/Ocultar un indicador utilizando Eventos Ajax
$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });
- 7.7 Ejercicios
+ 7.7 Ejercicios
- 7.7.1 Cargar Contenido Externo
+ 7.7.1 Cargar Contenido Externo
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/load.js. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.
Crear un elementos div después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando $.fn.data.
7.7.
Recuerde utilizar console.log para asegurarse que esta realizando lo correcto.
- 7.7.2 Cargar Contenido Utilizando JSON
+ 7.7.2 Cargar Contenido Utilizando JSON
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/specials.js. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.
Añadir un elemento div después del formulario que se encuentra dentro del elemento #specials; allí será el lugar en donde se colocará la información a obtener.
- 8 Extensiones
+ 8 Extensiones
- 8.1 ¿Qué es una Extensión?
+ 8.1 ¿Qué es una Extensión?
Una extensión de jQuery es simplemente un nuevo método que se utilizará para extender el prototipo (prototype) del objeto jQuery. Cuando se extiende el prototipo, todos los objetos jQuery hereden los métodos añadidos. Por lo tanto, cuando se realiza una llamada jQuery(), es creado un nuevo objeto jQuery con todos los métodos heredados.
El objetivo de una extensión es realizar una acción utilizando una colección de elementos, de la misma forma que lo hacen, por ejemplo, los métodos fadeOut o addClass de la biblioteca.
Usted puede realizar sus propias extensiones y utilizarlas de forma privada en su proyecto o también puede publicarlas para que otras personas le saquen provecho.
- 8.2 Crear una Extensión Básica
+ 8.2 Crear una Extensión Básica
El código para realizar una extensión básica es la siguiente:
(function($){
$.fn.myNewPlugin = function() {
@@ -2560,17 +2560,17 @@
$('a').fadeInAndAddClass(400, 'finishedFading');
- 8.3 Encontrar y Evaluar Extensiones
+ 8.3 Encontrar y Evaluar Extensiones
Uno de los aspectos más populares de jQuery es la diversidad de extensiones que existen.
Sin embargo, la calidad entre extensiones puede variar enormemente. Muchas son intensivamente probadas y bien mantenidas, pero otras son creadas de forma apresurada y luego ignoradas, sin seguir buenas prácticas.
Google es la mejor herramienta para encontrar extensiones (aunque el equipo de jQuery este trabajando para mejorar su repositorio de extensiones). Una vez encontrada la extensión, posiblemente quiera consultar la lista de correos de jQuery o el canal IRC #jquery para obtener la opinión de otras personas sobre dicha extensión.
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) Signs of a poorly written jQuery plugin por Remy Sharp.
- Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
- 8.4 Escribir Extensiones
+ 8.4 Escribir Extensiones
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
- La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+ La mayoría de las extensiones son métodos creados dentro del espacio de nombres $.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de this. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover
// definición de la extensión
@@ -2639,7 +2639,7 @@ 8.4
- 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
+ 8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
Nota
Esta sección esta basada, con permiso del autor, en el artículo Building Stateful jQuery Plugins de Scott Gonzalez.
@@ -2684,7 +2684,7 @@
- 8.5.1 Añadir Métodos a un Widget
+ 8.5.1 Añadir Métodos a un Widget
Ahora que es posible inicializar la extensión, es necesario añadir la habilidad de realizar acciones a través de métodos definidos en la extensión. Para definir un método en la extensión es necesario incluir la función en el objeto literal que se pasa a jQuery.widget. También es posible definir métodos “privados” anteponiendo un guión bajo al nombre de la función.
Crear métodos en el Widget
$.widget("nmk.progressbar", {
@@ -2743,7 +2743,7 @@
- 8.5.2 Trabajar con las Opciones del Widget
+ 8.5.2 Trabajar con las Opciones del Widget
Uno de los métodos disponibles automáticamente para la extensión es option. Este método permite obtener y establecer opciones después de la inicialización y funciona exactamente igual que los métodos attr y css de jQuery: pasando únicamente un nombre como argumento el método funciona como obtenedor, mientras que pasando uno o más conjuntos de nombres y valores el método funciona como establecedor. Cuando es utilizado como método obtenedor, la extensión devolverá el valor actual de la opción correspondiente al nombre pasado como argumento. Por otro lado, cuando es utilizado como un método establecedor, el método _setOption de la extensión será llamado por cada opción que se desea establecer.
Responder cuando una opción es establecida
$.widget("nmk.progressbar", {
@@ -2768,7 +2768,7 @@
- 8.5.3 Añadir Funciones de Devolución de Llamada
+ 8.5.3 Añadir Funciones de Devolución de Llamada
Uno de las maneras más fáciles de extender una extensión es añadir funciones de devolución de llamada, para que de esta forma el usuario puede reaccionar cuando el estado de la extensión cambie. A continuación se mostrará como añadir una función de devolución de llamada a la extensión creada para indicar cuando la barra de progreso haya alcanzado el 100%. El método _trigger obtiene tres parámetros: el nombre de la función de devolución, el objeto de evento nativo que inicializa la función de devolución y un conjunto de información relevante al evento. El nombre de la función de devolución es el único parámetro obligatorio, pero los otros pueden ser muy útiles si el usuario desea implementar funcionalidades personalizadas.
Proveer funciones de devolución de llamada
$.widget("nmk.progressbar", {
@@ -2828,7 +2828,7 @@
- 8.5.4 Limpieza
+ 8.5.4 Limpieza
En algunos casos, tendrá sentido permitir a los usuarios aplicar y desaplicar la extensión. Esto es posible hacerlo a través del método destroy. Con dicho método, es posible deshacer todo lo realizado con la extensión. También éste es llamado automáticamente si el elemento vinculado a la extensión es eliminado del DOM (por lo cual también es posible utilizarlo para la “recolección de basura”). El método destroy predeterminado remueve el vínculo entre el elemento DOM y la instancia de la extensión
Añadir un método destroy al widget
$.widget( "nmk.progressbar", {
@@ -2865,18 +2865,18 @@ 8.5.4 Limpiez
});
- 8.5.5 Conclusión
+ 8.5.5 Conclusión
La utilización de Widget factory es solo una manera de crear extensiones con mantenimiento de estado. Existen algunos modelos diferentes que pueden ser utilizados y cada uno posee sus ventajas y desventajas. Widget factory resuelve muchos problemas comunes, mejora significativamente la productividad y la reutilización de código.
- 8.6 Ejercicios
+ 8.6 Ejercicios
- 8.6.1 Realizar una Tabla Ordenable
+ 8.6.1 Realizar una Tabla Ordenable
Para este ejercicio, la tarea es identificar, descargar e implementar una extensión que permita ordenar la tabla existente en la página index.html. Cuando esté listo, todas las columnas de la tabla deben poder ser ordenables.
- 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
+ 8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/stripe.js. La tarea es escribir una extensión llamada “stripe” la cual podrá ser llamada desde cualquier elemento table y deberá cambiar el color de fondo de las filas impares en el cuerpo de la tabla. El color podrá ser especificado como parámetro de la extensión.
$('#myTable').stripe('#cccccc');
No olvide de devolver la tabla para que otros métodos puedan ser encadenados luego de la llamada a la extensión.
@@ -2884,10 +2884,10 @@
- 9 Mejores Prácticas para Aumentar el Rendimiento
+ 9 Mejores Prácticas para Aumentar el Rendimiento
Este capítulo cubre numerosas mejores prácticas de JavaScript y jQuery,sin un orden en particular. Muchas de estas prácticas están basadas en la presentación jQuery Anti-Patterns for Performance (en inglés) de Paul Irish.
- 9.1 Guardar la Longitud en Bucles
+ 9.1 Guardar la Longitud en Bucles
En un bucle, no es necesario acceder a la longitud de un vector cada vez que se evalúa la condición; dicho valor se puede guardar previamente en una variable.
var myLength = myArray.length;
@@ -2896,7 +2896,7 @@
- 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
+ 9.2 Añadir Nuevo Contenido por Fuera de un Bucle
Si va a insertar muchos elementos en el DOM, hágalo todo de una sola vez, no de una por vez.
// mal
$.each(myArray, function(i, item) {
@@ -2922,7 +2922,7 @@ $('#ballers').html(myHtml);
- 9.3 No Repetirse
+ 9.3 No Repetirse
No se repita; realice las cosas una vez y sólo una, caso contrario lo estará haciendo mal.
// MAL
if ($eventfade.data('currently') != 'showing') {
@@ -2946,7 +2946,7 @@ 9.3 No Re
});
- 9.4 Cuidado con las Funciones Anónimas
+ 9.4 Cuidado con las Funciones Anónimas
No es aconsejable utilizar de sobremanera las funciones anónimas. Estas son difíciles de depurar, mantener, probar o reutilizar. En su lugar,utilice un objeto literal para organizar y nombrar sus controladores y funciones de devolución de llamada.
// MAL
$(document).ready(function() {
@@ -2980,10 +2980,10 @@ $(document).ready(PI.onReady);
- 9.5 Optimización de Selectores
+ 9.5 Optimización de Selectores
La optimización de selectores es menos importante de lo que solía ser, debido a la implementación en algunos navegadores dedocument.querySelectorAll(), pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
- 9.5.1 Selectores basados en ID
+ 9.5.1 Selectores basados en ID
Siempre es mejor comenzar las selecciones con un ID.
// rápido
$('#container div.robotarm');
@@ -2993,7 +2993,7 @@ 9.5.
El ejemplo que utiliza $.fn.find es más rápido debido a que la primera selección utiliza el motor de selección interno Sizzle — mientras que la selección realizada únicamente por ID utiliza document.getElementById(), el cual es extremadamente rápido debido a que es una función nativa del navegador.
- 9.5.2 Especificidad
+ 9.5.2 Especificidad
Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.
// no optimizado
$('div.data .gonzalez');
@@ -3008,7 +3008,7 @@ 9.5.2 Es
La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.
- 9.5.3 Evitar el Selector Universal
+ 9.5.3 Evitar el Selector Universal
Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.
$('.buttons > *'); // muy lento
$('.buttons').children(); // mucho mejor
@@ -3019,7 +3019,7 @@
- 9.6 Utilizar la Delegación de Eventos
+ 9.6 Utilizar la Delegación de Eventos
La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista). jQuery hace fácil este trabajo a través de $.fn.live y$.fn.delegate. En lo posible, es recomendable utilizar $.fn.delegate en lugar de $.fn.live, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.
Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.
// mal (si existen muchos items en la lista)
@@ -3033,7 +3033,7 @@ $('#myList').delegate('li.trigger', 'click', handlerFn);
- 9.7 Separar Elementos para Trabajar con Ellos
+ 9.7 Separar Elementos para Trabajar con Ellos
En lo posible, hay que evitar la manipulación del DOM. Para ayudar con este propósito, a partir de la versión 1.4, jQuery introduce $.fn.detach el cual permite trabajar elementos de forma separada del DOM para luego insertarlos.
var $table = $('#myTable');
var $parent = $table.parent();
@@ -3043,7 +3043,7 @@ $parent.append(table);
- 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
+ 9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
Si va a cambiar el CSS en más de 20 elementos utilizando $.fn.css, considere realizar los cambios de estilos añadiéndolos en una etiqueta style. De esta forma se incrementa un 60% el rendimiento.
// correcto hasta 20 elementos, lento en más elementos
$('a.swedberg').css('color', '#asd123');
@@ -3051,7 +3051,7 @@ appendTo('head');
- 9.9 Utilizar $.data en Lugar de $.fn.data
+ 9.9 Utilizar $.data en Lugar de $.fn.data
Utilizar $.data en un elemento del DOM en lugar de $.fn.data en una selección puede ser hasta 10 veces más rápido. Antes de realizarlo, este seguro de comprender la diferencia entre un elemento DOM y una selección jQuery.
// regular
$(elem).data(key,value);
@@ -3060,7 +3060,7 @@ $.data(elem,key,value);
- 9.10 No Actuar en Elementos no Existentes
+ 9.10 No Actuar en Elementos no Existentes
jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.
// MAL: el código a continuación ejecuta tres funciones
// sin comprobar si existen elementos
@@ -3087,7 +3087,7 @@
- 9.12 Condicionales
+ 9.12 Condicionales
// antiguo
if (type == 'foo' || type == 'bar') { ... }
@@ -3113,21 +3113,21 @@ 9.12 Con
if (({ foo : 1, bar : 1 })[type]) { ... }
- 9.13 No Tratar a jQuery como si fuera una Caja Negra
- Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
+ 9.13 No Tratar a jQuery como si fuera una Caja Negra
+ Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
- 10 Organización del Código
+ 10 Organización del Código
- 10.1 Introducción
+ 10.1 Introducción
Cuando se emprende la tarea de realizar aplicaciones complejas del lado del cliente, es necesario considerar la forma en que se organizará el código. Este capitulo está dedicado a analizar algunos patrones de organización de código para utilizar en una aplicación realizada con jQuery. Además se explorará el sistema de gestión de dependencias de RequireJS.
- 10.1.1 Conceptos Clave
+ 10.1.1 Conceptos Clave
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:
el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque $(document).ready(). Este concepto se conoce como encapsulación;
no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
las unidades de funcionalidad deben tener una articulación flexible (en inglés loosely coupled) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
@@ -3135,11 +3135,11 @@ 10.1.1
- 10.2 Encapsulación
+ 10.2 Encapsulación
El primer paso para la organización del código es separar la aplicación en distintas piezas.
Muchas veces, este esfuerzo suele ser suficiente para mantener al código en orden.
- 10.2.1 El Objeto Literal
+ 10.2.1 El Objeto Literal
Un objeto literal es tal vez la manera más simple de encapsular código relacionado. Este no ofrece ninguna privacidad para propiedades o métodos, pero es útil para eliminar funciones anónimas, centralizar opciones de configuración, y facilitar el camino para la reutilización y refactorización.
Un objeto literal
var myFeature = {
@@ -3192,7 +3192,7 @@ 10.2.1urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
@@ -3254,7 +3254,7 @@ 10.2.1Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque $(document).ready(). Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque $(document).ready().
- 10.2.2 El Patrón Modular
+ 10.2.2 El Patrón Modular
El patrón modular supera algunas limitaciones del objeto literal, ofreciendo privacidad para variables y funciones, exponiendo a su vez (si se lo desea) una API pública.
El patrón modular
var feature =(function() {
@@ -3346,7 +3346,7 @@ 10.2.2
- 10.3 Gestión de Dependencias
+ 10.3 Gestión de Dependencias
Nota
Esta sección esta basada en la excelente documentación de RequireJS y es utilizada con el permiso de James Burke, autor de RequireJS.
@@ -3355,11 +3355,11 @@ 10.3
RequireJS es una herramienta de gestión de dependencias creada por James Burke, la cual ayuda a manejar los módulos, cargarlos en un orden correcto y combinarlos de forma fácil sin tener que realizar ningún cambio. A su vez, otorga una manera fácil de cargar código una vez cargada la página, permitiendo minimizar el tiempo de descarga.
RequireJS posee un sistema modular, que sin embargo, no es necesario seguirlo para obtener sus beneficios. El formato modular de RequireJS permite la escritura de código encapsulado, incorporación de internacionalización (i18n) a los paquetes (para permitir utilizarlos en diferentes lenguajes) e incluso la utilización de servicios JSONP como dependencias.
- 10.3.1 Obtener RequireJS
+ 10.3.1 Obtener RequireJS
La manera más fácil de utilizar RequireJS con jQuery es descargando el paquete de jQuery con RequireJS ya incorporado en él. Este paquete excluye porciones de código que duplican funciones de jQuery. También es útil descargar un ejemplo de proyecto jQuery que utiliza RequireJS.
- 10.3.2 Utilizar RequireJS con jQuery
+ 10.3.2 Utilizar RequireJS con jQuery
Utilizar RequireJS es simple, tan solo es necesario incorporar en la página la versión de jQuery que posee RequireJS incorporado y a continuación solicitar los archivos de la aplicación. El siguiente ejemplo asume que tanto jQuery como los otros archivos están dentro de la carpeta scripts/.
Utilizar RequireJS: Un ejemplo simple
<!DOCTYPE html>
@@ -3385,7 +3385,7 @@
- 10.3.3 Crear Módulos Reusables con RequireJS
+ 10.3.3 Crear Módulos Reusables con RequireJS
RequireJS hace que sea fácil definir módulos reusables a través de require.def(). Un modulo RequireJS puede tener dependencias que pueden ser utilizadas para definir un módulo, además de poder devolver un valor — un objeto, una función, u otra cosa — que puede ser incluso utilizado otros módulos.
Si el módulo no posee ninguna dependencia, tan solo se debe especificar el nombre como primer argumento de require.def(). El segundo argumento es un objeto literal que define las propiedades del módulo. Por ejemplo:
Definición de un módulo RequireJS que no posee dependencias
@@ -3414,8 +3414,8 @@ my/cart.js
- my/inventory.js
- my/shirt.js
+ my/inventory.js
+ my/shirt.js
La función que define my/shirt no es llamada hasta que my/cart y my/inventory hayan sido cargadas, y dicha función recibe como argumentos a los módulos como cart y inventory. El orden de los argumentos de la función debe coincidir con el orden en que las dependencias se requieren en el vector. El objeto devuelto define el módulo my/shirt. Definiendo los módulos de esta forma, my/shirt no existe como un objeto global, ya que múltiples módulos pueden existir en la página al mismo tiempo.
Los módulos no tienen que devolver un objeto; cualquier tipo de valor es permitido.
Definición de un módulo RequireJS que devuelve una función
@@ -3433,14 +3433,14 @@
- 10.3.4 Optimizar el Código con las Herramientas de RequireJS
+ 10.3.4 Optimizar el Código con las Herramientas de RequireJS
Una vez incorporado RequireJS para el manejo de dependencias, la optimización del código es muy fácil. Descargue el paquete de RequireJS y colóquelo en cualquier lugar, preferentemente fuera del área de desarrollo web. Para los propósitos de este ejemplo, el paquete de RequireJS esta ubicado en una carpeta paralela al directorio webapp (la cual contiene la página HTML y todos los archivos JavaScript de la aplicación). La estructura de directorios es:
requirejs/ (utilizado para ejecutar las herramientas)
webapp/app.html
- webapp/scripts/app.js
- webapp/scripts/require-jquery.js
- webapp/scripts/jquery.alpha.js
- webapp/scripts/jquery.beta.js
+ webapp/scripts/app.js
+ webapp/scripts/require-jquery.js
+ webapp/scripts/jquery.alpha.js
+ webapp/scripts/jquery.beta.js
Luego, en la carpeta en donde se encuentran require-jquery.js y app.js, crear un archivo llamado app.build.js con el siguiente contenido:
Archivo de configuración para las herramientas de optimización de RequireJS
{
@@ -3469,9 +3469,9 @@
- 10.4 Ejercicios
+ 10.4 Ejercicios
- 10.4.1 Crear un Módulo Portlet
+ 10.4.1 Crear un Módulo Portlet
Abra el archivo /ejercicios/portlets.html en el navegador. Realice el ejercicio utilizando el archivo /ejercicios/js/portlets.js. El ejercicio consiste en crear una función creadora de portlet que utilice el patrón modular, de tal manera que el siguiente código funcione:
var myPortlet = Portlet({
title : 'Curry',
@@ -3491,9 +3491,9 @@ 10.4
- 11 Eventos Personalizados
+ 11 Eventos Personalizados
- 11.1 Introducción a los Eventos Personalizados
+ 11.1 Introducción a los Eventos Personalizados
Todos estamos familiarizados con los eventos básicos — click, mouseover, focus, blur, submit, etc. — que surgen a partir de la interacción del usuario con el navegador.
Los eventos personalizados permiten conocer el mundo de la programación orientada a eventos (en inglés event-driven programming). En este capítulo, se utilizará el sistema de eventos personalizados de jQuery para crear una simple aplicación de búsqueda en Twitter.
En un primer momento puede ser difícil entender el requisito de utilizar eventos personalizados, ya que los eventos convencionales permiten satisfacer todas las necesidades. Sin embargo, los eventos personalizados ofrecen una nueva forma de pensar la programación en JavaScript. En lugar de enfocarse en el elemento que ejecuta una acción, los eventos personalizados ponen la atención en el elemento en donde la acción va a ocurrir. Este concepto brinda varios beneficios:
@@ -3580,7 +3580,7 @@ . fn. ony.fn.trigger
+ Recapitulación: $.fn.on y $.fn.trigger
En el mundo de los eventos personalizados, existen dos métodos importantes de jQuery: $.fn.on y $.fn.trigger. En el capítulo dedicado a eventos se explicó la utilización de estos dos métodos para trabajar con eventos del usuario; en este capítulo es importante recordar 2 puntos:
el método $.fn.on toma como argumentos un tipo de evento y una función controladora de evento. Opcionalmente, puede recibir información asociada al evento como segundo argumento, desplazando como tercer argumento a la función controladora de evento. Cualquier información pasada estará disponible a la función controladora a través de la propiedad data del objeto del evento. A su vez, la función controladora recibe el objeto del evento como primer argumento;
$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);
- 11.1.1 Un Ejemplo de Aplicación
+ 11.1.1 Un Ejemplo de Aplicación
Para demostrar el poder de los eventos personalizados, se desarrollará una simple herramienta para buscar en Twitter. Dicha herramienta ofrecerá varias maneras para que el usuario realice una búsqueda: ingresando el término a buscar en una caja de texto o consultando los “temas de moda” de Twitter.
Los resultados de cada término se mostrarán en un contenedor de resultados; dichos resultados podrán expandirse, colapsarse, refrescarse y removerse, ya sea de forma individual o conjunta.
El resultado final de la aplicación será el siguiente:
@@ -3604,7 +3604,7 @@ 11.
La aplicación finalizada
- 11.1.1.1 Iniciación
+ 11.1.1.1 Iniciación
Se empieza con un HTML básico:
<h1>Twitter Search</h1>
<input type="button" id="get_trends"
@@ -3628,19 +3628,19 @@ 11.1.1.1 I
Los contenedores de resultados son el corazón de la aplicación. Se creará una extensión para preparar cada contenedor una vez que éste se agrega al contenedor Twitter. Además, entre otras cosas, la extensión vinculará los eventos personalizados por cada contenedor y añadirá en la parte superior derecha de cada contenedor botones que ejecutarán acciones. Cada contenedor de resultados tendrá los siguientes eventos personalizados:
- refresh
- Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
+ - Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
- populate
- Recibe la información JSON y la utiliza para rellenar el contenedor.
+ - Recibe la información JSON y la utiliza para rellenar el contenedor.
- remove
- Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
+ - Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa
true como segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.
- collapse
- Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
+ - Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
- expand
- Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
+ - Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
Además, la extensión es responsable de añadir los botones de acciones al contenedor, vinculando un evento click a cada botón y utilizando la clase de cada ítem para determinar qué evento personalizado será ejecutado en cada contenedor de resultados.
@@ -3759,10 +3759,10 @@ 11.1.1.1 I
El contenedor Twitter, posee solo dos eventos personalizados:
- getResults
- Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión $.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
+ - Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión
$.fn.twitterResult (mostrada anteriormente) y luego ejecuta el evento refresh con el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.
- getTrends
- Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
+ - Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento
getResults por cada uno, de tal modo que añade un contenedor de resultados por cada término.
Vinculaciones en el contenedor Twitter:
@@ -3820,7 +3820,7 @@ 11.1.1.1 I
});
- 11.1.1.2 Conclusión
+ 11.1.1.2 Conclusión
Los eventos personalizados ofrecen una nueva manera de pensar el código: ellos ponen el énfasis en el objetivo de un comportamiento, no en el elemento que lo activa. Si se toma el tiempo desde el principio para explicar las piezas de su aplicación, así como los comportamientos que esas piezas necesitan exhibir, los eventos personalizados proveen una manera poderosa para “hablar” con esas piezas, ya sea de una en una o en masa.
Una vez que los comportamientos se han descripto, se convierte en algo trivial ejecutarlos desde cualquier lugar, lo que permite la rápida creación y experimentación de opciones de interfaz. Finalmente, los eventos personalizados también permiten mejorar la lectura del código y su mantenimiento, haciendo clara la relación entre un elemento y su comportamiento.
Puede ver la aplicación completa en los archivos demos/custom-events/custom-events.html y demos/custom-events/js/custom-events.js del material que componen este libro.
@@ -3829,13 +3829,13 @@ 11.1.1.2
- 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
+ 12 Funciones y ejecuciones diferidas a través del objeto $.Deferred
- 12.1 Introducción
- A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
+ 12.1 Introducción
+ A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido $.Deferred (en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre $.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.
- 12.2 El objeto diferido y Ajax
+ 12.2 El objeto diferido y Ajax
El caso más común en donde se puede apreciar la utilidad del objeto diferido es en el manejo de las funciones de devolución en peticiones Ajax.
Según se pudo apreciar en el capítulo dedicado, una manera de invocar una petición Ajax es:
Manera tradicional de utilizar el método $.ajax
@@ -3882,8 +3882,8 @@ 12.
ajax.always(function(){
alert('Petición realizada');
});
- A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
- Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
+ A través de los métodos deferred.done, deferred.fail y deferred.always es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
+ Notar que en en ningún momento se llama al objeto diferido $.Deferred. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto $.ajax. Más adelante se explicará como utilizar al objeto $.Deferred de manera explícita.
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
Colas de funciones de devolución en una petición Ajax
// definición de la petición Ajax
@@ -3917,10 +3917,10 @@ 12.
ajax.fail(function(){
alert('Disculpe, existió un problema');
});
- Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+ Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en #element se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable ajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
- 12.2.1 deferred.then
- Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+ 12.2.1 deferred.then
+ Otra manera de utilizar los métodos deferred.done y deferred.fail es a través de deferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
Utilización del método deferred.then
// definición de la petición Ajax
var ajax = $.ajax({
@@ -3935,7 +3935,7 @@ 12.2.1 <
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -3944,7 +3944,7 @@ 12.2.1 <
- 12.3 Creación de objetos diferidos con $.Deferred
+ 12.3 Creación de objetos diferidos con $.Deferred
Así como es posible desacoplar las funciones de devolución en una petición Ajax, también es posible realizarlo en otras funciones utilizando de manera explícita el objeto $.Deferred.
Por ejemplo, una función que verifica si un número es par, de la manera tradicional puede escribirse de la siguiente manera:
Función sin utilizar el objeto $.Deferred
@@ -3996,7 +3996,7 @@ console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -4006,7 +4006,7 @@ http://api.jquery.com/deferred.state/.
+
Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pending, resolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.
- 12.3.1 deferred.pipe
+ 12.3.1 deferred.pipe
Existen casos en que se necesita modificar el estado de un objeto diferido o filtrar la información que viene asociada. Para estos casos existe deferred.pipe. Su funcionamiento es similar a deferred.then, con la diferencia que deferred.pipe devuelve un nuevo objeto diferido modificado a través de una función interna.
Función filtrando valores utilizando deferred.pipe
// función que calcula si un número entero es par o impar
@@ -4098,11 +4098,11 @@ 12.3.1 <
}
);
- Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
+ Para más detalles sobre deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.
- 12.3.2 $.when
- El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+ 12.3.2 $.when
+ El método $.when permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de $.when es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
Utilización de $.when
// primera petición ajax
@@ -4126,7 +4126,7 @@ 12.3.2 $.wh
alert('Disculpe, existió un problema');
}
);
- Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
+ Para más detalles sobre $.when, puede consultar http://api.jquery.com/jQuery.when/.
Copyright © 2011
Material licenciado por Rebecca Murphey bajo la licencia Creative Commons Attribution-Share Alike 3.0 United States. Usted es libre de copiarlo, distribuirlo, transmitirlo y modificarlo, siempre y cuando haga referencia a este repositorio y atribuya la autoría original a Rebecca Murphey. Si altera, transforma o crea una obra derivada, deberá distribuir el resultado bajo una licencia igual, similar o compatible. Cualquiera de las condiciones mencionadas pueden no aplicarse si obtiene permisos del autor. Para cualquier reutilización o distribución, deberá dejar en claro la licencia la mejor manera para hacerlo es a través de un enlace hacia la licencia Creative Commons Attribution-Share Alike 3.0 United States.
diff --git a/libro/markdown/cap05-eventos.markdown b/libro/markdown/cap05-eventos.markdown
index d39fccb..6dbaf9f 100644
--- a/libro/markdown/cap05-eventos.markdown
+++ b/libro/markdown/cap05-eventos.markdown
@@ -293,7 +293,7 @@ $('p.expander').toggle(
### Crear una "Sugerencia" para una Caja de Ingreso de Texto
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
1. Establecer el valor del elemento *input* igual al valor del elemento *label*.
@@ -311,7 +311,7 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio ut
### Añadir una Navegación por Pestañas
-Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
+Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
1. Ocultar todos los elementos *div.module*.
diff --git a/libro/markdown/cap07-ajax.markdown b/libro/markdown/cap07-ajax.markdown
index dc7a975..89ad0bd 100644
--- a/libro/markdown/cap07-ajax.markdown
+++ b/libro/markdown/cap07-ajax.markdown
@@ -187,7 +187,7 @@ El método $.ajax posee muchas opciones de configuración, y es justamente esta
~ Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición *JSONP*. De forma predeterminada el nombre es "*callback*
success
- ~ Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
+ ~ Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma.
timeout
~ Establece un tiempo en milisegundos para considerar a una petición como fallada.
@@ -208,7 +208,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
> **Nota**
>
-> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
+> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR).
>
@@ -220,7 +220,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib
### Métodos Convenientes
-En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores pre-establecidos de configuración).
+En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores preestablecidos de configuración).
Los métodos que provee la biblioteca son:
diff --git a/libro/markdown/cap08-extensiones.markdown b/libro/markdown/cap08-extensiones.markdown
index a369123..96bf898 100644
--- a/libro/markdown/cap08-extensiones.markdown
+++ b/libro/markdown/cap08-extensiones.markdown
@@ -146,7 +146,7 @@ Google es la mejor herramienta para encontrar extensiones (aunque el equipo de j
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) [Signs of a poorly written jQuery plugin](http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/) por Remy Sharp.
-Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
@@ -154,7 +154,7 @@ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero,
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
-La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).
+La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).
A continuación se muestra un ejemplo:
diff --git a/libro/markdown/cap10-organizacion-codigo.markdown b/libro/markdown/cap10-organizacion-codigo.markdown
index b93c3d3..a6f098d 100644
--- a/libro/markdown/cap10-organizacion-codigo.markdown
+++ b/libro/markdown/cap10-organizacion-codigo.markdown
@@ -14,7 +14,7 @@ Antes de comenzar con los patrones de organización de código, es importante en
- el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación;
-- no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
+- no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
- a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
@@ -100,7 +100,7 @@ var myFeature = {
urlBase : '/foo.php?item='
};
- // permite sobreescribir la configuración predeterminada
+ // permite sobrescribir la configuración predeterminada
$.extend(myFeature.config, settings);
myFeature.setup();
diff --git a/libro/markdown/cap12-funciones-diferidas.markdown b/libro/markdown/cap12-funciones-diferidas.markdown
index 7a5a7fc..d38e5a6 100644
--- a/libro/markdown/cap12-funciones-diferidas.markdown
+++ b/libro/markdown/cap12-funciones-diferidas.markdown
@@ -71,10 +71,10 @@ ajax.always(function(){
```
-A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.
+A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.
-*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
+*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.*
De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
@@ -117,13 +117,13 @@ ajax.fail(function(){
```
-Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
+Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.
### `deferred.then`
-Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.
+Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.
**Utilización del método `deferred.then`**
@@ -142,7 +142,7 @@ ajax.then(
alert('Petición realizada satisfactoriamente');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
alert('Disculpe, existió un problema');
}
@@ -216,7 +216,7 @@ isEven(2).then(
console.log('Es par');
},
- // la segunda es la función de devolución erronea
+ // la segunda es la función de devolución errónea
function(){
console.log('Es impar');
}
@@ -232,7 +232,7 @@ Notar que la función `isEven` devuelve el método `deferred.promise`. El mismo
> **Nota**
>
-> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implicitamente dentro del objeto `$.ajax`.
+> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implícitamente dentro del objeto `$.ajax`.
@@ -347,7 +347,7 @@ Para más detalles sobre `deferred.pipe`, puede consultar [http://api.jquery.com
### `$.when`
-El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.
+El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.
Un caso común de utilización de `$.when` es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.
diff --git a/libro/pdf/Fundamentos_de_jQuery.pdf b/libro/pdf/Fundamentos_de_jQuery.pdf
index a2be6c5..80741e2 100644
Binary files a/libro/pdf/Fundamentos_de_jQuery.pdf and b/libro/pdf/Fundamentos_de_jQuery.pdf differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..464a26a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "librojquery",
+ "version": "1.0.0",
+ "description": "Fundamentos de jQuery: Material de aprendizaje",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/dzignus/librojquery.git"
+ },
+ "author": "Leandro D'Onofrio",
+ "license": "Creative Commons Attribution-Share Alike 3.0 United States",
+ "bugs": {
+ "url": "https://github.com/dzignus/librojquery/issues"
+ },
+ "homepage": "https://github.com/dzignus/librojquery",
+ "dependencies": {
+ "hapi": "^18.1.0"
+ }
+}
5.1 Introducción
+5.1 Introducción
jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.
Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
-La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
+Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
+La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.
5.2 Vincular Eventos a Elementos
+5.2 Vincular Eventos a Elementos
jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.on de jQuery ($.fn.bind en versiones anteriores a jQuery 1.7). El método $.fn.on es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.
Vincular un evento utilizando un método reducido
$('p').click(function() {
@@ -1808,7 +1808,7 @@
}
);
5.2.1 Vincular Eventos para Ejecutar una vez
+5.2.1 Vincular Eventos para Ejecutar una vez
A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.
Cambiar controladores utilizando el método $.fn.one
$('p').one('click', function() {
@@ -1818,7 +1818,7 @@
- 5.2.2 Desvincular Eventos
+ 5.2.2 Desvincular Eventos
Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.off pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.
Desvincular todos los controladores del evento click en una selección
$('p').off('click');
@@ -1830,7 +1830,7 @@ 5.2.2$('p').off('click', bar); // foo esta atado aún al evento click
5.2.3 Espacios de Nombres para Eventos
+5.2.3 Espacios de Nombres para Eventos
Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser útil utilizar espacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lo desea.
Asignar espacios de nombres a eventos
$('p').on('click.myNamespace', function() { /* ... */ });
@@ -1839,7 +1839,7 @@ // el espacio de nombre 'myNamespace'
5.2.4 Vinculación de Múltiples Eventos
+5.2.4 Vinculación de Múltiples Eventos
Muy a menudo, elementos en una aplicación estarán vinculados a múltiples eventos, cada uno con una función diferente. En estos casos, es posible pasar un objeto dentro de $.fn.on con uno o más pares de nombres claves/valores. Cada clave será el nombre del evento mientras que cada valor será la función a ejecutar cuando ocurra el evento.
Vincular múltiples eventos a un elemento
$('p').on({
@@ -1853,29 +1853,29 @@
- 5.3 El Objeto del Evento
+ 5.3 El Objeto del Evento
Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:
- pageX, pageY
- La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
+ - La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
- type
- El tipo de evento (por ejemplo “click”).
+ - El tipo de evento (por ejemplo “click”).
- which
- El botón o tecla presionada.
+ - El botón o tecla presionada.
- data
- Alguna información pasada cuando el evento es ejecutado.
+ - Alguna información pasada cuando el evento es ejecutado.
- target
- El elemento DOM que inicializó el evento.
+ - El elemento DOM que inicializó el evento.
- preventDefault()
- Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
+ - Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
- stopPropagation()
- Detiene la propagación del evento sobre otros elementos.
+ - Detiene la propagación del evento sobre otros elementos.
Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:
@@ -1890,7 +1890,7 @@ 5.3
5.4 Ejecución automática de Controladores de Eventos
+5.4 Ejecución automática de Controladores de Eventos
A través del método $.fn.trigger, jQuery provee una manera de disparar controladores de eventos sobre algún elemento sin requerir la acción del usuario. Si bien este método tiene sus usos, no debería ser utilizado para simplemente llamar a una función que pueda ser ejecutada con un click del usuario. En su lugar, debería guardar la función que se necesita llamar en una variable, y luego pasar el nombre de la variable cuando realiza el vinculo (binding). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar $.fn.trigger.
Disparar un controlador de eventos de la forma correcta
var foo = function(e) {
@@ -1907,7 +1907,7 @@ foo(); // en lugar de realizar $('p').trigger('click')
5.5 Incrementar el Rendimiento con la Delegación de Eventos
+5.5 Incrementar el Rendimiento con la Delegación de Eventos
Cuando trabaje con jQuery, frecuentemente añadirá nuevos elementos a la página, y cuando lo haga, necesitará vincular eventos a dichos elementos. En lugar de repetir la tarea cada vez que se añade un elemento, es posible utilizar la delegación de eventos para hacerlo. Con ella, podrá enlazar un evento a un elemento contenedor, y luego, cuando el evento ocurra, podrá ver en que elemento sucede.
La delegación de eventos posee algunos beneficios, incluso si no se tiene pensando añadir más elementos a la página. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no es un trabajo trivial; si posee un gran conjunto de elementos, debería considerar utilizar la delegación de eventos a un elemento contenedor.
@@ -1925,7 +1925,7 @@// ... });
-5.5.1 Desvincular Eventos Delegados
+5.5.1 Desvincular Eventos Delegados
Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método
$.fn.offpara eventos conectados con$.fn.on, y$.fn.undelegatepara eventos conectados con$.fn.delegate. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.Desvincular eventos delegados
$('#myUnorderedList').off('click', 'li'); @@ -1933,10 +1933,10 @@
-5.6 Funciones Auxiliares de Eventos
+5.6 Funciones Auxiliares de Eventos
jQuery ofrece dos funciones auxiliares para el trabajo con eventos:
-5.6.1
+$.fn.hover5.6.1
$.fn.hoverEl método
$.fn.hoverpermite pasar una o dos funciones que se ejecutarán cuando los eventosmouseenterymouseleaveocurran en el elemento seleccionado. Si se pasa una sola función, está será ejecutada en ambos eventos; en cambio si se pasan dos, la primera será ejecutada cuando ocurra el eventomouseenter, mientras que la segunda será ejecutada cuando ocurramouseleave.Nota
@@ -1948,7 +1948,7 @@5.6.1
$ });-5.6.2
+$.fn.toggle5.6.2
$.fn.toggleAl igual que el método anterior,
$.fn.togglerecibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente,$.fn.togglees utilizada con solo dos funciones. En caso que utiliza más de dos funciones, tenga cuidado, ya que puede ser dificultar la depuración del código.La función auxiliar toggle
$('p.expander').toggle( @@ -1962,10 +1962,10 @@5.6.2
5.7 Ejercicios
+5.7 Ejercicios
-5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
-Abra el archivo
+/ejercicios/index.htmlen el navegador. Realice el ejericio utilizando el archivo/ejercicios/js/inputHint.jso trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:5.7.1 Crear una “Sugerencia” para una Caja de Ingreso de Texto
+Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/inputHint.jso trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una “sugerencia” en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
Establecer el valor del elemento input igual al valor del elemento label.
- @@ -1976,8 +1976,8 @@
Añadir la clase “hint” al elemento input.
¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?
-5.7.2 Añadir una Navegación por Pestañas
-Abra el archivo
+/ejercicios/index.htmlen el navegador. Realice el ejericio utilizando el archivo/ejercicios/js/tabs.jso trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:5.7.2 Añadir una Navegación por Pestañas
+Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/tabs.jso trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos div.module. Los pasos ha seguir son los siguientes:
Ocultar todos los elementos div.module.
- @@ -1994,48 +1994,48 @@
Crear una lista desordenada antes del primer div.module para utilizar como pestañas.
-
6 Efectos
+6 Efectos
-6.1 Introducción
+6.1 Introducción
Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.
-Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección
+effects: http://api.jquery.com/category/effects/.Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección
effects: http://api.jquery.com/category/effects/.-6.2 Efectos Incorporados en la Biblioteca
+6.2 Efectos Incorporados en la Biblioteca
Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:
- $.fn.show
-Muestra el elemento seleccionado.
+- Muestra el elemento seleccionado.
- $.fn.hide
-Oculta el elemento seleccionado.
+- Oculta el elemento seleccionado.
- $.fn.fadeIn
-De forma animada, cambia la opacidad del elemento seleccionado al 100%.
+- De forma animada, cambia la opacidad del elemento seleccionado al 100%.
- $.fn.fadeOut
-De forma animada, cambia la opacidad del elemento seleccionado al 0
+- De forma animada, cambia la opacidad del elemento seleccionado al 0
- $.fn.slideDown
-Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
+- Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideUp
-Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
+- Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
- $.fn.slideToggle
-Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
+- Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.
Uso básico de un efecto incorporado
$('h1').show();-6.2.1 Cambiar la Duración de los Efectos
+6.2.1 Cambiar la Duración de los Efectos
Con la excepción de
$.fn.showy$.fn.hide, todos los métodos tienen una duración predeterminada de la animación en 400ms. Este valor es posible cambiarlo.Configurar la duración de un efecto
$('h1').fadeIn(300); // desvanecimiento en 300ms $('h1').fadeOut('slow'); // utilizar una definición de velocidad interna-6.2.1.1 jQuery.fx.speeds
+6.2.1.1 jQuery.fx.speeds
jQuery posee un objeto en
jQuery.fx.speedsel cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones “slow” y “fast”.speeds: { slow: 600, @@ -2050,7 +2050,7 @@6.2.1.1
-6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
+6.2.2 Realizar una Acción Cuando un Efecto fue Ejecutado
A menudo, querrá ejecutar una acción una vez que la animación haya terminado — ya que si ejecuta la acción antes que la animación haya acabado, puede llegar a alterar la calidad del efecto o afectar a los elementos que forman parte de la misma. [Definición: Las funciones de devolución de llamada (en inglés callback functions) proveen una forma para ejecutar código una vez que un evento haya terminado.] En este caso, el evento que responderá a la función será la conclusión de la animación. Dentro de la función de devolución, la palabra clave
thishace referencia al elemento en donde el efecto fue ejecutado y al igual que sucede con los eventos, es posible transformarlo a un objeto jQuery utilizando$(this).Ejecutar cierto código cuando una animación haya concluido
@@ -2070,7 +2070,7 @@$('div.old').fadeOut(300, function() { $(this).remove(); });-
6.3 Efectos Personalizados con
+$.fn.animate6.3 Efectos Personalizados con
$.fn.animateEs posible realizar animaciones en propiedades CSS utilizando el método
$.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.Efectos personalizados con
$.fn.animate$('div.funtimes').animate( @@ -2086,7 +2086,7 @@color plugin. Más adelante en el libro de discutirá la utilización de extensiones.
-6.3.1 Easing
+6.3.1 Easing
[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.
A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método
$.fn.animate.Transición de easing por cada propiedad
@@ -2097,18 +2097,18 @@6.3.1 Easing300 ); -
Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
+Para más detalles sobre las opciones de easing, consulte http://api.jquery.com/animate/.
-6.4 Control de los Efectos
+6.4 Control de los Efectos
jQuery provee varias herramientas para el manejo de animaciones.
- $.fn.stop
-Detiene las animaciones que se están ejecutando en el elemento seleccionado.
+- Detiene las animaciones que se están ejecutando en el elemento seleccionado.
- $.fn.delay
-Espera un tiempo determinado antes de ejecutar la próxima animación.
+- Espera un tiempo determinado antes de ejecutar la próxima animación.
@@ -2119,9 +2119,9 @@$('h1').show(300).delay(1000).hide(300);6.4
-6.5 Ejercicios
+6.5 Ejercicios
-6.5.1 Mostrar Texto Oculto
+6.5.1 Mostrar Texto Oculto
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/blog.js. La tarea es añadir alguna interactividad a la sección blog de la página:
- @@ -2129,7 +2129,7 @@
al hacer click en alguno de los titulares del div #blog, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
6.5.1
-6.5.2 Crear un Menú Desplegable
+6.5.2 Crear un Menú Desplegable
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/navigation.js. La tarea es poder desplegar los ítems del menú superior de la página:
- @@ -2138,7 +2138,7 @@
al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
6.
Para poder realizarlo, utilice el método
$.fn.hoverpara añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo/ejercicios/css/styles.cssincluye una clase “hover” para este propósito)-6.5.3 Crear un Slideshow
+6.5.3 Crear un Slideshow
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/slideshow.js. La tarea es añadir un slideshow a la página con JavaScript.
- @@ -2150,9 +2150,9 @@
Mover el elemento #slideshow a la parte superior de la página.
6.5.3
-7 Ajax
+7 Ajax
-7.1 Introducción
+7.1 Introducción
El método XMLHttpRequest (XHR) permite a los navegadores comunicarse con el servidor sin la necesidad de recargar la página. Este método, también conocido como Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.
Las peticiones Ajax son ejecutadas por el código JavaScript, el cual envía una petición a una URL y cuando recibe una respuesta, una función de devolución puede ser ejecutada la cual recibe como argumento la respuesta del servidor y realiza algo con ella. Debido a que la respuesta es asíncrona, el resto del código de la aplicación continua ejecutándose, por lo cual, es imperativo que una función de devolución sea ejecutada para manejar la respuesta.
A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer las diferencias que pueden existir entre navegadores. Los métodos en cuestión son
@@ -2160,48 +2160,48 @@$.get(),$.getScript(),$.getJSON(),$.post()y$().load().7.1 In
En general, Ajax no trabaja a través de dominios diferentes. Sin embargo, existen excepciones, como los servicios que proveen información en formato JSONP (JSON with Padding), los cuales permiten una funcionalidad limitada a través de diferentes dominios.
-7.2 Conceptos Clave
+7.2 Conceptos Clave
La utilización correcta de los métodos Ajax requiere primero la comprensión de algunos conceptos clave.
-7.2.1 GET vs. POST
+7.2.1 GET vs. POST
Los dos métodos HTTP más comunes para enviar una petición a un servidor son GET y POST. Es importante entender la utilización de cada uno.
El método GET debe ser utilizado para operaciones no-destructivas — es decir, operaciones en donde se esta “obteniendo” datos del servidor, pero no modificando. Por ejemplo, una consulta a un servicio de búsqueda podría ser una petición GET. Por otro lado, las solicitudes GET pueden ser almacenadas en la cache del navegador, pudiendo conducir a un comportamiento impredecible si no se lo espera. Generalmente, la información enviada al servidor, es enviada en una cadena de datos (en inglés query string).
El método POST debe ser utilizado para operaciones destructivas — es decir, operaciones en donde se está incorporando información al servidor. Por ejemplo, cuando un usuario guarda un artículo en un blog, esta acción debería utilizar POST. Por otro lado, este tipo de método no se guarda en la cache del navegador. Además, una cadena de datos puede ser parte de la URL, pero la información tiende a ser enviada de forma separada.
-7.2.2 Tipos de Datos
+7.2.2 Tipos de Datos
Generalmente, jQuery necesita algunas instrucciones sobre el tipo de información que se espera recibir cuando se realiza una petición Ajax. En algunos casos, el tipo de dato es especificado por el nombre del método, pero en otros casos se lo debe detallar como parte de la configuración del método:
- text
-Para el transporte de cadenas de caracteres simples.
+- Para el transporte de cadenas de caracteres simples.
- html
-Para el transporte de bloques de código HTML que serán ubicados en la página.
+- Para el transporte de bloques de código HTML que serán ubicados en la página.
- script
-Para añadir un nuevo script con código JavaScript a la página.
+- Para añadir un nuevo script con código JavaScript a la página.
- json
-Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
+- Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.
Nota
-A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
+A partir de la versión 1.4 de la biblioteca, si la información JSON no está correctamente formateada, la petición podría fallar. Visite http://json.org para obtener detalles sobre un correcto formateo de datos en JSON.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en formato JSON.
- jsonp
-Para transportar información JSON de un dominio a otro.
+- Para transportar información JSON de un dominio a otro.
- xml
-Para transportar información en formato XML.
+- Para transportar información en formato XML.
A pesar de los diferentes tipos de datos de que se puede utilizar, es recomendable utilizar el formato JSON, ya que es muy flexible, permitiendo por ejemplo, enviar al mismo tiempo información plana y HTML.
-7.2.3 Asincronismo
+7.2.3 Asincronismo
Debido a que, de forma predeterminada, las llamadas Ajax son asíncronas, la respuesta del servidor no esta disponible de forma inmediata. Por ejemplo, el siguiente código no debería funcionar:
var response; $.get('foo.php', function(r) { response = r; }); @@ -2210,22 +2210,22 @@7.2.3 Asi
$.get('foo.php', function(response) { console.log(response); });-7.2.4 Políticas de Mismo Origen y JSONP
+7.2.4 Políticas de Mismo Origen y JSONP
En general, las peticiones Ajax están limitadas a utilizar el mismo protocolo (http o https), el mismo puerto y el mismo dominio de origen. Esta limitación no se aplica a los scripts cargados a través del método Ajax de jQuery.
La otra excepción es cuando se hace una petición que recibirá una respuesta en formato JSONP. En este caso, el proveedor de la respuesta debe responder la petición con un
scriptque puede ser cargado utilizando la etiqueta<script>, evitando así la limitación de realizar peticiones desde el mismo dominio. Dicha respuesta contendrá la información solicitada, contenida en una función-7.2.5 Ajax y Firebug
+7.2.5 Ajax y Firebug
Firebug (o el inspector WebKit que viene incluido en Chrome o Safari) son herramientas imprescindibles para trabajar con peticiones Ajax, ya que es posible observarlas desde la pestaña Consola de Firebug (o yendo a Recursos > Panel XHR desde el inspector de Webkit) y revisar los detalles de dichas peticiones. Si algo esta fallando cuando trabaja con Ajax, este es el primer lugar en donde debe dirigirse para saber cual es el problema.
-7.3 Métodos Ajax de jQuery
+7.3 Métodos Ajax de jQuery
Como se indicó anteriormente, jQuery posee varios métodos para trabajar con Ajax. Sin embargo, todos están basados en el método
$.ajax, por lo tanto, su comprensión es obligatoria. A continuación se abarcará dicho método y luego se indicará un breve resumen sobre los demás métodos.Generalmente, es preferible utilizar el método $.ajax en lugar de los otros, ya que ofrece más características y su configuración es muy comprensible.
-7.3.1 $.ajax
-El método
+$.ajaxes configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.7.3.1 $.ajax
+El método
$.ajaxes configurado a través de un objeto, el cual contiene todas las instrucciones que necesita jQuery para completar la petición. Dicho método es particularmente útil debido a que ofrece la posibilidad de especificar acciones en caso que la petición haya fallado o no. Además, al estar configurado a través de un objeto, es posible definir sus propiedades de forma separada, haciendo que sea más fácil la reutilización del código. Puede visitar http://api.jquery.com/jQuery.ajax/ para consultar la documentación sobre las opciones disponibles en el método.Utilizar el método $.ajax
$.ajax({ // la URL para la petición @@ -2267,54 +2267,54 @@7.3.1 $.ajaxUna aclaración sobre el parámetro
dataType: Si el servidor devuelve información que es diferente al formato especificado, el código fallará, y la razón de porque lo hace no siempre quedará clara debido a que la respuesta HTTP no mostrará ningún tipo de error. Cuando esté trabajando con peticiones Ajax, debe estar seguro que el servidor esta enviando el tipo de información que esta solicitando y verifique que la cabeceraContent-typees exacta al tipo de dato. Por ejemplo, para información en formato JSON, la cabeceraContent-typedebería serapplication/json.-7.3.1.1 Opciones del método
-$.ajaxEl método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
+7.3.1.1 Opciones del método
+$.ajaxEl método $.ajax posee muchas opciones de configuración, y es justamente esta característica la que hace que sea un método muy útil. Para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/; a continuación se muestran las más comunes:
- async
-Establece si la petición será asíncrona o no. De forma predeterminada el valor es
+true. Debe tener en cuenta que si la opción se establece enfalse, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.- Establece si la petición será asíncrona o no. De forma predeterminada el valor es
true. Debe tener en cuenta que si la opción se establece enfalse, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.- cache
-Establece si la petición será guardada en la cache del navegador. De forma predeterminada es
+truepara todos los dataType excepto para “script” y “jsonp”. Cuando posee el valorfalse, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.- Establece si la petición será guardada en la cache del navegador. De forma predeterminada es
truepara todos los dataType excepto para “script” y “jsonp”. Cuando posee el valorfalse, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.- complete
-Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
+XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success,notmodified,error,timeout,abort, oparsererror).- Establece una función de devolución de llamada que se ejecuta cuando la petición esta completa, aunque haya fallado o no. La función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest) y un texto especificando el estatus de la misma petición (success,notmodified,error,timeout,abort, oparsererror).- context
-Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de
+thisdentro de las funciones). De manera predeterminadathishace referencia al objeto originalmente pasado al método$.ajax.- Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de
thisdentro de las funciones). De manera predeterminadathishace referencia al objeto originalmente pasado al método$.ajax.- data
-Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo
+foo=bar&baz=bim.)- Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo
foo=bar&baz=bim.)- dataType
-Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
+- Establece el tipo de información que se espera recibir como respuesta del servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery revisa el tipo de MIME que posee la respuesta.
- error
-Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
+XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout,error,abort, oparsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemploNot FoundoInternal Server Error).- Establece una función de devolución de llamada a ejecutar si resulta algún error en la petición. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición (timeout,error,abort, oparsererror) y un texto con la descripción del error que haya enviado el servidor (por ejemploNot FoundoInternal Server Error).- jsonp
-Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
+- Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición JSONP. De forma predeterminada el nombre es “callback
- success
-Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
+XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.- Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo
XMLHTTPRequest), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que dataType sea JSON), el estatus de la misma.- timeout
-Establece un tiempo en milisegundos para considerar a una petición como fallada.
+- Establece un tiempo en milisegundos para considerar a una petición como fallada.
- traditional
-Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
+- Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede visitar http://api.jquery.com/jQuery.param/.
- type
-De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
+- De forma predeterminada su valor es “GET”. Otros tipos de peticiones también pueden ser utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los navegadores.
- url
-Establece la URL en donde se realiza la petición.
+- Establece la URL en donde se realiza la petición.
La opción
-urles obligatoria para el método$.ajax;Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
+Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar http://api.jquery.com/jQuery.ajax/.
Nota
-A partir de la versión 1.5 de jQuery, las opciones
+beforeSend,success,errorycompletereciben como uno de sus argumentos el objetojqXHRsiendo este una extensión del objeto nativoXMLHTTPRequest. El objetojqXHRposee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objetojqXHRpuede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.A partir de la versión 1.5 de jQuery, las opciones
beforeSend,success,errorycompletereciben como uno de sus argumentos el objetojqXHRsiendo este una extensión del objeto nativoXMLHTTPRequest. El objetojqXHRposee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de MIME que posee la respuesta que se espera por parte del servidor. Para información sobre el objetojqXHRpuede consultar http://api.jquery.com/jQuery.ajax/#jqXHR.Nota
@@ -2323,30 +2323,30 @@7.
-7.3.2 Métodos Convenientes
-En caso que no quiera utilizar el método
+$.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método$.ajaxcon valores pre-establecidos de configuración).7.3.2 Métodos Convenientes
+En caso que no quiera utilizar el método
$.ajax, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método$.ajaxcon valores preestablecidos de configuración).Los métodos que provee la biblioteca son:
- $.get
-Realiza una petición GET a una URL provista.
+- Realiza una petición GET a una URL provista.
- $.post
-Realiza una petición POST a una URL provista.
+- Realiza una petición POST a una URL provista.
- $.getScript
-Añade un script a la página.
+- Añade un script a la página.
- $.getJSON
-Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
+- Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.
Los métodos deben tener los siguientes argumentos, en orden:
- url
-La URL en donde se realizará la petición. Su valor es obligatorio.
+- La URL en donde se realizará la petición. Su valor es obligatorio.
- data
-La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como
+foo=bar&baz=bim).- La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como
foo=bar&baz=bim).@@ -2355,10 +2355,10 @@7.3.2
- success callback
-Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
+- Una función opcional que se ejecuta en caso que petición haya sido satisfactoria. Dicha función recibe como argumentos la información de la petición y el objeto en bruto de dicha petición.
- data type
-El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
+- El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
@@ -2384,7 +2384,7 @@7.3.2
-7.3.3
+$.fn.load7.3.3
$.fn.loadEl método
$.fn.loades el único que se puede llamar desde una selección. Dicho método obtiene el código HTML de una URL y rellena a los elementos seleccionados con la información obtenida. En conjunto con la URL, es posible especificar opcionalmente un selector, el cual obtendrá el código especificado en dicha selección.Utilizar el método
$.fn.loadpara rellenar un elemento@@ -2395,7 +2395,7 @@$('#newContent').load('/foo.html');7.3.3
$.-7.4 Ajax y Formularios
+7.4 Ajax y Formularios
Las capacidades de jQuery con Ajax pueden ser especialmente útiles para el trabajo con formularios. Por ejemplo, la extensión jQuery Form Plugin es una extensión para añadir capacidades Ajax a formularios. Existen dos métodos que debe conocer para cuando este realizando este tipo de trabajos:
$.fn.serializey$.fn.serializeArray.Transformar información de un formulario a una cadena de datos
@@ -2409,7 +2409,7 @@$('#myForm').serialize();7.4 ]
-7.5 Trabajar con JSONP
+7.5 Trabajar con JSONP
En los últimos tiempos, la introducción de JSONP, ha permitido la creación de aplicaciones híbridas de contenidos. Muchos sitios importantes ofrecen JSONP como servicio de información, el cual se accede a través de una API (en inglés Application programming interface) predefinida. Un servicio particular que permite obtener información en formato JSONP es Yahoo! Query Language, el cual se utiliza a continuación para obtener, por ejemplo, noticias sobre gatos:
Utilizar YQL y JSONP
$.ajax({ @@ -2437,17 +2437,17 @@7.5
jQuery se encarga de solucionar todos los aspectos complejos de la petición JSONP. Lo único que debe hacer es especificar el nombre de la función de devolución (en este caso “callback”, según lo especifica YQL) y el resultado final será como una petición Ajax normal.
-7.6 Eventos Ajax
-A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
+7.6 Eventos Ajax
+A menudo, querrá ejecutar una función cuando una petición haya comenzado o terminado, como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de cada petición, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados. Para una lista completa de eventos Ajax, puede consultar http://docs.jquery.com/Ajax_Events.
Mostrar/Ocultar un indicador utilizando Eventos Ajax
$('#loading_indicator') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });-7.7 Ejercicios
+7.7 Ejercicios
-7.7.1 Cargar Contenido Externo
+7.7.1 Cargar Contenido Externo
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/load.js. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.
- @@ -2460,7 +2460,7 @@
Crear un elementos div después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando
$.fn.data.7.7.
Recuerde utilizar
console.logpara asegurarse que esta realizando lo correcto.-7.7.2 Cargar Contenido Utilizando JSON
+7.7.2 Cargar Contenido Utilizando JSON
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/specials.js. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.
- @@ -2474,15 +2474,15 @@
Añadir un elemento div después del formulario que se encuentra dentro del elemento #specials; allí será el lugar en donde se colocará la información a obtener.
-
8 Extensiones
+8 Extensiones
-8.1 ¿Qué es una Extensión?
+8.1 ¿Qué es una Extensión?
Una extensión de jQuery es simplemente un nuevo método que se utilizará para extender el prototipo (prototype) del objeto jQuery. Cuando se extiende el prototipo, todos los objetos jQuery hereden los métodos añadidos. Por lo tanto, cuando se realiza una llamada
jQuery(), es creado un nuevo objeto jQuery con todos los métodos heredados.El objetivo de una extensión es realizar una acción utilizando una colección de elementos, de la misma forma que lo hacen, por ejemplo, los métodos
fadeOutoaddClassde la biblioteca.Usted puede realizar sus propias extensiones y utilizarlas de forma privada en su proyecto o también puede publicarlas para que otras personas le saquen provecho.
-8.2 Crear una Extensión Básica
+8.2 Crear una Extensión Básica
El código para realizar una extensión básica es la siguiente:
(function($){ $.fn.myNewPlugin = function() { @@ -2560,17 +2560,17 @@$('a').fadeInAndAddClass(400, 'finishedFading');
-8.3 Encontrar y Evaluar Extensiones
+8.3 Encontrar y Evaluar Extensiones
Uno de los aspectos más populares de jQuery es la diversidad de extensiones que existen.
Sin embargo, la calidad entre extensiones puede variar enormemente. Muchas son intensivamente probadas y bien mantenidas, pero otras son creadas de forma apresurada y luego ignoradas, sin seguir buenas prácticas.
Google es la mejor herramienta para encontrar extensiones (aunque el equipo de jQuery este trabajando para mejorar su repositorio de extensiones). Una vez encontrada la extensión, posiblemente quiera consultar la lista de correos de jQuery o el canal IRC #jquery para obtener la opinión de otras personas sobre dicha extensión.
Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) Signs of a poorly written jQuery plugin por Remy Sharp.
-Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery).
+Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery).
-8.4 Escribir Extensiones
+8.4 Escribir Extensiones
A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones.
-La mayoría de las extensiones son métodos creados dentro del espacio de nombres
+$.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través dethis. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).La mayoría de las extensiones son métodos creados dentro del espacio de nombres
$.fn. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través dethis. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario).A continuación se muestra un ejemplo:
Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover
// definición de la extensión @@ -2639,7 +2639,7 @@8.4
-8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
+8.5 Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI
Nota
Esta sección esta basada, con permiso del autor, en el artículo Building Stateful jQuery Plugins de Scott Gonzalez.
@@ -2684,7 +2684,7 @@-
8.5.1 Añadir Métodos a un Widget
+8.5.1 Añadir Métodos a un Widget
Ahora que es posible inicializar la extensión, es necesario añadir la habilidad de realizar acciones a través de métodos definidos en la extensión. Para definir un método en la extensión es necesario incluir la función en el objeto literal que se pasa a
jQuery.widget. También es posible definir métodos “privados” anteponiendo un guión bajo al nombre de la función.Crear métodos en el Widget
$.widget("nmk.progressbar", { @@ -2743,7 +2743,7 @@
-8.5.2 Trabajar con las Opciones del Widget
+8.5.2 Trabajar con las Opciones del Widget
Uno de los métodos disponibles automáticamente para la extensión es
option. Este método permite obtener y establecer opciones después de la inicialización y funciona exactamente igual que los métodos attr y css de jQuery: pasando únicamente un nombre como argumento el método funciona como obtenedor, mientras que pasando uno o más conjuntos de nombres y valores el método funciona como establecedor. Cuando es utilizado como método obtenedor, la extensión devolverá el valor actual de la opción correspondiente al nombre pasado como argumento. Por otro lado, cuando es utilizado como un método establecedor, el método_setOptionde la extensión será llamado por cada opción que se desea establecer.Responder cuando una opción es establecida
$.widget("nmk.progressbar", { @@ -2768,7 +2768,7 @@-
8.5.3 Añadir Funciones de Devolución de Llamada
+8.5.3 Añadir Funciones de Devolución de Llamada
Uno de las maneras más fáciles de extender una extensión es añadir funciones de devolución de llamada, para que de esta forma el usuario puede reaccionar cuando el estado de la extensión cambie. A continuación se mostrará como añadir una función de devolución de llamada a la extensión creada para indicar cuando la barra de progreso haya alcanzado el 100%. El método
_triggerobtiene tres parámetros: el nombre de la función de devolución, el objeto de evento nativo que inicializa la función de devolución y un conjunto de información relevante al evento. El nombre de la función de devolución es el único parámetro obligatorio, pero los otros pueden ser muy útiles si el usuario desea implementar funcionalidades personalizadas.Proveer funciones de devolución de llamada
$.widget("nmk.progressbar", { @@ -2828,7 +2828,7 @@-
8.5.4 Limpieza
+8.5.4 Limpieza
En algunos casos, tendrá sentido permitir a los usuarios aplicar y desaplicar la extensión. Esto es posible hacerlo a través del método
destroy. Con dicho método, es posible deshacer todo lo realizado con la extensión. También éste es llamado automáticamente si el elemento vinculado a la extensión es eliminado del DOM (por lo cual también es posible utilizarlo para la “recolección de basura”). El métododestroypredeterminado remueve el vínculo entre el elemento DOM y la instancia de la extensiónAñadir un método destroy al widget
$.widget( "nmk.progressbar", { @@ -2865,18 +2865,18 @@8.5.4 Limpiez });
-8.5.5 Conclusión
+8.5.5 Conclusión
La utilización de Widget factory es solo una manera de crear extensiones con mantenimiento de estado. Existen algunos modelos diferentes que pueden ser utilizados y cada uno posee sus ventajas y desventajas. Widget factory resuelve muchos problemas comunes, mejora significativamente la productividad y la reutilización de código.
-8.6 Ejercicios
+8.6 Ejercicios
-8.6.1 Realizar una Tabla Ordenable
+8.6.1 Realizar una Tabla Ordenable
Para este ejercicio, la tarea es identificar, descargar e implementar una extensión que permita ordenar la tabla existente en la página index.html. Cuando esté listo, todas las columnas de la tabla deben poder ser ordenables.
-8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
+8.6.2 Escribir una Extensión Para Cambiar el Color de Fondo en Tablas
Abra el archivo
/ejercicios/index.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/stripe.js. La tarea es escribir una extensión llamada “stripe” la cual podrá ser llamada desde cualquier elemento table y deberá cambiar el color de fondo de las filas impares en el cuerpo de la tabla. El color podrá ser especificado como parámetro de la extensión.$('#myTable').stripe('#cccccc');No olvide de devolver la tabla para que otros métodos puedan ser encadenados luego de la llamada a la extensión.
@@ -2884,10 +2884,10 @@
-9 Mejores Prácticas para Aumentar el Rendimiento
+9 Mejores Prácticas para Aumentar el Rendimiento
Este capítulo cubre numerosas mejores prácticas de JavaScript y jQuery,sin un orden en particular. Muchas de estas prácticas están basadas en la presentación jQuery Anti-Patterns for Performance (en inglés) de Paul Irish.
-9.1 Guardar la Longitud en Bucles
+9.1 Guardar la Longitud en Bucles
En un bucle, no es necesario acceder a la longitud de un vector cada vez que se evalúa la condición; dicho valor se puede guardar previamente en una variable.
var myLength = myArray.length; @@ -2896,7 +2896,7 @@-9.2 Añadir Nuevo Contenido por Fuera de un Bucle
+9.2 Añadir Nuevo Contenido por Fuera de un Bucle
Si va a insertar muchos elementos en el DOM, hágalo todo de una sola vez, no de una por vez.
// mal $.each(myArray, function(i, item) { @@ -2922,7 +2922,7 @@$('#ballers').html(myHtml);
-9.3 No Repetirse
+9.3 No Repetirse
No se repita; realice las cosas una vez y sólo una, caso contrario lo estará haciendo mal.
// MAL if ($eventfade.data('currently') != 'showing') { @@ -2946,7 +2946,7 @@9.3 No Re });
-9.4 Cuidado con las Funciones Anónimas
+9.4 Cuidado con las Funciones Anónimas
No es aconsejable utilizar de sobremanera las funciones anónimas. Estas son difíciles de depurar, mantener, probar o reutilizar. En su lugar,utilice un objeto literal para organizar y nombrar sus controladores y funciones de devolución de llamada.
// MAL $(document).ready(function() { @@ -2980,10 +2980,10 @@$(document).ready(PI.onReady);
-9.5 Optimización de Selectores
+9.5 Optimización de Selectores
La optimización de selectores es menos importante de lo que solía ser, debido a la implementación en algunos navegadores de
document.querySelectorAll(), pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.-9.5.1 Selectores basados en ID
+9.5.1 Selectores basados en ID
Siempre es mejor comenzar las selecciones con un ID.
// rápido $('#container div.robotarm'); @@ -2993,7 +2993,7 @@9.5.
El ejemplo que utiliza
$.fn.findes más rápido debido a que la primera selección utiliza el motor de selección interno Sizzle — mientras que la selección realizada únicamente por ID utilizadocument.getElementById(), el cual es extremadamente rápido debido a que es una función nativa del navegador.-9.5.2 Especificidad
+9.5.2 Especificidad
Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.
// no optimizado $('div.data .gonzalez'); @@ -3008,7 +3008,7 @@9.5.2 Es
La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.
-9.5.3 Evitar el Selector Universal
+9.5.3 Evitar el Selector Universal
Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.
$('.buttons > *'); // muy lento $('.buttons').children(); // mucho mejor @@ -3019,7 +3019,7 @@
-9.6 Utilizar la Delegación de Eventos
+9.6 Utilizar la Delegación de Eventos
La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista). jQuery hace fácil este trabajo a través de
$.fn.livey$.fn.delegate. En lo posible, es recomendable utilizar$.fn.delegateen lugar de$.fn.live, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.
// mal (si existen muchos items en la lista) @@ -3033,7 +3033,7 @@$('#myList').delegate('li.trigger', 'click', handlerFn);
-9.7 Separar Elementos para Trabajar con Ellos
+9.7 Separar Elementos para Trabajar con Ellos
En lo posible, hay que evitar la manipulación del DOM. Para ayudar con este propósito, a partir de la versión 1.4, jQuery introduce
$.fn.detachel cual permite trabajar elementos de forma separada del DOM para luego insertarlos.var $table = $('#myTable'); var $parent = $table.parent(); @@ -3043,7 +3043,7 @@$parent.append(table);
-9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
+9.8 Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos
Si va a cambiar el CSS en más de 20 elementos utilizando
$.fn.css, considere realizar los cambios de estilos añadiéndolos en una etiqueta style. De esta forma se incrementa un 60% el rendimiento.// correcto hasta 20 elementos, lento en más elementos $('a.swedberg').css('color', '#asd123'); @@ -3051,7 +3051,7 @@appendTo('head');
-9.9 Utilizar
+$.dataen Lugar de$.fn.data9.9 Utilizar
$.dataen Lugar de$.fn.dataUtilizar
$.dataen un elemento del DOM en lugar de$.fn.dataen una selección puede ser hasta 10 veces más rápido. Antes de realizarlo, este seguro de comprender la diferencia entre un elemento DOM y una selección jQuery.// regular $(elem).data(key,value); @@ -3060,7 +3060,7 @@$.data(elem,key,value);
-9.10 No Actuar en Elementos no Existentes
+9.10 No Actuar en Elementos no Existentes
jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.
// MAL: el código a continuación ejecuta tres funciones // sin comprobar si existen elementos @@ -3087,7 +3087,7 @@-9.12 Condicionales
+9.12 Condicionales
// antiguo if (type == 'foo' || type == 'bar') { ... } @@ -3113,21 +3113,21 @@9.12 Con if (({ foo : 1, bar : 1 })[type]) { ... }
-9.13 No Tratar a jQuery como si fuera una Caja Negra
-Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
+9.13 No Tratar a jQuery como si fuera una Caja Negra
+Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace http://bit.ly/jqsource como marcador para tener de referencia.
-10 Organización del Código
+10 Organización del Código
-10.1 Introducción
+10.1 Introducción
Cuando se emprende la tarea de realizar aplicaciones complejas del lado del cliente, es necesario considerar la forma en que se organizará el código. Este capitulo está dedicado a analizar algunos patrones de organización de código para utilizar en una aplicación realizada con jQuery. Además se explorará el sistema de gestión de dependencias de RequireJS.
-10.1.1 Conceptos Clave
+10.1.1 Conceptos Clave
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:
@@ -3135,11 +3135,11 @@
- -
el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque
$(document).ready(). Este concepto se conoce como encapsulación;- +
no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
no repetir código. Identificar piezas similares y utilizar técnicas de herencia;
a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
las unidades de funcionalidad deben tener una articulación flexible (en inglés loosely coupled) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
10.1.1
-10.2 Encapsulación
+10.2 Encapsulación
El primer paso para la organización del código es separar la aplicación en distintas piezas.
Muchas veces, este esfuerzo suele ser suficiente para mantener al código en orden.
-10.2.1 El Objeto Literal
+10.2.1 El Objeto Literal
Un objeto literal es tal vez la manera más simple de encapsular código relacionado. Este no ofrece ninguna privacidad para propiedades o métodos, pero es útil para eliminar funciones anónimas, centralizar opciones de configuración, y facilitar el camino para la reutilización y refactorización.
Un objeto literal
var myFeature = { @@ -3192,7 +3192,7 @@10.2.1urlBase : '/foo.php?item=' }; - // permite sobreescribir la configuración predeterminada + // permite sobrescribir la configuración predeterminada $.extend(myFeature.config, settings); myFeature.setup(); @@ -3254,7 +3254,7 @@
10.2.1Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque
$(document).ready(). Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque$(document).ready().-10.2.2 El Patrón Modular
+10.2.2 El Patrón Modular
El patrón modular supera algunas limitaciones del objeto literal, ofreciendo privacidad para variables y funciones, exponiendo a su vez (si se lo desea) una API pública.
El patrón modular
var feature =(function() { @@ -3346,7 +3346,7 @@10.2.2
-10.3 Gestión de Dependencias
+10.3 Gestión de Dependencias
Nota
Esta sección esta basada en la excelente documentación de RequireJS y es utilizada con el permiso de James Burke, autor de RequireJS.
@@ -3355,11 +3355,11 @@10.3
RequireJS es una herramienta de gestión de dependencias creada por James Burke, la cual ayuda a manejar los módulos, cargarlos en un orden correcto y combinarlos de forma fácil sin tener que realizar ningún cambio. A su vez, otorga una manera fácil de cargar código una vez cargada la página, permitiendo minimizar el tiempo de descarga.
RequireJS posee un sistema modular, que sin embargo, no es necesario seguirlo para obtener sus beneficios. El formato modular de RequireJS permite la escritura de código encapsulado, incorporación de internacionalización (i18n) a los paquetes (para permitir utilizarlos en diferentes lenguajes) e incluso la utilización de servicios JSONP como dependencias.
-10.3.1 Obtener RequireJS
+10.3.1 Obtener RequireJS
La manera más fácil de utilizar RequireJS con jQuery es descargando el paquete de jQuery con RequireJS ya incorporado en él. Este paquete excluye porciones de código que duplican funciones de jQuery. También es útil descargar un ejemplo de proyecto jQuery que utiliza RequireJS.
-10.3.2 Utilizar RequireJS con jQuery
+10.3.2 Utilizar RequireJS con jQuery
Utilizar RequireJS es simple, tan solo es necesario incorporar en la página la versión de jQuery que posee RequireJS incorporado y a continuación solicitar los archivos de la aplicación. El siguiente ejemplo asume que tanto jQuery como los otros archivos están dentro de la carpeta
scripts/.Utilizar RequireJS: Un ejemplo simple
<!DOCTYPE html> @@ -3385,7 +3385,7 @@-10.3.3 Crear Módulos Reusables con RequireJS
+10.3.3 Crear Módulos Reusables con RequireJS
RequireJS hace que sea fácil definir módulos reusables a través de
require.def(). Un modulo RequireJS puede tener dependencias que pueden ser utilizadas para definir un módulo, además de poder devolver un valor — un objeto, una función, u otra cosa — que puede ser incluso utilizado otros módulos.Si el módulo no posee ninguna dependencia, tan solo se debe especificar el nombre como primer argumento de
require.def(). El segundo argumento es un objeto literal que define las propiedades del módulo. Por ejemplo:Definición de un módulo RequireJS que no posee dependencias
@@ -3414,8 +3414,8 @@
my/cart.js - my/inventory.js - my/shirt.js+ my/inventory.js + my/shirt.jsLa función que define
my/shirtno es llamada hasta quemy/cartymy/inventoryhayan sido cargadas, y dicha función recibe como argumentos a los módulos comocartyinventory. El orden de los argumentos de la función debe coincidir con el orden en que las dependencias se requieren en el vector. El objeto devuelto define el módulomy/shirt. Definiendo los módulos de esta forma,my/shirtno existe como un objeto global, ya que múltiples módulos pueden existir en la página al mismo tiempo.Los módulos no tienen que devolver un objeto; cualquier tipo de valor es permitido.
Definición de un módulo RequireJS que devuelve una función
@@ -3433,14 +3433,14 @@-
10.3.4 Optimizar el Código con las Herramientas de RequireJS
+10.3.4 Optimizar el Código con las Herramientas de RequireJS
Una vez incorporado RequireJS para el manejo de dependencias, la optimización del código es muy fácil. Descargue el paquete de RequireJS y colóquelo en cualquier lugar, preferentemente fuera del área de desarrollo web. Para los propósitos de este ejemplo, el paquete de RequireJS esta ubicado en una carpeta paralela al directorio
webapp(la cual contiene la página HTML y todos los archivos JavaScript de la aplicación). La estructura de directorios es:+ webapp/scripts/app.js + webapp/scripts/require-jquery.js + webapp/scripts/jquery.alpha.js + webapp/scripts/jquery.beta.jsrequirejs/ (utilizado para ejecutar las herramientas) webapp/app.html - webapp/scripts/app.js - webapp/scripts/require-jquery.js - webapp/scripts/jquery.alpha.js - webapp/scripts/jquery.beta.jsLuego, en la carpeta en donde se encuentran
require-jquery.jsyapp.js, crear un archivo llamadoapp.build.jscon el siguiente contenido:Archivo de configuración para las herramientas de optimización de RequireJS
{ @@ -3469,9 +3469,9 @@
-10.4 Ejercicios
+10.4 Ejercicios
-10.4.1 Crear un Módulo Portlet
+10.4.1 Crear un Módulo Portlet
Abra el archivo
/ejercicios/portlets.htmlen el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/portlets.js. El ejercicio consiste en crear una función creadora de portlet que utilice el patrón modular, de tal manera que el siguiente código funcione:var myPortlet = Portlet({ title : 'Curry', @@ -3491,9 +3491,9 @@10.4
-11 Eventos Personalizados
+11 Eventos Personalizados
-11.1 Introducción a los Eventos Personalizados
+11.1 Introducción a los Eventos Personalizados
Todos estamos familiarizados con los eventos básicos —
click,mouseover,focus,blur,submit, etc. — que surgen a partir de la interacción del usuario con el navegador.Los eventos personalizados permiten conocer el mundo de la programación orientada a eventos (en inglés event-driven programming). En este capítulo, se utilizará el sistema de eventos personalizados de jQuery para crear una simple aplicación de búsqueda en Twitter.
En un primer momento puede ser difícil entender el requisito de utilizar eventos personalizados, ya que los eventos convencionales permiten satisfacer todas las necesidades. Sin embargo, los eventos personalizados ofrecen una nueva forma de pensar la programación en JavaScript. En lugar de enfocarse en el elemento que ejecuta una acción, los eventos personalizados ponen la atención en el elemento en donde la acción va a ocurrir. Este concepto brinda varios beneficios:
@@ -3580,7 +3580,7 @@. fn. ony.fn.trigger +
Recapitulación: $.fn.on y $.fn.trigger
En el mundo de los eventos personalizados, existen dos métodos importantes de jQuery:
$.fn.ony$.fn.trigger. En el capítulo dedicado a eventos se explicó la utilización de estos dos métodos para trabajar con eventos del usuario; en este capítulo es importante recordar 2 puntos:
- @@ -3595,7 +3595,7 @@
el método
$.fn.ontoma como argumentos un tipo de evento y una función controladora de evento. Opcionalmente, puede recibir información asociada al evento como segundo argumento, desplazando como tercer argumento a la función controladora de evento. Cualquier información pasada estará disponible a la función controladora a través de la propiedaddatadel objeto del evento. A su vez, la función controladora recibe el objeto del evento como primer argumento;$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);
-11.1.1 Un Ejemplo de Aplicación
+11.1.1 Un Ejemplo de Aplicación
Para demostrar el poder de los eventos personalizados, se desarrollará una simple herramienta para buscar en Twitter. Dicha herramienta ofrecerá varias maneras para que el usuario realice una búsqueda: ingresando el término a buscar en una caja de texto o consultando los “temas de moda” de Twitter.
Los resultados de cada término se mostrarán en un contenedor de resultados; dichos resultados podrán expandirse, colapsarse, refrescarse y removerse, ya sea de forma individual o conjunta.
El resultado final de la aplicación será el siguiente:
@@ -3604,7 +3604,7 @@11.
La aplicación finalizada
-11.1.1.1 Iniciación
+11.1.1.1 Iniciación
Se empieza con un HTML básico:
<h1>Twitter Search</h1> <input type="button" id="get_trends" @@ -3628,19 +3628,19 @@11.1.1.1 I
Los contenedores de resultados son el corazón de la aplicación. Se creará una extensión para preparar cada contenedor una vez que éste se agrega al contenedor Twitter. Además, entre otras cosas, la extensión vinculará los eventos personalizados por cada contenedor y añadirá en la parte superior derecha de cada contenedor botones que ejecutarán acciones. Cada contenedor de resultados tendrá los siguientes eventos personalizados:
- refresh
-Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
+- Señala que la información del contenedor se esta actualizando y dispara la petición que busca los datos para el término de búsqueda.
- populate
-Recibe la información JSON y la utiliza para rellenar el contenedor.
+- Recibe la información JSON y la utiliza para rellenar el contenedor.
- remove
-Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa
+truecomo segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.- Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa
truecomo segundo argumento del controlador de evento. El evento además remueve el término asociado con el contenedor de resultados del objeto global que contiene los términos de búsqueda.- collapse
-Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
+- Añade una clase al contenedor, la cual ocultará el resultado a través de CSS. Además cambiará el botón de “Colapsar” a “Expandir”.
- expand
-Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
+- Remueve la clase del contenedor que añade el evento collapse. Además cambiará el botón de “Expandir” a “Colapsar”.
Además, la extensión es responsable de añadir los botones de acciones al contenedor, vinculando un evento
@@ -3759,10 +3759,10 @@clicka cada botón y utilizando la clase de cada ítem para determinar qué evento personalizado será ejecutado en cada contenedor de resultados.11.1.1.1 I
El contenedor Twitter, posee solo dos eventos personalizados:
- getResults
-Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión
+$.fn.twitterResult(mostrada anteriormente) y luego ejecuta el eventorefreshcon el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.- Recibe un término de búsqueda y comprueba si ya no existe un contenedor de resultados para dicho término. En caso de no existir, añade un contenedor utilizando la plantilla de resultados, lo configura utilizando la extensión
$.fn.twitterResult(mostrada anteriormente) y luego ejecuta el eventorefreshcon el fin de cargar correctamente los resultados. Finalmente, guarda el término buscado para no tener volver a pedir los datos sobre la búsqueda.- getTrends
-Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento
+getResultspor cada uno, de tal modo que añade un contenedor de resultados por cada término.- Consulta a Twitter el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento
getResultspor cada uno, de tal modo que añade un contenedor de resultados por cada término.Vinculaciones en el contenedor Twitter:
@@ -3820,7 +3820,7 @@11.1.1.1 I });
-11.1.1.2 Conclusión
+11.1.1.2 Conclusión
Los eventos personalizados ofrecen una nueva manera de pensar el código: ellos ponen el énfasis en el objetivo de un comportamiento, no en el elemento que lo activa. Si se toma el tiempo desde el principio para explicar las piezas de su aplicación, así como los comportamientos que esas piezas necesitan exhibir, los eventos personalizados proveen una manera poderosa para “hablar” con esas piezas, ya sea de una en una o en masa.
Una vez que los comportamientos se han descripto, se convierte en algo trivial ejecutarlos desde cualquier lugar, lo que permite la rápida creación y experimentación de opciones de interfaz. Finalmente, los eventos personalizados también permiten mejorar la lectura del código y su mantenimiento, haciendo clara la relación entre un elemento y su comportamiento.
Puede ver la aplicación completa en los archivos
@@ -3829,13 +3829,13 @@demos/custom-events/custom-events.htmlydemos/custom-events/js/custom-events.jsdel material que componen este libro.11.1.1.2
-12 Funciones y ejecuciones diferidas a través del objeto
+$.Deferred12 Funciones y ejecuciones diferidas a través del objeto
$.Deferred-12.1 Introducción
-A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido
+$.Deferred(en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre$.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.12.1 Introducción
+A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido
$.Deferred(en inglés Deferred Object). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (callbacks), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre$.Deferred, puede consultar http://api.jquery.com/category/deferred-object/.-12.2 El objeto diferido y Ajax
+12.2 El objeto diferido y Ajax
El caso más común en donde se puede apreciar la utilidad del objeto diferido es en el manejo de las funciones de devolución en peticiones Ajax.
Según se pudo apreciar en el capítulo dedicado, una manera de invocar una petición Ajax es:
Manera tradicional de utilizar el método
@@ -3882,8 +3882,8 @@$.ajax12. ajax.always(function(){ alert('Petición realizada'); }); -
A través de los métodos
-deferred.done,deferred.failydeferred.alwayses posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.Notar que en en ningún momento se llama al objeto diferido
+$.Deferred. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto$.ajax. Más adelante se explicará como utilizar al objeto$.Deferredde manera explícita.A través de los métodos
+deferred.done,deferred.failydeferred.alwayses posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas.Notar que en en ningún momento se llama al objeto diferido
$.Deferred. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto$.ajax. Más adelante se explicará como utilizar al objeto$.Deferredde manera explícita.De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:
Colas de funciones de devolución en una petición Ajax
-// definición de la petición Ajax @@ -3917,10 +3917,10 @@12. ajax.fail(function(){ alert('Disculpe, existió un problema'); });
Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en
+#elementse agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variableajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en
#elementse agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variableajax) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.-12.2.1
-deferred.thenOtra manera de utilizar los métodos
+deferred.doneydeferred.failes a través dedeferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.12.2.1
+deferred.thenOtra manera de utilizar los métodos
deferred.doneydeferred.failes a través dedeferred.then, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos.Utilización del método
deferred.then// definición de la petición Ajax var ajax = $.ajax({ @@ -3935,7 +3935,7 @@12.2.1 < alert('Petición realizada satisfactoriamente'); }, - // la segunda es la función de devolución erronea + // la segunda es la función de devolución errónea function(){ alert('Disculpe, existió un problema'); } @@ -3944,7 +3944,7 @@
12.2.1 <
-12.3 Creación de objetos diferidos con
+$.Deferred12.3 Creación de objetos diferidos con
$.DeferredAsí como es posible desacoplar las funciones de devolución en una petición Ajax, también es posible realizarlo en otras funciones utilizando de manera explícita el objeto
$.Deferred.Por ejemplo, una función que verifica si un número es par, de la manera tradicional puede escribirse de la siguiente manera:
Función sin utilizar el objeto
@@ -3996,7 +3996,7 @@$.Deferredconsole.log('Es par'); }, - // la segunda es la función de devolución erronea + // la segunda es la función de devolución errónea function(){ console.log('Es impar'); } @@ -4006,7 +4006,7 @@
http://api.jquery.com/deferred.state/. +
Es posible determinar el estado de un objeto diferido a través del método
deferred.state. El mismo devuelve un string con alguno de estos tres valores:pending,resolvedorejected. Para más detalles sobredeferred.state, puede consultar http://api.jquery.com/deferred.state/.-12.3.1
+deferred.pipe12.3.1
deferred.pipeExisten casos en que se necesita modificar el estado de un objeto diferido o filtrar la información que viene asociada. Para estos casos existe
deferred.pipe. Su funcionamiento es similar adeferred.then, con la diferencia quedeferred.pipedevuelve un nuevo objeto diferido modificado a través de una función interna.Función filtrando valores utilizando
deferred.pipe-// función que calcula si un número entero es par o impar @@ -4098,11 +4098,11 @@12.3.1 < } );
Para más detalles sobre
+deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.Para más detalles sobre
deferred.pipe, puede consultar http://api.jquery.com/deferred.pipe/.-diff --git a/libro/markdown/cap05-eventos.markdown b/libro/markdown/cap05-eventos.markdown index d39fccb..6dbaf9f 100644 --- a/libro/markdown/cap05-eventos.markdown +++ b/libro/markdown/cap05-eventos.markdown @@ -293,7 +293,7 @@ $('p.expander').toggle( ### Crear una "Sugerencia" para una Caja de Ingreso de Texto -Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes: +Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes: 1. Establecer el valor del elemento *input* igual al valor del elemento *label*. @@ -311,7 +311,7 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio ut ### Añadir una Navegación por Pestañas -Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes: +Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes: 1. Ocultar todos los elementos *div.module*. diff --git a/libro/markdown/cap07-ajax.markdown b/libro/markdown/cap07-ajax.markdown index dc7a975..89ad0bd 100644 --- a/libro/markdown/cap07-ajax.markdown +++ b/libro/markdown/cap07-ajax.markdown @@ -187,7 +187,7 @@ El método $.ajax posee muchas opciones de configuración, y es justamente esta ~ Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición *JSONP*. De forma predeterminada el nombre es "*callback* success - ~ Establece una función a ejecutar si la petición a sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma. + ~ Establece una función a ejecutar si la petición ha sido satisfactoria. Dicha función recibe como argumentos el objeto jqXHR (en versiones anteriores o iguales a jQuery 1.4, recibe en su lugar el objeto de la petición en crudo `XMLHTTPRequest`), un texto especificando el estatus de la misma petición y la información de la petición (convertida a objeto JavaScript en el caso que *dataType* sea *JSON*), el estatus de la misma. timeout ~ Establece un tiempo en milisegundos para considerar a una petición como fallada. @@ -208,7 +208,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib > **Nota** > -> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobreescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR). +> A partir de la versión 1.5 de jQuery, las opciones `beforeSend`, `success`, `error` y `complete` reciben como uno de sus argumentos el objeto `jqXHR` siendo este una extensión del objeto nativo `XMLHTTPRequest`. El objeto `jqXHR` posee una serie de métodos y propiedades que permiten modificar u obtener información particular de la petición a realizar, como por ejemplo sobrescribir el tipo de *MIME* que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto `jqXHR` puede consultar [http://api.jquery.com/jQuery.ajax/#jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR). > @@ -220,7 +220,7 @@ Como se comentó anteriormente, para una lista completa de las opciones disponib ### Métodos Convenientes -En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores pre-establecidos de configuración). +En caso que no quiera utilizar el método `$.ajax`, y no necesite los controladores de errores, existen otros métodos más convenientes para realizar peticiones Ajax (aunque, como se indicó antes, estos están basados el método `$.ajax` con valores preestablecidos de configuración). Los métodos que provee la biblioteca son: diff --git a/libro/markdown/cap08-extensiones.markdown b/libro/markdown/cap08-extensiones.markdown index a369123..96bf898 100644 --- a/libro/markdown/cap08-extensiones.markdown +++ b/libro/markdown/cap08-extensiones.markdown @@ -146,7 +146,7 @@ Google es la mejor herramienta para encontrar extensiones (aunque el equipo de j Asegúrese que la extensión este bien documentada, y que se ofrecen ejemplos de su utilización. También tenga cuidado con las extensiones que realizan más de lo que necesita, estas pueden llegar a sobrecargar su página. Para más consejos sobre como detectar una extensión mediocre, puede leer el artículo (en inglés) [Signs of a poorly written jQuery plugin](http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/) por Remy Sharp. -Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprimala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insertela utilizando el elemento script (luego de la inclusión de jQuery). +Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, descargue la extensión, descomprímala (si es necesario) y muévala a la carpeta de su aplicación. Finalmente insértela utilizando el elemento script (luego de la inclusión de jQuery). @@ -154,7 +154,7 @@ Una vez seleccionada la extensión, necesitará añadirla a su página. Primero, A veces, desee realizar una funcionalidad disponible en todo el código, por ejemplo, un método que pueda ser llamado desde una selección el cual realice una serie de operaciones. -La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario). +La mayoría de las extensiones son métodos creados dentro del espacio de nombres `$.fn`. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de `this`. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se especifique lo contrario). A continuación se muestra un ejemplo: diff --git a/libro/markdown/cap10-organizacion-codigo.markdown b/libro/markdown/cap10-organizacion-codigo.markdown index b93c3d3..a6f098d 100644 --- a/libro/markdown/cap10-organizacion-codigo.markdown +++ b/libro/markdown/cap10-organizacion-codigo.markdown @@ -14,7 +14,7 @@ Antes de comenzar con los patrones de organización de código, es importante en - el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación; -- no repetir código. Identificar piezas similares y utilizar técnicas de heredación; +- no repetir código. Identificar piezas similares y utilizar técnicas de herencia; - a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM; @@ -100,7 +100,7 @@ var myFeature = { urlBase : '/foo.php?item=' }; - // permite sobreescribir la configuración predeterminada + // permite sobrescribir la configuración predeterminada $.extend(myFeature.config, settings); myFeature.setup(); diff --git a/libro/markdown/cap12-funciones-diferidas.markdown b/libro/markdown/cap12-funciones-diferidas.markdown index 7a5a7fc..d38e5a6 100644 --- a/libro/markdown/cap12-funciones-diferidas.markdown +++ b/libro/markdown/cap12-funciones-diferidas.markdown @@ -71,10 +71,10 @@ ajax.always(function(){ ``` -A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas. +A través de los métodos `deferred.done`, `deferred.fail` y `deferred.always` es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más cómodo de las mismas. -*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.* +*Notar que en en ningún momento se llama al objeto diferido `$.Deferred`. Esto es porque jQuery ya lo incorpora implícitamente dentro del manejo del objeto `$.ajax`. Más adelante se explicará como utilizar al objeto `$.Deferred` de manera explícita.* De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones: @@ -117,13 +117,13 @@ ajax.fail(function(){ ``` -Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implicitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente. +Al ejecutarse la petición Ajax, y en caso de que ésta haya sido satisfactoria, se ejecutan dos funciones de devolución, una detrás de la otra. Sin embargo si el usuario hace click en `#element` se agrega una tercera función de devolución, la cual también se ejecuta inmediatamente, sin volver a realizar la petición Ajax. Esto es porque el objeto diferido (que se encuentra implícitamente en la variable `ajax`) ya tiene información asociada sobre que la petición Ajax se realizó correctamente. ### `deferred.then` -Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos. +Otra manera de utilizar los métodos `deferred.done` y `deferred.fail` es a través de `deferred.then`, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erróneos. **Utilización del método `deferred.then`** @@ -142,7 +142,7 @@ ajax.then( alert('Petición realizada satisfactoriamente'); }, - // la segunda es la función de devolución erronea + // la segunda es la función de devolución errónea function(){ alert('Disculpe, existió un problema'); } @@ -216,7 +216,7 @@ isEven(2).then( console.log('Es par'); }, - // la segunda es la función de devolución erronea + // la segunda es la función de devolución errónea function(){ console.log('Es impar'); } @@ -232,7 +232,7 @@ Notar que la función `isEven` devuelve el método `deferred.promise`. El mismo > **Nota** > -> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implicitamente dentro del objeto `$.ajax`. +> En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos `deferred.resolve` y `deferred.reject` son llamados de manera interna por jQuery dentro de la configuración `sucess` y `error` de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implícitamente dentro del objeto `$.ajax`. @@ -347,7 +347,7 @@ Para más detalles sobre `deferred.pipe`, puede consultar [http://api.jquery.com ### `$.when` -El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido. +El método `$.when` permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido. Un caso común de utilización de `$.when` es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado. diff --git a/libro/pdf/Fundamentos_de_jQuery.pdf b/libro/pdf/Fundamentos_de_jQuery.pdf index a2be6c5..80741e2 100644 Binary files a/libro/pdf/Fundamentos_de_jQuery.pdf and b/libro/pdf/Fundamentos_de_jQuery.pdf differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..464a26a --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "librojquery", + "version": "1.0.0", + "description": "Fundamentos de jQuery: Material de aprendizaje", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/dzignus/librojquery.git" + }, + "author": "Leandro D'Onofrio", + "license": "Creative Commons Attribution-Share Alike 3.0 United States", + "bugs": { + "url": "https://github.com/dzignus/librojquery/issues" + }, + "homepage": "https://github.com/dzignus/librojquery", + "dependencies": { + "hapi": "^18.1.0" + } +}12.3.2
-$.whenEl método
+$.whenpermite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.12.3.2
+$.whenEl método
$.whenpermite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algún estado definido.Un caso común de utilización de
$.whenes cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.Utilización de
$.when-// primera petición ajax @@ -4126,7 +4126,7 @@12.3.2
$.wh alert('Disculpe, existió un problema'); } );Para más detalles sobre
+$.when, puede consultar http://api.jquery.com/jQuery.when/.Para más detalles sobre
$.when, puede consultar http://api.jquery.com/jQuery.when/.Copyright © 2011
Material licenciado por Rebecca Murphey bajo la licencia Creative Commons Attribution-Share Alike 3.0 United States. Usted es libre de copiarlo, distribuirlo, transmitirlo y modificarlo, siempre y cuando haga referencia a este repositorio y atribuya la autoría original a Rebecca Murphey. Si altera, transforma o crea una obra derivada, deberá distribuir el resultado bajo una licencia igual, similar o compatible. Cualquiera de las condiciones mencionadas pueden no aplicarse si obtiene permisos del autor. Para cualquier reutilización o distribución, deberá dejar en claro la licencia la mejor manera para hacerlo es a través de un enlace hacia la licencia Creative Commons Attribution-Share Alike 3.0 United States.