Apuntes de Javascript INivel Intermedio

JuanMa GarridoEste libro est a la venta en http://leanpub.com/apuntes-javascript-intermedio

Esta versin se public en 2015-01-28

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishingprocess. Lean Publishing is the act of publishing an in-progress ebook using lightweight toolsand many iterations to get reader feedback, pivot until you have the right book and buildtraction once you do.

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0Unported License

A mi madreSi tu tonto no eres, lo que pasa es que te tiene que gustar (mi madre)

ndice general

1. Prologo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.1 Referencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Agradecimientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2. Ideas Claras de Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23. Breve historia de Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34. ECMAScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4.1 EcmaScript 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54.2 EcmaScript 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74.3 EcmaScript 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

5. Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96. Primitivas y Tipos de Datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117. Operadores (Aritmticos, Lgicos y de Comparacin) . . . . . . . . . . . . . . . . . 13

7.1 Operadores Aritmticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137.2 Operadores Lgicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157.3 Operadores de Comparacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

8. Conversiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189. Condiciones (Bifurcaciones Condicionales) . . . . . . . . . . . . . . . . . . . . . . . 20

9.1 Condicional if - else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209.2 Condicional switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

10.Bucles (Loops) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2310.1 El bucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2310.2 El bucle do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2310.3 El bucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2410.4 El bucle for-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

11.Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2611.1 Parametros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2611.2 Funciones pre-definidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2711.3 mbito (Scope) de las Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 3011.4 Funciones Callback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

NDICE GENERAL

11.5 Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3112.Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3413.Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

13.1 Funciones Constructoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3813.2 Trabajando con Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

14.Objetos Globales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4214.1 Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4214.2 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4214.3 Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4714.4 Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4914.5 Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5014.6 String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5114.7 Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5314.8 Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

15.El entorno del Navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5515.1 Deteccion de Funcionalidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

16.BOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5716.1 Propiedades de window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5716.2 Mtodos de window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5916.3 El objeto document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

17.DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6117.1 Accediendo a los nodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6217.2 Modificando los nodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6517.3 Creando y Eliminando nodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6617.4 Objetos DOM slo de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6717.5 Seleccin Avanzada de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . 68

18.Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7218.1 Capturando eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7218.2 Deteniendo el flujo de los eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 7418.3 Delegacin de eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7418.4 Eventos con jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

19.JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7720.AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

20.1 Haciendo la peticin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8020.2 Procesando la respuesta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8120.3 AJAX con jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

21.Expresiones Regulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8421.1 Propiedades de los Objetos RegExp . . . . . . . . . . . . . . . . . . . . . . . . . 8421.2 Mtodos de los Objetos RegExp . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

NDICE GENERAL

21.3 Mtodos de String que aceptan Expresiones Regulares . . . . . . . . . . . . . . . 8521.4 Sintaxis de las Expresiones Regulares . . . . . . . . . . . . . . . . . . . . . . . . 87

1. PrologoEste libro contiene la primera parte de los materiales que he ido realizando para diferentestrainings JAVASCRIPT impartidos desde 2010.Esta primera parte abarca desde lo ms basico hasta un nivel intermedio que incluye:

Las bases de javascript como lenguaje de programacion (variables, operadores, condicio-nales, bucles, tipos datos, etc)

Conceptos importantes asociados al lenguaje y como manejarlos (JSON, AJAX, eventos,dom, bom)

Algunos conceptos un poco mas avanzados pero fundamentales para entener el javascriptactual (closures, expresiones regulares, objetos)

Los conceptos cubiertos en este libro te permitiran trabajar y comprender el javascript del 90%de los proyectosEspero que este libro te ayude a entender/implementar el codigo javascript que necesites.Cualquier feedback ser bien recibido :)

1.1 ReferenciasAdemas de los enlaces reflejados, este material est basado en los siguientes libros:

JavaScript: The Good Parts by Douglas Crockford Object-Oriented JavaScript by Stoyan Stefanov JavaScript Patterns by Stoyan Stefanov

1.2 AgradecimientosGracias a @gemmabeltra por la super-portada del libro (y por aguantarme en general)A @amischol por elevar mi nivel de javascript y el de todos los que hemos trabajado a su lado(cuando nosotros vamos, l ya tiene su chalet alli montado)A @cvillu por animarme a escribir el libro y descubrirme LeanPub (South-Power!!!)A @crossrecursion por nuestras charlas/reuniones hablando de Javascript (me excitas intelec-tualmente)Y a @softonic por darme la oportunidad de impartir los trainings JS y rodearme de tanta gentecrack en JavaScript. No hay universidad que me pueda ensear lo que he podido aprender alli.

1

2. Ideas Claras de JavascriptJavaScript es un lenguaje de programacin interpretado por lo que no es necesario compilar losprogramas para ejecutarlosSegn una separacion en 3 capas de la pagina web, con el Javascript controlariamos la capa delcomportamiento:

Contenido HTML Presentacion CSS Comportamiento Javascript

Javascript est basado en ECMAScript (o Ecma-262) que es una especificacin de lenguaje deprogramacion (otro lenguaje famoso basado en este standard es ActionScript).Las diferentes revisiones del Ecma-262 y su implementacion en los navegadores han idomarcando los desarrollos en JavascriptCon la llegada de AJAX (que no es ms que el uso de un objeto javascript con el que podemosinteractuar con el servidor sin tener que forzar una recarga de pgina) se abri una nueva era enla historia del lenguajeEl uso tradicional de Javascript ha sido en el browser, pero ya se ha extendido su uso tambien enel lado del servidor (Node.js), en aplicaciones desktop y en aplicaciones mobileHay diferencias entre los navegadores debido al uso de diferentes motores de Javascript. Algunosde ellos son:

Chrome V8 Firefox 4 JagerMonkey Opera 10 Carakan Safari Nitro Internet Explorer 9 Chakra

Aunque la diferencia grande siempre ha estado entre Internet Explorer y el resto (hastaIE9)

Estos interpretes (motores) de JS que hay en cada navegador, realizan optimizaciones de cdigocada uno a su manera de ah el diferente rendimiento entre navegadoresUn Framework (o libreria) es una coleccion de utilidades comunmente utilizadas que pueden serutilizadas para desarrollar aplicaciones ahorrando tiempo y esfuerzo. El frameworkmas conocidoy utilizado es jQuery.

2

3. Breve historia de Javascript

JS History 1

Javascript fue creado en 10 dias en Mayo de 1995 por Brendan Eich, bajo el nombre de MochaLa primera version del Javascript aparece en el navegador Netscape 2.0En diciembre de 1995 SUN Microsystems y Netscape deciden darle el nombre JavaScript (antesse llam Mocha y LiveScript) por una cuestion de puro marketing (Java era el lenguaje mspopular por aquellos dias).En 1996 Internet Explorer 3.0 incluye una version propia de lo que seria el standard ECMAScriptque llama JScriptEn 1997 se propuso este lenguaje como standard y la European Computer ManufacturersAssociation (ECMA) lo adopta como tal. De ah que tambien se le llame ECMAScriptEn Junio de 1997 se publica la primera edicin del ECMA-262En 1998 y a raiz de las diferencias surgidas entre navegadores, la W3C (World Wide WebConsortium) dise el standard DOM que es un interfaz (API) para acceder y modificar elcontenido estructurado del documento.En 1999, se sientan las bases del Javascript moderno con el lanzamiento de la tercera edicin delECMA-262, tambien llamado EcmaScript 3

3

Breve historia de Javascript 4

JS History 2

En 2005, se acua el termino AJAX y revoluciona el mundo del desarrollo web con la llegada desitios web asncronos (Gmail, Google Maps)En 2005 sale la primera versin de jQuery. Las diferencias entre navegadores han marcado losdesarrollos en Javascript hasta el dia de hoy, y han hecho habitual el uso de frameworks (comojQuery) que nos ayuden a lidiar con estas diferencias.En 2009 se completa y libera la quinta edicin del ECMA-262, ms conocida como ECMAScript5. La edicion 5.1 se libera en 2011En diciembre de 2014 se aprueba la 6 edicion del ECMA-262 o ECMAScript 6. Se espera ellanzamiento oficial para Junio de 2015

4. ECMAScript4.1 EcmaScript 5ECMAScript5.1 fue lanzado en 2011 y podemos decir que es el actual standard de Javascript(2014).Si miramos las estadisticas de uso de navegadores junto con la compatibilidad de estos con ES5podemos concluir que: basandonos en ES5 nuestro codigo funcionar bien en la mayoria de losnavegadores utilizados actualmente (2014).Si queremos, podemos dar soporte de algunas features de ES5 en navegadores antiguos que nola soporten, utilizando el correspondiente shimEsta version amplia los anteriores standards con algunas mejoras:

strict modeMuy recomendado utilizarlo desde ya

1 function() {2 "use strict";3 }

Object new methods1 // Creates an object with parent as prototype and properties from donor2 Object.create(parent, donor);34 // Meta properties of an object5 var descriptor = {6 value: "test",7 writable: true, // Can the value be changed?8 enumerable: true, // Will it appear in for-in and Object.keys(object)?9 configurable: true, // Can the property be removed?10 set: function(value) { test = value}, // Getter11 get: function() { return test } // Setter12 }1314 // Methods for manipulation the descriptors15 Object.defineProperty(object, property, descriptor)16 Object.defineProperties(object, descriptors)

5

ECMAScript 6

17 Object.getOwnPropertyDescriptor(object, property)18 Object.getPrototypeOf(object)1920 // Returns an array of enumerable properties21 Object.keys(object)22 // Returns an array of all properties23 Object.getOwnPropertyNames(object)2425 // Prevents anyone from adding properties to the object, cannot be undone.26 Object.preventExtensions(object)27 Object.isExtensible(object)2829 // Prevents anyone from changing, properties or descriptors of the object.30 // The values can still be changed31 Object.seal(object)32 Objcect.isSealed(object)3334 // Prevents any changes to the object.35 Object.freeze(object)36 Object.isFrozen(object)

Function.prototype.bind()http://www.smashingmagazine.com/2014/01/23/understanding-javascript-function-prototype-bind/

1 var tapir = {2 method: function(name){3 this.name = name;4 }5 };6 setTimeout( tapir.method.bind(tapir, "Malayan"), 100 );

String.prototype.trim()1 >>> var orig = ' foo ';2 >>> console.log(orig.trim());3 'foo'

Array new methods

ECMAScript 7

