DATE = 'Abril 2013'

DATE = 'Junio 2013'

EPUB_TITLE = 'Fundamentos de jQuery'

HTML_TITLE = 'Libro gratuito de jQuery en español - Fundamentos de jQuery'

Cada depurador ofrece:

-Un editor multi-linea para experimentar con JavaScript;

-un editor multi-linea para experimentar con JavaScript;

-Un inspector para revisar el código generado en la página;

-un inspector para revisar el código generado en la página;

-Un visualizador de red o recursos, para examinar las peticiones que se realizan.

-un visualizador de red o recursos, para examinar las peticiones que se realizan.

Cuando usted este escribiendo código JavaScript, podrá utilizar alguno de los siguientes métodos para enviar mensajes a la consola del depurador:

-`console.warn()` para registrar mensajes de alerta;

-`console.error()` para registrar mensajes de error;

-`console.error()` para registrar mensajes de error.

Existen otros métodos para utilizar desde la consola, pero estos pueden variar según el navegador. La consola además provee la posibilidad de establecer puntos de interrupción y observar expresiones en el código con el fin de facilitar su depuración.

Estas son algunas sugerencias para hacer frente a los problemas:

-En primer lugar, asegúrese de entender bien el problema que está tratando de resolver.

-en primer lugar, asegúrese de entender bien el problema que está tratando de resolver;

-Luego, averigüe a qué elementos tendrá que acceder con el fin de resolver el problema, y determine cómo accederlos. Puede utilizar Firebug para verificar que esta obteniendo el resultado esperado.

-luego, averigüe a qué elementos tendrá que acceder con el fin de resolver el problema, y determine cómo accederlos. Puede utilizar Firebug para verificar que esta obteniendo el resultado esperado;

-Finalmente, averigüe qué necesita hacer con esos elementos para resolver el problema. Puede ser útil, antes de comenzar, escribir comentarios explicando lo que va a realizar.

-finalmente, averigüe qué necesita hacer con esos elementos para resolver el problema. Puede ser útil, antes de comenzar, escribir comentarios explicando lo que va a realizar.

No tenga miedo de cometer errores. Tampoco trate en el primer intento escribir de forma perfecta su código. Cometer errores y experimentar con soluciones es parte del proceso de aprendizaje y le ayudará a que sea un mejor desarrollador.

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

-querer colocar el/los elementos seleccionados de forma relativa a otro elemento;

-Querer colocar un elemento relativo a el/los elementos seleccionados.

-querer colocar un elemento relativo a el/los elementos seleccionados.

Por ejemplo, jQuery provee los métodos`$.fn.insertAfter` y`$.fn.after`. El método`$.fn.insertAfter` coloca a el/los elementos seleccionados después del elemento que se haya pasado como argumento; mientras que el método`$.fn.after` coloca al elemento pasado como argumento después del elemento seleccionado. Otros métodos también siguen este patrón:`$.fn.insertBefore` y`$.fn.before`;`$.fn.appendTo` y`$.fn.append`; y`$.fn.prependTo` y`$.fn.prepend`.

3. Seleccionar el elemento`label` del elemento`input` utilizando un selector de atributo.

4. Averiguar cuantos elementos en la página están ocultos (ayuda:`.length`)

4. Averiguar cuantos elementos en la página están ocultos (ayuda:`.length`).

5. Averiguar cuantas imágenes en la página poseen el atributo`alt`.

Estas distinciones pueden ser bastantes confusas para usuarios nuevos. Para evitar la confusión, debe recordar estos dos puntos:

-Los métodos utilizados en selecciones se encuentran dentro del espacio de nombres`$.fn`, y automáticamente reciben y devuelven una selección en sí.

-los métodos utilizados en selecciones se encuentran dentro del espacio de nombres`$.fn`, y automáticamente reciben y devuelven una selección en sí;

-Métodos en el espacio de nombres`$` son generalmente métodos para diferentes utilidades, no trabajan con selecciones, no se les pasa ningún argumento y el valor que devuelven puede variar.

-métodos en el espacio de nombres`$` son generalmente métodos para diferentes utilidades, no trabajan con selecciones, no se les pasa ningún argumento y el valor que devuelven puede variar.

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.

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:

1. Establecer el valor del elemento*input* igual al valor del elemento*label*;

1. Establecer el valor del elemento*input* igual al valor del elemento*label*.

2. Añadir la clase "hint" al elemento*input*;

2. Añadir la clase "hint" al elemento*input*.

3. Remover el elemento*label*;

3. Remover el elemento*label*.

4. Vincular un evento*focus* en el*input* para remover el texto de sugerencia y la clase "hint";

4. Vincular un evento*focus* en el*input* para remover el texto de sugerencia y la clase "hint".

5. Vincular un evento*blur* en el*input* para restaurar el texto de sugerencia y la clase "hint" en caso que no se haya ingresado algún texto.

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:

1. Ocultar todos los elementos*div.module*;

1. Ocultar todos los elementos*div.module*.

2. Crear una lista desordenada antes del primer*div.module* para utilizar como pestañas;

2. Crear una lista desordenada antes del primer*div.module* para utilizar como pestañas.

