Libro Js

Introduccin a la programacin con
javascript desde cero.
Versin 0.47
Temario
1. Introduccin
1. Motivacin
2. Requerimientos bsicos
3. Breve historia de javascript
4. Cmo sacarle provecho al libro?
5. Lenguajes de programacin interpretados
2. Herramientas
1. El inspector de elementos
2. El editor de texto
3. Variables
1. Declaraciones y asignaciones
2. Memoria Dinmica
3. Comentarios
4. Tipos de datos
4. Operadores
1. Operadores aritmticos
2. Operadores de asignacin
3. Operadores lgicos
5. Condiciones
1. If, else if, else
2. Ifs anidados
3. Lgica booleana
4. Operador ternario
6. Ciclos
1. For
2. While
3. Do While
4. Validacin de entradas
5. Break, continue
7. Ciclos anidados
8. Funciones
1. Introduccin a funciones
2. Definicin
3. Nombres
4. Retorno
5. Parmetros
6. Ambito o Scope de las variables
7. Funciones de primera clase
8. Funciones annimas
9. Arrays
1. Mtodos comunes
2. Mutabilidad
3. Mtodos tiles pero no 100% soportados
4. Lowdash y underscore
5. Copia de arrays
10. Objetos
1. Objetos literales
2. Agregando propiedades a un objeto.
3. El operador this
4. El objeto Window
11. Funciones avanzada
1. Funciones autoejecutables
2. Funciones recursivas
3. Closures
4. Patrn Mdulo
12. Los prototipos
1. Funcin constructora
2. Prototupis
13. Javascript y HTML
1. Estructura de un proyecto web
2. El objeto document
3. Encontrando elementos HTML (id, tag o clase)

4. InnerHTML
14. Eventos en javascript
1. Manejando eventos
2. El evento onClick
3. El evento onChange
4. El evento onInput
5. window.load
6. Bubbling
15. Formularios.
1. El evento onSubmit
2. Regex
16. Ajax
1. XMLHttpRequest object
2. Mtodos GET / POST
3. JSON
17. Introduccin a jQuery
1. $()
2. Selectores
3. Traversing
18. Eventos en Jquery
1. Eventos
2. Document ready
19. Ajax con Jquery
Captulo 1
Introduccin.
Motivacin
Difcilmente existe un lenguaje ms importante para la programacin de sitios web que Javascript, segn w3techs
Javascript es utilizado en el 89.9% de los sitios web del mundo y no existe ningn indicio de que esta tendencia
vaya a disminuir en el mediano plazo.
Este libro busca entregar las bases para entender y poder utilizar javascript para la construccin de sitios web
interactivos.
Es este libro para mi?

Si has construido pginas web previamente y copiaste y pegaste javascript dentro del sitio sin entenderlo, este
libro es para ti, para que entiendas como funciona javascript y tengas las herramientas para modificar los scripts
que copias y crear tus propios script.
Si ya tienes experiencia con javascript pero no eres un experto puedes partir desde el captulo 8.
Requerimientos bsicos
Para seguir este libro se necesitan conocimientos bsicos de HTML y CSS. Conocimientos previos de
programacin son deseables pero no estrictamente necesarios.
Breve historia de javascript

Javascript, comnmente abreviado como JS, es un lenguaje de programacin inventado por Brendan Eich en
Netscape en 1995.
Este lenguaje tiene el honor de ser uno de los ms extendidos del mundo, se encuentra en la mayora de los
sitios web, y tambin, gracias a nuevas implementaciones como node.js, es posible utilizar javascript del lado del
servidor e incluso para construir aplicaciones para escritorio.

De las caractersticas del lenguaje cabe destacar que orientado a objetos, basado en prototipos, funcional e
imperativo y de tipeo dbil, si todava no sabes que son todas estas cosas no te preocupes las estudiaremos a
continuacin.
Cmo sacarle el mximo provecho al libro?

Cada captulo tiene una seccin de preguntas, esas preguntas no son complejas y es posible contestarlas
nicamente con compresin de lectura de este libro, se recomienda no dejar ninguna pregunta sin contestar.
Este libro se ha escrito sin rodeos, los captulos son cortos y van directo a lo importante.
Antes de empezar a hablar de Javascript es necesario hacer una pequea mencin de como funcionan los
lenguajes de programacin, esto nos ayudar a obtener los mapas mentales necesarios para entender como
funciona javascript y poder escribir nuestros cdigos.
Cmo la computadora es capaz de entender un

lenguaje de programacin?
Una computadora no funciona muy distinto a una calculadora, toda computadora tiene un set de instrucciones
que es capaz de seguir, esas instrucciones son del tipo, sumar, restar, mover bits, mover tal cosa a tal punto de la
memoria, etc
Los programadores no pueden escribir directamente esas instrucciones puesto que para que las entienda tienen
que estar escritas en lenguaje mquina, entonces lo que se hace es escribir un cdigo fuente en un lenguaje de
programacin y para que un computador pueda entender un set de instrucciones en el lenguaje escrito tiene que
ocurrir una de dos cosas.
1) El programa escrito debe poder transformarse de forma previa a lenguaje mquina, a este proceso se le
conoce como compilacin, o
2) El cdigo fuente debe poder ser interpretado en tiempo real y ese interprete convierte las instrucciones a
lenguaje mquina.
Programas compilados
Si alguna vez has visto un archivo de extensin .exe claramente has visto un programa compilado, ahora no slo
existen para Windows, existen para casi todas los sistemas operativos.
Compilar el programa previamente vs interpretarlo en tiempo real tiene mltiples ventajas, una de ellas es el la
velocidad de ejecucin, pero eso no quiere decir que siempre sea la mejor forma.
La desventaja de este proceso es que cada mquina es distinta y se requiere compilar un programa para cada
mquina distinta o con sistema operativo distinto.
Programas interpretados
Interpretar un programa requiere de un interprete que recibe el nombre de cliente y es capaz de traducir en
tiempo real el cdigo escrito por una persona a lenguaje mquina.
La ventaja de los programas interpretados es que si existe el interprete para la plataforma tu programa correr en
esa plataforma. La desventaja es que ser ms lento que un programa compilado.
Javascript
Javascript es uno de los lenguajes interpretados ms famosos del mundo y con una gran ventaja por sobre otros
lenguajes interpretados, el interpretador es el navegador y por lo tanto no requiere que el usuario instale ningn
programa especial para ejecutar los cdigos enviados, hacindolo un muy buen lenguaje de programacin
multiplataforma especialmente para la web.
Los programas escritos en javascript pueden ser ledos directamente en el navegador, cabe sealar que si se
pueden hacer programas en javascript para escritorio o para servidores, estos tema no lo discutiremos en este
libro pero puedes aprender ms sobre javascript para lado servidor o para programas de escritorio buscando
sobre node.js
Preguntas
Para qu sirve Javascript?
Cules son las diferencia entre un programa compilado y uno interpretado.
Javascript es interpretado o se compila?
Qu es el cdigo fuente?
Qu programa lee Javascript?
Captulo 2
Herramientas
El inspector de elementos
Para apoyar el desarrollo de proyectos en Javascript muchos navegadores como Chrome o Mozilla Firefox tienen
inspectores de elementos, este inspector permite revisar paso a paso las instrucciones que est corriendo
Javascript y poder investigar las causas de errores. Al proceso de investigar y eliminar errores se le denomina
debugging (de-bug),
En Chrome podemos abrir el inspector de elementos con un click derecho y seleccionando la opcin inspector de
elementos y luego seleccionando el tab console.
Otra opcin para abrir la consola de javascript es en la barra de tareas view >> developer >> javascript console
La consola de javascript permite ejecutar directamente cdigo javascript en el navegador, la primera seccin de
este libre puede ser probada directamente de esta forma sin necesidad de un editor de texto.
Modo network
Dentro del inspector de elementos trabajaremos principalmente con el tab Console pero el tab Network nos
servir tambin para aprender un poco ms sobre javascript en la web.
Si abrimos el tab network y luego entramos en una pgina (tiene que ser en ese orden, si lo abrimos despus no
funciona y hay que recargar la pgina) observaremos que todos los archivos que nos enva un servidor, esos
archivos sern el HTML, muchos archivos CSS y muchos archivos JS y adems imgenes.
Modo cdigo fuente

Es muy importante tener en cuenta que cuando un servidor enva una pgina web enva todos los cdigos, tanto
los HTML, los CSS y los JS, por lo tanto no tiene sentido ocultar una password en un javascript, porque puede
ser visto y fcilmente hackeado.
Adems es posible ver el cdigo fuente de cualquier pgina web, basta que entres, vayas a
view->developer->view source y podrs clonar el front-end de cualquier pgina web.
El inspector de elementos ser uno de tus mejores amigos durante el desarrollo de un script, nos
permite hacer pruebas rpida y debugging del proceso.
Qu es el desarrollo de front-end?
El desarrollo web front-end tiene 3 capas que consisten en la construccin de HTML, CSS y JS, la imagen a
continuacin ilustra.
Con javascript podemos:

1. Realizar clculos matemticos
2. Operar sobre el HTML y CSS cambiando sus propiedades
3. hacer llamados asncronos a un servidor sin tener que recargar la pgina.
Todo lo anterior le dar interactividad a la pgina.
Cmo protejo mi pgina?

No puedes, por lo menos no en el sentido de no enviar la pgina web, es posible ofuscar el cdigo web, o sea
hacerlo ilegible al ojo humano, pero no es de mucho ayuda y es un proceso reversible adems que puede generar
complicaciones con algunos scripts de javascript.
Lo importante es entender que slo se puede copiar el front, o sea puedes copiar todo el estilo e imgenes de
Facebook, pero slo lo que cargaste, no tienes acceso a los datos y al como se maneja la lgica de esos datos.
A los programadores de estas secciones se les conoce como programadores back-end.
El editor de texto
A pesar de que a travs de la consola del navegador podemos ejecutar directamente cdigo javascript, esta forma
no nos permite poder guardar nuestros cdigos y ms adelante compartirlos o utilizarlos en nuestro proyecto.
Para escribir javascript podemos crear un archivo .js y poner todo el cdigo dentro del archivo, o podemos crear
un archivo html y dentro de la etiqueta <script> </script> escribir nuestros cdigos.
Para escribir los cdigos podemos ocupar un editor rstico como el famoso block de notas de windows, pero es
mejor ocupar un editor con resaltado de sintaxis y con autocompletado que nos ayude a trabajar mejor y ms
rpido.
Por lo mismo se recomienda utilizar los editor de sublime text 3 o Atom, ambos muy buenos y potentes.
Mi primer javascript
Podemos crear nuestro primer proyecto javascript dentro de un archivo HTML.
Para eso abriremos el editor de texto crearemos un archivo llamado miprimerjs.html y luego dentro
escribiremos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
alert("hola");
</script>
</body>
</html>
Finalmente abriremos el archivo con el navegador para observar los resultados.
Alert es una funcin incorporada en javascript que permite levantar un popup bien molesto que interrumpe al
usuario dicindole "hola", no es bueno utilizarla para la construccin de un sitio web pero es la tcnica ms
rudimentaria para debugging.
Otra opcin en lugar de ocupar alert consiste en ocupar console.log, esta permite mostrar dentro del tab console
del inspector de elementos el output esperado.
O sea el cdigo:
1
2
3
<script>
console.log("hola mundo");
</script>
Mostrara hola mundo.

A partir de ahora el lector es libre de copiar los cdigos de javascript dentro de las etiquetas script o puede
ejecutarlo directamente en el tab console del navegador de chrome o firefox. Lo segundo es ms fcil de probar
pero no dejar un registro claro de lo que haya hecho y los apuntes podran ser valiosos para repasar.
Preguntas
Cul es la diferencia entre un desarrollador back y uno front?
Para qu sirve el tab console del inspector de elementos?
Para qu sirve el modo network?
Desafo
Utiliza lo aprendido en este captulo para copiar una pgina web que te guste.
Captulo 3
Variables:
Las variables son contenedores para asignar o guardar datos, se les denomina variables puesto que estos
contenedores pueden cambiar de contenido. A los contenedores que no pueden cambiar el contenido se les
denomina constantes.
Una variable tiene se compone de:
Un identificador
Un valor.
Declaraciones y Asignaciones de variables

Cuando uno asigna el identificador a la variable se le llama declaracin, un ejemplo de esto sera:
var variable; y cuando uno les da un contenido se le llama asignacin, la asignacin de contenido se
hace a travs del operador = , por ejemplo:
var a = "Hola";
Una pregunta interesante sera, Por qu Hola est envuelto en comillas? Esto se debe a que es un string, o sea
una secuencia de caracteres que no es una variable y javascript lo necesita para poder diferenciarlo de un
identificador, para entender esto mejor veamos el siguiente ejemplo:
1
2
var a = "Hola";
var b = a;
Como el identificador a tiene el valor de "Hola" al asignar b al valor de a, lo que estamos haciendo es decir que
ahora b tendr el valor de hola. Lo puedes probar tu mismo escribiendo console.log(b)
Aqu descubrimos otra cosa, el cdigo se lee linealmente, o sea primero javascript procesa el valor de a y luego el
valor de b, de otra forma no sabra que b tiene el valor de "hola"
Adems es importante destacar que una variable puede ser declarada sin una asignacin, ejemplo de esto sera:
var sin_asignar;
Si ahora mostramos con console.log(sin_declarar) obtendremos como resultado undefined.

Otra pregunta interesante sera Qu sucedera si hacemos esto sobre algo que no est declarado? ejemplo:
console.log(no_definido) , en este caso obtendremos un error de una referencia no definida.
Preguntas:
Antes de seguir avanzando en el libro deberas ser capaz de contestar las siguientes preguntas:
Cul es la diferencia entre asignacin y declaracin?
Se puede asignar una variable sin declararla?
Se puede declarar una variable sin asignarla?
Cul es la diferencia entre una variable y un string?
Que valor tiene una variable que no ha sido asignada?
Comentando el cdigo
Antes de seguir hablando de variables vamos a hacer una pausa para hablar de comentarios, Los comentarios son
lneas de cdigo que estn en el cdigo pero que no se ejecutan.
Se pueden hacer 2 tipos de comentarios, de una lnea o de multiples lneas:
Comentarios de una lnea

1
2
// Todo lo que se encuentra despus de // no ser ejecutado.

console.log("ESTO SI SE EJECUTARA!")
Comentarios de mltiples lneas