1 // Do all elements satisfy predicate?2 Array.prototype.every(predicate)34 // Return a new array with the elements that satisfy predicate?5 Array.prototype.filter(predicate)67 // Call action(element) for each element.8 Array.prototype.forEach(action)910 // What is the index of the first element that equals value?11 Array.prototype.indexOf(value, fromIndex)1213 // What is the index of the last element that equal value?14 Array.prototype.lastIndexOf(value, fromIndex)1516 // Create a new array by applying unaryFunc to each element17 Array.prototype.map(unaryFunc)1819 // Reduces the elements of the array, by applying binaryFunc20 // between the elements21 // [a0, a1].reduce(+ , seed) == seed + a0 + a122 Array.prototype.reduce(binaryFunc, seed)2324 // Is at least one element satisfied by the predicate?25 Array.prototype.some(predicate)

Native JSON supportWith JSON.parse() and JSON.stringify()

4.2 EcmaScript 3ECMAScript 3 fue lanzado en 2001 y todos los navegadores (antiguos y modernos) siguen estestandard.Aade (respecto del standard anterior): do-while, expresiones regulares, nuevos metodos destring (concat, match, replace, slice , split con expresiones regulares, etc.), manejo deexcepciones y ms.

4.3 EcmaScript 6ECMAScript 6 ser el proximo standard de Javascript pero aun no est lo suficientementeimplantado en los navegadores mas utilizados.

ECMAScript 8

..

Learn ES6 | A detailed overview of ECMAScript 6 features ECMAScript 6 Learning! (Eric Douglas Github) ES6 Rocks | A collaborative website about the ECMAScript sixth edition, a.k.a. ES6. Use ECMAScript 6 Today (tutsplus.com)

Aunque podemos dar soporte de estas features de ES6 en navegadores que no las soportenutilizando el correspondiente shim

5. VariablesLas Variables se utilizan para almacenar datosLas variables solo tienen visibilidad (ambito) dentro de las funciones donde se declaranAntes de poder utilizar una variable hay que:

Declarar la variable (con la sentencia var) Inicializar la variable (en el momento de la declaracin o despues)

1 var a = 1;2 var b;3 b = 2;

Las variables son Case Sensitive

1 var case_matters = 'lower';2 var CASE_MATTERS = 'upper';3 case_matters4 CASE_MATTERS

Cmo chequear la existencia de una variable?

Forma Mala

1 >>> var result = '';2 >>> if (somevar){result = 'yes';}3 somevar is not defined4 >>> result;5 ""

Genera unwarning y que somevar devuelva false no quiere decir que no est definida

Forma Correcta

9

Variables 10

1 >>> var somevar;2 >>> if (typeof somevar !== "undefined"){result = 'yes';}3 >>> result;4 ""

1 >>> somevar = 123;2 >>> if (typeof somevar !== "undefined"){result = 'yes';}3 >>> result;4 "yes"

Si la variable est definida y tiene algn valor, su tipo de datos siempre ser distinto deundefined

6. Primitivas y Tipos de DatosCualquier valor que se utilize en JS es de un cierto tipo. En Javascript existen los siguientes tiposde datos primitivos:

Number: Puede contener numeros enteros (integer), decimales (float), hexadecimales,octales, exponentes y los nmeros especiales NaN y Infinity

String: Cualquier numero de caracteres entre comillas Boolean: puede ser true or false Undefined: Es un tipo de datos con un solo valor: undefinedLo devuelve JS cuando no existe una variable o no est inicializada.

Null: Otro tipo de datos con un solo valor: nullLo podemos asignar nosotros para inicializar a vacio.

Cualquier valor que no pertenezca a uno de estos 5 tipo de primitivas es un objetoAsi que los tipos de datos en javascript pueden ser:

Primitivas (Los 5 tipos) No primitivas (Objetos)

Aunque existe el operador typeof que devuelve el tipo de dato, esmejor utilizar Object.prototype.toString

1 >>> typeof([1,2,3])2 "object"3 >>> Object.prototype.toString.call([1,2,3])4 "[object Array]"5 >>> typeof(function(){})6 "function"7 >>> Object.prototype.toString.call(function(){})8 "[object Function]"9 >>> typeof(new Date())10 "object"11 >>> Object.prototype.toString.call(new Date())12 "[object Date]"13 >>> typeof(27)14 "number"15 >>> Object.prototype.toString.call(27)16 "[object Number]"

Existe el valor especial NaN (Not a Number) que obtenemos cuando intentamos hacer unaoperacin que asume numeros pero la operacin falla.

11

Primitivas y Tipos de Datos 12

1 >>> var a = 10 * f;2 >>> a3 NaN

7. Operadores (Aritmticos, Lgicosy de Comparacin)

Los Operadores toman uno o dos valores (o variables), realizan una operacin, y devuelven unvalorEl operador simple de asignacin es =

1 var a = 1;

7.1 Operadores AritmticosLos operadores aritmticos bsicos son:

+ Suma

1 >>> 1 + 2;2 3

- Resta

1 >>> 99.99 - 11;2 88.99

*Multiplicacin

1 >>> 2 * 3;2 6

/ Divisin

1 >>> 6 / 4;2 1.5

%Modulo

El resto de la divisin

13

Operadores (Aritmticos, Lgicos y de Comparacin) 14

1 >>> 6 % 3;2 03 >>> 5 % 3;4 2

Podemos utilizar el operador modulo, por ejemplo, para comprobar si un numero es par (% = 0)o impar (% = 1) .

1 >>> 4 % 2;2 03 >>> 5 % 2;4 1

++ Incremento en 1

Post-incremento devuelve el valor original (return) y despues incrementa el valor en 1.

1 >>> var a = 123; var b = a++;2 >>> b;3 1234 >>> a;5 124

Pre-incremento incrementa el valor en 1 y despues devuelve (return) el nuevo valor (yaincrementado).

1 >>> var a = 123; var b = ++a;2 >>> b;3 1244 >>> a;5 124

-- Decremento en 1

Post-decremento devuelve el valor original (return) y despues resta el valor en 1.

1 >>> var a = 123; var b = a--;2 >>> b;3 1234 >>> a;5 122

Pre-incremento resta el valor en 1 y despues devuelve (return) el nuevo valor (ya restado).

Operadores (Aritmticos, Lgicos y de Comparacin) 15

1 >>> var a = 123; var b = --a;2 >>> b;3 1224 >>> a;5 122

Tambien hay operadores compuestos

1 >>> var a = 5;2 >>> a += 3;3 8

7.2 Operadores LgicosLos Operadores Lgicos son:

! logical NOT (negation) && logical AND || logical OR

1 >>> var b = !true;2 >>> b;3 false

La doble negacin nos devuelve el valor original

1 >>> var b = !!true;2 >>> b;3 true

Las posibles operaciones y sus resultados son:Operation Resulttrue && true true

true && false falsefalse && true falsefalse && false falsetrue || true truetrue || false truefalse || true truefalse || false false

Operadores (Aritmticos, Lgicos y de Comparacin) 16

7.3 Operadores de ComparacinLos Operadores de Comparacin son:

== Igualdad

Devuelve true cuando los dos operandos son iguales. Los operandos son convertidos al mismotipo de datos antes de la comparacion

1 >>> 1 == 1;2 true3 >>> 1 == 2;4 false5 >>> 1 == '1';6 true

=== Igualdad y Tipo

Devuelve true cuando los dos operandos son iguales Y cuando son del mismo tipo de datos.Suele ser mejor y ms seguro, utilizar esta comparacin de igualdad (no hay transformacionesde tipo no controladas)

1 >>> 1 === '1';2 false3 >>> 1 === 1;4 true

!= No Igualdad

Devuelve true cuando los dos operandos NO son iguales (despues de una conversion de tipo)

1 >>> 1 != 1;2 false3 >>> 1 != '1';4 false5 >>> 1 != 2;6 true

!== No Igualdad Sin conversion de tipo

Devuelve true cuando los dos operandos NO son iguales o cuando son de tipos diferentes

Operadores (Aritmticos, Lgicos y de Comparacin) 17

1 >>> 1 !== 1;2 false3 >>> 1 !== '1';4 true

>Mayor que

Devuelve true si el operando de la izquierda es mayor que el de la derecha

1 >>> 1 > 1;2 false3 >>> 33 > 22;4 true

>=Mayor o Igual que

Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha

1 >>> 1 >= 1;2 true

>> 1 < 1;2 false3 >>> 1 < 2;4 true

>> 1 >> 1

8. ConversionesSi utilizamos un numero entre comillas (string) en una operacin aritmtica Javascript loconvierte en numero

1 >>> var s = "100"; typeof s;2 "string"3 >>> s = s * 1;4 1005 >>> typeof s;6 "number"

OJO! undefined y null devuelven cosas diferentes al convertirlas a numero

1 >>> 1*undefined2 NaN3 >>> 1*null4 0

Si utilizamos true or false entre comillas Javascript lo convierte en string

1 >>> var b = "true"; typeof b;2 "string"

La doble negacin !! es una forma sencilla de convertir cualquier valor en su Booleanocorrespondiente.

1 >>> !!02 false3 >>> !!14 true5 >>> !!""6 false7 >>> !!"hola"8 true9 >>> !!undefined10 false11 >>> !!null12 false

Aplicandolo podemos comprobar como cualquier valor covertido a Booleano es true excepto:

18

Conversiones 19

"" null undefined 0 NaN false

9. Condiciones (BifurcacionesCondicionales)

Una condicin es una estructura que realiza una tarea u otra dependiendo del resultado de evaluaruna condicin. Aqu vamos a ver:

La estructura IF ELSE La estructura SWITCH