3. Interactuar con cada div utilizando`$.fn.each`. Por cada uno, utilizar el texto del elemento*h2* como el texto para el ítem de la lista desordenada.

3. Interactuar con cada div utilizando`$.fn.each`. Por cada uno, utilizar el texto del elemento*h2* como el texto para el ítem de la lista desordenada;

4. Vincular un evento*click* a cada ítem de la lista de forma que:

-Muestre el*div* correspondiente y oculte el otro;

-muestre el*div* correspondiente y oculte el otro;

-Añada la clase "current" al ítem seleccionado;

-añada la clase "current" al ítem seleccionado;

-Remueva la clase "current" del otro ítem de la lista;

-remueva la clase "current" del otro ítem de la lista.

5. Finalmente, mostrar la primera pestaña.

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;

-al hacer click en alguno de los titulares del*div #blog*, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;

-Al hacer click en otro titular, se debe ocultar el párrafo mostrado con un efecto de deslizamiento y mostrar nuevamente el párrafo correspondiente también con un efecto de deslizamiento. Ayuda: No se olvide de utilizar el selector`:visible`.

-al hacer click en otro titular, se debe ocultar el párrafo mostrado con un efecto de deslizamiento y mostrar nuevamente el párrafo correspondiente también con un efecto de deslizamiento. Ayuda: No se olvide de utilizar el selector`:visible`.

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;

-al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;

-Al no estar más encima de un ítem, el submenú se debe ocultar.

-al no estar más encima de un ítem, el submenú se debe ocultar.

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)

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.

1. Mover el elemento*#slideshow* a la parte superior de la página;

1. Mover el elemento*#slideshow* a la parte superior de la página.

2. Escribir un código que permita mostrar los ítems de forma cíclica, mostrando un ítem por unos segundos, luego ocultándolo con un efecto*fade out* y mostrando el siguiente con un efecto*fade in*;

2. Escribir un código que permita mostrar los ítems de forma cíclica, mostrando un ítem por unos segundos, luego ocultándolo con un efecto*fade out* y mostrando el siguiente con un efecto*fade in.

3. Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero;

3. Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero.

Para un desafío mayor, realice un área de navegación por debajo del slideshow que muestre cuantas imágenes existen y en cual se encuentra (ayuda: $.fn.prevAll` puede resultar útil).

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.

1. 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`.

2. Vincular un evento click al titulo, el cual utilizará el método`$.fn.load` para cargar en cada*div* creado el contenido apropiado desde el archivo`/ejercicios/data/blog.html`. No olvide de deshabilitar el comportamiento predeterminado del evento*click*.

Notar que cada titulo de artículo de blog en`index.html` incluye un enlace hacia el artículo. Necesitará aprovechar el atributo href de cada enlace para obtener el contenido propio de blog.html. Una vez obtenida el valor del atributo, puede utilizar la siguiente forma para procesar la información y convertirla en un selector para utilizar en conjunto con`$.fn.load`:

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.

1. 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.

2. Vincular el evento*change* en el elemento*select*; cuando se realiza un cambio en la selección, enviar una petición Ajax a`/ejercicios/data/specials.json`.

3. Cuando la petición devuelve una respuesta, utilizar el valor seleccionado en el select (ayuda:`$.fn.val`) para buscar la información correspondiente en la respuesta JSON.

4. Añadir algún HTML con la información obtenida en el*div* creado anteriormente.

5. Finalmente remover el botón*submit* del formulario.

Notar que cada vez que la selección cambia, se realiza una petición Ajax. ¿Cómo cambiaría el código para realizar solo una petición y guardar la información para aprovecharla cuando se vuelve a cambiar la opción seleccionada?

Antes de comenzar con los patrones de organización de código, es importante entender algunos 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.

-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 heredación;

-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.

-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](http://en.wikipedia.org/wiki/Loose_coupling)) — 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.

-las unidades de funcionalidad deben tener una articulación flexible (en inglés[loosely coupled](http://en.wikipedia.org/wiki/Loose_coupling)) — 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.

El concepto de articulación flexible puede ser especialmente problemático para desarrolladores que hacen su primera incursión en aplicaciones complejas. Por lo tanto, si usted esta empezando a crear aplicaciones, solamente sea consciente de este concepto.

Con la nueva organización, las ventajas obtenidas son:

-Separación de cada funcionalidad en pequeños métodos. En un futuro, si se quiere cambiar la forma en que el contenido se muestra, será claro en donde habrá que hacerlo. En el código original, este paso es mucho más difícil de localizar.

-separación de cada funcionalidad en pequeños métodos. En un futuro, si se quiere cambiar la forma en que el contenido se muestra, será claro en donde habrá que hacerlo. En el código original, este paso es mucho más difícil de localizar;

-Se eliminaron los usos de funciones anónimas.

-se eliminaron los usos de funciones anónimas;

-Las opciones de configuración se movieron a una ubicación central.

-las opciones de configuración se movieron a una ubicación central;

-Se eliminaron las limitaciones que poseen las cadenas de métodos, haciendo que el código sea más fácil para refactorizar, mezclar y reorganizar.

-se eliminaron las limitaciones que poseen las cadenas de métodos, haciendo que el código sea más fácil para refactorizar, mezclar y reorganizar.

Por 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()`.