1
2
3
4
5
6
7
/*
Todo lo que se encuentre entre /* y */ no se ejecutar,
pero lo que se encuentre antes de /* y despus de */ si se ejecutar
ejemplo:
console.log("Esta lnea NO se ejecuta)"
*/
console.log("Esta lnea si se ejecuta")
Probando lo aprendido
1
2
3
4
5
var a = 2;
/*
a = 3
*/
console.log(a)
Cul ser el output en la consola?, 2 o 3?
Tipos de datos
En el captulo anterior mencionamos que las variables eran contenedores de datos, estos contenedores no son
genricos, de hecho hay tipos de contenedores y dentro de estos se incluyen:
1. Number
2. String
3. Boolean
4. Array
5. Object
Numbers
Number hace referencia a un nmero. Para guardar un nmero en una variable escribimos la instruccin:
var num = 2;
Donde se asignar el nmero 2 a la variable num. Podemos probar que esto efectivamente es as escribiendo
console.log(typeof(num)); typeof(num) devuelve el tipo de dato del elemento pasado como
argumento, o sea lo que est entre los parntesis.
En el caso anterior la respuesta ser Number.
Los decimales como 3.8 y los nmeros negativos pertenecen tambin al tipo Number, es importante tener en
cuenta que los nmeros decimales ocupan el caracter punto como separador y no una coma.
String
El tipo de dato String hace referencia a una cadena de caracteres o palabras, si queremos almacenar un String en
una variable ejecutamos la instruccin:
var palabra = "Hola mundo";
Donde "Hola mundo" es el dato que se asigna a la variable "palabra". Notar que Hola mundo se encuentra
entre comillas, esto quiere decir que este tipo de dato es un String.
Tambin podemos poner dentro de un string nmeros, ejemplo var s = "Hola21" incluso podemos
tener un string que slo contenga un nmero, como por ejemplo var n = 20 . A simple vista no hay
mucha diferencia, pero al momento de comenzar con las operaciones numricas encontraremos
comportamientos extraos si asignamos a un nmero como un String. Por lo que los nmeros siempre los
asignaremos sin comillas.
Boolean
Este tipo de dato hace referencia a un valor que puede ser verdadero o falso, o bien tr ue o false. Estas variables
se utilizan por lo general como comparadores, o sea para verificar si se cumplen ciertas condiciones. Como por
ejemplo "El usuario es mayor de edad?".
Para asignar un tipo de dato Boolean a una variable basta con:
1
2
var positivo = true;

var negativo = false;
Hay que destacar que en este caso no se utiliza comillas para true o false y la razn es sencilla, es porque no son
Strings, son palabras reservadas de javascript para indicar los valores booleanos.
Array
Los Array son contenedores para mltiples datos, un array puede contener distintos tipos de datos, incluso
mezclados!, lo que puede eventualmente generar una confusin. Un arreglo puede contener Number, String,
Boolean, Object e incluso otros Array. Para definir un array:
var arreglo = [];
El parntesis de corchete indica a javascript que cree un arreglo vaco. Tambin pueden asignarse las variables de
manera inmediata:
var arreglo = [2, 3, "Hola", variable, false];
Es posible acceder a la informacin dentro de un arreglo ocupando su ndice, si utilizamos la definicin anterior
arreglo[0] tendr el valor 2.
Los ndices van desde cero y llegan a n - 1, donde n es la cantidad de elementos del arreglo
Veremos los arrays con ms detalle en un prximo captulo.
Objetos
Los objetos tienen propiedades y mtodos como en la vida real lo tendra un automvil, un automvil tiene
como propiedades color, marca, modelo entre otros. Mientras que tambin tiene los mtodos encender, apagar,
avanzar, retroceder, etc. Para definir un objeto escribimos:
var obj = {};
Esto definir un objeto vaco. Los objetos al igual que los array tienen su propia seccin en esta gua por lo que
profundizaremos ms adelante.
Memoria dinmica
Javascript es un lenguaje de memoria dinmica. A diferencia de otros tipos de lenguaje las variables en javascript
pueden cambiar el tipo de dato que guardan, o sea el cdigo a continuacin es perfectamente vlido.
1
2
3
var a = "hola";
a = 21;
a = true;
Los pros y contras de esto son bastante discutidos, pero lo que si es cierto es que es una posible causal de errores
y por lo mismo cuando programemos en javascript tenemos que ser extra cuidadosos.
Para poder visualizar el tipo de dato asignados a una variable utilizaremos la instruccin:
console.log(typeof(x));
Donde x es la variable en cuestin.
Preguntas
Antes de seguir avanzando deberas poder contestar las siguientes preguntas.
Cmo podemos verificar que -3.9 sea del mismo tipo de dato que 3.9?
Cul es la diferencia entre true y "true"?
Qu pasa con typeof(x) si x cambia de 1.0 a "hola", mantiene el tipo o lo cambia?
Puede un array guardar datos del mismo tipo?
Captulo 4
Operadores
Los operadores en javascript permiten como dice su nombre operar sobre los diversos tipos de datos ya sea
directamente o a travs de variables, los resultados de las operaciones los mostraremos en pantalla con
console.log() o con alert() o los asignaremos a otra variable para futuras operaciones.
Los operadores se dividen en:
1. Operadores aritmticos
2. Operadores de asignacin
3. Operadores lgicos
4. Otros operadores
Operadores aritmticos
Los operadores aritmticos en javascript sirven para poder realizar operaciones matemticas ya sea sobre
nmeros u otro tipo de dato.
Operador Suma
Para sumar datos ocuparemos el operador (+):
1
2
3
4
var
var
var
var
suma = 1 + 2;
a = 1;
b = 2;
c = a + b;
Una curiosidad del operador suma es que tambin sirve para strings, al sumar dos strings obtenemos un slo
string con el contenido de ambos.
ejemplo:
console.log("hola " + "mundo ");
Operador resta
Para sumar datos ocuparemos el operador (-):
1
2
3
4
var
var
var
var
resta = 3;
a = 3;
b = 4;
c = a - b;
Operador multiplicacin
Para multiplicar datos ocuparemos el operador (*), este funciona similar a los otros operadores de suma y resta:
1
2
3
4
var
var
var
var
multiplica = 3 * 4;
a = 3;
b = 4;
c = a * b;
Detalle importante respecto al operador multiplicacin, al igual que en las matemticas tradicionales tiene
precedencia, eso quiere decir que ocurre primero que la suma.
Ejemplo:
console.log(3 + 4 * 2);
Si la suma ocurriese primero, el resultado sera 7 * 4, o sea 12, sin embargo al igual que en las matemticas de
colegio, en una expresin sin parntesis la multiplicacin ocurre primero.
Operador Divisin
Para dividir datos ocuparemos el operador (/) Se comporta muy similar al operador de multiplicacin, y tiene la
misma precedencia.
1
2
3
4
5
var divide = 10 / 2;
var a = 10;
var b = 2;
var c = a / b;
// c tendra el valor de 5
Un detalle importante del operador divisin es que a diferencia de otros lenguajes devuelve la divisin exacta, o
sea:
1
2
console.log (3 / 2);
// Mostrara 1.5
En muchos otros lenguajes la divisin entre dos nmeros enteros tiene como resultado un nmero entero, pero
en javascript no existe el tipo de dato entero, slo existe el tipo de dato number y este se puede dividir sin
problemas.
Siendo un poco ms tcnico los numbers son puntos flotantes de 64 bits.
Operador mdulo
El operador mdulo es muy til para obtener el resto de las divisiones.
Para obtener el mdulo (%): var modulo = 10 % 2;
Un ejemplo con variables:
1
2
3
var a = 10;
var b = 2;
var c = a % b;
Operador de asignacin
El ms bsico de todos los operadores de asignacin ya lo hemos ocupado, es el operador = y permite asignar
un valor a una variable.
Operador incremento
Para incrementar el valor de una variable en 1 (++), ejemplo:
1
2
var a = 3;
a++;
Operador decremento
Para disminuir en 1 el valor de una variable (): nombreVariable;
1
2
var a = 3;
a--;
Recordatorio
Si no estas seguro de que el resultado de una operacin sea el correcto puedes imprimir los tipos de
datos con console.log()
Preguntas
Antes de seguir debes ser capaz de contestar las siguientes preguntas.
1. Qu obtienes al sumar 1 + "1"?
2. Qu obtienes al sumar "1" + "1"?
3. Qu obtienes al dividr 1 por 2?
4. Cul es el resultado de 1+2*3?
5. Qu es la precedencia de operadores?
Operadores de Comparacin
Sirven para poder realizar comparaciones entre las variables que se estn comparando, como resultado
devuelven un booleano que puede ser true o false.
Comparacin de igualdad
Igual a, se hace con (==) Ejemplo:
1
2
3
4
5
6
3 == 4;
// devuelve false
3 == 3;
// devuelve true
3 == "3"
// devuelve true
Comparacin de tipo
Esto lo podemos lograr con ocupando typeof()
typeof(3) == typeof("3");
Comparacin de igualdad y tipo

Exactamente igual, se hace con (===) Ejemplo:
1
2
3
3 === "3";
// devuelve false
3 === 3; // devuelve true
Operador Distinto
Devuelve true cuando las expresiones a sus lados son diferentes. Ejemplo:
1
2
3
4
3 != 3;
// devuelve false
3 != 4;
// devuelve true
Operador distinto y distinto tipo

Devuelve true cuando las expresiones a sus lados son diferentes, aunque esta diferencia sea slo en el tipo.
Por ejemplo si comparamos:
1
2
3
4
3 !== "3";
// devuelve true
3 !== 3;
// devuelve false
Operador Mayor (>)

1
2
3
4
3 > 2;
// devuelve true
3 > 4;
// devuelve false
Operador menor (<)

1
2
3
4
3 < 2;
// devuelve
false 3 < 4;
// devuelve true
Operador mayor o igual (>=)

1
2
3
4
3 >= 3;
// devuelve true
3 >= 4;
// devuelve false
Menor o igual (<=)

1
2
3
4
3 <= 3;
// devuelve true
3 <= 2;
// devuelve false
Combinemos lo aprendido
Que pasara si escribimos en la consola?
var a = 3 > 5;
Operadores lgicos
La lgica booleana que utilizaremos en javascript es la misma de las tablas de verdad que se aprende en el colegio.
El operador and
Simbolizado por &&, permite obtener el resultado de una interseccin logca. Para refrescar la memoria los
resultados se ilustran en la siguiente tabla:
Tabla de verdad del operador &&

1
2
3
4
verdadero y verdadero => verdadero

verdadero y falso => falso
falso y verdadero => falso
falso y falso => falso
El operador or
Simbolizado && permite obtener el resultado de la operacin de la nion lgica.
Tabla de verdad del operador ||

1
2
3
4
verdadero o verdadero => verdadero

verdadero o falso => verdadero
falso o verdadero => verdadero
falso o falso => falso
El operador not (!)

Invierte el valor, transforma verdadero en falso y falso en verdadero.
Tabla de verdad del operador !

1
2
!verdadero => falso

!falso => verdadero
Pregunta rpida
1
2
3
a = false;
console.log(!a)
// Cul es el valor mostrado en pantalla ?
Otros operadores
Concatenacin
La concatenacin permite unir 2 strings como si fuesen slo uno. esto ya lo vimos previamente pero es bueno
reforzarlo
1
2
3
var a = "Hola ";

var b = "mundo ";
var c = a + b; // Hola mundo
La variable c del ejemplo anterior, si la imprimimos en la consola mostrar "Hola mundo", debido a que las
variables a y b fueron concatenadas.
Hay un detalle muy importante de la concatenacin que es la causa de muchos errores, la suma de un entero con
un string tiene como resultado un string, o sea.
1
2
console.log(1 + "1")
// mostrar 11
La forma de lidiar con esto se le llama parsing, que es convertir un dato de un tipo en otro tipo (no es cambiar el
valor, es cambiar el tipo). La funcin parseInt es capaz de convertir un string en un integer que represente el
mismo valor, ejemplo de uso:
1
2
3
4
var a = parseInt("1");
var b = 1;
console.log(a + b);
// mostrar 2
Fallando en el parsing
Cuidado
Debemos tener mucho cuidado al hacer parseo, por ejemplo al convertir a nmero algo que no sea
posible convertirse.
Al hacer comparaciones de este tipo obtendremos errores complejos de controlar.
En el caso anterior se entiende fcilmente lo que est mal, pero en un programa grande puede llegar a ser difcil
encontrar estos problemas.
NaN
NaN es un valor que sirve para representar algo que no es un nmero, por si solo rara vez se usa, pero es posible
obtenerlo de una operacin, por ejemplo al hacer parseInt("hola")
Para trabajar con este valor existe la funcin isNaN que nos devuelve true o false dependiendo de si el
argumento es o no es un nmero
isNaN
resultado
isNaN(123)
false
isNaN(-1.05)
false
isNaN(5-2)
false
isNaN(0)
false
isNaN(123)
false
isNaN()
false
isNaN(true)
false
isNaN(2015/09/03)
true
isNaN(Hello)
true
isNaN(undefined)
true
isNaN(NaN)
true
isNaN(NaN)
true
isNaN(0 / 0)
true
Preguntas
Antes de seguir debes ser capaz de contestar las siguientes preguntas.
1. Qu obtienes al sumar 1 + parseInt("1")?
2. Qu obtienes al sumar 1 + parseInt("hola")?
3. Cul es el resultado al sumar 1 + parseInt("hola")?
Captulo 5
Condiciones
Las condiciones en javascript sirven para poder tomar decisiones en cuanto al cdigo que se escribe, lo que
hacen es ramificar el cdigo, y la secuencia deja de leerse linealmente, y pasa a leerse dependiendo de la rama
if
if es la condicin ms sencilla, veamos un ejemplo:
1
2
3
4
var edad = 14;

if (edad > 18){
console.log("Eres mayor de edad");
}
En ese caso todo lo que est dentro de las llaves {} slo se ejecuta si se cumple la condicin.
Lo que recibe la expresin if es un valor booleano, puede ser true o false, si es true se ejecuta, si es false no lo
hace.
else
En algunos casos necesitamos ejecutar un cdigo slo si la condicin no se cumple, para eso la instruccin else
viene al rescate.
1
2
3
4
5
6
7
8
9
var edad = 14;

if (edad > 18) {
console.log("Eres mayor de edad");
}
else {
console.log("Eres menor de edad");
}
console.log("Este cdigo se ejecuta independiente
de si eres mayor de edad o menor");
else if vs doble if
Existe un punto medio entre el if y else, se llama else if, esta condicin se evala siempre y cuando el if anterior
o el else if anterior devuelvan false.
Para ilustrarlo esto veamos un ejemplo sencillo, queremos determinar si una persona es nio, adolescente, adulto.
1
2
3
4
5
6
7
8
9
10
11
12
var edad = 5;
if (edad < 13) {
console.log("es nio");
}
if (edad < 18 ){
console.log("Es adolescente");
}
else {
console.log("Es adolescente");
}
En el cdigo anterior si una persona tiene 12 aos, entonces se mostrar en pantalla que es nio, pero adems se
mostrar que es adolecente, puesto que ambos if se evaluan, para evitar este tipo de situaciones existe el else if
1
2
3
4
5
6
7
if(edad < 13) {

console.log("es
} else if(edad < 18
console.log("Es
} else{
console.log("Es
}
nio");
){
adolecente");
adolecente");
La instruccin else if slo se evala si la condicin anterior no se cumple, y el else slo se evala si ninguna de
las condiciones anteriores se cumple.
ifs anidados
Es perfectamente posible tener un if dentro de un if, supongamos que queremos revisar si una persona es mayor
de 18 y es zurdo eso lo podemos hacer de la siguiente forma:
1
2
3
4
5
6
7
var edad = 30;

zurdo = true;
if (edad > 18){
if (zurdo == true){
console.log("Es zurdo y mayor de edad");
}
}
El problema de utilizar ifs anidados es que aumentan muchos las posibles rutas de cdigo lo que hace el cdigo
difcil de revisar, este tipo de situaciones puede ser mejorado con un poco de lgica booleana.
Lgica booleana para romper ifs anidados

Utilizando esa mismas tablas nosotros podemos remplazar los ifs anteriores ocupando:
1
2
3
if (edad > 18 && zurdo == true){

console.log("Es mayor de edad y zurdo");
}
En la lgica booleana debemos tener especial cuidado con el operador not, puesto que no (a y b) = no (a) o no
(b).
Ejercicios resueltos
El mayor de tres nmeros

Si se dan tres nmeros, a, b, c y se pide determinar al mayor, cmo lo podemos resolver?
Si bien es posible utilizar ifs anidados para resolverlo, vamos a utilizar lo aprendido para resolverlo de forma
inteligente.
1
2
3
4
5
6
if (a >= b && a >= c){

console.log("a es el mayor");
}
else if (b >= c){
console.log("b es el mayor");
}
7
8
9
else {
console.log("c es el mayor");
}
Se deja como tarea al lector resolver el mismo problema con ifs anidados, y un ejercicio no menos interesante es
hacerlo con cuatro nmeros.
Adems el cdigo anterior no determina correctamente el nmero mayor en caso que algunos sean iguales, ese es
otro ejercicio interesante que se deja de tarea.
Piedra papel o tijera

En esta versin del famoso juego de nios, dado dos valores que pueden ser piedra, papel o tijera hay que
determinar quien gana.
Las reglas del juego son muy conocidas pero las vamos a explicar igual
1. Piedra le gana a tijera, pierde contra papel.
2. Tijera le gana a papel, pierde contra piedra
3. Papel le gana a piedra y pierde contra tijera.
El secreto para resolver este problema es no complicarse innecesariamente, no necesitamos saber a quien le gana
y contra quien pierde, para determinar al ganador, slo tenemos que saber a que le gana a que y nuevamente, el
secreto es mantenerse alejado de los ifs anidados.
Combinaciones posibles
Entonces, dada dos variables, a y b que pueden contener los strings "piedra", "papel" o "tijera" tenemos 9
combinaciones posibles.
1. piedra vs piedra
2. piedra vs papel
3. piedra vs tijera
4. papel vs piedra
5. papel vs papel
6. papel vs tijera
7. tijera vs piedra
8. tijera vs papel
9. tijera vs tijera
Solucin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (a == "Piedra" && b == "Piedra"){

console.log("Empate");
} elsif (a == "Piedra" && b == "Papel"){
console.log("Gana Papel");
} elsif (a == "Piedra" && b == "Tijera"){
console.log("Gana Piedra");
} elsif (a == "Papel" && b == "Piedra"){
console.log("Gana Papel");
} elsif (a == "Papel" && b == "Papel"){
} elsif (a == "Papel" && b == "Tijera"){
console.log("Gana Tijera");
} elsif (a == "Tijera" && b == "Piedra"){
console.log("Gana Piedra");
} elsif (a == "Tijera" && b == "Papel"){
console.log("Gana Tijera");
} elsif (a == "Tijera" && b == "Tijera"){
Se deja de tarea realizar el mismo problema con ifs anidados, en este caso la solucn es ms corta, pero requiere
de un poco ms de anlisis.
Operador ternario
El operador ternario es otra forma de escribir if pero con menos cdigo, la lgica es la siguiente:
expresin booleana ? expresion1 : expresion2
1
2
3
edad = 19;
resultado = edad > 18 ? "es mayor de edad" : "no lo es";
// resultado muestra si
Captulo 6
Ciclos
Los ciclos, tambin conocidos como loops en ingls permiten ejecutar un bloque de cdigo un determinado
nmero de veces.
Para realizar los loops podemos ocupar la instruccin for o la instruccin while.
For
La sintaxis para el loop for es la siguiente:
1
2
3
for(var i = 0; i < 10; i++) {

console.log("Esto se imprimir 10 veces.");
}
Un for se compone de tres partes:

1. El valor inicial: La seccin var i = 0 es la primera condicin, indica que el loop comenzar desde 0.
La seccin i < 10 es la segunda condicin, indica que el bloque de cdigo se debe ejecutar siempre
que se cumpla esta condicin.
2. La condicin de mantencin: El loop se mantiene mientras se cumpla esta condicin, o sea en el ejemplo
mientras que i < 10
3. La seccin i++ indica que al terminar de ejecutar el bloque de cdigo, debe ejecutarse esta instruccin,
en este caso la instruccin es aumentar el valor en uno.
Sumatoria con For

Supongamos que queremos sumar todos los valores de 0 a 99 con un for, eso lo podemos hacer con:
var suma = 0:
for(var i = 0; i < 100; i++) {
2
3
4
suma += i;
}
Sumando slo los nmeros pares

Para hacerlo un poco ms difcil digamos que en este caso queremos sumar los primeros 100 nmeros, pero slo
si el nmero es par.
Los nmeros pares son todos aquellos divisibles por dos, para revisar esto ocuparemos el operador mdulo que
para obtener el resto de la divisin y compararla con cero, si no hay resto entonces el nmero es par, si hay resto
entonces es impar.
1
2
3
4
5
6
var suma = 0:
for(var i = 0; i < 100; i++) {
if (i % 2 == 0){
suma += i
;
}
}
Versin inteligente
En lugar de generar todos los nmeros si son pares o no, podramos generar exclusivamente nmeros pares,
cambiando la condicin de incremento.
1
2
3
4
5
var suma = 0;
for(var i = 0; i < 100; i = i + 2) {
console.log(i);
suma += i;
}
El secreto para ser un buen programador es hacer las cosas de la forma ms sencilla posible.
Ingresando elementos
For no solo sirve para sumar, es posible pedirle al usuario que ingrese n elementos para mostrarlos
1
2
3
4
5
var n = 5;
for(var i = 0; i < n; i++)
{
var ingreso = prompt("Ingrese un nmero");
}
Luego podemos utilizar la misma idea anterior para sumar los resultados (ya pronto podremos hacer cosas ms
interesantes que sumar)
1
2
3
4
5
6
7
var n = 5;
suma = 0;
for(var i = 0; i < n; i++)
{
var ingreso = prompt("Ingrese un nmero");
suma += ingreso;
}
Al correr el cdigo anterior si ingresamos los nmeros 1,2,3,4,5 obtendremos como resultado "012345"
Cmo podemos hacer para arreglarlo?
For sin condicin

Es posible quitarle la condicin de inicio, o la de incremento o la de cumplimiento a un for, para eso
simplemente no la ingresamos pero debemos poner el ;
for (var i = 0; i < 100; ) { console.log(i += 1) }
Cuando omitimos algunas de las condiciones, podemos dejar slo el ; en su lugar, pero debemos tener cuidado
de que el ciclo no sea infinito.
While
Otra forma similar para generar ciclos es con while, funciona de una forma muy similar y al igual que el for
tambin se ejecutar un nmero determinado de veces siempre y cuando se cumpla con una condicin. La
sintaxis para el ciclo while es la siguiente:
1
2
3
4
var i = 0;
while(i < 10) {
console.log("Esto se imprimir 10 veces.");
}
La principal diferencia con el ciclo for que vimos anteriormente es que debe indicarse cuanto vale i antes del
ciclo, adems debe manejarse que se realizar con i dentro del mismo ciclo.
La porcin de cdigo anterior se ejecutar 10 veces, ya que comenzar con i = 0 , y se aumentar su valor
en 1, finalmente, cuando i sea igual a 10, el loop terminar.
Do - while
Do while es similar a while, pero el ciclo siempre se realiza una vez antes de revisar la condicin, la sintaxis bsica
es:
1
2
do {
} while (condicin)
Esto es muy til para validar entradas, pro ejemplo supongamos que tenemos que hacer un programa donde el
usuario tiene que ingresar dos nmeros y luego debemos sumarlos:
1
2
3
4
5
6
7
8
9
10
11
12
var ingreso1;
var ingreso2;
do {
ingreso1 = prompt("Ingrese el primer nmero");
} while (isNaN(ingreso1));
do {
ingreso2 = prompt("Ingrese el segundo nmero");
} while (isNaN(ingreso1));
alert(parseInt(ingreso1) + parseInt(ingreso2));
Los ciclos anteriores se repetirn mientras el valor ingresado no sea un nmero.
Regla de transformacin:
Todo ciclo while puede ser transformado en un for y todo for en uno while, as como los ciclos do-while se
pueden transformar a while y for y viceversa.
Se deja como ejercicio al lector crear una versin del cdigo de las sumatoria y de la revisin de nmeros primos
utilizando while en lugar de for.
Antes de seguir leyendo deberas poder

contestar las siguientes preguntas
1. Qu problemas podramos tener si no validamos una entrada de datos?
2. Qu precauciones tenemos que tomar antes de convertir un do-while a un while
3. Qu pasa si dentro del for no ingresamos uno de las condiciones?, ejemplo (for var i = 0; ; i += 1)
Break: Terminando el ciclo antes de tiempo.

Los loops for y while se pueden terminar antes en cualquier momento con la instruccin break, esto
terminar la ejecucin del loop y continuar con el cdigo siguiente.
1
2
3
4
5
6
7
var i = 0;
while (i < 10){
if (i === 5){
break;
}
console.log(La variable i vale: + i); i++;
}
En el ejemplo anterior, el loop while terminar cuando i sea igual a 5, ya que se ejecutar la lnea donde se
encuentra break.
Continue: Pasando a la siguiente vuelta

En algunos casos si tenemos un ciclo complejo, la opcin continue nos puede ayudar, por ejemplo si tenemos un
calculo que es muy complicado pero para cierto nmero lo podemos omitir entonces ah es cuando continue nos
ayuda.
1
2
3
4
5
6
7
8
var j = 0;
for (var i = 0; i < 100; i ++){
if (i === 5){
continue;
}
j++;
console.log(i + "," + j)
}
Cuando i toma el valor de 5 las instrucciones de j++ y console.log no sern ejecutadas, a partir de la siguiente
vuelta j ya no estar en sincrona con i.
Veamos un ejercicio un poco ms complejo.
Revisando si un nmero es primo

Un clsico ejercicio de programacin universitaria es crear un pequeo algoritmo que determine si un nmero es
primo o no.
Los nmeros primos son todos aquellos que son nicamente divisibles por 1 y por si mismos.
Dado que los primos son aquellos que no son divisibles entonces lo que vamos a hacer es contar divisiones, si las
hay entonces el nmero no es primo.
Importante, partiremos 2 ya que el 1 siempre divide y no nos interesa contarlo y revisaremos hasta n - 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var numero_a_revisar = 11;

var cuenta_divisores = 0;
for (var i = 2; i < numero_a_revisar; i++)
{
// revisamos si el nmero es divisible
if (numero_a_revisar % i == 0){
cuenta_divisores++;
}
}
if (cuenta_divisores > 0){
console.log("el nmero no es primo");
} else{
console.log("el nmero es primo");
}
Ciclos anidados
As como los ifs se pueden anidar, los ciclos tambin se pueden anidar, esto tiene bastante utilidades, la principal
de ellas es manejos de matrices.
Es muy cierto que hasta este momento el principal uso que le hemos dado a los ciclos es para clculos
matemticos, pero no es el nico. Eventualmente tendremos arrays con informacin que sacaremos de bases de
datos y en ese caso tendremos que iterar con for o while para mostrar todos sus valores, hasta entonces los casos
prcticos que hagamos sern con nmeros y dibujos.
y hablando de dibujos vamos por nuestro primero dibujo.
Dibujando un bloque de *
En este ejercicio dibujaremos un cuadrado de tamao 5 con *, o sea sern 5 * de lado y 5 de alto.
La solucin ms evidente es:
1
2
3
4
5
console.log("******");
Pero Cmo podemos hacerlo para dejarlo parametrizado?, o sea que el resultado dependa del input del usuario
el tamao de nuestro cuadrado.
Solucin paramtrica
Supongamos que no nos interesa el tamao del lado, vamos por un momento a preocuparnos nicamente de la
altura.
Entonces podramos parametrizas la solucin de la siguiente forma:
1
2
3
4
var size = 5;
for (i = 0; i < size; i ++){
}
Ahora lo que tenemos que resolver sabemos que est dentro del for, para eso vamos a imprimir los * de dentro
del for de a uno.
1
2
3
4
5
6
var size = 5;
for (i = 0; i < size; i ++){
for (j = 0; j < size; j++){
console.log("*");
}
}
El problema de la solucin anterior es que nos arroja una sola lnea de *, 25 veces debido a que console.log
tambin imprime el salto de lnea, pero eso lo podemos solucionar concatenando los strings e imprimindolos
una sola vez.
1
2
3
4
5
6
7
8
var size = 5;
for (i = 0; i < size; i ++){
asteriscos = "";
for (j = 0; j < size; j++){
asteriscos += "*";
}
console.log(asteriscos);
}
En chrome la solucin no se ve muy elegante porque la agrupa, pero si indicamos el piso de la torre se ver
mejor.
1
2
3
4
5
6
7
8
9
10
11
12
13
var size = 5;
for (i = 0; i < size; i ++){
asteriscos = "";
for (j = 0; j < size; j++){
asteriscos += "*";
}
console.log(i + " - " + asteriscos);
}
/*
0 - *****
1 - *****
2 - *****
14
15
16
3 - *****
4 - *****
*/
Ups, ahora nuestra torre est invertida, el piso 0 est arriba, podemos invertir el indice restndoselo al tamao.
Este tipo de soluciones cuesta verlos al principio pero despus de mucha prctica ocurren de forma instantnea.
1
2
3
4
5
6
7
8
var size = 5;
for (i = 0; i < size; i ++){
asteriscos = "";
for (j = 0; j < size; j++){
asteriscos += "*";
}
console.log(size - i + " - " + asteriscos);
}
El problema de la media pirmide.

Vamos a complicar un poco ms el caso anterior, ahora en lugar de dibujar un cuadrado vamos a dibujar una
pirmide.
La pirmide que vamos a dibujar tiene la siguiente forma:
1
2
3
4
5
*
**
***
****
*****
Antes de ponernos a escribir cdigo tenemos que pensar que caracteriza a una pirmide, y es que la base se va
achicando a medida de que crece y se achica en la misma proporcin de lo que crece.
Resolver problemas tiene mucho que ver con encontrar patrones, en este caso el patrn es que la cantidad de
pisos determina la cantidad de asteriscos
1
2
3
* 1
** 2
*** 3
***** 4
pero que pasa si representamos la pirmide de otra forma, piso, cantidad de *, tendramos:
1
2
3
4
* 1,1
** 2,2
*** 3,3
***** 4,4
O sea dentro de los for un nmero est creciendo siempre de uno en uno (el del piso) y el de los lados llega hasta
el piso respectivo, en lugar del tamao del cuadrado.
Para implementar ese cdigo lo nico que tenemos que hacer es limitar el j para que en lugar de llegar hasta size,
llegue hasta i.
1
2
3
4
5
6
7
8
var size = 5;
for (i = 0; i < size; i ++){
asteriscos = "";
for (j = 0; j < i; j++){
asteriscos += "*";
}
}
Ejercicios para practicar ciclos anidados

Dibujar una letra I de tamao n
Ejemplo si tamao = 1
1
2
3
***
*
***
si la letra de es de tamao 2
1
2
3
4
*****
*
*
*****
Y si es de tamao 3
1
2
3
4
5
*******
*
*
*
*******
Captulo 7
Funciones
Introduccin a funciones
En el captulo anterior aprendimos a crear un cuadrado de tamao x, o una pirmide de tamaos x, imaginemos
ahora que este proceso lo tuvisemos que hacer muchas veces en nuestro sitio, tendra poco sentido tener que
escribir el cdigo cada vez, ahora imaginemos que descubrimos un error o nos piden cambiar todos los
cuadrados por pirmides en nuestra tendramos que cambiar nuestro cdigo en muchas partes distintas.
En javascript al igual que en muchos otros lenguajes existen las funciones, estas nos permiten nombrar una serie
de pasos y ejecutarlos con un simple llamado, de esta forma evitamos repetir toda ls serie de pasos cada vez que
se quiera ejecutar y nos permite actualizar y/o reparar la funcin en un solo punto.
Las funciones son la herramienta ms bsica para estructurar programas largos, reducir la repeticin, asociar
nombres con subprogramas y poder aislar estos subprogramas unos de otros.
Nuestra primera funcin

El secreto para entender funciones es que en una parte de nuestro cdigo se define, y en otras es llamada.
La definicin consta con una secuencia de pasos que se ejecutan con un nombre. Por ejemplo, el siguiente
cdigo define la funcin mostrar cdigos secretos.
1
2
3
4
5
var mostrarCodigos = function(){

console.log("123xxf");
console.log("1842fy");
console.log("zyPP9x");
};
Luego podemos escribir mostrarCodigos y ver en la consola todos los cdigos cada vez que queramos.
Composicin una funcin
Una funcin tiene un nombre y es creada por una expresin que empieza con la palabra reservada function.
Las funciones reciben una lista de parmetros entre medio de los (), en nuestro caso no recibimos ninguna
funcin pero hablaremos de eso un poco ms adelante.
En javascript el cuerpo de las funciones siempre deben ser envueltos en llaves {} , como en el ejemplo de los
cdigos secretos.
Finalmente las funciones pueden tener un retorno de algn valor particular, pero no es obligatorio.
Nombrando funciones
El nombre de una funcin debe ser compuesto de una sla palabra, como por ejemplo alCuadrado, en lo posible
se debe ocupar el nombre menos errtico y misterioso, el nombre de la funcin puede contener nmeros pero
no puede empezar con uno.
A esta nomenclatura de juntar palabras y la primer letra de cada palabra (despus de la primera) empieza con
maysculas se le denomina lower camel case.
Esto es slo una convencin y puede ser violada, pero como prctica no se recomienda.
Ejemplos de nombres:
1
2
3
4
5
6
7
8
incrementar(); // Correcto
emparejar(); // Correcto
suavizar(); // Correcto
x2(); // Correcto pero no se nos ocurre para que sirve
2x(); // Incorrecto no puede empezar con un nmero
X2(); // est permitido, pero no debera empezar con maysculas
calcularAo(); // Es vlido, los nombres pueden contener tildes y la letra .
Pasando parmetros
Las funciones pueden recibir parmetros, por ejemplo imaginemos que queremos ocupar la misma funcin para
construir una pirmide de tamao 5, o una de tamao 10, no tendra sentido escribir el cdigo para cada tamao,
lo que se hace es parametrizar la funcin.
var drawPiramid = function(size)
2
3
4
5
6
7
8
9
10
{
for (i = 0; i < size; i ++){
asteriscos = "";
for (j = 0; j < i; j++){
asteriscos += "*";
}
}
}
De esta forma cuando llamemos a dibujar pirmide lo podemos hacer del tamao que queramos.
ejemplo:
1
2
drawPiramid(10);
drawPiramid(20);
Una funcin no est limitada a recibir un nico parmetro, perfectamente podra recibir dos o tres, incluso es
posible que sea un nmero indefinido, aunque este nmero nunca puede ser infinito, eso lo veremos ms
adelante.
Cuando se pasa ms de un parmetro el orden de estos determina cual es cual.
Ejemplo:
1
2
var calcularIMC = function(peso, estatura){

}
Si se llama a la funcin como calcularIMC(1.80, 80) el sistema confundir peso con estatura y los
resultados arrojados probablemente estarn malos.
Por lo mismo debemos ser cuidadosos de no confundir el orden de los parmetros.
Moraleja: El orden de los parmetros importa.
Tarea: Se deja como tarea crear una funcin que dibuje un rectngulo de lados x, e y.
Retorno de funciones
Es importante entender que las funciones pueden devolver valores o simplemente no devolver nada, cuando una
funcin no devuelve nada javascript lo interpreta como undefined.
Por ejemplo nuestra funcin drawPiramid() no devolva valores y por lo mismo cuando uno la llama aparece un
texto en la consola despus del dibujo que dice undefined.
Para devolver un valor se utiliza la instruccin return, cuando se llama la funcin el valor es devuelto y es nuestro
deber capturarlo o si no se pierde.
Ejemplo:
1
2
3

return peso / (estatura * estatura);
}
Luego podemos mostrar el valor llamando a la funcin con

console.log(calcularIMC(100, 2.00))
La funcin termina despus del return, pero eso no quiere decir que no pueda tener ms de uno, siempre y
cuando sea en un camino distinto del cdigo.
1
2
3
4
5
6
7
8
9
10
var interpretarIMC = function(peso, estatura){

var imc = calcularIMC(peso, estatura);
if (imc > 24){
return "sobrepeso";
} else if (imc > 19) {
return "ok";
} else {
return "bajo peso";
}
}
y luego podemos utilizarla de la siguiente forma:
1
2
3
4
5
6
interpretarIMC(80, 1.79);
// "sobrepeso"
// "bajo peso"
// "ok"
En la definicin de la funcin tambin pudimos observar que estamos llamando a otra funcin, eso es
perfectamente posible, tambin habra sido posible crear dos funciones distintas, de la siguiente forma:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

return peso / (estatura * estatura);
}
var interpretarIMC = function(peso, estatura){
var imc = calcularIMC(peso, estatura);
if (imc > 24){
return "sobrepeso";
} else if (imc > 19) {
return "ok";
} else {
return "bajo peso";
}
}
Pero en este caso para interpretar el IMC tendramos que ocupar ambas funciones por separado, de esta forma:
1
2
imc = calcularIMC(90, 2.00);

console.log(interpretarIMC(imc));
Cual de las dos formas a utilizar se deja a criterio del lector pero que existe una rama de la informtica
especializada en estudiar como acoplar y desacoplar cdigos y se llama diseo de patrones, el cul es un tema que
abordaremos ms adelante en este libro.
Capturando el valor de retorno

Este es un tema que ya mencionamos pero es tan importante que lo repetiremos, cuando una funcin retorna un
valor debemos capturarlo, si no lo perdemos, eso es lo que estamos haciendo en al funcin interpretarIMC
cuando escribimos var imc = calcularIMC(peso, estatura) estamos almacenando el retorno
en la variable imc.
Cuando se construye una funcin principalmente hay dos cosas claves, una es que recibe y la otra es que
devuelve.
Se deja como tarea para el lector crear la funcin que revise si un nmero es primo o no.
Otra forma de definir funciones.

Existe una segunda forma de definir una funcin que no hemos mencionado todava, consiste en utilizar la
palabra reservada function
1
2
3
function formaNueva(){
return 'otra forma de declarar funciones';
}
La diferencia entra ambas es sutil y muy tcnica, pero ambas sirven para lo mismo, en ambos casos se crea una
variable en que en el segundo caso es implcito.
El scope de las variables dentro de una funcin

Variables locales
Toda variable definida dentro de una funcin es una variable local y no puede ser accedidas afuera de la funcin.
1
2
3
4
5
var miFuncion = function(){

var y = 10;
};
console.log(y)
En el ejemplo anterior obtendremos un error ya que la variable y no existe fuera de la funcin llamada
miFuncion()
incluso aunque llamemos a la funcin veremos que todava no existe y
1
2
miFuncion()
console.log(y)
Este comportamiento es el esperado y es bueno porque evita que rompamos una funcin sin querer.
Variables globales
Las variables definidas afuera de una funcin son llamadas globales, pueden ser accedidas y ser modificadas
dentro de una funcin. En el siguiente cdigo de puede ver el ejemplo de ambos conceptos.
1
2
3
4
5
6
7
var x = 1;
var otraFuncion = function(){
x = x + 1;
console.log(x)
}
console.log(x)
En este ejemplo podemos ver que x tiene el valor de 1, y claro no se ha incrementado porque todava no
llamamos a la funcin, pero ese no es el nico detalle, a diferencia del caso anterior ahora vemos que x si existe.
Ahora llamemos a la funcin para ver que pasa:
1
2
3
otraFuncion()
otraFuncion()
console.log(x)
Cada vez que llamamos a otra funcin estamos incrementando el valor de x para todas partes, este es un
comportamiento peligroso, porque en un cdigo grande no sabremos muy bien que cosa est modificando a que
otra.
Es un error de diseo que debemos evitar.
Muy importante
Nunca utilizar variables globales, tarde o temprano se levantarn de sus tumbas y vendrn a
penarnos.
Funciones de primera clase

Javascript es considerado un lenguaje funcional, una de sus principales razones es que trata las funciones como
objetos de primera clase, en espaol eso quiere decir las funciones pueden ser parmetros de funciones y las
funciones pueden retornar funciones, tal como si fuera cualquier otro tipo de variable.
1
2
3
4
5
6
7
8
9
10
11
var multiplicaPorTres = function(x){

return 3*x;
};
var aplicaDosVeces = function(x, miFuncion){
return miFuncion(miFuncion(x));
};
var resultado = aplicaDosVeces(6, multiplicaPorTres);
console.log(resultado);
// -> 54
Funciones annimas
Lleg el momento de confesar una verdad, hasta el momento todas las funciones que hemos estado ocupando
son annimas, lo que sucede es que se las asignamos a una variables, pero no siempre tiene que ser as.
Para entender bien esta situacin ilustremos dos casos, en el primero vamos a crear una funcin annima y
asignarla una variable y luego utilizarla dentro de una funcin, y, en un segundo caso, vamos a pasar directamente
la funcin.
Pasando una variable que contiene una funcin

Miremos por ejemplo la funcin setInterval(), la funcin setInterval recibe como parmetro otra funcin y un
tiempo y ejecuta esa funcin cada cierto tiempo, ejemplo:
1
2
3
4
5
var mostrarAlerta = function(){

alert("hola");
}
setInterval(mostrarAlerta, 3000);
Un lector bien atento notar que la funcin mostrarAlerta es pasada sin utilizar los parntesis como usualmente
se usa.
La razn se debe a que si los utilizramos as setInterval(mostrarAlerta(), 3000);
estaramos ejecutando la funcin y pasando el resultado (undefined) en lugar de pasarla como una variable.
Pasando directamente una funcin.

Ahora veamos el caso contrario pasando directamente la funcin.
1
2
3
setInterval(function(){
alert("hola")
}, 3000);
Este tipo de sintaxis es muy utilizada en javascript y la ocuparemos mucho especialmente cuando trabajemos con
arreglos u otras libreras como underscore, lowdash o jQuery, as que volveremos a hablar de este tema pronto
en el libro.
Captulo 8
Arrays
Los arreglos son un tipo de dato que permite contener mltiples datos agrupados en una sola variable, podemos
acceder a estos datos de dos formas:
1. Directamente a travs del ndice.
2. Secuencialmente a travs de un for o while.
Formas de crear un arreglo

Hay dos formas de crear un arreglo, una recomendada y otra no, pero ambas funcionan.
La forma buena y sencilla es var arreglo = [1,2,3,4] , La forma no tan buena es
var arreglo = new Array(1,2,3,4)
La razn por la que no se recomienda ocupar new para el array es porque cuando slo se pasa un parmetro se
comporta de una forma peculiar.
1
2
array = new Array(5)

// [undefined 5]
Con un slo parmetro crea n elementos indefinidos.

Moraleja: Ocupar siempre la primera forma para evitar errores.
Para crear un arreglo vaco se puede hacer con var arreglo = []
El ndice
En javascript el ndice de un array empieza desde 0, y termina en n - 1, o sea si hay 5 elementos, para acceder al
primero sera arreglo[0] y para acceder al ltimo sera arreglo[4]
1
2
3
4
5
6
7
8
9
10
11
var colores = ['rojo', 'azul', 'verde', 'amarillo'];

console.log(colores[0]);
// -> 'rojo'
console.log(colores[2]);
// -> 'verde'
colores[4] = 'blanco';
console.log(colores);
// -> ['rojo', 'azul', 'verde', 'amarillo','blanco']
Acceder a un ndice ms all de los lmites devolver un elemento undefined.
Contenido dinmico
Los arreglos en javascript pueden tener cualquier tipo de objetos, por ejemplo puedo tener en el mismo arreglo
una variable string, un nmero y una funcin.
1
2
3
4
5
6
7
var miFuncin = function(){

return true;
};
var miNumero = 27;
var miArreglo = ['Hola', miNumero, 15.52, miFuncion];
Largo del arreglo

Los arreglos adems tiene la propiedad length que nos permite conocer la cantidad de elementos que contiene
1
2
3

console.log(colores.length);
// -> 4
Iteracin
Se conoce como iteracin de un arreglo al hecho de recorrerlo secuencialmente de principio a fin.

Esto lo podemos hacer con los ciclos for y while que vimos previamente:
Ejemplo bsico de iteracin:
1
2
3
4
5
6
7
for(var index = 0; index < colores.length; index++) {

console.log(colores[index]);
}
// -> 'rojo'
// -> 'azul'
// -> 'verde'
// -> 'amarillo'
Como queremos que nuestros cdigos funciones para cualquier arreglo no debemos fijar arbitrariamente los
lmites del arreglo dentro del for y debemos ocupar la propiedad length.
A el proceso de fijar lmites y valores arbitrariamente dentro de los array se le conoce en la industria como
hardcoding y es una prctica muy mal vista.
Antes de seguir leyendo deberas poder

contestar las siguientes preguntas
1. Para qu sirven los arrays?
2. Qu hace new Array(10)?
3. Puede el mismo array tener Strings y Numbers?
4. Crea un mtodo que permite mostrar todos los tipos de datos que hay dentro de un arreglo que recibe como
parmetro.
5. Que obtendramos si nos referimos al ndice -1 de un arreglo?
Mtodos implementados en todos los

navegadores
Los arreglos tambin tienen mtodos, pero no todos estn implementados en todos los navegadores, es por esto
que hay que tener mucho cuidado al utilizarlos. A continuacin veremos seis mtodos soportados por todos los
navegadores.
1. Push
2. Pop
3. Shift
4. Unshift
5. Concat
6. Slice
Nota al margen: los mtodos son muy similares a las funciones pero le pertenecen a un objeto, por ahora la
principal diferencia que cabe mencionar es que para utilizar el mtodo mencionaremos a la
variable.funcion() en lugar de funcin()
Veremos ms de esto en el captulo de objetos.
1. Mtodo de array push(elemento)

Agrega un elemento al final del arreglo.
1
2
3
4

colores.push('blanco');
No existe ningn problema en que un array tenga elementos repetidos, por, sera perfectamente valido agregar
un elemento que ya est en la lista:
1
2
colores.push('rojo')
console.log("colores")
2 Mtodo de array pop()

EL mtodo pop realiza dos cosas simultneamente, nos permite obtener el ltimo elemento de un arreglo y
adems lo elimina del arreglo original.
2
3
4
5
6
var ultimo = colores.pop();

console.log(ultimo);
// -> 'amarillo'
// -> ['rojo', 'azul', 'verde']
No es necesario capturar el valor con lo variable ltimo, si slo queremos eliminar el valor del arreglo basta con
colores.pop()
Mtodo de array shift()

Obtiene el primer elemento de un arreglo y lo elimina del arreglo original.
1
2
3
4
5
6

var primero = colores.shift();
console.log(primero);
// -> 'rojo'
// -> ['azul', 'verde', 'amarillo']
Mtodo de array unshift(elemento)

Agrega un elemento al principio del arreglo.
1
2
3
4

colores.push('blanco');
// -> ['blanco','rojo', 'azul', 'verde', 'amarillo']
Mtodo de array concat(otroArreglo)

Devuelve un nuevo arreglo que une el arreglo inicial con otro arreglo (o ms de uno), pero no modifica el arreglo
inicial.
1
2
3
4
5
6
7
8
9
10
11
12
13
var colores = ['rojo', 'azul'];

var numeros = [1,2,3]
var dias = ['lunes','martes'];
var nuevoArreglo = colores.concat(numeros);
console.log(nuevoArreglo);
// -> ['rojo', 'azul']
var nuevoArreglo2 = colores.concat(numeros,dias);
console.log(nuevoArreglo2);
// -> ['rojo', 'azul', 'verde', 'amarillo','blanco','lunes','martes']
Slice
Slice permite seleccionar algunos elementos de un arreglo.
array.slice(start,end)
donde start y end son ndices, si no se especfica el final entonces se copiar del principio sealado hasta el final,
ejemplo.
1
2
array = ["a", "b", "c", "d","e", "f","g", "h"]

array.slice(3) // ["d", "e", "f", "g", "h"]
Splice
Splice permite aadir y remover elementos a un array, el mtodo devuelve los items removidos.
A pesar de ser un mtodo que permite hacer mltiples cosas su principal uso es para remover elementos de un
array.
1
2
3
var paises = ["Egipto", "Ghana", "Kenia", "Liberia", "Mal"]

console.log(paises.splice(0, 1))
4
5
6
// Egipto
console.log(paises)
// ["Ghana", "Kenia", "Liberia", "Mal"]
Adems es posible agregar elementos ocupando splice
1
2
3
4
console.log(paises.splice(0, 1, "Nigeria", "Ruanda"))

// ["Ghana"]
console.log(paises)
["Nigeria", "Ruanda", "Kenia", "Liberia", "Mal"]
Ejercicio con push & pop

Crear un mtodo que devuelva todos los elementos de un arreglo pero en orden inverso.
1
2
3
4
5
6
7
var invertirArreglo = function(arreglo_original){

var arreglo_invertido = [];
for (var i = 0; i <= arreglo_original.length; i++){
element = arreglo_original.length.pop();
arreglo_invertido.push(element);
}
}
El peligro de copiar arreglos

En javascript los arreglos no se copian, lo que se copia es la referencia al arreglo.
miremos el siguiente caso para entender bien como funciona:
1
2
3
4
var a = [1,2,3,4];
var b = a;
b[0] = 5;
console.log(a[0]);
Qu crees?, la respuesta es 1 o 5?
La respuesta es 5
Una forma til de imaginarlo es pensar que los arreglos estn en otro lado, y cuando uno los crea lo que est
haciendo es guardar la posicin de donde est, a esta posicin se le llama referencia.
luego si modifico el contenido de b estoy modificando el contenido de a.
Copiando correctamente
Si queremos copiar los elementos en lugar de simplemente copiar la referencia podemos hacerlo con el mtodo
slice que vimos anteriormente.
1
2
3
4
var a = [1,2,3,4];
var b = a.slice(0);
b[0] = 5;
console.log(a[0]);
Qu crees?, la respuesta es 1 o 5?
La respuesta es 1
Mutablidad
Se dice que un mtodo es mutable si modifica al elemento original, por regla general de diseo es bueno que los
objetos sean inmutables para evitar cambiarlos por error, pero a veces eso puede afectar fuertemente la velocidad
de ejecucin de un programa o a veces simplemente no tiene sentido que sea inmutable.
revisemos
1. push: mutable
2. pop: mutable
3. shift: mutable
4. unshift: mutable
5. concat: mutable
6. slice: inmutable
slice no modifica el arreglo original, devuelve un arreglo nuevo con la seleccin, por lo mismo es inmutable.
Se dice que una estructura de datos es inmutable cuando ninguno de los mtodos que tiene la modifica
directamente, en javascript los array son mutables.
Mtodos de Array no soportados por todos los

navegadores
Como se dijo anteriormente, no todos los mtodos de Array son soportados por todos los navegadores, eso
significa que los desarrolladores deben evitar utilizar algunos mtodos si quieren tener aplicaciones que
funcionen en todos lados. Por ejemplo, un mtodo muy conocido es forEach, pero este no est implementado en
los navegadores Internet Explorer cuya versin sea menor a 9.
La librera Underscore (entre otras cosas) es utilizada para enfrentar este problema, entrega la funcionalidad
independiente si est implementada en el navegador. para ser utilizada es necesario cargarla previamente. A
continuacin veremos los mtodos ms utilizados y cmo se utiliza la librera.
forEach(mtodo)
Esta mtodo es muy til cuando tenemos un arreglo y necesitamos hacer algo con cada elemento de este
arreglo. Por ejemplo, si tenemos un arreglo con el nombre de nuestros amigos y queremos saludar a cada uno de
ellos con for se vera de la siguiente manera:
1
2
var amigos = ['Pedro', 'Juan', 'Diego'];
3
4
5
6
7
8
for(var index = 0; index < amigos.length; index++) {

console.log('Hola '+ amigos[index]);
}
// -> 'Hola Pedro'
// -> 'Hola Juan'
// -> 'Hola Diego'
El ejemplo anterior hace la funcionalidad esperada, sin embargo, tiene algunos problemas. Veremos cuales son
estos con un ejemplo, ahora necesito saludar a primos y a mascotas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var primos = ['Rodrigo','Jaime','Francisco'];
var mascotas = ['Bobby','Campen','Doggy', 'Pinky'];
for(var index = 0; index < amigos.length; index++) {
console.log('Hola '+ amigos[index]);
}
// -> 'Hola Pedro'
// -> 'Hola Juan'
// -> 'Hola Diego'
for(var index = 0; index < primos.length; index++) {
console.log('Hola '+ primos[index]);
}
// -> 'Hola Rodrigo'
// -> 'Hola Jaime'
// -> 'Hola Francisco'
for(var index = 0; index < mascotas.length; index++) {
console.log('Hola '+ primos[index]);
}
// -> 'Hola Jaime'
// -> 'Hola undefined' // Error!
Empec a copiar y pegar cdigo, pero no fui lo suficientemente cuidadoso! En el ltimo for quera saludar a
las mascotas pero se me olvid reemplazar primos por mascotas, y adems como mascotas tiene ms elementos
que primos apareci un error en la consola. Veamos cmo queda esto implementado con forEach.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

amigos.forEach(function(nombre){
console.log('Hola ' + nombre);
};
// -> 'Hola Pedro'
// -> 'Hola Juan'
// -> 'Hola Diego'
primos.forEach(function(nombre){
};
// -> 'Hola Jaime'
mascotas.forEach(function(nombre){
};
// -> 'Hola Bobby'
// -> 'Hola Campen'
// -> 'Hola Doggy'
// -> 'Hola Pinky'
Como pueden ver, al repetir el cdigo ya no se necesito preocupase por estar recorriendo el array correcto,
forEach se encarga de hacer ese trabajo por nosotros.
Son menos variables y por lo tanto menos preocupaciones para el desarrollador. Pero a ningn desarrollador le
gusta repetir cdigo y si quiero cambiar la forma de saludar, necesito cambiar el cdigo en varios lugares. Eso
significa tener ms preocupaciones y mayores probabilidades de equivocarse. Esto lo puedo solucionar de la
siguiente manera, creando el mtodo saludar.
1
2
3
4
5
6
7
8
9
10
var saludar = function(nombre){

};
amigos.forEach(saludar);
// -> 'Hola Pedro'
11
12
13
14
15
16
17
18
19
20
21
22
23
// -> 'Hola Juan'

// -> 'Hola Diego'
primos.forEach(saludar);
// -> 'Hola Jaime'
mascotas.forEach(saludar);
// -> 'Hola Bobby'
// -> 'Hola Campen'
// -> 'Hola Doggy'
// -> 'Hola Pinky'
El cdigo amigos.forEach(saludar), se puede leer de la siguiente manera: para cada elemento del arreglo amigos
aplicar el mtodo saludar. Muchos desarrolladores prefieren esta manera en vez de for ya que, entre otras
razones, es mucho ms explcito a lo que se quiere llegar a realizar.
Por ltimo, como se dijo anteriormente, el mtodo forEach no est en todos los navegadores, y la
implementacin con Underscore quedara de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
// Original
amigos.forEach(saludar);
// -> 'Hola Pedro'
// -> 'Hola Juan'
// -> 'Hola Diego'
// Underscore o Lodash
_.forEach(amigos,saludar);
// -> 'Hola Pedro'
// -> 'Hola Juan'
// -> 'Hola Diego'
map(funcin)
Imaginemos que ahora en vez de saludar en consola a cada elemento del arreglo amigos, queremos guardar el
saludo para cada uno de los elementos en un arreglo nuevo. Con los mtodos forEach y push quedara
implementado de la siguiente manera:
2
3
4
5
6
var saludosAmigos =[];

saludosAmigos.push('Hola ' + nombre);
});
Esto funciona correctamente, pero si quiero replicar la funcionalidad con mascotas o primos, necesito replicar
todo el cdigo como se ve en el siguiente ejemplo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var saludosAmigos =[];
var saludosPrimos = [];
var SaludosMascotas = [];
saludosAmigos.push('Hola ' + nombre);
});
primos.forEach(function(nombre){
saludosPrimos.push('Hola ' + nombre);
});
mascotas.forEach(function(nombre){
saludosMascotas.push('Hola ' + nombre);
});
Para estos casos, cuando necesito crear un nuevo arreglo en base a uno existente, existe un mtodo creado
especialmente para ello. Se llama map y est implementado en la mayora de los lenguajes modernos. Este
mtodo toma como base un array inicial, a cada uno de los elementos le aplica una funcin y guarda el resultado
en un arreglo nuevo. Es importante entender que map no modifica el array inicial, lo que hace es crear uno
nuevo. Veamos un ejemplo:
1
2
3
4
5
6

var saludosAmigos = amigos.map(function(nombre) {
return 'Hola ' + nombre;
});
console.log(amigos)
7
8
9
10
// -> ['Pedro', 'Juan', 'Diego']

console.log(saludosAmigos);
// -> ['Hola Pedro', 'Hola Juan', 'Hola Diego']
Ahora crearemos la funcin crearSaludo y la aplicaremos al resto de los arrays.
1
2
3
4
5
6
7
8
9
10
11

var crearSaludo = function(nombre){
return 'Hola ' + nombre;
};
var saludosAmigos = amigos.map(crearSaludo);
var saludosPrimos = primos.map(crearSaludo);
var SaludosMascotas = mascotas.map(crearSaludo);
De esta manera queda implementada la funcionalidad esperada de una forma muy concisa, que fue crear un
nuevo array a partir de otro modificando cada elemento de este. Para finalizar mostraremos cmo se implementa
map con Underscore.
1
2
3
4
5
// Original
var saludosAmigos = amigos.map(crearSaludo);
var saludosAmigos = _.map(amigos,crearSaludo);
filter(funcin)
Cuando se trabaja con arrays, muchas veces es necesario filtrar los valores, para eso existe el mtodo filter. Filter
devuelve un nuevo arreglo con los elementos filtrados, y para saber que filtrar necesita una funcin que retorna
true si queremos mantener ese elemento en particular. Esto se puede saber en el siguiente ejemplo en vamos a
filtrar los nmeros menores a 10.
1
2
var numeros = [1, 5, 3, 20 , 15, 6];

var numerosMenoresA10 = numeros.filter(function(numero){
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if(numero < 10){

return true;
}
});
console.log(numeros);
// ->
[1, 5, 3, 20 , 15, 6]
console.log(numerosMenoresA10);
// ->
[1, 5, 3, 6]
var numerosMenoresA10 = _.filter(numeros,function(numero){
if(numero < 10){
return true;
}
});
reduce(funcin [, valorInicial])
Los mtodos map y filter devuelven arrays, sin embargo, a veces es necesario convertir un array en un solo
valor, por ejemplo sumar todos los elementos de un array. Para eso existe el mtodo reduce.
La funcin en este caso tiene dos parmetros, valorAnterior y valorActual. Se puede pensar que el valorAnterior
es el valor acumulado y valorActual es el valor actual del elemento. Veremos un ejemplo sumando todos los
elementos de un array.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var numeros = [1, 5, 3, 20 , 15, 6];

var sumTotal = numeros.reduce(function(valorAnterior,valorActual
return valorAnterior+valorActual;
});
console.log(sumTotal);
// ->
50
Ahora vamos a multiplicar todos los valores.
var multElementos = function(anterior,actual){
return anterior*actual;
};
var multTotal = numeros.reduce(multElementos);
console.log(multTotal);
// ->
27000
Este tiene de manera opcional el valor inicial, en este caso Javascript asumi que el valor inicial de la suma es 0 y
el valor inicial de la multiplicacin es 1. Para evitar errores es aconsejable definir de manera implcita el valor
inicial, como lo veremos a continuacin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var sumTotal0 = numeros.reduce(function(a,b){return a+b;},0);

var sumTotal1 = numeros.reduce(function(a,b){return a+b;},1);
console.log(sumTotal, sumTotal0, sumTotal1);
// -> 50 50 51
var multTotal0 = numeros.reduce(multElementos,0);
var multTotal1 = numeros.reduce(multElementos,1);
console.log(multTotal, multTotal0, multTotal1);
// -> 27000 0 27000
Por ltimo en Underscore se escribe de la siguiente manera.
var multTotal = _.reduce(numeros,multElementos,1);
Combinando Filter, Map y Reduce

Con estos 3 mtodos se pueden hacer todas las transformaciones de un array y con Javascript se pueden
combinar de alguna manera muy simple. Por ejemplo voy a filtrar los nmeros menores a 10, multiplicarlos por 2
y luego sumarlos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var numeros = [1, 5, 3, 20 , 15, 6];

var menor10 = function(x) {
if(x<10){
return true;
}
};
var mult2 = function(x){
return 2*x;
};
var sumar = function(anterior,actual){
return anterior + actual;
15
16
17
18
19
20
21
22
23
24
25
26
27
28
};
var resultado = numeros
.filter(menor10)
.map(mult2)
.reduce(sumar,0);
console.log(resultado);
// -> 30
//Con Underscore o Lodash
var resultado = _.filter(numeros,menor10)
.map(mult2)
.reduce(sumar,0);
Estos mtodos tiene mayor relevancia al tener arrays de objetos, que sern visto ms adelante.
Por ltimo, es altamente recomendable utilizar las libreras Underscore o Lodash para evitar problemas de
compatibilidad. Ambas libreras adems tienen ms mtodos disponibles en su documentacin.
http://underscorejs.org/ https://lodash.com/
Funciones Avanzadas
Funciones autoejecutables
El trmino en ingls es self invoked function, la traduccin al espaol podra ser funciones auto llamadas o
autoejecutables y son funciones que se ejecutan inmediatamente en el momento en que se definen.
1
2
3
(function () {
alert("hola, soy una funcin que no necesita ser llamada");
})();
La diferencia en la sintaxis es el doble conjunto de parntesis, como nemotecnia para recordarlas este es un buen
truco:
(funcion (){})(autollamado)
Las funciones autoejecutables son muy tiles para crear closures y definir objetos bajo el patrn mdulo, ambas
tcnicas las estudiaremos a continuacin.
Closures
Las variables globales son un peligro, por lo mismo uno busca encapsular las variables peligrosas, en javascript
eso se puede hacer a travs de un closure.
Vamos a ver un ejemplo prctico de esto.
Digamos que queremos generar un clicker virtual, estos son unos dispositivos fsicos que cada vez que uno les
presiona un botn aumentan en uno.
Eso lo podramos resolver con este simple cdigo.
1
2
3
4
var i = 0;
var click = function(){
i = i + 1
}
El problema de hacerlo de esta forma es que en otra parte del cdigo yo podra reescribir la variable i por error,
por ejemplo dentro de un for, una solucin sera ocupar un nombre ms complejo, pero un proyecto grande
podra tener miles de lneas de cdigo y no queremos dejar las cosas a la suerte.
Para ilustrarlo mejor veamos un ejemplo de este problema con cdigo.
1
2
3
4
5
6
7
8
9
10
11
12
console.log(i)
click();
console.log(i)
click();
console.log(i)
// i = 0
// i = 1
// i = 2
for (var i = 0; i <= 10; i++){

console.log(i)
}
console.log(i) // ups, i muestra 11
Para evitar este tipo de error se encapsulan las variables peligrosas en un closure que devuelve una nueva
funcin.
1
2
3
4
5
6
7
8
9
10
11
12
13
var click = function(){

var contador = 0;
var make_click = function(){
contador = contador + 1;
return contador;
};
return make_click;
}
var index = click();
console.log(index()) // -> 1
console.log(index()) // -> 2
console.log(index()); // -> 3
En el ejemplo anterior la variable contador qued encapsulada dentro de la funcin click. Esta variable no puede
ser accedida desde fuera, solo desde dentro o de una funcin definida dentro, entonces lo que hacemos es
aprovechar nuestra funcin para que devuelva una nueva funcin que modifique el valor.
Dejando de lado las definiciones formales, se puede decir que closure es la capacidad de poder guardar datos
dentro de una funcin para que estos puedan ser utilizados en el futuro.
Closure con funcin autoejecutable

El cdigo que hicimos puede ser mejorado de forma que el usuario no tenga que asignar click a index para luego
llamarlo, podramos hacer simplemente click, para eso aprovecharemos el truco de autollamado que aprendimos
recientemente.
1
2
3
4
5
6
7
8
9
10
11
var click = (function(){

var contador = 0;
return function (){
return contador;
};
})()
console.log(click()); // -> 1
De esta forma click se ejecuta automticamente, parte en cero y cada vez que es llamado aumenta el contador en
uno.
Captulo 9
Objetos
En javascript existe un super tipo de variable llamado objeto, estos nos ayudarn a crear todos los tipos de datos
que necesitemos.
Los objetos se parecen mucho a los arrays, pero se definen con llaves.
objeto = {}
A diferencia de los arrays los objetos no tienen un ndice numrico, tienen uno con nombre, pero ese nombre no
es automtico, hay que agregarlo de la siguiente forma:
objeto = {nombre_indice: valor}
Nota al margen: En javascript casi todo es un objetos, excepto null y undefined.
Creando objetos
Hay dos formas de crear objetos, la primera es a travs de los {} como vimos previamente, la segunda es
utilizando el operador new.
var objeto = new Object();
Agregando propiedades a un objeto.

Los ndices con nombre dentro de un objeto se llaman propiedades, podemos agregar propiedades nuevas de
dos formas.
1
2
var mueble = new Object(); // o mueble = {}

mueble.color = "caf";
mueble['altura'] = "2";
Las dos formas son vlidas y correctas.

Las propiedades de los objetos son como variables, por lo tanto pueden contener datos, funciones e incluso
otros objetos.
1
2
3
4
5
6
7
8
9
10
11
12
13
// Objeto 1
var motor700 = {cilindrada: 700, tiempos: 4};
// Objeto 2 que contiene al objeto 1
var motocicleta = {
marca:'Ducati',
motor:motor700,
acelerar: function(){
console.log('Acelerar a fondo');
}};
motocicleta.acelerar();
// -> 'Acelerar a fondo'
Cuando un objeto tiene una funcin a esta funcin se le denomina mtodo, cuando tiene una variable se le
denomina propiedad
Leyendo las propiedades de un objeto

Se realiza de la misma forma que agregarlas, en el ejemplo de la moto podemos obtener la marca con
motocicleta.marca o motocicleta['marca']
Borrando propiedades de un objeto

Para borrar una propiedad de un objeto se utiliza la instruccin delete.
En el ejemplo de la moto:
delete motocicleta.marca;
Cuidado con el borrado de elementos de array

Es posible borrar un elemento de un array con la instruccin delete, pero debemos tener cuidado, porque cambia
el valor por undefined.
1
2
3
4
5
var array = [1,2,3,4];

delete array[2];
console.log(array) ;
// [1, 2, undefined 1, 4]
Se debe ocupar el mtodo splice.
El operador this
Es posible dentro de un objeto obtener el valor de una de sus propiedades utilizando el operador this, por
ejemplo en el caso de la motocicleta, el mtodo acelerar podra mostrar su marca gracias al operador como se
muestra en el siguiente ejemplo.
1
2
3
4
5
var motocicleta = {
marca:'Ducati',
acelerar: function(){
console.log( this.marca + ' Acelerando a fondo');
}};
En el ejemplo anterior this.marca se transformar en Ducatti y el mtodo imprimir Ducatti Acelerando a

fondo
El operador this y el objeto window

Que sucede si utilizamos el operador this fuera del scope de un mtodo, por ejemplo en el caso de una funcin
o directamente en la consola.
En ese caso obtendremos el objeto window que representa al tab abierto del navegador y contiene informacin
como el ancho y el alto de la pgina, el HTML completo e informacin de todas las variables registradas.
Cuando uno asigna el valor a una variable esa variable se convierte en una propiedad del objeto window,
probemos que esta afirmacin es cierta. creemos dos variables y luego busqumoslas dentro del objeto window.
1
2
3
4
var a = 6
var ab = 5
var ab = 6
console.log(this)
Como podemos en la imagen las variables son todas propiedades del objeto window.
Pero, qu pasa si registramos un objeto vaca con la propiedad moo?
1
2
vaca = {moo:'moo'}
console.log(this)
En este caso veremos que la propiedad de vaca moo no est registrada dentro de window si no que est
registrada dentro de la vaca misma. Como regla de buena costumbre debemos evitar sobrecargar el objeto
window de propiedades, en lo posible solo deberamos agregar un par de objetos bsicos necesarios.
Mutabilidad en los objetos
Los objetos al igual que los arrays son mutable.
1
2
3
4
objeto1 = {"soy_mutable": "no"}

objeto2 = objeto1
objeto2.soy_mutable = "si"
console.log(objeto1)
Ahora que ya sabemos que son los objetos podemos definir mejor que es la mutabilidad, y es que las propiedades
puedan ser cambiadas por el resultado de una operacin o del llamado de un mtodo.
Copiando un objeto
Javascript no soporta copia de objetos directamente, al asignar un objeto a otro estamos copiando la referencia y
no el objeto.
Utilizando el siguiente truco podemos copiarlo:
1
2
3
4
5
6
7
8
9
10
var bob = {
name: "Bob",
age: 32
};
var bill = (JSON.parse(JSON.stringify(bob)));
bill.name = "Bill";
console.log(bob);
console.log(bill);
Array de Objetos con Filter, Map y Reduce

Combinar arrays con objetos es una combinacin muy poderosa para manejar los datos en Javascript. Para
operar de forma eficiente sobre los datos ocuparemos los mtodos filter, map y reduce.
Para este ejemplo utilizaremos un array con mascotas, cada mascota tendr nombre, tipo y edad.
1
2
3
var mascotas = [
{ nombre: 'Bobby', tipo: 'perro', edad: 12 },
{ nombre: 'Pinky', tipo: 'gato', edad: 14 },
4
5
6
{ nombre: 'Campen', tipo: 'perro', edad: 4 },

{ nombre: 'Doggy', tipo: 'perro', edad: 11 },
];
Si se quisiera tener un arreglo con los nombres de perros mayores a 10 aos.
1
2
3
4
5
6
7
8
9
10
var perrosMayores = mascotas

.filter(function(mascota){
return mascota.edad >10 && mascota.tipo == 'perro';
})
.map(function(mascota){
return mascota.nombre;
});
console.log(perrosMayores);
// -> ['Bobby','Doggy']
Ahora vamos a sumar la edad de todos los perros.
1
2
3
4
5
6
7
8
9
10
11
12
13
var totalEdadPerros = mascotas

.filter(function(mascota){
return mascota.tipo == 'perro';
})
.map(function(mascota){
return mascota.edad;
})
.reduce(function(anterior,actual){
return anterior+actual;
},0);
console.log(totalEdadPerros);
// -> 27
Preguntas
1. Qu significa que un objeto sea mutable?
2. Cul es la diferencia entre map, reduce y filter?
3. Dentro de un objeto a que hace referencia this?
4. Fuera de un objeto, a que hace referencia this?
Patrn de diseo Mdulo

El patrn de diseo mdulo consiste en devolver un objeto literal con los mtodos pblicos y todo el resto
queda encapsulado dentro del objeto.
Para construir uno tenemos que recordar las closures en javascript y como estas pueden encapsular variables, de
manera que estas queden protegidas de ser modificadas accidentalmente, adems revisamos lo que son los
objetos en javascript y que estos pueden contener otras variables. La pregunta que se pueden hacer algunos en
estos momentos es cmo puedo encapsular las variables en un objeto. Esto en programacin se llama
habitualmente variables privadas y unos de las maneras ms utilizadas en javascript es un patrn de diseo
llamado mdulo. Volvamos a nuestro ejemplo de closure:
1
2
3
4
5
6
7
function generarIndice(){
var contador = 0;
return function(){
return contador;
};
};
Un gran problema de este ndice es que no puedo saber cual es el ltimo valor generado, si llamo a esta funcin
voy a aumentar este contador. Sin embargo, puedo modificar esta funcin para que retorne un objeto en vez de
una funcin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function generarIndice(){
var contador = 0;
var obtIndice = function(){
return contador;
};
var ultIndice = function(){
return contador;
};
return {obtenerIndice: obtIndice, ultimoIndice:ultIndice};
}
16
17
18
19
20
21
22
23
24
var miIndice = generarIndice();

var primero = miIndice.obtenerIndice();
console.log(primero)
// -> 1
var segundo = miIndice.obtenerIndice();
console.log(segundo)
// -> 2
console.log(miIndice.ultimoIndice());
// -> 2
De esta manera puedo obtener el ltimo valor sin tener que modificar el contador y este queda totalmente
protegido.
Por ltimo, en javascript al existir variables globales es preferible nombrar variables lo mnimo posible, de manera
de no entrar en conflicto con otros cdigos. Es por esto que se sugiere en este caso crearlo con funcin
annima, con lo anterior nuestro cdigo quedara de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var miIndice = (function(){

var contador = 0;
var obtIndice = function(){
return contador;
};
var ultIndice = function(){
return contador;
};
return {obtenerIndice: obtIndice, ultimoIndice:ultIndice};
})();
El ejemplo anterior es el patrn de diseo mdulo, muy popular en este lenguaje.
Captulo 10
Prototipos
Todos los objetos en javascript descienden del objeto Object, por lo tanto todos los objetos heredan las
propiedades de Object.prototype. Esto quiere decir que cada vez que se crea un objeto, estos tendrn
automticamente todas las funcionalidades del prototipo de Object.
Con la propiedad prototype se pueden crear o sobreescribir sus propiedades en cualquier momento. El mtodo
toString() pertenece al prototipo Object y permite convertir cualquier objeto en un string, como se puede inferir
de su nombre.
Vamos a ver cmo se pueden sobrescribir los mtodos de un prototipo en javascript, incluso del objeto base
Object.
1
2
3
4
5
6
7
8
9
10
11

colores.toString();
// -> 'rojo,azul,verde,amarillo'
Object.prototype.toString = function(){return "Hola"};
colores.toString();
// -> 'Hola'
var b = {};
b.toString();
// -> 'Hola'
De este ejemplo anterior se puede inferir al menos tres cosas:

1. Cada vez que se modifica el prototipo de un padre automticamente se modifican todas las propiedades
heredadas de un hijo.
2. Estas propiedades (en este caso un mtodo) se almacenan slo una vez en memoria para todos los objetos.
Por lo tanto se convierte en una herramienta muy poderosa cuando existen muchos objetos con la misma
funcionalidad y es necesario disminuir el uso de memoria ram.
3. Puede llegar a ser altamente peligroso la modificacin de los prototipos de los objetos y bajo ninguna
circunstancia es recomendable modificar el prototipo Object.
Ahora revisemos ejemplos ms seguros, voy a crear el objeto Persona y le voy a agregar mtodos a su
propiedad prototype. Como revisamos antes para acceder propiedades de un mismo objeto hay que ocupar this.
Para crear este objeto lo voy a construir con una funcin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// funcin constructora
function Persona(nombre){
this.nombre = nombre;
}
//Voy a agregar un mtodo al prototipo Persona
Persona.prototype.saludar = function(){
return 'Hola, mi nombre es ' + this.nombre;
};
//Creo una nueva instancia de Persona con new
var pancho = new Persona('Pancho');
console.log(pancho.saludar());
// -> 'Hola, mi nombre es Pancho'
Ahora voy a crear al objeto Hombre que llama al constructor de Persona
//Creo un nuevo objeto Hombre que llama
// al constructor de Persona
function Hombre(nombre){
Persona.call(this,nombre);
this.sexo = "Hombre";
}
var juan = new Hombre('Juan');
console.log(juan.nombre);
// -> 'Juan'
console.log(juan.sexo);
// -> 'Hombre'
console.log(juan.saludar());
// -> undefined is not a function
Recibimos este error porque el objeto Hombre slo llam al constructor Persona, para que herede los mtodos
se su prototipo es necesario hacerlo explcitamente.
Captulo 11
Javascript y HTML
Para esta seccin del curso ser empezar a trabajar con el editor de texto puesto que no solo tendremos que
escribir cdigo javascript, adems tendremos que escribir cdigo HTML.
Estructura de un proyecto web con javascript.

Es importante tener crear una carpeta para cada uno de nuestros proyectos web, dentro de esta carpeta
tendremos nuestro archivo index
/nombre-proyecto/index.htm
ademas dentro de la carpeta crearemos una subcarpeta llamada js, y dentro de esta pondremos nuestros archivos
javascripts.
Cabe mencionar que hay gente que crea dos carpetas, una llamada assets para sus javascript, css e imgenes y otra
llamada vendors por los javascript de terceros.
Nuestro index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
Adems debemos crear la carpeta js dentro del proyecto y el archivo main.js
Si al cargar la pgina obtenemos un error del tipo:
1
2
GET file:///Users/gonzalosanchez/proyectos/librojs/
js/main.js net::ERR_FILE_NOT_FOUND
entonces significa que no hemos creado el archivo main.js o que no lo pusimos dentro de la carpeta js.
Manipulando el DOM
Cmo se llamaba el objeto maestro de una pgina web?, si contestaste Window ests en lo correcto. Este objeto
tiene una interesante propiedad dentro llamada document, este contiene el documento completo de la pgina
web y claro si es parte de las propiedades de un objeto de javascript lo podemos modificar.
document
Vamos a agregar un div vaco a nuestra pgina web
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="modificable"> Contenido ... </div>
</body>
</html>
Utilizando document podemos obtener el div y modificarlo de la siguiente forma:
document.getElementById("modificable")
Para probarlo mostraremos en consola el div dentro de nuestro archivo main.js
console.log(document.getElementById("modificable"))
Si el elemento existe obtendremos el tag si no obtendremos null, si tienes el elemento dentro del html pero an
as obtienes null hay un par de posibles causa, la primera es que no hayas guardado el cdigo y luego que no
hayas recargado la pgina pero la tercera es la ms interesante, que hayas cargado el script despus de la etiqueta.
Que es el DOM?
DOM es el acrnimo de Document Object Model, no es une el HTML pero tiene mucho que ver con el. El
DOM es la interfaz de acceso para crear HTML vlido, permite agregar, modificar y borrar contenido.
En DOM todo es un nodo, el documento, todos los atributos html, todos los elementos de html, etc, El objeto
documento que vimos previamente es el nodo raz, pero slo se convierte en el nodo raz una vez que el
documento est cargado.
El orden importa
Es por eso que los scripts que modifican el DOM deben ser cargado al final, porque los nodos para poder
referenciarlos, aadirle atributos, modificarlos, o borrarlos primero necesitan estar cargados.
Lo anterior implica que si la instruccin document.getElementById("modificable") se alcanza antes de que se
defina
entonces obtendremos null, la solucin para evitar este tipo de errores es ser consciente de en que momentos
estamos buscadondo y modificando el DOM y que definitivamente no podemos hacerlo antes de definirlo.
Modificando el DOM
Ya sabemos como recuperar etiquetas del DOM ocupando javascript, ahora aprenderemos como modificar estos
elementos y eso lo podemos utilizar cambiando la propiedad innerHTML
1
2
div_modificable = document.getElementById("modificable");
div_modificable.innerHTML = "nuevo contenido";
No solo podemos cambiar el texto, adems podemos cambiar el CSS
1
2
div_modificable.style.color = "red";
div_modificable.style.fontSize = "40px";
Obteniendo los elementos de HTML por clase

Para estudiar este caso vamos a construir una sencilla pgina web con varios prrafos, cada uno de estos tendr la
clase prrafo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p class="parrafo parrfo1"> Contenido1 </p>
</body>
</html>
Luego en nuestro script podemos obtener todos los prrafos con

document.getElementsByClassName("parrafo") pero a diferencia de getElementById este
mtodo devuelve un Array
Entonces como cambiamos el contenido o el estilo de cada uno de los prrafos?
Podemos iterar sobre los elementos con for.
1
2
3
4
var parrafos = document.getElementsByClassName("parrafo");

for (var i = 0; i < parrafos.length; i++){
parrafos[i].innerHTML = "Super Contenido " + i;
}
o podemos hacerlo con forEach, (recordar que no funciona en todos los navegadores)
1
2
3
parrafos.forEach(function(parrafo){
parrafo.innerHTML = "Super Contenido " + i;
})
Eventos en Javascript
En javascript es posible registrar eventos, cuando la condicin del evento se cumple el cdigo javascript es
ejecutado, por ejemplo podemos hacer que un div que dispare una alerta al ser clickeado.
Click
Para eso utilizaremos un estilo para darle ancho y alto a los divs
1
2
3
4
5
6
7
8
.caja
{
width:50px;
height:50px;
margin:5px;
background-color: blue;
float:left;
}
y luego dentro del cdigo HTML:
1
2
3
4
5
<div
<div
<div
<div
<div
class="caja"
class="caja"
class="caja"
class="caja"
class="caja"
onclick="alert('caja
1')"></div>
2')"></div>
3')"></div>
4')"></div>
5')"></div>
De esta forma al recargar el sitio y al hacerle click a la primera caja veremos algo como:
Desafo
Ahora intenta cambiar el color de una caja al hacerle click.
No avances hasta resolver el ejercicio, ms abajo aparece la respuesta.
Dont repeat yourselve

Es bastante posible que hayas planteado una solucin de este tipo.
1
2
3
4
5
<div class="caja" id="caja-1" onclick="document.getElementById('

<div class="caja" id="caja-2" onclick="document.getElementById(
Sin embargo a pesar de que funciona, requiere copiar y pegar mucho cdigo, y la repeticin junto con el copiado
y pegado son los padres de los errores en la construccin de software.
Qu pasara si ahora queremos que el color de las cajas se cambie a amarillo, o a un rojo menos rojo?
(comentario dicho por un cliente en una ocasin)
Versin 2.0
Para evitar caer en este tipo de situaciones podemos crear una funcin, y que esta transforme a la caja respectiva
1
2
3
4
5
<div
<div
<div
<div
<div
class="caja"
class="caja"
class="caja"
class="caja"
class="caja"
id="caja-1"
id="caja-2"
id="caja-3"
id="caja-4"
id="caja-5"
onclick="pintarRojo(1)"></div>
Y luego en nuestro archivo main.js
1
2
3
var pintarRojo = function(id){

document.getElementById("caja-" + id).style.backgroundColor
}
Esta solucin es bastante mejor si queremos luego cambiar el color o el comportamiento despus de un click
pero todava es innecesariamente complicada, requiere del id de la caja y concatenar el parmetro pasado dentro
de la funcin.
Existe una mejor forma de pasar el contenido a la funcin y es con el operador this.
Versin 3.0
Dentro del onclick el operador this es el mismo div, (ya no es window, hay un contexto y ese contexto es la
respectiva marca), y podemos ocupar este operador para pasarle el div a la funcin en lugar de tener que buscarlo
de nuevo con getElementById.
La solucin en el index sera la siguiente:
1
2
3
<div
<div
<div
<div
class="caja"
class="caja"
class="caja"
class="caja"
onclick="pintarRojo(this)"></div>
4
5
<div class="caja" onclick="pintarRojo(this)"></div>
y en el archivo main.js
1
2
3
var pintarRojo = function(div){

div.style.backgroundColor = "red"
}
versin 4.0
Todava podemos mejorar la solucin aprendiendo un truco nuevo, el mtodo onclick tambin lo podemos
modificar y/o crear desde javascript manipulando directamente el DOM.
De la misma forma que anteriormente obtuvimos todos los prrafos de clase prrafo, este vez obtendremos
todas la cajas de clase caja y sobre cada una de ellas agregaremos el mtodo onclick.
1
2
3
4
5
6
var cajas = document.getElementsByClassName("caja")

for (i = 0; i < cajas.length; i++){
cajas[i].onclick = function(){
pintarRojo(this)
}
}
De esta forma el index.html nos queda:
1
2
3
4
5
<div
<div
<div
<div
<div
class="caja"></div>
class="caja"></div>
class="caja"></div>
class="caja"></div>
class="caja"></div>
A este buena prctica se le llama programar de forma no obstrusiva, o sea no combinar javascript con el HTML
y ayuda a limpiar.
Revisando los eventos registrados
Un dato interesante, podemos revisar los eventos que un elemento tiene registrado haciendo con el inspector de
elementos en el tab de elements y a la derecha en Event Listeners
Contando los segundos.

Obteniendo la fecha
Hasta el momento no hemos trabajado con fechas, pero obviamente que en javascript si se puede.
Podemos obtener la fecha y hora actual con del sistema con:
new Date();
adems el constructor puede ser llamado con otros parmetros obteniendo distintos resultados.
Fecha actual ms la cantidad de milisegundo especificada en number.
new Date(number);
Tambin es posible crear la fecha utilizando mltiples parmetros
new Date(year, month, day, hours, minutes, seconds, milliseconds);
O con un string.
y con un objeto del tipo date tambin podemos mostrar la hora, minutos y segundos.
Mtodos para el manejo de fecha:

A modo de repaso y para aprender sobre el manejo de fechas vamos a construir un contador de segundos en la
pgina.
Para eso necesitamos un HTML bsico.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="time"> </div>
<script src="main.js"></script>
</body>
</html>
Y luego escribimos el javascript, lo primero que necesitamos es obtener y guardar la fecha, luego cada segundo
obtenemos el tiempo nuevamente y cambiamos el HTML.
1
2
3
4
5
6
7
8
var start = new Date();

div = document.getElementById('time');
var now = new Date();
time = now - start
div.innerHTML = time
}, 1000)
Esto nos mostrar los resultados en milisegundos, pero podemos mostrarla en segundos diviendo por mil y
redondeando hacia abajo con la librera Math
1
2
3
4
5
6
7
8
var start = new Date()

div = document.getElementById('time')
var now = new Date()
time = Math.floor((now - start) / 1000)
}, 1000)
Para construir la cuenta regresiva vamos a ocupar parse que devuelve la cantidad de milisegundos que han
pasado desde el primero de enero de 1970, (fecha conocida como Unix Time)
Si queremos un contador de 5 minutos, lo que haremos ser obtener la fecha de ese momento y luego restaremos
de 1 segundo en un segundo. Si un minuto tiene 60 segundos, 5 minutos tienes 3000 segundos y como el
parmetro es en milisegundos, tendremos que agregar 000 ms.
1
2
3
time_left = 3000000
d = new Date(3000000);
time_left = getTime()
Creando una cuenta regresiva.