Un Bloque (de cdigo) es el conjunto de expresiones que quedan encerradas entre llaves. Estosbloques se pueden anidar.1 {2 var a = 1;3 var b = 3;4 var c, d;5 {6 c = a + b;7 {8 d = a - b;9 }10 }

9.1 Condicional if - else1 var result = '';2 if (a > 2) {3 result = 'a is greater than 2';4 }

Las partes de una condicin if La sentencia if Una condicin entre parntesis. Esta condicin siempre devolver un booleano. Estacondicin puede contener:

Una operacin lgica: !, && o || Una comparacin como ===, !=, > y dems Cualquier valor o variable que pueda ser convertido a Booleano Una combinacin de estas

El bloque de cdigo a ejecutar si se cumple la condicinEn el if tambien puede haber una parte else opcional seguido de un bloque de cdigo que seejecutar si la condicin se evalua a false

20

Condiciones (Bifurcaciones Condicionales) 21

1 if (a > 2) {2 result = 'a is greater than 2';3 } else {4 result = 'a is NOT greater than 2';5 }

Entre el if y el else, pueden haber ilimitado numero de condiciones else if

1 if (a > 2 || a < -2) {2 result = 'a is not between -2 and 2';3 } else if (a === 0 && b === 0) {4 result = 'both a and b are zeros';5 } else if (a === b) {6 result = 'a and b are equal';7 } else {8 result = 'I give up';9 }

Existe tambin lo que se llama el operador ternario ? que nos permite abreviar algunas sentenciasif simples

1 var result = (a === 1) ? "a is one" : "a is not one";

9.2 Condicional switch1 var a = '1';2 var result = '';3 switch (a) {4 case 1:5 result = 'Number 1';6 break;7 case '1':8 result = 'String 1';9 break;10 default:11 result = 'I don\'t know';12 break;13 }14 result;

Las partes de un switch

La sentencia switch

Condiciones (Bifurcaciones Condicionales) 22

Una expresin entre parntesis.Esta expresin normalmente ser una variable, pero puede ser cualquier expresin quedevuelva un valor

Cierto numero de bloques case entre corchetes Cada sentencia case va seguida de una expresin.El resultado de esta expresin se compara con la expresin que hay despus del switch.Si la comparacin de igualdad devuelve true, se ejecuta el bloque que hay tras este case

Puede (y debe) haber una sentencia break al final de cada bloque case.Estos break provocan la salida del switch (de esta manera nos aseguramos de ejecutar unsolo bloque case)

Tambien puede (y debe) haber una sentencia default que es seguida de un bloque decdigo que se ejecuta si ninguno de los case es evaluado a true

10. Bucles (Loops)Un bucle es una estructura que nos permite repetir un bloque de cdigo muchas veces.El nmero de repeticiones depender del resultado de evaluar una condicin, antes (o despus)de cada iteracinEn Javascript hay 4 tipos de bucles:

while loops do-while loops for loops for-in loops

10.1 El bucle while1 var i = 0;2 while (i < 10) {3 i++;4 }

Bucle While JS

La sentencia while va seguida de una condicin entre parntesis y un bloque de cdigo entrecorchetes. Mientras la condicin se evalue a true, el cdigo se ejecutar una y otra vez.El nmero de repeticiones depender del resultado de evaluar una condicin, antes (o despus)de cada iteracin

10.2 El bucle do-while

23

Bucles (Loops) 24

1 var i = 0;2 do {3 i++;4 } while (i < 10)

El bucle do-while es una pequea variacin del bucle whileLa sentencia do va seguida de un bloque de cdigo y una condicin (con while) despus delbloque.Esto implica que el bloque de cdigo se va a ejecutar siempre, al menos una vez, antes de evaluarla condicin.

10.3 El bucle for1 var punishment = '';2 for (var i = 0; i < 100; i++) {3 punishment += 'I will never do this again, ';4 }

Bucle For JS

La estrucura del bucle for tiene 3 partes claramente diferenciadas (separadas por

Inicializacin (var i=0): Cdigo que es ejecutado antes de entrar en el bucle [O] Evaluacin (i

Bucles (Loops) 25

1 var res = '\n';2 for(var i = 0; i < 10; i++) {3 for(var j = 0; j < 10; j++) {4 res += '* ';5 }6 res+= '\n';7 }

10.4 El bucle for-in1 var a = ['a', 'b', 'c', 'x', 'y', 'z'];2 var result = '\n';3 for (var i in a) {4 result += 'index: ' + i + ', value: ' + a[i] + '\n';5 }

El bucle for-in es utilizado para recorrer los elementos de un array (o de un objeto)Aunque basandonos en ES5 tambien podriamos utilizar Object.keys y forEach y hacer

1 var obj = { first: "John", last: "Doe" };23 // Visit non-inherited enumerable keys4 Object.keys(obj).forEach(function(key) {5 console.log(key);6 });

11. Funciones1 function sum(a, b) {2 var c = a + b;3 return c;4 }

Las funciones nos permiten agrupar varias lneas de cdigo bajo un nombre. De esta formapodemos reutilizar este cdigo, invocando el nombre de la funcin.Las partes de una funcin:

La sentencia function El nombre de la funcin (sum) Parmetros (argumentos) que espera la funcin (a y b) Una funcin puede aceptar cero oms argumentos separados por comas

Un bloque de cdigo, tambin llamado el cuerpo de la funcion La sentencia returnUna funcin siempre devuelve un valor.Si no devuelve explcitamente un valor, implcitamente devuelve el valor undefined

Una funcin solo puede devolver un valor.Si se necesita devolver mas de un valor, se puede devolver un array o un objeto con esos valoresPara llamar a una funcin tan solo tenemos que usar su nombre seguido de algunos parmetros(o ninguno) entre parntesis

1 >>> var result = sum(1, 2);2 >>> result;3 3

11.1 ParametrosUna funcin puede no requerir parmetros, pero si los requiere y no se les pasa a la funcin,Javascript les asignar el valor undefinedSi la funcin recibe mas parmetros de los esperados, simplemente los ignorarDentro de cada funcin tenemos disponible el objeto (pseudo-array) arguments que contiene losargumentos pasados a la funcin

26

Funciones 27

1 function sumOnSteroids() {2 var i, res = 0;3 var number_of_params = arguments.length;4 for (i = 0; i < number_of_params; i++) {5 res += arguments[i];6 }7 return res;8 }

11.2 Funciones pre-definidasHay una serie de funciones que estn directamente definidas dentro del motor de Javascript.Estas funciones pre-definidas son:

parseInt() parseFloat() isNaN() isFinite() encodeURI() decodeURI() encodeURIComponent() decodeURIComponent() eval()

parseInt()parseInt() toma un valor e intenta transformarlo en nmero entero. Si falla devuelve NaN.parseInt() admite un segundo parmetro opcional que indica la base del numero que se le estpasando (decimal, hexadecimal, binario, etc)

1 >>> parseInt('123')2 1233 >>> parseInt('abc123')4 NaN5 >>> parseInt('1abc23')6 17 >>> parseInt('123abc')8 123

Se recomienda especificar siempre la base (10 normalmente) para evitar problemas de interpre-taciones

Funciones 28

1 >>> parseInt(" 0xF", 16);2 153 >>> parseInt(" F", 16);4 155 >>> parseInt("17", 8);6 157 >>> parseInt(021, 8);8 159 >>> parseInt("015", 10);10 1511 >>> parseInt(15.99, 10);12 1513 >>> parseInt("FXX123", 16);14 1515 >>> parseInt("1111", 2);16 1517 >>> parseInt("15*3", 10);18 1519 >>> parseInt("15e2", 10);20 1521 >>> parseInt("15px", 10);22 1523 >>> parseInt("12", 13);24 15

parseFloat()parseFloat() toma un valor e intenta transformarlo en nmero de coma flotante (con decima-les).

1 >>> parseFloat('123')2 1233 >>> parseFloat('1.23')4 1.235 >>> parseFloat('1.23abc.00')6 1.237 >>> parseFloat('a.bc1.23')8 NaN

isNan()isNan() comprueba si el valor que se le pasa es un numero vlido (devuelve true en caso de queno lo sea)

Funciones 29

1 >>> isNaN(NaN)2 true3 >>> isNaN(123)4 false5 >>> isNaN(1.23)6 false7 >>> isNaN(parseInt('abc123'))8 true

isFinite()isFinite() comprueba si el valor que se le pasa no es ni Infinity ni NaN

1 >>> isFinite(Infinity)2 false3 >>> isFinite(-Infinity)4 false5 >>> isFinite(12)6 true7 >>> isFinite(1e308)8 true9 >>> isFinite(1e309)10 false

encodeURI()encodeURI() Nos permite escapar (codificar) una URL reemplazando algunos caracteres porsu correspondiente secuencia de escape UTF-8. encodeURI() nos devuelve una URL usable (solocodifica algunos caracteres)

1 >>> var url = 'http://www.packtpub.com/scr ipt.php?q=this and that';2 >>> encodeURI(url);3 http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that

decodeURI()decodeURI() Nos permite decodificar un string codificado por encodeURI()

encodeURIComponent() y decodeURIComponent()encodeURIComponent() y decodeURIComponent() Lo mismo que encodeURI() pero esta funcincodifica (decodifica) TODOS los caracteres transformables

Funciones 30

1 >>> encodeURIComponent(url);2 "http%3A%2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dthis%20and%20that"

eval()eval() toma una cadena de texto y la ejecuta como cdigo Javascripteval() no debe utilizarse bsicamente por 2 motivos:

Rendimiento: Es mucho ms lento evaluar cdigo en vivo que tenerlo directamente enel script

Seguridad: Teniendo en cuenta que ejecuta todo lo que se le pase puede ser un agujero deseguridad.

1 >>> eval('var ii = 2;')2 >>> ii3 2

alert()alert() Nos muestra una ventana con un stringalert() no es parte del core JS pero est disponible en todos los navegadoresOJO! alert() para el cdigo hasta que se acepte el mensaje

11.3 mbito (Scope) de las FuncionesEn javascript las variables se definen en el mbito de una funcin (y no en el mbito de un bloquecomo ocurre en otros lenguajes)

Las variables globales son aquellas que se definen fuera de cualquier funcin Las variables locales son aquellas que se definen dentro de una funcin

11.4 Funciones CallbackLas funciones en Javascript son datos, lo que significa que podemos asignarlas a variables igualque cualquier otro valor (y manejarlas como variables)

1 function f(){ return 1; }2 var f = function(){ return 1; }

Las funciones son datos, pero un tipo especial de datos (typeof function) ya que:

Contienen cdigo Podemos ejecutarlas

Funciones 31

1 >>> var sum = function(a, b) { return a + b; }2 >>> var add = sum;3 >>> delete sum4 true5 >>> typeof sum;6 "undefined"7 >>> typeof add;8 "function"9 >>> add(1, 2);10 3

Las funciones annimas son aquellas que no tienen nombre y se pueden utilizar para:

Pasar esa funcin como argumento de una funcin Definir una funcin y ejecutarla inmediatamente

1 >>> function(a){ return a; }

Cuando pasamos una funcin A como argumento de otra funcin B y B ejecuta A, decimos queA es una funcin callback

1 >>> function invoke_and_add(a, b){ return a() + b(); }2 >>> function one() { return 1; }3 >>> function two() { return 2; }4 >>> invoke_and_add(one, two);5 36 >>> invoke_and_add(one, function(){return 7;})7 8

11.5 ClosuresSi definimos una funcin n() dentro de f() , n() tendr acceso tanto a las variables de su scope(mbito) como las del scope de su padre. Esto es lo que se llama scope chain (encadenamientode mbitos)

Funciones 32

1 var a = 1;2 function f(){3 var b = 1;4 function n() {5 var c = 3;6 }7 }

Las funciones tienen lo que se llama lexical scope (mbito lxico) lo que significa que crean suentorno (scope, a qu variables tienen acceso) cuando son definidas no cuando son ejecutadas

1 >>> function f1(){ var a = 1; return f2(); }2 >>> function f2(){ return a; }3 >>> f1();4 a is not defined5 >>> var a = 5;6 >>> f1();7 58 >>> a = 55;9 >>> f1();10 5511 >>> delete a;12 true13 >>> f1();14 a is not defined

1 var a = 123;2 function f() {3 alert(a);4 var a = 1;5 alert(a);6 }7 f();

Un closure se crea cuando una funcion mantiene un enlace con el mbito (scope) de la funcinpadre incluso despus de que la funcin padre haya terminado.

Funciones 33

1 function f(){2 var b = "b";3 return function(){4 return b;5 }6 }7 >>> b8 b is not defined9 >>> var n = f();10 >>> n();11 "b"

1 var n;2 function f(){3 var b = "b";4 n = function(){5 return b;6 }7 }8 >>> f();9 >>> n();

1 function f(arg) {2 var n = function(){3 return arg;4 };5 arg++;6 return n;7 };8 >>> var m = f(123);9 >>> m();

..

Closures and lexical scoping | Mark Story How do JavaScript closures work? | StackOverflow Secrets of JavaScript: closures | kryogenix.org Closing The Book On Javascript Closures | hunlock.com A Graphical Explanation Of Javascript Closures In A jQuery Context | Ben Nadel

12. ArraysUn array es una lista de valores.Para asignar valores a un array encerramos los elementos entre corchetes ( array literal notation)Los elementos de un array son indexados con nmeros consecutivos a partir de 0Para acceder a un elemento del array especificamos el ndice entre corchetes

1 var a = [1,2,3];2 >>> a[0]3 14 >>> a[1]5 2

Podemos declarar un array vacio asi: var a = [];Para aadir/actualizar un elemento del array:

1 >>> a[2] = 'three';2 "three"3 >>> a4 [1, 2, "three"]5 >>> a[3] = 'four';6 "four"7 >>> a8 [1, 2, "three", "four"]

Para eliminar un elemento del array podemos utilizar el operador delete:

1 >>> var a = [1, 2, 3];2 >>> delete a[1];3 true4 >>> a5 [1, undefined, 3]

Un array puede contener otros arrays.

34

Arrays 35

1 >>> var a = [1, "two", false, null, undefined];2 >>> a3 [1, "two", false, null, undefined]4 >>> a[5] = [1,2,3]5 [1, 2, 3]6 >>> a7 [1, "two", false, null, undefined, [1, 2, 3]]

1 >>> var a = [[1,2,3],[4,5,6]];2 >>> a3 [[1, 2, 3], [4, 5, 6]]4 >>> a[0]5 [1, 2, 3]6 >>> a[0][0]7 18 >>> a[1][2]9 6

13. Objetos1 var hero = {2 breed: 'Turtle',3 occupation: 'Ninja'4 };

Un objeto es como un array pero donde los ndices los definimos nosotrosPara definir un objeto utilizamos las llaves {} ( object literal notation )Los elementos de un objeto ( propiedades ) los separamos por comasEl par clave/valor (key/value) lo dividimos con 2 puntosLas claves (keys, nombres de las propiedades) pueden ir entre comillas, pero no se recomiendadefinirlas asi

1 var o = {prop: 1};2 var o = {"prop": 1};3 var o = {'prop': 1};

Cuando una propiedad contiene una funcin, decimos que esta propiedad es unmtodo del objeto

1 var dog = {2 name: 'Benji',3 talk: function(){4 alert('Woof, woof!');5 }6 };

Hay 2 maneras de acceder a la propiedad de un objeto:

Con la notacin de corchetes: hero['occupation'] Con la notacin de puntos: hero.occupation

Los objetos pueden contener otros objetos

36

Objetos 37

1 var book = {2 name: 'Catch-22',3 published: 1961,4 author: {5 firstname: 'Joseph',6 lastname: 'Heller'7 }8 };9 >>> book.author.firstname10 "Joseph"11 >>> book['author']['lastname']12 "Heller"13 >>> book.author['lastname']14 "Heller"15 >>> book['author'].lastname16 "Heller"

Podemos definir un objeto vacio y luego aadirle (y quitarle) propiedades y mtodos

1 >>> var hero = {};2 >>> typeof hero.breed3 "undefined"4 >>> hero.breed = 'turtle';5 >>> hero.name = 'Leonardo';6 >>> hero.sayName = function() {return hero.name;};7 >>> hero.sayName();8 "Leonardo"9 >>> delete hero.name;10 true11 >>> hero.sayName();12 reference to undefined property hero.name

Cuando estamos dentro de un mtodo, con this hacemos referencia al objeto al que pertenece (this object )

1 var hero = {2 name: 'Rafaelo',3 sayName: function() {4 return this.name;5 }6 }7 >>> hero.sayName();8 "Rafaelo"

Objetos 38

13.1 Funciones ConstructorasOtra manera de crear objetos es mediante funciones constructorasPara crear objetos con estas funciones hay que usar el operador newLa ventaja que tiene utilizar estas funciones constructoras es que aceptan parmetros al crearobjetos

1 function Hero(name) {2 this.name = name;3 this.occupation = 'Ninja';4 this.whoAreYou = function() {5 return "I'm " + this.name + " and I'm a " + this.occupation;6 }7 }89 >>> var h1 = new Hero('Michelangelo');10 >>> var h2 = new Hero('Donatello');11 >>> h1.whoAreYou();12 "I'm Michelangelo and I'm a Ninja"13 >>> h2.whoAreYou();14 "I'm Donatello and I'm a Ninja"

Todos los entornos cliente tienen un objeto global y todas las variables globales son propiedadesde este objeto globalEn el navegador este objeto global se llama windowPor lo tanto, podemos acceder a una variable global a:

Como una variable a Como una propiedad del objeto global: window[a] o window.a

Si declaramos una funcin constructora y la llamamos sin new

Devolver undefined Todas las propiedades declaradas con this se convertirn en propiedades de window

Objetos 39

1 >>> function Hero(name) {this.name = name;}2 >>> var h = Hero('Leonardo');3 >>> typeof h4 "undefined"5 >>> typeof h.name6 h has no properties78 >>> name9 "Leonardo"10 >>> window.name11 "Leonardo"1213 >>> var h2 = new Hero('Michelangelo');14 >>> typeof h215 "object"16 >>> h2.name17 "Michelangelo"

Hay maneras de evitar estos accidentes (llamar a un constructor sin new) como por ejemploactivar strict mode (lanzaria una excepcion en este caso).Cuando creamos un objeto, se le asigna siempre la propiedad constructor que contiene unareferencia a la funcin constructora utilizada para crear el objeto

1 >>> h2.constructor2 Hero(name)34 >>> var h3 = new h2.constructor('Rafaello');5 >>> h3.name;6 "Rafaello"78 >>> var o = {};9 >>> o.constructor;10 Object()11 >>> typeof o.constructor;12 "function"

Con el operador instanceof podemos chequear si un objeto fue creado con una determinadafuncin constructora

Objetos 40

1 >>> function Hero(){}2 >>> var h = new Hero();3 >>> var o = {};4 >>> h instanceof Hero;5 true6 >>> h instanceof Object;7 false8 >>> o instanceof Object;9 true

13.2 Trabajando con ObjetosOtra forma de crear un objeto, es a travs de una funcin que nos devuelva un objeto.

1 function factory(name) {2 return {3 name: name4 };5 }6 >>> var o = factory('one');7 >>> o.name8 "one"9 >>> o.constructor10 Object()

Podemos utilizar funciones constructoras y devolver objetos distintos de this

1 >>> function C() { this.a = 1; }2 >>> var c = new C();3 >>> c.a4 15 >>> function C2() { this.a = 1; return {b: 2}; }6 >>> var c2 = new C2();7 >>> typeof c2.a8 "undefined"9 >>> c2.b10 2

Cuando copiamos un objeto o lo pasamos como parmetro a una funcin, realmente estamospasando una referencia al objeto.Si hacemos un cambio a esta referencia, modicaremos tambin el objeto original

Objetos 41

1 >>> var original = { howmany: 1 };2 >>> var copy = original;3 >>> copy.howmany4 15 >>> copy.howmany = 100;6 1007 >>> original.howmany8 100910 >>> var nullify = function(o) { o.howmany = 0; }11 >>> nullify(copy);12 >>> original.howmany13 0

Cuando comparamos un objeto slo obtendremos true si comparamos 2 referencias al mismoobjeto

1 >>> var fido = { breed: 'dog' };2 >>> var benji = { breed: 'dog' };3 >>> benji === fido4 false5 >>> benji == fido6 false7 >>> var mydog = benji;8 >>> mydog === benji9 true10 >>> mydog === fido11 false

14. Objetos GlobalesSon los objetos que tenemos disponibles en el mbito global (objetos primitivos)Los podemos dividir en 3 grupos

Objetos contenedores de datos: Object, Array, Function, Boolean, Number Objetos de utilidades: Math, Date, RegExp Objetos de errores: Error

14.1 ObjectObject es el padre de todos los objetos Javascript, es decir, cualquier objeto hereda de lPara crear un objeto vacio podemos usar:

La notacion literal : var o = {} La funcion constructora Object(): var o = new Object();

Un objeto contiene las siguientes propiedades y metodos: La propiedad o.constructor con la funcin constructora El mtodo o.toString() que devuelve el objeto en formato texto El mtodo o.valueOf() que devuelve el valor del objeto (normalmente o)

1 >>> var o = new Object();2 >>> o.toString()3 [object Object]45 >>> o.valueOf() === o6 true

14.2 ArrayPara crear arrays podemos usar:

La notacion literal : var a = [] La funcion constructora Array(): var o = new Array();

Podemos pasarle parametros al constructor Array() Varios parametros: Seran asignados como elementos al array Un numero: Se considerar el tamao del array

42

Objetos Globales 43

1 >>> var a = new Array(1,2,3,'four');2 >>> a;3 [1, 2, 3, "four"]45 >>> var a2 = new Array(5);6 >>> a2;7 [undefined, undefined, undefined, undefined, undefined]

Como los arrays son objetos tenemos disponibles los metodos y propiedades del padre Object()

1 >>> typeof a;2 "object"34 >>> a.toString();5 "1,2,3,four"6 >>> a.valueOf()7 [1, 2, 3, "four"]8 >>> a.constructor9 Array()

Los arrays disponen de la propiedad length

Nos devuelve el tamao del array (numero de elementos) Podemos modificarlo y cambiar el tamao del array

1 >>> a[0] = 1;2 >>> a.prop = 2;34 >>> a.length5 16 >>> a.length = 57 58 >>> a9 [1, undefined, undefined, undefined, undefined]1011 >>> a.length = 2;12 213 >>> a14 [1, undefined]

Los arrays disponen de unos cuantos metodos interesantes:

push()

Objetos Globales 44

pop() sort() join() slice() splice()

1 >>> var a = [3, 5, 1, 7, 'test'];23 >>> a.push('new')4 65 >>> a6 [3, 5, 1, 7, "test", "new"]78 >>> a.pop()9 "new"10 >>> a11 [3, 5, 1, 7, "test"]1213 >>> var b = a.sort();14 >>> b15 [1, 3, 5, 7, "test"]16 >>> a17 [1, 3, 5, 7, "test"]1819 >>> a.join(' is not ');20 "1 is not 3 is not 5 is not 7 is not test"2122 >>> b = a.slice(1, 3);23 [3, 5]24 >>> a25 [1, 3, 5, 7, "test"]2627 >>> b = a.splice(1, 2, 100, 101, 102);28 [3, 5]29 >>> a30 [1, 100, 101, 102, 7, "test"]

push()push() inserta elementos al final del arraya.push('new') es lo mismo que a[a.length] = 'new'push() devuelve el tamao del array modificado

Objetos Globales 45

1 >>> var sports = ['soccer', 'baseball'];2 >>> sports3 ["soccer", "baseball"]4 >>> sports.length5 26 >>> sports.push('football', 'swimming');7 48 >>> sports9 ["soccer", "baseball", "football", "swimming"]

pop()pop() elimina el ultimo elementoa.pop() es lo mismo que a.length--;pop() devuelve el elemento eliminado

1 >>> var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];2 >>> myFish3 ["angel", "clown", "mandarin", "sturgeon"]4 >>> myFish.pop();5 "sturgeon"6 >>> myFish7 ["angel", "clown", "mandarin"]

sort()ordena el array y devuelve el array modificado

1 >>> var fruit = ['apples', 'bananas', 'Cherries'];2 >>> fruit3 ["apples", "bananas", "Cherries"]4 >>> fruit.sort();5 ["Cherries", "apples", "bananas"]67 >>> var scores = [1, 2, 10, 21];8 >>> scores9 [1, 2, 10, 21]10 >>> scores.sort()11 [1, 10, 2, 21]

Objetos Globales 46

1 >>> var numbers = [4, 2, 42, 36, 5, 1, 12, 3];2 >>> numbers3 [4, 2, 42, 36, 5, 1, 12, 3]4 >>> numbers.sort()5 [1, 12, 2, 3, 36, 4, 42, 5]6 >>> numbers.sort( function(a, b) { return a - b; } );7 [1, 2, 3, 4, 5, 12, 36, 42]

join()join() devuelve una cadena (string) con los valores de los elementos del array

1 >>> var a = ['Wind', 'Rain', 'Fire'];2 >>> a.join();3 "Wind,Rain,Fire"4 >>> a.join(" - ");5 "Wind - Rain - Fire"6 >>> typeof ( a.join(" - ") )7 "string"

slice()slice() devuelve un trozo del array sin modficar el original

1 >>> var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];2 >>> var citrus = fruits.slice(1, 3);3 >>> fruits4 ["Banana", "Orange", "Lemon", "Apple", "Mango"]5 >>> citrus6 ["Orange", "Lemon"]

splice()splice() quita un trozo del array, lo devuelve y opcionalmente rellena el hueco con nuevoselementos

Objetos Globales 47

1 >>> var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];23 >>> myFish4 ["angel", "clown", "mandarin", "surgeon"]5 >>> var removed = myFish.splice(2, 1);67 >>> myFish8 ["angel", "clown", "surgeon"]9 >>> removed10 ["mandarin"]1112 >>> var removed = myFish.splice(2, 0, 'drum');13 >>> myFish14 ["angel", "clown", "drum", "surgeon"]15 >>> removed16 []

