libro/html/index.html

<!doctype html>
<html itemscope itemtype="http://schema.org/Book" lang="es-es">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
  <meta charset="utf-8">
  <meta http-equiv="Content-language" content="es"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
  <meta name="description" content="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."/>
  <meta itemprop="name" content="Libro gratuito de jQuery en espa&ntilde;ol - Fundamentos de jQuery">
  <meta itemprop="description" content="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.">
  <meta itemprop="image" content="http://librojquery.com/img/jquery-logo.gif">
  <meta property="og:url" content="http://librojquery.com/"/>
  <meta property="og:title" content="Libro gratuito de jQuery en espa&ntilde;ol - Fundamentos de jQuery"/>
  <meta property="og:image" content="http://librojquery.com/img/jquery-logo.gif"/>
  <meta property="og:description" content="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."/>
  <title>Libro gratuito de jQuery en espa&ntilde;ol - Fundamentos de jQuery</title>
  <link rel="stylesheet" type="text/css" href="css/markdown.css" media="screen, projection, print">
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection, print">
  <link rel="stylesheet" type="text/css" href="css/stylePrint.css" media="print">
  <link rel="canonical" href="http://librojquery.com/" />
</head>

<body>
    <div id="titlepage">

      <h1 class="title maintitle">
        <a title="Fundamentos de jQuery" href="http://librojquery.com/">Fundamentos de jQuery</a>
      </h1>

      <div class="social">
        <ul>
          <li>
            <div class="fb-like" data-href="http://librojquery.com/" data-send="false" data-layout="button_count" data-width="115" data-show-faces="false"></div>
            <div id="fb-root"></div>
          </li>
          <li>
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="dzignus" data-lang="es">Tweet</a>
          </li>
          <li>
            <div class="g-plusone" data-size="medium" data-href="http://librojquery.com/"></div>
          </li>
        </ul>
      </div>

      <div class="clear"></div>

      <h3>Textos originales por <a href="http://www.rebeccamurphey.com">Rebecca Murphey</a></h3>

      <div class="translators">
        <h3 class="translator">Traducción, adaptación y textos adicionales por <a href="http://dzign.us/">Leandro D'Onofrio</a>.</h3>
        <h3 class="corrections">Correcciones por <a href="http://ar.linkedin.com/in/gustavoaragon/">Gustavo Ra&uacute;l Arag&oacute;n</a>, <a href="http://www.linkedin.com/pub/pablo-andr%C3%A9s-maronna/10/713/373">Pablo Maronna</a>, <a href="http://es.linkedin.com/in/denisciccale">Denis Ciccale</a> y <a href="https://github.com/dzignus/librojquery/wiki/Otras-personas-que-tambi%C3%A9n-ayudaron-con-el-material">otras personas</a>.</h3>
      </div>

      <h3>Con contribuciones de James Padolsey, Paul Irish y otros. Para un completo historial de contribuciones visite el repositorio en GitHub.</h3>

      <h3><a href="https://github.com/dzignus/librojquery" rel="_blank">Repositorio en espa&ntilde;ol</a> | <a href="http://github.com/rmurphey/jqfundamentals" rel="_blank">Repositorio original</a></h3>

      <h4><a href="https://github.com/dzignus/librojquery/wiki/Mejoras-y-correcciones-en-el-material" rel="_blank">¿Tienes correcciones o mejoras del material?</a></h4>

      <p title="Aviso Legal">
        Bajo licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/us/" rel="_blank">Creative Commons Attribution-Share Alike 3.0 United States</a>.
      </p>

      <p>
        <strong>Última actualización del libro:</strong> Junio 2013 (<a href="https://github.com/dzignus/librojquery/commits/master" rel="_blank">ver cambios</a>).
      </p>

    </div>

    <div id="TOC">
              <h2>Contenidos</h2>
        <ul>
        <li><a href="#bienvenidoa"><span class="toc-section-number">1</span> Bienvenido/a</a><ul>
        <li><a href="#obtener-el-material-de-aprendizaje"><span class="toc-section-number">1.1</span> Obtener el Material de Aprendizaje</a></li>
        <li><a href="#software"><span class="toc-section-number">1.2</span> Software</a></li>
        <li><a href="#añadir-javascript-a-una-página"><span class="toc-section-number">1.3</span> Añadir JavaScript a una Página</a></li>
        <li><a href="#depuración-del-código-javascript"><span class="toc-section-number">1.4</span> Depuración del Código JavaScript</a></li>
        <li><a href="#ejercicios"><span class="toc-section-number">1.5</span> Ejercicios</a></li>
        <li><a href="#convenciones-utilizadas-en-el-libro"><span class="toc-section-number">1.6</span> Convenciones Utilizadas en el Libro</a></li>
        <li><a href="#notas-de-la-traducción"><span class="toc-section-number">1.7</span> Notas de la Traducción</a></li>
        <li><a href="#material-de-referencia"><span class="toc-section-number">1.8</span> Material de Referencia</a></li>
        </ul></li>
        <li><a href="#conceptos-básicos-de-javascript"><span class="toc-section-number">2</span> Conceptos Básicos de JavaScript</a><ul>
        <li><a href="#introducción"><span class="toc-section-number">2.1</span> Introducción</a></li>
        <li><a href="#sintaxis-básica"><span class="toc-section-number">2.2</span> Sintaxis Básica</a></li>
        <li><a href="#operadores"><span class="toc-section-number">2.3</span> Operadores</a><ul>
        <li><a href="#operadores-básicos"><span class="toc-section-number">2.3.1</span> Operadores Básicos</a></li>
        <li><a href="#operaciones-con-números-y-cadenas-de-caracteres"><span class="toc-section-number">2.3.2</span> Operaciones con Números y Cadenas de Caracteres</a></li>
        <li><a href="#operadores-lógicos"><span class="toc-section-number">2.3.3</span> Operadores Lógicos</a></li>
        <li><a href="#operadores-de-comparación"><span class="toc-section-number">2.3.4</span> Operadores de Comparación</a></li>
        </ul></li>
        <li><a href="#código-condicional"><span class="toc-section-number">2.4</span> Código Condicional</a><ul>
        <li><a href="#elementos-verdaderos-y-falsos"><span class="toc-section-number">2.4.1</span> Elementos Verdaderos y Falsos</a></li>
        <li><a href="#variables-condicionales-utilizando-el-operador-ternario"><span class="toc-section-number">2.4.2</span> Variables Condicionales Utilizando el Operador Ternario</a></li>
        <li><a href="#declaración-switch"><span class="toc-section-number">2.4.3</span> Declaración Switch</a></li>
        </ul></li>
        <li><a href="#bucles"><span class="toc-section-number">2.5</span> Bucles</a><ul>
        <li><a href="#bucles-utilizando-for"><span class="toc-section-number">2.5.1</span> Bucles Utilizando For</a></li>
        <li><a href="#bucles-utilizando-while"><span class="toc-section-number">2.5.2</span> Bucles Utilizando While</a></li>
        <li><a href="#bucles-utilizando-do-while"><span class="toc-section-number">2.5.3</span> Bucles Utilizando Do-while</a></li>
        <li><a href="#break-y-continue"><span class="toc-section-number">2.5.4</span> Break y Continue</a></li>
        </ul></li>
        <li><a href="#palabras-reservadas"><span class="toc-section-number">2.6</span> Palabras Reservadas</a></li>
        <li><a href="#vectores"><span class="toc-section-number">2.7</span> Vectores</a></li>
        <li><a href="#objetos"><span class="toc-section-number">2.8</span> Objetos</a></li>
        <li><a href="#funciones"><span class="toc-section-number">2.9</span> Funciones</a><ul>
        <li><a href="#utilización-de-funciones"><span class="toc-section-number">2.9.1</span> Utilización de Funciones</a></li>
        <li><a href="#funciones-anónimas-autoejecutables"><span class="toc-section-number">2.9.2</span> Funciones Anónimas Autoejecutables</a></li>
        <li><a href="#funciones-como-argumentos"><span class="toc-section-number">2.9.3</span> Funciones como Argumentos</a></li>
        </ul></li>
        <li><a href="#determinación-del-tipo-de-variable"><span class="toc-section-number">2.10</span> Determinación del Tipo de Variable</a></li>
        <li><a href="#la-palabra-clave-this"><span class="toc-section-number">2.11</span> La palabra clave <code>this</code></a></li>
        <li><a href="#alcance"><span class="toc-section-number">2.12</span> Alcance</a></li>
        <li><a href="#clausuras"><span class="toc-section-number">2.13</span> Clausuras</a></li>
        </ul></li>
        <li><a href="#conceptos-básicos-de-jquery"><span class="toc-section-number">3</span> Conceptos Básicos de jQuery</a><ul>
        <li><a href="#document.ready"><span class="toc-section-number">3.1</span> $(document).ready()</a></li>
        <li><a href="#selección-de-elementos"><span class="toc-section-number">3.2</span> Selección de Elementos</a><ul>
        <li><a href="#comprobar-selecciones"><span class="toc-section-number">3.2.1</span> Comprobar Selecciones</a></li>
        <li><a href="#guardar-selecciones"><span class="toc-section-number">3.2.2</span> Guardar Selecciones</a></li>
        <li><a href="#refinamiento-y-filtrado-de-selecciones"><span class="toc-section-number">3.2.3</span> Refinamiento y Filtrado de Selecciones</a></li>
        <li><a href="#selección-de-elementos-de-un-formulario"><span class="toc-section-number">3.2.4</span> Selección de Elementos de un Formulario</a></li>
        </ul></li>
        <li><a href="#trabajar-con-selecciones"><span class="toc-section-number">3.3</span> Trabajar con Selecciones</a><ul>
        <li><a href="#encadenamiento"><span class="toc-section-number">3.3.1</span> Encadenamiento</a></li>
        <li><a href="#obtenedores-getters-establecedores-setters"><span class="toc-section-number">3.3.2</span> Obtenedores (Getters) &amp; Establecedores (Setters)</a></li>
        </ul></li>
        <li><a href="#css-estilos-dimensiones"><span class="toc-section-number">3.4</span> CSS, Estilos, &amp; Dimensiones</a><ul>
        <li><a href="#utilizar-clases-para-aplicar-estilos-css"><span class="toc-section-number">3.4.1</span> Utilizar Clases para Aplicar Estilos CSS</a></li>
        <li><a href="#dimensiones"><span class="toc-section-number">3.4.2</span> Dimensiones</a></li>
        </ul></li>
        <li><a href="#atributos"><span class="toc-section-number">3.5</span> Atributos</a></li>
        <li><a href="#recorrer-el-dom"><span class="toc-section-number">3.6</span> Recorrer el DOM</a></li>
        <li><a href="#manipulación-de-elementos"><span class="toc-section-number">3.7</span> Manipulación de Elementos</a><ul>
        <li><a href="#obtener-y-establecer-información-en-elementos"><span class="toc-section-number">3.7.1</span> Obtener y Establecer Información en Elementos</a></li>
        <li><a href="#mover-copiar-y-remover-elementos"><span class="toc-section-number">3.7.2</span> Mover, Copiar y Remover Elementos</a></li>
        <li><a href="#crear-nuevos-elementos"><span class="toc-section-number">3.7.3</span> Crear Nuevos Elementos</a></li>
        <li><a href="#manipulación-de-atributos"><span class="toc-section-number">3.7.4</span> Manipulación de Atributos</a></li>
        </ul></li>
        <li><a href="#ejercicios-1"><span class="toc-section-number">3.8</span> Ejercicios</a><ul>
        <li><a href="#selecciones"><span class="toc-section-number">3.8.1</span> Selecciones</a></li>
        <li><a href="#recorrer-el-dom-1"><span class="toc-section-number">3.8.2</span> Recorrer el DOM</a></li>
        <li><a href="#manipulación"><span class="toc-section-number">3.8.3</span> Manipulación</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#el-núcleo-de-jquery"><span class="toc-section-number">4</span> El núcleo de jQuery</a><ul>
        <li><a href="#vs"><span class="toc-section-number">4.1</span> <code>$</code> vs <code>$()</code></a></li>
        <li><a href="#métodos-utilitarios"><span class="toc-section-number">4.2</span> Métodos Utilitarios</a></li>
        <li><a href="#comprobación-de-tipos"><span class="toc-section-number">4.3</span> Comprobación de Tipos</a></li>
        <li><a href="#el-método-data"><span class="toc-section-number">4.4</span> El Método Data</a></li>
        <li><a href="#detección-de-navegadores-y-características"><span class="toc-section-number">4.5</span> Detección de Navegadores y Características</a></li>
        <li><a href="#evitar-conflictos-con-otras-bibliotecas-javascript"><span class="toc-section-number">4.6</span> Evitar Conflictos con Otras Bibliotecas JavaScript</a></li>
        </ul></li>
        <li><a href="#eventos"><span class="toc-section-number">5</span> Eventos</a><ul>
        <li><a href="#introducción-1"><span class="toc-section-number">5.1</span> Introducción</a></li>
        <li><a href="#vincular-eventos-a-elementos"><span class="toc-section-number">5.2</span> Vincular Eventos a Elementos</a><ul>
        <li><a href="#vincular-eventos-para-ejecutar-una-vez"><span class="toc-section-number">5.2.1</span> Vincular Eventos para Ejecutar una vez</a></li>
        <li><a href="#desvincular-eventos"><span class="toc-section-number">5.2.2</span> Desvincular Eventos</a></li>
        <li><a href="#espacios-de-nombres-para-eventos"><span class="toc-section-number">5.2.3</span> Espacios de Nombres para Eventos</a></li>
        <li><a href="#vinculación-de-múltiples-eventos"><span class="toc-section-number">5.2.4</span> Vinculación de Múltiples Eventos</a></li>
        </ul></li>
        <li><a href="#el-objeto-del-evento"><span class="toc-section-number">5.3</span> El Objeto del Evento</a></li>
        <li><a href="#ejecución-automática-de-controladores-de-eventos"><span class="toc-section-number">5.4</span> Ejecución automática de Controladores de Eventos</a></li>
        <li><a href="#incrementar-el-rendimiento-con-la-delegación-de-eventos"><span class="toc-section-number">5.5</span> Incrementar el Rendimiento con la Delegación de Eventos</a><ul>
        <li><a href="#desvincular-eventos-delegados"><span class="toc-section-number">5.5.1</span> Desvincular Eventos Delegados</a></li>
        </ul></li>
        <li><a href="#funciones-auxiliares-de-eventos"><span class="toc-section-number">5.6</span> Funciones Auxiliares de Eventos</a><ul>
        <li><a href="#fn.hover"><span class="toc-section-number">5.6.1</span> <code>$.fn.hover</code></a></li>
        <li><a href="#fn.toggle"><span class="toc-section-number">5.6.2</span> <code>$.fn.toggle</code></a></li>
        </ul></li>
        <li><a href="#ejercicios-2"><span class="toc-section-number">5.7</span> Ejercicios</a><ul>
        <li><a href="#crear-una-sugerencia-para-una-caja-de-ingreso-de-texto"><span class="toc-section-number">5.7.1</span> Crear una “Sugerencia” para una Caja de Ingreso de Texto</a></li>
        <li><a href="#añadir-una-navegación-por-pestañas"><span class="toc-section-number">5.7.2</span> Añadir una Navegación por Pestañas</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#efectos"><span class="toc-section-number">6</span> Efectos</a><ul>
        <li><a href="#introducción-2"><span class="toc-section-number">6.1</span> Introducción</a></li>
        <li><a href="#efectos-incorporados-en-la-biblioteca"><span class="toc-section-number">6.2</span> Efectos Incorporados en la Biblioteca</a><ul>
        <li><a href="#cambiar-la-duración-de-los-efectos"><span class="toc-section-number">6.2.1</span> Cambiar la Duración de los Efectos</a></li>
        <li><a href="#realizar-una-acción-cuando-un-efecto-fue-ejecutado"><span class="toc-section-number">6.2.2</span> Realizar una Acción Cuando un Efecto fue Ejecutado</a></li>
        </ul></li>
        <li><a href="#efectos-personalizados-con-.fn.animate"><span class="toc-section-number">6.3</span> Efectos Personalizados con <code>$.fn.animate</code></a><ul>
        <li><a href="#easing"><span class="toc-section-number">6.3.1</span> Easing</a></li>
        </ul></li>
        <li><a href="#control-de-los-efectos"><span class="toc-section-number">6.4</span> Control de los Efectos</a></li>
        <li><a href="#ejercicios-3"><span class="toc-section-number">6.5</span> Ejercicios</a><ul>
        <li><a href="#mostrar-texto-oculto"><span class="toc-section-number">6.5.1</span> Mostrar Texto Oculto</a></li>
        <li><a href="#crear-un-menú-desplegable"><span class="toc-section-number">6.5.2</span> Crear un Menú Desplegable</a></li>
        <li><a href="#crear-un-slideshow"><span class="toc-section-number">6.5.3</span> Crear un Slideshow</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#ajax"><span class="toc-section-number">7</span> Ajax</a><ul>
        <li><a href="#introducción-3"><span class="toc-section-number">7.1</span> Introducción</a></li>
        <li><a href="#conceptos-clave"><span class="toc-section-number">7.2</span> Conceptos Clave</a><ul>
        <li><a href="#get-vs.post"><span class="toc-section-number">7.2.1</span> GET vs. POST</a></li>
        <li><a href="#tipos-de-datos"><span class="toc-section-number">7.2.2</span> Tipos de Datos</a></li>
        <li><a href="#asincronismo"><span class="toc-section-number">7.2.3</span> Asincronismo</a></li>
        <li><a href="#políticas-de-mismo-origen-y-jsonp"><span class="toc-section-number">7.2.4</span> Políticas de Mismo Origen y JSONP</a></li>
        <li><a href="#ajax-y-firebug"><span class="toc-section-number">7.2.5</span> Ajax y Firebug</a></li>
        </ul></li>
        <li><a href="#métodos-ajax-de-jquery"><span class="toc-section-number">7.3</span> Métodos Ajax de jQuery</a><ul>
        <li><a href="#ajax-1"><span class="toc-section-number">7.3.1</span> $.ajax</a></li>
        <li><a href="#métodos-convenientes"><span class="toc-section-number">7.3.2</span> Métodos Convenientes</a></li>
        <li><a href="#fn.load"><span class="toc-section-number">7.3.3</span> <code>$.fn.load</code></a></li>
        </ul></li>
        <li><a href="#ajax-y-formularios"><span class="toc-section-number">7.4</span> Ajax y Formularios</a></li>
        <li><a href="#trabajar-con-jsonp"><span class="toc-section-number">7.5</span> Trabajar con JSONP</a></li>
        <li><a href="#eventos-ajax"><span class="toc-section-number">7.6</span> Eventos Ajax</a></li>
        <li><a href="#ejercicios-4"><span class="toc-section-number">7.7</span> Ejercicios</a><ul>
        <li><a href="#cargar-contenido-externo"><span class="toc-section-number">7.7.1</span> Cargar Contenido Externo</a></li>
        <li><a href="#cargar-contenido-utilizando-json"><span class="toc-section-number">7.7.2</span> Cargar Contenido Utilizando JSON</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#extensiones"><span class="toc-section-number">8</span> Extensiones</a><ul>
        <li><a href="#qué-es-una-extensión"><span class="toc-section-number">8.1</span> ¿Qué es una Extensión?</a></li>
        <li><a href="#crear-una-extensión-básica"><span class="toc-section-number">8.2</span> Crear una Extensión Básica</a></li>
        <li><a href="#encontrar-y-evaluar-extensiones"><span class="toc-section-number">8.3</span> Encontrar y Evaluar Extensiones</a></li>
        <li><a href="#escribir-extensiones"><span class="toc-section-number">8.4</span> Escribir Extensiones</a></li>
        <li><a href="#escribir-extensiones-con-mantenimiento-de-estado-utilizando-widget-factory-de-jquery-ui"><span class="toc-section-number">8.5</span> Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI</a><ul>
        <li><a href="#añadir-métodos-a-un-widget"><span class="toc-section-number">8.5.1</span> Añadir Métodos a un Widget</a></li>
        <li><a href="#trabajar-con-las-opciones-del-widget"><span class="toc-section-number">8.5.2</span> Trabajar con las Opciones del Widget</a></li>
        <li><a href="#añadir-funciones-de-devolución-de-llamada"><span class="toc-section-number">8.5.3</span> Añadir Funciones de Devolución de Llamada</a></li>
        <li><a href="#limpieza"><span class="toc-section-number">8.5.4</span> Limpieza</a></li>
        <li><a href="#conclusión"><span class="toc-section-number">8.5.5</span> Conclusión</a></li>
        </ul></li>
        <li><a href="#ejercicios-5"><span class="toc-section-number">8.6</span> Ejercicios</a><ul>
        <li><a href="#realizar-una-tabla-ordenable"><span class="toc-section-number">8.6.1</span> Realizar una Tabla Ordenable</a></li>
        <li><a href="#escribir-una-extensión-para-cambiar-el-color-de-fondo-en-tablas"><span class="toc-section-number">8.6.2</span> Escribir una Extensión Para Cambiar el Color de Fondo en Tablas</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#mejores-prácticas-para-aumentar-el-rendimiento"><span class="toc-section-number">9</span> Mejores Prácticas para Aumentar el Rendimiento</a><ul>
        <li><a href="#guardar-la-longitud-en-bucles"><span class="toc-section-number">9.1</span> Guardar la Longitud en Bucles</a></li>
        <li><a href="#añadir-nuevo-contenido-por-fuera-de-un-bucle"><span class="toc-section-number">9.2</span> Añadir Nuevo Contenido por Fuera de un Bucle</a></li>
        <li><a href="#no-repetirse"><span class="toc-section-number">9.3</span> No Repetirse</a></li>
        <li><a href="#cuidado-con-las-funciones-anónimas"><span class="toc-section-number">9.4</span> Cuidado con las Funciones Anónimas</a></li>
        <li><a href="#optimización-de-selectores"><span class="toc-section-number">9.5</span> Optimización de Selectores</a><ul>
        <li><a href="#selectores-basados-en-id"><span class="toc-section-number">9.5.1</span> Selectores basados en ID</a></li>
        <li><a href="#especificidad"><span class="toc-section-number">9.5.2</span> Especificidad</a></li>
        <li><a href="#evitar-el-selector-universal"><span class="toc-section-number">9.5.3</span> Evitar el Selector Universal</a></li>
        </ul></li>
        <li><a href="#utilizar-la-delegación-de-eventos"><span class="toc-section-number">9.6</span> Utilizar la Delegación de Eventos</a></li>
        <li><a href="#separar-elementos-para-trabajar-con-ellos"><span class="toc-section-number">9.7</span> Separar Elementos para Trabajar con Ellos</a></li>
        <li><a href="#utilizar-estilos-en-cascada-para-cambios-de-css-en-varios-elementos"><span class="toc-section-number">9.8</span> Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos</a></li>
        <li><a href="#utilizar-.data-en-lugar-de-.fn.data"><span class="toc-section-number">9.9</span> Utilizar <code>$.data</code> en Lugar de <code>$.fn.data</code></a></li>
        <li><a href="#no-actuar-en-elementos-no-existentes"><span class="toc-section-number">9.10</span> No Actuar en Elementos no Existentes</a></li>
        <li><a href="#definición-de-variables"><span class="toc-section-number">9.11</span> Definición de Variables</a></li>
        <li><a href="#condicionales"><span class="toc-section-number">9.12</span> Condicionales</a></li>
        <li><a href="#no-tratar-a-jquery-como-si-fuera-una-caja-negra"><span class="toc-section-number">9.13</span> No Tratar a jQuery como si fuera una Caja Negra</a></li>
        </ul></li>
        <li><a href="#organización-del-código"><span class="toc-section-number">10</span> Organización del Código</a><ul>
        <li><a href="#introducción-4"><span class="toc-section-number">10.1</span> Introducción</a><ul>
        <li><a href="#conceptos-clave-1"><span class="toc-section-number">10.1.1</span> Conceptos Clave</a></li>
        </ul></li>
        <li><a href="#encapsulación"><span class="toc-section-number">10.2</span> Encapsulación</a><ul>
        <li><a href="#el-objeto-literal"><span class="toc-section-number">10.2.1</span> El Objeto Literal</a></li>
        <li><a href="#el-patrón-modular"><span class="toc-section-number">10.2.2</span> El Patrón Modular</a></li>
        </ul></li>
        <li><a href="#gestión-de-dependencias"><span class="toc-section-number">10.3</span> Gestión de Dependencias</a><ul>
        <li><a href="#obtener-requirejs"><span class="toc-section-number">10.3.1</span> Obtener RequireJS</a></li>
        <li><a href="#utilizar-requirejs-con-jquery"><span class="toc-section-number">10.3.2</span> Utilizar RequireJS con jQuery</a></li>
        <li><a href="#crear-módulos-reusables-con-requirejs"><span class="toc-section-number">10.3.3</span> Crear Módulos Reusables con RequireJS</a></li>
        <li><a href="#optimizar-el-código-con-las-herramientas-de-requirejs"><span class="toc-section-number">10.3.4</span> Optimizar el Código con las Herramientas de RequireJS</a></li>
        </ul></li>
        <li><a href="#ejercicios-6"><span class="toc-section-number">10.4</span> Ejercicios</a><ul>
        <li><a href="#crear-un-módulo-portlet"><span class="toc-section-number">10.4.1</span> Crear un Módulo Portlet</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#eventos-personalizados"><span class="toc-section-number">11</span> Eventos Personalizados</a><ul>
        <li><a href="#introducción-a-los-eventos-personalizados"><span class="toc-section-number">11.1</span> Introducción a los Eventos Personalizados</a><ul>
        <li><a href="#un-ejemplo-de-aplicación"><span class="toc-section-number">11.1.1</span> Un Ejemplo de Aplicación</a></li>
        </ul></li>
        </ul></li>
        <li><a href="#funciones-y-ejecuciones-diferidas-a-través-del-objeto-.deferred"><span class="toc-section-number">12</span> Funciones y ejecuciones diferidas a través del objeto <code>$.Deferred</code></a><ul>
        <li><a href="#introducción-5"><span class="toc-section-number">12.1</span> Introducción</a></li>
        <li><a href="#el-objeto-diferido-y-ajax"><span class="toc-section-number">12.2</span> El objeto diferido y Ajax</a><ul>
        <li><a href="#deferred.then"><span class="toc-section-number">12.2.1</span> <code>deferred.then</code></a></li>
        </ul></li>
        <li><a href="#creación-de-objetos-diferidos-con-.deferred"><span class="toc-section-number">12.3</span> Creación de objetos diferidos con <code>$.Deferred</code></a><ul>
        <li><a href="#deferred.pipe"><span class="toc-section-number">12.3.1</span> <code>deferred.pipe</code></a></li>
        <li><a href="#when"><span class="toc-section-number">12.3.2</span> <code>$.when</code></a></li>
        </ul></li>
        </ul></li>
        </ul>
          </div>

    <hr />

    <div id="bienvenidoa" class="section level1">
    <h1><a href="#bienvenidoa"><span class="header-section-number">1</span> Bienvenido/a</a></h1>
    <p>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.</p>
    <p>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.</p>
    <div id="obtener-el-material-de-aprendizaje" class="section level2">
    <h2><a href="#obtener-el-material-de-aprendizaje"><span class="header-section-number">1.1</span> Obtener el Material de Aprendizaje</a></h2>
    <p>El material de aprendizaje y el código fuente de los ejemplos que se utilizan en el libro están hospedados en <a href="https://github.com/dzignus/librojquery">un repositorio de Github</a>. Desde allí es posible descargar un archivo .zip o .tar con el código para utilizar en un servidor web.</p>
    <p>Si usted suele utilizar <a href="http://git-scm.com/">Git</a>, es bienvenido de clonar o modificar el repositorio.</p>
    </div>
    <div id="software" class="section level2">
    <h2><a href="#software"><span class="header-section-number">1.2</span> Software</a></h2>
    <p>Para trabajar con los contenidos del libro, necesitará las siguientes herramientas:</p>
    <ul>
    <li><p><a href="http://www.mozilla.com/firefox/">Navegador web Firefox</a></p></li>
    <li><p>La <a href="https://addons.mozilla.org/es-ES/firefox/addon/firebug/">extensión Firebug</a>, para Firefox</p></li>
    <li><p>Un editor de textos planos (como <a href="http://notepad-plus-plus.org/download/v5.9.8.html">Notepad++</a>/<a href="http://www.sublimetext.com/2">Sublime Text 2</a> para Windows, <a href="http://www.icewalkers.com/Linux/Software/56260/gEdit.html">gedit</a>/<a href="http://linux.softpedia.com/get/Text-Editing-Processing/Others/Kate-2317.shtml">Kate</a> para Linux o <a href="http://textmate.en.softonic.com/mac">TextMate</a> para Mac OS X)</p></li>
    <li><p>Para las secciones dedicadas a Ajax: Un servidor local (como <a href="http://www.wampserver.com/en/download.php">WAMP</a> o <a href="http://www.mamp.info/en/index.html">MAMP</a>) o un cliente FTP/SSH (como <a href="http://filezilla-project.org/">FileZilla</a>) para acceder a un servidor remoto.</p></li>
    </ul>
    </div>
    <div id="añadir-javascript-a-una-página" class="section level2">
    <h2><a href="#añadir-javascript-a-una-página"><span class="header-section-number">1.3</span> Añadir JavaScript a una Página</a></h2>
    <p>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).</p>
    <p>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.</p>
    <p><strong>Ejemplo de código JavaScript en línea</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;script&gt;
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hello&#39;</span>);
    &lt;<span class="ot">/script&gt;</span></code></pre>
    <p><strong>Ejemplo de inclusión de un archivo externo JavaScript</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;script src=<span class="st">&#39;/js/jquery.js&#39;</span>&gt;&lt;<span class="ot">/script&gt;</span></code></pre>
    </div>
    <div id="depuración-del-código-javascript" class="section level2">
    <h2><a href="#depuración-del-código-javascript"><span class="header-section-number">1.4</span> Depuración del Código JavaScript</a></h2>
    <p>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 <a href="http://www.apple.com/es/safari/download/">Safari</a> y <a href="http://www.google.es/chrome/">Chrome</a> ya traen uno integrado.</p>
    <p>Cada depurador ofrece:</p>
    <ul>
    <li><p>un editor multi-linea para experimentar con JavaScript;</p></li>
    <li><p>un inspector para revisar el código generado en la página;</p></li>
    <li><p>un visualizador de red o recursos, para examinar las peticiones que se realizan.</p></li>
    </ul>
    <p>Cuando usted este escribiendo código JavaScript, podrá utilizar alguno de los siguientes métodos para enviar mensajes a la consola del depurador:</p>
    <ul>
    <li><p><code>console.log()</code> para enviar y registrar mensajes generales;</p></li>
    <li><p><code>console.dir()</code> para registrar un objeto y visualizar sus propiedades;</p></li>
    <li><p><code>console.warn()</code> para registrar mensajes de alerta;</p></li>
    <li><p><code>console.error()</code> para registrar mensajes de error.</p></li>
    </ul>
    <p>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.</p>
    </div>
    <div id="ejercicios" class="section level2">
    <h2><a href="#ejercicios"><span class="header-section-number">1.5</span> Ejercicios</a></h2>
    <p>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.</p>
    <p>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.</p>
    <p>Estas son algunas sugerencias para hacer frente a los problemas:</p>
    <ul>
    <li><p>en primer lugar, asegúrese de entender bien el problema que está tratando de resolver;</p></li>
    <li><p>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;</p></li>
    <li><p>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.</p></li>
    </ul>
    <p>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.</p>
    <p>Podrá encontrar en la carpeta <code>/ejercicios/soluciones</code> ejemplos de soluciones a los ejercicios del libro.</p>
    </div>
    <div id="convenciones-utilizadas-en-el-libro" class="section level2">
    <h2><a href="#convenciones-utilizadas-en-el-libro"><span class="header-section-number">1.6</span> Convenciones Utilizadas en el Libro</a></h2>
    <p>Existen una serie de convenciones utilizadas en el libro:</p>
    <p>Los métodos que pueden ser llamados desde el objeto jQuery, serán referenciados como <code>$.fn.nombreDelMetodo</code>. Los métodos que existen en el espacio de nombres (en inglés <em>namespace</em>) de jQuery pero que no pueden ser llamados desde el objeto jQuery serán referenciados como <code>$.nombreDelMetodo</code>. Si esto no significa mucho para usted, no se preocupe — será más claro a medida que vaya progresando en el libro.</p>
    <p><strong>Ejemplo de un código</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// el código de ejemplo aparecerá de esta forma</span></code></pre>
    <p><em>Las remarcaciones aparecerán de esta forma.</em></p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Las notas sobre algún tema aparecerán de esta forma.</p>
    </blockquote>
    </div>
    <div id="notas-de-la-traducción" class="section level2">
    <h2><a href="#notas-de-la-traducción"><span class="header-section-number">1.7</span> Notas de la Traducción</a></h2>
    <ul>
    <li><p>Debido a que el material tiene como fin el aprendizaje y la enseñanza, el mismo se encuentra traducido a español formal (usted).</p></li>
    <li><p>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.</p></li>
    <li><p>Los ejemplos y soluciones a ejercicios no están completamente traducidos. Esto es debido a que, cuando esté trabajando en un proyecto real, el código que encuentre en otros sitios probablemente esté en inglés. Aún así, se han traducido los comentarios incorporados en los códigos de ejemplos y algunos textos particulares para facilitar la comprensión.</p></li>
    </ul>
    </div>
    <div id="material-de-referencia" class="section level2">
    <h2><a href="#material-de-referencia"><span class="header-section-number">1.8</span> Material de Referencia</a></h2>
    <p>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.</p>
    <p>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.</p>
    <ul>
    <li><p><a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">El código fuente de jQuery</a></p></li>
    <li><p><a href="http://api.jquery.com">Documentación de jQuery</a></p></li>
    <li><p><a href="http://forum.jquery.com/">Foro de jQuery</a></p></li>
    <li><p><a href="http://delicious.com/rdmey/jquery-class">Favoritos en Delicious</a></p></li>
    <li><p><a href="http://docs.jquery.com/Discussion#Chat_.2F_IRC_Channel">Canal IRC #jquery en Freenode</a></p></li>
    </ul>
    </div>
    </div>
    <div id="conceptos-básicos-de-javascript" class="section level1">
    <h1><a href="#conceptos-básicos-de-javascript"><span class="header-section-number">2</span> Conceptos Básicos de JavaScript</a></h1>
    <div id="introducción" class="section level2">
    <h2><a href="#introducción"><span class="header-section-number">2.1</span> Introducción</a></h2>
    <p>jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo.</p>
    <p>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.</p>
    <p>Si usted esta interesado en aprender el lenguaje más en profundidad, puede leer el libro <em>JavaScript: The Good Parts</em> escrito por Douglas Crockford.</p>
    </div>
    <div id="sintaxis-básica" class="section level2">
    <h2><a href="#sintaxis-básica"><span class="header-section-number">2.2</span> Sintaxis Básica</a></h2>
    <p>Comprensión de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis básicas de JavaScript.</p>
    <p><strong>Declaración simple de variable</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="st">&#39;hola mundo&#39;</span>;</code></pre>
    <p><strong>Los espacios en blanco no tienen valor fuera de las comillas</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo =         <span class="st">&#39;hola mundo&#39;</span>;</code></pre>
    <p><strong>Los paréntesis indican prioridad</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="dv">2</span> * <span class="dv">3</span> + <span class="dv">5</span>;    <span class="co">// es igual a 11, la multiplicación ocurre primero</span>
    <span class="dv">2</span> * (<span class="dv">3</span> + <span class="dv">5</span>);  <span class="co">// es igual a 16, por los paréntesis, la suma ocurre primero</span></code></pre>
    <p><strong>La tabulación mejora la lectura del código, pero no posee ningún significado especial</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="kw">function</span>() {
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hola&#39;</span>);
    };</code></pre>
    </div>
    <div id="operadores" class="section level2">
    <h2><a href="#operadores"><span class="header-section-number">2.3</span> Operadores</a></h2>
    <div id="operadores-básicos" class="section level3">
    <h3><a href="#operadores-básicos"><span class="header-section-number">2.3.1</span> Operadores Básicos</a></h3>
    <p>Los operadores básicos permiten manipular valores.</p>
    <p><strong>Concatenación</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="st">&#39;hola&#39;</span>;
    <span class="kw">var</span> bar = <span class="st">&#39;mundo&#39;</span>;
    
    <span class="ot">console</span>.<span class="fu">log</span>(foo + <span class="st">&#39; &#39;</span> + bar); <span class="co">// la consola de depuración muestra &#39;hola mundo&#39;</span></code></pre>
    <p><strong>Multiplicación y división</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="dv">2</span> * <span class="dv">3</span>;
    <span class="dv">2</span> / <span class="dv">3</span>;</code></pre>
    <p><strong>Incrementación y decrementación</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> i = <span class="dv">1</span>;
    
    <span class="kw">var</span> j = ++i;  <span class="co">// incrementación previa:  j es igual a 2; i es igual a 2</span>
    <span class="kw">var</span> k = i++;  <span class="co">// incrementación posterior: k es igual a 2; i es igual a 3</span></code></pre>
    </div>
    <div id="operaciones-con-números-y-cadenas-de-caracteres" class="section level3">
    <h3><a href="#operaciones-con-números-y-cadenas-de-caracteres"><span class="header-section-number">2.3.2</span> Operaciones con Números y Cadenas de Caracteres</a></h3>
    <p>En JavaScript, las operaciones con números y cadenas de caracteres (en inglés <em>strings</em>) pueden ocasionar resultados no esperados.</p>
    <p><strong>Suma vs. concatenación</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="dv">1</span>;
    <span class="kw">var</span> bar = <span class="st">&#39;2&#39;</span>;
    
    <span class="ot">console</span>.<span class="fu">log</span>(foo + bar);  <span class="co">// error: La consola de depuración muestra 12</span></code></pre>
    <p><strong>Forzar a una cadena de caracteres actuar como un número</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="dv">1</span>;
    <span class="kw">var</span> bar = <span class="st">&#39;2&#39;</span>;
    
    <span class="co">// el constructor &#39;Number&#39; obliga a la cadena comportarse como un número</span>
    <span class="ot">console</span>.<span class="fu">log</span>(foo + <span class="fu">Number</span>(bar));  <span class="co">// la consola de depuración muestra 3</span></code></pre>
    <p>El constructor <em>Number</em>, cuando es llamado como una función (como se muestra en el ejemplo) obliga a su argumento a comportarse como un número. También es posible utilizar el operador de <em>suma unaria</em>, entregando el mismo resultado:</p>
    <p><strong>Forzar a una cadena de caracteres actuar como un número (utilizando el operador de suma unaria)</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">console</span>.<span class="fu">log</span>(foo + +bar);</code></pre>
    </div>
    <div id="operadores-lógicos" class="section level3">
    <h3><a href="#operadores-lógicos"><span class="header-section-number">2.3.3</span> Operadores Lógicos</a></h3>
    <p>Los operadores lógicos permiten evaluar una serie de operandos utilizando operaciones AND y OR.</p>
    <p><strong>Operadores lógicos AND y OR</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="dv">1</span>;
    <span class="kw">var</span> bar = <span class="dv">0</span>;
    <span class="kw">var</span> baz = <span class="dv">2</span>;
    
    foo || bar;   <span class="co">// devuelve 1, el cual es verdadero (true)</span>
    bar || foo;   <span class="co">// devuelve 1, el cual es verdadero (true)</span>
    
    foo &amp;&amp; bar;   <span class="co">// devuelve 0, el cual es falso (false)</span>
    foo &amp;&amp; baz;   <span class="co">// devuelve 2, el cual es verdadero (true)</span>
    baz &amp;&amp; foo;   <span class="co">// devuelve 1, el cual es verdadero (true)</span></code></pre>
    <p>El operador <code>||</code> (OR lógico) devuelve el valor del primer operando, si éste es verdadero; caso contrario devuelve el segundo operando. Si ambos operandos son falsos devuelve falso (<em>false</em>). El operador <code>&amp;&amp;</code> (AND lógico) devuelve el valor del primer operando si éste es falso; caso contrario devuelve el segundo operando. Cuando ambos valores son verdaderos devuelve verdadero (<em>true</em>), sino devuelve falso.</p>
    <p>Puede consultar la sección <code>Elementos Verdaderos y Falsos</code> para más detalles sobre que valores se evalúan como <code>true</code> y cuales se evalúan como <code>false</code>.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Puede que a veces note que algunos desarrolladores utilizan esta lógica en flujos de control en lugar de utilizar la declaración <code>if</code>. Por ejemplo:</p>
    </blockquote>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// realizar algo con foo si foo es verdadero</span>
    foo &amp;&amp; <span class="fu">doSomething</span>(foo);
    
    <span class="co">// establecer bar igual a baz si baz es verdadero;</span>
    <span class="co">// caso contrario, establecer a bar igual al</span>
    <span class="co">// valor de createBar()</span>
    <span class="kw">var</span> bar = baz || <span class="fu">createBar</span>();</code></pre>
    <p>Este 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.</p>
    </div>
    <div id="operadores-de-comparación" class="section level3">
    <h3><a href="#operadores-de-comparación"><span class="header-section-number">2.3.4</span> Operadores de Comparación</a></h3>
    <p>Los operadores de comparación permiten comprobar si determinados valores son equivalentes o idénticos.</p>
    <p><strong>Operadores de Comparación</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="dv">1</span>;
    <span class="kw">var</span> bar = <span class="dv">0</span>;
    <span class="kw">var</span> baz = <span class="st">&#39;1&#39;</span>;
    <span class="kw">var</span> bim = <span class="dv">2</span>;
    
    foo == bar;   <span class="co">// devuelve falso (false)</span>
    foo != bar;   <span class="co">// devuelve verdadero (true)</span>
    foo == baz;   <span class="co">// devuelve verdadero (true); tenga cuidado</span>
    
    foo === baz;             <span class="co">// devuelve falso (false)</span>
    foo !== baz;             <span class="co">// devuelve verdadero (true)</span>
    foo === <span class="fu">parseInt</span>(baz);   <span class="co">// devuelve verdadero (true)</span>
    
    foo &gt; bim;    <span class="co">// devuelve falso (false)</span>
    bim &gt; baz;    <span class="co">// devuelve verdadero (true)</span>
    foo &lt;= baz;   <span class="co">// devuelve verdadero (true)</span></code></pre>
    </div>
    </div>
    <div id="código-condicional" class="section level2">
    <h2><a href="#código-condicional"><span class="header-section-number">2.4</span> Código Condicional</a></h2>
    <p>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 <code>if</code> y <code>else</code> permiten hacerlo.</p>
    <p><strong>Control del flujo</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="kw">true</span>;
    <span class="kw">var</span> bar = <span class="kw">false</span>;
    
    <span class="kw">if</span> (bar) {
      <span class="co">// este código nunca se ejecutará</span>
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hola!&#39;</span>);
    }
    
    <span class="kw">if</span> (bar) {
        <span class="co">// este código no se ejecutará</span>
    } <span class="kw">else</span> {
      <span class="kw">if</span> (foo) {
          <span class="co">// este código se ejecutará</span>
      } <span class="kw">else</span> {
          <span class="co">// este código se ejecutará si foo y bar son falsos (false)</span>
      }
    }</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>En una línea singular, cuando se escribe una declaración <code>if</code>, las llaves no son estrictamente necesarias; sin embargo es recomendable su utilización, ya que hace que el código sea mucho más legible.</p>
    </blockquote>
    <p>Debe tener en cuenta de no definir funciones con el mismo nombre múltiples veces dentro de declaraciones <code>if</code>/<code>else</code>, ya que puede obtener resultados no esperados.</p>
    <div id="elementos-verdaderos-y-falsos" class="section level3">
    <h3><a href="#elementos-verdaderos-y-falsos"><span class="header-section-number">2.4.1</span> Elementos Verdaderos y Falsos</a></h3>
    <p>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.</p>
    <p><strong>Valores que devuelven <code>verdadero (true)</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="st">&#39;0&#39;</span>;
    <span class="st">&#39;any string&#39;</span>; <span class="co">// cualquier cadena</span>
    [];  <span class="co">// un vector vacío</span>
    {};  <span class="co">// un objeto vacío</span>
    <span class="dv">1</span>;   <span class="co">// cualquier número distinto a cero</span></code></pre>
    <p><strong>Valores que devuelven <code>falso (false)</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="dv">0</span>;
    <span class="st">&#39;&#39;</span>;  <span class="co">// una cadena vacía</span>
    <span class="kw">NaN</span>; <span class="co">// la variable JavaScript &quot;not-a-number&quot; (No es un número)</span>
    <span class="kw">null</span>; <span class="co">// un valor nulo</span>
    <span class="kw">undefined</span>;  <span class="co">// tenga cuidado -- indefinido (undefined) puede ser redefinido</span></code></pre>
    </div>
    <div id="variables-condicionales-utilizando-el-operador-ternario" class="section level3">
    <h3><a href="#variables-condicionales-utilizando-el-operador-ternario"><span class="header-section-number">2.4.2</span> Variables Condicionales Utilizando el Operador Ternario</a></h3>
    <p>A veces se desea establecer el valor de una variable dependiendo de cierta condición. Para hacerlo se puede utilizar una declaración <code>if</code>/<code>else</code>, sin embargo en muchos casos es más conveniente utilizar el operador ternario. [Definición: El <em>operador ternario</em> evalúa una condición; si la condición es verdadera, devuelve cierto valor, caso contrario devuelve un valor diferente.]</p>
    <p><strong>El operador ternario</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// establecer a foo igual a 1 si bar es verdadero;</span>
    <span class="co">// caso contrario, establecer a foo igual a 0</span>
    <span class="kw">var</span> foo = bar ? <span class="dv">1</span> : <span class="dv">0</span>;</code></pre>
    <p>El operador ternario puede ser utilizado sin devolver un valor a la variable, sin embargo este uso generalmente es desaprobado.</p>
    </div>
    <div id="declaración-switch" class="section level3">
    <h3><a href="#declaración-switch"><span class="header-section-number">2.4.3</span> Declaración Switch</a></h3>
    <p>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 <code>switch</code>. [Definición: La declaración <code>Switch</code> evalúa el valor de una variable o expresión, y ejecuta diferentes bloques de código dependiendo de ese valor.]</p>
    <p><strong>Una declaración Switch</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">switch</span> (foo) {
    
      <span class="kw">case</span> <span class="st">&#39;bar&#39;</span>:
          <span class="fu">alert</span>(<span class="st">&#39;el valor es bar&#39;</span>);
      <span class="kw">break</span>;
    
      <span class="kw">case</span> <span class="st">&#39;baz&#39;</span>:
          <span class="fu">alert</span>(<span class="st">&#39;el valor es baz&#39;</span>);
      <span class="kw">break</span>;
    
      <span class="kw">default</span>:
          <span class="fu">alert</span>(<span class="st">&#39;de forma predeterminada se ejecutará este código&#39;</span>);
      <span class="kw">break</span>;
    
    }</code></pre>
    <p>Las declaraciones <code>switch</code> son poco utilizadas en JavaScript, debido a que el mismo comportamiento es posible obtenerlo creando un objeto, el cual posee más potencial ya que es posible reutilizarlo, usarlo para realizar pruebas, etc. Por ejemplo:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> stuffToDo = {
      <span class="st">&#39;bar&#39;</span> : <span class="kw">function</span>() {
          <span class="fu">alert</span>(<span class="st">&#39;el valor es bar&#39;</span>);
      },
    
      <span class="st">&#39;baz&#39;</span> : <span class="kw">function</span>() {
          <span class="fu">alert</span>(<span class="st">&#39;el valor es baz&#39;</span>);
      },
    
      <span class="st">&#39;default&#39;</span> : <span class="kw">function</span>() {
          <span class="fu">alert</span>(<span class="st">&#39;de forma predeterminada se ejecutará este código&#39;</span>);
      }
    };
    
    <span class="kw">if</span> (stuffToDo[foo]) {
      stuffToDo[foo]();
    } <span class="kw">else</span> {
      stuffToDo[<span class="st">&#39;default&#39;</span>]();
    }</code></pre>
    <p>Más adelante se abarcará el concepto de objetos.</p>
    </div>
    </div>
    <div id="bucles" class="section level2">
    <h2><a href="#bucles"><span class="header-section-number">2.5</span> Bucles</a></h2>
    <p>Los bucles (en inglés <em>loops</em>) permiten ejecutar un bloque de código un determinado número de veces.</p>
    <p><strong>Bucles</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// muestra en la consola &#39;intento 0&#39;, &#39;intento 1&#39;, ..., &#39;intento 4&#39;</span>
    <span class="kw">for</span> (<span class="kw">var</span> i=<span class="dv">0</span>; i&lt;<span class="dv">5</span>; i++) {
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;intento &#39;</span> + i);
    }</code></pre>
    <p>*Note que en el ejemplo se utiliza la palabra var antes de la variable <code class="varname">i</code>, esto hace que dicha variable quede dentro del “alcance” (en inglés <em>scope</em>) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.*</p>
    <div id="bucles-utilizando-for" class="section level3">
    <h3><a href="#bucles-utilizando-for"><span class="header-section-number">2.5.1</span> Bucles Utilizando For</a></h3>
    <p>Un bucle utilizando <code>for</code> se compone de cuatro estados y posee la siguiente estructura:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">for</span> ([expresiónInicial]; [condición]; [incrementoDeLaExpresión])
     [cuerpo]</code></pre>
    <p>El estado <em>expresiónInicial</em> es ejecutado una sola vez, antes que el bucle comience. éste otorga la oportunidad de preparar o declarar variables.</p>
    <p>El estado <em>condición</em> es ejecutado antes de cada repetición, y retorna un valor que decide si el bucle debe continuar ejecutándose o no. Si el estado condicional evalúa un valor falso el bucle se detiene.</p>
    <p>El estado <em>incrementoDeLaExpresión</em> es ejecutado al final de cada repetición y otorga la oportunidad de cambiar el estado de importantes variables. Por lo general, este estado implica la incrementación o decrementación de un contador.</p>
    <p>El <em>cuerpo</em> es el código a ejecutar en cada repetición del bucle.</p>
    <p><strong>Un típico bucle utilizando <code>for</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>, limit = <span class="dv">100</span>; i &lt; limit; i++) {
      <span class="co">// Este bloque de código será ejecutado 100 veces</span>
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Actualmente en &#39;</span> + i);
      <span class="co">// Nota: el último registro que se mostrará</span>
      <span class="co">// en la consola será &quot;Actualmente en 99&quot;</span>
    }</code></pre>
    </div>
    <div id="bucles-utilizando-while" class="section level3">
    <h3><a href="#bucles-utilizando-while"><span class="header-section-number">2.5.2</span> Bucles Utilizando While</a></h3>
    <p>Un bucle utilizando <code>while</code> es similar a una declaración condicional <code>if</code>, excepto que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea falsa.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">while</span> ([condición]) [cuerpo]</code></pre>
    <p><strong>Un típico bucle utilizando <code>while</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> i = <span class="dv">0</span>;
    <span class="kw">while</span> (i &lt; <span class="dv">100</span>) {
      <span class="co">// Este bloque de código se ejecutará 100 veces</span>
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Actualmente en &#39;</span> + i);
      i++; <span class="co">// incrementa la variable i</span>
    }</code></pre>
    <p>Puede notar que en el ejemplo se incrementa el contador dentro del cuerpo del bucle, pero también es posible combinar la condición y la incrementación, como se muestra a continuación:</p>
    <p><strong>Bucle utilizando <code>while</code> con la combinación de la condición y la incrementación</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> i = -<span class="dv">1</span>;
    <span class="kw">while</span> (++i &lt; <span class="dv">100</span>) {
      <span class="co">// Este bloque de código se ejecutará 100 veces</span>
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Actualmente en &#39;</span> + i);
    }</code></pre>
    <p>Se comienza en <code>-1</code> y luego se utiliza la incrementación previa (<code>++i</code>).</p>
    </div>
    <div id="bucles-utilizando-do-while" class="section level3">
    <h3><a href="#bucles-utilizando-do-while"><span class="header-section-number">2.5.3</span> Bucles Utilizando Do-while</a></h3>
    <p>Este bucle es exactamente igual que el bucle utilizando <code>while</code> excepto que el cuerpo es ejecutado al menos una vez antes que la condición sea evaluada.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">do</span> [cuerpo] <span class="kw">while</span> ([condición])</code></pre>
    <p><strong>Un bucle utilizando <code>do-while</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">do</span> {
    
      <span class="co">// Incluso cuando la condición sea falsa</span>
      <span class="co">// el cuerpo del bucle se ejecutará al menos una vez.</span>
    
      <span class="fu">alert</span>(<span class="st">&#39;Hola&#39;</span>);
    
    } <span class="kw">while</span> (<span class="kw">false</span>);</code></pre>
    <p>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.</p>
    </div>
    <div id="break-y-continue" class="section level3">
    <h3><a href="#break-y-continue"><span class="header-section-number">2.5.4</span> Break y Continue</a></h3>
    <p>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 <code>break</code> dentro del cuerpo.</p>
    <p><strong>Detener un bucle con break</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>; i &lt; <span class="dv">10</span>; i++) {
      <span class="kw">if</span> (something) {
          <span class="kw">break</span>;
      }
    }</code></pre>
    <p>También puede suceder que quiera continuar con el bucle sin tener que ejecutar más sentencias del cuerpo del mismo bucle. Esto puede realizarse utilizando la declaración <code>continue</code>.</p>
    <p><strong>Saltar a la siguiente iteración de un bucle</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>; i &lt; <span class="dv">10</span>; i++) {
    
      <span class="kw">if</span> (something) {
          <span class="kw">continue</span>;
      }
    
      <span class="co">// La siguiente declaración será ejecutada</span>
      <span class="co">// si la condición &#39;something&#39; no se cumple</span>
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola&#39;</span>);
    
    }</code></pre>
    </div>
    </div>
    <div id="palabras-reservadas" class="section level2">
    <h2><a href="#palabras-reservadas"><span class="header-section-number">2.6</span> Palabras Reservadas</a></h2>
    <p>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.</p>
    <ul>
    <li><code>abstract</code></li>
    <li><code>boolean</code></li>
    <li><code>break</code></li>
    <li><code>byte</code></li>
    <li><code>case</code></li>
    <li><code>catch</code></li>
    <li><code>char</code></li>
    <li><code>class</code></li>
    <li><code>const</code></li>
    <li><code>continue</code></li>
    <li><code>debugger</code></li>
    <li><code>default</code></li>
    <li><code>delete</code></li>
    <li><code>do</code></li>
    <li><code>double</code></li>
    <li><code>else</code></li>
    <li><code>enum</code></li>
    <li><code>export</code></li>
    <li><code>extends</code></li>
    <li><code>final</code></li>
    <li><code>finally</code></li>
    <li><code>float</code></li>
    <li><code>for</code></li>
    <li><code>function</code></li>
    <li><code>goto</code></li>
    <li><code>if</code></li>
    <li><code>implements</code></li>
    <li><code>import</code></li>
    <li><code>in</code></li>
    <li><code>instanceof</code></li>
    <li><code>int</code></li>
    <li><code>interface</code></li>
    <li><code>long</code></li>
    <li><code>native</code></li>
    <li><code>new</code></li>
    <li><code>package</code></li>
    <li><code>private</code></li>
    <li><code>protected</code></li>
    <li><code>public</code></li>
    <li><code>return</code></li>
    <li><code>short</code></li>
    <li><code>static</code></li>
    <li><code>super</code></li>
    <li><code>switch</code></li>
    <li><code>synchronized</code></li>
    <li><code>this</code></li>
    <li><code>throw</code></li>
    <li><code>throws</code></li>
    <li><code>transient</code></li>
    <li><code>try</code></li>
    <li><code>typeof</code></li>
    <li><code>var</code></li>
    <li><code>void</code></li>
    <li><code>volatile</code></li>
    <li><code>while</code></li>
    <li><code>with</code></li>
    </ul>
    </div>
    <div id="vectores" class="section level2">
    <h2><a href="#vectores"><span class="header-section-number">2.7</span> Vectores</a></h2>
    <p>Los vectores (en español también llamados <em>matrices</em> o <em>arreglos</em> y en inglés <em>arrays</em>) son listas de valores con índice-cero (en inglés <em>zero-index</em>), 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.</p>
    <p><strong>Un vector simple</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;hola&#39;</span>, <span class="st">&#39;mundo&#39;</span> ];</code></pre>
    <p><strong>Acceder a los ítems del vector a través de su índice</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;hola&#39;</span>, <span class="st">&#39;mundo&#39;</span>, <span class="st">&#39;foo&#39;</span>, <span class="st">&#39;bar&#39;</span> ];
    <span class="ot">console</span>.<span class="fu">log</span>(myArray[<span class="dv">3</span>]);   <span class="co">// muestra en la consola &#39;bar&#39;</span></code></pre>
    <p><strong>Obtener la cantidad de ítems del vector</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;hola&#39;</span>, <span class="st">&#39;mundo&#39;</span> ];
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">myArray</span>.<span class="fu">length</span>);   <span class="co">// muestra en la consola 2</span></code></pre>
    <p><strong>Cambiar el valor de un ítem de un vector</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;hola&#39;</span>, <span class="st">&#39;mundo&#39;</span> ];
    myArray[<span class="dv">1</span>] = <span class="st">&#39;changed&#39;</span>;</code></pre>
    <p><em>Como se muestra en el ejemplo “Cambiar el valor de un ítem de un vector” es posible cambiar el valor de un ítem de un vector, sin embargo, por lo general, no es aconsejable.</em></p>
    <p><strong>Añadir elementos a un vector</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;hola&#39;</span>, <span class="st">&#39;mundo&#39;</span> ];
    <span class="ot">myArray</span>.<span class="fu">push</span>(<span class="st">&#39;new&#39;</span>);</code></pre>
    <p><strong>Trabajar con vectores</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="st">&#39;h&#39;</span>, <span class="st">&#39;o&#39;</span>, <span class="st">&#39;l&#39;</span>, <span class="st">&#39;a&#39;</span> ];
    <span class="kw">var</span> myString = <span class="ot">myArray</span>.<span class="fu">join</span>(<span class="st">&#39;&#39;</span>);   <span class="co">// &#39;hola&#39;</span>
    <span class="kw">var</span> mySplit = <span class="ot">myString</span>.<span class="fu">split</span>(<span class="st">&#39;&#39;</span>);  <span class="co">// [ &#39;h&#39;, &#39;o&#39;, &#39;l&#39;, &#39;a&#39; ]</span></code></pre>
    </div>
    <div id="objetos" class="section level2">
    <h2><a href="#objetos"><span class="header-section-number">2.8</span> Objetos</a></h2>
    <p>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.</p>
    <p>[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un <em>método</em> del objeto.] De lo contrario, se los llama <em>propiedades</em>.</p>
    <p>Curiosamente, en JavaScript, casi todo es un objeto — vectores, funciones, números, incluso cadenas — y todos poseen propiedades y métodos.</p>
    <p><strong>Creación de un “objeto literal”</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myObject = {
      <span class="dt">sayHello</span>: <span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hola&#39;</span>);
      },
    
      <span class="dt">myName</span>: <span class="st">&#39;Rebecca&#39;</span>
    };
    
    <span class="ot">myObject</span>.<span class="fu">sayHello</span>();   <span class="co">// se llama al método sayHello,</span>
                           <span class="co">// el cual muestra en la consola &#39;hola&#39;</span>
    
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">myObject</span>.<span class="fu">myName</span>);    <span class="co">// se llama a la propiedad myName,</span>
                                     <span class="co">// la cual muestra en la consola &#39;Rebecca&#39;</span></code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Notar que cuando se crean objetos literales, el nombre de la propiedad puede ser cualquier identificador JavaScript, una cadena de caracteres (encerrada entre comillas) o un número:</p>
    </blockquote>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myObject = {
        <span class="dt">validIdentifier</span>: <span class="dv">123</span>,
        <span class="st">&#39;some string&#39;</span>: <span class="dv">456</span>,
        <span class="dv">99999</span>: <span class="dv">789</span>
    };</code></pre>
    <p>Los 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) <a href="http://blog.rebeccamurphey.com/2009/10/15/using-objects-to-organize-your-code/">Using Objects to Organize Your Code</a> por Rebecca Murphey.</p>
    </div>
    <div id="funciones" class="section level2">
    <h2><a href="#funciones"><span class="header-section-number">2.9</span> Funciones</a></h2>
    <p>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.</p>
    <p>Las funciones pueden ser creadas de varias formas:</p>
    <p><strong>Declaración de una función</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">foo</span>() { <span class="co">/* hacer algo */</span> }</code></pre>
    <p><strong>Declaración de una función nombrada</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="kw">function</span>() { <span class="co">/* hacer algo */</span> }</code></pre>
    <p><em>Es preferible el método de función nombrada debido a algunas</em> <em><a href="http://yura.thinkweb2.com/named-function-expressions/">profundas razones técnicas</a>. Igualmente, es probable encontrar a los dos métodos cuando se revise código JavaScript.</em></p>
    <div id="utilización-de-funciones" class="section level3">
    <h3><a href="#utilización-de-funciones"><span class="header-section-number">2.9.1</span> Utilización de Funciones</a></h3>
    <p><strong>Una función simple</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> greet = <span class="kw">function</span>(person, greeting) {
      <span class="kw">var</span> text = greeting + <span class="st">&#39;, &#39;</span> + person;
      <span class="ot">console</span>.<span class="fu">log</span>(text);
    };
    
    
    <span class="fu">greet</span>(<span class="st">&#39;Rebecca&#39;</span>, <span class="st">&#39;Hola&#39;</span>);  <span class="co">// muestra en la consola &#39;Hola, Rebecca&#39;</span></code></pre>
    <p><strong>Una función que devuelve un valor</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> greet = <span class="kw">function</span>(person, greeting) {
      <span class="kw">var</span> text = greeting + <span class="st">&#39;, &#39;</span> + person;
      <span class="kw">return</span> text;
    };
    
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="fu">greet</span>(<span class="st">&#39;Rebecca&#39;</span>,<span class="st">&#39;Hola&#39;</span>));   <span class="co">// la función devuelve &#39;Hola, Rebecca&#39;,</span>
                                             <span class="co">// la cual se muestra en la consola</span></code></pre>
    <p><strong>Una función que devuelve otra función</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> greet = <span class="kw">function</span>(person, greeting) {
      <span class="kw">var</span> text = greeting + <span class="st">&#39;, &#39;</span> + person;
      <span class="kw">return</span> <span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(text); };
    };
    
    
    <span class="kw">var</span> greeting = <span class="fu">greet</span>(<span class="st">&#39;Rebecca&#39;</span>, <span class="st">&#39;Hola&#39;</span>);
    <span class="fu">greeting</span>();  <span class="co">// se muestra en la consola &#39;Hola, Rebecca&#39;</span></code></pre>
    </div>
    <div id="funciones-anónimas-autoejecutables" class="section level3">
    <h3><a href="#funciones-anónimas-autoejecutables"><span class="header-section-number">2.9.2</span> Funciones Anónimas Autoejecutables</a></h3>
    <p>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.</p>
    <p><strong>Función anónima autoejecutable</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>(){
      <span class="kw">var</span> foo = <span class="st">&#39;Hola mundo&#39;</span>;
    })();
    
    
    <span class="ot">console</span>.<span class="fu">log</span>(foo);   <span class="co">// indefinido (undefined)</span></code></pre>
    </div>
    <div id="funciones-como-argumentos" class="section level3">
    <h3><a href="#funciones-como-argumentos"><span class="header-section-number">2.9.3</span> Funciones como Argumentos</a></h3>
    <p>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.</p>
    <p><strong>Pasar una función anónima como un argumento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFn = <span class="kw">function</span>(fn) {
      <span class="kw">var</span> result = <span class="fu">fn</span>();
      <span class="ot">console</span>.<span class="fu">log</span>(result);
    };
    
    <span class="fu">myFn</span>(<span class="kw">function</span>() { <span class="kw">return</span> <span class="st">&#39;hola mundo&#39;</span>; });   <span class="co">// muestra en la consola &#39;hola mundo&#39;</span></code></pre>
    <p><strong>Pasar una función nombrada como un argumento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFn = <span class="kw">function</span>(fn) {
      <span class="kw">var</span> result = <span class="fu">fn</span>();
      <span class="ot">console</span>.<span class="fu">log</span>(result);
    };
    
    <span class="kw">var</span> myOtherFn = <span class="kw">function</span>() {
        <span class="kw">return</span> <span class="st">&#39;hola mundo&#39;</span>;
    };
    
    <span class="fu">myFn</span>(myOtherFn);   <span class="co">// muestra en la consola &#39;hola mundo&#39;</span></code></pre>
    </div>
    </div>
    <div id="determinación-del-tipo-de-variable" class="section level2">
    <h2><a href="#determinación-del-tipo-de-variable"><span class="header-section-number">2.10</span> Determinación del Tipo de Variable</a></h2>
    <p>JavaScript ofrece una manera de poder comprobar el “tipo” (en inglés <em>type</em>) de una variable. Sin embargo, el resultado puede ser confuso — por ejemplo, el tipo de un vector es “object”.</p>
    <p>Por eso, es una práctica común utilizar el operador <code>typeof</code> cuando se trata de determinar el tipo de un valor específico.</p>
    <p><strong>Determinar el tipo en diferentes variables</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFunction = <span class="kw">function</span>() {
      <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hola&#39;</span>);
    };
    
    <span class="kw">var</span> myObject = {
        <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span>
    };
    
    <span class="kw">var</span> myArray = [ <span class="st">&#39;a&#39;</span>, <span class="st">&#39;b&#39;</span>, <span class="st">&#39;c&#39;</span> ];
    
    <span class="kw">var</span> myString = <span class="st">&#39;hola&#39;</span>;
    
    <span class="kw">var</span> myNumber = <span class="dv">3</span>;
    
    <span class="kw">typeof</span> myFunction;   <span class="co">// devuelve &#39;function&#39;</span>
    <span class="kw">typeof</span> myObject;     <span class="co">// devuelve &#39;object&#39;</span>
    <span class="kw">typeof</span> myArray;      <span class="co">// devuelve &#39;object&#39; -- tenga cuidado</span>
    <span class="kw">typeof</span> myString;     <span class="co">// devuelve &#39;string&#39;</span>
    <span class="kw">typeof</span> myNumber;     <span class="co">// devuelve &#39;number&#39;</span>
    
    <span class="kw">typeof</span> <span class="kw">null</span>;         <span class="co">// devuelve &#39;object&#39; -- tenga cuidado</span>
    
    
    <span class="kw">if</span> (<span class="ot">myArray</span>.<span class="fu">push</span> &amp;&amp; <span class="ot">myArray</span>.<span class="fu">slice</span> &amp;&amp; <span class="ot">myArray</span>.<span class="fu">join</span>) {
        <span class="co">// probablemente sea un vector</span>
        <span class="co">// (este estilo es llamado, en inglés, &quot;duck typing&quot;)</span>
    }
    
    <span class="kw">if</span> (<span class="ot">Object</span>.<span class="ot">prototype</span>.<span class="ot">toString</span>.<span class="fu">call</span>(myArray) === <span class="st">&#39;[object Array]&#39;</span>) {
        <span class="co">// definitivamente es un vector;</span>
        <span class="co">// esta es considerada la forma más robusta</span>
        <span class="co">// de determinar si un valor es un vector.</span>
    }</code></pre>
    <p>jQuery ofrece métodos para ayudar a determinar el tipo de un determinado valor. Estos métodos serán vistos más adelante.</p>
    </div>
    <div id="la-palabra-clave-this" class="section level2">
    <h2><a href="#la-palabra-clave-this"><span class="header-section-number">2.11</span> La palabra clave <code>this</code></a></h2>
    <p>En JavaScript, así como en la mayoría de los lenguajes de programación orientados a objetos, <code>this</code> es una palabra clave especial que hace referencia al objeto en donde el método está siendo invocado. El valor de <code>this</code> es determinado utilizando una serie de simples pasos:</p>
    <ol style="list-style-type: decimal">
    <li>Si la función es invocada utilizando <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> o <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a>, <code>this</code> tendrá el valor del primer argumento pasado al método. Si el argumento es nulo (<em>null</em>) o indefinido (<em>undefined</em>), <code>this</code> hará referencia el objeto global (el objeto <code>window</code>);</li>
    <li>Si la función a invocar es creada utilizando <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function.bind</a>, <code>this</code> será el primer argumento que es pasado a la función en el momento en que se la crea;</li>
    <li>Si la función es invocada como un método de un objeto, <code>this</code> referenciará a dicho objeto;</li>
    <li>De lo contrario, si la función es invocada como una función independiente, no unida a algún objeto, <code>this</code> referenciará al objeto global.</li>
    </ol>
    <p><strong>Una función invocada utilizando Function.call</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myObject = {
      <span class="dt">sayHello </span>: <span class="kw">function</span>() {
          <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola, mi nombre es &#39;</span> + <span class="kw">this</span>.<span class="fu">myName</span>);
      },
    
      <span class="dt">myName </span>: <span class="st">&#39;Rebecca&#39;</span>
    };
    
    <span class="kw">var</span> secondObject = {
      <span class="dt">myName </span>: <span class="st">&#39;Colin&#39;</span>
    };
    
    <span class="ot">myObject</span>.<span class="fu">sayHello</span>();                  <span class="co">// registra &#39;Hola, mi nombre es Rebecca&#39;</span>
    <span class="ot">myObject</span>.<span class="ot">sayHello</span>.<span class="fu">call</span>(secondObject); <span class="co">// registra &#39;Hola, mi nombre es Colin&#39;</span></code></pre>
    <p><strong>Una función creada utilizando Function.bind</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myName = <span class="st">&#39;el objeto global&#39;</span>,
    
      sayHello = <span class="kw">function</span> () {
          <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola, mi nombre es &#39;</span> + <span class="kw">this</span>.<span class="fu">myName</span>);
      },
    
      myObject = {
          <span class="dt">myName </span>: <span class="st">&#39;Rebecca&#39;</span>
      };
    
    <span class="kw">var</span> myObjectHello = <span class="ot">sayHello</span>.<span class="fu">bind</span>(myObject);
    
    <span class="fu">sayHello</span>();       <span class="co">// registra &#39;Hola, mi nombre es el objeto global&#39;</span>
    <span class="fu">myObjectHello</span>();  <span class="co">// registra &#39;Hola, mi nombre es Rebecca&#39;</span></code></pre>
    <p><strong>Una función vinculada a un objeto</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myName = <span class="st">&#39;el objeto global&#39;</span>,
    
      sayHello = <span class="kw">function</span>() {
          <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola, mi nombre es &#39;</span> + <span class="kw">this</span>.<span class="fu">myName</span>);
      },
    
      myObject = {
          <span class="dt">myName </span>: <span class="st">&#39;Rebecca&#39;</span>
      },
    
      secondObject = {
          <span class="dt">myName </span>: <span class="st">&#39;Colin&#39;</span>
      };
    
    <span class="ot">myObject</span>.<span class="fu">sayHello</span> = sayHello;
    <span class="ot">secondObject</span>.<span class="fu">sayHello</span> = sayHello;
    
    <span class="fu">sayHello</span>();               <span class="co">// registra &#39;Hola, mi nombre es el objeto global&#39;</span>
    <span class="ot">myObject</span>.<span class="fu">sayHello</span>();      <span class="co">// registra &#39;Hola, mi nombre es Rebecca&#39;</span>
    <span class="ot">secondObject</span>.<span class="fu">sayHello</span>();  <span class="co">// registra &#39;Hola, mi nombre es Colin&#39;</span></code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>En algunas oportunidades, cuando se invoca una función que se encuentra dentro de un espacio de nombres (en inglés <em>namespace</em>) amplio, puede ser una tentación guardar la referencia a la función actual en una variable más corta y accesible. Sin embargo, es importante no realizarlo en instancias de métodos, ya que puede llevar a la ejecución de código incorrecto. Por ejemplo:</p>
    </blockquote>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myNamespace = {
      <span class="dt">myObject</span>: {
        <span class="dt">sayHello</span>: <span class="kw">function</span>() {
          <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola, mi nombre es &#39;</span> + <span class="kw">this</span>.<span class="fu">myName</span>);
        },
    
        <span class="dt">myName</span>: <span class="st">&#39;Rebecca&#39;</span>
      }
    };
    
    <span class="kw">var</span> hello = <span class="ot">myNamespace</span>.<span class="ot">myObject</span>.<span class="fu">sayHello</span>;
    
    <span class="fu">hello</span>();  <span class="co">// registra &#39;Hola, mi nombre es undefined&#39;</span></code></pre>
    <p>Para que no ocurran estos errores, es necesario hacer referencia al objeto en donde el método es invocado:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myNamespace = {
      <span class="dt">myObject </span>: {
        <span class="dt">sayHello </span>: <span class="kw">function</span>() {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Hola, mi nombre es &#39;</span> + <span class="kw">this</span>.<span class="fu">myName</span>);
        },
    
        <span class="dt">myName </span>: <span class="st">&#39;Rebecca&#39;</span>
      }
    };
    
    <span class="kw">var</span> obj = <span class="ot">myNamespace</span>.<span class="fu">myObject</span>;
    
    <span class="ot">obj</span>.<span class="fu">sayHello</span>();  <span class="co">// registra &#39;Hola, mi nombre es Rebecca&#39;</span></code></pre>
    </div>
    <div id="alcance" class="section level2">
    <h2><a href="#alcance"><span class="header-section-number">2.12</span> Alcance</a></h2>
    <p>El “alcance” (en inglés <em>scope</em>) 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.</p>
    <p>Cuando una variable es declarada dentro de una función utilizando la palabra clave <code>var</code>, é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 <em>dentro</em> de la función <em>podrán</em> acceder a la variable declarada.</p>
    <p>Las variables que son declaradas dentro de la función sin la palabra clave <code>var</code> 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;</p>
    <p><strong>Funciones tienen acceso a variables definidas dentro del mismo alcance</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="st">&#39;hola&#39;</span>;
    
    <span class="kw">var</span> sayHello = <span class="kw">function</span>() {
      <span class="ot">console</span>.<span class="fu">log</span>(foo);
    };
    
    <span class="fu">sayHello</span>();         <span class="co">// muestra en la consola &#39;hola&#39;</span>
    <span class="ot">console</span>.<span class="fu">log</span>(foo);   <span class="co">// también muestra en la consola &#39;hola&#39;</span></code></pre>
    <p><strong>El código de afuera no tiene acceso a la variable definida dentro de la función</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> sayHello = <span class="kw">function</span>() {
      <span class="kw">var</span> foo = <span class="st">&#39;hola&#39;</span>;
      <span class="ot">console</span>.<span class="fu">log</span>(foo);
    };
    
    <span class="fu">sayHello</span>();         <span class="co">// muestra en la consola &#39;hola&#39;</span>
    <span class="ot">console</span>.<span class="fu">log</span>(foo);   <span class="co">// no muestra nada en la consola</span></code></pre>
    <p><strong>Variables con nombres iguales pero valores diferentes pueden existir en diferentes alcances</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="st">&#39;mundo&#39;</span>;
    
    <span class="kw">var</span> sayHello = <span class="kw">function</span>() {
      <span class="kw">var</span> foo = <span class="st">&#39;hola&#39;</span>;
      <span class="ot">console</span>.<span class="fu">log</span>(foo);
    };
    
    <span class="fu">sayHello</span>();         <span class="co">// muestra en la consola &#39;hola&#39;</span>
    <span class="ot">console</span>.<span class="fu">log</span>(foo);   <span class="co">// muestra en la consola &#39;mundo&#39;</span></code></pre>
    <p><strong>Las funciones pueden “ver” los cambios en las variables antes de que la función sea definida</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFunction = <span class="kw">function</span>() {
      <span class="kw">var</span> foo = <span class="st">&#39;hola&#39;</span>;
    
      <span class="kw">var</span> myFn = <span class="kw">function</span>() {
          <span class="ot">console</span>.<span class="fu">log</span>(foo);
      };
    
      foo = <span class="st">&#39;mundo&#39;</span>;
    
      <span class="kw">return</span> myFn;
    };
    
    <span class="kw">var</span> f = <span class="fu">myFunction</span>();
    <span class="fu">f</span>();  <span class="co">// registra &#39;mundo&#39; -- error</span></code></pre>
    <p><strong>Alcance</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// una función anónima autoejecutable</span>
    (<span class="kw">function</span>() {
      <span class="kw">var</span> baz = <span class="dv">1</span>;
      <span class="kw">var</span> bim = <span class="kw">function</span>() { <span class="fu">alert</span>(baz); };
      bar = <span class="kw">function</span>() { <span class="fu">alert</span>(baz); };
    })();
    
    <span class="ot">console</span>.<span class="fu">log</span>(baz);  <span class="co">// La consola no muestra nada, ya que baz</span>
                       <span class="co">// esta definida dentro del alcance de la función anónima</span>
    
    <span class="fu">bar</span>();  <span class="co">// bar esta definido fuera de la función anónima</span>
            <span class="co">// ya que fue declarada sin la palabra clave var; además,</span>
            <span class="co">// como fue definida dentro del mismo alcance que baz,</span>
            <span class="co">// se puede consultar el valor de baz a pesar que</span>
            <span class="co">// ésta este definida dentro del alcance de la función anónima</span>
    
    <span class="fu">bim</span>();  <span class="co">// bim no esta definida para ser accesible fuera de la función anónima,</span>
            <span class="co">// por lo cual se mostrará un error</span></code></pre>
    </div>
    <div id="clausuras" class="section level2">
    <h2><a href="#clausuras"><span class="header-section-number">2.13</span> Clausuras</a></h2>
    <p>Las clausuras (en inglés <em>closures</em>) son una extensión del concepto de alcance (<em>scope</em>) — 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.</p>
    <p>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.</p>
    <p><strong>¿Cómo establecer el valor de <code>i</code>?</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">/* esto no se comporta como se desea; */</span>
    <span class="co">/* cada click mostrará una ventana de alerta con el valor 5 */</span>
    <span class="kw">for</span> (<span class="kw">var</span> i=<span class="dv">0</span>; i&lt;<span class="dv">5</span>; i++) {
      <span class="fu">$</span>(<span class="st">&#39;&lt;p&gt;hacer click&lt;/p&gt;&#39;</span>).<span class="fu">appendTo</span>(<span class="st">&#39;body&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
          <span class="fu">alert</span>(i);
      });
    }</code></pre>
    <p><strong>Establecer el valor de <code>i</code> utilizando una clausura</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">/* solución: “clausurar” el valor de i dentro de createFunction */</span>
    <span class="kw">var</span> createFunction = <span class="kw">function</span>(i) {
      <span class="kw">return</span> <span class="kw">function</span>() {
        <span class="fu">alert</span>(i);
      };
    };
    
    <span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>; i &lt; <span class="dv">5</span>; i++) {
      <span class="fu">$</span>(<span class="st">&#39;&lt;p&gt;hacer click&lt;/p&gt;&#39;</span>).<span class="fu">appendTo</span>(<span class="st">&#39;body&#39;</span>).<span class="fu">click</span>(<span class="fu">createFunction</span>(i));
    }</code></pre>
    <p>Las clausuras también pueden ser utilizadas para resolver problemas con la palabra clave <code>this</code>, la cual es única en cada alcance.</p>
    <p><strong>Utilizar una clausura para acceder simultáneamente a instancias de objetos internos y externos.</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> outerObj = {
      <span class="dt">myName</span>: <span class="st">&#39;externo&#39;</span>,
      <span class="dt">outerFunction</span>: <span class="kw">function</span>() {
    
        <span class="co">// provee una referencia al mismo objeto outerObj</span>
        <span class="co">// para utilizar dentro de innerFunction</span>
        <span class="kw">var</span> self = <span class="kw">this</span>;
    
        <span class="kw">var</span> innerObj = {
          <span class="dt">myName</span>: <span class="st">&#39;interno&#39;</span>,
          <span class="dt">innerFunction</span>: <span class="kw">function</span>() {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">self</span>.<span class="fu">myName</span>, <span class="kw">this</span>.<span class="fu">myName</span>); <span class="co">// registra &#39;externo interno&#39;</span>
          }
        };
    
        <span class="ot">innerObj</span>.<span class="fu">innerFunction</span>();
    
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="kw">this</span>.<span class="fu">myName</span>); <span class="co">// registra &#39;externo&#39;</span>
      }
    };
    
    <span class="ot">outerObj</span>.<span class="fu">outerFunction</span>();</code></pre>
    <p>Este mecanismo puede ser útil cuando trabaje con funciones de devolución de llamadas (en inglés <em>callbacks</em>). Sin embargo, en estos casos, es preferible que utilice <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function.bind</a> ya que evitará cualquier sobrecarga asociada con el alcance (<em>scope</em>).</p>
    </div>
    </div>
    <div id="conceptos-básicos-de-jquery" class="section level1">
    <h1><a href="#conceptos-básicos-de-jquery"><span class="header-section-number">3</span> Conceptos Básicos de jQuery</a></h1>
    <div id="document.ready" class="section level2">
    <h2><a href="#document.ready"><span class="header-section-number">3.1</span> $(document).ready()</a></h2>
    <p>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 <code>$(document).ready()</code> de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.</p>
    <p><strong>El bloque $(document).ready()</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;el documento está preparado&#39;</span>);
    });</code></pre>
    <p>Existe una forma abreviada para <code>$(document).ready()</code> la cual podrá encontrar algunas veces; sin embargo, es recomendable no utilizarla en caso que este escribiendo código para gente que no conoce jQuery.</p>
    <p><strong>Forma abreviada para $(document).ready()</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;el documento está preparado&#39;</span>);
    });</code></pre>
    <p>Además es posible pasarle a <code>$(document).ready()</code> una función nombrada en lugar de una anónima:</p>
    <p><strong>Pasar una función nombrada en lugar de una función anónima</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="fu">readyFn</span>() {
        <span class="co">// código a ejecutar cuando el documento este listo</span>
    }
    
    
    <span class="fu">$</span>(document).<span class="fu">ready</span>(readyFn);</code></pre>
    </div>
    <div id="selección-de-elementos" class="section level2">
    <h2><a href="#selección-de-elementos"><span class="header-section-number">3.2</span> Selección de Elementos</a></h2>
    <p>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 <a href="http://api.jquery.com/category/selectors/">http://api.jquery.com/category/selectors/</a> se puede encontrar una completa referencia sobre los selectores de la biblioteca.</p>
    <p>A continuación se muestran algunas técnicas comunes para la selección de elementos:</p>
    <p><strong>Selección de elementos en base a su ID</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myId&#39;</span>); <span class="co">// notar que los IDs deben ser únicos por página</span></code></pre>
    <p><strong>Selección de elementos en base al nombre de clase</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;div.myClass&#39;</span>); <span class="co">// si se especifica el tipo de elemento,</span>
                      <span class="co">// se mejora el rendimiento de la selección</span></code></pre>
    <p><strong>Selección de elementos por su atributo</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;input[name=first_name]&#39;</span>); <span class="co">// tenga cuidado, que puede ser muy lento</span></code></pre>
    <p><strong>Selección de elementos en forma de selector CSS</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#contents ul.people li&#39;</span>);</code></pre>
    <p><strong>Pseudo-selectores</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;a.external:first&#39;</span>);  <span class="co">// selecciona el primer elemento &lt;a&gt;</span>
                            <span class="co">// con la clase &#39;external&#39;</span>
    <span class="fu">$</span>(<span class="st">&#39;tr:odd&#39;</span>);            <span class="co">// selecciona todos los elementos &lt;tr&gt;</span>
                            <span class="co">// impares de una tabla</span>
    <span class="fu">$</span>(<span class="st">&#39;#myForm :input&#39;</span>);    <span class="co">// selecciona todos los elementos del tipo input</span>
                            <span class="co">// dentro del formulario #myForm</span>
    <span class="fu">$</span>(<span class="st">&#39;div:visible&#39;</span>);       <span class="co">// selecciona todos los divs visibles</span>
    <span class="fu">$</span>(<span class="st">&#39;div:gt(2)&#39;</span>);         <span class="co">// selecciona todos los divs excepto los tres primeros</span>
    <span class="fu">$</span>(<span class="st">&#39;div:animated&#39;</span>);      <span class="co">// selecciona todos los divs actualmente animados</span></code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Cuando se utilizan los pseudo-selectores <code>:visible</code> y <code>:hidden</code>, jQuery comprueba la visibilidad actual del elemento pero no si éste posee asignados los estilos CSS <code>visibility</code> o <code>display</code> — en otras palabras, verifica si <em>el alto y ancho físico del elemento</em> es mayor a cero. Sin embargo, esta comprobación no funciona con los elementos <code>&lt;tr&gt;</code>; en este caso, jQuery comprueba si se está aplicando el estilo <code>display</code> y va a considerar al elemento como oculto si posee asignado el valor <code>none</code>. Además, los elementos que aún no fueron añadidos al DOM serán tratados como ocultos, incluso si tienen aplicados estilos indicando que deben ser visibles (En la sección Manipulación de este manual, se explica como crear y añadir elementos al DOM).</p>
    </blockquote>
    <p>Como referencia, este es el fragmento de código que utiliza jQuery para determinar cuando un elemento es visible o no. Se incorporaron los comentarios para que quede más claro su entendimiento:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">jQuery</span>.<span class="ot">expr</span>.<span class="ot">filters</span>.<span class="fu">hidden</span> = <span class="kw">function</span>( elem ) {
        <span class="kw">var</span> width = <span class="ot">elem</span>.<span class="fu">offsetWidth</span>, height = <span class="ot">elem</span>.<span class="fu">offsetHeight</span>,
            skip = <span class="ot">elem</span>.<span class="ot">nodeName</span>.<span class="fu">toLowerCase</span>() === <span class="st">&quot;tr&quot;</span>;
    
        <span class="co">// ¿el elemento posee alto 0, ancho 0 y no es un &lt;tr&gt;?</span>
        <span class="kw">return</span> width === <span class="dv">0</span> &amp;&amp; height === <span class="dv">0</span> &amp;&amp; !skip ?
    
            <span class="co">// entonces debe estar oculto (hidden)</span>
            <span class="kw">true</span> :
    
            <span class="co">// pero si posee ancho y alto</span>
            <span class="co">// y no es un &lt;tr&gt;</span>
            width &gt; <span class="dv">0</span> &amp;&amp; height &gt; <span class="dv">0</span> &amp;&amp; !skip ?
    
                <span class="co">// entonces debe estar visible</span>
                <span class="kw">false</span> :
    
                <span class="co">// si nos encontramos aquí, es porque el elemento posee ancho</span>
                <span class="co">// y alto, pero además es un &lt;tr&gt;,</span>
                <span class="co">// entonces se verifica el valor del estilo display</span>
                <span class="co">// aplicado a través de CSS</span>
                <span class="co">// para decidir si está oculto o no</span>
                <span class="ot">jQuery</span>.<span class="fu">curCSS</span>(elem, <span class="st">&quot;display&quot;</span>) === <span class="st">&quot;none&quot;</span>;
    };
    
    <span class="ot">jQuery</span>.<span class="ot">expr</span>.<span class="ot">filters</span>.<span class="fu">visible</span> = <span class="kw">function</span>( elem ) {
        <span class="kw">return</span> !<span class="ot">jQuery</span>.<span class="ot">expr</span>.<span class="ot">filters</span>.<span class="fu">hidden</span>( elem );
    };</code></pre>
    <p><strong>Elección de Selectores</strong></p>
    <p>La elección de buenos selectores es un punto importante cuando se desea mejorar el rendimiento del código. Una pequeña especificidad — por ejemplo, incluir el tipo de elemento (como <code>div</code>) cuando se realiza una selección por el nombre de clase — puede ayudar bastante. Por eso, es recomendable darle algunas “pistas” a jQuery sobre en que lugar del documento puede encontrar lo que desea seleccionar. Por otro lado, demasiada especificidad puede ser perjudicial. Un selector como <code>#miTabla thead tr th.especial</code> es un exceso, lo mejor sería utilizar <code>#miTabla th.especial</code>.</p>
    <p>jQuery ofrece muchos selectores basados en atributos, que permiten realizar selecciones basadas en el contenido de los atributos utilizando simplificaciones de expresiones regulares.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// encontrar todos los &lt;a&gt; cuyo atributo rel terminan en &quot;thinger&quot;</span>
    <span class="fu">$</span>(<span class="st">&quot;a[rel$=&#39;thinger&#39;]&quot;</span>);</code></pre>
    <p>Estos 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.</p>
    <p>Si desea conocer más sobre este asunto, <a href="http://paulirish.com/perf">Paul Irish realizó una gran presentación sobre mejoras de rendimiento en JavaScript</a> (en ingles), la cual posee varias diapositivas centradas en selectores.</p>
    <div id="comprobar-selecciones" class="section level3">
    <h3><a href="#comprobar-selecciones"><span class="header-section-number">3.2.1</span> Comprobar Selecciones</a></h3>
    <p>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í:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span> (<span class="fu">$</span>(<span class="st">&#39;div.foo&#39;</span>)) { ... }</code></pre>
    <p>Sin embargo esta forma no funcionará. Cuando se realiza una selección utilizando <code>$()</code>, siempre es devuelto un objeto, y si se lo evalúa, éste siempre devolverá <code>true</code>. Incluso si la selección no contiene ningún elemento, el código dentro del bloque <code>if</code> se ejecutará.</p>
    <p>En lugar de utilizar el código mostrado, lo que se debe hacer es preguntar por la cantidad de elementos que posee la selección que se ejecutó. Esto es posible realizarlo utilizando la propiedad JavaScript <code>length</code>. Si la respuesta es 0, la condición evaluará falso, caso contrario (más de 0 elementos), la condición será verdadera.</p>
    <p><strong>Evaluar si una selección posee elementos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">if</span> (<span class="fu">$</span>(<span class="st">&#39;div.foo&#39;</span>).<span class="fu">length</span>) { ... }</code></pre>
    </div>
    <div id="guardar-selecciones" class="section level3">
    <h3><a href="#guardar-selecciones"><span class="header-section-number">3.2.2</span> Guardar Selecciones</a></h3>
    <p>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.</p>
    <p><strong>Guardar selecciones en una variable</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $divs = <span class="fu">$</span>(<span class="st">&#39;div&#39;</span>);</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>En el ejemplo “Guardar selecciones en una variable”, la variable comienza con el signo de dólar. Contrariamente a otros lenguajes de programación, en JavaScript este signo no posee ningún significado especial — es solamente otro carácter. Sin embargo aquí se utilizará para indicar que dicha variable posee un objeto jQuery. Esta práctica — una especie de <a href="http://es.wikipedia.org/wiki/Notación_húngara">Notación Húngara</a> — es solo una convención y no es obligatoria.</p>
    </blockquote>
    <p>Una vez que la selección es guardada en la variable, se la puede utilizar en conjunto con los métodos de jQuery y el resultado será igual que utilizando la selección original.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>La selección obtiene sólo los elementos que están en la página cuando se realizó dicha acción. Si luego se añaden elementos al documento, será necesario repetir la selección o añadir los elementos nuevos a la selección guardada en la variable. En otras palabras, las selecciones guardadas no se actualizan “mágicamente” cuando el DOM de modifica.</p>
    </blockquote>
    </div>
    <div id="refinamiento-y-filtrado-de-selecciones" class="section level3">
    <h3><a href="#refinamiento-y-filtrado-de-selecciones"><span class="header-section-number">3.2.3</span> Refinamiento y Filtrado de Selecciones</a></h3>
    <p>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.</p>
    <p><strong>Refinamiento de selecciones</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;div.foo&#39;</span>).<span class="fu">has</span>(<span class="st">&#39;p&#39;</span>);          <span class="co">// el elemento div.foo contiene elementos &lt;p&gt;</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">not</span>(<span class="st">&#39;.bar&#39;</span>);            <span class="co">// el elemento h1 no posse la clase &#39;bar&#39;</span>
    <span class="fu">$</span>(<span class="st">&#39;ul li&#39;</span>).<span class="fu">filter</span>(<span class="st">&#39;.current&#39;</span>);  <span class="co">// un item de una lista desordenada</span>
                                    <span class="co">// que posse la clase &#39;current&#39;</span>
    <span class="fu">$</span>(<span class="st">&#39;ul li&#39;</span>).<span class="fu">first</span>();             <span class="co">// el primer item de una lista desordenada</span>
    <span class="fu">$</span>(<span class="st">&#39;ul li&#39;</span>).<span class="fu">eq</span>(<span class="dv">5</span>);               <span class="co">// el sexto item de una lista desordenada</span></code></pre>
    </div>
    <div id="selección-de-elementos-de-un-formulario" class="section level3">
    <h3><a href="#selección-de-elementos-de-un-formulario"><span class="header-section-number">3.2.4</span> Selección de Elementos de un Formulario</a></h3>
    <p>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.</p>
    <dl>
    <dt>:button</dt>
    <dd><p>Selecciona elementos <code>&lt;button&gt;</code> y con el atributo <code>type='button'</code></p>
    </dd>
    <dt>:checkbox</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='checkbox'</code></p>
    </dd>
    <dt>:checked</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> del tipo <code>checkbox</code> seleccionados</p>
    </dd>
    <dt>:disabled</dt>
    <dd><p>Selecciona elementos del formulario que están deshabitados</p>
    </dd>
    <dt>:enabled</dt>
    <dd><p>Selecciona elementos del formulario que están habilitados</p>
    </dd>
    <dt>:file</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='file'</code></p>
    </dd>
    <dt>:image</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='image'</code></p>
    </dd>
    <dt>:input</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code> y <code>&lt;select&gt;</code></p>
    </dd>
    <dt>:password</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='password'</code></p>
    </dd>
    <dt>:radio</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='radio'</code></p>
    </dd>
    <dt>:reset</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='reset'</code></p>
    </dd>
    <dt>:selected</dt>
    <dd><p>Selecciona elementos <code>&lt;options&gt;</code> que están seleccionados</p>
    </dd>
    <dt>:submit</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='submit'</code></p>
    </dd>
    <dt>:text</dt>
    <dd><p>Selecciona elementos <code>&lt;input&gt;</code> con el atributo <code>type='text'</code></p>
    </dd>
    </dl>
    <p><strong>Utilizando pseudo-selectores en elementos de formularios</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myForm :input&#39;</span>); <span class="co">// obtiene todos los elementos inputs</span>
                         <span class="co">// dentro del formulario #myForm</span></code></pre>
    </div>
    </div>
    <div id="trabajar-con-selecciones" class="section level2">
    <h2><a href="#trabajar-con-selecciones"><span class="header-section-number">3.3</span> Trabajar con Selecciones</a></h2>
    <p>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 <em>getters</em>) y establecedores (en inglés <em>setters</em>). Los métodos obtenedores devuelven una propiedad del elemento seleccionado; mientras que los métodos establecedores fijan una propiedad a todos los elementos seleccionados.</p>
    <div id="encadenamiento" class="section level3">
    <h3><a href="#encadenamiento"><span class="header-section-number">3.3.1</span> Encadenamiento</a></h3>
    <p>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.</p>
    <p><strong>Encadenamiento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#content&#39;</span>).<span class="fu">find</span>(<span class="st">&#39;h3&#39;</span>).<span class="fu">eq</span>(<span class="dv">2</span>).<span class="fu">html</span>(<span class="st">&#39;nuevo texto para el tercer elemento h3&#39;</span>);</code></pre>
    <p>Por otro lado, si se está escribiendo un encadenamiento de métodos que incluyen muchos pasos, es posible escribirlos línea por línea, haciendo que el código luzca más agradable para leer.</p>
    <p><strong>Formateo de código encadenado</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#content&#39;</span>)
        .<span class="fu">find</span>(<span class="st">&#39;h3&#39;</span>)
        .<span class="fu">eq</span>(<span class="dv">2</span>)
        .<span class="fu">html</span>(<span class="st">&#39;nuevo texto para el tercer elemento h3&#39;</span>);</code></pre>
    <p>Si desea volver a la selección original en el medio del encadenado, jQuery ofrece el método <code>$.fn.end</code> para poder hacerlo.</p>
    <p><strong>Restablecer la selección original utilizando el método <code>$.fn.end</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#content&#39;</span>)
        .<span class="fu">find</span>(<span class="st">&#39;h3&#39;</span>)
        .<span class="fu">eq</span>(<span class="dv">2</span>)
            .<span class="fu">html</span>(<span class="st">&#39;nuevo texto para el tercer elemento h3&#39;</span>)
        .<span class="fu">end</span>() <span class="co">// reestablece la selección a todos los elementos h3 en #content</span>
        .<span class="fu">eq</span>(<span class="dv">0</span>)
            .<span class="fu">html</span>(<span class="st">&#39;nuevo texto para el primer elemento h3&#39;</span>);</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>El encadenamiento es muy poderoso y es una característica que muchas bibliotecas JavaScript han adoptado desde que jQuery se hizo popular. Sin embargo, debe ser utilizado con cuidado. Un encadenamiento de métodos extensivo pueden hacer un código extremadamente difícil de modificar y depurar. No existe una regla que indique que tan largo o corto debe ser el encadenado — pero es recomendable que tenga en cuenta este consejo.</p>
    </blockquote>
    </div>
    <div id="obtenedores-getters-establecedores-setters" class="section level3">
    <h3><a href="#obtenedores-getters-establecedores-setters"><span class="header-section-number">3.3.2</span> Obtenedores (Getters) &amp; Establecedores (Setters)</a></h3>
    <p>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 <em>setter</em>). En cambio, cuando un método es utilizado para obtener (o leer) un valor, es llamado obtenedor (en inglés <em>getter</em>).</p>
    <p><strong>El método <code>$.fn.html</code> utilizado como establecedor</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">html</span>(<span class="st">&#39;hello world&#39;</span>);</code></pre>
    <p><strong>El método html utilizado como obtenedor</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">html</span>();</code></pre>
    <p>Los métodos establecedores devuelven un objeto jQuery, permitiendo continuar con la llamada de más métodos en la misma selección, mientras que los métodos obtenedores devuelven el valor por el cual se consultó, pero no permiten seguir llamando a más métodos en dicho valor.</p>
    </div>
    </div>
    <div id="css-estilos-dimensiones" class="section level2">
    <h2><a href="#css-estilos-dimensiones"><span class="header-section-number">3.4</span> CSS, Estilos, &amp; Dimensiones</a></h2>
    <p>jQuery incluye una manera útil de obtener y establecer propiedades CSS a los elementos.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Las propiedades CSS que incluyen como separador un guión del medio, en JavaScript deben ser transformadas a su estilo <em>CamelCase</em>. Por ejemplo, cuando se la utiliza como propiedad de un método, el estilo CSS <code>font-size</code> deberá ser expresado como <code>fontSize</code>. Sin embargo, esta regla no es aplicada cuando se pasa el nombre de la propiedad CSS al método <code>$.fn.css</code> — en este caso, los dos formatos (en <em>CamelCase</em> o con el guión del medio) funcionarán.</p>
    </blockquote>
    <p><strong>Obtener propiedades CSS</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">css</span>(<span class="st">&#39;fontSize&#39;</span>); <span class="co">// devuelve una cadena de caracteres como &quot;19px&quot;</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">css</span>(<span class="st">&#39;font-size&#39;</span>); <span class="co">// también funciona</span></code></pre>
    <p><strong>Establecer propiedades CSS</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">css</span>(<span class="st">&#39;fontSize&#39;</span>, <span class="st">&#39;100px&#39;</span>); <span class="co">// establece una propiedad individual CSS</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">css</span>({ 
        <span class="st">&#39;fontSize&#39;</span> : <span class="st">&#39;100px&#39;</span>,
        <span class="st">&#39;color&#39;</span> : <span class="st">&#39;red&#39;</span>     
    }); <span class="co">// establece múltiples propiedades CSS</span></code></pre>
    <p><em>Notar que el estilo del argumento utilizado en la segunda línea del ejemplo — es un objeto que contiene múltiples propiedades. Esta es una forma común de pasar múltiples argumentos a una función, y muchos métodos establecedores de la biblioteca aceptan objetos para fijar varias propiedades de una sola vez.</em></p>
    <p>A partir de la versión 1.6 de la biblioteca, utilizando <code>$.fn.css</code> también es posible establecer valores relativos en las propiedades CSS de un elemento determinado:</p>
    <p><strong>Establecer valores CSS relativos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">css</span>({ 
        <span class="st">&#39;fontSize&#39;</span> : <span class="st">&#39;+=15px&#39;</span>, <span class="co">// suma 15px al tamaño original del elemento</span>
        <span class="st">&#39;paddingTop&#39;</span> : <span class="st">&#39;+=20px&#39;</span> <span class="co">// suma 20px al padding superior original del elemento</span>
    });</code></pre>
    <div id="utilizar-clases-para-aplicar-estilos-css" class="section level3">
    <h3><a href="#utilizar-clases-para-aplicar-estilos-css"><span class="header-section-number">3.4.1</span> Utilizar Clases para Aplicar Estilos CSS</a></h3>
    <p>Para obtener valores de los estilos aplicados a un elemento, el método <code>$.fn.css</code> 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.</p>
    <p><strong>Trabajar con clases</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $h1 = <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>);
    
    <span class="ot">$h1</span>.<span class="fu">addClass</span>(<span class="st">&#39;big&#39;</span>);
    <span class="ot">$h1</span>.<span class="fu">removeClass</span>(<span class="st">&#39;big&#39;</span>);
    <span class="ot">$h1</span>.<span class="fu">toggleClass</span>(<span class="st">&#39;big&#39;</span>);
    
    <span class="kw">if</span> (<span class="ot">$h1</span>.<span class="fu">hasClass</span>(<span class="st">&#39;big&#39;</span>)) { ... }</code></pre>
    <p>Las clases también pueden ser útiles para guardar información del estado de un elemento, por ejemplo, para indicar que un elemento fue seleccionado.</p>
    </div>
    <div id="dimensiones" class="section level3">
    <h3><a href="#dimensiones"><span class="header-section-number">3.4.2</span> Dimensiones</a></h3>
    <p>jQuery ofrece una variedad de métodos para obtener y modificar valores de dimensiones y posición de un elemento.</p>
    <p>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 <a href="http://api.jquery.com/category/dimensions/">http://api.jquery.com/category/dimensions/</a>.</p>
    <p><strong>Métodos básicos sobre Dimensiones</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">width</span>(<span class="st">&#39;50px&#39;</span>);   <span class="co">// establece el ancho de todos los elementos H1</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">width</span>();         <span class="co">// obtiene el ancho del primer elemento H1</span>
    
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">height</span>(<span class="st">&#39;50px&#39;</span>);  <span class="co">// establece el alto de todos los elementos H1</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">height</span>();        <span class="co">// obtiene el alto del primer elemento H1</span>
    
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">position</span>();      <span class="co">// devuelve un objeto conteniendo</span>
                             <span class="co">// información sobre la posición</span>
                             <span class="co">// del primer elemento relativo al</span>
                             <span class="co">// &quot;offset&quot; (posición) de su elemento padre</span></code></pre>
    </div>
    </div>
    <div id="atributos" class="section level2">
    <h2><a href="#atributos"><span class="header-section-number">3.5</span> Atributos</a></h2>
    <p>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.</p>
    <p>El método <code>$.fn.attr</code> actúa tanto como método establecedor como obtenedor. Además, al igual que el método <code>$.fn.css</code>, cuando se lo utiliza como método establecedor, puede aceptar un conjunto de palabra clave-valor o un objeto conteniendo más conjuntos.</p>
    <p><strong>Establecer atributos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>, <span class="st">&#39;allMyHrefsAreTheSameNow.html&#39;</span>);
    <span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">attr</span>({
        <span class="st">&#39;title&#39;</span> : <span class="st">&#39;all titles are the same too&#39;</span>,
        <span class="st">&#39;href&#39;</span> : <span class="st">&#39;somethingNew.html&#39;</span>
    });</code></pre>
    <p><em>En el ejemplo, el objeto pasado como argumento está escrito en varias líneas. Como se explicó anteriormente, los espacios en blanco no importan en JavaScript, por lo cual, es libre de utilizarlos para hacer el código más legible. En entornos de producción, se pueden utilizar herramientas de minificación, los cuales quitan los espacios en blanco (entre otras cosas) y comprimen el archivo final.</em></p>
    <p><strong>Obtener atributos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>);  <span class="co">// devuelve el atributo href perteneciente</span>
                          <span class="co">// al primer elemento &lt;a&gt; del documento</span></code></pre>
    </div>
    <div id="recorrer-el-dom" class="section level2">
    <h2><a href="#recorrer-el-dom"><span class="header-section-number">3.6</span> Recorrer el DOM</a></h2>
    <p>Una vez obtenida la selección, es posible encontrar otros elementos utilizando a la misma selección.</p>
    <p>En <a href="http://api.jquery.com/category/traversing/">http://api.jquery.com/category/traversing/</a> puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés <em>traversing</em>) que posee jQuery.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>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.</p>
    </blockquote>
    <p><strong>Moverse a través del DOM utilizando métodos de recorrido</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">next</span>(<span class="st">&#39;p&#39;</span>);              <span class="co">// seleccionar el inmediato y próximo</span>
                                    <span class="co">// elemento &lt;p&gt; con respecto a H1</span>
    <span class="fu">$</span>(<span class="st">&#39;div:visible&#39;</span>).<span class="fu">parent</span>();      <span class="co">// seleccionar el elemento contenedor</span>
                                    <span class="co">// a un div visible</span>
    <span class="fu">$</span>(<span class="st">&#39;input[name=first_name]&#39;</span>).<span class="fu">closest</span>(<span class="st">&#39;form&#39;</span>);  <span class="co">// seleccionar el elemento</span>
                                                  <span class="co">// &lt;form&gt; más cercano a un input</span>
    <span class="fu">$</span>(<span class="st">&#39;#myList&#39;</span>).<span class="fu">children</span>();        <span class="co">// seleccionar todos los elementos</span>
                                    <span class="co">// hijos de #myList</span>
    <span class="fu">$</span>(<span class="st">&#39;li.selected&#39;</span>).<span class="fu">siblings</span>();    <span class="co">// seleccionar todos los items</span>
                                    <span class="co">// hermanos del elemento &lt;li&gt;</span></code></pre>
    <p>También es posible interactuar con la selección utilizando el método <code>$.fn.each</code>. Dicho método interactúa con todos los elementos obtenidos en la selección y ejecuta una función por cada uno. La función recibe como argumento el índice del elemento actual y al mismo elemento. De forma predeterminada, dentro de la función, se puede hacer referencia al elemento DOM a través de la declaración <code>this</code>.</p>
    <p><strong>Interactuar en una selección</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myList li&#39;</span>).<span class="fu">each</span>(<span class="kw">function</span>(idx, el) {
        <span class="ot">console</span>.<span class="fu">log</span>(
            <span class="st">&#39;El elemento &#39;</span> + idx +
            <span class="st">&#39;contiene el siguiente HTML: &#39;</span> +
            <span class="fu">$</span>(el).<span class="fu">html</span>()
        );
    });</code></pre>
    </div>
    <div id="manipulación-de-elementos" class="section level2">
    <h2><a href="#manipulación-de-elementos"><span class="header-section-number">3.7</span> Manipulación de Elementos</a></h2>
    <p>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.</p>
    <p>La documentación completa sobre los métodos de manipulación puede encontrarla en la sección <code>Manipulation</code>: <a href="http://api.jquery.com/category/manipulation/">http://api.jquery.com/category/manipulation/</a>.</p>
    <div id="obtener-y-establecer-información-en-elementos" class="section level3">
    <h3><a href="#obtener-y-establecer-información-en-elementos"><span class="header-section-number">3.7.1</span> Obtener y Establecer Información en Elementos</a></h3>
    <p>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.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Realizar cambios en los elementos, es un trabajo trivial, pero hay debe recordar que el cambio afectará a <em>todos</em> los elementos en la selección, por lo que, si desea modificar un sólo elemento, tiene que estar seguro de especificarlo en la selección antes de llamar al método establecedor.</p>
    </blockquote>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Cuando los métodos actúan como obtenedores, por lo general, solamente trabajan con el primer elemento de la selección. Además no devuelven un objeto jQuery, por lo cual no es posible encadenar más métodos en el mismo. Una excepción es el método <code>$.fn.text</code>, el cual permite obtener el texto de los elementos de la selección.</p>
    </blockquote>
    <dl>
    <dt>$.fn.html</dt>
    <dd><p>Obtiene o establece el contenido HTML de un elemento.</p>
    </dd>
    <dt>$.fn.text</dt>
    <dd><p>Obtiene o establece el contenido en texto del elemento; en caso se pasarle como argumento código HTML, este es despojado.</p>
    </dd>
    <dt>$.fn.attr</dt>
    <dd><p>Obtiene o establece el valor de un determinado atributo.</p>
    </dd>
    <dt>$.fn.width</dt>
    <dd><p>Obtiene o establece el ancho en pixeles del primer elemento de la selección como un entero.</p>
    </dd>
    <dt>$.fn.height</dt>
    <dd><p>Obtiene o establece el alto en pixeles del primer elemento de la selección como un entero.</p>
    </dd>
    <dt>$.fn.position</dt>
    <dd><p>Obtiene un objeto con información sobre la posición del primer elemento de la selección, relativo al primer elemento padre posicionado. <em>Este método es solo obtenedor.</em></p>
    </dd>
    <dt>$.fn.val</dt>
    <dd><p>Obtiene o establece el valor (<em>value</em>) en elementos de formularios.</p>
    </dd>
    </dl>
    <p><strong>Cambiar el HTML de un elemento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myDiv p:first&#39;</span>)
        .<span class="fu">html</span>(<span class="st">&#39;Nuevo &lt;strong&gt;primer&lt;/strong&gt; párrafo&#39;</span>);</code></pre>
    </div>
    <div id="mover-copiar-y-remover-elementos" class="section level3">
    <h3><a href="#mover-copiar-y-remover-elementos"><span class="header-section-number">3.7.2</span> Mover, Copiar y Remover Elementos</a></h3>
    <p>Existen varias maneras para mover elementos a través del DOM; las cuales se pueden separar en dos enfoques:</p>
    <ul>
    <li><p>querer colocar el/los elementos seleccionados de forma relativa a otro elemento;</p></li>
    <li><p>querer colocar un elemento relativo a el/los elementos seleccionados.</p></li>
    </ul>
    <p>Por ejemplo, jQuery provee los métodos <code>$.fn.insertAfter</code> y <code>$.fn.after</code>. El método <code>$.fn.insertAfter</code> coloca a el/los elementos seleccionados después del elemento que se haya pasado como argumento; mientras que el método <code>$.fn.after</code> coloca al elemento pasado como argumento después del elemento seleccionado. Otros métodos también siguen este patrón: <code>$.fn.insertBefore</code> y <code>$.fn.before</code>; <code>$.fn.appendTo</code> y <code>$.fn.append</code>; y <code>$.fn.prependTo</code> y <code>$.fn.prepend</code>.</p>
    <p>La utilización de uno u otro método dependerá de los elementos que tenga seleccionados y el tipo de referencia que se quiera guardar con respecto al elemento que se esta moviendo.</p>
    <p><strong>Mover elementos utilizando diferentes enfoques</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// hacer que el primer item de la lista sea el último</span>
    <span class="kw">var</span> $li = <span class="fu">$</span>(<span class="st">&#39;#myList li:first&#39;</span>).<span class="fu">appendTo</span>(<span class="st">&#39;#myList&#39;</span>);
    
    <span class="co">// otro enfoque para el mismo problema</span>
    <span class="fu">$</span>(<span class="st">&#39;#myList&#39;</span>).<span class="fu">append</span>(<span class="fu">$</span>(<span class="st">&#39;#myList li:first&#39;</span>));
    
    <span class="co">// debe tener en cuenta que no hay forma de acceder a la</span>
    <span class="co">// lista de items que se ha movido, ya que devuelve</span>
    <span class="co">// la lista en sí</span></code></pre>
    <div id="clonar-elementos" class="section level4">
    <h4><a href="#clonar-elementos"><span class="header-section-number">3.7.2.1</span> Clonar Elementos</a></h4>
    <p>Cuando se utiliza un método como <code>$.fn.appendTo</code>, 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 <code>$.fn.clone</code>.</p>
    <p><strong>Obtener una copia del elemento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// copiar el primer elemento de la lista y moverlo al final de la misma</span>
    <span class="fu">$</span>(<span class="st">&#39;#myList li:first&#39;</span>).<span class="fu">clone</span>().<span class="fu">appendTo</span>(<span class="st">&#39;#myList&#39;</span>);</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Si se necesita copiar información y eventos relacionados al elemento, se debe pasar <code>true</code> como argumento de <code>$.fn.clone</code>.</p>
    </blockquote>
    </div>
    <div id="remover-elementos" class="section level4">
    <h4><a href="#remover-elementos"><span class="header-section-number">3.7.2.2</span> Remover elementos</a></h4>
    <p>Existen dos formas de remover elementos de una página: Utilizando <code>$.fn.remove</code> o <code>$.fn.detach</code>. Cuando desee remover de forma permanente al elemento, utilize el método <code>$.fn.remove</code>. 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.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>El método <code>$.fn.detach</code> es muy útil cuando se esta manipulando de forma severa un elemento, ya que es posible eliminar al elemento, trabajarlo en el código y luego restaurarlo en la página nuevamente. Esta forma tiene como beneficio no tocar el DOM mientras se está modificando la información y eventos del elemento.</p>
    </blockquote>
    <p>Por otro lado, si se desea mantener al elemento pero se necesita eliminar su contenido, es posible utiliza el método <code>$.fn.empty</code>, el cual “vaciará” el contenido HTML del elemento.</p>
    </div>
    </div>
    <div id="crear-nuevos-elementos" class="section level3">
    <h3><a href="#crear-nuevos-elementos"><span class="header-section-number">3.7.3</span> Crear Nuevos Elementos</a></h3>
    <p>jQuery provee una forma fácil y elegante para crear nuevos elementos a través del mismo método <code>$()</code> que se utiliza para realizar selecciones.</p>
    <p><strong>Crear nuevos elementos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;&lt;p&gt;Un nuevo párrafo&lt;/p&gt;&#39;</span>);
    <span class="fu">$</span>(<span class="st">&#39;&lt;li class=&quot;new&quot;&gt;nuevo item de la lista&lt;/li&gt;&#39;</span>);</code></pre>
    <p><strong>Crear un nuevo elemento con atributos utilizando un objeto</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;&lt;a/&gt;&#39;</span>, {
        <span class="dt">html </span>: <span class="st">&#39;Un &lt;strong&gt;nuevo&lt;/strong&gt; enlace&#39;</span>,
        <span class="st">&#39;class&#39;</span> : <span class="st">&#39;new&#39;</span>,
        <span class="dt">href </span>: <span class="st">&#39;foo.html&#39;</span>
    });</code></pre>
    <p><em>Note que en el objeto que se pasa como argumento, la propiedad class está entre comillas, mientras que la propiedad href y html no lo están. Por lo general, los nombres de propiedades no deben estar entre comillas, excepto en el caso que se utilice como nombre una palabra reservada (como es el caso de class).</em></p>
    <p>Cuando se crea un elemento, éste no es añadido inmediatamente a la página, sino que se debe hacerlo en conjunto con un método.</p>
    <p><strong>Crear un nuevo elemento en la página</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $myNewElement = <span class="fu">$</span>(<span class="st">&#39;&lt;p&gt;Nuevo elemento&lt;/p&gt;&#39;</span>);
    <span class="ot">$myNewElement</span>.<span class="fu">appendTo</span>(<span class="st">&#39;#content&#39;</span>);
    
    <span class="ot">$myNewElement</span>.<span class="fu">insertAfter</span>(<span class="st">&#39;ul:last&#39;</span>); <span class="co">// eliminará al elemento &lt;p&gt;</span>
                                          <span class="co">// existente en #content</span>
    <span class="fu">$</span>(<span class="st">&#39;ul&#39;</span>).<span class="fu">last</span>().<span class="fu">after</span>(<span class="ot">$myNewElement</span>.<span class="fu">clone</span>());  <span class="co">// clonar al elemento &lt;p&gt;</span>
                                                  <span class="co">// para tener las dos versiones</span></code></pre>
    <p><em>Estrictamente hablando, no es necesario guardar al elemento creado en una variable — es posible llamar al método para añadir el elemento directamente después de $(). Sin embargo, la mayoría de las veces se deseará hacer referencia al elemento añadido, por lo cual, si se guarda en una variable no es necesario seleccionarlo después.</em></p>
    <p><strong>Crear y añadir al mismo tiempo un elemento a la página</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;ul&#39;</span>).<span class="fu">append</span>(<span class="st">&#39;&lt;li&gt;item de la lista&lt;/li&gt;&#39;</span>);</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>La sintaxis para añadir nuevos elementos a la página es muy fácil de utilizar, pero es tentador olvidar que hay un costo enorme de rendimiento al agregar elementos al DOM de forma repetida. Si esta añadiendo muchos elementos al mismo contenedor, en lugar de añadir cada elemento uno por vez, lo mejor es concatenar todo el HTML en una única cadena de caracteres para luego anexarla al contenedor. Una posible solución es utilizar un vector que posea todos los elementos, luego reunirlos utilizando <code>join</code> y finalmente anexarla.</p>
    </blockquote>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myItems = [], $myList = <span class="fu">$</span>(<span class="st">&#39;#myList&#39;</span>);
    
    <span class="kw">for</span> (<span class="kw">var</span> i=<span class="dv">0</span>; i&lt;<span class="dv">100</span>; i++) {
        <span class="ot">myItems</span>.<span class="fu">push</span>(<span class="st">&#39;&lt;li&gt;item &#39;</span> + i + <span class="st">&#39;&lt;/li&gt;&#39;</span>);
    }
    
    <span class="ot">$myList</span>.<span class="fu">append</span>(<span class="ot">myItems</span>.<span class="fu">join</span>(<span class="st">&#39;&#39;</span>));</code></pre>
    </div>
    <div id="manipulación-de-atributos" class="section level3">
    <h3><a href="#manipulación-de-atributos"><span class="header-section-number">3.7.4</span> Manipulación de Atributos</a></h3>
    <p>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 <code>$.fn.attr</code> permite manipulaciones más complejas.</p>
    <p><strong>Manipular un simple atributo</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myDiv a:first&#39;</span>).<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>, <span class="st">&#39;newDestination.html&#39;</span>);</code></pre>
    <p><strong>Manipular múltiples atributos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myDiv a:first&#39;</span>).<span class="fu">attr</span>({
        <span class="dt">href </span>: <span class="st">&#39;newDestination.html&#39;</span>,
        <span class="dt">rel </span>: <span class="st">&#39;super-special&#39;</span>
    });</code></pre>
    <p><strong>Utilizar una función para determinar el valor del nuevo atributo</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myDiv a:first&#39;</span>).<span class="fu">attr</span>({
        <span class="dt">rel </span>: <span class="st">&#39;super-special&#39;</span>,
        <span class="dt">href </span>: <span class="kw">function</span>(idx, href) {
            <span class="kw">return</span> <span class="st">&#39;/new/&#39;</span> + href;
        }
    });
    
    <span class="fu">$</span>(<span class="st">&#39;#myDiv a:first&#39;</span>).<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>, <span class="kw">function</span>(idx, href) {
        <span class="kw">return</span> <span class="st">&#39;/new/&#39;</span> + href;
    });</code></pre>
    </div>
    </div>
    <div id="ejercicios-1" class="section level2">
    <h2><a href="#ejercicios-1"><span class="header-section-number">3.8</span> Ejercicios</a></h2>
    <div id="selecciones" class="section level3">
    <h3><a href="#selecciones"><span class="header-section-number">3.8.1</span> Selecciones</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/sandbox.js</code> o trabaje directamente con Firebug para cumplir los siguientes puntos:</p>
    <ol style="list-style-type: decimal">
    <li><p>Seleccionar todos los elementos <code>div</code> que poseen la clase “module”.</p></li>
    <li><p>Especificar tres selecciones que puedan seleccionar el tercer ítem de la lista desordenada #myList. ¿Cuál es el mejor para utilizar? ¿Porqué?</p></li>
    <li><p>Seleccionar el elemento <code>label</code> del elemento <code>input</code> utilizando un selector de atributo.</p></li>
    <li><p>Averiguar cuantos elementos en la página están ocultos (ayuda: <code>.length</code>).</p></li>
    <li><p>Averiguar cuantas imágenes en la página poseen el atributo <code>alt</code>.</p></li>
    <li><p>Seleccionar todas las filas impares del cuerpo de la tabla.</p></li>
    </ol>
    </div>
    <div id="recorrer-el-dom-1" class="section level3">
    <h3><a href="#recorrer-el-dom-1"><span class="header-section-number">3.8.2</span> Recorrer el DOM</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/sandbox.js</code> o trabaje directamente con Firebug para cumplir los siguientes puntos:</p>
    <ol style="list-style-type: decimal">
    <li><p>Seleccionar todas las imágenes en la página; registrar en la consola el atributo <code>alt</code> de cada imagen.</p></li>
    <li><p>Seleccionar el elemento <code>input</code>, luego dirigirse hacia el formulario y añadirle una clase al mismo.</p></li>
    <li><p>Seleccionar el ítem que posee la clase “current” dentro de la lista #myList y remover dicha clase en el elemento; luego añadir la clase “current” al siguiente ítem de la lista.</p></li>
    <li><p>Seleccionar el elemento <code>select</code> dentro de #specials; luego dirigirse hacia el botón <code>submit</code>.</p></li>
    <li><p>Seleccionar el primer ítem de la lista en el elemento #slideshow; añadirle la clase “current” al mismo y luego añadir la clase “disabled” a los elementos hermanos.</p></li>
    </ol>
    </div>
    <div id="manipulación" class="section level3">
    <h3><a href="#manipulación"><span class="header-section-number">3.8.3</span> Manipulación</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/sandbox.js</code> o trabaje directamente con Firebug para cumplir los siguientes puntos:</p>
    <ol style="list-style-type: decimal">
    <li>Añadir 5 nuevos ítems al final de la lista desordenada #myList. Ayuda:</li>
    </ol>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>; i&lt;<span class="dv">5</span>; i++) { ... }</code></pre>
    <ol start="2" style="list-style-type: decimal">
    <li><p>Remover los ítems impares de la lista.</p></li>
    <li><p>Añadir otro elemento <code>h2</code> y otro párrafo al último <code>div.module</code>.</p></li>
    <li><p>Añadir otra opción al elemento <code>select</code>; darle a la opción añadida el valor <em>“Wednesday”</em>.</p></li>
    <li><p>Añadir un nuevo <code>div.module</code> a la página después del último; luego añadir una copia de una de las imágenes existentes dentro del nuevo <code>div</code>.</p></li>
    </ol>
    </div>
    </div>
    </div>
    <div id="el-núcleo-de-jquery" class="section level1">
    <h1><a href="#el-núcleo-de-jquery"><span class="header-section-number">4</span> El núcleo de jQuery</a></h1>
    <div id="vs" class="section level2">
    <h2><a href="#vs"><span class="header-section-number">4.1</span> <code>$</code> vs <code>$()</code></a></h2>
    <p>Hasta ahora, se ha tratado completamente con métodos que se llaman desde el objeto jQuery. Por ejemplo:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">remove</span>();</code></pre>
    <p>Dichos métodos son parte del espacio de nombres (en inglés <em>namespace</em>) <code>$.fn</code>, o del prototipo (en inglés <em>prototype</em>) de jQuery, y son considerados como métodos del objeto jQuery.</p>
    <p>Sin embargo, existen métodos que son parte del espacio de nombres de $ y se consideran como métodos del núcleo de jQuery.</p>
    <p>Estas distinciones pueden ser bastantes confusas para usuarios nuevos. Para evitar la confusión, debe recordar estos dos puntos:</p>
    <ul>
    <li><p>los métodos utilizados en selecciones se encuentran dentro del espacio de nombres <code>$.fn</code>, y automáticamente reciben y devuelven una selección en sí;</p></li>
    <li><p>métodos en el espacio de nombres <code>$</code> 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.</p></li>
    </ul>
    <p>Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con <code>$.each</code> y <code>$.fn.each</code>. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.</p>
    </div>
    <div id="métodos-utilitarios" class="section level2">
    <h2><a href="#métodos-utilitarios"><span class="header-section-number">4.2</span> Métodos Utilitarios</a></h2>
    <p>jQuery ofrece varios métodos utilitarios dentro del espacio de nombres <code>$</code>. 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 <a href="http://api.jquery.com/category/utilities/">http://api.jquery.com/category/utilities/</a>.</p>
    <dl>
    <dt>$.trim</dt>
    <dd>Remueve los espacios en blanco del principio y final.
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">trim</span>(<span class="st">&#39;    varios espacios en blanco   &#39;</span>);
    <span class="co">// devuelve &#39;varios espacios en blanco&#39;</span></code></pre>
    <dl>
    <dt>$.each</dt>
    <dd>Interactúa en vectores y objetos.
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">each</span>([ <span class="st">&#39;foo&#39;</span>, <span class="st">&#39;bar&#39;</span>, <span class="st">&#39;baz&#39;</span> ], <span class="kw">function</span>(idx, val) {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;elemento &#39;</span> + idx + <span class="st">&#39;es &#39;</span> + val);
    });
    
    <span class="ot">$</span>.<span class="fu">each</span>({ <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span>, <span class="dt">baz </span>: <span class="st">&#39;bim&#39;</span> }, <span class="kw">function</span>(k, v) {
        <span class="ot">console</span>.<span class="fu">log</span>(k + <span class="st">&#39; : &#39;</span> + v);
    });</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Como se dijo antes, existe un método llamado <code>$.fn.each</code>, el cual interactúa en una selección de elementos.</p>
    </blockquote>
    <dl>
    <dt>$.inArray</dt>
    <dd>Devuelve el índice de un valor en un vector, o -1 si el valor no se encuentra en el vector.
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myArray = [ <span class="dv">1</span>, <span class="dv">2</span>, <span class="dv">3</span>, <span class="dv">5</span> ];
    
    <span class="kw">if</span> (<span class="ot">$</span>.<span class="fu">inArray</span>(<span class="dv">4</span>, myArray) !== -<span class="dv">1</span>) {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;valor encontrado&#39;</span>);
    }</code></pre>
    <dl>
    <dt>$.extend</dt>
    <dd>Cambia la propiedades del primer objeto utilizando las propiedades de los subsecuentes objetos.
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> firstObject = { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span>, <span class="dt">a </span>: <span class="st">&#39;b&#39;</span> };
    <span class="kw">var</span> secondObject = { <span class="dt">foo </span>: <span class="st">&#39;baz&#39;</span> };
    
    <span class="kw">var</span> newObject = <span class="ot">$</span>.<span class="fu">extend</span>(firstObject, secondObject);
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">firstObject</span>.<span class="fu">foo</span>); <span class="co">// &#39;baz&#39;</span>
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">newObject</span>.<span class="fu">foo</span>);   <span class="co">// &#39;baz&#39;</span></code></pre>
    <p>Si no se desea cambiar las propiedades de ninguno de los objetos que se utilizan en <code>$.extend</code>, se debe incluir un objeto vacío como primer argumento.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> firstObject = { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span>, <span class="dt">a </span>: <span class="st">&#39;b&#39;</span> };
    <span class="kw">var</span> secondObject = { <span class="dt">foo </span>: <span class="st">&#39;baz&#39;</span> };
    
    <span class="kw">var</span> newObject = <span class="ot">$</span>.<span class="fu">extend</span>({}, firstObject, secondObject);
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">firstObject</span>.<span class="fu">foo</span>); <span class="co">// &#39;bar&#39;</span>
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">newObject</span>.<span class="fu">foo</span>);   <span class="co">// &#39;baz&#39;</span></code></pre>
    <dl>
    <dt>$.proxy</dt>
    <dd>Devuelve una función que siempre se ejecutará en el alcance (<em>scope</em>) provisto — en otras palabras, establece el significado de <em>this</em> (incluido dentro de la función) como el segundo argumento.
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFunction = <span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(<span class="kw">this</span>); };
    <span class="kw">var</span> myObject = { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span> };
    
    <span class="fu">myFunction</span>(); <span class="co">// devuelve el objeto window</span>
    
    <span class="kw">var</span> myProxyFunction = <span class="ot">$</span>.<span class="fu">proxy</span>(myFunction, myObject);
    <span class="fu">myProxyFunction</span>(); <span class="co">// devuelve el objeto myObject</span></code></pre>
    <p>Si se posee un objeto con métodos, es posible pasar dicho objeto y el nombre de un método para devolver una función que siempre se ejecuta en el alcance de dicho objeto.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myObject = {
        <span class="dt">myFn </span>: <span class="kw">function</span>() {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="kw">this</span>);
        }
    };
    
    <span class="fu">$</span>(<span class="st">&#39;#foo&#39;</span>).<span class="fu">click</span>(<span class="ot">myObject</span>.<span class="fu">myFn</span>); <span class="co">// registra el elemento DOM #foo</span>
    <span class="fu">$</span>(<span class="st">&#39;#foo&#39;</span>).<span class="fu">click</span>(<span class="ot">$</span>.<span class="fu">proxy</span>(myObject, <span class="st">&#39;myFn&#39;</span>)); <span class="co">// registra myObject</span></code></pre>
    </div>
    <div id="comprobación-de-tipos" class="section level2">
    <h2><a href="#comprobación-de-tipos"><span class="header-section-number">4.3</span> Comprobación de Tipos</a></h2>
    <p>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.</p>
    <p><strong>Comprobar el tipo de un determinado valor</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myValue = [<span class="dv">1</span>, <span class="dv">2</span>, <span class="dv">3</span>];
    
    <span class="co">// Utilizar el operador typeof de JavaScript para comprobar tipos primitivos</span>
    <span class="kw">typeof</span> myValue == <span class="st">&#39;string&#39;</span>; <span class="co">// falso (false)</span>
    <span class="kw">typeof</span> myValue == <span class="st">&#39;number&#39;</span>; <span class="co">// falso (false)</span>
    <span class="kw">typeof</span> myValue == <span class="st">&#39;undefined&#39;</span>; <span class="co">// falso (false)</span>
    <span class="kw">typeof</span> myValue == <span class="st">&#39;boolean&#39;</span>; <span class="co">// falso (false)</span>
    
    <span class="co">// Utilizar el operador de igualdad estricta para comprobar valores nulos (null)</span>
    myValue === <span class="kw">null</span>; <span class="co">// falso (false)</span>
    
    <span class="co">// Utilizar los métodos jQuery para comprobar tipos no primitivos</span>
    <span class="ot">jQuery</span>.<span class="fu">isFunction</span>(myValue); <span class="co">// falso (false)</span>
    <span class="ot">jQuery</span>.<span class="fu">isPlainObject</span>(myValue); <span class="co">// falso (false)</span>
    <span class="ot">jQuery</span>.<span class="fu">isArray</span>(myValue); <span class="co">// verdadero (true)</span>
    <span class="ot">jQuery</span>.<span class="fu">isNumeric</span>(<span class="dv">16</span>); <span class="co">// verdadero (true). No disponible en versiones inferiores a jQuery 1.7</span></code></pre>
    </div>
    <div id="el-método-data" class="section level2">
    <h2><a href="#el-método-data"><span class="header-section-number">4.4</span> El Método Data</a></h2>
    <p>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 <em>memory leaks</em>) 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.</p>
    <p><strong>Guardar y recuperar información relacionada a un elemento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myDiv&#39;</span>).<span class="fu">data</span>(<span class="st">&#39;keyName&#39;</span>, { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span> });
    <span class="fu">$</span>(<span class="st">&#39;#myDiv&#39;</span>).<span class="fu">data</span>(<span class="st">&#39;keyName&#39;</span>); <span class="co">// { foo : &#39;bar&#39; }</span></code></pre>
    <p>A través del método <code>$.fn.data</code> es posible guardar cualquier tipo de información sobre un elemento. Es difícil exagerar la importancia de este concepto cuando se está desarrollando una aplicación compleja.</p>
    <p>Por ejemplo, si desea establecer una relación entre el ítem de una lista y el div que hay dentro de este ítem, es posible hacerlo cada vez que se interactúa con el ítem, pero una mejor solución es hacerlo una sola vez, guardando un puntero al div utilizando el método <code>$.fn.data</code>:</p>
    <p><strong>Establecer una relación entre elementos utilizando el método <code>$.fn.data</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myList li&#39;</span>).<span class="fu">each</span>(<span class="kw">function</span>() {
        <span class="kw">var</span> $li = <span class="fu">$</span>(<span class="kw">this</span>), $div = <span class="ot">$li</span>.<span class="fu">find</span>(<span class="st">&#39;div.content&#39;</span>);
        <span class="ot">$li</span>.<span class="fu">data</span>(<span class="st">&#39;contentDiv&#39;</span>, $div);
    });
    
    <span class="co">// luego, no se debe volver a buscar al div;</span>
    <span class="co">// es posible leerlo desde la información asociada al item de la lista</span>
    <span class="kw">var</span> $firstLi = <span class="fu">$</span>(<span class="st">&#39;#myList li:first&#39;</span>);
    <span class="ot">$firstLi</span>.<span class="fu">data</span>(<span class="st">&#39;contentDiv&#39;</span>).<span class="fu">html</span>(<span class="st">&#39;nuevo contenido&#39;</span>);</code></pre>
    <p>Además es posible pasarle al método un objeto conteniendo uno o más pares de conjuntos palabra clave-valor.</p>
    <p>A partir de la versión 1.5 de la biblioteca, jQuery permite utilizar al método <code>$.fn.data</code> para obtener la información asociada a un elemento que posea el atributo HTML5 <code>data-*</code>:</p>
    <p><strong>Elementos con el atributo <code>data-*</code></strong></p>
    <pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;a</span><span class="ot"> id=</span><span class="st">&#39;foo&#39;</span><span class="ot"> data-foo=</span><span class="st">&#39;baz&#39;</span><span class="ot"> href=</span><span class="st">&#39;#&#39;</span><span class="kw">&gt;</span>Foo<span class="kw">&lt;/a&gt;</span>
    
    <span class="kw">&lt;a</span><span class="ot"> id=</span><span class="st">&#39;foobar&#39;</span><span class="ot"> data-foo-bar=</span><span class="st">&#39;fol&#39;</span><span class="ot"> href=</span><span class="st">&#39;#&#39;</span><span class="kw">&gt;</span>Foo Bar<span class="kw">&lt;/a&gt;</span></code></pre>
    <p><strong>Obtener los valores asociados a los atributos <code>data-*</code> con <code>$.fn.data</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// obtiene el valor del atributo data-foo</span>
    <span class="co">// utilizando el método $.fn.data</span>
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="fu">$</span>(<span class="st">&#39;#foo&#39;</span>).<span class="fu">data</span>(<span class="st">&#39;foo&#39;</span>)); <span class="co">// registra &#39;baz&#39;</span>
    
    <span class="co">// obtiene el valor del segundo elemento</span>
    <span class="ot">console</span>.<span class="fu">log</span>(<span class="fu">$</span>(<span class="st">&#39;#foobar&#39;</span>).<span class="fu">data</span>(<span class="st">&#39;fooBar&#39;</span>)); <span class="co">// registra &#39;fol&#39;</span></code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>A partir de la versión 1.6 de la biblioteca, para obtener el valor del atributo <code>data-foo-bar</code> del segundo elemento, el argumento en <code>$.fn.data</code> se debe pasar en estilo <em>CamelCase</em>.</p>
    </blockquote>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Para más información sobre el atributo HTML5 <code>data-*</code> visite <a href="http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes">http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes</a>.</p>
    </blockquote>
    </div>
    <div id="detección-de-navegadores-y-características" class="section level2">
    <h2><a href="#detección-de-navegadores-y-características"><span class="header-section-number">4.5</span> Detección de Navegadores y Características</a></h2>
    <p>Más allá que jQuery elimine la mayoría de las peculiaridades de JavaScript entre cada navegador, existen ocasiones en que se necesita ejecutar código en un navegador específico.</p>
    <p>Para este tipo de situaciones, jQuery ofrece el objeto <code>$.support</code> y <code>$.browser</code> (este último en desuso). Una completa documentación sobre estos objetos puede encontrarla en <a href="http://api.jquery.com/jQuery.support/">http://api.jquery.com/jQuery.support/</a> y <a href="http://api.jquery.com/jQuery.browser/">http://api.jquery.com/jQuery.browser/</a></p>
    <p>El objetivo de <code>$.support</code> es determinar qué características soporta el navegador web.</p>
    <p>El objeto <code>$.browser</code> permite detectar el tipo de navegador y su versión. Dicho objeto está en desuso (aunque en el corto plazo no está planificada su eliminación del núcleo de la biblioteca) y se recomienda utilizar al objeto <code>$.support</code> para estos propósitos.</p>
    </div>
    <div id="evitar-conflictos-con-otras-bibliotecas-javascript" class="section level2">
    <h2><a href="#evitar-conflictos-con-otras-bibliotecas-javascript"><span class="header-section-number">4.6</span> Evitar Conflictos con Otras Bibliotecas JavaScript</a></h2>
    <p>Si esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales también utilizan la variable <code>$</code>, 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.</p>
    <p>Cuando se pone a jQuery en modo “no-conflicto”, la biblioteca ofrece la opción de asignar un nombre para reemplazar a la variable <code>$</code>.</p>
    <p><strong>Poner a jQuery en modo no-conflicto</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;script src=<span class="st">&quot;prototype.js&quot;</span>&gt;&lt;<span class="ot">/script&gt;             // la biblioteca prototype</span>
    <span class="ot">                                                 // también utiliza $</span>
    <span class="ot">&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script</span>&gt;                <span class="co">// se carga jquery</span>
                                                     <span class="co">// en la página</span>
    &lt;script&gt;<span class="kw">var</span> $j = <span class="ot">jQuery</span>.<span class="fu">noConflict</span>();&lt;<span class="ot">/script&gt;   // se inicializa</span>
    <span class="ot">                                                 // el modo &quot;no-conflicto&quot;</span></code></pre>
    <p>También es posible seguir utilizando <code>$</code> conteniendo el código en una función anónima autoejecutable. Éste es un patrón estándar para la creación de extensiones para la biblioteca, ya que <code>$</code> queda encerrada dentro del alcance de la misma función anónima.</p>
    <p><strong>Utilizar $ dentro de una función anónima autoejecutable</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;script src=<span class="st">&quot;prototype.js&quot;</span>&gt;&lt;<span class="ot">/script&gt;</span>
    <span class="ot">&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script</span>&gt;
    &lt;script&gt;
    <span class="ot">jQuery</span>.<span class="fu">noConflict</span>();
    
    (<span class="kw">function</span>($) {
       <span class="co">// el código va aquí, pudiendo utilizar $</span>
    })(jQuery);
    &lt;<span class="ot">/script&gt;</span></code></pre>
    </div>
    </div>
    <div id="eventos" class="section level1">
    <h1><a href="#eventos"><span class="header-section-number">5</span> Eventos</a></h1>
    <div id="introducción-1" class="section level2">
    <h2><a href="#introducción-1"><span class="header-section-number">5.1</span> Introducción</a></h2>
    <p>jQuery provee métodos para asociar controladores de eventos (en inglés <em>event handlers</em>) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave <code>this</code> hace referencia al elemento en que el evento ocurre.</p>
    <p>Para más detalles sobre los eventos en jQuery, puede consultar <a href="http://api.jquery.com/category/events/">http://api.jquery.com/category/events/</a>.</p>
    <p>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 <a href="http://api.jquery.com/category/events/event-object/">http://api.jquery.com/category/events/event-object/</a>.</p>
    </div>
    <div id="vincular-eventos-a-elementos" class="section level2">
    <h2><a href="#vincular-eventos-a-elementos"><span class="header-section-number">5.2</span> Vincular Eventos a Elementos</a></h2>
    <p>jQuery ofrece métodos para la mayoría de los eventos — entre ellos <code>$.fn.click</code>, <code>$.fn.focus</code>, <code>$.fn.blur</code>, <code>$.fn.change</code>, etc. Estos últimos son formas reducidas del método <code>$.fn.on</code> de jQuery (<code>$.fn.bind</code> en versiones anteriores a jQuery 1.7). El método <code>$.fn.on</code> es útil para vincular (en inglés <em>binding</em>) 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.</p>
    <p><strong>Vincular un evento utilizando un método reducido</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;click&#39;</span>);
    });</code></pre>
    <p><strong>Vincular un evento utilizando el método <code>$.fn.on</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">on</span>(<span class="st">&#39;click&#39;</span>, <span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;click&#39;</span>);
    });</code></pre>
    <p><strong>Vincular un evento utilizando el método <code>$.fn.on</code> con información asociada</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;input&#39;</span>).<span class="fu">on</span>(
        <span class="st">&#39;click blur&#39;</span>,  <span class="co">// es posible vincular múltiples eventos al elemento</span>
        { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span> }, <span class="co">// se debe pasar la información asociada como argumento</span>
    
        <span class="kw">function</span>(eventObject) {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">eventObject</span>.<span class="fu">type</span>, <span class="ot">eventObject</span>.<span class="fu">data</span>);
            <span class="co">// registra el tipo de evento y la información asociada { foo : &#39;bar&#39; }</span>
        }
    );</code></pre>
    <div id="vincular-eventos-para-ejecutar-una-vez" class="section level3">
    <h3><a href="#vincular-eventos-para-ejecutar-una-vez"><span class="header-section-number">5.2.1</span> Vincular Eventos para Ejecutar una vez</a></h3>
    <p>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 <code>$.fn.one</code>.</p>
    <p><strong>Cambiar controladores utilizando el método <code>$.fn.one</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">one</span>(<span class="st">&#39;click&#39;</span>, <span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Se clickeó al elemento por primera vez&#39;</span>);
        <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">click</span>(<span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Se ha clickeado nuevamente&#39;</span>); });
    });</code></pre>
    <p>El método <code>$.fn.one</code> es útil para situaciones en que necesita ejecutar cierto código la primera vez que ocurre un evento en un elemento, pero no en los eventos sucesivos.</p>
    </div>
    <div id="desvincular-eventos" class="section level3">
    <h3><a href="#desvincular-eventos"><span class="header-section-number">5.2.2</span> Desvincular Eventos</a></h3>
    <p>Para desvincular (en ingles <em>unbind</em>) un controlador de evento, puede utilizar el método <code>$.fn.off</code> 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.</p>
    <p><strong>Desvincular todos los controladores del evento click en una selección</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">off</span>(<span class="st">&#39;click&#39;</span>);</code></pre>
    <p><strong>Desvincular un controlador particular del evento click</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;foo&#39;</span>); };
    <span class="kw">var</span> bar = <span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;bar&#39;</span>); };
    
    <span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">on</span>(<span class="st">&#39;click&#39;</span>, foo).<span class="fu">on</span>(<span class="st">&#39;click&#39;</span>, bar);
    <span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">off</span>(<span class="st">&#39;click&#39;</span>, bar); <span class="co">// foo esta atado aún al evento click</span></code></pre>
    </div>
    <div id="espacios-de-nombres-para-eventos" class="section level3">
    <h3><a href="#espacios-de-nombres-para-eventos"><span class="header-section-number">5.2.3</span> Espacios de Nombres para Eventos</a></h3>
    <p>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.</p>
    <p><strong>Asignar espacios de nombres a eventos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">on</span>(<span class="st">&#39;click.myNamespace&#39;</span>, <span class="kw">function</span>() { <span class="co">/* ... */</span> });
    <span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">off</span>(<span class="st">&#39;click.myNamespace&#39;</span>);
    <span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">off</span>(<span class="st">&#39;.myNamespace&#39;</span>); <span class="co">// desvincula todos los eventos con</span>
                                <span class="co">// el espacio de nombre &#39;myNamespace&#39;</span></code></pre>
    </div>
    <div id="vinculación-de-múltiples-eventos" class="section level3">
    <h3><a href="#vinculación-de-múltiples-eventos"><span class="header-section-number">5.2.4</span> Vinculación de Múltiples Eventos</a></h3>
    <p>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 <code>$.fn.on</code> 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.</p>
    <p><strong>Vincular múltiples eventos a un elemento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">on</span>({
        <span class="st">&#39;click&#39;</span>: <span class="kw">function</span>() { 
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;clickeado&#39;</span>); 
        },
        <span class="st">&#39;mouseover&#39;</span>: <span class="kw">function</span>() { 
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;sobrepasado&#39;</span>); 
        }
    });</code></pre>
    </div>
    </div>
    <div id="el-objeto-del-evento" class="section level2">
    <h2><a href="#el-objeto-del-evento"><span class="header-section-number">5.3</span> El Objeto del Evento</a></h2>
    <p>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 <em>preventDefault</em>. Sin embargo, también contiene varias propiedades y métodos útiles:</p>
    <dl>
    <dt>pageX, pageY</dt>
    <dd><p>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.</p>
    </dd>
    <dt>type</dt>
    <dd><p>El tipo de evento (por ejemplo “click”).</p>
    </dd>
    <dt>which</dt>
    <dd><p>El botón o tecla presionada.</p>
    </dd>
    <dt>data</dt>
    <dd><p>Alguna información pasada cuando el evento es ejecutado.</p>
    </dd>
    <dt>target</dt>
    <dd><p>El elemento DOM que inicializó el evento.</p>
    </dd>
    <dt>preventDefault()</dt>
    <dd><p>Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).</p>
    </dd>
    <dt>stopPropagation()</dt>
    <dd><p>Detiene la propagación del evento sobre otros elementos.</p>
    </dd>
    </dl>
    <p>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 <code>this</code>. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir <code>$(this)</code>, como se muestra a continuación:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);</code></pre>
    <p><strong>Cancelar que al hacer click en un enlace, éste se siga</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>(e) {
        <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);
        <span class="kw">if</span> (<span class="ot">$this</span>.<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>).<span class="fu">match</span>(<span class="st">&#39;evil&#39;</span>)) {
            <span class="ot">e</span>.<span class="fu">preventDefault</span>();
            <span class="ot">$this</span>.<span class="fu">addClass</span>(<span class="st">&#39;evil&#39;</span>);
        }
    });</code></pre>
    </div>
    <div id="ejecución-automática-de-controladores-de-eventos" class="section level2">
    <h2><a href="#ejecución-automática-de-controladores-de-eventos"><span class="header-section-number">5.4</span> Ejecución automática de Controladores de Eventos</a></h2>
    <p>A través del método <code>$.fn.trigger</code>, 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 (<em>binding</em>). De esta forma, podrá llamar a la función cuando lo desee en lugar de ejecutar <code>$.fn.trigger</code>.</p>
    <p><strong>Disparar un controlador de eventos de la forma correcta</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> foo = <span class="kw">function</span>(e) {
        <span class="kw">if</span> (e) {
            <span class="ot">console</span>.<span class="fu">log</span>(e);
        } <span class="kw">else</span> {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;esta ejecucción no provino desde un evento&#39;</span>);
        }
    };
    
    
    <span class="fu">$</span>(<span class="st">&#39;p&#39;</span>).<span class="fu">click</span>(foo);
    
    <span class="fu">foo</span>(); <span class="co">// en lugar de realizar $(&#39;p&#39;).trigger(&#39;click&#39;)</span></code></pre>
    </div>
    <div id="incrementar-el-rendimiento-con-la-delegación-de-eventos" class="section level2">
    <h2><a href="#incrementar-el-rendimiento-con-la-delegación-de-eventos"><span class="header-section-number">5.5</span> Incrementar el Rendimiento con la Delegación de Eventos</a></h2>
    <p>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.</p>
    <p>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.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>A partir de la versión 1.4.2, se introdujo <code>$.fn.delegate</code>, sin embargo a partir de la versión 1.7 es preferible utilizar el evento <code>$.fn.on</code> para la delegación de eventos.</p>
    </blockquote>
    <p><strong>Delegar un evento utilizando <code>$.fn.on</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myUnorderedList&#39;</span>).<span class="fu">on</span>(<span class="st">&#39;click&#39;</span>, <span class="st">&#39;li&#39;</span>, <span class="kw">function</span>(e) {
        <span class="kw">var</span> $myListItem = <span class="fu">$</span>(<span class="kw">this</span>);
        <span class="co">// ...</span>
    });</code></pre>
    <p><strong>Delegar un evento utilizando <code>$.fn.delegate</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myUnorderedList&#39;</span>).<span class="fu">delegate</span>(<span class="st">&#39;li&#39;</span>, <span class="st">&#39;click&#39;</span>, <span class="kw">function</span>(e) {
        <span class="kw">var</span> $myListItem = <span class="fu">$</span>(<span class="kw">this</span>);
        <span class="co">// ...</span>
    });</code></pre>
    <div id="desvincular-eventos-delegados" class="section level3">
    <h3><a href="#desvincular-eventos-delegados"><span class="header-section-number">5.5.1</span> Desvincular Eventos Delegados</a></h3>
    <p>Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculándolos. Para eso, utilice el método <code>$.fn.off</code> para eventos conectados con <code>$.fn.on</code>, y <code>$.fn.undelegate</code> para eventos conectados con <code>$.fn.delegate</code>. Al igual que cuando se realiza un vinculo, opcionalmente, se puede pasar el nombre de una función vinculada.</p>
    <p><strong>Desvincular eventos delegados</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myUnorderedList&#39;</span>).<span class="fu">off</span>(<span class="st">&#39;click&#39;</span>, <span class="st">&#39;li&#39;</span>);
    <span class="fu">$</span>(<span class="st">&#39;#myUnorderedList&#39;</span>).<span class="fu">undelegate</span>(<span class="st">&#39;li&#39;</span>, <span class="st">&#39;click&#39;</span>);</code></pre>
    </div>
    </div>
    <div id="funciones-auxiliares-de-eventos" class="section level2">
    <h2><a href="#funciones-auxiliares-de-eventos"><span class="header-section-number">5.6</span> Funciones Auxiliares de Eventos</a></h2>
    <p>jQuery ofrece dos funciones auxiliares para el trabajo con eventos:</p>
    <div id="fn.hover" class="section level3">
    <h3><a href="#fn.hover"><span class="header-section-number">5.6.1</span> <code>$.fn.hover</code></a></h3>
    <p>El método <code>$.fn.hover</code> permite pasar una o dos funciones que se ejecutarán cuando los eventos <code>mouseenter</code> y <code>mouseleave</code> 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 <code>mouseenter</code>, mientras que la segunda será ejecutada cuando ocurra <code>mouseleave</code>.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>A partir de la versión 1.4 de jQuery, el método requiere obligatoriamente dos funciones.</p>
    </blockquote>
    <p><strong>La función auxiliar hover</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#menu li&#39;</span>).<span class="fu">hover</span>(<span class="kw">function</span>() {
        <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">toggleClass</span>(<span class="st">&#39;hover&#39;</span>);
    });</code></pre>
    </div>
    <div id="fn.toggle" class="section level3">
    <h3><a href="#fn.toggle"><span class="header-section-number">5.6.2</span> <code>$.fn.toggle</code></a></h3>
    <p>Al igual que el método anterior, <code>$.fn.toggle</code> recibe dos o más funciones; cada vez que un evento ocurre, la función siguiente en la lista se ejecutará. Generalmente, <code>$.fn.toggle</code> 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.</p>
    <p><strong>La función auxiliar toggle</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;p.expander&#39;</span>).<span class="fu">toggle</span>(
        <span class="kw">function</span>() {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">prev</span>().<span class="fu">addClass</span>(<span class="st">&#39;open&#39;</span>);
        },
        <span class="kw">function</span>() {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">prev</span>().<span class="fu">removeClass</span>(<span class="st">&#39;open&#39;</span>);
        }
    );</code></pre>
    </div>
    </div>
    <div id="ejercicios-2" class="section level2">
    <h2><a href="#ejercicios-2"><span class="header-section-number">5.7</span> Ejercicios</a></h2>
    <div id="crear-una-sugerencia-para-una-caja-de-ingreso-de-texto" class="section level3">
    <h3><a href="#crear-una-sugerencia-para-una-caja-de-ingreso-de-texto"><span class="header-section-number">5.7.1</span> Crear una “Sugerencia” para una Caja de Ingreso de Texto</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejericio utilizando el archivo <code>/ejercicios/js/inputHint.js</code> 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:</p>
    <ol style="list-style-type: decimal">
    <li><p>Establecer el valor del elemento <em>input</em> igual al valor del elemento <em>label</em>.</p></li>
    <li><p>Añadir la clase “hint” al elemento <em>input</em>.</p></li>
    <li><p>Remover el elemento <em>label</em>.</p></li>
    <li><p>Vincular un evento <em>focus</em> en el <em>input</em> para remover el texto de sugerencia y la clase “hint”.</p></li>
    <li><p>Vincular un evento <em>blur</em> en el <em>input</em> para restaurar el texto de sugerencia y la clase “hint” en caso que no se haya ingresado algún texto.</p></li>
    </ol>
    <p>¿Qué otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?</p>
    </div>
    <div id="añadir-una-navegación-por-pestañas" class="section level3">
    <h3><a href="#añadir-una-navegación-por-pestañas"><span class="header-section-number">5.7.2</span> Añadir una Navegación por Pestañas</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejericio utilizando el archivo <code>/ejercicios/js/tabs.js</code> o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos <em>div.module</em>. Los pasos ha seguir son los siguientes:</p>
    <ol style="list-style-type: decimal">
    <li><p>Ocultar todos los elementos <em>div.module</em>.</p></li>
    <li><p>Crear una lista desordenada antes del primer <em>div.module</em> para utilizar como pestañas.</p></li>
    <li><p>Interactuar con cada div utilizando <code>$.fn.each</code>. Por cada uno, utilizar el texto del elemento <em>h2</em> como el texto para el ítem de la lista desordenada.</p></li>
    <li><p>Vincular un evento <em>click</em> a cada ítem de la lista de forma que:</p>
    <ul>
    <li><p>muestre el <em>div</em> correspondiente y oculte el otro;</p></li>
    <li><p>añada la clase “current” al ítem seleccionado;</p></li>
    <li><p>remueva la clase “current” del otro ítem de la lista.</p></li>
    </ul></li>
    <li><p>Finalmente, mostrar la primera pestaña.</p></li>
    </ol>
    </div>
    </div>
    </div>
    <div id="efectos" class="section level1">
    <h1><a href="#efectos"><span class="header-section-number">6</span> Efectos</a></h1>
    <div id="introducción-2" class="section level2">
    <h2><a href="#introducción-2"><span class="header-section-number">6.1</span> Introducción</a></h2>
    <p>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.</p>
    <p>Para una completa documentación sobre los diferentes tipos de efectos puede visitar la sección <code>effects</code>: <a href="http://api.jquery.com/category/effects/">http://api.jquery.com/category/effects/</a>.</p>
    </div>
    <div id="efectos-incorporados-en-la-biblioteca" class="section level2">
    <h2><a href="#efectos-incorporados-en-la-biblioteca"><span class="header-section-number">6.2</span> Efectos Incorporados en la Biblioteca</a></h2>
    <p>Los efectos más utilizado ya vienen incorporados dentro de la biblioteca en forma de métodos:</p>
    <dl>
    <dt>$.fn.show</dt>
    <dd><p>Muestra el elemento seleccionado.</p>
    </dd>
    <dt>$.fn.hide</dt>
    <dd><p>Oculta el elemento seleccionado.</p>
    </dd>
    <dt>$.fn.fadeIn</dt>
    <dd><p>De forma animada, cambia la opacidad del elemento seleccionado al 100%.</p>
    </dd>
    <dt>$.fn.fadeOut</dt>
    <dd><p>De forma animada, cambia la opacidad del elemento seleccionado al 0</p>
    </dd>
    <dt>$.fn.slideDown</dt>
    <dd><p>Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.</p>
    </dd>
    <dt>$.fn.slideUp</dt>
    <dd><p>Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.</p>
    </dd>
    <dt>$.fn.slideToggle</dt>
    <dd><p>Muestra o oculta el elemento seleccionado con un movimiento de deslizamiento vertical, dependiendo si actualmente el elemento está visible o no.</p>
    </dd>
    </dl>
    <p><strong>Uso básico de un efecto incorporado</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">show</span>();</code></pre>
    <div id="cambiar-la-duración-de-los-efectos" class="section level3">
    <h3><a href="#cambiar-la-duración-de-los-efectos"><span class="header-section-number">6.2.1</span> Cambiar la Duración de los Efectos</a></h3>
    <p>Con la excepción de <code>$.fn.show</code> y <code>$.fn.hide</code>, todos los métodos tienen una duración predeterminada de la animación en 400ms. Este valor es posible cambiarlo.</p>
    <p><strong>Configurar la duración de un efecto</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">fadeIn</span>(<span class="dv">300</span>);      <span class="co">// desvanecimiento en 300ms</span>
    <span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">fadeOut</span>(<span class="st">&#39;slow&#39;</span>);  <span class="co">// utilizar una definición de velocidad interna</span></code></pre>
    <div id="jquery.fx.speeds" class="section level4">
    <h4><a href="#jquery.fx.speeds"><span class="header-section-number">6.2.1.1</span> jQuery.fx.speeds</a></h4>
    <p>jQuery posee un objeto en <code>jQuery.fx.speeds</code> el cual contiene la velocidad predeterminada para la duración de un efecto, así como también los valores para las definiciones <em>“slow”</em> y <em>“fast”</em>.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">speeds: {
        <span class="dt">slow</span>: <span class="dv">600</span>,
        <span class="dt">fast</span>: <span class="dv">200</span>,
        <span class="co">// velocidad predeterminada</span>
        <span class="dt">_default</span>: <span class="dv">400</span>
    }</code></pre>
    <p>Por lo tanto, es posible sobrescribir o añadir nuevos valores al objeto. Por ejemplo, puede que quiera cambiar el valor predeterminado del efecto o añadir una velocidad personalizada.</p>
    <p><strong>Añadir velocidades personalizadas a <code>jQuery.fx.speeds</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">jQuery</span>.<span class="ot">fx</span>.<span class="ot">speeds</span>.<span class="fu">muyRapido</span> = <span class="dv">100</span>;
    <span class="ot">jQuery</span>.<span class="ot">fx</span>.<span class="ot">speeds</span>.<span class="fu">muyLento</span> = <span class="dv">2000</span>;</code></pre>
    </div>
    </div>
    <div id="realizar-una-acción-cuando-un-efecto-fue-ejecutado" class="section level3">
    <h3><a href="#realizar-una-acción-cuando-un-efecto-fue-ejecutado"><span class="header-section-number">6.2.2</span> Realizar una Acción Cuando un Efecto fue Ejecutado</a></h3>
    <p>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: <em>Las funciones de devolución de llamada</em> (en inglés <em>callback functions</em>) 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 <code>this</code> 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 <code>$(this)</code>.</p>
    <p><strong>Ejecutar cierto código cuando una animación haya concluido</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;div.old&#39;</span>).<span class="fu">fadeOut</span>(<span class="dv">300</span>, <span class="kw">function</span>() { <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">remove</span>(); });</code></pre>
    <p>Note que si la selección no retorna ningún elemento, la función nunca se ejecutará. Este problema lo puede resolver comprobando si la selección devuelve algún elemento; y en caso que no lo haga, ejecutar la función de devolución inmediatamente.</p>
    <p><strong>Ejecutar una función de devolución incluso si no hay elementos para animar</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $thing = <span class="fu">$</span>(<span class="st">&#39;#nonexistent&#39;</span>);
    
    <span class="kw">var</span> cb = <span class="kw">function</span>() {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;realizado&#39;</span>);
    };
    
    <span class="kw">if</span> (<span class="ot">$thing</span>.<span class="fu">length</span>) {
        <span class="ot">$thing</span>.<span class="fu">fadeIn</span>(<span class="dv">300</span>, cb);
    } <span class="kw">else</span> {
        <span class="fu">cb</span>();
    }</code></pre>
    </div>
    </div>
    <div id="efectos-personalizados-con-.fn.animate" class="section level2">
    <h2><a href="#efectos-personalizados-con-.fn.animate"><span class="header-section-number">6.3</span> Efectos Personalizados con <code>$.fn.animate</code></a></h2>
    <p>Es posible realizar animaciones en propiedades CSS utilizando el método <code>$.fn.animate</code>. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.</p>
    <p><strong>Efectos personalizados con <code>$.fn.animate</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;div.funtimes&#39;</span>).<span class="fu">animate</span>(
        {
            <span class="dt">left </span>: <span class="st">&quot;+=50&quot;</span>,
            <span class="dt">opacity </span>: <span class="fl">0.25</span>
        },
        <span class="dv">300</span>, <span class="co">// duration</span>
        <span class="kw">function</span>() { <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;realizado&#39;</span>); <span class="co">// función de devolución de llamada</span>
    });</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Las propiedades relacionadas al color no pueden ser animadas utilizando el método <code>$.fn.animate</code>, pero es posible hacerlo a través de la extensión <a href="http://plugins.jquery.com/files/jquery.color.js.txt">color plugin</a>. Más adelante en el libro de discutirá la utilización de extensiones.</p>
    </blockquote>
    <div id="easing" class="section level3">
    <h3><a href="#easing"><span class="header-section-number">6.3.1</span> Easing</a></h3>
    <p>[Definición: El concepto de <em>Easing</em> 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: <em>swing</em> y <em>linear</em>. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.</p>
    <p>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 <code>$.fn.animate</code>.</p>
    <p><strong>Transición de easing por cada propiedad</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;div.funtimes&#39;</span>).<span class="fu">animate</span>(
        {
            <span class="dt">left </span>: [ <span class="st">&quot;+=50&quot;</span>, <span class="st">&quot;swing&quot;</span> ],
            <span class="dt">opacity </span>: [ <span class="fl">0.25</span>, <span class="st">&quot;linear&quot;</span> ]
        },
        <span class="dv">300</span>
    );</code></pre>
    <p>Para más detalles sobre las opciones de easing, consulte <a href="http://api.jquery.com/animate/">http://api.jquery.com/animate/</a>.</p>
    </div>
    </div>
    <div id="control-de-los-efectos" class="section level2">
    <h2><a href="#control-de-los-efectos"><span class="header-section-number">6.4</span> Control de los Efectos</a></h2>
    <p>jQuery provee varias herramientas para el manejo de animaciones.</p>
    <dl>
    <dt>$.fn.stop</dt>
    <dd><p>Detiene las animaciones que se están ejecutando en el elemento seleccionado.</p>
    </dd>
    <dt>$.fn.delay</dt>
    <dd><p>Espera un tiempo determinado antes de ejecutar la próxima animación.</p>
    </dd>
    </dl>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;h1&#39;</span>).<span class="fu">show</span>(<span class="dv">300</span>).<span class="fu">delay</span>(<span class="dv">1000</span>).<span class="fu">hide</span>(<span class="dv">300</span>);</code></pre>
    <dl>
    <dt>jQuery.fx.off</dt>
    <dd>Si el valor es verdadero (<em>true</em>), no existirán transiciones para las animaciones; y a los elementos se le establecerá el estado final de la animación. Este método puede ser especialmente útil cuando se esta trabajando con navegadores antiguos.
    </dd>
    </dl>
    </div>
    <div id="ejercicios-3" class="section level2">
    <h2><a href="#ejercicios-3"><span class="header-section-number">6.5</span> Ejercicios</a></h2>
    <div id="mostrar-texto-oculto" class="section level3">
    <h3><a href="#mostrar-texto-oculto"><span class="header-section-number">6.5.1</span> Mostrar Texto Oculto</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/blog.js</code>. La tarea es añadir alguna interactividad a la sección blog de la página:</p>
    <ul>
    <li><p>al hacer click en alguno de los titulares del <em>div #blog</em>, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;</p></li>
    <li><p>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 <code>:visible</code>.</p></li>
    </ul>
    </div>
    <div id="crear-un-menú-desplegable" class="section level3">
    <h3><a href="#crear-un-menú-desplegable"><span class="header-section-number">6.5.2</span> Crear un Menú Desplegable</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/navigation.js</code>. La tarea es poder desplegar los ítems del menú superior de la página:</p>
    <ul>
    <li><p>al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;</p></li>
    <li><p>al no estar más encima de un ítem, el submenú se debe ocultar.</p></li>
    </ul>
    <p>Para poder realizarlo, utilice el método <code>$.fn.hover</code> para añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo <code>/ejercicios/css/styles.css</code> incluye una clase “hover” para este propósito)</p>
    </div>
    <div id="crear-un-slideshow" class="section level3">
    <h3><a href="#crear-un-slideshow"><span class="header-section-number">6.5.3</span> Crear un Slideshow</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/slideshow.js</code>. La tarea es añadir un slideshow a la página con JavaScript.</p>
    <ol style="list-style-type: decimal">
    <li><p>Mover el elemento <em>#slideshow</em> a la parte superior de la página.</p></li>
    <li><p>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 <em>fade out</em> y mostrando el siguiente con un efecto *fade in.</p></li>
    <li><p>Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero.</p></li>
    </ol>
    <p>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).</p>
    </div>
    </div>
    </div>
    <div id="ajax" class="section level1">
    <h1><a href="#ajax"><span class="header-section-number">7</span> Ajax</a></h1>
    <div id="introducción-3" class="section level2">
    <h2><a href="#introducción-3"><span class="header-section-number">7.1</span> Introducción</a></h2>
    <p>El método <em>XMLHttpRequest</em> (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 (<em>Asynchronous JavaScript and XML</em>), permite la creación de aplicaciones ricas en interactividad.</p>
    <p>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.</p>
    <p>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 <code>$.get()</code>, <code>$.getScript()</code>, <code>$.getJSON()</code>, <code>$.post()</code> y <code>$().load()</code>.</p>
    <p>A pesar que la definición de Ajax posee la palabra “XML”, la mayoría de las aplicaciones no utilizan dicho formato para el transporte de datos, sino que en su lugar se utiliza HTML plano o información en formato JSON (<em>JavaScript Object Notation</em>).</p>
    <p>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 (<em>JSON with Padding</em>), los cuales permiten una funcionalidad limitada a través de diferentes dominios.</p>
    </div>
    <div id="conceptos-clave" class="section level2">
    <h2><a href="#conceptos-clave"><span class="header-section-number">7.2</span> Conceptos Clave</a></h2>
    <p>La utilización correcta de los métodos Ajax requiere primero la comprensión de algunos conceptos clave.</p>
    <div id="get-vs.post" class="section level3">
    <h3><a href="#get-vs.post"><span class="header-section-number">7.2.1</span> GET vs. POST</a></h3>
    <p>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.</p>
    <p>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 <em>query string</em>).</p>
    <p>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.</p>
    </div>
    <div id="tipos-de-datos" class="section level3">
    <h3><a href="#tipos-de-datos"><span class="header-section-number">7.2.2</span> Tipos de Datos</a></h3>
    <p>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:</p>
    <dl>
    <dt>text</dt>
    <dd><p>Para el transporte de cadenas de caracteres simples.</p>
    </dd>
    <dt>html</dt>
    <dd><p>Para el transporte de bloques de código HTML que serán ubicados en la página.</p>
    </dd>
    <dt>script</dt>
    <dd><p>Para añadir un nuevo <em>script</em> con código JavaScript a la página.</p>
    </dd>
    <dt>json</dt>
    <dd><p>Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, vectores y objetos.</p>
    </dd>
    </dl>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>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 <a href="http://json.org">http://json.org</a> para obtener detalles sobre un correcto formateo de datos en JSON.</p>
    </blockquote>
    <p>Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en formato JSON.</p>
    <dl>
    <dt>jsonp</dt>
    <dd><p>Para transportar información JSON de un dominio a otro.</p>
    </dd>
    <dt>xml</dt>
    <dd><p>Para transportar información en formato XML.</p>
    </dd>
    </dl>
    <p><em>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.</em></p>
    </div>
    <div id="asincronismo" class="section level3">
    <h3><a href="#asincronismo"><span class="header-section-number">7.2.3</span> Asincronismo</a></h3>
    <p>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:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> response;
    <span class="ot">$</span>.<span class="fu">get</span>(<span class="st">&#39;foo.php&#39;</span>, <span class="kw">function</span>(r) { response = r; });
    <span class="ot">console</span>.<span class="fu">log</span>(response); <span class="co">// indefinido (undefined)</span></code></pre>
    <p>En su lugar, es necesario especificar una función de devolución de llamada; dicha función se ejecutará cuando la petición se haya realizado de forma correcta ya que es en ese momento cuando la respuesta del servidor esta lista.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">get</span>(<span class="st">&#39;foo.php&#39;</span>, <span class="kw">function</span>(response) { <span class="ot">console</span>.<span class="fu">log</span>(response); });</code></pre>
    </div>
    <div id="políticas-de-mismo-origen-y-jsonp" class="section level3">
    <h3><a href="#políticas-de-mismo-origen-y-jsonp"><span class="header-section-number">7.2.4</span> Políticas de Mismo Origen y JSONP</a></h3>
    <p>En general, las peticiones Ajax están limitadas a utilizar el mismo protocolo (<em>http</em> o <em>https</em>), 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.</p>
    <p>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 <code>script</code> que puede ser cargado utilizando la etiqueta <code>&lt;script&gt;</code>, evitando así la limitación de realizar peticiones desde el mismo dominio. Dicha respuesta contendrá la información solicitada, contenida en una función</p>
    </div>
    <div id="ajax-y-firebug" class="section level3">
    <h3><a href="#ajax-y-firebug"><span class="header-section-number">7.2.5</span> Ajax y Firebug</a></h3>
    <p>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 &gt; 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.</p>
    </div>
    </div>
    <div id="métodos-ajax-de-jquery" class="section level2">
    <h2><a href="#métodos-ajax-de-jquery"><span class="header-section-number">7.3</span> Métodos Ajax de jQuery</a></h2>
    <p>Como se indicó anteriormente, jQuery posee varios métodos para trabajar con Ajax. Sin embargo, todos están basados en el método <code>$.ajax</code>, 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.</p>
    <p><em>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.</em></p>
    <div id="ajax-1" class="section level3">
    <h3><a href="#ajax-1"><span class="header-section-number">7.3.1</span> $.ajax</a></h3>
    <p>El método <code>$.ajax</code> 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 <a href="http://api.jquery.com/jQuery.ajax/">http://api.jquery.com/jQuery.ajax/</a> para consultar la documentación sobre las opciones disponibles en el método.</p>
    <p><strong>Utilizar el método $.ajax</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="co">// la URL para la petición</span>
        <span class="dt">url </span>: <span class="st">&#39;post.php&#39;</span>,
    
        <span class="co">// la información a enviar</span>
        <span class="co">// (también es posible utilizar una cadena de datos)</span>
        <span class="dt">data </span>: { <span class="dt">id </span>: <span class="dv">123</span> },
    
        <span class="co">// especifica si será una petición POST o GET</span>
        <span class="dt">type </span>: <span class="st">&#39;GET&#39;</span>,
    
        <span class="co">// el tipo de información que se espera de respuesta</span>
        <span class="dt">dataType </span>: <span class="st">&#39;json&#39;</span>,
    
        <span class="co">// código a ejecutar si la petición es satisfactoria;</span>
        <span class="co">// la respuesta es pasada como argumento a la función</span>
        <span class="dt">success </span>: <span class="kw">function</span>(json) {
            <span class="fu">$</span>(<span class="st">&#39;&lt;h1/&gt;&#39;</span>).<span class="fu">text</span>(<span class="ot">json</span>.<span class="fu">title</span>).<span class="fu">appendTo</span>(<span class="st">&#39;body&#39;</span>);
            <span class="fu">$</span>(<span class="st">&#39;&lt;div class=&quot;content&quot;/&gt;&#39;</span>)
                .<span class="fu">html</span>(<span class="ot">json</span>.<span class="fu">html</span>).<span class="fu">appendTo</span>(<span class="st">&#39;body&#39;</span>);
        },
    
        <span class="co">// código a ejecutar si la petición falla;</span>
        <span class="co">// son pasados como argumentos a la función</span>
        <span class="co">// el objeto jqXHR (extensión de XMLHttpRequest), un texto con el estatus</span>
        <span class="co">// de la petición y un texto con la descripción del error que haya dado el servidor</span>
        <span class="dt">error </span>: <span class="kw">function</span>(jqXHR, status, error) {
            <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
        },
    
        <span class="co">// código a ejecutar sin importar si la petición falló o no</span>
        <span class="dt">complete </span>: <span class="kw">function</span>(jqXHR, status) {
            <span class="fu">alert</span>(<span class="st">&#39;Petición realizada&#39;</span>);
        }
    }); </code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Una aclaración sobre el parámetro <code>dataType</code>: 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 <code>Content-type</code> es exacta al tipo de dato. Por ejemplo, para información en formato JSON, la cabecera <code>Content-type</code> debería ser <code>application/json</code>.</p>
    </blockquote>
    <div id="opciones-del-método-.ajax" class="section level4">
    <h4><a href="#opciones-del-método-.ajax"><span class="header-section-number">7.3.1.1</span> Opciones del método <code>$.ajax</code></a></h4>
    <p>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 <a href="http://api.jquery.com/jQuery.ajax/">http://api.jquery.com/jQuery.ajax/</a>; a continuación se muestran las más comunes:</p>
    <dl>
    <dt>async</dt>
    <dd><p>Establece si la petición será asíncrona o no. De forma predeterminada el valor es <code>true</code>. Debe tener en cuenta que si la opción se establece en <code>false</code>, la petición bloqueará la ejecución de otros códigos hasta que dicha petición haya finalizado.</p>
    </dd>
    <dt>cache</dt>
    <dd><p>Establece si la petición será guardada en la cache del navegador. De forma predeterminada es <code>true</code> para todos los <em>dataType</em> excepto para “<em>script</em>” y “<em>jsonp</em>”. Cuando posee el valor <code>false</code>, se agrega una cadena de caracteres anti-cache al final de la URL de la petición.</p>
    </dd>
    <dt>complete</dt>
    <dd><p>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 <code>XMLHTTPRequest</code>) y un texto especificando el estatus de la misma petición (<code>success</code>, <code>notmodified</code>, <code>error</code>, <code>timeout</code>, <code>abort</code>, o <code>parsererror</code>).</p>
    </dd>
    <dt>context</dt>
    <dd><p>Establece el alcance en que la/las funciones de devolución de llamada se ejecutaran (por ejemplo, define el significado de <code>this</code> dentro de las funciones). De manera predeterminada <code>this</code> hace referencia al objeto originalmente pasado al método <code>$.ajax</code>.</p>
    </dd>
    <dt>data</dt>
    <dd><p>Establece la información que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de datos (por ejemplo <code>foo=bar&amp;baz=bim</code>.)</p>
    </dd>
    <dt>dataType</dt>
    <dd><p>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 <em>MIME</em> que posee la respuesta.</p>
    </dd>
    <dt>error</dt>
    <dd><p>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 <code>XMLHTTPRequest</code>), un texto especificando el estatus de la misma petición (<code>timeout</code>, <code>error</code>, <code>abort</code>, o <code>parsererror</code>) y un texto con la descripción del error que haya enviado el servidor (por ejemplo <code>Not Found</code> o <code>Internal Server Error</code>).</p>
    </dd>
    <dt>jsonp</dt>
    <dd><p>Establece el nombre de la función de devolución de llamada a enviar cuando se realiza una petición <em>JSONP</em>. De forma predeterminada el nombre es “<em>callback</em></p>
    </dd>
    <dt>success</dt>
    <dd><p>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 <code>XMLHTTPRequest</code>), 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 <em>dataType</em> sea <em>JSON</em>), el estatus de la misma.</p>
    </dd>
    <dt>timeout</dt>
    <dd><p>Establece un tiempo en milisegundos para considerar a una petición como fallada.</p>
    </dd>
    <dt>traditional</dt>
    <dd><p>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 <a href="http://api.jquery.com/jQuery.param/">http://api.jquery.com/jQuery.param/</a>.</p>
    </dd>
    <dt>type</dt>
    <dd><p>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.</p>
    </dd>
    <dt>url</dt>
    <dd><p>Establece la URL en donde se realiza la petición.</p>
    </dd>
    </dl>
    <p>La opción <code>url</code> es obligatoria para el método <code>$.ajax</code>;</p>
    <p>Como se comentó anteriormente, para una lista completa de las opciones disponibles, puede consultar <a href="http://api.jquery.com/jQuery.ajax/">http://api.jquery.com/jQuery.ajax/</a>.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>A partir de la versión 1.5 de jQuery, las opciones <code>beforeSend</code>, <code>success</code>, <code>error</code> y <code>complete</code> reciben como uno de sus argumentos el objeto <code>jqXHR</code> siendo este una extensión del objeto nativo <code>XMLHTTPRequest</code>. El objeto <code>jqXHR</code> 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 <em>MIME</em> que posee la respuesta que se espera por parte del servidor. Para información sobre el objeto <code>jqXHR</code> puede consultar <a href="http://api.jquery.com/jQuery.ajax/#jqXHR">http://api.jquery.com/jQuery.ajax/#jqXHR</a>.</p>
    </blockquote>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>A partir de la versión 1.5 de jQuery, las opciones <code>success</code>, <code>error</code> y <code>complete</code> pueden recibir un vector con varias funciones de devolución, las cuales serán ejecutadas en turnos.</p>
    </blockquote>
    </div>
    </div>
    <div id="métodos-convenientes" class="section level3">
    <h3><a href="#métodos-convenientes"><span class="header-section-number">7.3.2</span> Métodos Convenientes</a></h3>
    <p>En caso que no quiera utilizar el método <code>$.ajax</code>, 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 <code>$.ajax</code> con valores pre-establecidos de configuración).</p>
    <p>Los métodos que provee la biblioteca son:</p>
    <dl>
    <dt>$.get</dt>
    <dd><p>Realiza una petición GET a una URL provista.</p>
    </dd>
    <dt>$.post</dt>
    <dd><p>Realiza una petición POST a una URL provista.</p>
    </dd>
    <dt>$.getScript</dt>
    <dd><p>Añade un script a la página.</p>
    </dd>
    <dt>$.getJSON</dt>
    <dd><p>Realiza una petición GET a una URL provista y espera que un dato JSON sea devuelto.</p>
    </dd>
    </dl>
    <p>Los métodos deben tener los siguientes argumentos, en orden:</p>
    <dl>
    <dt>url</dt>
    <dd><p>La URL en donde se realizará la petición. Su valor es obligatorio.</p>
    </dd>
    <dt>data</dt>
    <dd><p>La información que se enviará al servidor. Su valor es opcional y puede ser tanto un objeto como una cadena de datos (como <code>foo=bar&amp;baz=bim</code>).</p>
    </dd>
    </dl>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Esta opción no es valida para el método <code>$.getScript</code>.</p>
    </blockquote>
    <dl>
    <dt>success callback</dt>
    <dd><p>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.</p>
    </dd>
    <dt>data type</dt>
    <dd><p>El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.</p>
    </dd>
    </dl>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Esta opción es solo aplicable para métodos en que no está especificado el tipo de dato en el nombre del mismo método.</p>
    </blockquote>
    <p><strong>Utilizar métodos convenientes para peticiones Ajax</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// obtiene texto plano o html</span>
    <span class="ot">$</span>.<span class="fu">get</span>(<span class="st">&#39;/users.php&#39;</span>, { <span class="dt">userId </span>: <span class="dv">1234</span> }, <span class="kw">function</span>(resp) {
        <span class="ot">console</span>.<span class="fu">log</span>(resp);
    });
    
    <span class="co">// añade un script a la página y luego ejecuta la función especificada</span>
    <span class="ot">$</span>.<span class="fu">getScript</span>(<span class="st">&#39;/static/js/myScript.js&#39;</span>, <span class="kw">function</span>() {
        <span class="fu">functionFromMyScript</span>();
    });
    
    <span class="co">// obtiene información en formato JSON desde el servidor</span>
    <span class="ot">$</span>.<span class="fu">getJSON</span>(<span class="st">&#39;/details.php&#39;</span>, <span class="kw">function</span>(resp) {
        <span class="ot">$</span>.<span class="fu">each</span>(resp, <span class="kw">function</span>(k, v) {
            <span class="ot">console</span>.<span class="fu">log</span>(k + <span class="st">&#39; : &#39;</span> + v);
        });
    });</code></pre>
    </div>
    <div id="fn.load" class="section level3">
    <h3><a href="#fn.load"><span class="header-section-number">7.3.3</span> <code>$.fn.load</code></a></h3>
    <p>El método <code>$.fn.load</code> 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.</p>
    <p><strong>Utilizar el método <code>$.fn.load</code> para rellenar un elemento</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#newContent&#39;</span>).<span class="fu">load</span>(<span class="st">&#39;/foo.html&#39;</span>);</code></pre>
    <p><strong>Utilizar el método <code>$.fn.load</code> para rellenar un elemento basado en un selector</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#newContent&#39;</span>).<span class="fu">load</span>(<span class="st">&#39;/foo.html #myDiv h1:first&#39;</span>, <span class="kw">function</span>(html) {
      <span class="fu">alert</span>(<span class="st">&#39;Contenido actualizado&#39;</span>);
    });</code></pre>
    </div>
    </div>
    <div id="ajax-y-formularios" class="section level2">
    <h2><a href="#ajax-y-formularios"><span class="header-section-number">7.4</span> Ajax y Formularios</a></h2>
    <p>Las capacidades de jQuery con Ajax pueden ser especialmente útiles para el trabajo con formularios. Por ejemplo, la extensión <a href="http://jquery.malsup.com/form/">jQuery Form Plugin</a> 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: <code>$.fn.serialize</code> y <code>$.fn.serializeArray</code>.</p>
    <p><strong>Transformar información de un formulario a una cadena de datos</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myForm&#39;</span>).<span class="fu">serialize</span>();</code></pre>
    <p><strong>Crear un vector de objetos conteniendo información de un formulario</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myForm&#39;</span>).<span class="fu">serializeArray</span>();
    
    <span class="co">// crea una estructura como esta:</span>
    [
        { <span class="dt">name </span>: <span class="st">&#39;field1&#39;</span>, <span class="dt">value </span>: <span class="dv">123</span> },
        { <span class="dt">name </span>: <span class="st">&#39;field2&#39;</span>, <span class="dt">value </span>: <span class="st">&#39;hello world&#39;</span> }
    ]</code></pre>
    </div>
    <div id="trabajar-con-jsonp" class="section level2">
    <h2><a href="#trabajar-con-jsonp"><span class="header-section-number">7.5</span> Trabajar con JSONP</a></h2>
    <p>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 <em>Application programming interface</em>) predefinida. Un servicio particular que permite obtener información en formato JSONP es <a href="http://developer.yahoo.com/yql/console/">Yahoo! Query Language</a>, el cual se utiliza a continuación para obtener, por ejemplo, noticias sobre gatos:</p>
    <p><strong>Utilizar YQL y JSONP</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;http://query.yahooapis.com/v1/public/yql&#39;</span>,
    
        <span class="co">// se agrega como parámetro el nombre de la función de devolución,</span>
        <span class="co">// según se especifica en el servicio de YQL</span>
        <span class="dt">jsonp </span>: <span class="st">&#39;callback&#39;</span>,
    
        <span class="co">// se le indica a jQuery que se espera información en formato JSONP</span>
        <span class="dt">dataType </span>: <span class="st">&#39;jsonp&#39;</span>,
    
        <span class="co">// se le indica al servicio de YQL cual es la información</span>
        <span class="co">// que se desea y que se la quiere en formato JSON</span>
        <span class="dt">data </span>: {
            <span class="dt">q </span>: <span class="st">&#39;select title,abstract,url from search.news where query=&quot;cat&quot;&#39;</span>,
            <span class="dt">format </span>: <span class="st">&#39;json&#39;</span>
        },
    
        <span class="co">// se ejecuta una función al ser satisfactoria la petición</span>
        <span class="dt">success </span>: <span class="kw">function</span>(response) {
            <span class="ot">console</span>.<span class="fu">log</span>(response);
        }
    });</code></pre>
    <p>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 “<em>callback</em>”, según lo especifica YQL) y el resultado final será como una petición Ajax normal.</p>
    </div>
    <div id="eventos-ajax" class="section level2">
    <h2><a href="#eventos-ajax"><span class="header-section-number">7.6</span> Eventos Ajax</a></h2>
    <p>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 <a href="http://docs.jquery.com/Ajax_Events">http://docs.jquery.com/Ajax_Events</a>.</p>
    <p><strong>Mostrar/Ocultar un indicador utilizando Eventos Ajax</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#loading_indicator&#39;</span>)
        .<span class="fu">ajaxStart</span>(<span class="kw">function</span>() { <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">show</span>(); })
        .<span class="fu">ajaxStop</span>(<span class="kw">function</span>() { <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">hide</span>(); });</code></pre>
    </div>
    <div id="ejercicios-4" class="section level2">
    <h2><a href="#ejercicios-4"><span class="header-section-number">7.7</span> Ejercicios</a></h2>
    <div id="cargar-contenido-externo" class="section level3">
    <h3><a href="#cargar-contenido-externo"><span class="header-section-number">7.7.1</span> Cargar Contenido Externo</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/load.js</code>. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.</p>
    <ol style="list-style-type: decimal">
    <li><p>Crear un elementos <em>div</em> después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando <code>$.fn.data</code>.</p></li>
    <li><p>Vincular un evento click al titulo, el cual utilizará el método <code>$.fn.load</code> para cargar en cada <em>div</em> creado el contenido apropiado desde el archivo <code>/ejercicios/data/blog.html</code>. No olvide de deshabilitar el comportamiento predeterminado del evento <em>click</em>.</p></li>
    </ol>
    <p>Notar que cada titulo de artículo de blog en <code>index.html</code> 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 <code>$.fn.load</code>:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> href = <span class="st">&#39;blog.html#post1&#39;</span>;
    <span class="kw">var</span> tempArray = <span class="ot">href</span>.<span class="fu">split</span>(<span class="st">&#39;#&#39;</span>);
    <span class="kw">var</span> id = <span class="st">&#39;#&#39;</span> + tempArray[<span class="dv">1</span>];</code></pre>
    <p>Recuerde utilizar <code>console.log</code> para asegurarse que esta realizando lo correcto.</p>
    </div>
    <div id="cargar-contenido-utilizando-json" class="section level3">
    <h3><a href="#cargar-contenido-utilizando-json"><span class="header-section-number">7.7.2</span> Cargar Contenido Utilizando JSON</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/specials.js</code>. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.</p>
    <ol style="list-style-type: decimal">
    <li><p>Añadir un elemento <em>div</em> después del formulario que se encuentra dentro del elemento <em>#specials</em>; allí será el lugar en donde se colocará la información a obtener.</p></li>
    <li><p>Vincular el evento <em>change</em> en el elemento <em>select</em>; cuando se realiza un cambio en la selección, enviar una petición Ajax a <code>/ejercicios/data/specials.json</code>.</p></li>
    <li><p>Cuando la petición devuelve una respuesta, utilizar el valor seleccionado en el select (ayuda: <code>$.fn.val</code>) para buscar la información correspondiente en la respuesta JSON.</p></li>
    <li><p>Añadir algún HTML con la información obtenida en el <em>div</em> creado anteriormente.</p></li>
    <li><p>Finalmente remover el botón <em>submit</em> del formulario.</p></li>
    </ol>
    <p>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?</p>
    </div>
    </div>
    </div>
    <div id="extensiones" class="section level1">
    <h1><a href="#extensiones"><span class="header-section-number">8</span> Extensiones</a></h1>
    <div id="qué-es-una-extensión" class="section level2">
    <h2><a href="#qué-es-una-extensión"><span class="header-section-number">8.1</span> ¿Qué es una Extensión?</a></h2>
    <p>Una extensión de jQuery es simplemente un nuevo método que se utilizará para extender el prototipo (<em>prototype</em>) 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 <code>jQuery()</code>, es creado un nuevo objeto jQuery con todos los métodos heredados.</p>
    <p>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 <code>fadeOut</code> o <code>addClass</code> de la biblioteca.</p>
    <p>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.</p>
    </div>
    <div id="crear-una-extensión-básica" class="section level2">
    <h2><a href="#crear-una-extensión-básica"><span class="header-section-number">8.2</span> Crear una Extensión Básica</a></h2>
    <p>El código para realizar una extensión básica es la siguiente:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>($){
        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">myNewPlugin</span> = <span class="kw">function</span>() {
            <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">each</span>(<span class="kw">function</span>(){
                <span class="co">// realizar algo</span>
            });
        };
    })(jQuery);</code></pre>
    <p>La extensión del prototipo del objeto jQuery ocurre en la siguiente línea:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">myNewPlugin</span> = <span class="kw">function</span>() { <span class="co">//...</span></code></pre>
    <p>La cual es encerrada en una función autoejecutable:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>($){
        <span class="co">//...</span>
    })(jQuery);</code></pre>
    <p>Esta posee la ventaja de crear un alcance “privado”, permitiendo utilizar el signo dolar sin tener la preocupación de que otra biblioteca también este utilizando dicho signo.</p>
    <p>Por ahora, internamente la extensión queda:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">myNewPlugin</span> = <span class="kw">function</span>() {
        <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">each</span>(<span class="kw">function</span>(){
            <span class="co">// realizar algo</span>
        });
    };</code></pre>
    <p>Dentro de ella, la palabra clave <code>this</code> hace referencia al objeto jQuery en donde la extensión es llamada.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> somejQueryObject = <span class="fu">$</span>(<span class="st">&#39;#something&#39;</span>);
    
    <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">myNewPlugin</span> = <span class="kw">function</span>() {
        <span class="fu">alert</span>(<span class="kw">this</span> === somejQueryObject);
    };
    
    <span class="ot">somejQueryObject</span>.<span class="fu">myNewPlugin</span>(); <span class="co">// muestra un alerta con &#39;true&#39;</span></code></pre>
    <p>El objeto jQuery, normalmente, contendrá referencias a varios elementos DOM, es por ello que a menudo se los refiere como una colección.</p>
    <p>Para interactuar con la colección de elementos, es necesario realizar un bucle, el cual se logra fácilmente con el método <code>each()</code>:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">myNewPlugin</span> = <span class="kw">function</span>() {
        <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">each</span>(<span class="kw">function</span>(){
    
        });
    };</code></pre>
    <p>Al igual que otros métodos, <code>each()</code> devuelve un objeto jQuery, permitiendo utilizar el encadenado de métodos (<code>$(...).css().attr()...</code>). Para no romper esta convención, la extensión a crear deberá devolver el objeto <code>this</code>, para permitir seguir con el encadenamiento. A continuación se muestra un pequeño ejemplo:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>($){
        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">showLinkLocation</span> = <span class="kw">function</span>() {
            <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">filter</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">each</span>(<span class="kw">function</span>(){
                <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">append</span>(
                    <span class="st">&#39; (&#39;</span> + <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">attr</span>(<span class="st">&#39;href&#39;</span>) + <span class="st">&#39;)&#39;</span>
                );
            });
        };
    })(jQuery);
    
    <span class="co">// Ejemplo de utilización:</span>
    <span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">showLinkLocation</span>();</code></pre>
    <p>La extensión modificará todos los enlaces dentro de la colección de elementos y les añadirá el valor de su atributo <code>href</code> entre paréntesis.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;!-- Antes que la extensión sea llamada: --&gt;
    &lt;a href=<span class="st">&quot;page.html&quot;</span>&gt;Foo&lt;<span class="ot">/a&gt;</span>
    
    <span class="ot">&lt;!-- Después que la extensión es llamada: --&gt;</span>
    <span class="ot">&lt;a href=&quot;page.html&quot;&gt;Foo </span><span class="fl">(</span><span class="ot">page.html</span><span class="fl">)</span><span class="ot">&lt;/a</span>&gt;</code></pre>
    <p>También es posible optimizar la extensión:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>($){
        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">showLinkLocation</span> = <span class="kw">function</span>() {
            <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">filter</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">append</span>(<span class="kw">function</span>(){
                  <span class="kw">return</span> <span class="st">&#39; (&#39;</span> + <span class="kw">this</span>.<span class="fu">href</span> + <span class="st">&#39;)&#39;</span>;
            });
        };
    })(jQuery);</code></pre>
    <p>El método <code>append</code> permite especificar una función de devolución de llamada, y el valor devuelto determinará que es lo que se añadirá a cada elemento. Note también que no se utiliza el método <code>attr</code>, debido a que la API nativa del DOM permite un fácil acceso a la propiedad <code>href</code>.</p>
    <p>A continuación se muestra otro ejemplo de extensión. En este caso, no se requiere realizar un bucle en cada elemento ya que se delega la funcionalidad directamente en otro método jQuery:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>($){
        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">fadeInAndAddClass</span> = <span class="kw">function</span>(duration, className) {
            <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">fadeIn</span>(duration, <span class="kw">function</span>(){
                <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">addClass</span>(className);
            });
        };
    })(jQuery);
    
    <span class="co">// Ejemplo de utilización:</span>
    <span class="fu">$</span>(<span class="st">&#39;a&#39;</span>).<span class="fu">fadeInAndAddClass</span>(<span class="dv">400</span>, <span class="st">&#39;finishedFading&#39;</span>);</code></pre>
    </div>
    <div id="encontrar-y-evaluar-extensiones" class="section level2">
    <h2><a href="#encontrar-y-evaluar-extensiones"><span class="header-section-number">8.3</span> Encontrar y Evaluar Extensiones</a></h2>
    <p>Uno de los aspectos más populares de jQuery es la diversidad de extensiones que existen.</p>
    <p>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.</p>
    <p>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.</p>
    <p>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) <a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/">Signs of a poorly written jQuery plugin</a> por Remy Sharp.</p>
    <p>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).</p>
    </div>
    <div id="escribir-extensiones" class="section level2">
    <h2><a href="#escribir-extensiones"><span class="header-section-number">8.4</span> Escribir Extensiones</a></h2>
    <p>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.</p>
    <p>La mayoría de las extensiones son métodos creados dentro del espacio de nombres <code>$.fn</code>. jQuery garantiza que un método llamado sobre el objeto jQuery sea capaz de acceder a dicho objeto a través de <code>this</code>. En contrapartida, la extensión debe garantizar de devolver el mismo objeto recibido (a menos que se explicite lo contrario).</p>
    <p>A continuación se muestra un ejemplo:</p>
    <p><strong>Crear una extensión para añadir y remover una clase en un elemento al suceder el evento hover</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// definición de la extensión</span>
    (<span class="kw">function</span>($){
        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">hoverClass</span> = <span class="kw">function</span>(c) {
            <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">hover</span>(
                <span class="kw">function</span>() { <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">toggleClass</span>(c); }
            );
        };
    })(jQuery);
    
    <span class="co">// utilizar la extensión</span>
    <span class="fu">$</span>(<span class="st">&#39;li&#39;</span>).<span class="fu">hoverClass</span>(<span class="st">&#39;hover&#39;</span>);</code></pre>
    <p>Para más información sobre el desarrollo de extensiones, puede consultar el artículo (en inglés) <a href="http://www.learningjquery.com/2007/10/a-plugin-development-pattern">A Plugin Development Pattern</a> de Mike Alsup. En dicho artículo, se desarrolla una extensión llamada <code>$.fn.hilight</code>, la cual provee soporte para la extensión <a href="http://plugins.jquery.com/project/metadata">metadata</a> (en caso de estar presente) y provee un método descentralizado para establecer opciones globales o de instancias de la extensión.</p>
    <p><strong>El patrón de desarrollo de extensiones para jQuery explicado por Mike Alsup</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//</span>
    <span class="co">// crear una clausura</span>
    <span class="co">//</span>
    (<span class="kw">function</span>($) {
      <span class="co">//</span>
      <span class="co">// definición de la extensión</span>
      <span class="co">//</span>
      <span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">hilight</span> = <span class="kw">function</span>(options) {
        <span class="fu">debug</span>(<span class="kw">this</span>);
        <span class="co">// generación de las opciones principales antes de interactuar</span>
        <span class="kw">var</span> opts = <span class="ot">$</span>.<span class="fu">extend</span>({}, <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">hilight</span>.<span class="fu">defaults</span>, options);
        <span class="co">// se iteractua y formatea cada elemento</span>
        <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">each</span>(<span class="kw">function</span>() {
          $this = <span class="fu">$</span>(<span class="kw">this</span>);
          <span class="co">// generación de las opciones especificas de cada elemento</span>
          <span class="kw">var</span> o = <span class="ot">$</span>.<span class="fu">meta</span> ? <span class="ot">$</span>.<span class="fu">extend</span>({}, opts, <span class="ot">$this</span>.<span class="fu">data</span>()) : opts;
          <span class="co">// actualización de los estilos de cada elemento</span>
          <span class="ot">$this</span>.<span class="fu">css</span>({
            <span class="dt">backgroundColor</span>: <span class="ot">o</span>.<span class="fu">background</span>,
            <span class="dt">color</span>: <span class="ot">o</span>.<span class="fu">foreground</span>
          });
          <span class="kw">var</span> markup = <span class="ot">$this</span>.<span class="fu">html</span>();
          <span class="co">// se llama a la función de formateo</span>
          markup = <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">hilight</span>.<span class="fu">format</span>(markup);
          <span class="ot">$this</span>.<span class="fu">html</span>(markup);
        });
      };
      <span class="co">//</span>
      <span class="co">// función privada para realizar depuración</span>
      <span class="co">//</span>
      <span class="kw">function</span> <span class="fu">debug</span>($obj) {
        <span class="kw">if</span> (<span class="ot">window</span>.<span class="fu">console</span> &amp;&amp; <span class="ot">window</span>.<span class="ot">console</span>.<span class="fu">log</span>)
          <span class="ot">window</span>.<span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;hilight selection count: &#39;</span> + <span class="ot">$obj</span>.<span class="fu">size</span>());
      };
      <span class="co">//</span>
      <span class="co">// definir y exponer la función de formateo</span>
      <span class="co">//</span>
      <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">hilight</span>.<span class="fu">format</span> = <span class="kw">function</span>(txt) {
        <span class="kw">return</span> <span class="st">&#39;&lt;strong&gt;&#39;</span> + txt + <span class="st">&#39;&lt;/strong&gt;&#39;</span>;
      };
      <span class="co">//</span>
      <span class="co">// opciones predeterminadas</span>
      <span class="co">//</span>
      <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">hilight</span>.<span class="fu">defaults</span> = {
        <span class="dt">foreground</span>: <span class="st">&#39;red&#39;</span>,
        <span class="dt">background</span>: <span class="st">&#39;yellow&#39;</span>
      };
    <span class="co">//</span>
    <span class="co">// fin de la clausura</span>
    <span class="co">//</span>
    })(jQuery);</code></pre>
    </div>
    <div id="escribir-extensiones-con-mantenimiento-de-estado-utilizando-widget-factory-de-jquery-ui" class="section level2">
    <h2><a href="#escribir-extensiones-con-mantenimiento-de-estado-utilizando-widget-factory-de-jquery-ui"><span class="header-section-number">8.5</span> Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory de jQuery UI</a></h2>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Esta sección esta basada, con permiso del autor, en el artículo <a href="http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/">Building Stateful jQuery Plugins</a> de Scott Gonzalez.</p>
    </blockquote>
    <p>Mientras que la mayoría de las extensiones para jQuery son sin mantenimiento de estado (en inglés <em>stateless</em>) — es decir, extensiones que se ejecutan solamente sobre un elemento, siendo esa su única interacción — existe un gran conjunto de funcionalidades que no se aprovechan en el patrón básico con que se desarrollan las extensiones.</p>
    <p>Con el fin de llenar ese vacío, jQuery UI (<a href="http://jqueryui.com/">jQuery User Interface</a>) ha implementado un sistema más avanzado de extensiones. Este sistema permite manejar estados y admite múltiples funciones para ser expuestas en una única extensión. Dicho sistema es llamado <em>widget factory</em> y forma parte de la versión 1.8 de jQuery UI a través de <code>jQuery.widget</code>, aunque también puede ser utilizado sin depender de jQuery UI.</p>
    <p>Para demostrar las capacidades de <em>widget factory</em>, se creará una extensión que tendrá como funcionalidad ser una barra de progreso.</p>
    <p>Por ahora, la extensión solo permitirá establecer el valor de la barra de progreso una sola vez. Esto se realizará llamando a <code>jQuery.widget</code> con dos parámetros: el nombre de la extensión a crear y un objeto literal que contendrá las funciones soportadas por la extensión. Cuando la extensión es llamada, una instancia de ella es creada y todas las funciones se ejecutaran en el contexto de esa instancia.</p>
    <p>Existen dos importantes diferencias en comparación con una extensión estándar de jQuery: En primer lugar, el contexto es un objeto, no un elemento DOM. En segundo lugar, el contexto siempre es un único objeto, nunca una colección.</p>
    <p><strong>Una simple extensión con mantenimiento de estado utilizando widget factory de jQuery UI</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>(<span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="fu">element</span>
                .<span class="fu">addClass</span>(<span class="st">&quot;progressbar&quot;</span>)
                .<span class="fu">text</span>(progress);
        }
    });</code></pre>
    <p>El nombre de la extensión debe contener un espacio de nombres, en este caso se utiliza <code>nmk</code>. Los espacios de nombres tienen una limitación de un solo nivel de profundidad — es decir que por ejemplo, no es posible utilizar <code>nmk.foo</code>. Como se puede ver en el ejemplo, <em>widget factory</em> provee dos propiedades para ser utilizadas. La primera, <code>this.element</code> es un objeto jQuery que contiene exactamente un elemento. En caso que la extensión sea ejecutada en más de un elemento, una instancia separada de la extensión será creada por cada elemento y cada una tendrá su propio <code>this.element</code>. La segunda propiedad, <code>this.options</code>, es un conjunto de pares clave/valor con todas las opciones de la extensión. Estas opciones pueden pasarse a la extensión como se muestra a continuación:</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Cuando esté realizando sus propias extensiones es recomendable utilizar su propio espacio de nombres, ya que deja en claro de donde proviene la extensión y si es parte de una colección mayor. Por otro lado, el espacio de nombres <code>ui</code> está reservado para las extensiones oficiales de jQuery UI.</p>
    </blockquote>
    <p><strong>Pasar opciones al widget</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span>)
        .<span class="fu">appendTo</span>( <span class="st">&quot;body&quot;</span> )
        .<span class="fu">progressbar</span>({ <span class="dt">value</span>: <span class="dv">20</span> });</code></pre>
    <p>Cuando se llama a <code>jQuery.widget</code> se extiende a jQuery añadiendo el método a <code>jQuery.fn</code> (de la misma forma que cuando se crea una extensión estándar). El nombre de la función que se añade esta basado en el nombre que se pasa a <code>jQuery.widget</code>, sin el espacio de nombres (en este caso el nombre será <code>jQuery.fn.progressbar</code>).</p>
    <p>Como se muestra a continuación, es posible especificar valores predeterminados para cualquier opción. Estos valores deberían basarse en la utilización más común de la extensión.</p>
    <p><strong>Establecer opciones predeterminadas para un widget</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>(<span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="co">// opciones predeterminadas</span>
        <span class="dt">options</span>: {
            <span class="dt">value</span>: <span class="dv">0</span>
        },
    
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="fu">element</span>
                .<span class="fu">addClass</span>( <span class="st">&quot;progressbar&quot;</span> )
                .<span class="fu">text</span>( progress );
        }
    });</code></pre>
    <div id="añadir-métodos-a-un-widget" class="section level3">
    <h3><a href="#añadir-métodos-a-un-widget"><span class="header-section-number">8.5.1</span> Añadir Métodos a un Widget</a></h3>
    <p>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 <code>jQuery.widget</code>. También es posible definir métodos “privados” anteponiendo un guión bajo al nombre de la función.</p>
    <p><strong>Crear métodos en el Widget</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>(<span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="dt">options</span>: {
            <span class="dt">value</span>: <span class="dv">0</span>
        },
    
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="fu">element</span>
                .<span class="fu">addClass</span>(<span class="st">&quot;progressbar&quot;</span>)
                .<span class="fu">text</span>(progress);
        },
    
        <span class="co">// crear un método público</span>
        <span class="dt">value</span>: <span class="kw">function</span>(value) {
            <span class="co">// no se pasa ningún valor, entonces actúa como método obtenedor</span>
            <span class="kw">if</span> (value === <span class="kw">undefined</span>) {
                <span class="kw">return</span> <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span>;
            <span class="co">// se pasa un valor, entonces actúa como método establecedor</span>
            } <span class="kw">else</span> {
                <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> = <span class="kw">this</span>.<span class="fu">_constrain</span>(value);
                <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
                <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">text</span>(progress);
            }
        },
    
        <span class="co">// crear un método privado</span>
        <span class="dt">_constrain</span>: <span class="kw">function</span>(value) {
            <span class="kw">if</span> (value &gt; <span class="dv">100</span>) {
                value = <span class="dv">100</span>;
            }
            <span class="kw">if</span> (value &lt; <span class="dv">0</span>) {
                value = <span class="dv">0</span>;
            }
            <span class="kw">return</span> value;
        }
    });</code></pre>
    <p>Para llamar a un método en una instancia de la extensión, se debe pasar el nombre de dicho método a la extensión. En caso que se llame a un método que acepta parámetros, estos se deben pasar a continuación del nombre del método.</p>
    <p><strong>Llamar a métodos en una instancia de extensión</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bar = <span class="fu">$</span>(<span class="st">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span>)
        .<span class="fu">appendTo</span>(<span class="st">&quot;body&quot;</span>)
        .<span class="fu">progressbar</span>({ <span class="dt">value</span>: <span class="dv">20</span> });
    
    <span class="co">// obtiene el valor actual</span>
    <span class="fu">alert</span>(<span class="ot">bar</span>.<span class="fu">progressbar</span>(<span class="st">&quot;value&quot;</span>));
    
    <span class="co">// actualiza el valor</span>
    <span class="ot">bar</span>.<span class="fu">progressbar</span>(<span class="st">&quot;value&quot;</span>, <span class="dv">50</span>);
    
    <span class="co">// obtiene el valor nuevamente</span>
    <span class="fu">alert</span>(<span class="ot">bar</span>.<span class="fu">progressbar</span>(<span class="st">&quot;value&quot;</span>));</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Ejecutar métodos pasando el nombre del método a la misma función jQuery que se utiliza para inicializar la extensión puede parecer extraño, sin embargo es realizado así para prevenir la “contaminación” del espacio de nombres de jQuery manteniendo al mismo tiempo la capacidad de llamar a métodos en cadena.</p>
    </blockquote>
    </div>
    <div id="trabajar-con-las-opciones-del-widget" class="section level3">
    <h3><a href="#trabajar-con-las-opciones-del-widget"><span class="header-section-number">8.5.2</span> Trabajar con las Opciones del Widget</a></h3>
    <p>Uno de los métodos disponibles automáticamente para la extensión es <code>option</code>. Este método permite obtener y establecer opciones después de la inicialización y funciona exactamente igual que los métodos <em>attr</em> y <em>css</em> 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 <code>_setOption</code> de la extensión será llamado por cada opción que se desea establecer.</p>
    <p><strong>Responder cuando una opción es establecida</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>(<span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="dt">options</span>: {
            <span class="dt">value</span>: <span class="dv">0</span>
        },
    
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">addClass</span>(<span class="st">&quot;progressbar&quot;</span>);
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_setOption</span>: <span class="kw">function</span>(key, value) {
            <span class="kw">this</span>.<span class="fu">options</span>[key] = value;
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_update</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">text</span>(progress);
        }
    });</code></pre>
    </div>
    <div id="añadir-funciones-de-devolución-de-llamada" class="section level3">
    <h3><a href="#añadir-funciones-de-devolución-de-llamada"><span class="header-section-number">8.5.3</span> Añadir Funciones de Devolución de Llamada</a></h3>
    <p>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 <code>_trigger</code> 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.</p>
    <p><strong>Proveer funciones de devolución de llamada</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>(<span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="dt">options</span>: {
            <span class="dt">value</span>: <span class="dv">0</span>
        },
    
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">addClass</span>(<span class="st">&quot;progressbar&quot;</span>);
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_setOption</span>: <span class="kw">function</span>(key, value) {
            <span class="kw">this</span>.<span class="fu">options</span>[key] = value;
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_update</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">text</span>(progress);
            <span class="kw">if</span> (<span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> == <span class="dv">100</span>) {
                <span class="kw">this</span>.<span class="fu">_trigger</span>(<span class="st">&quot;complete&quot;</span>, <span class="kw">null</span>, { <span class="dt">value</span>: <span class="dv">100</span> });
            }
        }
    });</code></pre>
    <p>Las funciones de devolución son esencialmente sólo opciones adicionales, por lo cual, pueden ser establecidas como cualquier otra opción. Cada vez que una función de devolución es ejecutada, un evento correspondiente se activa también. El tipo de evento se determina mediante la concatenación del nombre de la extensión y el nombre de la función de devolución. Dicha función y evento reciben dos mismos parámetros: un objeto de evento y un conjunto de información relevante al evento.</p>
    <p>Si la extensión tendrá alguna funcionalidad que podrá ser cancelada por el usuario, la mejor manera de hacerlo es creando funciones de devolución cancelables. El usuario podrá cancelar una función de devolución o su evento asociado de la misma manera que se cancela cualquier evento nativo: llamando a <code>event.preventDefault()</code> o utilizando <code>return false</code>.</p>
    <p><strong>Vincular a eventos del widget</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bar = <span class="fu">$</span>(<span class="st">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span>)
        .<span class="fu">appendTo</span>(<span class="st">&quot;body&quot;</span>)
        .<span class="fu">progressbar</span>({
            <span class="dt">complete</span>: <span class="kw">function</span>(event, data) {
                <span class="fu">alert</span>( <span class="st">&quot;Función de devolución&quot;</span> );
            }
        })
        .<span class="fu">on</span>(<span class="st">&quot;progressbarcomplete&quot;</span>, <span class="kw">function</span>(event, data) {
            <span class="fu">alert</span>(<span class="st">&quot;El valor de la barra de progreso es &quot;</span> + <span class="ot">data</span>.<span class="fu">value</span>);
        });
    
    <span class="ot">bar</span>.<span class="fu">progressbar</span>(<span class="st">&quot;option&quot;</span>, <span class="st">&quot;value&quot;</span>, <span class="dv">100</span>);</code></pre>
    <p><strong>En profundidad: Widget Factory</strong></p>
    <p>Cuando se llama a <code>jQuery.widget</code>, ésta crea una función constructora para la extensión y establece el objeto literal que se pasa como el prototipo para todas las instancias de la extensión. Todas las funcionalidades que automáticamente se añaden a la extensión provienen del prototipo base del widget, el cual es definido como <code>jQuery.Widget.prototype</code>. Cuando una instancia de la extensión es creada, es guardada en el elemento DOM original utilizando <code>jQuery.data</code>, con el nombre de la extensión como palabra clave.</p>
    <p>Debido a que la instancia de la extensión esta directamente vinculada al elemento DOM, es posible acceder a la instancia de la extensión de forma directa. Esto permite llamar a métodos directamente en la instancia de la extensión en lugar de pasar el nombre del método como una cadena de caracteres, dando la posibilidad de acceder a las propiedades de la extensión.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bar = <span class="fu">$</span>(<span class="st">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span>)
        .<span class="fu">appendTo</span>(<span class="st">&quot;body&quot;</span>)
        .<span class="fu">progressbar</span>()
        .<span class="fu">data</span>(<span class="st">&quot;progressbar&quot;</span> );
    
    <span class="co">// llamar a un método directamente en la instancia de la extensión</span>
    <span class="ot">bar</span>.<span class="fu">option</span>(<span class="st">&quot;value&quot;</span>, <span class="dv">50</span>);
    
    <span class="co">// acceder a propiedades en la instancia de la extensión</span>
    <span class="fu">alert</span>(<span class="ot">bar</span>.<span class="ot">options</span>.<span class="fu">value</span>);</code></pre>
    <p>Uno de los mayores beneficios de tener un constructor y un prototipo para una extensión es la facilidad de extender la extensión. El hecho de añadir o cambiar métodos en el prototipo de la extensión, permite también modificarlos en todas las instancias de la extensión. Por ejemplo, si deseamos añadir un método a la extensión de barra de progreso para permitir restablecer el progreso a 0%, es posible hacerlo añadiendo este método al prototipo y automáticamente estará disponible para ser llamada desde cualquier instancia de la extensión.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="ot">nmk</span>.<span class="ot">progressbar</span>.<span class="ot">prototype</span>.<span class="fu">reset</span> = <span class="kw">function</span>() {
        <span class="kw">this</span>.<span class="fu">_setOption</span>(<span class="st">&quot;value&quot;</span>, <span class="dv">0</span>);
    };</code></pre>
    </div>
    <div id="limpieza" class="section level3">
    <h3><a href="#limpieza"><span class="header-section-number">8.5.4</span> Limpieza</a></h3>
    <p>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 <code>destroy</code>. 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 <code>destroy</code> predeterminado remueve el vínculo entre el elemento DOM y la instancia de la extensión</p>
    <p><strong>Añadir un método destroy al widget</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">widget</span>( <span class="st">&quot;nmk.progressbar&quot;</span>, {
        <span class="dt">options</span>: {
            <span class="dt">value</span>: <span class="dv">0</span>
        },
    
        <span class="dt">_create</span>: <span class="kw">function</span>() {
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">addClass</span>(<span class="st">&quot;progressbar&quot;</span>);
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_setOption</span>: <span class="kw">function</span>(key, value) {
            <span class="kw">this</span>.<span class="fu">options</span>[key] = value;
            <span class="kw">this</span>.<span class="fu">_update</span>();
        },
    
        <span class="dt">_update</span>: <span class="kw">function</span>() {
            <span class="kw">var</span> progress = <span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> + <span class="st">&quot;%&quot;</span>;
            <span class="kw">this</span>.<span class="ot">element</span>.<span class="fu">text</span>(progress);
            <span class="kw">if</span> (<span class="kw">this</span>.<span class="ot">options</span>.<span class="fu">value</span> == <span class="dv">100</span> ) {
                <span class="kw">this</span>.<span class="fu">_trigger</span>(<span class="st">&quot;complete&quot;</span>, <span class="kw">null</span>, { <span class="dt">value</span>: <span class="dv">100</span> });
            }
        },
    
        <span class="dt">destroy</span>: <span class="kw">function</span>() {
            <span class="kw">this</span>.<span class="fu">element</span>
                .<span class="fu">removeClass</span>(<span class="st">&quot;progressbar&quot;</span>)
                .<span class="fu">text</span>(<span class="st">&quot;&quot;</span>);
    
            <span class="co">// llama a la función base destroy</span>
            <span class="ot">$</span>.<span class="ot">Widget</span>.<span class="ot">prototype</span>.<span class="ot">destroy</span>.<span class="fu">call</span>(<span class="kw">this</span>);
        }
    });</code></pre>
    </div>
    <div id="conclusión" class="section level3">
    <h3><a href="#conclusión"><span class="header-section-number">8.5.5</span> Conclusión</a></h3>
    <p>La utilización de <em>Widget factory</em> 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. <em>Widget factory</em> resuelve muchos problemas comunes, mejora significativamente la productividad y la reutilización de código.</p>
    </div>
    </div>
    <div id="ejercicios-5" class="section level2">
    <h2><a href="#ejercicios-5"><span class="header-section-number">8.6</span> Ejercicios</a></h2>
    <div id="realizar-una-tabla-ordenable" class="section level3">
    <h3><a href="#realizar-una-tabla-ordenable"><span class="header-section-number">8.6.1</span> Realizar una Tabla Ordenable</a></h3>
    <p>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.</p>
    </div>
    <div id="escribir-una-extensión-para-cambiar-el-color-de-fondo-en-tablas" class="section level3">
    <h3><a href="#escribir-una-extensión-para-cambiar-el-color-de-fondo-en-tablas"><span class="header-section-number">8.6.2</span> Escribir una Extensión Para Cambiar el Color de Fondo en Tablas</a></h3>
    <p>Abra el archivo <code>/ejercicios/index.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/stripe.js</code>. 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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#myTable&#39;</span>).<span class="fu">stripe</span>(<span class="st">&#39;#cccccc&#39;</span>);</code></pre>
    <p>No olvide de devolver la tabla para que otros métodos puedan ser encadenados luego de la llamada a la extensión.</p>
    </div>
    </div>
    </div>
    <div id="mejores-prácticas-para-aumentar-el-rendimiento" class="section level1">
    <h1><a href="#mejores-prácticas-para-aumentar-el-rendimiento"><span class="header-section-number">9</span> Mejores Prácticas para Aumentar el Rendimiento</a></h1>
    <p>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 <a href="http://paulirish.com/perf">jQuery Anti-Patterns for Performance</a> (en inglés) de Paul Irish.</p>
    <div id="guardar-la-longitud-en-bucles" class="section level2">
    <h2><a href="#guardar-la-longitud-en-bucles"><span class="header-section-number">9.1</span> Guardar la Longitud en Bucles</a></h2>
    <p>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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myLength = <span class="ot">myArray</span>.<span class="fu">length</span>;
    
    <span class="kw">for</span> (<span class="kw">var</span> i = <span class="dv">0</span>; i &lt; myLength; i++) {
        <span class="co">// do stuff</span>
    }</code></pre>
    </div>
    <div id="añadir-nuevo-contenido-por-fuera-de-un-bucle" class="section level2">
    <h2><a href="#añadir-nuevo-contenido-por-fuera-de-un-bucle"><span class="header-section-number">9.2</span> Añadir Nuevo Contenido por Fuera de un Bucle</a></h2>
    <p>Si va a insertar muchos elementos en el DOM, hágalo todo de una sola vez, no de una por vez.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// mal</span>
    <span class="ot">$</span>.<span class="fu">each</span>(myArray, <span class="kw">function</span>(i, item) {
       <span class="kw">var</span> newListItem = <span class="st">&#39;&lt;li&gt;&#39;</span> + item + <span class="st">&#39;&lt;/li&gt;&#39;</span>;
       <span class="fu">$</span>(<span class="st">&#39;#ballers&#39;</span>).<span class="fu">append</span>(newListItem);
    });
    
    <span class="co">// mejor: realizar esto</span>
    <span class="kw">var</span> frag = <span class="ot">document</span>.<span class="fu">createDocumentFragment</span>();
    
    <span class="ot">$</span>.<span class="fu">each</span>(myArray, <span class="kw">function</span>(i, item) {
        <span class="kw">var</span> newListItem = <span class="st">&#39;&lt;li&gt;&#39;</span> + item + <span class="st">&#39;&lt;/li&gt;&#39;</span>;
        <span class="ot">frag</span>.<span class="fu">appendChild</span>(newListItem);
    });
    <span class="fu">$</span>(<span class="st">&#39;#ballers&#39;</span>)[<span class="dv">0</span>].<span class="fu">appendChild</span>(frag);
    
    <span class="co">// o esto:</span>
    <span class="kw">var</span> myHtml = <span class="st">&#39;&#39;</span>;
    
    <span class="ot">$</span>.<span class="fu">each</span>(myArray, <span class="kw">function</span>(i, item) {
        myHtml += <span class="st">&#39;&lt;li&gt;&#39;</span> + item + <span class="st">&#39;&lt;/li&gt;&#39;</span>;
    });
    <span class="fu">$</span>(<span class="st">&#39;#ballers&#39;</span>).<span class="fu">html</span>(myHtml);</code></pre>
    </div>
    <div id="no-repetirse" class="section level2">
    <h2><a href="#no-repetirse"><span class="header-section-number">9.3</span> No Repetirse</a></h2>
    <p>No se repita; realice las cosas una vez y sólo una, caso contrario lo estará haciendo mal.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// MAL</span>
    <span class="kw">if</span> (<span class="ot">$eventfade</span>.<span class="fu">data</span>(<span class="st">&#39;currently&#39;</span>) != <span class="st">&#39;showing&#39;</span>) {
        <span class="ot">$eventfade</span>.<span class="fu">stop</span>();
    }
    
    <span class="kw">if</span> (<span class="ot">$eventhover</span>.<span class="fu">data</span>(<span class="st">&#39;currently&#39;</span>) != <span class="st">&#39;showing&#39;</span>) {
        <span class="ot">$eventhover</span>.<span class="fu">stop</span>();
    }
    
    <span class="kw">if</span> (<span class="ot">$spans</span>.<span class="fu">data</span>(<span class="st">&#39;currently&#39;</span>) != <span class="st">&#39;showing&#39;</span>) {
        <span class="ot">$spans</span>.<span class="fu">stop</span>();
    }
    
    <span class="co">// BIEN</span>
    <span class="kw">var</span> $elems = [$eventfade, $eventhover, $spans];
    <span class="ot">$</span>.<span class="fu">each</span>($elems, <span class="kw">function</span>(i,elem) {
        <span class="kw">if</span> (<span class="ot">elem</span>.<span class="fu">data</span>(<span class="st">&#39;currently&#39;</span>) != <span class="st">&#39;showing&#39;</span>) {
            <span class="ot">elem</span>.<span class="fu">stop</span>();
        }
    });</code></pre>
    </div>
    <div id="cuidado-con-las-funciones-anónimas" class="section level2">
    <h2><a href="#cuidado-con-las-funciones-anónimas"><span class="header-section-number">9.4</span> Cuidado con las Funciones Anónimas</a></h2>
    <p>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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// MAL</span>
    <span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="kw">function</span>() {
        <span class="fu">$</span>(<span class="st">&#39;#magic&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="st">&#39;#yayeffects&#39;</span>).<span class="fu">slideUp</span>(<span class="kw">function</span>() {
                <span class="co">// ...</span>
            });
        });
    
        <span class="fu">$</span>(<span class="st">&#39;#happiness&#39;</span>).<span class="fu">load</span>(url + <span class="st">&#39; #unicorns&#39;</span>, <span class="kw">function</span>() {
            <span class="co">// ...</span>
        });
    });
    
    <span class="co">// MEJOR</span>
    <span class="kw">var</span> PI = {
        <span class="dt">onReady </span>: <span class="kw">function</span>() {
            <span class="fu">$</span>(<span class="st">&#39;#magic&#39;</span>).<span class="fu">click</span>(<span class="ot">PI</span>.<span class="fu">candyMtn</span>);
            <span class="fu">$</span>(<span class="st">&#39;#happiness&#39;</span>).<span class="fu">load</span>(<span class="ot">PI</span>.<span class="fu">url</span> + <span class="st">&#39; #unicorns&#39;</span>, <span class="ot">PI</span>.<span class="fu">unicornCb</span>);
        },
    
        <span class="dt">candyMtn </span>: <span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="st">&#39;#yayeffects&#39;</span>).<span class="fu">slideUp</span>(<span class="ot">PI</span>.<span class="fu">slideCb</span>);
        },
    
        <span class="dt">slideCb </span>: <span class="kw">function</span>() { ... },
    
        <span class="dt">unicornCb </span>: <span class="kw">function</span>() { ... }
    };
    
    <span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="ot">PI</span>.<span class="fu">onReady</span>);</code></pre>
    </div>
    <div id="optimización-de-selectores" class="section level2">
    <h2><a href="#optimización-de-selectores"><span class="header-section-number">9.5</span> Optimización de Selectores</a></h2>
    <p>La optimización de selectores es menos importante de lo que solía ser, debido a la implementación en algunos navegadores de<code>document.querySelectorAll()</code>, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.</p>
    <div id="selectores-basados-en-id" class="section level3">
    <h3><a href="#selectores-basados-en-id"><span class="header-section-number">9.5.1</span> Selectores basados en ID</a></h3>
    <p>Siempre es mejor comenzar las selecciones con un ID.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// rápido</span>
    <span class="fu">$</span>(<span class="st">&#39;#container div.robotarm&#39;</span>);
    
    <span class="co">// super-rápido</span>
    <span class="fu">$</span>(<span class="st">&#39;#container&#39;</span>).<span class="fu">find</span>(<span class="st">&#39;div.robotarm&#39;</span>);</code></pre>
    <p>El ejemplo que utiliza <code>$.fn.find</code> es más rápido debido a que la primera selección utiliza el motor de selección interno <a href="http://sizzlejs.com/">Sizzle</a> — mientras que la selección realizada únicamente por ID utiliza <code>document.getElementById()</code>, el cual es extremadamente rápido debido a que es una función nativa del navegador.</p>
    </div>
    <div id="especificidad" class="section level3">
    <h3><a href="#especificidad"><span class="header-section-number">9.5.2</span> Especificidad</a></h3>
    <p>Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// no optimizado</span>
    <span class="fu">$</span>(<span class="st">&#39;div.data .gonzalez&#39;</span>);
    
    <span class="co">// optimizado</span>
    <span class="fu">$</span>(<span class="st">&#39;.data td.gonzalez&#39;</span>);</code></pre>
    <p>Use en lo posible <code>etiqueta.clase</code> del lado derecho de la selección, y solo <code>etiqueta</code> o <code>.clase</code> en la parte izquierda.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;.data table.attendees td.gonzalez&#39;</span>);
    
    <span class="co">// mucho mejor: eliminar la parte media de ser posible</span>
    <span class="fu">$</span>(<span class="st">&#39;.data td.gonzalez&#39;</span>);</code></pre>
    <p>La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.</p>
    </div>
    <div id="evitar-el-selector-universal" class="section level3">
    <h3><a href="#evitar-el-selector-universal"><span class="header-section-number">9.5.3</span> Evitar el Selector Universal</a></h3>
    <p>Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;.buttons &gt; *&#39;</span>);      <span class="co">// muy lento</span>
    <span class="fu">$</span>(<span class="st">&#39;.buttons&#39;</span>).<span class="fu">children</span>();  <span class="co">// mucho mejor</span>
    
    <span class="fu">$</span>(<span class="st">&#39;.gender :radio&#39;</span>);       <span class="co">// selección universal implícita</span>
    <span class="fu">$</span>(<span class="st">&#39;.gender *:radio&#39;</span>);      <span class="co">// misma forma, pero de forma explícita</span>
    <span class="fu">$</span>(<span class="st">&#39;.gender input:radio&#39;</span>);  <span class="co">// mucho mejor</span></code></pre>
    </div>
    </div>
    <div id="utilizar-la-delegación-de-eventos" class="section level2">
    <h2><a href="#utilizar-la-delegación-de-eventos"><span class="header-section-number">9.6</span> Utilizar la Delegación de Eventos</a></h2>
    <p>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 <code>$.fn.live</code> y<code>$.fn.delegate</code>. En lo posible, es recomendable utilizar <code>$.fn.delegate</code> en lugar de <code>$.fn.live</code>, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.</p>
    <p>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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// mal (si existen muchos items en la lista)</span>
    <span class="fu">$</span>(<span class="st">&#39;li.trigger&#39;</span>).<span class="fu">click</span>(handlerFn);
    
    <span class="co">// mejor: delegación de eventos con $.fn.live</span>
    <span class="fu">$</span>(<span class="st">&#39;li.trigger&#39;</span>).<span class="fu">live</span>(<span class="st">&#39;click&#39;</span>, handlerFn);
    
    <span class="co">// mucho mejor: delegación de eventos con $.fn.delegate</span>
    <span class="co">// permite especificar un contexto de forma fácil</span>
    <span class="fu">$</span>(<span class="st">&#39;#myList&#39;</span>).<span class="fu">delegate</span>(<span class="st">&#39;li.trigger&#39;</span>, <span class="st">&#39;click&#39;</span>, handlerFn);</code></pre>
    </div>
    <div id="separar-elementos-para-trabajar-con-ellos" class="section level2">
    <h2><a href="#separar-elementos-para-trabajar-con-ellos"><span class="header-section-number">9.7</span> Separar Elementos para Trabajar con Ellos</a></h2>
    <p>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 <code>$.fn.detach</code> el cual permite trabajar elementos de forma separada del DOM para luego insertarlos.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> $table = <span class="fu">$</span>(<span class="st">&#39;#myTable&#39;</span>);
    <span class="kw">var</span> $parent = <span class="ot">$table</span>.<span class="fu">parent</span>();
    
    <span class="ot">$table</span>.<span class="fu">detach</span>();
    <span class="co">// ... se añaden muchas celdas a la tabla</span>
    <span class="ot">$parent</span>.<span class="fu">append</span>(table);</code></pre>
    </div>
    <div id="utilizar-estilos-en-cascada-para-cambios-de-css-en-varios-elementos" class="section level2">
    <h2><a href="#utilizar-estilos-en-cascada-para-cambios-de-css-en-varios-elementos"><span class="header-section-number">9.8</span> Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos</a></h2>
    <p>Si va a cambiar el CSS en más de 20 elementos utilizando <code>$.fn.css</code>, considere realizar los cambios de estilos añadiéndolos en una etiqueta <em>style</em>. De esta forma se incrementa un 60% el rendimiento.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// correcto hasta 20 elementos, lento en más elementos</span>
    <span class="fu">$</span>(<span class="st">&#39;a.swedberg&#39;</span>).<span class="fu">css</span>(<span class="st">&#39;color&#39;</span>, <span class="st">&#39;#asd123&#39;</span>);
    <span class="fu">$</span>(<span class="st">&#39;&lt;style type=&quot;text/css&quot;&gt;a.swedberg { color : #asd123 }&lt;/style&gt;&#39;</span>)
        .<span class="fu">appendTo</span>(<span class="st">&#39;head&#39;</span>);</code></pre>
    </div>
    <div id="utilizar-.data-en-lugar-de-.fn.data" class="section level2">
    <h2><a href="#utilizar-.data-en-lugar-de-.fn.data"><span class="header-section-number">9.9</span> Utilizar <code>$.data</code> en Lugar de <code>$.fn.data</code></a></h2>
    <p>Utilizar <code>$.data</code> en un elemento del DOM en lugar de <code>$.fn.data</code> 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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// regular</span>
    <span class="fu">$</span>(elem).<span class="fu">data</span>(key,value);
    
    <span class="co">// 10 veces más rápido</span>
    <span class="ot">$</span>.<span class="fu">data</span>(elem,key,value);</code></pre>
    </div>
    <div id="no-actuar-en-elementos-no-existentes" class="section level2">
    <h2><a href="#no-actuar-en-elementos-no-existentes"><span class="header-section-number">9.10</span> No Actuar en Elementos no Existentes</a></h2>
    <p>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.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// MAL: el código a continuación ejecuta tres funciones</span>
    <span class="co">// sin comprobar si existen elementos</span>
    <span class="co">// en la selección</span>
    <span class="fu">$</span>(<span class="st">&#39;#nosuchthing&#39;</span>).<span class="fu">slideUp</span>();
    
    <span class="co">// Mejor</span>
    <span class="kw">var</span> $mySelection = <span class="fu">$</span>(<span class="st">&#39;#nosuchthing&#39;</span>);
    <span class="kw">if</span> (<span class="ot">$mySelection</span>.<span class="fu">length</span>) { <span class="ot">$mySelection</span>.<span class="fu">slideUp</span>(); }
    
    <span class="co">// MUCHO MEJOR: añadir una extensión doOnce</span>
    <span class="ot">jQuery</span>.<span class="ot">fn</span>.<span class="fu">doOnce</span> = <span class="kw">function</span>(func){
        <span class="kw">this</span>.<span class="fu">length</span> &amp;&amp; <span class="ot">func</span>.<span class="fu">apply</span>(<span class="kw">this</span>);
        <span class="kw">return</span> <span class="kw">this</span>;
    
    }
    
    
    <span class="fu">$</span>(<span class="st">&#39;li.cartitems&#39;</span>).<span class="fu">doOnce</span>(<span class="kw">function</span>(){
    
        <span class="co">// realizar algo</span>
    
    });</code></pre>
    <p>Este consejo es especialmente aplicable para widgets de jQuery UI, los cuales poseen mucha carga incluso cuando la selección no contiene elementos.</p>
    </div>
    <div id="definición-de-variables" class="section level2">
    <h2><a href="#definición-de-variables"><span class="header-section-number">9.11</span> Definición de Variables</a></h2>
    <p>Las variables pueden ser definidas en una sola declaración en lugar de varias.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// antiguo</span>
    <span class="kw">var</span> test = <span class="dv">1</span>;
    <span class="kw">var</span> test2 = <span class="kw">function</span>() { ... };
    <span class="kw">var</span> test3 = <span class="fu">test2</span>(test);
    
    <span class="co">// mejor forma</span>
    <span class="kw">var</span> test = <span class="dv">1</span>,
        test2 = <span class="kw">function</span>() { ... },
        test3 = <span class="fu">test2</span>(test);</code></pre>
    <p>En funciones autoejecutables, las definiciones de variables pueden pasarse todas juntas.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">(<span class="kw">function</span>(foo, bar) { ... })(<span class="dv">1</span>, <span class="dv">2</span>);</code></pre>
    </div>
    <div id="condicionales" class="section level2">
    <h2><a href="#condicionales"><span class="header-section-number">9.12</span> Condicionales</a></h2>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// antiguo</span>
    <span class="kw">if</span> (type == <span class="st">&#39;foo&#39;</span> || type == <span class="st">&#39;bar&#39;</span>) { ... }
    
    <span class="co">// mejor</span>
    <span class="kw">if</span> (<span class="ot">/</span><span class="fl">^(</span><span class="ot">foo</span><span class="fl">|</span><span class="ot">bar</span><span class="fl">)$</span><span class="ot">/</span>.<span class="fu">test</span>(type)) { ... }
    
    <span class="co">// búsqueda en objeto literal</span>
    <span class="kw">if</span> (({ <span class="dt">foo </span>: <span class="dv">1</span>, <span class="dt">bar </span>: <span class="dv">1</span> })[type]) { ... }</code></pre>
    </div>
    <div id="no-tratar-a-jquery-como-si-fuera-una-caja-negra" class="section level2">
    <h2><a href="#no-tratar-a-jquery-como-si-fuera-una-caja-negra"><span class="header-section-number">9.13</span> No Tratar a jQuery como si fuera una Caja Negra</a></h2>
    <p>Utilice el código fuente de la biblioteca como si fuera su documentación — guarde el enlace <a href="http://bit.ly/jqsource">http://bit.ly/jqsource</a> como marcador para tener de referencia.</p>
    </div>
    </div>
    <div id="organización-del-código" class="section level1">
    <h1><a href="#organización-del-código"><span class="header-section-number">10</span> Organización del Código</a></h1>
    <div id="introducción-4" class="section level2">
    <h2><a href="#introducción-4"><span class="header-section-number">10.1</span> Introducción</a></h2>
    <p>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.</p>
    <div id="conceptos-clave-1" class="section level3">
    <h3><a href="#conceptos-clave-1"><span class="header-section-number">10.1.1</span> Conceptos Clave</a></h3>
    <p>Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:</p>
    <ul>
    <li><p>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 <code>$(document).ready()</code>. Este concepto se conoce como encapsulación;</p></li>
    <li><p>no repetir código. Identificar piezas similares y utilizar técnicas de heredación;</p></li>
    <li><p>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;</p></li>
    <li><p>las unidades de funcionalidad deben tener una articulación flexible (en inglés <a href="http://en.wikipedia.org/wiki/Loose_coupling">loosely coupled</a>) — 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.</p></li>
    </ul>
    <p>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.</p>
    </div>
    </div>
    <div id="encapsulación" class="section level2">
    <h2><a href="#encapsulación"><span class="header-section-number">10.2</span> Encapsulación</a></h2>
    <p>El primer paso para la organización del código es separar la aplicación en distintas piezas.</p>
    <p>Muchas veces, este esfuerzo suele ser suficiente para mantener al código en orden.</p>
    <div id="el-objeto-literal" class="section level3">
    <h3><a href="#el-objeto-literal"><span class="header-section-number">10.2.1</span> El Objeto Literal</a></h3>
    <p>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.</p>
    <p><strong>Un objeto literal</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFeature = {
        <span class="dt">myProperty </span>: <span class="st">&#39;hello&#39;</span>,
    
        <span class="dt">myMethod </span>: <span class="kw">function</span>() {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">myFeature</span>.<span class="fu">myProperty</span>);
        },
    
        <span class="dt">init </span>: <span class="kw">function</span>(settings) {
            <span class="ot">myFeature</span>.<span class="fu">settings</span> = settings;
        },
    
        <span class="dt">readSettings </span>: <span class="kw">function</span>() {
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">myFeature</span>.<span class="fu">settings</span>);
        }
    };
    
    <span class="ot">myFeature</span>.<span class="fu">myProperty</span>; <span class="co">// &#39;hello&#39;</span>
    <span class="ot">myFeature</span>.<span class="fu">myMethod</span>(); <span class="co">// registra &#39;hello&#39;</span>
    <span class="ot">myFeature</span>.<span class="fu">init</span>({ <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span> });
    <span class="ot">myFeature</span>.<span class="fu">readSettings</span>(); <span class="co">// registra { foo : &#39;bar&#39; }</span></code></pre>
    <p>El objeto posee una propiedad y varios métodos, los cuales son públicos (es decir, cualquier parte de la aplicación puede verlos). ¿Cómo se puede aplicar este patrón con jQuery? Por ejemplo, en el siguiente código escrito en el estilo tradicional:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// haciendo click en un item de la lista se carga cierto contenido,</span>
    <span class="co">// luego utilizando el ID de dicho item se ocultan</span>
    <span class="co">// los items aledaños</span>
    <span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="kw">function</span>() {
      <span class="fu">$</span>(<span class="st">&#39;#myFeature li&#39;</span>)
        .<span class="fu">append</span>(<span class="st">&#39;&lt;div/&gt;&#39;</span>)
        .<span class="fu">click</span>(<span class="kw">function</span>() {
          <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);
          <span class="kw">var</span> $div = <span class="ot">$this</span>.<span class="fu">find</span>(<span class="st">&#39;div&#39;</span>);
          <span class="ot">$div</span>.<span class="fu">load</span>(<span class="st">&#39;foo.php?item=&#39;</span> +
            <span class="ot">$this</span>.<span class="fu">attr</span>(<span class="st">&#39;id&#39;</span>),
            <span class="kw">function</span>() {
              <span class="ot">$div</span>.<span class="fu">show</span>();
              <span class="ot">$this</span>.<span class="fu">siblings</span>()
                .<span class="fu">find</span>(<span class="st">&#39;div&#39;</span>).<span class="fu">hide</span>();
            }
          );
        });
    });</code></pre>
    <p>Si el ejemplo mostrado representa el 100% de la aplicación, es conveniente dejarlo como esta, ya que no amerita hacer una reestructuración. En cambio, si la pieza es parte de una aplicación más grande, estaría bien separar dicha funcionalidad de otras no relacionadas. Por ejemplo, es conveniente mover la URL a la cual se hace la petición fuera del código y pasarla al área de configuración. También romper la cadena de métodos para hacer luego más fácil la modificación.</p>
    <p><strong>Utilizar un objeto literal para una funcionalidad jQuery</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myFeature = {
        <span class="dt">init </span>: <span class="kw">function</span>(settings) {
            <span class="ot">myFeature</span>.<span class="fu">config</span> = {
                <span class="dt">$items </span>: <span class="fu">$</span>(<span class="st">&#39;#myFeature li&#39;</span>),
                <span class="dt">$container </span>: <span class="fu">$</span>(<span class="st">&#39;&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;&#39;</span>),
                <span class="dt">urlBase </span>: <span class="st">&#39;/foo.php?item=&#39;</span>
            };
    
            <span class="co">// permite sobreescribir la configuración predeterminada</span>
            <span class="ot">$</span>.<span class="fu">extend</span>(<span class="ot">myFeature</span>.<span class="fu">config</span>, settings);
    
            <span class="ot">myFeature</span>.<span class="fu">setup</span>();
        },
    
        <span class="dt">setup </span>: <span class="kw">function</span>() {
            <span class="ot">myFeature</span>.<span class="ot">config</span>.<span class="fu">$items</span>
                .<span class="fu">each</span>(<span class="ot">myFeature</span>.<span class="fu">createContainer</span>)
                .<span class="fu">click</span>(<span class="ot">myFeature</span>.<span class="fu">showItem</span>);
        },
    
        <span class="dt">createContainer </span>: <span class="kw">function</span>() {
            <span class="kw">var</span> $i = <span class="fu">$</span>(<span class="kw">this</span>),
                $c = <span class="ot">myFeature</span>.<span class="ot">config</span>.<span class="ot">$container</span>.<span class="fu">clone</span>()
                         .<span class="fu">appendTo</span>($i);
    
            <span class="ot">$i</span>.<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>, $c);
        },
    
        <span class="dt">buildUrl </span>: <span class="kw">function</span>() {
            <span class="kw">return</span> <span class="ot">myFeature</span>.<span class="ot">config</span>.<span class="fu">urlBase</span> +
                   <span class="ot">myFeature</span>.<span class="ot">$currentItem</span>.<span class="fu">attr</span>(<span class="st">&#39;id&#39;</span>);
        },
    
        <span class="dt">showItem </span>: <span class="kw">function</span>() {
            <span class="kw">var</span> <span class="ot">myFeature</span>.<span class="fu">$currentItem</span> = <span class="fu">$</span>(<span class="kw">this</span>);
            <span class="ot">myFeature</span>.<span class="fu">getContent</span>(<span class="ot">myFeature</span>.<span class="fu">showContent</span>);
        },
    
        <span class="dt">getContent </span>: <span class="kw">function</span>(callback) {
            <span class="kw">var</span> url = <span class="ot">myFeature</span>.<span class="fu">buildUrl</span>();
            <span class="ot">myFeature</span>.<span class="fu">$currentItem</span>
                .<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">load</span>(url, callback);
        },
    
        <span class="dt">showContent </span>: <span class="kw">function</span>() {
            <span class="ot">myFeature</span>.<span class="fu">$currentItem</span>
                .<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">show</span>();
            <span class="ot">myFeature</span>.<span class="fu">hideContent</span>();
        },
    
        <span class="dt">hideContent </span>: <span class="kw">function</span>() {
            <span class="ot">myFeature</span>.<span class="ot">$currentItem</span>.<span class="fu">siblings</span>()
                .<span class="fu">each</span>(<span class="kw">function</span>() {
                    <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">hide</span>();
                });
        }
    };
    
    <span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="ot">myFeature</span>.<span class="fu">init</span>);</code></pre>
    <p>La primera característica a notar es que el código es más largo que el original — como se dijo anteriormente, si este fuera el alcance de la aplicación, utilizar un objeto literal seria probablemente una exageración.</p>
    <p>Con la nueva organización, las ventajas obtenidas son:</p>
    <ul>
    <li><p>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;</p></li>
    <li><p>se eliminaron los usos de funciones anónimas;</p></li>
    <li><p>las opciones de configuración se movieron a una ubicación central;</p></li>
    <li><p>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.</p></li>
    </ul>
    <p>Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque <code>$(document).ready()</code>. Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque <code>$(document).ready()</code>.</p>
    </div>
    <div id="el-patrón-modular" class="section level3">
    <h3><a href="#el-patrón-modular"><span class="header-section-number">10.2.2</span> El Patrón Modular</a></h3>
    <p>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.</p>
    <p><strong>El patrón modular</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> feature =(<span class="kw">function</span>() {
    
        <span class="co">// variables y funciones privadas</span>
        <span class="kw">var</span> privateThing = <span class="st">&#39;secret&#39;</span>,
            publicThing = <span class="st">&#39;not secret&#39;</span>,
    
            changePrivateThing = <span class="kw">function</span>() {
                privateThing = <span class="st">&#39;super secret&#39;</span>;
            },
    
            sayPrivateThing = <span class="kw">function</span>() {
                <span class="ot">console</span>.<span class="fu">log</span>(privateThing);
                <span class="fu">changePrivateThing</span>();
            };
    
        <span class="co">// API publica</span>
        <span class="kw">return</span> {
            <span class="dt">publicThing </span>: publicThing,
            <span class="dt">sayPrivateThing </span>: sayPrivateThing
        }
    
    })();
    
    <span class="ot">feature</span>.<span class="fu">publicThing</span>; <span class="co">// registra &#39;not secret&#39;</span>
    
    <span class="ot">feature</span>.<span class="fu">sayPrivateThing</span>();
    <span class="co">// registra &#39;secret&#39; y cambia el valor</span>
    <span class="co">// de privateThing</span></code></pre>
    <p>En el ejemplo, se autoejecuta una función anónima la cual devuelve un objeto. Dentro de la función, se definen algunas variables. Debido a que ellas son definidas dentro de la función, desde afuera no se tiene acceso a menos que se pongan dentro del objeto que se devuelve. Esto implica que ningún código fuera de la función tiene acceso a la variable <code>privateThing</code> o a la función <code>sayPrivateThing</code>. Sin embargo, <code>sayPrivateThing</code> posee acceso a <code>privateThing</code> y <code>changePrivateThing</code> debido a estar definidos en el mismo alcance.</p>
    <p>El patrón es poderoso debido a que permite tener variables y funciones privadas, exponiendo una API limitada consistente en devolver propiedades y métodos de un objeto.</p>
    <p>A continuación se muestra una revisión del ejemplo visto anteriormente, con las mismas características, pero exponiendo un único método público del modulo, <code>showItemByIndex()</code>.</p>
    <p><strong>Utilizar el patrón modular para una funcionalidad jQuery</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(document).<span class="fu">ready</span>(<span class="kw">function</span>() {
        <span class="kw">var</span> feature = (<span class="kw">function</span>() {
    
            <span class="kw">var</span> $items = <span class="fu">$</span>(<span class="st">&#39;#myFeature li&#39;</span>),
                $container = <span class="fu">$</span>(<span class="st">&#39;&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;&#39;</span>),
                $currentItem,
    
                urlBase = <span class="st">&#39;/foo.php?item=&#39;</span>,
    
                createContainer = <span class="kw">function</span>() {
                    <span class="kw">var</span> $i = <span class="fu">$</span>(<span class="kw">this</span>),
                        $c = <span class="ot">$container</span>.<span class="fu">clone</span>().<span class="fu">appendTo</span>($i);
    
                    <span class="ot">$i</span>.<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>, $c);
                },
    
                buildUrl = <span class="kw">function</span>() {
                    <span class="kw">return</span> urlBase + <span class="ot">$currentItem</span>.<span class="fu">attr</span>(<span class="st">&#39;id&#39;</span>);
                },
    
                showItem = <span class="kw">function</span>() {
                    <span class="kw">var</span> $currentItem = <span class="fu">$</span>(<span class="kw">this</span>);
                    <span class="fu">getContent</span>(showContent);
                },
    
                showItemByIndex = <span class="kw">function</span>(idx) {
                    <span class="ot">$</span>.<span class="fu">proxy</span>(showItem, <span class="ot">$items</span>.<span class="fu">get</span>(idx));
                },
    
                getContent = <span class="kw">function</span>(callback) {
                    <span class="ot">$currentItem</span>.<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">load</span>(<span class="fu">buildUrl</span>(), callback);
                },
    
                showContent = <span class="kw">function</span>() {
                    <span class="ot">$currentItem</span>.<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">show</span>();
                    <span class="fu">hideContent</span>();
                },
    
                hideContent = <span class="kw">function</span>() {
                    <span class="ot">$currentItem</span>.<span class="fu">siblings</span>()
                        .<span class="fu">each</span>(<span class="kw">function</span>() {
                            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">data</span>(<span class="st">&#39;container&#39;</span>).<span class="fu">hide</span>();
                    });
                };
    
            $items
                .<span class="fu">each</span>(createContainer)
                .<span class="fu">click</span>(showItem);
    
            <span class="kw">return</span> { <span class="dt">showItemByIndex </span>: showItemByIndex };
        })();
    
        <span class="ot">feature</span>.<span class="fu">showItemByIndex</span>(<span class="dv">0</span>);
    });</code></pre>
    </div>
    </div>
    <div id="gestión-de-dependencias" class="section level2">
    <h2><a href="#gestión-de-dependencias"><span class="header-section-number">10.3</span> Gestión de Dependencias</a></h2>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Esta sección esta basada en la excelente <a href="http://requirejs.org/docs/jquery.html">documentación de RequireJS</a> y es utilizada con el permiso de James Burke, autor de RequireJS.</p>
    </blockquote>
    <p>Cuando un proyecto alcanza cierto tamaño, comienza a ser difícil el manejo de los módulos de una aplicación, ya que es necesario saber ordenarlos de forma correcta, y comenzar a combinarlos en un único archivo para lograr la menor cantidad de peticiones. También es posible que se quiera cargar código “al vuelo” luego de la carga de la página.</p>
    <p>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.</p>
    <p>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.</p>
    <div id="obtener-requirejs" class="section level3">
    <h3><a href="#obtener-requirejs"><span class="header-section-number">10.3.1</span> Obtener RequireJS</a></h3>
    <p>La manera más fácil de utilizar RequireJS con jQuery es descargando <a href="http://requirejs.org/docs/download.html">el paquete de jQuery con RequireJS</a> ya incorporado en él. Este paquete excluye porciones de código que duplican funciones de jQuery. También es útil descargar <a href="http://requirejs.org/docs/release/0.11.0/jquery-require-sample.zip">un ejemplo de proyecto jQuery que utiliza RequireJS</a>.</p>
    </div>
    <div id="utilizar-requirejs-con-jquery" class="section level3">
    <h3><a href="#utilizar-requirejs-con-jquery"><span class="header-section-number">10.3.2</span> Utilizar RequireJS con jQuery</a></h3>
    <p>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 <code>scripts/</code>.</p>
    <p><strong>Utilizar RequireJS: Un ejemplo simple</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;jQuery+RequireJS Sample Page&lt;<span class="ot">/title&gt;</span>
    <span class="ot">        &lt;script src=&quot;scripts/require</span>-<span class="ot">jquery</span>.<span class="fu">js</span><span class="st">&quot;&gt;&lt;/script&gt;</span>
            &lt;script&gt;<span class="fu">require</span>([<span class="st">&quot;app&quot;</span>]);&lt;<span class="ot">/script&gt;</span>
    <span class="ot">    &lt;/head</span>&gt;
        &lt;body&gt;
            &lt;h1&gt;jQuery+RequireJS Sample Page&lt;<span class="ot">/h1&gt;</span>
    <span class="ot">    &lt;/body</span>&gt;
    &lt;<span class="ot">/html&gt;</span></code></pre>
    <p>La llamada a <code>require([&quot;app&quot;])</code> le dice a RequireJS que cargue el archivo <code>scripts/app.js</code>. RequireJS cargará cualquier dependencia pasada a <code>require()</code> sin la extensión <code>.js</code> desde el mismo directorio que en que se encuentra el archivo <code>require-jquery.js</code>, aunque también es posible especificar la ruta de la siguiente forma:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;script&gt;<span class="fu">require</span>([<span class="st">&quot;scripts/app.js&quot;</span>]);&lt;<span class="ot">/script&gt;</span></code></pre>
    <p>El archivo <code>app.js</code> es otra llamada a <code>require.js</code> para cargar todos los archivos necesarios para la aplicación. En el siguiente ejemplo, <code>app.js</code> solicita dos extensiones <code>jquery.alpha.js</code> y <code>jquery.beta.js</code> (no son extensiones reales, solo ejemplos). Estas extensiones están en la misma carpeta que <code>require-jquery.js</code>:</p>
    <p><strong>Un simple archivo JavaScript con dependencias</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">require</span>([<span class="st">&quot;jquery.alpha&quot;</span>, <span class="st">&quot;jquery.beta&quot;</span>], <span class="kw">function</span>() {
        <span class="co">//las extensiones jquery.alpha.js y jquery.beta.js han sido cargadas.</span>
        <span class="fu">$</span>(<span class="kw">function</span>() {
            <span class="fu">$</span>(<span class="st">&#39;body&#39;</span>).<span class="fu">alpha</span>().<span class="fu">beta</span>();
        });
    });</code></pre>
    </div>
    <div id="crear-módulos-reusables-con-requirejs" class="section level3">
    <h3><a href="#crear-módulos-reusables-con-requirejs"><span class="header-section-number">10.3.3</span> Crear Módulos Reusables con RequireJS</a></h3>
    <p>RequireJS hace que sea fácil definir módulos reusables a través de <code>require.def()</code>. 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.</p>
    <p>Si el módulo no posee ninguna dependencia, tan solo se debe especificar el nombre como primer argumento de <code>require.def()</code>. El segundo argumento es un objeto literal que define las propiedades del módulo. Por ejemplo:</p>
    <p><strong>Definición de un módulo RequireJS que no posee dependencias</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">require</span>.<span class="fu">def</span>(<span class="st">&quot;my/simpleshirt&quot;</span>,
        {
            <span class="dt">color</span>: <span class="st">&quot;black&quot;</span>,
            <span class="dt">size</span>: <span class="st">&quot;unisize&quot;</span>
        }
    );</code></pre>
    <p>El ejemplo debe ser guardado en el archivo <code>my/simpleshirt.js</code>.</p>
    <p>Si el modulo posee dependencias, es posible especificarlas en el segundo argumento de <code>require.def()</code> a través de un vector) y luego pasar una función como tercer argumento. Esta función será llamada para definir el módulo una vez cargadas todos las dependencias. Dicha función recibe los valores devueltos por las dependencias como un argumento (en el mismo orden en que son requeridas en el vector) y luego la misma debe devolver un objeto que defina el módulo.</p>
    <p><strong>Definición de un módulo RequireJS con dependencias</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">require</span>.<span class="fu">def</span>(<span class="st">&quot;my/shirt&quot;</span>,
        [<span class="st">&quot;my/cart&quot;</span>, <span class="st">&quot;my/inventory&quot;</span>],
        <span class="kw">function</span>(cart, inventory) {
            <span class="co">//devuelve un objeto que define a &quot;my/shirt&quot;</span>
            <span class="kw">return</span> {
                <span class="dt">color</span>: <span class="st">&quot;blue&quot;</span>,
                <span class="dt">size</span>: <span class="st">&quot;large&quot;</span>
                <span class="dt">addToCart</span>: <span class="kw">function</span>() {
                    <span class="ot">inventory</span>.<span class="fu">decrement</span>(<span class="kw">this</span>);
                    <span class="ot">cart</span>.<span class="fu">add</span>(<span class="kw">this</span>);
                }
            }
        }
    );</code></pre>
    <p>En este ejemplo, el modulo <code>my/shirt</code> es creado. Este depende de <code>my/cart</code> y <code>my/inventory</code>. En el disco, los archivos están estructurados de la siguiente forma:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">my/<span class="ot">cart</span>.<span class="fu">js</span>
    <span class="fu">my</span>/<span class="ot">inventory</span>.<span class="fu">js</span>
    <span class="fu">my</span>/<span class="ot">shirt</span>.<span class="fu">js</span></code></pre>
    <p>La función que define <code>my/shirt</code> no es llamada hasta que <code>my/cart</code> y <code>my/inventory</code> hayan sido cargadas, y dicha función recibe como argumentos a los módulos como <code>cart</code> y <code>inventory</code>. 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 <code>my/shirt</code>. Definiendo los módulos de esta forma, <code>my/shirt</code> no existe como un objeto global, ya que múltiples módulos pueden existir en la página al mismo tiempo.</p>
    <p>Los módulos no tienen que devolver un objeto; cualquier tipo de valor es permitido.</p>
    <p><strong>Definición de un módulo RequireJS que devuelve una función</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">require</span>.<span class="fu">def</span>(<span class="st">&quot;my/title&quot;</span>,
        [<span class="st">&quot;my/dependency1&quot;</span>, <span class="st">&quot;my/dependency2&quot;</span>],
        <span class="kw">function</span>(dep1, dep2) {
            <span class="co">// devuelve una función para definir &quot;my/title&quot;.</span>
            <span class="co">// Este devuelve o establece</span>
            <span class="co">// el titulo de la ventana</span>
            <span class="kw">return</span> <span class="kw">function</span>(title) {
                <span class="kw">return</span> title ? (<span class="ot">window</span>.<span class="fu">title</span> = title) : <span class="ot">window</span>.<span class="fu">title</span>;
            }
        }
    );</code></pre>
    <p>Solo un módulo debe ser requerido por archivo JavaScript.</p>
    </div>
    <div id="optimizar-el-código-con-las-herramientas-de-requirejs" class="section level3">
    <h3><a href="#optimizar-el-código-con-las-herramientas-de-requirejs"><span class="header-section-number">10.3.4</span> Optimizar el Código con las Herramientas de RequireJS</a></h3>
    <p>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 <code>webapp</code> (la cual contiene la página HTML y todos los archivos JavaScript de la aplicación). La estructura de directorios es:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">requirejs/ (utilizado para ejecutar las herramientas)
    webapp/<span class="ot">app</span>.<span class="fu">html</span>
    <span class="fu">webapp</span>/scripts/<span class="ot">app</span>.<span class="fu">js</span>
    <span class="fu">webapp</span>/scripts/require-<span class="ot">jquery</span>.<span class="fu">js</span>
    <span class="fu">webapp</span>/scripts/<span class="ot">jquery</span>.<span class="ot">alpha</span>.<span class="fu">js</span>
    <span class="fu">webapp</span>/<span class="fu">scripts</span>/<span class="ot">jquery</span>.<span class="ot">beta</span>.<span class="fu">js</span></code></pre>
    <p>Luego, en la carpeta en donde se encuentran <code>require-jquery.js</code> y <code>app.js</code>, crear un archivo llamado <code>app.build.js</code> con el siguiente contenido:</p>
    <p><strong>Archivo de configuración para las herramientas de optimización de RequireJS</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">{
        <span class="dt">appDir</span>: <span class="st">&quot;../&quot;</span>,
        <span class="dt">baseUrl</span>: <span class="st">&quot;scripts/&quot;</span>,
        <span class="dt">dir</span>: <span class="st">&quot;../../webapp-build&quot;</span>,
        <span class="co">//Comentar la siguiente línea si se desea</span>
        <span class="co">//minificar el código por el compilador</span>
        <span class="co">//en su modo &quot;simple&quot;</span>
        <span class="dt">optimize</span>: <span class="st">&quot;none&quot;</span>,
    
        <span class="dt">modules</span>: [
            {
                <span class="dt">name</span>: <span class="st">&quot;app&quot;</span>
            }
        ]
    }</code></pre>
    <p>Para utilizar la herramienta, es necesario tener instalado Java 6. <a href="http://code.google.com/closure/compiler/">Closure Compiler</a> es utilizado para la minificación del código (en caso que <code>optimize: &quot;none&quot;</code> esté comentado).</p>
    <p>Para comenzar a procesar los archivos, abrir una ventana de comandos, dirigirse al directorio <code>webapp/scripts</code> y ejecutar:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"># para sistemas que no son windows
    ../../requirejs/build/<span class="ot">build</span>.<span class="fu">sh</span> <span class="ot">app</span>.<span class="ot">build</span>.<span class="fu">js</span>
    
    # para sistemas windows
    ..\..\requirejs\build\<span class="ot">build</span>.<span class="fu">bat</span> <span class="ot">app</span>.<span class="ot">build</span>.<span class="fu">js</span></code></pre>
    <p>Una vez ejecutado, el archivo <code>app.js</code> de la carpeta <code>webapp-build</code> contendrá todo el código de <code>app.js</code> más el de <code>jquery.alpha.js</code> y <code>jquery.beta.js</code>. Si se abre el archivo <code>app.html</code> (también en la carpeta <code>webapp-build</code>) podrá notar que ninguna petición se realiza para cargar <code>jquery.alpha.js</code> y <code>jquery.beta.js</code>.</p>
    </div>
    </div>
    <div id="ejercicios-6" class="section level2">
    <h2><a href="#ejercicios-6"><span class="header-section-number">10.4</span> Ejercicios</a></h2>
    <div id="crear-un-módulo-portlet" class="section level3">
    <h3><a href="#crear-un-módulo-portlet"><span class="header-section-number">10.4.1</span> Crear un Módulo Portlet</a></h3>
    <p>Abra el archivo <code>/ejercicios/portlets.html</code> en el navegador. Realice el ejercicio utilizando el archivo <code>/ejercicios/js/portlets.js</code>. 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:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> myPortlet = <span class="fu">Portlet</span>({
        <span class="dt">title </span>: <span class="st">&#39;Curry&#39;</span>,
        <span class="dt">source </span>: <span class="st">&#39;data/html/curry.html&#39;</span>,
        <span class="dt">initialState </span>: <span class="st">&#39;open&#39;</span> <span class="co">// or &#39;closed&#39;</span>
    });
    
    <span class="ot">myPortlet</span>.<span class="ot">$element</span>.<span class="fu">appendTo</span>(<span class="st">&#39;body&#39;</span>);</code></pre>
    <p>Cada portlet deberá ser un <code>div</code> con un título, un área de contenido, un botón para abrir/cerrar el portlet, un botón para removerlo y otro para actualizarlo. El portlet devuelto por la función deberá tener la siguiente API pública:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">myPortlet</span>.<span class="fu">open</span>(); <span class="co">// fuerza a abrir</span>
    <span class="ot">myPortlet</span>.<span class="fu">close</span>(); <span class="co">// fuerza a cerrar</span>
    <span class="ot">myPortlet</span>.<span class="fu">toggle</span>(); <span class="co">// alterna entre los estados abierto y cerrado</span>
    <span class="ot">myPortlet</span>.<span class="fu">refresh</span>(); <span class="co">// actualiza el contenido</span>
    <span class="ot">myPortlet</span>.<span class="fu">destroy</span>(); <span class="co">// remueve el portlet de la página</span>
    <span class="ot">myPortlet</span>.<span class="fu">setSource</span>(<span class="st">&#39;data/html/onions.html&#39;</span>); <span class="co">// cambia el código</span></code></pre>
    </div>
    </div>
    </div>
    <div id="eventos-personalizados" class="section level1">
    <h1><a href="#eventos-personalizados"><span class="header-section-number">11</span> Eventos Personalizados</a></h1>
    <div id="introducción-a-los-eventos-personalizados" class="section level2">
    <h2><a href="#introducción-a-los-eventos-personalizados"><span class="header-section-number">11.1</span> Introducción a los Eventos Personalizados</a></h2>
    <p>Todos estamos familiarizados con los eventos básicos — <code>click</code>, <code>mouseover</code>, <code>focus</code>, <code>blur</code>, <code>submit</code>, etc. — que surgen a partir de la interacción del usuario con el navegador.</p>
    <p>Los eventos personalizados permiten conocer el mundo de la programación orientada a eventos (en inglés <em>event-driven programming</em>). En este capítulo, se utilizará el sistema de eventos personalizados de jQuery para crear una simple aplicación de búsqueda en <em>Twitter</em>.</p>
    <p>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:</p>
    <ul>
    <li><p>los comportamientos del elemento objetivo pueden ser ejecutados por diferentes elementos utilizando el mismo código;</p></li>
    <li><p>los comportamientos pueden ser ejecutados en múltiples, similares elementos objetivos a la vez;</p></li>
    <li><p>los comportamientos son asociados de forma más clara con el elemento objetivo, haciendo que el código sea más fácil de leer y mantener.</p></li>
    </ul>
    <p>Un ejemplo es la mejor forma de explicar el asunto. Suponga que posee una lámpara incandescente en una habitación de una casa. La lámpara actualmente esta encendida. La misma es controlada por dos interruptores de tres posiciones y un <em>clapper</em> (interruptor activado por aplausos):</p>
    <pre class="sourceCode xml"><code class="sourceCode xml"><span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;room&quot;</span><span class="ot"> id=</span><span class="st">&quot;kitchen&quot;</span><span class="kw">&gt;</span>
        <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;lightbulb on&quot;</span><span class="kw">&gt;&lt;/div&gt;</span>
        <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;switch&quot;</span><span class="kw">&gt;&lt;/div&gt;</span>
        <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;switch&quot;</span><span class="kw">&gt;&lt;/div&gt;</span>
        <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;clapper&quot;</span><span class="kw">&gt;&lt;/div&gt;</span>
    <span class="kw">&lt;/div&gt;</span></code></pre>
    <p>Ejecutando el <em>clapper</em> o alguno de los interruptores, el estado de la lampara cambia. A los interruptores o al <em>clapper</em> no le interesan si la lámpara esta prendida o apagada, tan solo quieren cambiar su estado</p>
    <p>Sin la utilización de eventos personalizados, es posible escribir la rutina de la siguiente manera:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;.switch, .clapper&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="kw">var</span> $light = <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">parent</span>().<span class="fu">find</span>(<span class="st">&#39;.lightbulb&#39;</span>);
        <span class="kw">if</span> (<span class="ot">$light</span>.<span class="fu">hasClass</span>(<span class="st">&#39;on&#39;</span>)) {
            <span class="ot">$light</span>.<span class="fu">removeClass</span>(<span class="st">&#39;on&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;off&#39;</span>);
        } <span class="kw">else</span> {
            <span class="ot">$light</span>.<span class="fu">removeClass</span>(<span class="st">&#39;off&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;on&#39;</span>);
        }
    });</code></pre>
    <p>Por otro lado, utilizando eventos personalizados, el código queda así:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;.lightbulb&#39;</span>).<span class="fu">on</span>(<span class="st">&#39;changeState&#39;</span>, <span class="kw">function</span>(e) {
        <span class="kw">var</span> $light = <span class="fu">$</span>(<span class="kw">this</span>);
        <span class="kw">if</span> (<span class="ot">$light</span>.<span class="fu">hasClass</span>(<span class="st">&#39;on&#39;</span>)) {
            <span class="ot">$light</span>.<span class="fu">removeClass</span>(<span class="st">&#39;on&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;off&#39;</span>);
        } <span class="kw">else</span> {
            <span class="ot">$light</span>.<span class="fu">removeClass</span>(<span class="st">&#39;off&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;on&#39;</span>);
        }
    });
    
    <span class="fu">$</span>(<span class="st">&#39;.switch, .clapper&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">parent</span>().<span class="fu">find</span>(<span class="st">&#39;.lightbulb&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;changeState&#39;</span>);
    });</code></pre>
    <p>Algo importante ha sucedido: el comportamiento de la lámpara se ha movido, antes estaba en los interruptores y en el <em>clapper</em>, ahora se encuentra en la misma lámpara.</p>
    <p>También es posible hacer el ejemplo un poco más interesante. Suponga que se ha añadido otra habitación a la casa, junto con un interruptor general, como se muestra a continuación:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;div <span class="kw">class</span>=<span class="st">&quot;room&quot;</span> id=<span class="st">&quot;kitchen&quot;</span>&gt;
        &lt;div <span class="kw">class</span>=<span class="st">&quot;lightbulb on&quot;</span>&gt;&lt;<span class="ot">/div&gt;</span>
    <span class="ot">    &lt;div class=&quot;switch&quot;&gt;&lt;/div</span>&gt;
        &lt;div <span class="kw">class</span>=<span class="st">&quot;switch&quot;</span>&gt;&lt;<span class="ot">/div&gt;</span>
    <span class="ot">    &lt;div class=&quot;clapper&quot;&gt;&lt;/div</span>&gt;
    &lt;<span class="ot">/div&gt;</span>
    <span class="ot">&lt;div class=&quot;room&quot; id=&quot;bedroom&quot;&gt;</span>
    <span class="ot">    &lt;div class=&quot;lightbulb on&quot;&gt;&lt;/div</span>&gt;
        &lt;div <span class="kw">class</span>=<span class="st">&quot;switch&quot;</span>&gt;&lt;<span class="ot">/div&gt;</span>
    <span class="ot">    &lt;div class=&quot;switch&quot;&gt;&lt;/div</span>&gt;
        &lt;div <span class="kw">class</span>=<span class="st">&quot;clapper&quot;</span>&gt;&lt;<span class="ot">/div&gt;</span>
    <span class="ot">&lt;/div</span>&gt;
    &lt;div id=<span class="st">&quot;master_switch&quot;</span>&gt;&lt;<span class="ot">/div&gt;</span></code></pre>
    <p>Si existe alguna lámpara prendida en la casa, es posible apagarlas a través del interruptor general, de igual forma si existen luces apagadas, es posible prenderlas con dicho interruptor. Para realizar esta tarea, se agregan dos eventos personalizados más a la lámpara: <code>turnOn</code> y <code>turnOff</code>. A través de una lógica en el evento <code>changeState</code> se decide qué evento personalizado utilizar:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;.lightbulb&#39;</span>)
        .<span class="fu">on</span>(<span class="st">&#39;changeState&#39;</span>, <span class="kw">function</span>(e) {
            <span class="kw">var</span> $light = <span class="fu">$</span>(<span class="kw">this</span>);
            <span class="kw">if</span> (<span class="ot">$light</span>.<span class="fu">hasClass</span>(<span class="st">&#39;on&#39;</span>)) {
                <span class="ot">$light</span>.<span class="fu">trigger</span>(<span class="st">&#39;turnOff&#39;</span>);
            } <span class="kw">else</span> {
                <span class="ot">$light</span>.<span class="fu">trigger</span>(<span class="st">&#39;turnOn&#39;</span>);
            }
        })
        .<span class="fu">on</span>(<span class="st">&#39;turnOn&#39;</span>, <span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">removeClass</span>(<span class="st">&#39;off&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;on&#39;</span>);
        })
        .<span class="fu">on</span>(<span class="st">&#39;turnOff&#39;</span>, <span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">removeClass</span>(<span class="st">&#39;off&#39;</span>).<span class="fu">addClass</span>(<span class="st">&#39;on&#39;</span>);
        });
    
    <span class="fu">$</span>(<span class="st">&#39;.switch, .clapper&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">parent</span>().<span class="fu">find</span>(<span class="st">&#39;.lightbulb&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;changeState&#39;</span>);
    });
    
    <span class="fu">$</span>(<span class="st">&#39;#master_switch&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="kw">if</span> (<span class="fu">$</span>(<span class="st">&#39;.lightbulb.on&#39;</span>).<span class="fu">length</span>) {
            <span class="fu">$</span>(<span class="st">&#39;.lightbulb&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;turnOff&#39;</span>);
        } <span class="kw">else</span> {
            <span class="fu">$</span>(<span class="st">&#39;.lightbulb&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;turnOn&#39;</span>);
        }
    });</code></pre>
    <p>Note como el comportamiento del interruptor general se ha vinculado al interruptor general mientras que el comportamiento de las lámparas pertenece a las lámparas.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Si esta acostumbrado a la programación orientada a objetos, puede resultar útil pensar de los eventos personalizados como métodos de objetos. En términos generales, el objeto al que pertenece el método se crea a partir del selector jQuery. Vincular el evento personalizado <code>changeState</code> a todos los elementos <code>$(‘.light’)</code> es similar a tener una clase llamada <code>Light</code> con un método <code>changeState</code>, y luego instanciar nuevos objetos <code>Light</code> por cada elemento.</p>
    </blockquote>
    <p><strong>Recapitulación: <span class="math">. <em>f</em><em>n</em>. <em>o</em><em>n</em><em>y</em></span>.fn.trigger</strong></p>
    <p>En el mundo de los eventos personalizados, existen dos métodos importantes de jQuery: <code>$.fn.on</code> y <code>$.fn.trigger</code>. 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:</p>
    <ul>
    <li><p>el método <code>$.fn.on</code> 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 <code>data</code> del objeto del evento. A su vez, la función controladora recibe el objeto del evento como primer argumento;</p></li>
    <li><p>el método <code>$.fn.trigger</code> toma como argumentos el tipo de evento y opcionalmente, puede tomar un vector con valores. Estos valores serán pasados a la función controladora de eventos como argumentos luego del objeto del evento.</p></li>
    </ul>
    <p>A continuación se muestra un ejemplo de utilización de <code>$.fn.on</code> y <code>$.fn.trigger</code> en donde se utiliza información personalizada en ambos casos:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(document).<span class="fu">on</span>(<span class="st">&#39;myCustomEvent&#39;</span>, { <span class="dt">foo </span>: <span class="st">&#39;bar&#39;</span> }, <span class="kw">function</span>(e, arg1, arg2) {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="ot">e</span>.<span class="ot">data</span>.<span class="fu">foo</span>); <span class="co">// &#39;bar&#39;</span>
        <span class="ot">console</span>.<span class="fu">log</span>(arg1); <span class="co">// &#39;bim&#39;</span>
        <span class="ot">console</span>.<span class="fu">log</span>(arg2); <span class="co">// &#39;baz&#39;</span>
    });
    
    <span class="fu">$</span>(document).<span class="fu">trigger</span>(<span class="st">&#39;myCustomEvent&#39;</span>, [ <span class="st">&#39;bim&#39;</span>, <span class="st">&#39;baz&#39;</span> ]);</code></pre>
    <div id="un-ejemplo-de-aplicación" class="section level3">
    <h3><a href="#un-ejemplo-de-aplicación"><span class="header-section-number">11.1.1</span> Un Ejemplo de Aplicación</a></h3>
    <p>Para demostrar el poder de los eventos personalizados, se desarrollará una simple herramienta para buscar en <em>Twitter</em>. 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 <em>Twitter</em>.</p>
    <p>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.</p>
    <p>El resultado final de la aplicación será el siguiente:</p>
    <p><strong>Figura 11.1. La aplicación finalizada</strong></p>
    <div class="figure">
    <img src="./figuras/70415e9fffab1c47953f5264ecf722fe.png" alt="La aplicación finalizada" /><p class="caption">La aplicación finalizada</p>
    </div>
    <div id="iniciación" class="section level4">
    <h4><a href="#iniciación"><span class="header-section-number">11.1.1.1</span> Iniciación</a></h4>
    <p>Se empieza con un HTML básico:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript">&lt;h1&gt;Twitter Search&lt;<span class="ot">/h1&gt;</span>
    <span class="ot">&lt;input type=&quot;button&quot; id=&quot;get_trends&quot;</span>
    <span class="ot">    value=&quot;Load Trending Terms&quot; /</span>&gt;
    
    &lt;form&gt;
        &lt;input type=<span class="st">&quot;text&quot;</span> <span class="kw">class</span>=<span class="st">&quot;input_text&quot;</span>
            id=<span class="st">&quot;search_term&quot;</span> <span class="ot">/&gt;</span>
    <span class="ot">    &lt;input type=&quot;submit&quot; class=&quot;input_submit&quot;</span>
    <span class="ot">        value=&quot;Add Search Term&quot; /</span>&gt;
    &lt;<span class="ot">/form&gt;</span>
    
    <span class="ot">&lt;div id=&quot;twitter&quot;&gt;</span>
    <span class="ot">    &lt;div class=&quot;template results&quot;&gt;</span>
    <span class="ot">        &lt;h2&gt;Search Results for</span>
    <span class="ot">        &lt;span class=&quot;search_term&quot;&gt;&lt;/span</span>&gt;&lt;<span class="ot">/h2&gt;</span>
    <span class="ot">    &lt;/div</span>&gt;
    &lt;<span class="ot">/div&gt;</span></code></pre>
    <p>El HTML posee un contenedor (#twitter) para el widget, una plantilla para los resultados (oculto con CSS) y un simple formulario en donde el usuario puede escribir el término a buscar.</p>
    <p>Existen dos tipos de elementos en los cuales actuar: los contenedores de resultados y el contenedor <em>Twitter</em>.</p>
    <p>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 <em>Twitter</em>. 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:</p>
    <dl>
    <dt>refresh</dt>
    <dd><p>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.</p>
    </dd>
    <dt>populate</dt>
    <dd><p>Recibe la información JSON y la utiliza para rellenar el contenedor.</p>
    </dd>
    <dt>remove</dt>
    <dd><p>Remueve el contenedor de la página luego de que el usuario confirme la acción. Dicha confirmación puede omitirse si se pasa <code>true</code> 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.</p>
    </dd>
    <dt>collapse</dt>
    <dd><p>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”.</p>
    </dd>
    <dt>expand</dt>
    <dd><p>Remueve la clase del contenedor que añade el evento <em>collapse</em>. Además cambiará el botón de “Expandir” a “Colapsar”.</p>
    </dd>
    </dl>
    <p>Además, la extensión es responsable de añadir los botones de acciones al contenedor, vinculando un evento <code>click</code> a cada botón y utilizando la clase de cada ítem para determinar qué evento personalizado será ejecutado en cada contenedor de resultados.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="ot">fn</span>.<span class="fu">twitterResult</span> = <span class="kw">function</span>(settings) {
        <span class="kw">return</span> <span class="kw">this</span>.<span class="fu">each</span>(<span class="kw">function</span>() {
            <span class="kw">var</span> $results = <span class="fu">$</span>(<span class="kw">this</span>),
                $actions = <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">actions</span> =
                    <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">actions</span> ||
                    <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">createActions</span>(),
                $a = <span class="ot">$actions</span>.<span class="fu">clone</span>().<span class="fu">prependTo</span>($results),
                term = <span class="ot">settings</span>.<span class="fu">term</span>;
    
            <span class="ot">$results</span>.<span class="fu">find</span>(<span class="st">&#39;span.search_term&#39;</span>).<span class="fu">text</span>(term);
    
            <span class="ot">$</span>.<span class="fu">each</span>(
                [<span class="st">&#39;refresh&#39;</span>, <span class="st">&#39;populate&#39;</span>, <span class="st">&#39;remove&#39;</span>, <span class="st">&#39;collapse&#39;</span>, <span class="st">&#39;expand&#39;</span>],
                <span class="kw">function</span>(i, ev) {
                    <span class="ot">$results</span>.<span class="fu">bind</span>(
                        ev,
                        { <span class="dt">term </span>: term },
                        <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">events</span>[ev]
                    );
                }
            );
    
            <span class="co">// utiliza la clase de cada acción para determinar</span>
            <span class="co">// que evento se ejecutará en el panel de resultados</span>
            <span class="ot">$a</span>.<span class="fu">find</span>(<span class="st">&#39;li&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
                <span class="co">// pasa el elemento &lt;li&gt; clickeado en la función</span>
                <span class="co">// para que se pueda manipular en caso de ser necesario</span>
                <span class="ot">$results</span>.<span class="fu">trigger</span>(<span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">attr</span>(<span class="st">&#39;class&#39;</span>), [ <span class="fu">$</span>(<span class="kw">this</span>) ]);
            });
        });
    };
    
    <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">createActions</span> = <span class="kw">function</span>() {
        <span class="kw">return</span> <span class="fu">$</span>(<span class="st">&#39;&lt;ul class=&quot;actions&quot; /&gt;&#39;</span>).<span class="fu">append</span>(
            <span class="st">&#39;&lt;li class=&quot;refresh&quot;&gt;Refresh&lt;/li&gt;&#39;</span> +
            <span class="st">&#39;&lt;li class=&quot;remove&quot;&gt;Remove&lt;/li&gt;&#39;</span> +
            <span class="st">&#39;&lt;li class=&quot;collapse&quot;&gt;Collapse&lt;/li&gt;&#39;</span>
        );
    };
    
    <span class="ot">$</span>.<span class="ot">fn</span>.<span class="ot">twitterResult</span>.<span class="fu">events</span> = {
        <span class="dt">refresh </span>: <span class="kw">function</span>(e) {
               <span class="co">// indica que los resultados se estan actualizando</span>
            <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">addClass</span>(<span class="st">&#39;refreshing&#39;</span>);
    
            <span class="ot">$this</span>.<span class="fu">find</span>(<span class="st">&#39;p.tweet&#39;</span>).<span class="fu">remove</span>();
            <span class="ot">$results</span>.<span class="fu">append</span>(<span class="st">&#39;&lt;p class=&quot;loading&quot;&gt;Loading ...&lt;/p&gt;&#39;</span>);
    
            <span class="co">// obtiene la información de Twitter en formato jsonp</span>
            <span class="ot">$</span>.<span class="fu">getJSON</span>(
                <span class="st">&#39;http://search.twitter.com/search.json?q=&#39;</span> +
                    <span class="fu">escape</span>(<span class="ot">e</span>.<span class="ot">data</span>.<span class="fu">term</span>) + <span class="st">&#39;&amp;rpp=5&amp;callback=?&#39;</span>,
                <span class="kw">function</span>(json) {
                    <span class="ot">$this</span>.<span class="fu">trigger</span>(<span class="st">&#39;populate&#39;</span>, [ json ]);
                }
            );
        },
    
        <span class="dt">populate </span>: <span class="kw">function</span>(e, json) {
            <span class="kw">var</span> results = <span class="ot">json</span>.<span class="fu">results</span>;
            <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);
    
            <span class="ot">$this</span>.<span class="fu">find</span>(<span class="st">&#39;p.loading&#39;</span>).<span class="fu">remove</span>();
    
            <span class="ot">$</span>.<span class="fu">each</span>(results, <span class="kw">function</span>(i,result) {
                <span class="kw">var</span> tweet = <span class="st">&#39;&lt;p class=&quot;tweet&quot;&gt;&#39;</span> +
                    <span class="st">&#39;&lt;a href=&quot;http://twitter.com/&#39;</span> +
                    <span class="ot">result</span>.<span class="fu">from_user</span> +
                    <span class="st">&#39;&quot;&gt;&#39;</span> +
                    <span class="ot">result</span>.<span class="fu">from_user</span> +
                    <span class="st">&#39;&lt;/a&gt;: &#39;</span> +
                    <span class="ot">result</span>.<span class="fu">text</span> +
                    <span class="st">&#39; &lt;span class=&quot;date&quot;&gt;&#39;</span> +
                    <span class="ot">result</span>.<span class="fu">created_at</span> +
                    <span class="st">&#39;&lt;/span&gt;&#39;</span> +
                <span class="st">&#39;&lt;/p&gt;&#39;</span>;
                <span class="ot">$this</span>.<span class="fu">append</span>(tweet);
            });
    
            <span class="co">// indica que los resultados</span>
            <span class="co">// ya se han actualizado</span>
            <span class="ot">$this</span>.<span class="fu">removeClass</span>(<span class="st">&#39;refreshing&#39;</span>);
        },
    
        <span class="dt">remove </span>: <span class="kw">function</span>(e, force) {
            <span class="kw">if</span> (
                !force &amp;&amp;
                !<span class="fu">confirm</span>(<span class="st">&#39;Remove panel for term &#39;</span> + <span class="ot">e</span>.<span class="ot">data</span>.<span class="fu">term</span> + <span class="st">&#39;?&#39;</span>)
            ) {
                <span class="kw">return</span>;
            }
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">remove</span>();
    
            <span class="co">// indica que ya no se tendrá</span>
            <span class="co">// un panel para el término</span>
            search_terms[<span class="ot">e</span>.<span class="ot">data</span>.<span class="fu">term</span>] = <span class="dv">0</span>;
        },
    
        <span class="dt">collapse </span>: <span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">find</span>(<span class="st">&#39;li.collapse&#39;</span>).<span class="fu">removeClass</span>(<span class="st">&#39;collapse&#39;</span>)
                .<span class="fu">addClass</span>(<span class="st">&#39;expand&#39;</span>).<span class="fu">text</span>(<span class="st">&#39;Expand&#39;</span>);
    
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">addClass</span>(<span class="st">&#39;collapsed&#39;</span>);
        },
    
        <span class="dt">expand </span>: <span class="kw">function</span>(e) {
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">find</span>(<span class="st">&#39;li.expand&#39;</span>).<span class="fu">removeClass</span>(<span class="st">&#39;expand&#39;</span>)
                .<span class="fu">addClass</span>(<span class="st">&#39;collapse&#39;</span>).<span class="fu">text</span>(<span class="st">&#39;Collapse&#39;</span>);
    
            <span class="fu">$</span>(<span class="kw">this</span>).<span class="fu">removeClass</span>(<span class="st">&#39;collapsed&#39;</span>);
        }
    };</code></pre>
    <p>El contenedor <em>Twitter</em>, posee solo dos eventos personalizados:</p>
    <dl>
    <dt>getResults</dt>
    <dd><p>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 <code>$.fn.twitterResult</code> (mostrada anteriormente) y luego ejecuta el evento <code>refresh</code> 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.</p>
    </dd>
    <dt>getTrends</dt>
    <dd><p>Consulta a <em>Twitter</em> el listado de los 10 primeros “términos de moda”, interactúa con ellos y ejecuta el evento <code>getResults</code> por cada uno, de tal modo que añade un contenedor de resultados por cada término.</p>
    </dd>
    </dl>
    <p>Vinculaciones en el contenedor <em>Twitter</em>:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;#twitter&#39;</span>)
        .<span class="fu">on</span>(<span class="st">&#39;getResults&#39;</span>, <span class="kw">function</span>(e, term) {
            <span class="co">// se comprueba que ya no exista una caja para el término</span>
            <span class="kw">if</span> (!search_terms[term]) {
                <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);
                <span class="kw">var</span> $template = <span class="ot">$this</span>.<span class="fu">find</span>(<span class="st">&#39;div.template&#39;</span>);
    
                <span class="co">// realiza una copia de la plantilla</span>
                <span class="co">// y la inserta como la primera caja de resultados</span>
                $results = <span class="ot">$template</span>.<span class="fu">clone</span>().
                    <span class="fu">removeClass</span>(<span class="st">&#39;template&#39;</span>).
                    <span class="fu">insertBefore</span>(<span class="ot">$this</span>.<span class="fu">find</span>(<span class="st">&#39;div:first&#39;</span>)).
                    <span class="fu">twitterResult</span>({
                        <span class="st">&#39;term&#39;</span> : term
                    });
    
                <span class="co">// carga el contenido utilizando el evento personalizado &quot;refresh&quot;</span>
                <span class="co">// vinculado al contenedor de resultados</span>
                <span class="ot">$results</span>.<span class="fu">trigger</span>(<span class="st">&#39;refresh&#39;</span>);
                search_terms[term] = <span class="dv">1</span>;
            }
        })
        .<span class="fu">on</span>(<span class="st">&#39;getTrends&#39;</span>, <span class="kw">function</span>(e) {
            <span class="kw">var</span> $this = <span class="fu">$</span>(<span class="kw">this</span>);
            <span class="ot">$</span>.<span class="fu">getJSON</span>(<span class="st">&#39;http://api.twitter.com/1/trends/1.json?callback=?&#39;</span>, <span class="kw">function</span>(json) {
                    <span class="kw">var</span> trends = json[<span class="dv">0</span>].<span class="fu">trends</span>;
                    <span class="ot">$</span>.<span class="fu">each</span>(trends, <span class="kw">function</span>(i, trend) {
                        <span class="ot">$this</span>.<span class="fu">trigger</span>(<span class="st">&#39;getResults&#39;</span>, [ <span class="ot">trend</span>.<span class="fu">name</span> ]);
                    });
                });
        });</code></pre>
    <p>Hasta ahora, se ha escrito una gran cantidad de código que no realiza nada, lo cual no esta mal. Se han especificado todos los comportamientos que se desean para los elementos núcleos y se ha creado un sólido marco para la creación rápida de la interfaz.</p>
    <p>A continuación, se conecta la caja de búsqueda y el botón para cargar los “Temas de moda”. En la caja de texto, se captura el término ingresado y se pasa al mismo tiempo que se ejecuta el evento <code>getResults</code>. Por otro lado, haciendo click en el botón para cargar los “Temas de moda”, se ejecuta el evento <code>getTrends</code>:</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="fu">$</span>(<span class="st">&#39;form&#39;</span>).<span class="fu">submit</span>(<span class="kw">function</span>(e) {
        <span class="ot">e</span>.<span class="fu">preventDefault</span>();
        <span class="kw">var</span> term = <span class="fu">$</span>(<span class="st">&#39;#search_term&#39;</span>).<span class="fu">val</span>();
        <span class="fu">$</span>(<span class="st">&#39;#twitter&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;getResults&#39;</span>, [ term ]);
    });
    
    <span class="fu">$</span>(<span class="st">&#39;#get_trends&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>() {
        <span class="fu">$</span>(<span class="st">&#39;#twitter&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;getTrends&#39;</span>);
    });</code></pre>
    <p>Añadiendo botones con un ID apropiado, es posible remover, colapsar, expandir y refrescar todos los contenedores de resultados al mismo tiempo. Para el botón que remueve el contenedor, notar que se esta pasando <code>true</code> al controlador del evento como segundo argumento, indicando que no se desea una confirmación del usuario para remover el contenedor.</p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">each</span>([<span class="st">&#39;refresh&#39;</span>, <span class="st">&#39;expand&#39;</span>, <span class="st">&#39;collapse&#39;</span>], <span class="kw">function</span>(i, ev) {
        <span class="fu">$</span>(<span class="st">&#39;#&#39;</span> + ev).<span class="fu">click</span>(<span class="kw">function</span>(e) { <span class="fu">$</span>(<span class="st">&#39;#twitter div.results&#39;</span>).<span class="fu">trigger</span>(ev); });
    });
    
    <span class="fu">$</span>(<span class="st">&#39;#remove&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>(e) {
        <span class="kw">if</span> (<span class="fu">confirm</span>(<span class="st">&#39;Remove all results?&#39;</span>)) {
            <span class="fu">$</span>(<span class="st">&#39;#twitter div.results&#39;</span>).<span class="fu">trigger</span>(<span class="st">&#39;remove&#39;</span>, [ <span class="kw">true</span> ]);
        }
    });</code></pre>
    </div>
    <div id="conclusión-1" class="section level4">
    <h4><a href="#conclusión-1"><span class="header-section-number">11.1.1.2</span> Conclusión</a></h4>
    <p>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.</p>
    <p>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.</p>
    <p>Puede ver la aplicación completa en los archivos <code>demos/custom-events/custom-events.html</code> y <code>demos/custom-events/js/custom-events.js</code> del material que componen este libro.</p>
    </div>
    </div>
    </div>
    </div>
    <div id="funciones-y-ejecuciones-diferidas-a-través-del-objeto-.deferred" class="section level1">
    <h1><a href="#funciones-y-ejecuciones-diferidas-a-través-del-objeto-.deferred"><span class="header-section-number">12</span> Funciones y ejecuciones diferidas a través del objeto <code>$.Deferred</code></a></h1>
    <div id="introducción-5" class="section level2">
    <h2><a href="#introducción-5"><span class="header-section-number">12.1</span> Introducción</a></h2>
    <p>A partir de la versión 1.5 de jQuery, la biblioteca introdujo una nueva utilidad: El objeto diferido <code>$.Deferred</code> (en inglés <em>Deferred Object</em>). Este objeto introduce nuevas formas para la invocación y ejecución de las funciones de devolución (<em>callbacks</em>), permitiendo crear aplicaciones más robustas y flexibles. Para más detalles sobre <code>$.Deferred</code>, puede consultar <a href="http://api.jquery.com/category/deferred-object/">http://api.jquery.com/category/deferred-object/</a>.</p>
    </div>
    <div id="el-objeto-diferido-y-ajax" class="section level2">
    <h2><a href="#el-objeto-diferido-y-ajax"><span class="header-section-number">12.2</span> El objeto diferido y Ajax</a></h2>
    <p>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.</p>
    <p>Según se pudo apreciar en el capítulo dedicado, una manera de invocar una petición Ajax es:</p>
    <p><strong>Manera tradicional de utilizar el método <code>$.ajax</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="ot">$</span>.<span class="fu">ajax</span>({
       <span class="co">// la URL para la petición</span>
       <span class="dt">url </span>: <span class="st">&#39;post.php&#39;</span>,
    
       <span class="co">// funciónes de devolución a ejecutar</span>
       <span class="co">// en caso que la petición haya sido</span>
       <span class="co">// satisfactoria, con error y/o completada</span>
       <span class="dt">success </span>: <span class="kw">function</span>(data) {
           <span class="fu">alert</span>(<span class="st">&#39;Petición realizada satisfactoriamente&#39;</span>);
       },
       <span class="dt">error </span>: <span class="kw">function</span>(jqXHR, status, error) {
           <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
       },
       <span class="dt">complete </span>: <span class="kw">function</span>(jqXHR, status) {
           <span class="fu">alert</span>(<span class="st">&#39;Petición realizada&#39;</span>);
       }
    });</code></pre>
    <p>Como se puede observar, las funciones de devolución son configuradas dentro del mismo objeto <code>$.ajax</code>. Esta manera es incomoda y poco flexible ya que <strong>no permite desacoplar las funciones de devolución de la misma petición Ajax</strong>. Y en grandes aplicaciones esto puede llegar a ser un problema.</p>
    <p>El objeto diferido nos permite reescribir el código anterior de la siguiente manera:</p>
    <p><strong>El objeto diferido en una petición Ajax</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// dentro de una variable se define </span>
    <span class="co">// la configuración de la petición ajax</span>
    <span class="kw">var</span> ajax = <span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;post.php&#39;</span>
    });
    
    <span class="co">// a través del método done() ejecutamos</span>
    <span class="co">// la función de devolución satisfactoria (sucess)</span>
    <span class="ot">ajax</span>.<span class="fu">done</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Petición realizada satisfactoriamente&#39;</span>);
    });
    
    <span class="co">// a través del método fail() ejecutamos</span>
    <span class="co">// la función de devolución de error (error)</span>
    <span class="ot">ajax</span>.<span class="fu">fail</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
    });
    
    <span class="co">// a través del método always() ejecutamos</span>
    <span class="co">// la función de devolución de petición completada (complete)</span>
    <span class="ot">ajax</span>.<span class="fu">always</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Petición realizada&#39;</span>);
    });</code></pre>
    <p>A través de los métodos <code>deferred.done</code>, <code>deferred.fail</code> y <code>deferred.always</code> es posible desacoplar las funciones de devolución de la misma petición Ajax, permitiendo un manejo más comodo de las mismas.</p>
    <p><em>Notar que en en ningún momento se llama al objeto diferido <code>$.Deferred</code>. Esto es porque jQuery ya lo incorpora implicitamente dentro del manejo del objeto <code>$.ajax</code>. Más adelante se explicará como utilizar al objeto <code>$.Deferred</code> de manera explícita.</em></p>
    <p>De la misma forma es posible crear colas de funciones de devolución o atarlas a diferentes lógicas/acciones:</p>
    <p><strong>Colas de funciones de devolución en una petición Ajax</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// definición de la petición Ajax</span>
    <span class="kw">var</span> ajax = <span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;post.php&#39;</span>
    });
    
    <span class="co">// primera función de devolución a ejecutar</span>
    <span class="ot">ajax</span>.<span class="fu">done</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Primera función de devolución en caso satisfactorio&#39;</span>);
    });
    
    <span class="co">// segunda función de devolución a ejecutar </span>
    <span class="co">// inmediatamente después de la primera</span>
    <span class="ot">ajax</span>.<span class="fu">done</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Segunda función de devolución en caso satisfactorio&#39;</span>);
    });
    
    <span class="co">// si el usuario hace click en #element se</span>
    <span class="co">// agrega una tercera función de devolución</span>
    <span class="fu">$</span>(<span class="st">&#39;#element&#39;</span>).<span class="fu">click</span>(<span class="kw">function</span>(){
    
        <span class="ot">ajax</span>.<span class="fu">done</span>(<span class="kw">function</span>(){
            <span class="fu">alert</span>(<span class="st">&#39;Tercera función de devolución si el usuario hace click&#39;</span>);
        });
        
    });
    
    <span class="co">// en caso que exista un error se define otra</span>
    <span class="co">// función de devolución</span>
    <span class="ot">ajax</span>.<span class="fu">fail</span>(<span class="kw">function</span>(){
        <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
    });</code></pre>
    <p>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 <code>#element</code> 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 <code>ajax</code>) ya tiene información asociada sobre que la petición Ajax se realizó correctamente.</p>
    <div id="deferred.then" class="section level3">
    <h3><a href="#deferred.then"><span class="header-section-number">12.2.1</span> <code>deferred.then</code></a></h3>
    <p>Otra manera de utilizar los métodos <code>deferred.done</code> y <code>deferred.fail</code> es a través de <code>deferred.then</code>, el cual permite definir en un mismo bloque de código las funciones de devolución a suceder en los casos satisfactorios y erroneos.</p>
    <p><strong>Utilización del método <code>deferred.then</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// definición de la petición Ajax</span>
    <span class="kw">var</span> ajax = <span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;post.php&#39;</span>
    });
    
    <span class="co">// el método espera dos funciones de devolución</span>
    <span class="ot">ajax</span>.<span class="fu">then</span>(
    
        <span class="co">// la primera es la función de devolución satisfactoria</span>
        <span class="kw">function</span>(){ 
            <span class="fu">alert</span>(<span class="st">&#39;Petición realizada satisfactoriamente&#39;</span>); 
        },
        
        <span class="co">// la segunda es la función de devolución erronea</span>
        <span class="kw">function</span>(){ 
            <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
        }
        
    );</code></pre>
    </div>
    </div>
    <div id="creación-de-objetos-diferidos-con-.deferred" class="section level2">
    <h2><a href="#creación-de-objetos-diferidos-con-.deferred"><span class="header-section-number">12.3</span> Creación de objetos diferidos con <code>$.Deferred</code></a></h2>
    <p>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 <code>$.Deferred</code>.</p>
    <p>Por ejemplo, una función que verifica si un número es par, de la manera tradicional puede escribirse de la siguiente manera:</p>
    <p><strong>Función sin utilizar el objeto <code>$.Deferred</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// función que calcula si un número entero es par o impar</span>
    <span class="kw">var</span> isEven = <span class="kw">function</span>(number) {
    
        <span class="kw">if</span> (number%<span class="dv">2</span> == <span class="dv">0</span>){
            <span class="kw">return</span> <span class="kw">true</span>;
        } <span class="kw">else</span> {
            <span class="kw">return</span> <span class="kw">false</span>;
        }
        
    }
    
    <span class="co">// si es par registra un mensaje,</span>
    <span class="co">// en caso contrario registra otro</span>
    <span class="kw">if</span> (<span class="fu">isEven</span>(<span class="dv">2</span>)){
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Es par&#39;</span>);
    } <span class="kw">else</span> {
        <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Es impar&#39;</span>);
    }</code></pre>
    <p>Utilizando el objeto <code>$.Deferred</code>, el mismo ejemplo puede reescribirse de la siguiente forma:</p>
    <p><strong>Función utilizando el objeto <code>$.Deferred</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// función que calcula si un número entero es par o impar</span>
    <span class="kw">var</span> isEven = <span class="kw">function</span>(number) {
        
        <span class="co">// guarda en una variable al objeto $.Deferred()</span>
        <span class="kw">var</span> dfd = <span class="ot">$</span>.<span class="fu">Deferred</span>();
        
        <span class="co">// si es par, resuelve al objeto utilizando deferred.resolve,</span>
        <span class="co">// caso contrario, lo rechaza utilizando deferred.reject</span>
        <span class="kw">if</span> (number%<span class="dv">2</span> == <span class="dv">0</span>){
            <span class="ot">dfd</span>.<span class="fu">resolve</span>();
        } <span class="kw">else</span> {
            <span class="ot">dfd</span>.<span class="fu">reject</span>();
        }
        
        <span class="co">// devuelve al objeto diferido con su estado definido</span>
        <span class="kw">return</span> <span class="ot">dfd</span>.<span class="fu">promise</span>();
        
    }
    
    <span class="co">// con deferred.then se manejan las funciones de devolución</span>
    <span class="co">// en los casos que el numero sea par o impar</span>
    <span class="fu">isEven</span>(<span class="dv">2</span>).<span class="fu">then</span>(
    
        <span class="co">// la primera es la función de devolución satisfactoria</span>
        <span class="kw">function</span>(){ 
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Es par&#39;</span>);
        },
        
        <span class="co">// la segunda es la función de devolución erronea</span>
        <span class="kw">function</span>(){ 
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;Es impar&#39;</span>);
        }
        
    );</code></pre>
    <p>Los métodos <code>deferred.resolve</code> y <code>deferred.reject</code> permiten <strong>definir el estado interno</strong> del objeto <code>$.Deferred()</code>. Esta definición <strong>es permanente, es decir, no es posible modificarla después</strong> y es lo que permite manejar el comportamiento y ejecución de las funciones de devolución posteriores para cada uno de los casos.</p>
    <p>Notar que la función <code>isEven</code> devuelve el método <code>deferred.promise</code>. El mismo es una versión del objeto diferido, pero que sólo permite leer su estado o añadir nuevas funciones de devolución.</p>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>En los ejemplos que utilizaban Ajax mostrados anteriormente, los métodos <code>deferred.resolve</code> y <code>deferred.reject</code> son llamados de manera interna por jQuery dentro de la configuración <code>sucess</code> y <code>error</code> de la petición. Por eso mismos se decía que el objeto diferido estaba incorporado implicitamente dentro del objeto <code>$.ajax</code>.</p>
    </blockquote>
    <p>Los métodos <code>deferred.resolve</code> y <code>deferred.reject</code> además permiten devolver valores para ser utilizados por las funciones de devolución.</p>
    <p><strong>Función con <code>deferred.resolve</code> y <code>deferred.reject</code> devolviendo valores reutilizables</strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// función que calcula si un numero entero es par o impar</span>
    <span class="kw">var</span> isEven = <span class="kw">function</span>(number) {
        
        <span class="kw">var</span> dfd = <span class="ot">$</span>.<span class="fu">Deferred</span>();
        
        <span class="co">// resuelve o rechaza al objeto utilizando</span>
        <span class="co">// y devuelve un texto con el resultado</span>
        <span class="kw">if</span> (number%<span class="dv">2</span> == <span class="dv">0</span>){
            <span class="ot">dfd</span>.<span class="fu">resolve</span>(<span class="st">&#39;El número &#39;</span> + number + <span class="st">&#39; es par&#39;</span>);
        } <span class="kw">else</span> {
            <span class="ot">dfd</span>.<span class="fu">reject</span>(<span class="st">&#39;El número &#39;</span> + number + <span class="st">&#39; es impar&#39;</span>);
        }
        
        <span class="co">// devuelve al objeto diferido con su estado definido</span>
        <span class="kw">return</span> <span class="ot">dfd</span>.<span class="fu">promise</span>();
        
    }
    
    <span class="fu">isEven</span>(<span class="dv">2</span>).<span class="fu">then</span>(
    
        <span class="kw">function</span>(result){ 
            <span class="ot">console</span>.<span class="fu">log</span>(result); <span class="co">// Registra &#39;El número 2 es par&#39;</span>
        },
        
        <span class="kw">function</span>(result){ 
            <span class="ot">console</span>.<span class="fu">log</span>(result);
        }
        
    );</code></pre>
    <blockquote>
    <p><strong>Nota</strong></p>
    <p>Es posible determinar el estado de un objeto diferido a través del método <code>deferred.state</code>. El mismo devuelve un string con alguno de estos tres valores: <code>pending</code>, <code>resolved</code> o <code>rejected</code>. Para más detalles sobre <code>deferred.state</code>, puede consultar <a href="http://api.jquery.com/deferred.state/">http://api.jquery.com/deferred.state/</a>.</p>
    </blockquote>
    <div id="deferred.pipe" class="section level3">
    <h3><a href="#deferred.pipe"><span class="header-section-number">12.3.1</span> <code>deferred.pipe</code></a></h3>
    <p>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 <code>deferred.pipe</code>. Su funcionamiento es similar a <code>deferred.then</code>, con la diferencia que <code>deferred.pipe</code> devuelve un nuevo objeto diferido modificado a través de una función interna.</p>
    <p><strong>Función filtrando valores utilizando <code>deferred.pipe</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// función que calcula si un número entero es par o impar</span>
    <span class="kw">var</span> isEven = <span class="kw">function</span>(number) {
        
        <span class="kw">var</span> dfd = <span class="ot">$</span>.<span class="fu">Deferred</span>();
    
        <span class="kw">if</span> (number%<span class="dv">2</span> == <span class="dv">0</span>){
            <span class="ot">dfd</span>.<span class="fu">resolve</span>(number);
        } <span class="kw">else</span> {
            <span class="ot">dfd</span>.<span class="fu">reject</span>(number);
        }
        
        <span class="kw">return</span> <span class="ot">dfd</span>.<span class="fu">promise</span>();
        
    }
    
    <span class="co">// vector con una serie de números pares e impares</span>
    <span class="kw">var</span> numbers = [<span class="dv">0</span>, <span class="dv">2</span>, <span class="dv">9</span>, <span class="dv">10</span>, <span class="dv">5</span>, <span class="dv">8</span>, <span class="dv">12</span>];
    
    <span class="co">// a través de deferred.pipe se pregunta si número se encuentra</span>
    <span class="co">// dentro del vector numbers</span>
    <span class="fu">isEven</span>(<span class="dv">2</span>).<span class="fu">pipe</span>(
        
        <span class="kw">function</span>(number){
            
            <span class="co">// crea un nuevo objeto diferido</span>
            <span class="kw">var</span> dfd = <span class="ot">$</span>.<span class="fu">Deferred</span>();
            
            <span class="kw">if</span>(<span class="ot">$</span>.<span class="fu">inArray</span>(number, numbers) !== -<span class="dv">1</span>){ 
                <span class="ot">dfd</span>.<span class="fu">resolve</span>();
            } <span class="kw">else</span> {
                <span class="ot">dfd</span>.<span class="fu">reject</span>();
            }
            
            <span class="co">// devuelve un nuevo objeto diferido</span>
            <span class="kw">return</span> <span class="ot">dfd</span>.<span class="fu">promise</span>();
            
        }
        
    ).<span class="fu">then</span>(
    
        <span class="kw">function</span>(){
            <span class="co">// al estar dentro del vector numbers y ser par,</span>
            <span class="co">// se registra este mensaje</span>
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;El número es par y se encuentra dentro de numbers&#39;</span>);
        },
        
        <span class="kw">function</span>(){
            <span class="ot">console</span>.<span class="fu">log</span>(<span class="st">&#39;El número es impar o no se encuentra dentro de numbers&#39;</span>);
        }
        
    );</code></pre>
    <p>Para más detalles sobre <code>deferred.pipe</code>, puede consultar <a href="http://api.jquery.com/deferred.pipe/">http://api.jquery.com/deferred.pipe/</a>.</p>
    </div>
    <div id="when" class="section level3">
    <h3><a href="#when"><span class="header-section-number">12.3.2</span> <code>$.when</code></a></h3>
    <p>El método <code>$.when</code> permite ejecutar funciones de devolución, cuando uno o más objetos diferidos posean algun estado definido.</p>
    <p>Un caso común de utilización de <code>$.when</code> es cuando se quiere verificar que dos peticiones Ajax separadas se han realizado.</p>
    <p><strong>Utilización de <code>$.when</code></strong></p>
    <pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// primera petición ajax</span>
    <span class="kw">var</span> comments = <span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;/echo/json/&#39;</span>
    });
    
    <span class="co">// segunda petición ajax</span>
    <span class="kw">var</span> validation = <span class="ot">$</span>.<span class="fu">ajax</span>({
        <span class="dt">url </span>: <span class="st">&#39;/echo/json/&#39;</span>
    });
    
    <span class="co">// cuando las dos peticiones sean realizadas</span>
    <span class="co">// ejecuta alguna función de devolución definida</span>
    <span class="co">// dentro de deferred.then</span>
    <span class="ot">$</span>.<span class="fu">when</span>(comments, validation).<span class="fu">then</span>(
        <span class="kw">function</span>(){
            <span class="fu">alert</span>(<span class="st">&#39;Peticiones realizadas&#39;</span>);
        },
        <span class="kw">function</span>(){
            <span class="fu">alert</span>(<span class="st">&#39;Disculpe, existió un problema&#39;</span>);
        }
    );</code></pre>
    <p>Para más detalles sobre <code>$.when</code>, puede consultar <a href="http://api.jquery.com/jQuery.when/">http://api.jquery.com/jQuery.when/</a>.</p>
    <p>Copyright © 2011</p>
    <p>Material licenciado por Rebecca Murphey bajo la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 United States</a>. Usted es libre de copiarlo, distribuirlo, transmitirlo y modificarlo, siempre y cuando haga referencia a <a href="http://github.com/rmurphey/jqfundamentals">este repositorio</a> 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 <a href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 United States</a>.</p>
    </div>
    </div>
    </div>

    
    <p>
      <strong>Última actualización del libro:</strong> Junio 2013 (<a href="https://github.com/dzignus/librojquery/commits/master" rel="_blank">ver cambios</a>).
    </p>

  <script>

  (function (d) {

    function insertScript(src, id) {
      var st = d.createElement('script'), s;
      st.type = 'text/javascript';
      st.async = true;
      st.src = src;
      if (id) {
        st.id = id;
      }
      s = d.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(st, s);
    }

    // GA
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-16816025-3']);
    _gaq.push(['_trackPageview']);
    insertScript(('https:' == d.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');

    window.onload = function () {
      // Twitter
      insertScript('http://platform.twitter.com/widgets.js');

      // G+
      window.___gcfg = {lang: 'es'};
      insertScript('https://apis.google.com/js/plusone.js');

      // FB
      if (d.getElementById('facebook-jssdk')) {
        return;
      } else {
        insertScript('//connect.facebook.net/es_ES/all.js#xfbml=1', 'facebook-jssdk');
      }
    };

  }(document));

  </script>

</body>

</html>