Utilizando la misma lgica podemos crear una cuenta regresiva de 5 minutos, pero en esta ocasin necesitamos
mover la fecha, eso lo podemos hacer utilizando los getters y setters del objeto date, con getMinutes podemos
obtener la cantidad de minutos actuales y con setMinutes podemos cambiarlo, entonces si los obtenemos y le
sumamos 5 minutos podemos mover la fecha 5 minutos al futuro.
1
2
3
4
5
6
7
8
9
10
var end = new Date()

end.setMinutes(end.getMinutes() + 5);
console.log(end)
time = Math.floor((end - now) / 1000)
}, 1000)
Nos quedan algunas mejoras aplicables, la primera es evitar que el tiempo sea negativo para eso basta con un if
mayor que cero, pero la segunda es ms interesante, vamos a hacer que en lugar de mostrarnos los segundos
restantes nos muestre los minutos y segundos restantes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var end = new Date()

end.setMinutes(end.getMinutes() + 5);
time_left = (end - now) / 1000
if (time_left > 0)
{
minutes = Math.floor(time_left / 60)
seconds = Math.floor(time_left % 60)
div.innerHTML = minutes + ":" + seconds
}
}, 1000)
La funcin setIntreval ahora empieza calculando el tiempo restante, si ese tiempo es mayor que cero, entonces se
calculan los minutos restantes, como un minuto tiene 60 segundos entonces simplemente dividimos por 60, los
segundos son lo que resta de la divisin, para eso existe el mdulo. y finalmente unimos todo en un string para
mostrarlo en pantalla. I Se deja de tarea hacer un cuenta hacia atrs en das, horas minutos y segundos.
Ventanas modales
En esta seccin vamos a construir una ventana modal bsica, a pesar de que es muy sencillo implementarlas con
Bootstrap u otros frameworks de diseo, la idea es aprender a crearlas ocupando nicamente javascript.
Sin diseo una ventana modal se ve as, la caja (modal) abierto est por sobre el texto.
Para hacer una ventana modal necesitamos un HTML con el div modal y un link para abrirlo.
El HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" id="modal-trigger"> Abrir modal </a>
<div id="modal-lorem" class="modal">
<a href="#" id="modal-close-trigger">X</a>
Aprendiendo a hacer ventanas modales con
javascript.
</div>
18
19
20
</body>
</html>
Desde el CSS lo importante es tener dos clases, una para esconder la ventana modal y otra para mostrarla.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.modal{
width:400px;
height:300px;
margin:auto;
top:50px;
left: auto;
position: fixed;
background-color: white;
border:solid 1px black;
display:none;
padding:20px;
}
.modal-show{
transition-timing-function: linear;
transition-delay: 1s;
display: inline;
}
.modal a{
border:solid 1px;
padding:5px;
float:right;
}
y del javascript necesitamos generar dos eventos onclick uno para abrir la ventana modal y otra para cerrarla.
1
2
3
4
5
6
var modal = document.getElementById("modal-lorem");

