Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Lorem ipsum dolor sit amet consectetur adipiscing, elit felis nascetur per suspendisse, quis convallis placerat arcu consequat. At felis cubilia massa ullamcorper habitant suscipit dui nec viverra mi bibendum ridiculus, congue velit sodales nascetur metus cum libero mus nulla dictum nullam lectus, curae ligula himenaeos morbi aptent vulputate rutrum tristique eros sagittis sapien. Elementum placerat faucibus vel eget proin potenti iaculis gravida molestie euismod nam aliquam tempor montes, liber
Tipo: Resúmenes
1 / 112
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Bajo licencia Creative Commons
jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web debería de conocer. El propósito de este libro es proveer un resumen de la biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje. El libro fue diseñado para ser utilizado como material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.
La modalidad de trabajo es la siguiente: En primer lugar se dedicará tiempo a comprender un concepto para luego realizar un ejercicio relacionado. Algunos de los ejercicios pueden llegar a ser triviales, mientras que otros no tanto. El objetivo es aprender a resolver de manera fácil lo que normalmente se resolvería con jQuery. Las soluciones a todos los ejercicios están incluidas en el mismo material de aprendizaje.
El material de aprendizaje y el código fuente de los ejemplos que se utilizan en el libro están hospedados en un repositorio de Github. Desde allí es posible descargar un archivo .zip o .tar con el código para utilizar en un servidor web.
Si usted suele utilizar Git, es bienvenido de clonar o modificar el repositorio.
Para trabajar con los contenidos del libro, necesitará las siguientes herramientas:
Navegador web Firefox
La extensión Firebug, para Firefox
Un editor de textos planos (como Notepad++ para Windows, gedit/Kate para Linux o TextMate para Mac OS X)
Para las secciones dedicadas a Ajax: Un servidor local (como WAMP o MAMP) o un cliente FTP/SSH (como FileZilla) para acceder a un servidor remoto.
1.3. Añadir JavaScript a una Página
Existen dos formas de insertar código JavaScript dentro de una página: escribiendo código en la misma (en ingles inline) o a través de un archivo externo utilizando la etiqueta script. El orden en el cual se incluye el código es importante: un código que depende de otro debe ser incluido después del que referencia (Ejemplo: Si la función B depende de A, el orden debe ser A,B y no B,A).
Para mejorar el rendimiento de la página, el código JavaScript debe ser incluido al final del HTML. Además, cuando se trabaja en un ambiente de producción con múltiples archivos JavaScript, éstos deben ser combinados en un solo archivo.
Ejemplo de código JavaScript en línea
Ejemplo de inclusión de un archivo externo JavaScript
1.4. Depuración del Código JavaScript
La utilización de una herramienta de depuración es esencial para trabajar con JavaScript. Firefox provee un depurador a través de la extensión Firebug; mientras que Safari y Chrome ya traen uno integrado.
Cada depurador ofrece:
Un editor multi-linea para experimentar con JavaScript;
Un inspector para revisar el código generado en la página;
Un visualizador de red o recursos, para examinar las peticiones que se realizan.
Cuando usted este escribiendo código JavaScript, podrá utilizar alguno de los siguientes métodos para enviar mensajes a la consola del depurador:
console.log() para enviar y registrar mensajes generales;
console.dir() para registrar un objeto y visualizar sus propiedades;
console.warn() para registrar mensajes de alerta;
console.error() para registrar mensajes de error;
Existen otros métodos para utilizar desde la consola, pero estos pueden variar según el navegador. La consola además provee la posibilidad de establecer puntos de interrupción y observar expresiones en el código con el fin de facilitar su depuración.
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.
1.8. Material de Referencia
Existe una gran cantidad de artículos que se ocupan de algún aspecto de jQuery. Algunos son excelentes pero otros, francamente, son erróneos. Cuando lea un artículo sobre jQuery, este seguro que se está abarcando la misma versión de la biblioteca que está utilizando, y resístase a la tentación de copiar y pegar el código — tómese un tiempo para poder entenderlo.
A continuación se listan una serie de excelentes recursos para utilizar durante el aprendizaje. El más importante de todos es el código fuente de jQuery, el cual contiene (en su formato sin comprimir) una completa documentación a través de comentarios. La biblioteca no es una caja negra — el en- tendimiento 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.
El código fuente de jQuery
Documentación de jQuery
Foro de jQuery
Favoritos en Delicious
Canal IRC #jquery en Freenode
jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo.
El capítulo está orientado a personas sin experiencia en el lenguaje, abarcando conceptos básicos y problemas frecuentes que pueden presentarse al trabajar con el mismo. Por otro lado, la sección puede ser beneficiosa para quienes utilicen otros lenguajes de programación para entender las peculiaridades de JavaScript.
Si usted esta interesado en aprender el lenguaje más en profundidad, puede leer el libro JavaScript: The Good Parts escrito por Douglas Crockford.
Comprensión de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis básicas de JavaScript.
Declaración simple de variable
var foo = 'hello world';
Los espacios en blanco no tienen valor fuera de las comillas
var foo = 'hello world';
Los paréntesis indican prioridad
2 * 3 + 5; // es igual a 11; la multiplicación ocurre primero 2 * (3 + 5); // es igual a 16; por lo paréntesis, la suma ocurre primero
La tabulación mejora la lectura del código, pero no posee ningún significado especial
var foo = function() { console.log('hello'); };
Los operadores lógicos permiten evaluar una serie de operandos utilizando operaciones AND y OR.
Operadores lógicos AND y OR
var foo = 1; var bar = 0; var baz = 2;
foo || bar; // devuelve 1, el cual es verdadero (true) bar || foo; // devuelve 1, el cual es verdadero (true)
foo && bar; // devuelve 0, el cual es falso (false) foo && baz; // devuelve 2, el cual es verdadero (true) baz && foo; // devuelve 1, el cual es verdadero (true)
El operador || (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 ( false ). El operador && (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 ( true ), sino devuelve falso.
Puede consultar la sección Elementos Verdaderos y Falsos para más detalles sobre que valores se evalúan como true y cuales se evalúan como false.
Nota Puede que a veces note que algunos desarrolladores utilizan esta lógica en flujos de control en lugar de utilizar la declaración if. Por ejemplo:
// realizar algo con foo si foo es verdadero foo && doSomething(foo);
// establecer bar igual a baz si baz es verdadero; // caso contrario, establecer a bar igual al // valor de createBar() var bar = baz || createBar();
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.
Los operadores de comparación permiten comprobar si determinados valores son equivalentes o idén- ticos.
Operadores de Comparación
var foo = 1; var bar = 0; var baz = '1';
var bim = 2;
foo == bar; // devuelve falso (false) foo != bar; // devuelve verdadero (true) foo == baz; // devuelve verdadero (true); tenga cuidado
foo === baz; // devuelve falso (false) foo !== baz; // devuelve verdadero (true) foo === parseInt(baz); // devuelve verdadero (true)
foo > bim; // devuelve falso (false) bim > baz; // devuelve verdadero (true) foo <= baz; // devuelve verdadero (true)
2.4. Código Condicional
A veces se desea ejecutar un bloque de código bajo ciertas condiciones. Las estructuras de control de flujo — a través de la utilización de las declaraciones if y else permiten hacerlo.
Control del flujo
var foo = true; var bar = false;
if (bar) { // este código nunca se ejecutará console.log('hello!'); }
if (bar) { // este código no se ejecutará } else { if (foo) { // este código se ejecutará } else { // este código se ejecutará si foo y bar son falsos (false) } }
Nota En una línea singular, cuando se escribe una declaración if, 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.
Debe tener en cuenta de no definir funciones con el mismo nombre múltiples veces dentro de declara- ciones if/else, ya que puede obtener resultados no esperados.
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.
default: alert('de forma predeterminada se ejecutará este código'); break;
}
Las declaraciones switch 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:
var stuffToDo = { 'bar' : function() { alert('el valor es bar'); },
'baz' : function() { alert('el valor es baz'); },
'default' : function() { alert('de forma predeterminada se ejecutará este código'); } };
if (stuffToDo[foo]) { stuffToDofoo; } else { stuffToDo'default'; }
Más adelante se abarcará el concepto de objetos.
2.5. Bucles
Los bucles (en inglés loops ) permiten ejecutar un bloque de código un determinado número de veces.
Bucles
// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4' for (var i=0; i<5; i++) { console.log('intento ' + i); }
Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha variable quede dentro del “alcance” (en inglés scope ) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.
Un bucle utilizando for se compone de cuatro estados y posee la siguiente estructura:
for ([expresiónInicial]; [condición]; [incrementoDeLaExpresión]) [cuerpo]
El estado expresiónInicial es ejecutado una sola vez, antes que el bucle comience. éste otorga la oportunidad de preparar o declarar variables.
El estado condición 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.
El estado incrementoDeLaExpresión 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.
El cuerpo es el código a ejecutar en cada repetición del bucle.
Un típico bucle utilizando for
for (var i = 0, limit = 100; i < limit; i++) { // Este bloque de código será ejecutado 100 veces console.log('Currently at ' + i); // Nota: el último registro que se mostrará // en la consola será "Actualmente en 99" }
Un bucle utilizando while es similar a una declaración condicional if, excepto que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea falsa.
while ([condición]) [cuerpo]
Un típico bucle utilizando while
var i = 0; while (i < 100) {
// Este bloque de código se ejecutará 100 veces console.log('Actualmente en ' + i); i++; // incrementa la variable i
}
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:
Bucle utilizando while con la combinación de la condición y la incrementación
for (var i = 0; i < 10; i++) {
if (something) { continue; }
// La siguiente declaración será ejecutada // si la condición 'something' no se cumple console.log('Hello');
}
2.6. Palabras Reservadas
JavaScript posee un número de “palabras reservadas”, o palabras que son especiales dentro del mismo lenguaje. Debe utilizar estas palabras cuando las necesite para su uso específico.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
try
typeof
var