14.3 FunctionLas funciones son objetosPodemos crear funciones con la funcin constructora Function() (aunque este metodo no serecomienda ya que internamente hace un eval() )

1 >>> function sum(a, b) {return a + b;};2 >>> sum(1, 2)3 34 >>> var sum = function(a, b) {return a + b;};5 >>> sum(1, 2)6 37 >>> var sum = new Function('a', 'b', 'return a + b;');8 >>> sum(1, 2)9 3

Las funciones disponen de las siguientes propiedades:

La propiedad constructor que contiene una referencia a la funcion constructora Fun-ction()

La propiedad length que contiene el numero de parametros que acepta la funcin La propiedad caller (no standard) que contiene una referencia a la funcion que llam aesta funcin

La propiedad prototype que contiene un objeto. Slo es util cuando utilizamos una funcion como constructora. Todos lo objetos creados con una funcin constructora mantienen una referencia a

su propiedad prototype y pueden usar sus propiedades como si fueran propias.

Objetos Globales 48

1 >>> function myfunc(a){ return a; }2 >>> myfunc.constructor3 Function()45 >>> function myfunc(a, b, c){ return true; }6 >>> myfunc.length7 389 >>> function A(){ return A.caller; }10 >>> function B(){ return A(); }11 >>> B()12 B()