var trigger = document.getElementById("modal-trigger");
var closeTrigger = document.getElementById("modal-close-trigger"
trigger.onclick = function(){
modal.className = modal.className + " modal-show";
7
8
9
10
11
}
closeTrigger.onclick = function(){
modal.classList.remove("modal-show");
}
Onchange
Es posible adems utilizar el evento onchange, este se gatilla cuando se genera un cambio sobre un elemento de
HTML, por ejemplo si alguien escribe en un input, o selecciona un opcin en un combo box.
Para ser exactos el evento onchange no se realiza tras cada cambio si no cuando el elemento pierde el foco.
Vamos a empezar con un ejemplo sencillo, un input con un valor por defecto que al cargar la pgina muestre el
mismo valor en la consola.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="prueba" value="hola">
</body>
</html>
Javascript (main.js)
1
2
var input = document.getElementById("prueba");

console.log(input.value);
Ahora es donde vamos a registrar el evento, vamos a generar una funcin que permita que cada vez que se
cambie el input muestre en la consola el nuevo valor.
Gracias a onchange podemos agregar una escucha en el input.
1
2
var input = document.getElementById("prueba")

input.onchange = function(){console.log("me cambian wiiii")};
Ahora cada vez que escribamos algo y le quitemos el foco al input, (por ejemplo haciendo click en el resto de la
ventana) veremos un mensaje que diga hey.
Podemos mostrar el valor del input ocupando this.value (donde this) es el input y value lo que se ha escrito.
oninput
Pero como podemos hacer para que nos avise cada cambio?
No podemos con onchange, pero existe otro evento que nos puede ayudar. oninput.
Probemos el mismo ejemplo anterior pero cambiando el evento.
1
2
var input = document.getElementById("prueba");

input.oninput = function(){console.log(this.value)};
De esta forma podremos ver en el navegador que cada vez que ingresamos un caracter se ejecuta el evento.
HTML tag select

Adems de los inputs bsicos de html, existe la etiqueta select, esta en conjunto con la etiqueta option dan una
lista de opciones de donde escoger, la etiqueta funciona de la siguiente forma:
1
2
3
4
<select id="select1">
<option value="1"> Opcin 1 </option>
<option value="2"> Opcin 2 </option>
</select>
Cuando se escoge una de las opciones y se enva el formulario lo que se enva no es el texto que dice opcin, se
enva el value.
Para capturar el valor del select cuando este cambie debemos obtener el input de la etiqueta select
1
2
3
4
5
input = document.getElementById("select1")
input.onchange = function(){
var options = this.options
console.log(options[this.selectedIndex])
}
y listo, este script nos permitir mostrar los resultados cada vez que el usuario selecciona una opcin.
Agregando una opcin

A nuestro select podramos agregarle opciones dinmicamente para eso primero vamos a crear una pgina web
con un input y un select.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="new_option" value="" placeholder="Escribe una opcin"
<select id="options">
<option value="1">1</option>
</select>
</body>
</html>
y crearemos un script que permita agregar una opcin en el momento de que se termine de escribir.
1
2
3
4
5
6
7
8
var input = document.getElementById("new_option")

var select = document.getElementById("options")
input.onchange = function(){
var option = document.createElement("option");
option.text = this.value;
select.add(option, select[0]);
}
En este caso onchange crea un etiqueta html option nueva, agrega el texto basado en el input y luego agrega la
opcin dentro del select.
Para qu nos podra servir esto?, un ejemplo comn el de dos select donde las opciones uno dependen de la
seleccin del primero.
Doble select
Este caso es ligeramente ms complejo que los anteriores, primero desde el html necesitamos dos select y
dependiendo del input del primero tendremos los resultados del segundo, esa parte requiere javascript.
El HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</select>
16
17
18
19
20
21
</select>
</body>
</html>
El javascript
En este caso ordenaremos el cdigo en tres funciones principales, la primera ser para borrar las opciones de un
select, podramos hacerlo especfico para el segundo select, pero es mejor programar las cosas bien una vez y
despus poder reutilizarlas.
1
2
3
4
5
6
var delete_options = function(select){

options_count = select.options.length;
for (var i = 0; i < options_count; i++ ){
select.remove(0);
}
}
El segundo mtodo que necesitamos es uno para aadirle opciones a un select, este recibir dos parmetros, el
select al cual le agregaremos las opciones y un array con opciones que sern las agregadas.
1
2
3
4
5
6
7
var add_options = function(select, options){

for (var i = 0; i < options.length; i ++){
var option = document.createElement("option");
option.text = options[i];
select.add(option, select[i]);
}
}
La tercera parte es la que ya es especfica a nuestro problema, primero crearemos un objeto con todas las
dependencias, de esa forma si el usuario escoge uno, le preguntamos al objeto por 1 y nos devuelve un array con
los valores que hay que ingresar en el segundo select.
1
2
3
var options = {1:["1.1", "1.2", "1.3"], 2:["2.1", "2.2", "2.3"], 3:[

var select1 = document.getElementById("select1");
4
5
6
7
8
9
10
11
12
var select2 = document.getElementById("select2");

add_options(select2, options[1]);
select1.onchange = function(){
index = select1.options[this.selectedIndex].value;
new_options = options[index];
delete_options(select2);
add_options(select2, new_options);
}
finalmente utilizando onchange detectaremos un cambio en el primer select, con eso tomaremos el valor
escogido, lo buscaremos en el array, borraremos las opciones del segundo select y agregaremos las nuevas.
El evento load
Load es un evento que se gatilla cuando el HTML est listo para ser presentado.
Para probarlo cargaremos una imagen pesada de internet.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<img id="imagen1" src="http://www.keenthemes.com/preview/metronic/theme/asse
</head>
<body>
<script src="js/main.js"> </script>
</body>
</html>
y crearemos un javascript que nos muestre una alerta cuando la imagen se termine de cargar.
1
2
3
4
var imagen1 = document.getElementById("imagen1");

imagen1.onload = function(){
alert("imagen cargada");
}
load tambin se puede usar directamente sobre el objeto window, en ese caso se gatillara cuando todo el HTML
est completamente cargado dentro del sitio.
window.onload = function(){
console.log("Todo el sitio cargado");
}
1
2
3
Este tipo de eventos son particularmente tiles a la hora de rediagramar contenido de la pgina, por ejemplo
queremos hacer una galera de fotos y la posicin de algunas fotos depende de otras, en ese caso necesitaramos
que todo el contenido est cargado.
Bubbling
Es el efecto de que los eventos flotan como burbujas hacia la etiqueta superior dentro de las etiquetas anidadas.
Miremos un ejemplo para entender porque debemos manejarlo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div onclick="alert('soy un div')" style="border:solid 1px black
<p onclick="alert('soy un prrafo')" style="border:solid 1px orange
</div>
</body>
</html>
Si hacemos click dentro del prrafo no activaremos un evento, en su lugar activaremos dos.
Entonces si necesitamos activar algo especfico para uno de los elementos, cmo podemos hacerlo?
Target
Target al rescate, target es una propiedad del evento que identifica quien fue el gatillador, pero para eso primero
necesitamos capturar el evento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border:solid 1px black"> soy el div
<p style="border:solid 1px orange"> soy el parrafo </p>
</div>
</body>
</html>
Captulo 14
Ajax
Ajax permite comunicarse asncronamente con servidores, eso tiene la ventaja que podemos cargar datos nuevos
sin tener que recargar la pgina, ademas nos permite capturar datos de otros sitios.
Ajax es una acrnimo que significa Asynchronous JavaScript and XML.
Para nuestro primer ejemplo vamos a consultar la API de wheather.
Recomiendo visitar el sitio http://openweathermap.org/current para tener una buena idea de lo que vamos a
hacer.
API es un acrnimo de Access Protocol Interface, en trminos prcticos una pgina web para programas en
lugar de para seres humanos. Existen muchas APIs online, la mayora de los servicios grandes tienen sus APIs
como son los casos de Youtube, Facebook y Twitter.
En esta ocasin vamos a ocupar la api de openweahtermap para probar nuestro primer llamado ajax. para
lograrlo llamaremos a api.openweathermap.org/data/2.5/weather?q={city name}
Un script que se conecte con la pgina y muestre los resultados sera de la siguiente forma:
1
2
3
4
5
6
7
8
9
10
11
xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q=santiag
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log(xmlhttp.responseText);
}
}
Analicemos el script, la primera lnea,
1. Instanciamos un objeto del tipo XMLHttpRequest para poder realizar una conexi
2
3
4
5
2.
3.
4.
5.
Abrimos la pgina por **GET**, le pasamos la direccin y el tercer parmetros

Enviamos el pedido a la pgina
Esperamos la respuesta
si la respuesta es 200 (o sea OK) mostramos los resultados.
Tras ejecutar el cdigo obtendremos algo de la siguiente forma:
GET, POST y otros

Veamos un par de detalles ms, en el paso dos de la seccin anterior hablamos de abrir la pgina por GET, pero
qu es eso?
Cuando se enva un request a una pgina hay que especificar un verbo, por defecto es GET, este es el verbo que
se ocupa cuando escribes una pgina web en el navegador.
Como se ve en el inspector bajo el tab network vemos que la pgina que el mtodo dice GET.
Pero no es el nico mtodo, tambin existen otros, el segundo ms famoso es POST, este se ocupa cuando
queremos enviar formularios y que no se vea los parmetros enviados en la URL.
Otros conocidos son PUT, PATCH y DELETE.
Javascript asncrono.
En el mismo punto anterior especificamos que abrimos la pgina por GET, le pasamos la direccin y el tercer
parmetros es para que la conexin sea asncrona.
Qu significa que sea asncrona? Significa que no se espera la respuesta, el llamado no bloquea las siguientes
lneas de cdigo y cuando se obtiene una respuesta, que puede ser en 1 segundo o 1 minuto entonces se procesa
la siguiente seccin, pero el cdigo no queda bloqueado esperando una respuesta.
1
2
3
4
5
6
7
{
{
console.log(xmlhttp.responseText);
}
}
Las lneas anteriores son el cdigo que se ejecuta cuando se devuelve el resultado, readyState == 4 significa que
ha sido completamente cargado, y status == 200 implica que el servidor al que llamamos envi correctamente
los resultados.
STATUS
El servidor siempre contesta con un status, son mltiples los status posible, los ms comunes son 200, 404 y 500
200: significa que la operacin trmino correctamente, algunas variantes como el 201, 202 implican que algo fue
creado o aceptado, pero todos los del rango 2xx implican xito en la operacin.
3xx: implica redireccin.
4xx: implica error de parte del cliente, en este caso el cliente es nuestro programa en javascript y significara que
el error lo estamos cometiendo nosotros. Algunas variates son 400 que el request est mal hecho, 401 que
necesitamos autenticarnos primero, 403 que el recurso est prohibido, 404 que el recurso no existe.
5xx: En el rango de los 500 significa que el servidor fall en algn punto de la operacin y por eso mismo no
est devolviendo resultados. No es mucho lo que podamos hacer cuando nos enfrentemos a un 500 ms que
mandar un email reportando el error.
Mostrando los resultados
los resultados obtenidos son un objeto con la siguiente forma:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
"coord": {
"lon": -70.65,
"lat": -33.46
},
"weather": [
{
"id": 501,
"main": "Rain",
"description": "moderate rain",
"icon": "10n"
}
],
"base": "cmc stations",
"main": {
"temp": 284.15,
"pressure": 1011,
"humidity": 81,
"temp_min": 284.15,
"temp_max": 284.15
},
"wind": {
"speed": 7.2,
"deg": 350
},
"clouds": {
"all": 90
},
"dt": 1438819200,
"sys": {
"type": 1,
"id": 4645,
"message": 0.011,
"country": "CL",
"sunrise": 1438860601,
"sunset": 1438898840
},
"id": 3871336,
"name": "Santiago",
"cod": 200
}
El objeto devuelto es un String, lo que nos hara difcil rescatar algn campo especfico, pero podemos
convertirlo en un objeto utilizando JSON.parse(), el siguiente ejemplo muestra como realizar el parseo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
xmlhttp =new XMLHttpRequest();

xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q=santiag
xmlhttp.send();
{
{
string_results = xmlhttp.responseText;
json = JSON.parse(string_results)
console.log(json)
document.getElementById("weather").innerHTML=json.weather
}
}
Qu es JSON?
JSON es acrnimo de Javascript Object Notation, y consiste en un formato para intercambio de datos entre
distintas plataformas, en cierto sentido es similar a XML pero mucho ms simple.
No hay que dejarse engaar por el nombre, JSON permite intercambiar objetos como si fueran string entre
distintas plataformas que ocupan distintos lenguajes de programacin, en este caso nuestro cdigo est en
javascript y no necesitamos saber en que lenguaje est hecho el proyecto en la plataforma, slo tenemos que
saber la URL, el mtodo (GET/POST/) y si tenemos que enviar un objeto cul es el formato, (en nuestro
caso solo recibimos).
Se deja como tarea para el lector obtener del mismo JSON la temperatura actual, mnima y mxima adems del
clima de su ciudad.
Versin 2.0 de nuestra micro aplicacin de clima

En esta ocasin vamos a agregar un select a la pgina, al cambiar el valor gatillaremos el llamado ajax anterior.
HTML
El HTML es muy similar al anterior pero en esta ocasin incluimos el select.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="weather"> </div>
<select type="select" id="city">
<option selected value="Santiago">Santiago</option>
<option value="New York">New York</option>
<option value="Londres">Londres</option>
</select>
</body>
</html>
Javascript
En esta ocasin el cdigo se vuelve ligeramente ms complejo porque tenemos que hacer llamados AJAX en
base a la seleccin de una opcin del select, y adems hacer el llamado ajax cuando se carga la pgina, la mejor
forma de ordenar esto es con dos funciones en lugar de una.
La primera funcin se encargar de observar los cambios del select y cuando vea que hay uno llamar a la
segunda funcin, que su nico propsito es llamar a la api de OpenWeather y mostrar los resultados.
1
2
3
4
5
6
7
8
9
10
11
var optionWatcher = function(){

option = this.options[this.selectedIndex]
city = option.value
console.log(city)
getWeather(city)
}
var getWeather = function(city){

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q="
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
string_results = xmlhttp.responseText;
json = JSON.parse(string_results)
console.log(json)
document.getElementById("weather").innerHTML=json.weather
}
}
}
var city_select = document.getElementById("city")
city_select.onchange = optionWatcher
getWeather("Santiago")
En la ltima seccin del cdigo agregamos el observador de cambios y llamamos a getWeather en la ciudad por
defecto.
Captulo 15
Jquery
Jquery es una biblioteca (tambin conocidas como libreras) con la filosofa de escribir menos, hacer ms. Esta
biblioteca permite manejar de forma sencilla la captura de elementos del DOM, la manipulacin de estos y los
llamados AJAX.
Existen dos versiones de Jquery, las 1.x, y las 2.x son compatibles entre ellas, la principal diferencia es que las 2.x
no son compatibles con versiones de Internet Explorer menores a la versin 9, pero la versin 2 tiene la ventaja
de pesar un 12% menos que la 1.x
Para empezar a trabajar con Jquery podemos descargar la biblioteca de la http://jquery.com/download/ o
podemos utilizar uno de los CDN existentes de la siguiente forma:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
Nuestro nuevo HTML.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main"> </div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"> </
</body>
</html>
Utilizando el objeto Jquery

Jquery es una biblioteca que cuando cargamos se carga sobre window (al igual que todos los objetos), dentro de
la biblioteca podemos encontrar:
1
2
3
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
Lo que significa que para utilizar Jquery lo podemos hacer como JQuery como window.jQuery o como la
favorita de todos, simplemente $
Existen otras bibliotecas que tambin les gusta ocupar el espacio de nombre de $ en ese caso si ocupamos
alguna de esas en conjunto con JQuery tendremos que ocupar la primera o la segunda forma.
Introduccin a selectores
Con Jquery podemos obtener cualquier elemento del DOM utilizando seletores, por ejemplo podemos obtener
el tag body con jQuery("body") o con $("body")
La lista de selectores posibles es gigante pero en esa seccin revisaremos las ms importantes.
Selector
window
document
*
#id
.class
.class,.class
element
Example
Selects
$(window)
Obtiene el objeto principal de javascript, el cual es el

viewport
$(document)
$("*")
$("#identificador")
$(".intro")
$(".bonus,.demo")
$("p")
Obtiene el elemento document, el cual es hijo

directo de window, de el se puede extraer
informacin como el largo del documento
Obtiene todos los elementos
Obtiene al elemento con id="identificador"
Obtiene todos los elementos con class="intro"
Todo los elementos con "bonus" o "demo"
Obtiene Todos los elementos <p>
Al obtener el elemento podemos manipularlo o movernos a travs de el para llegar a otro elemento.
Manipuladores
Ahora que podemos obtener elementos del DOM podemos modificarlo con el mtodo text, como por ejemplo:
$("body").text("Hola, estamos modificando el DOM con Jquery")