1 var some_obj = {2 name: 'Ninja',3 say: function(){4 return 'I am a ' + this.name;5 }6 }7 >>> function F(){}8 >>> typeof F.prototype9 "object"10 >>> F.prototype = some_obj;11 >>> var obj = new F();12 >>> obj.name13 "Ninja"14 >>> obj.say()15 "I am a Ninja"

Las funciones disponen de los siguientes mtodos:

El mtodo toString() que devuelve el cdigo fuente de la funcin Los mtodos call() y apply() que ejecutan metodos de otros objetos especificando elcontexto (especificamos un this diferente)

Estos dos mtodos hacen lo mismo pero el formato en que reciben los argumentos esdiferente

1 >>> function myfunc(a, b, c) {return a + b + c;}2 >>> myfunc.toString()3 "function myfunc(a, b, c) {4 return a + b + c;5 }"

Objetos Globales 49

1 var some_obj = {2 name: 'Ninja',3 say: function(who){4 return 'Haya ' + who + ', I am a ' + this.name;5 }6 }7 >>> some_obj.say('Dude');8 "Haya Dude, I am a Ninja"910 >>> my_obj = {name: 'Scripting guru'};11 >>> some_obj.say.call(my_obj, 'Dude');12 "Haya Dude, I am a Scripting guru"1314 some_obj.someMethod.apply(my_obj, ['a', 'b', 'c']);15 some_obj.someMethod.call(my_obj, 'a', 'b', 'c');

Las funciones disponen del objeto arguments que (ademas de length) tiene la propiedad calleeque contiene una referencia a la funcion llamada (a si misma)

1 >>> function f(){return arguments.callee;}2 >>> f()3 f()