El mtodo .text tiene dos posibles uso, el primero para remplazar el contenido dentro de un elemento, el
segundo es para obtenerlo.
por ejemplo supongamos que tenemos dos prrafos uno con id="p1" y el otro con id="p2" y queremos copiar
el texto de p1 en el p2, eso lo podemos lograr con:
1
2
var texto = $("#p1").text()

$("#p1").text(texto)
Adems del mtodo text existe otro bastante similar llamado .html , la ventaja de este mtodo es que nos
permite agregar html dentro de nuestro sitio.
$("#p1").html("hola aqu podemos agregar <span style=\"font-weight:900\"> HTML <
Si en lugar de modificarlo queremos agregar un contenido lo podemos hacer con el mtodo append.
$("body").append("Hola, estamos modificando el DOM con Jquery")
Claramente podramos lograr lo mismo sin utilizar jQuery pero requerira de ms lneas de cdigo y el criterio de
Jquery es Do More, Write Less, o sea hacer ms con menos lneas de cdigo.
document.body.innerHTML = "Hola estamos modificando el DOM"
Todo lo que se puede hacer con jQuery se puede hacer en Javascript, el problema es que en ciertas ocasiones
puede requerir mucho trabajo, jQuery no es una biblioteca para programar menos, pero no para pensar menos y
es por eso que debemos dominar bien Javascript.
Agregando CSS Con Jquery

Otro ejemplo clsico de manipulacin es agregar clases o estilos con Jquery.
$(".parrafo").addClass("super")
Lo anterior es muy poderoso puesto que se va a agregar la clase a super a todos los prrafos seleccionados.
Adems tambin podemos manipular el CSS Dinmicamente, con el mtodo .css, este mtodo recibe dos
parmetros, el primero es el atributo a modificar y el segundo es el valor.
$(".parrafo").css("color", "red")
Tambin podemos obtener el valor de una propiedad especfica con
$(".parrafo").css("color")
En este caso obtendramos el mismo, aunque en el caso de Chrome dira "rgb(255, 0, 0)"
Traversing
Traversing consiste en desplazarse a travs de los nodos del DOM, visitando a los nodos hijos, padres, o
hermanos, por ejemplo si tenemos una lista <ul> utilizando los mtodos de traversing podramos modificar
a los hijos li con: $("ul").children().css("color", "blue")
Veamos un ejemplo completo para hacer ms experimentos y ver otros mtodos de Traversing:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<ul>
<li> primero </li>
<li> segundo </li>
<li> tercero </li>
</ul>
</body>
</html>
Capturamos el nodo ul con $("ul") , y ahora podemos movernos con:

("ul").children().each()
El mtodo .each recibe como parmetro una funcin, esa funcin se aplicar a cada uno de los nodos
seleccionados.
1
2
3
$("ul").children().each(function(){
console.log(this)
})
Obtendremos como resultado en la consola:
1
2
3
4
<li> primero </li>

<li> segundo </li>
<li> tercero </li>
[<li> primero </li>, <li> segundo </li>, <li> tercero </li>]
Lo primeros tres
corresponden a el output del console.log El array mostrado corresponde al $("ul").children() que
muestra los resultados
En algunos casos encontraremos en ejemplos en internet lo siguiente:
1
2
3
$("ul").children().each(function(){
console.log($(this))
})
En este caso obtenderamos como resultado lo siguiente:
1
2
3
4
[li, context:
[li, context:
[li, context:
[<li> primero
li]
li]
li]
</li>, <li> segundo </li>, <li> tercero </li>]
Cul es la diferencia entre el primero y el segundo?
En el primer de los casos obtenemos un string, en el segundo obtenemos un Array que contiene string con el
nombre del nodo en conjunto con el nodo mismo.
Document Ready
La instruccin document ready nos permite ejecutar cdigo de javascript cuando ya todas el DOM haya sido
cargado, pero todava las imgenes, stylesheets y subframes estn cargando y de esta forma no tener conflictos
causados por que la inexistencia de alguna etiqueta debido a que el html no haya sido cargado.
1
2
3
$(document).ready(function(){
console.log("pagina cargada");
});
$(document).ready es el equivalente a:
1
2
3
4
document.addEventListener("DOMContentLoaded",
console.log("Hola");
}
);
function(event) {
Se parece a window.load pero son distintos, window.load se gatilla cuando todos los elementos dentro de window
se han terminado de cargar, $(document).ready cuando el DOM se ha terminado de cargar.
Tiene importancia si estamos cargando muchas fotos pesadas, window.load se gatillara despus de que se
carguen todas las fotos, $(document).ready se gatillara antes despus de leer todo el HTML con las
fotos pero no antes de que estas se carguen.
Existe otra forma ms de hacer lo mismo, que es con:
1
2
$(function() {
});
Esto es el equivalente a $(document).ready
El operador $(this)
Jquery tiene un operador muy curioso llamado $(this) el secreto para entenderlo es comprender que:
$() es la funcin constructora de Jquery
this es una referencia al elemento del DOM que se est invocando (por defecto es el objeto Document)
$(this) aplica el constructor al elemento this y como resultado se obtiene un super this que incluye mtodos
de Jquery
Control de eventos.
jQuery hace que sea fcil de responder a la interaccin del usuario con una pgina web.
Esto significa que se puede escribir cdigo que se ejecuta cuando un usuario hace clic en una cierta parte de la
pgina, o cuando se mueve el mouse sobre un elemento de formulario.
Cuando se produce un evento, se ejecuta la funcin prevista. Dentro de la funcin, this se refiere al elemento que
ha gatillado el evento.
Por ejemplo, este cdigo se ejecutara cuando un usuario haga clic en cualquier elemento li en la pgina:
1
2
3
$( 'ul > li' ).on('click', function( event ) {

console.log( 'clicked ' + $( this ).text() );
});
El objeto evento
1
2
3
4
5
6
7
8
9
$( document ).on( 'click', function( event ) {

console.log( event.type );
// The event type, eg. "click"
console.log( event.which );
// The button or key that was pressed.
console.log( event.target ); // The originating element.
console.log( event.pageX );
// The document mouse X coordinate.
console.log( event.pageY );
// The document mouse Y coordinate.
event.preventDefault();
// Prevent the default action of the event (e.g. fol
event.stopPropagation();
// Stop the event from propagating up to other elem
});
delegacin de eventos
La delegacin de eventos nos permite adjuntar un nico controlador de eventos a un elemento padre, que se
activar para todos los descendientes que coinciden con un selector, independiente si existen estos descendientes
o se aaden en el futuro. Usando el siguiente ejemplo:
Cuando se hace clic en un link en nuestro grupo #list, queremos registrar su texto a la consola.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://domain4.com">Item #4</a></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script
</body>
</html>
Normalmente usaramos el controlador de evento click en los links usando el mtodo .on() Aunque esto
funciona perfectamente bien, hay inconvenientes.
Qu es lo que sucede cuando se aade un nuevo link despus de haber creado el controlador de eventos?
$("#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>"
Si hacemos click en nuestro link que acabamos de agregar, no pasara nada, esto se debe a que al controlador de
eventos directamente vinculado que hemos conectado previamente.
Los eventos directos solamente estn unidos a los elementos en el momento en que el mtodo .on() se llama.
En este caso, como no exista nuestro nuevo link cuando .on() fue llamado, no se dispara el controlador de
eventos.
1
2
3
4
5
// Attach a directly bound event handler

$( "#list a" ).on( "click", function( event ) {
console.log( $( this ).text() );
});
La comprensin de cmo se propagan los eventos es un factor importante para poder aprovechar la delegacin
de eventos. Cada vez que se hace clic en una de nuestras etiquetas link, un evento de clic es disparado por ese
link. Luego se propaga hacia arriba en el rbol DOM, provocando que en cada uno de sus ancestros se ejecute el
controlador de evento clic. Esto significa que cada vez que se hace clic en uno de nuestros links, se est haciendo
clic en todo el cuerpo del documento! Esto se llama propagacin de eventos.
Ya que sabemos cmo funciona la propagacin de eventos, podemos crear un evento delegado.
1
2
3
4
5
// Attach a delegated event handler

$( "#list" ).on( "click", "a", function( event ) {
console.log( $( this ).text() );
});
La Delegacin de eventos se refiere al proceso de utilizacin de la propagacin de eventos para manejar eventos
en un nivel superior en el DOM de el elemento en el que se origin el evento. Se nos permite adjuntar un nico
controlador de eventos para los elementos que existen en la actualidad o en el futuro.
Ajax con Jquery

La base de ajax es el mtodo .ajax de Jquery, su sintaxis bsica es as:
1
2
3
4
5
6
7
8
$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or h
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
9
10
11
12
13
14
15
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
Un llamado ajax se hace siempre a una pgina que puede ser de un servidor nuestro o un externo, el llamado
puede ser GET o Post, el tipo obtenido usualmente ser json o script y los datos sern los datos que nosotros
enviemos.
El mtodo .done slo se ejecutar en caso de que haya xito, el .fail en caso de fracaso del pedido y .always
siempre se ejecutar.
Retomando el ejercicio de Ajax ahora con jQuery

Retomemos el ejemplo de ajax que hicimos previamente con javascript, nuestro HTML era:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="weather"> </div>
<select type="select" id="city">
<option selected value="Santiago">Santiago</option>
<option value="New York">New York</option>
<option value="Londres">Londres</option>
</select>
</body>
</html>
En esta parte no tendremos ningn cambio, lo que haremos ser reimplementar lo que hicimos con javascript
puro en esta ocasin utilizando jquery
Paso 1, seleccionar el valor del select al cambiar
1
2
3
4
5
$(function() {
$("#city").on("change", function(){
console.log($(this).val())
})
});
Paso 2: Hacemos el llamado Ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
var city = $(this).val();
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather',
type: 'GET',
dataType: 'json',
data: {q: city, APPID:"596acd6e062eb1652cc943e8f20407e9"
})
.done(function(data) {
console.log(data);
})
})
});
El APPID lo podemos obtener gratuitamente al hacernos una cuenta en http://api.openweathermap.org/

Al probar este cdigo podremos ver que obtenemos como resultado un objeto JSON
Luego lo nico que nos falta es utilizar esos datos para ponerlos en la pgina.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
var city = $(this).val();
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather',
type: 'GET',
dataType: 'json',
data: {q: city, APPID:"596acd6e062eb1652cc943e8f20407e9"
})
.done(function(data) {
console.log(data);
$("body").append("<p> La temperatura en " + city + " es de "
})
})
});
Si queremos los datos en Celcius en lugar de Fahreneheit simplemente tenemos que aplicar la formula de
conversin.
Ademas explorando el objeto dentro de la consulta podramos darnos cuenta que podemos obtener el clima, la
humedad, el viento y muchas otras cosas interesantes que se dejan como tarea al lector de implementar.

Libro Js

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Libro Js

Enviado por

Direitos autorais:

Formatos disponíveis

Introduccin a la programacin con

javascript desde cero.

3. Encontrando elementos HTML (id, tag o clase)

Es este libro para mi?

Breve historia de javascript

servidor e incluso para construir aplicaciones para escritorio.

Cmo sacarle el mximo provecho al libro?

Cmo la computadora es capaz de entender un

Modo cdigo fuente

Con javascript podemos:

Cmo protejo mi pgina?

A los programadores de estas secciones se les conoce como programadores back-end.

Finalmente abriremos el archivo con el navegador para observar los resultados.

Mostrara hola mundo.

Declaraciones y Asignaciones de variables

Si ahora mostramos con console.log(sin_declarar) obtendremos como resultado undefined.

Se pueden hacer 2 tipos de comentarios, de una lnea o de multiples lneas:

Comentarios de una lnea

// Todo lo que se encuentra despus de // no ser ejecutado.

Comentarios de mltiples lneas

Cul ser el output en la consola?, 2 o 3?

var palabra = "Hola mundo";

var positivo = true;

var arreglo = [];

var arreglo = [2, 3, "Hola", variable, false];

var obj = {};

Puede un array guardar datos del mismo tipo?

console.log("hola " + "mundo ");

Comparacin de igualdad y tipo

Operador distinto y distinto tipo

Operador Mayor (>)

Operador menor (<)

Operador mayor o igual (>=)

Menor o igual (<=)

Tabla de verdad del operador &&

verdadero y verdadero => verdadero

Tabla de verdad del operador ||

verdadero o verdadero => verdadero

El operador not (!)

Tabla de verdad del operador !

!verdadero => falso

var a = "Hola ";

Al hacer comparaciones de este tipo obtendremos errores complejos de controlar.

var edad = 14;

var edad = 14;

if(edad < 13) {

var edad = 30;

Lgica booleana para romper ifs anidados

if (edad > 18 && zurdo == true){

El mayor de tres nmeros

if (a >= b && a >= c){

Piedra papel o tijera

if (a == "Piedra" && b == "Piedra"){

for(var i = 0; i < 10; i++) {

Un for se compone de tres partes:

Sumatoria con For

Sumando slo los nmeros pares

For sin condicin

for (var i = 0; i < 100; ) { console.log(i += 1) }

Los ciclos anteriores se repetirn mientras el valor ingresado no sea un nmero.

Antes de seguir leyendo deberas poder

Break: Terminando el ciclo antes de tiempo.

Continue: Pasando a la siguiente vuelta