1 (2 function(count){3 if (count

Objetos Globales 50

1 >>> var b = new Boolean();2 >>> typeof b3 "object"4 >>> typeof b.valueOf()5 "boolean"6 >>> b.valueOf()7 false

La funcin Boolean usada como funcin normal (sin new) nos devuelve el valor pasado comoparametro convertido a booleano

1 >>> Boolean("test")2 true3 >>> Boolean("")4 false5 >>> Boolean({})6 true

14.5 NumberLa funcin Number() puede ser usada:

Cmo una funcin normal para convertir valores a nmero Cmo una funcin constructora (con new) para crear objetos

Los objetos nmero disponen de los mtodos: toFixed(), toPrecision() y toExponential()

1 >>> var n = new Number(123.456)2 >>> n.toFixed(1)3 "123.5"45 >>> (12345).toExponential()6 "1.2345e+4"

El mtodo toString() de un objeto numero nos permite transformar un numero a una basedeterminada

Objetos Globales 51

1 >>> var n = new Number(255);2 >>> n.toString();3 "255"4 >>> n.toString(10);5 "255"6 >>> n.toString(16);7 "ff"8 >>> (3).toString(2);9 "11"10 >>> (3).toString(10);11 "3"

14.6 StringPodemos crear objetos String con la funcin constructora String()Un objeto String NO es un dato de tipo primitivo string (valueOf())

1 >>> var primitive = 'Hello';2 >>> typeof primitive;3 "string"4 >>> var obj = new String('world');5 >>> typeof obj;6 "object"78 >>> Boolean("")9 false10 >>> Boolean(new String(""))11 true

Un objeto string es parecido a un array de caracteres:

Cada carcter tiene una posicin indexada Tiene disponible la propiedad length

1 >>> obj[0]2 "w"3 >>> obj[4]4 "d"5 >>> obj.length6 5

Aunque los mtodos pertenezcan al objeto String, podemos utilizarlos tambin directamente endatos de tipo primitivo string (se crea el objeto internamente)

Objetos Globales 52

1 >>> "potato".length2 63 >>> "tomato"[0]4 "t"5 >>> "potato"["potato".length - 1]6 "o"

Los objetos string disponen de los siguientes mtodos:

toUpperCase() devuelve el string convertido a maysculas toLowerCase() devuelve el string convertido a minusculas charAt() devuelve el carcter encontrado en la posicin indicada indexOf() busca una cadena de texto en el string y devuelve la posicin donde la encuentra

Si no encuentra nada devuelve -1 lastIndexOf() empieza la bsqueda desde el final de la cadena

Si no encuentra nada devuelve -1

Por tanto la manera de correcta de chequear si existe una cadena de texto en otra es if (s.toLowerCase().indexOf('couch') !== -1 ) {...}

slice() devuelve un trozo de la cadena de texto split() transforma el string en un array utilizando un string como separador concat() une strings

1 >>> var s = new String("Couch potato");2 >>> s.toUpperCase()3 "COUCH POTATO"4 >>> s.toLowerCase()5 "couch potato"6 >>> s.charAt(0);7 "C"8 >>> s.indexOf('o')9 110 >>> s.lastIndexOf('o')11 1112 >>> s.slice(1, 5)13 "ouch"14 >>> s.split(" ")15 ["Couch", "potato"]16 >>> s.concat("es")17 "Couch potatoes"

Objetos Globales 53

14.7 MathMath es un objeto con propiedades y mtodos para usos matemticos No es constructor de otrosobjetosAlgunos mtodos interesantes de Math son:

random() genera nmeros aleatorios entre 0 y 1 round(), floor() y ceil() para redondear numeros min() y max() devuelven el minimo y el mximo de una serie de nmeros pasados comoparametros

pow() y sqrt() devuelve la potencia y la raz cuadrada respectivamente

14.8 DateDate() es una funcin constructora que crea objetos DatePodemos crear objetos Date nuevo pasndole:

Nada (tomar por defecto la fecha actual) Una fecha en formato texto Valores separados que representan: Ao, Mes (0-11), Dia (1-31), Hora (0-23), Minutes (0-59),Segundos(0-59) y Milisegundos (0-999)

Un valor timestamp

Ejemplo (Firebug muestra el resultado del metodo toString sobre un objeto date):

1 >>> new Date()2 Tue Jan 08 2008 01:10:42 GMT-0800 (Pacific Standard Time)3 >>> new Date('2009 11 12')4 Thu Nov 12 2009 00:00:00 GMT-0800 (Pacific Standard Time)5 >>> new Date(2008, 0, 1, 17, 05, 03, 120)6 Tue Jan 01 2008 17:05:03 GMT-0800 (Pacific Standard Time)7 >>> new Date(1199865795109)8 Wed Jan 09 2008 00:03:15 GMT-0800 (Pacific Standard Time)

Algunos mtodos para trabajar con objetos Date son:

setMonth() y getMonth() escriben y leen el mes en un objeto date respectivamente (lomismo hay para year, day, hours, minutes, etc)

parse() dado un string, devuelve su timestamp UTC() produce un timestamp dados un ao, mes, dia, etc.. toDateString() devuelve el contenido de un objeto date en formato americano

Objetos Globales 54

1 >>> var d = new Date();2 >>> d.toString();3 "Wed Jan 09 2008 00:26:39 GMT-0800 (Pacific Standard Time)"4 >>> d.setMonth(2);5 12050511995626 >>> d.toString();7 "Sun Mar 09 2008 00:26:39 GMT-0800 (Pacific Standard Time)"8 >>> d.getMonth();9 21011 >>> Date.parse('Jan 1, 2008')12 119917440000013 >>> Date.UTC(2008, 0, 1)14 11991456000001516 >>> var d = new Date(2012, 5, 20);17 >>> d.getDay();18 319 >>> d.toDateString();20 "Wed Jun 20 2012"

15. El entorno del Navegador

..

El gran lo: versiones, DOM y BOM JavaScript Vs DOM Vs BOM, relationship explained | Rajakvks Blog Browser Object Model and Document Object Model | JavaScript By Example What is the DOM and BOM in JavaScript? | StackOverflow

Javascript puede ser utilizado en diferentes entornos, pero su entorno ms habitual es elnavegadorEl cdigo Javascript de una pagina tiene acceso a unos cuantos objetos. Estos objetos los podemosagrupar en:

Objetos que tienen relacin con la pagina cargada (el document). Estos objetos conformanel Document Object Model (DOM)

Objetos que tienen que ver con cosas que estn fuera de la pagina (la ventana del navegadory la pantalla). Estos objetos conforman el Browser Object Model (BOM)

El DOM es un standard y tiene varias versiones (llamadas levels). La mayoria de los navegadoresimplementan casi por completo el DOM Level 1.El BOM no es un standard, asi que algunos objetos estn soportados por la mayora denavegadores y otros solo por algunos.

15.1 Deteccion de FuncionalidadesDebido a estas diferencia entre navegadores surge la necesidad de averiguar (desde cdigo JS)que caracteristicas soporta nuestro navegador (DOM y BOM)Una solucin seria la llamada Browser Sniffing que consiste en detectar el navegador queestamos utilizandoEsta tcnica no se recomienda por:

Hay demasiados navegadores para controlar Dificil de mantener (surgen nuevas versiones y nuevos navegadores) El parseo de cadenas puede ser complicado y no es fiable del todo

55

El entorno del Navegador 56

1 if (navigator.userAgent.indexOf('MSIE') !== -1) {2 // this is IE3 } else {4 // not IE5 }

Lamejor solucion para detectar funcionalidades de nuestro navegador es hacer Feature Sniffing,es decir chequear la existencia del objeto (mtodo, array o propiedad) que queremos utilizar

1 if (typeof window.addEventListener === 'function') {2 // feature is subported, let's use it3 } else {4 // hmm, this feature is not subported, will have to5 // think of another way6 }

16. BOMEl BOM (Browser Object Model) lo conforman todos los objetos que estn fuera del documentocargado (document) y forman parte del objeto window

BOM

El objeto window ademas de servir de contenedor de las variables globales y de ofrecer losmetodosnativos de JS (window.parseInt), contiene informacion sobre el entorno del navegador (frame,iframe, popup, ventana o pestaa)

16.1 Propiedades de windowAlgunos de los objetos que tenemos disponibles en window son:

window.navigatorEs un objeto que contiene informacin sobre el navegador

1 >>> window.navigator.userAgent2 "Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.9.2.12)3 Gecko/20101026 Firefox/3.6.12 ( .NET CLR 3.5.30729)"

window.locationEs un objeto que contiene info (y metodos) sobre la URL actual

57

BOM 58

1 >>> window.location.href = 'http://www.packtpub.com'2 >>> location.href = 'http://www.packtpub.com'3 >>> location = 'http://www.packtpub.com'4 >>> location.assign('http://www.packtpub.com')5 >>> location.reload()6 >>> window.location.href = window.location.href7 >>> location = location

window.historyEs un objeto que contiene el historial de paginas visitadas y tiene mtodos para movernos en l(sin poder ver las URLs)

1 >>> window.history.length2 53 >>> history.forward()4 >>> history.back()5 >>> history.go(-2);

window.framesEs una coleccin de todos los frames que tenemos en la pginaCada frame tendr su propio objeto windowPodemos utilizar parent para acceder desde el frame hijo al padreCon la propiedad top accedemos a la pagina que est por encima de todos los framesPodemos acceder a un frame concreto por su nombre.

1 2 >>> window.frames[0]3 >>> frames[0].window.location.reload()4 >>> frames[0].parent === window5 true6 >>> window.frames[0].window.top === window7 true8 >>> self === window9 true10 >>> window.frames['myframe'] === window.frames[0]11 true

window.screenOfrece info sobre la pantalla (general, fuera del browser)

BOM 59

1 >>> window.screen.colorDepth2 323 >>> screen.width4 14405 >>> screen.availWidth6 14407 >>> screen.height8 9009 >>> screen.availHeight10 847

16.2 Mtodos de windowAlgunos de los mtodos que tenemos disponibles en window son:

window.open(), window.close()Nos permiten abrir (y cerrar) nuevas ventanas (popups)window.open() devuelve una referencia a la ventana creada (si devuelve false es que no la hapodido crear - popups blocked)No se recomienda su uso ;-)

1 >>> var win = window.open('http://www.packtpub.com', 'packt',2 'width=300,height=300,resizable=yes');3 >>> win.close()

window.moveTo(), window.moveBy(), window.resizeTo(),window.resizeBy()Nos permiten mover y redimensionar las ventanasNo se recomienda su uso ;-)

1 >>> window.moveTo(100, 100)2 >>> window.moveBy(10, -10)3 >>> window.resizeTo(300, 300)4 >>> window.resizeBy(20, 10)

window.alert(), window.prompt(), window.confirm()Nos permiten interactuar con el usuario a traves de mensajes del sistema

BOM 60

1 if (confirm('Are you sure you want to delete this item?')) {2 // delete3 } else {4 // abort5 }6 >>> var answer = prompt('And your name was?');7 console.log(answer);

window.setTimeout(), window.setInterval()Nos permiten ejecutar cdigo despus de un intervalo de tiempo (y en su caso, repetirlo)

1 >>> function boo(){alert('Boo!');}2 >>> setTimeout(boo, 2000);3 >>> var id = setTimeout(boo, 2000);4 >>> clearTimeout(id);5 >>> function boo() { console.log('boo') };6 >>> var id = setInterval( boo, 2000 );7 boo8 boo9 boo10 >>> clearInterval(id)11 var id = setInterval( "alert('boo, boo')", 2000 );12 var id = setInterval( function(){ alert('boo, boo')}, 2000 );

16.3 El objeto documentwindow.document es un objeto del BOM con info sobre el documento actualTodos los mtodos y propiedades que estan dentro de window.document pertenecen a la categorade objetos DOM

17. DOMElDOM (Document Object Model) es una forma de representar un documento HTML (o XML)como un rbol de nodos.Utilizando los mtodos y propiedades del DOM podremos acceder a los elementos de la pgina,modificarlo, eliminarlos o aadir nuevos

1 4 5 6 8 Pgina sencilla9 10 11 Esta pgina es muy sencilla12 13

DOM

En el DOM Level 1 se diferencia entre:

El Core DOM es la especificacin comn que se aplica a todos los documentos (XML,HTML,)

El Core HTML es la especificacin que se aplica slo a documentos HTML

61

DOM 62

17.1 Accediendo a los nodos1 2 first paragraph3 second paragraph4 final5 6

El nodo document nos da acceso al documento (es el punto de partida)Todos los nodos tienen las propiedades:

nodeType: Hay 12 tipos de nodos representados por nmeros (1=element, 2=attribute,3=text, )

nodeName: Para tags HTML es el nombre del tag y para nodos texto es #text nodeValue: Para nodos de texto el valor ser el texto

El nodo documentElement es el nodo raz. Para documentos HTML es el tag

1 >>> document.documentElement2 3 >>> document.documentElement.nodeType4 15 >>> document.documentElement.nodeName6 "HTML"7 >>> document.documentElement.tagName8 "HTML"

Cada nodo puede tener nodos-hijo:

hasChildNodes() : Este mtodo devolver true si el nodo tiene nodos-hijo childNodes: Devuelve en un array los nodos-hijo de un elemento.Al ser un array podemos saber el numero de nodos-hijo con childNodes.length

parentNode: Nos da el nodo-padre de un nodo-hijo

DOM 63

1 >>> document.documentElement.hasChildNodes()2 True3 >>> document.documentElement.childNodes.length4 25 >>> document.documentElement.childNodes[0]6 7 >>> document.documentElement.childNodes[1]8 9 >>> document.documentElement.childNodes[1].parentNode10 11 >>> var bd = document.documentElement.childNodes[1];12 >>> bd.childNodes.length13 9

Podemos chequear la existencia de attributes y acceder a sus atributos:

hasAttributes():Devuelve true si el elemento tiene atributos getAttribute(): Devuelve el contenido de un atributo

1 >>> bd.childNodes[1]2 3 >>> bd.childNodes[1].hasAttributes()4 True5 >>> bd.childNodes[1].attributes.length6 17 >>> bd.childNodes[1].attributes[0].nodeName8 "class"9 >>> bd.childNodes[1].attributes[0].nodeValue10 "opener"11 >>> bd.childNodes[1].attributes['class'].nodeValue12 "opener"13 >>> bd.childNodes[1].getAttribute('class')14 "opener"

Podemos acceder al contenido de un tag:

textContent: Esta propiedad nos da el texto plano dentro de una etiquetaEn IE no existe esta propiedad (hay que usar innerText)

innerHTML: Esta propiedad nos da el contenido (en HTML) de un tag

DOM 64

1 >>> bd.childNodes[1].nodeName2 "P"3 >>> bg.childNodes[1].textContent4 "first paragraph"5 >>> bd.childNodes[1].innerHTML6 "first paragraph"7 >>> bd.childNodes[3].innerHTML8 "second paragraph"9 >>> bd.childNodes[3].textContent10 "second paragraph"11 >>> bd.childNodes[1].childNodes.length12 113 >>> bd.childNodes[1].childNodes[0].nodeName14 "#text"15 >>> bd.childNodes[1].childNodes[0].nodeValue16 "first paragraph"

Podemos acceder directamente a algunos elementos sin necesidad de recorrer todo elrbol:

getElementsByTagName(): Nos devuelve un array con todos los elementos con el tag quese le pasa por parmetro

getElementsByName(): Nos devuelve un array con todos los elementos con el name que sele pasa por parmetro

getElementById(): No devuelve el elemento con el id que se le pasa por parmetro

1 >>> document.getElementsByTagName('p').length2 33 >>> document.getElementsByTagName('p')[0]4 5 >>> document.getElementsByTagName('p')[0].innerHTML6 "first paragraph"7 >>> document.getElementsByTagName('p')[2]8 9 >>> document.getElementsByTagName('p')[2].id10 "closer"11 >>> document.getElementsByTagName('p')[0].className12 "opener"13 >>> document.getElementById('closer')14

DOM 65

Parent & Childs

Desde un nodo tambin podemos acceder a sus hermanos y al primero y ltimo de sus hijos nextSibling: Nos devuelve el siguiente hermano previousSibling: Nos devuelve el anterior hermano firstChild: Nos devuelve el primer hijo lastChild: Nos devuelve el ltimo hijo

1 >>> var para = document.getElementById('closer')2 >>> para.nextSibling3 "\n "4 >>> para.previousSibling5 "\n "6 >>> para.previousSibling.previousSibling7 8 >>> para.previousSibling.previousSibling.previousSibling9 "\n "10 >>>11 para.previousSibling.previousSibling.nextSibling.nextSibling12 13 >>> document.body.previousSibling14 15 >>> document.body.firstChild16 "\n "17 >>> document.body.lastChild18 "\n "19 >>> document.body.lastChild.previousSibling20 Comment length=21 nodeName=#comment21 >>> document.body.lastChild.previousSibling.nodeValue22 " and that's about it "

17.2 Modificando los nodosPara cambiar el contenido de una etiqueta cambiamos el contenido de innerHTML

DOM 66

1 >>> var my = document.getElementById('closer');2 >>> my.innerHTML = 'my final';3 >>> my.firstChild4 5 >>> my.firstChild.firstChild6 "my"7 >>> my.firstChild.firstChild.nodeValue = 'your';8 "your"

Los elementos tienen la propiedad style que podemos utilizar para modificar sus estilos

1 >>> my.style.border = "1px solid red";2 "1px solid red"3 Ademas podemos modificar los atributos existan ya o no4 Ejemplo:5 >>> my.align = "right";6 "right"7 >>> my.name8 >>> my.name = 'myname';9 "myname"10 >>> my.id11 "closer"12 >>> my.id = 'further'13 "further"

17.3 Creando y Eliminando nodosPara crear nuevos elementos podemos utilizar los mtodos createElement y createTextNode.Una vez creados los podemos aadir al DOM con appendChild

1 >>> var myp = document.createElement('p');2 >>> myp.innerHTML = 'yet another';3 "yet another"4 >>> myp.style5 CSSStyleDeclaration length=06 >>> myp.style.border = '2px dotted blue'7 "2px dotted blue"8 >>> document.body.appendChild(myp)9

Tambien podemos copiar elementos existentes con cloneNode()cloneNode acepta un parmetro booleano (true copiar el nodo con todos sus hijos y false soloel nodo)

DOM 67

1 >>> var el = document.getElementsByTagName('p')[1];2 second paragraph3 >>> document.body.appendChild(el.cloneNode(false))4 >>> document.body.appendChild(document.createElement('p'));5 >>> document.body.appendChild(el.cloneNode(true))

Con insertBefore() podemos especificar el elemento delante del cual queremos insertar elnuestro

1 document.body.insertBefore(2 document.createTextNode('boo!'),3 document.body.firstChild4 );

Para eliminar nodos del DOM podemos utilizar removeChild() o replaceChild()removeChild() elimina el elemento y replaceChild() lo sustituye por otro que se le pasa comoparmetroTanto replaceChild() como removeChild() devuelven el nodo eliminado

1 >>> var myp = document.getElementsByTagName('p')[1];2 >>> var removed = document.body.removeChild(myp);3 >>> removed4 5 >>> removed.firstChild6 7 >>> var p = document.getElementsByTagName('p')[1];8 >>> p9 10 >>> var replaced = document.body.replaceChild(removed, p);11 >>> replaced12

17.4 Objetos DOM slo de HTMLEn el DOM tenemos disponibles una serie de selectores directos y de colecciones exclusivos deHTML (no XML):

document.body: document.getElementsByTagName(body)[0] document.images: document.getElementsByTagName(img) document.applets: document.getElementsByTagName(applet) document.links: Nos devuelve un array con todos los links con atributo href document.anchors: Nos devuelve un array con todos los links con atributo name document.forms: document.getElementsByTagName(form)Podemos acceder a los elementos del form (inputs, buttons) con elements

DOM 68

1 >>> document.forms[0]2 >>> document.getElementsByTagName('forms')[0]3 >>> document.forms[0].elements[0]4 >>> document.forms[0].elements[0].value = 'me@example.org'5 "me@example.org"6 >>> document.forms[0].elements[0].disabled = true;7 >>> document.forms[0].elements['search']; // array notation8 >>> document.forms[0].elements.search; // object property

Tambien tenemos disponible el mtodo document.write()No se recomienda su uso ;-)Algunas propiedades del objeto document son:

document.cookies: Contiene una cadena de texto con las cookies asociadas al documento document.title: Permite cambiar el titulo de la pagina que aparece en el navegadorEsto no cambia el contenido del tag title

document.referrer: Contiene la URL desde donde hemos llegado a la pgina document.domain: Contiene el dominio de la pagina

17.5 Seleccin Avanzada de Elementos

..

CSS2: Syntax and basic data types | w3.org CSS contents and browser compatibility | quirksmode.org

document.images1 `document.getElementsByTagName(img)`

rows y cellsDado un elemento table podemos acceder a sus filas y dado un row podemos acceder a sus celdascon estos selectores

DOM 69

1 >>> oTable = document.getElementsByTagName(table)[0];2 >>> aRows = oTable.rows;n3 >>> oFirstRow = aRows[0];4 >>> oLastRow = aRows[oRows.length-1];5 >>> aCells = oFirstRow.cells;6 >>> oFirstCell = aCells[0];7 >>> oLastCell = aCells[aCells.length-1];

optionsDado un elemento select podemos acceder al array de sus options

1 >>> document.getElementsByTagName('select')[0].options;2 [option.windows, option.movil, option.aplicaciones-web, option.mac,3 option.linux, option.palm, option.pocketpc, option.blog]

querySelector y querySelectorAllDevuelve elementos del DOM a partir de una seleccin CSS

querySelector() devuelve el primer elemento encontrado querySelectorAll() devuelve un array de elementos

Funciones nativas disponibles a partir de IE8 y FF3.5

1 >>> oMyElem = document.querySelector("#myid");2 >>> aMyHiddenElems = document.body.querySelectorAll(".hidden");

$() o jQuery()Con jQuery disponemos de una potente herramienta de seleccin de elementos

..

How jQuery selects elements using Sizzle | blog.bigbinary.com jQuery Selectors | refcardz.dzone.com

Para obtener los elementos utilizamos $() o jQuery() pasndole nuestra seleccin CSS entrecomillas$() devuelve un objeto jQuery (que no es un elemento DOM y tiene acceso a metodos propiosde jQuery)Podemos pasar de objeto jQuery a seleccin DOM:

DOM 70

Para un elemento $('#container') -> $('#container')[0] Para un grupo de elementos $('.hidden') -> $('.hidden').toArray()

Tambien podemos pasar de seleccin DOM a objeto jQuery:

Para un elemento: document.getElementById('container') -> $(document.getElementById('container')) Para un grupo de elementos: document.links -> $(document.links);

1 >>> $('#container');2 jQuery(div#container)3 >>> $('#container')[0]45 6 >>> $('#footer_contents')7 jQuery(div#footer_contents.clearfix)8 >>> $('#footer_contents')[0]910 11 >>> $('#footer_contents').attr("class");12 "clearfix"13 >>> $('#footer_contents').className14 undefined15 >>> $('#footer_contents')[0].className16 "clearfix"17 >>> $('#footer_contents')[0].attr("class");18 TypeError: $("#footer_contents")[0].attr is not a function1920 >>> $('div.hidden')21 jQuery(div#ads_section_textlinks.clearfix, div#top_sales.top_box,22 div#top_valuated.top_box, div.list_container, div.ac_results)2324 >>> $('div.hidden').toArray()25 [div#ads_section_textlinks.clearfix, div#top_sales.top_box,26 div#top_valuated.top_box, div.list_container, div.ac_results]2728 >>> $('div.hidden').toArray()[0]29 3132 >>> document.getElementById('ads_section_textlinks');33 3536 >>> $(document.getElementById('ads_section_textlinks'));

DOM 71

37 jQuery(div#ads_section_textlinks.clearfix)3839 >>> $(document.querySelectorAll('div.hidden')[0]);40 jQuery(div#ads_section_textlinks.clearfix)

18. EventosCada accin (click, change, ) que ocurre en el navegador es comunicada (a quien quieraescuchar) en forma de evento Desde Javascript podemos escuchar estos eventos y engancharleuna funcin (event handler) que se ejecutar cuando ocurra este evento

Events

Cuando hacemos click en un link (a), tambien hacemos click en su contenedor (li,ul), en el bodyy en ultima instancia en el document. Esto es lo que se llama la propagacin del eventoLa especificacin de eventos DOM Level 2 define que el evento se propaga en 3 fases: Capturing,Target y Bubbling

Capturing: El click ocurre en el document y va pasando por todos los elementos hastallegar al link (a)

Bubbling: El click ocurre en el link (a) y va emergiendo hasta el document.

Firefox, Opera y Safari implementan las 3 fases pero IE slo el Bubbling

18.1 Capturando eventos

72

Eventos 73

..

Flexible Javascript Events | John Resig blog JavaScript Events | webmonkey.com Events and Event Handlers | elated.com Gestin de eventos en Javascript | anieto2k.com

1 function callback(evt) {2 // prep work3 evt = evt || window.event;4 var target = (typeof evt.target !== 'undefined') ? evt.target :5 evt.srcElement;67 // actual callback work8 console.log(target.nodeName);9 }10 // start listening for click events11 if (document.addEventListener){ // FF12 document.addEventListener('click', callback, false);13 } else if (document.attachEvent){ // IE14 document.attachEvent('onclick', callback);15 } else {16 document.onclick = callback;17 }

Modelo TradicionalPodemos capturar eventos con el modelo tradicionalEste modelo consiste en asignar una funcin a la propiedad onclick, onchange, del elementodel DOM

1 Click me2 Click me3 What is the time?56 Some Text78 window.onclick = myFunction;9 // If the user clicks in the window, set the background color of to ye\10 llow11 function myFunction() {12 document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";13 }

Eventos 74

Con este metodo slo podemos asignar UNA funcion a cada eventoEste metodo funciona igual en TODOS los navegadores

Modelo AvanzadoTambien podemos capturar eventos con el modelo avanzadoCon este metodo podemos asignar varias funciones a un mismo eventoEste modelo se aplica distinto segn el navegadorPara enganchar/desenganchar una funcion a un evento con este modelo se utiliza:

addEventListener y removeEventListener en Firefox, Opera y Safari (W3C way)Le pasamos 3 parametros:

1. Tipo de Evento : click, change,2. Funcion a ejecutar (handler, callback) : Recibe un objeto e con info sobre el evento

En e.target tenemos el elemento que lanz el evento3. Utilizo Capturing? : Poniendolo a false utilizariamos slo Bubbling

attachEvent y detachEvent en IE (Microsoft way)Le pasamos 2 parametros:

1. Tipo de Evento: onclick, onchange,2. Funcion a ejecutar (handler, callback): Para acceder a la info del evento hay quemirar

el objeto global window.eventEn event.srcElement tenemos el elemento que lanz el evento

18.2 Deteniendo el flujo de los eventosAlgunos elementos tienen un comportamiento por defecto (por ejemplo al hacer click sobre unlink nos lleva a su URL).Esta accin por defecto se ejecuta al final (si tenemos otras funciones asignadas al evento)Para desactivar la accin por defecto utilizamos el metodo e.preventDefault(). En IE pondria-mos a false la propiedad returnValue de window.eventPodemos detener la propagacion del evento con el metodo e.stopPropagation()En IE pondriamos a true la propiedad cancelBubble de window.eventCuando la funcin asignada al evento devuelve false se aplica automaticamente e.preventDefault()y e.stopPropagation()

18.3 Delegacin de eventos

Eventos 75

..

Gestin de eventos vs Delegacin de eventos | anieto2k.com JavaScript Event Delegation is Easier than You Think | sitepoint.com

Aprovechando el bubbling y la deteccion del target podemos optimizar (en algunos casos)nuestra gestin de eventos con la delegacin de eventosPara el caso en que tengamos que capturar los eventos de muchos elementos (por ejemplo losclicks en celdas de una tabla), podemos capturar el evento de su contenedor (la tabla) y detectarluego cual de sus hijos (qu celda) provoc el evento,Las principales ventajas de este sistema son:

Hay muchas menos definiciones de eventos: menos espacio en memoria y mayor perfor-mance

No hay que re-capturar los eventos de los elementos aadidos dinamicamente

18.4 Eventos con jQuery

..

Events | api.jquery.com Events and Event Delegation | jqfundamentals.com

Con jQuery podemos realizar nuestra gestion de eventos sin tener que preocuparnos de lasdiferencias entre navegadores:

$().bind() y $().unbind()El addEventListener/removeEventListener cross-browsing

1 .bind( eventType, [ eventData ], handler(eventObject) )2 .unbind( [ eventType ], [ handler(eventObject) ] )

El handler recibe un objeto event propio de jQueryLos tipos de eventos que podemos capturar son blur, focus, focusin, focusout, load, resize,scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave, change, select, submit, keydown, keypress, keyup, errorTambien podemos crearnos nuestros propios tipos de eventos

$().on() y $().off()El $().bind()/$().unbind() cross-functional

Eventos 76

1 .on( events [, selector ] [, data ], handler )2 .off( events [, selector ] [, handler ] )

$().trigger()Nos permite ejecutar todos los handlers asociados a un evento

1 .trigger( eventType, extraParameters )

$().toggle()Adjunta varias funciones a un elemento que seran ejecutadas en sucesivos clicks

1 .toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ]\2 )

event.preventDefault()El e.preventDefault cross-browsing

event.stopPropagation()El e.stopPropagation cross-browsing

event.stopImmediatePropagation()Adems de hacer e.stopPropagation cross-browsing, detiene el resto de handlers asociados almismo evento

event.targetEl e.target (elemento que provoc el evento) cross-browsing

event.typeEl tipo de evento lanzado

19. JSON

..

Introduccin a JSON | json.org Tutorial JSON | etnassoft.com JSON and JSONP | Angus Croll blog Toma de contacto con JSON | anieto2k.com

1 {2 "name": "Eric Clapton",3 "occupation": "Guitar Hero",4 "bands": ["Cream", "Blind Faith"]5 }

JSON (Javascript Object Notation) es un formato de intercambio de datos basado en la notacinliteral de Javascript para la representacin de objetos, arrays, cadenas, booleanos y nmerosVentajas de este formato de datos frente a XML:

Ms ligero (su estructura necesita menos elementos que XML) por lo que es ideal parapeticiones AJAX

Ms fcil de transformar a objeto Javascript (con eval se haria directo)

Particularidades del formato JSON frente a la notacin literal de Javascript:

Los pares nombre-valor van siempre con comillas dobles JSON puede representar 6 tipos de valores: objetos, arrays, nmeros, cadenas, booleanos ynull

Las fechas no se reconocen como tipo de dato Los nmeros no pueden ir precedidos de 0 (salvo los decimales)

Las cadenas JSON deben ser convertidas a objetos Javascript para poder utilizarlas (y viceversa).Para ello podemos utilizar:

eval(): No se recomienda utilizarlo directamente JSON.parse: Convierte una cadena JSON en un objeto Javascripthace eval pero comprueba el formato antes de hacerlo

JSON.stringify: Convierte un objeto Javascript en una cadena JSON jQuery.parseJSON: con jQuery tambin podemos hacer el parseo del JSON

El objeto JSON est disponible de forma nativa en los navegadores compatibles con ECMAScript5

77

JSON 78

1 >>> JSON.parse('{"bar":"new property","baz":3}')2 Object { bar="new property", baz=3}

1 >>> JSON.stringify({ breed: 'Turtle', occupation: 'Ninja' });2 "{"breed":"Turtle","occupation":"Ninja"}"

20. AJAX

..

Ajax: A New Approach to Web Applications | 18/02/2005 Jesse James Garrett (adaptive-path.com)

Agrupa un conjunto de tecnologias cuyo eje central son las peticiones asincronas al servidor atraves del objeto XMLHttpRequest() (XHR)La aplicacin de esta tcnica dio lugar a las llamadas aplicaciones AJAX, donde no es necesariorefrescar la pagina para obtener nuevo contenido.

AJAX

AJAX son las siglas de Asynchronous JavaScript + XML:

79

AJAX 80

Asynchronous porque despues de hacer una peticion HTTP no necesita esperar a unarespuesta, sino que puede seguir haciendo otras cosas y ser notificado cuando llegue larespuesta

JavaScript porque creamos los objetos XHR con Javascript XML porque inicialmente era el formato standard de intercambio de datos. Actualmenteuna peticin HTTP suele devolver JSON (o HTML)

La mayor limitacin de una peticin AJAX es que no puede acceder a datos de un dominiodiferente al que estamos (cross-domain)Pero hay maneras de solucionar este problema: JSONP y CORS

20.1 Haciendo la peticin

..

XMLHttpRequest | MDN Using the XML HTTP Request object | http://jibbering.com/

1 var xhr = new XMLHttpRequest();2 xhr.onreadystatechange = myCallback;3 xhr.open('GET', url, true);4 xhr.send('');

Las peticiones AJAX las hacemos a traves de objetos XHR.Para crear un objeto XHR utilizamos el objeto XMLHttpRequest() que es nativo en IE7+, Safari,Opera y Firefox

1 var xhr = new XMLHttpRequest();

Una vez creado el objeto XHR, capturamos el evento readystatechange de este objeto y leenganchamos una funcin.

1 xhr.onreadystatechange = myCallback;

Despues hay que llamar al metodo open() pasandole los parametros de la peticion

1 xhr.open('GET', 'somefile.txt', true);

El 1er parametro es el tipo de peticion (GET, POST,). El 2 parametro es la URL El 3er parametro indica si la peticin es asncrona (true) o sncrona (false)

Despues hay que llamar al metodo send() para hacer la peticin

AJAX 81

1 xhr.send('');

20.2 Procesando la respuesta1 function myCallback() {2 if (xhr.readyState < 4) {3 return; // not ready yet4 }5 if (xhr.status !== 200) {6 alert('Error!'); // the HTTP status code is not OK7 return;8 }9 // all is fine, do the work10 alert(xhr.responseText);11 }

El objeto XHR tiene una propiedad llamada readyState y cada vez que cambia esta propiedadse dispara el evento readystatechangeLos posibles valores de readyState son:

0uninitialized 1loading 2loaded 3interactive 4complete

Cuando readyState llega a 4 significa que ya se ha recibido una respuestaUna vez hemos recibido la respuesta hay que chequear el estado de la misma en la propiedadstatus del objeto XHREl valor que nos interesa para esta propiedad es 200 (OK)

20.3 AJAX con jQuery

AJAX 82

1 $.ajax({2 url: 'ajax/test.html',3 success: function(data) {4 $('.result').html(data);5 alert('Load was performed.');6 }7 });

Con jQuery podemos realizar nuestra peticin por AJAX con el metodo $.ajax()El metodo $.ajax() devuelve un objeto jqXHR que viene a ser una version mejorada del objetonativo XMLHttpRequest

Parame