Javascript

www.interlat.co
–
info@interlat.co
-‐

h2p://www.facebook.com/interlat
-‐
www.twi2er.com/interlat
-‐
PBX:
57(1)
658
2959

-‐
Bogotá
-‐
Colombia

Aula
Virtual:
h2p://www.interlat.co/moodle/
Conferencista:

Carlos Alonso Pérez

País: España
Módulo III:

Móvil Apps Desarrollo en
Java Script

Antes
de
empezar...
Presentaciones
• Nombre

• Edad

• Estudios

• ¿A
qué
te
dedicas?

• ¿Por
qué
estás
aquí?

• ¿Qué
esperas
de
este
curso?

• ¿Qué
experiencia
Wenes
con
JS,
HTML
y
CSS?

Índice
de
contenidos
• Introducción
y
entorno
de
desarrollo

• Conceptos
de
programación
básicos

• Conceptos
de
programación
avanzados

• Javascript
en
navegadores
Web

• DOM

• Eventos

• AJAX

• Seguridad

• Frameworks

Metodología
PrácWca
• En
la
explicación

• En
labs

• En
ejercicios

Introducción
• ¿Qué
sabemos
de
Javascript?

– Historia

– ¿Es
un
lenguaje
de
programación?
¿de
scripWng?
¿un
subconjunto
de
Java?

– ¿Estructurado
u
OO?

– ¿Compilado
o
interpretado?

– ¿ImperaWvo,
funcional
o
híbrido?

– ¿Fuerte
o
débilmente
Wpado?

– ¿Dinámico?

– ¿Cuáles
son
sus
entornos
de
ejecución?

– ¿Sencillo
o
diicil?

– ¿Potente?

– ¿Tiene
errores?

– ¿Tiene
buena
o
mala
reputación?

¡¡No
conocemos
Javascript!!

Re-‐introducción
• ¿Quién
es
Javascript?

– Historia

– Lenguaje
de
scripWng
más
usado
del
mundo

Re-‐introducción
• ¿Quién
es
Javascript?

– Sintaxis
C

– Completamente
Orientado
a
Objetos

– Interpretado

– Funcional
Híbrido

– Débilmente
Wpado

– Dinámico

– Fácil
de
aprender,
diicil
de
dominar

– Muy
potente

– Sí,
Wene
errores

La
reputación
de
Javascript

Entorno
de
desarrollo
• Obligatorio

– Editor
de
textos

– Navegador
+
debugger

– Documentación:
https://developer.mozilla.org/en-‐US

• Opcional

– IDE

– JSLint:
http://www.jslint.com

– JSﬁddle:
http://js:iddle.net

Programación:
Conceptos
básicos
• Estructura
léxica

• Tipos,
valores
y
variables

• Funciones

• Clases

Pero
antes...
Debugging

Pero
antes...
Debugging
Lab
1

Estructura
léxica
• Juego
de
caracteres:

Unicode
case

sensiWve

• Comentarios
C

• Literales

• Sentencias
/*
* Literales
*/
12
1.2
“Hello World!”
/*
* Sentencias
*/
var a = 1;

Estructura
léxica
• IdenWﬁcadores

– i, my_variable, _dummy, $str, sí, π
• Palabras reservadas
– break delete case do catch else continue false
debugger finally default for function return typeof
if switch var in this void instanceof throw while new
true with null try

Estructura
léxica
• ;
es
opcional!!
/*
* Comportamiento esperado
*/
1 + 2
“hola mundo!”
/*
* Comportamiento inesperado!
*/
var f = 2
1 + f
(2 + 3) * 2

Tipos
primiWvos
• Numéricos

• Cadenas

• undeﬁned

• null

• Booleanos

Number
• Sintaxis:
[dígitos][.dígitos][(E|e)(+|-‐)dígitos]

• Enteros:

– 0,
3,
10000000

• Floats:

– 3.14,
2345.678,
.333333,
6.02e23,
1.45632E-‐32

Number:
Valores
especiales.
console.log(1E309);
console.log(-1E309);
console.log(1/0);
Inﬁnity
console.log(1/-0);
console.log(0 == -0);
-‐0
console.log(1/”hola”);
console.log(-1E309);
console.log(1/0);
NaN
"hola" == NaN;
isNaN("hola");
(1/-0) == Infinity;
isFinite(1/-0);
isFinite()
isNaN()

Number:
Precisión
Enteros:
Hasta
15
dígitos Float:
Tanto
como
sea
posible
999999999999999
9999999999999999
0.3 - 0.2 == 0.2 - 0.1
0.2 - 0.1
0.3 - 0.2
// Solución toFixed(n)
(0.3 - 0.2).toFixed(2)
Problema
de
todos
los
sistemas
binarios!!

String
• Deﬁnición
=>
“Hola Mundo!”

• Concatenación
=>
“Hola” + “Mundo!”

• Longitud
=>
“Hola Mundo!”.length

• Array
de
caracteres
=>
“Hola Mundo!”[0]

undeﬁned
y
null
• undeﬁned
=>
no
inicializado

• null
=>
no
hay
objeto
o
valor

Booleanos
• true
y
false

• Tabla
de
verdad:

– false
=>
undeﬁned,
null,
0,
-‐0,
NaN
y
“”

– true
=>
Todo
lo
demás

Detectando
Wpos
• Operador
typeof
/*
* Detección de tipos
*/
typeof 2
typeof 2.33
typeof “Hola Mundo!”
typeof undefined
typeof true
typeof null // Es un objeto!!

Tipos
proporcionados
por
JS
• Fechas
y
horas

• El
objeto
global

• Wrapper
objects

• Conversión
de
Wpos
(CasWng)

Fechas
y
horas
• Clase
Date

• Documentación:

– h2ps://developer.mozilla.org/en-‐US/docs/JavaScript/Reference/Global_Objects/Date
/* Ejemplo uso de fechas */
var now = new Date();
var future = new Date(now.getTime() + 300000);
future - now;

Fechas
y
horas:
Ejercicio!
• Calcular
el
número
de
días
que
han
pasado

desde
mi
nacimiento
el
19
-‐
Marzo
-‐
1985.

• Documentación:


Fechas
y
horas:
Ejercicio!
• Calcular
el
número
de
días
que
han
pasado

desde
mi
nacimiento
el
19
-‐
Marzo
-‐
1985.

• Documentación:

/*
* Solución: 10084.7249...
*/
var carlos = new Date(1985, 2, 19);
var millis = now - carlos;
millis / 1000 / 60 / 60 / 24;

El
objeto
global
• Creado
al
inicializar
el
intérprete
JS

• Es
nuestro
contexto
de
ejecución
(this)

• Proporciona
métodos

– isNaN(),
isFinite(),
...
/*
* El objeto global nos permite usar sus métodos
* directamente, sin usar this
*/
isNaN(“hola”);
this.isNaN(“hola”);

El
objeto
global
• Proporciona
Constructores:

– Date,
Object,
...

• Almacena
nuestras
variables
globales
/*
* Constructores
*/
var now = new this.Date();
now;
/*
* Almacena variables
* globales
*/
this.now;

Wrapper
Objects
/*
* Ejemplo 1
*/
var s = “Hola Mundo!”;
console.log(typeof s);
s.charAt(0);
/*
* Ejemplo 2
*/
var s = “Hola Mundo!”;
s.my_dummy_var = 56;
s.my_dummy_var;
• Conversión
automáWca
entre
Wpos
primiWvos

y
su
correspondiente
‘wrapper
object’

Wrapper
Objects
/*
* Ejemplo 1
*/
var s = new String(“Hola!”);
console.log(typeof s);
s.my_dummy_var = 56;
s.my_dummy_var;
/*
* Ejemplo 2
*/
var n = new Number(5);
console.log(5 == n);
5 === n;
• Conversión
automáWca
entre
‘wrapper

objects’
y
su
Wpo
primiWvo

Conversión
de
Wpos
(CasWng)
/*
* Ejemplos
*/
10 + “objects” // “10 objects”
“7” * “4” // 28
var n = 1 - “x” // NaN
n + “objects” // “NaN objects”
10 + “” // “10”
+”1” // 1
“1” - 0 // 1
!!”0” //true (doble negación)
• CasWng
implícito

Conversión
de
Wpos
(CasWng)
/*
* Ejemplos
*/
Number(“2”) // 2
String(false) // “false”
Boolean([]) // true
Object(3) // new Number(3)
parseInt(“3 min”) // 3
parseInt(“0.1”) // 0
parseFloat(“0.1”) // 0.1
• CasWng
explícito

Variables
• Declaración

• Scope

Variables:
Declaración
/*
* Declaración e inicialización
*/
var i; // Declaración simple
var i, j, k; // Declaración múltiple
var i = 0; // Inicialización simple
var i = 0, j = 1, k = 2; // Inicialización múltiple
var a, b = “hola”; // Declaración + inicialización

Variables:
Redeclaración
y
omisión
/*
* Redeclaración
*/
var a = 1;
var a = 2;
a; // 2
/*
* Redeclaración
*/
var a = 1;
var a;
a; // 1
/*
* Omisión
*/
a = 1;
a // 1

Variables:
Scope
var scope = “global”;
function checkscope() {
scope = “local”;
}
checkscope();
scope; // local
• Global:
Variables

disponibles
en
cualquier

sección
del
código.
var scope = “local”;
}
checkscope();
scope; // global
• Local:
Variables
deﬁnidas

dentro
de
una
función.

• Eclipsan
variables
globales

con
el
mismo
nombre.

Variables:
Scope
• El
problema
de
deﬁnir
variables
omiWendo
‘var’.
scope = “global”;
scope = “local”;
localvar = “local”;
}
checkscope();
scope; // local => ¡¡Ha sido modificada!!
localvar; // local => ¡¡Está definida!!

Variables:
Scope
• Función:
CaracterísWca
de
JS.
La
variable
está
disponible

en
todo
el
cuerpo
de
la
función.
No
sólo
en
el
bloque

donde
se
deﬁne.
if (true) {
var j = 1;
if (true) {
var k = 2;
}
}
console.log(j); // 1
console.log(k); // 2
}
checkscope();

Variables:
Scope
• Variable
hoisWng:
Otra
caracterísWca
de
JS.
¡¡Las

variables
deﬁnidas
en
una
función
están
disponibles

antes
incluso
de
ser
deﬁnidas!!
console.log(scope); // undefined
var scope = “local”;
console.log(scope); // local
}
checkscope();

Objetos
• Tipo
de
dato
fundamental
de
JS

• Colección
no
ordenada
de
propiedades
con

nombre
y
valor

• Dinámicos

Objetos:
El
‘prototype’
• Todas
las
clases
JS
Wenen
un
prototype

asociado
que
deﬁne
sus
atributos
y
métodos.

• Todos
los
objetos
de
una
clase
tendrán
todos

los
atributos
y
métodos
de
su
prototype
y

pueden,
además,
tener
otros
atributos
y

métodos
propios.

Objetos:
Creación
• Literal
var empty = {}; 
var point = {x:1, y:3}; 
var book = {
title: "The title",
author: {
name: "author name", 
surname: "author surname" 
}};

Objetos:
Creación
• Operador
‘new’
var o = new Object();
var d = new Date();
• Object.create();
var o = Object.create(Object.prototype);
var p = Object.create(Object.prototype, { x: 1, y: 2});
var d = Object.create(Date.prototype); // Excepción!!

Objetos:
Propiedades
• Tienen
un
nombre,
un
valor
y
atributos.

• Son
accesibles
con
notación
de
punto
(.)
o

corchetes
([])

• Se
pueden
añadir
o
eliminar
en
Wempo
de

ejecución.

• Pueden
ser
propias
o
heredadas.

Objetos:
Propiedades
• Añadiendo
propiedades
var o = {};
o.first_prop = “first”;
o[“second_prop”] = “second”;
• Accediendo
a
propiedades
o[“first_prop”]; // first
o.second_prop; // second

Objetos:
Propiedades
• Borrando
propiedades
delete o.first_prop;
¡JS
es
dinámico!

Propiedades:
Ejercicio!
• Crear
una
función
que
reciba
tres
parámetros,
un
objeto,
el

nombre
de
una
propiedad
y
un
valor.

• La
función
debe
comprobar
si
el
objeto
Wene
una

propiedad
con
ese
nombre
y
si
la
Wene
retornar
el
valor
y

sino
deﬁnirla,
asignar
el
valor
recibido
en
el
tercer

parámetro
y
retornarlo.

Propiedades:
Ejercicio!
• Crear
una
función
que
reciba
tres
parámetros,
un
objeto,
el

nombre
de
una
propiedad
y
un
valor.

• La
función
debe
comprobar
si
el
objeto
Wene
una

propiedad
con
ese
nombre
y
si
la
Wene
retornar
el
valor
y

sino
deﬁnirla,
asignar
el
valor
recibido
en
el
tercer

parámetro
y
retornarlo.
function f(obj, property, value) {
if (!obj[property]) {
obj[property] = value;
}
return obj[property];
}

Propiedades:
Detección
• Operador
‘in’:
Detecta
propiedades
propias
o
heredadas.
var o = { x: 1 };
“x” in o; // true
“y” in o; // false
“toString” in o; // true
• Método
hasOwnProperty():
Detecta
propiedades
propias,

no
heredadas,
sean
enumerables
o
no.
var o = { x: 1 };
o.hasOwnProperty(“x”); // true
o.hasOwnProperty(“y”); // false
o.hasOwnProperty(“toString”); // false

Propiedades:
Detección
• Método
propertyIsEnumerable():
Detecta
propiedades

propias
y
enumerables
var o = { x: 1 };
o.propertyIsEnumerable(“x”); // true
o. propertyIsEnumerable(“y”); // false
o. propertyIsEnumerable(“toString”); // false

Propiedades:
Enumeración
• Bucle
for/in:
Propiedades
propias
o
heredadas

enumerables
var o = { x: 1, y: 2, z: 3 };
for(p in o) {
console.log(p);
console.log(o[p]);
}
• Método
Object.keys(objeto):
Retorna
un
Array
con

las
propiedades
propias
y
enumerables
• Método
Object.getOwnPropertyNames(objeto):

Retorna
un
Array
con
las
propiedades
propias,
sean

enumerables
o
no

Propiedades:
ComparaWva
Método
de

Acceso
Propias Heredadas Enumerables
No

enumerables
Acceso
simple
(.
ó
[]) Sí Sí Sí Sí
Operador
in Sí Sí Sí Sí
Método

hasOwnProperty()
Sí No Sí Sí
Método

propertyIsEnumerable
()
Sí No Sí No
Bucle
for/in Sí Sí Sí No
Object.keys() Sí No Sí No
Object.getOwnProp
ertyNames()
Sí No Sí Sí

Accessor
properWes
• Consultar
o
asignar
una
‘accessor
property’
signiﬁca
la

ejecución
del
método
get/set
correspondiente
var o = {
_a: 3,
get a() {
return this._a;
},
set a(value) {
this._a = value;
}
};
o.a = 4;
o.a;

Propiedades:
Atributos
• Value:
El
propio
valor
de
la
propiedad.

• Writable:
Determina
si
es
modificable
o
no.

• Get:
Función
ge2er

• Set:
Función
se2er.

• Enumerable:
Determina
si
la
propiedad
es
enumerable
o

no.

• Configurable:
Determina
si
los
estos
atributos
pueden
ser

modificados
o
no.

Atributos:
Aplicabilidad
Atributo Data
Property Accessor
property
Value Sí No
Writable Sí No
Get No Sí
Set No Sí
Enumerable Sí Sí
Conﬁgurable Sí Sí

Propiedades:
Manejando
atributos
• Método
Object.getOwnPropertyDescriptor():

Retorna
un
objeto
que
describe
los
atributos
de
la

propiedad.
/*
* Obtener Property Descriptor
* para una propiedad
*/
var o = { x: 1, y: 2 };
Object.getOwnPropertyDescriptor(o, “x”);

Propiedades:
Manejando
atributos
• Método
Object.defineProperty():
Crea
o
modiﬁca

los
atributos
de
una
propiedad
si
ésta
es
propia
y

conﬁgurable.
var descriptor = { value: 1, writable:
true, enumerable: false, configurable:
true};
var o = {};
Object.defineProperty(0, “x”, descriptor);
o.x; // 1
Object.keys(o); // []

Manejando
atributos:
Ejercicio!
• Dada
esta
inicialización,
¿se
podría
cambiar
el
valor
de
o.x?

¿Y
el
de
o1.x?
¿Cómo?

• Pista:
¿Cuál
es
el
valor
por
defecto
del
atributo

conﬁgurable?
var o = {};
Object.defineProperty(o, “x”,
{ value: 1, writable: false });
var o1 = { x: 1 };
Object.defineProperty(o1, “x”,
{ writable: false });

Manejando
atributos:
Solución
• La
solución
está
en
el
atributo
configurable
de
la
propiedad

y
los
valores
por
defecto,
que
dependen
del
método
que

usemos
para
definir
la
propiedad.

• Definición
literal:
Todos
los
atributos
=
true.

• Definición
usando
Object.defineProperty:
Todos
los

atributos
no
especificados
=
false.
Object.defineProperty(o, “x”,
{ value: 2 }); // Error!! x no es configurable
Object.defineProperty(o1, “x”,
{ value: 2 }); // OK

Arrays
• Creación
var empty = [];
var fill = [1, 2, 3, 4];
var empty2 = new Array();
var withSize = new Array(10);
var fill2 = new Array(1, 2, 3, 4);
• No
Wpados
var misc = [1, “hola”, true, , {}, []];
var misc2 = new Array(1, “hola”, true, {}, []);

Arrays
• Crecen
dinámicamente
var a = [];
a[3] = “hola”;
a;
• Son
objetos,
por
tanto
admiten
propiedades!!
var a = [];
a.hola = “hola”;
a.hola;

Funciones
• Son
Wpos
primiWvos:

• Se
pueden
usar
como
variables

• Se
pueden
pasar
como
argumentos
a
otras
funciones

• Pueden
ser
el
retorno
de
otra
función

• Se
les
pueden
asignar
propiedades
e
incluso
invocar
métodos
en
ellas.

Funciones
• Deﬁnición
// Como expresión
function f(x) {
return x + 1;
}
// Como sentencia
var f = function(x) {
return x + 1;
}
// Anidada
function hypotenuse(a, b) {
function square(x) { return x * x; };
return Math.sqrt(square(a) + square(b));
}

Funciones:
Scope
léxico
• Tienen
acceso
a
todas
las
variables
deﬁnidas
en
el
bloque

donde
son
deﬁnidas.
function a(x) {
var y = “y”;
function b() {
console.log(x + “ “ + y + “ “ + z); // x y z
}
var z = “z”;
b();
}
a(“x”);

Métodos
• Son
funciones
que
son
propiedades
de
algún
objeto.

• Se
ejecutan
en
el
contexto
del
objeto.
var o = {
m: function() {
console.log(this === o);
}
}

Métodos
con
funciones
anidadas
• Fuente
común
de
errores
debido
al
contexto
(this).
var o = {
m: function() {
console.log(this === o); // true
function f() {
console.log(this === o); // false
console.log(this); // Es el objeto global!!
}
f();
}
}
o.m();

Métodos
con
funciones
anidadas
• La
solución
es
el
uso
del
scope
léxico
var o = {
m: function() {
var self = this;
function f() {
console.log(self === o); // true
}
f();
}
}
o.m();

Funciones:
Ejercicio!
• ¿Los
argumentos
en
JS
se
pasan
por
valor
o
por
referencia?

¿Y
sin
son
objetos?

Funciones:
Ejercicio!
• ¿Los
argumentos
en
JS
se
pasan
por
valor
o
por
referencia?

¿Y
sin
son
objetos?
/*
* Solución
*/
function f (value, object) {
value ++;
object.x ++;
}
var o = { x: 1 };
var v = 1;
f(v, o);
console.log(o);
console.log(v);

Funciones:
Argmentos
• No
se
comprueba
ni
el
Wpo
ni
el
número
function a(x, y) {
console.log(“Función ejecutada correctamente”);
}
a(1); // Con un argumento menos
a(1, 2, 3); // Con un argumento mas

Funciones:
Argmentos
• Argumentos
opcionales
=
undeﬁned
function saySomething(/*optional*/something) {
something = something || “hello”;
console.log(something);
}
saySomething();
saySomething(“goodbye”);

Funciones:
Argmentos
• Argumentos
extra:
‘varargs
funcWons’.

• JS
proporciona
a
todas
las
funciones
un
array
‘arguments’

• Nos
permite
comprobar
si
una
función
se
ha
invocado
con
el
número

correcto
de
argumentos.

• Nos
permite
deﬁnir
funciones
que
trabajen
sobre
un
número
variable
de

argumentos.
function f(x, y, z) {
if (arguments.length != 3) {
throw new Error(“Wrong arguments number”);
}
// ...
}

Funciones:
Ejercicio!
• Deﬁnir
una
función
que
retorne
el
número
máximo
de

todos
los
que
recibe
como
argumentos.

• La
función
no
debe
deﬁnir
ningún
argumento:

• function max() { ... }
• Pista:
Podéis
usar
Number.INFINITY
y

Number.NEGATIVE_INFINITY

Funciones:
Ejercicio!
• Deﬁnir
una
función
que
retorne
el
número
máximo
de

todos
los
que
recibe
como
argumentos.

• La
función
no
debe
deﬁnir
ningún
argumento:

• function max() { ... }
• Pista:
Podéis
usar
Number.INFINITY
y

Number.NEGATIVE_INFINITY
function max(/* ... */) { 
var max = Number.NEGATIVE_INFINITY; 
for (var i = 0 ; i < arguments.length ; ++i) { 
if (arguments[i] > max) { 
max = arguments[i] 
} 
} 
return max; 
} 
console.log(max()); 
console.log(max(1, 2, 1000, 3));

Funciones:
Propiedades
• Las
funciones
son
objetos,
por
tanto
pueden
tener

propiedades.
function uniqueValue() {
return uniqueValue.c ++;
}
uniqueValue.c = 1;
console.log(u());
console.log(u());
console.log(u());

Funciones:
call
y
apply
• call
y
apply
son
métodos
de
las
funciones
que
nos

permiten
invocarlas
indirectamente,
¡como
si
fueran

métodos
de
otros
objetos!.

• Se
diferencian
en
la
forma
de
recibir
los
argumentos.
var num = { value: 1 };
function sum(value) {
return this.value + value;
}
console.log(sum.apply(num, [1]));
console.log(sum.call(num, 2));

Clases
• Clase
en
JS:
Conjunto
de
objetos
que
heredan
propiedades

del
mismo
protoWpo.
function range(from, to) {
var r = Object.create(range.prototype);
r.from = from;
r.to = to;
return r;
}
range.prototype = {
includes: function(x) {
return this.from <= x && x <= this.to;
},
toString: function() {
return “(“ + this.from + “..” + this.to + “)”;
}
};
var r = range(1, 3);
console.log(r.includes(2));
r.toString();

Clases:
Constructores
• En
JS
se
deﬁne
una
clase
mediante
una
función

constructor
y
su
prototype.
function Range(from, to) {
this.from = from;
this.to = to;
}
Range.prototype = {
includes: function(x) {
return this.from <= x && x <= this.to;
},
toString: function() {
return “(“ + this.from + “..” + this.to + “)”;
}
};
var r = new Range(1, 3);
console.log(r.includes(2));
r.toString();

Clases:
operador
‘new’
• Convierte
una
función
simple
en
un
constructor:

• El
intérprete
creará
un
nuevo
objeto.

• Lo
converWrá
en
el
contexto
actual
(this).

• Le
asignará
la
propiedad
prototype
al
prototype
de
la

función

• Lo
usará
como
retorno
de
la
función
(constructor).

Operador
‘new’:
Ejercicio!
• ¿Qué
ocurriría
si,
por
error,
invocamos
un
constructor
sin

el
operador
new?

• ¿Qué
objeto
se
creará?

• ¿Qué
efecto
tendrá
el
código
del
constructor?

• ¿Cuál
será
el
valor
retornado?

Operador
‘new’:
Ejercicio!
• ¿Qué
ocurriría
si,
por
error,
invocamos
un
constructor
sin

el
operador
new?

• ¿Qué
objeto
se
creará?

• ¿Qué
efecto
tendrá
el
código
del
constructor?

• ¿Cuál
será
el
valor
retornado?
• No
se
creará
ningún
objeto
nuevo.

• El
contexto
desde
el
que
se
invoque
la
función
sufrirá
las

modiﬁcaciones
resultantes
del
código
del
constructor.

• El
valor
de
retorno
será
undeﬁned.

Clases:
Herencia
• Heredar
en
JS
signiﬁca
que
el

protoWpo
de
la
función
constructor

de
la
clase
hija
es
un
objeto
de
la

clase
padre.

• La
función
constructor
de
la
clase

padre
Wene
como
prototype
un

objeto
de
su
clase
padre.

• La
función
constructor
de
Object
es

la
única
del
lenguaje
cuyo
prototype

es
null.

• Así
se
consWtuye
la
cadena
de

protoWpos
(prototype
chain)
Object()
proto
=
null
Parent()
proto
=
Object
Child()
proto
=
Parent

Clases:
Herencia
function Parent() {
}
Parent.prototype = {
sayHello: function() {
console.log("Hello");
}
};
function Child() {
}
Child.prototype = new Parent();
Child.prototype.sayGoodbye =
function() {
console.log("Goodbye");
};
var child = new Child();
child.sayHello();
child.sayGoodbye();
child.toString();
Object()
proto
=
null
Parent()
proto
=
Object
Child()
proto
=
Parent

Detectando
clases
• Mediante
el
prototype:
Un
objeto
es
de
una
clase
si
su

prototype
y
el
de
su
constructor
son
el
mismo.
• Los
objetos
de
una
clase
no
Wenen
propiedad
prototype

deﬁnida.
La
propiedad
prototype
es
de
la
función

constructora.
// En el ejemplo anterior...
child.prototype; // undefined!!
Object.getPrototypeOf(child);
// Retorna el objeto Parent que asignamos como
// prototype a la función Child y extendimos

Detectando
clases:
Ejercicio!
• Escribir
una
función
que
reciba
dos
argumentos,
un
objeto

y
un
constructor
e
indique
si
el
objeto
es
de
ese
Wpo
o
de

algún
ancestro
de
ese
Wpo.

Detectando
clases:
Ejercicio!
• Escribir
una
función
que
reciba
dos
argumentos,
un
objeto

y
un
constructor
e
indique
si
el
objeto
es
de
ese
Wpo
o
de

algún
ancestro
de
ese
Wpo.
function isKindOfClass(object, klazz) { 
var ret = false; 
while (!ret && object) { 
ret = Object.getPrototypeOf(object) === klazz.prototype; 
object = Object.getPrototypeOf(object); 
} 
return ret; 
}
 
function Test() {
}
var t = new Test(); 
isKindOfClass(t, Test); // true 
isKindOfClass(t, Object); // true 
isKindOfClass(t, String); // false

Detectando
clases
• Operador
instanceof:
Detecta
si
un
objeto
es
instancia

de
una
clase
o
ancestro.
Exactamente
lo
mismo
que

acabamos
de
implementar!!
// En el ejemplo anterior...
child instanceOf Parent; // true
child instanceOf Object; // true
child instanceOf String; // false

Detectando
clases
• Propiedad
constructor:
Propiedad
que
Wenen
todos

los
protoWpos,
aunque
JS
no
siempre
puede
asignarla.
Parent()
prototype
Constructor
constructor
Prototype
sayHello:
...
new
Parent()
Instancias
new
Parent()
hereda
hereda

Detectando
clases
• JS
no
puede
asignarla
automáWcamente.
function Parent() {
}
constructor: Parent,
}
};
• JS
sí
puede
asignarla
automáWcamente.
function Parent() {
}
Parent.prototype.sayHello = function() {
};
(new Parent()).constructor;

Modificación
dinámica
de
clases
• JS
permite
modificar
los
objetos
prototype
de
cualquier

constructor
en
Wempo
de
ejecución
y
la
modificación

afectará
incluso
a
los
objetos
ya
existentes.
function Parent() {
}
}
};
var p = new Parent();
Parent.prototype.sayHi = function() {
console.log(“Hi”);
};
p.sayHi();

Modiﬁcación
dinámica
de
clases:

Ejercicio!
• Modiﬁcar
la
clase
Number
y
añadirle
un
método
que
nos

indique
si
su
valor
es
par
o
no.

• Mirad
la
documentación
de
Number
y
su
prototype

Modiﬁcación
dinámica
de
clases:

Ejercicio!
• Modiﬁcar
la
clase
Number
y
añadirle
un
método
que
nos

indique
si
su
valor
es
par
o
no.

• Mirad
la
documentación
de
Number
y
su
prototype
/*
* Solución
*/
Number.prototype.even = function() {
return this.valueOf() % 2 == 0;
}
var n = 4;
n.even();

Métodos
estáWcos
• No
existen
en
JS,
pero
es
tan
ﬂexible
que
podemos

simularlos
como
métodos
de
la
función
constructora.
Parent.buildNew = function() {
return new Parent();
}
var p = Parent.buildNew();

Programación:
Conceptos

avanzados
• Scope
Chain

• Closures

• Subclases

• Clases
Abstractas

• Comparación
de
objetos

• Módulos

Scope
Chain
• Conceptos:

– Scope:
Conjunto
de
líneas
de
código
en
las
que
una

variable
está
definida.
Puede
ser:

• Global:
Variables
globales,
que
están
definidas
en
todo

el
programa.

• Local:
Variables
definidas
en
la
función
que
son

declaradas
y
en
las
funciones
anidadas
dentro
de
esa

función.

Scope
Chain
• JS
almacena
las
variables
con
scope
local
para
cada
fragmento

de
código
como
propiedades
de
un
objeto
interno.

• El
scope
chain
es
una
cadena
(lista)
de
objetos
que
deﬁnen
las

variables
que
están
en
scope.

• Cada
fragmento
de
código
Wene
un
scope
chain
asociado.

• Cuando
JS
necesita
buscar
una
variable
recorre
el
scope
chain

de
forma
ordenada
hasta
que
encuentra
algún
objeto
de
la

cadena
que
deﬁne
la
variable
o
la
cadena
termina
y
lanzaría
un

ReferenceError.

• Cuando
una
función
es
invocada,
un
nuevo
objeto
se
añade
al

scope
chain
con
las
variables
locales
de
la
función.

Scope
Chain
var a = 1;
function f(c) {
var b = 2;
// Scope chain 2
}
// Scope chain 1
f(3);
• Ejemplo:
{ a: 1,
f: function() }
{ a: 1,
f: function() }
{ c: 3,
b: 2 }
Scope
Chain
1
Scope
Chain
2
• El
proceso
de
resolución
de
variables
sigue
la
cadena
en
el

senWdo
de
las
ﬂechas.

Scope
Chain
var a = 1;
function f(c) {
var b = 2;
function s(d) {
// Scope chain(i)
return b + c;
}
return s(4);
}
for (var i = 0 ; i < 3 ; ++i) {
f(i);
}
• Ejemplo
con
funciones
anidadas:
{ a: 1,
f: function(),
i: i }
{ c: i,
b: 2,
s: func }
Scope
Chain(i)
{ d: 4 }

Scope
chain:
Ejercicio!
var a = 1;
function f(c) {
var b = 2;
function s(d) {
// Scope chain(i, j)
return b + c + d;
}
return s(j);
}
for (var i = 0 ; i < 3 ; ++i) {
for (var j = 0 ; j < 3 ; ++j) {
f(i);
}
}
• Dibujar
el
Scope
Chain
que
exisWrá
en
el
punto
del
comentario.

• Recordad:

• Que
ese
Scope
Chain
dependerá
de
las
variables
i
y
j.

• Que
cada
vez
que
una
función
es
invocada,
sus
funciones
anidadas
son
deﬁnidas
nuevamente

• Que
solo
se
añade
un
nuevo
objeto
al
Scope
Chain
cuando
ocurre
una
invocación
de
una
función,
pero

el
estado
del
resto
de
objetos
del
Scope
Chain
puede
variar
en
cualquier
momento
(nuevas
variables
o

cambio
de
valor
de
variables
ya
existentes.)

Scope
chain:
Solución!
{ a: 1,
f: function(),
i: i,
j: j }
{ c: i,
b: 2,
s: func }
Scope
Chain(i,
j)
{ d: j }
var a = 1;
function f(c) {
var b = 2;
function s(d) {
// Scope chain(i, j)
return b + c + d;
}
return s(j);
}
for (var i = 0 ; i < 3 ; ++i) {
for (var j = 0 ; j < 3 ; ++j) {
f(i);
}
}
• ¿Dudas?
¿Preguntas?
¿RepeWmos?

Closures
• JS
usa
Scope
Léxico,
es
decir,
las
funciones
son
ejecutadas

usando
el
scope
existente
cuando
fueron
deﬁnidas,
no
cuando

son
invocadas.

• Para
implementar
Scope
Léxico,
cada
función
guarda

internamente
el
código
a
ejecutar
y
una
referencia
al
scope

chain
existente
cuando
se
deﬁne.

• Objeto
función
+
Scope
Chain
=
Closure

Closures
• Mismo
Scope
Chain
var scope = “global scope”;
var scope = “local scope”;
function f() {
return scope;
}
return f();
}
checkscope(); // “local scope”
• Diferente
Scope
Chain
function f() {
return scope;
}
return f;
}
a = checkscope();
a(); // “local scope”
• Sorprendidos,
¿verdad?

Closures
• Mismo
Scope
Chain
function f() {
// Scope chain
return scope;
}
return f();
}
checkscope(); // “local scope”
{ scope: “global”,
checkscope: func}
{ scope: “local”,
f: func }
{}
checkscope: func}
f: func }
{}
Scope
chain Scope
chain
f
Scope
chain
f()

Closures
• DisWnto
Scope
Chain
function f() {
// Scope chain
return scope;
}
return f;
}
var fn = checkscope();
fn(); // “local scope”
checkscope: func
fn: func}
{
checkscope: func}
f: func }
{}
Scope
chain Scope
chain
f
Scope
chain
f()

Closures:
Private
properWes
• Un
posible
uso
de
las
closures
es
deﬁnir
propiedades

privadas
en
objetos.
function Test() {
var my_private = “private”;
Object.defineProperty(this, “my_private”, {
get: function() {
return my_private;
}
});
}
var t = new Test();
t.my_private = “not private”; // No tiene efecto o da error
t.my_private; // private

Closures:
Ejercicio!
• Deﬁnir
una
clase
Counter
que
tenga
únicamente
dos

métodos
públicos
y
ninguna
propiedad:

• count():
Devuelve
el
número
de
llamadas
recibidas
a
esta
función.

• reset():
Pone
a
0
el
contador

Closures:
Ejercicio!
• Deﬁnir
una
clase
Counter
que
tenga
únicamente
dos

métodos
públicos
y
ninguna
propiedad:

• count():
Devuelve
el
número
de
llamadas
recibidas
a
esta
función.

• reset():
Pone
a
0
el
contador
function Counter() {
var counter = 0;
this.count = function() {
counter ++;
return counter;
};
this.reset = function() {
counter = 0;
};
}

Subclases
• Hasta
ahora,
cuando

necesitamos
extender

una
clase,
simplemente

encadenamos
sus

protoWpos.

• ¿Qué
ocurre
cuando

necesitamos
inicializar

el
padre?
function Parent() {
this.initialized = true;
}
initialized: false,
if (this.initialized) {
}
}
};
function Child() {
}
Child.prototype.sayGoodbye =
function() {
console.log("Goodbye");
};
var c = new Child();
child.sayHello();

Subclases
• La
solución
es
‘aplicar’
el
constructor
del
padre
a
nuestro

contexto.
function Child() {
Parent.apply(this, arguments);
}

Subclases:
Ejercicio!
• En
el
código
de

ejemplo,
¿cómo

haríais
para
que
la

llamada
a
sayHello
en

el
hijo
ejecute

también
sayHello
en

el
padre?
function Parent() {
}
}
};
function Child() {
}
Child.prototype.sayHello = function() {
console.log(" from child");
};
child.sayHello();

Subclases:
Solución!
• Igual
que
invocamos
al
constructor
de
la
función
padre

con
apply,
hacemos
lo
mismo
con
la
función
sayHello,

referenciándola
a
través
de
su
prototype.
Parent.prototype.sayHello.apply(this, arguments);
console.log(" from child");
};

Clases
Abstractas
function Parent() {
}
throw new Error(“Abstract method!”);
}
};
function Child() {
}
};
child.sayHello();

Comparación
de
objetos
• En
Javascript
los
objetos
se
comparan
por
referencia
si

se
usan
los
comparadores
==
o
===
new Number(3) == new Number(3); // false

Comparación
de
objetos:
Ejercicio!
• ¿Cómo
podemos
conseguir
que
los
objetos
Number
sean

comparados
por
valor?
Implementar
la
solución

• Pista:
En
otros
lenguajes
como
Java,
todas
las
clases

deﬁnen
un
método
equals().

Comparación
de
objetos:
Ejercicio!
• ¿Cómo
podemos
conseguir
que
los
objetos
Number
sean

comparados
por
valor?
Implementar
la
solución

• Pista:
En
otros
lenguajes
como
Java,
todas
las
clases

deﬁnen
un
método
equals().
Number.prototype.equals = function(obj) {
if (!obj instanceof Number) {
return false;
}
return this.valueOf() == obj.valueOf();
};
(new Number(3)).equals(new Number(3));

Módulos
• Necesitamos
definir
módulos
si
queremos:

• Mantener
el
código
organizado.

• Poder
mantenerlo.

• ReuWlizarlo

• ...

• Pero
JS
no
proporciona
una
forma
estándar,
por
tanto

tenemos
que
diseñar
nuestra
propia
manera
de
hacerlo.

• ObjeWvo:
Definir
un
módulo
que
se
incluya
en
otros

programas
JS
y
no
altere
el
entorno.

• Minimizar
el
número
de
variables
globales
definidas.

Módulos
• Paso
1:
UWlizar
un
solo
objeto
como
namespace
/*
* Definición
*/
var collections = {};
collections.Set = function() {
//Constructor
};
collections.Set.prototype ...
collections.OrderedMap = function() {
//Constructor
}
collections.OrderedMap.prototype ...
/*
* Uso
*/
var s = new collections.Set(...);
// pseudo-import
var Set = collections.Set;
var s2 = new Set(...);

Módulos
• Paso
2:
UWlizar
funciones
como
namespace
privado
/*
* Definición
*/
var collections = {};
(function(){
collections.Set = function() {
//Constructor
};
//Constructor
}
var api_private_var;
function api_private_func(){};
})();

Módulos
• Paso
3:
Separar
cada
clase
en
un
archivo
/*
* collections/set.js
*/
var collections;
if (!collections) {
collections = {};
}
(function() {
collections.Set = function()
{
//Constructor
};
var set_private_var;
})();
/*
* collections/orderedmap.js
*/
var collections;
if (!collections) {
collections = {};
}
(function() {
//Constructor
}
var orderedMap_private_var;
})();

Módulos:
Ejercicio!
• Escribir
el
contador
con
count()
y
reset()
como

componente
de
un
módulo
llamado
uWls.

• Nota:
El
constructor
no
debe
contener
código.

Módulos:
Ejercicio!
• Escribir
el
contador
con
count()
y
reset()
como

componente
de
un
módulo
llamado
uWls.

• Nota:
El
constructor
no
debe
contener
código.
/*
* utils/counter.js
*/
var utils;
if (!utils) {
utils = {};
}
(function() {
var Counter = function() {
//Constructor
}
var value = 0;
Counter.prototype.count = function() {
value ++;
return value;
};
Counter.prototype.reset = function() {
value = 0;
};
utils.Counter = Counter;
})();

Javascript
en
navegadores
web
• Introducción
HTML

• Introducción
CSS

• El
navegador
web
como
entorno

• Uso
de
JS
en
la
web

HTML:
Estructura
• Partes
del
documento.

• DOCTYPE

• HTML

• HEAD

• BODY

• Estructura
de
árbol.
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

HTML:
Elementos
Elemento Descripción Elemento Descripción
a Hipervínculo button Botón
code
Fragmento
de
código

fuente
hr
Separa
dos
bloques
con

una
línea
horizontal
input
Elemento
para
que
el

usuario
introduzca
datos
label
EWqueta
para
otro

elemento
p Párrafo table Tabla
td Celda
de
una
tabla textarea
Una
caja
de
texto
de

varias
líneas
th
Celda
de
cabecera
de
una

tabla
title El
„tulo
del
documento
tr Una
ﬁla
de
una
tabla div Agrupa
elementos

HTML:
Elementos
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Esto es un parrafo de ejemplo</p>
<button>Esto es un boton</button>
<table>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
</tr>
<tr>
<td>Celda 1, 1</td>
<td>Celda 1, 2</td>
</tr>
<tr>
<td>Celda 2, 1</td>
<td>Celda 2, 2</td>
</tr>
</table>
</body>
</html>

HTML:
Elementos
• Todos
los
elementos
van

dentro
del
body.

• Todos
los
tags
deben
estar

balanceados.

• El
contenido
de
cada
elemento

va
entre
dos
tags,
apertura
y

cierre.

• Algunos
elementos
conWenen

texto,
otros
conWenen
otros

elementos.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Esto es un parrafo de ejemplo</p>
<button>Esto es un boton</button>
<table>
<tr>
<th>Cabecera 1</th>
<th>Cabecera 2</th>
</tr>
<tr>
<td>Celda 1, 1</td>
<td>Celda 1, 2</td>
</tr>
<tr>
<td>Celda 2, 1</td>
<td>Celda 2, 2</td>
</tr>
</table>
</body>
</html>

HTML:
Atributos
• Sirven
para
conﬁgurar
los
elementos

• Tipos:

• Generales:
id,
style,
class,
name,
...

• Propios:
href,
value,
src,
...

• Personales:
data-*

• Cada
elemento
puede
tener
varios
<a href=”/target.html” class=”link” id=”firstlink”>Go to target</a>
<input type=”text” placeholder=”Write here...” disabled/>
<button data-custom=”custom data”>Click here</button>

CSS
• CSS
es
la
herramienta
estándar
para
deﬁnir
los
esWlos

visuales
del
contenido
de
una
página
web

• Un
esWlo
está
compuesto
de
una
o
varias
declaraciones

separadas
por
;

• Cada
declaración
consiste
en
una
propiedad
CSS
y
un
valor.
background-color: grey; color: white

CSS:
Propiedades
Propiedad Descripción Propiedad Descripción
background-color
Color
de
fondo
de
un

elemento border
El
borde
que
rodea
un

elemento
color
Color
principal
de
un

elemento
font-size
Tamaño
de
fuente
de
un

elemento
de
texto
height Altura
de
un
elemento padding
Espacio
entre
el
borde
de

un
elemento
y
su

contenido
text-decoration
Decoración
de
un

elemento
de
texto
width Ancho
de
un
elemento

CSS:
Aplicación
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf8" />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
p {
color: red;
}
span {
border: thin black solid;
}
</style>
</head>
<body>
<a href=”http://www.google.com”
style=”background-color:grey; color: white”>Visit Google</a>
<p>The paragraph</p>
<span>The span</span>
</body>
</html>

CSS:
EsWlos
en
cascada
• Orden
de
prioridad
de
los
esWlos

• EsWlos
deﬁnidos
en
el
propio
elemento

• EsWlos
deﬁnidos
en
<style></style>
en
el
<head>
del
documento

• Archivos
CSS
enlazados

• EsWlos
por
defecto
del
navegador
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style=”color: blue”>The paragraph</p>
</body>
</html>

CSS:
Selectores
• Sintaxis
que
permite
seleccionar
elementos
de
un

documento
HTML

• Selectores
básicos

• #an_id:
El
elemento
cuyo
atributo
id
sea
“an_id”

• .a_class:
Los
elementos
cuyo
atributo
class
contenga
“a_class”

• p:
Elementos
de
Wpo
p
(párrafos)

• p[lang=”fr”]:
Párrafos
cuyo
atributo
lang
sea
igual
a
“fr”

• *[name=”x”]:
Cualquier
elemento
cuyo
atributo
name
sea
“x”
<style>
p {
color: red;
}
.attention {
color: red;
border: 2px solid red;
}
</style>

CSS:
Selectores
• Combinando
selectores
básicos

• span.fatal:
Elementos
<span>
cuyo
atributo
class
contenga
“fatal”

• span[lang=”fr”].warning:
<span>
con
atributo
lang=”fr”
y
además
class
“warning”

• Especiﬁcando
su
ubicación
en
el
documento

• #log
span:
Elementos
<span>
descendientes
del
elemento
con
id
“log”

• #log>span:
Elementos
<span>
que
sean
hijos
del
elemento
con
id
“log”

• body>h1:ﬁrst-‐child:
El
primer
elemento
<h1>
que
sea
hijo
del
<body>

• Combinando
varios
selectores

• div,
#log:
Todos
los
elementos
<div>
y
el
elemento
con
id
“log”

Javascript
en
navegadores
web
• Nuestro
contexto:
La
web

El
navegador
como
sistema

operaWvo
• Los
navegadores
en
los
úlWmos
años
han
evolucionado

hasta
converWrse
en
sistemas
operaWvos
SO
Tradicional Navegador
Organizar
archivos
en
carpetas

representados
por
iconos
Organizar
bookmarks
en
carpetas

representados
por
iconos
Ejecutar
múlWples
aplicaciones
en

ventanas
disWntas
Visualizar
múlWples
páginas
o
en

diferentes
pestañas
API’s
de
acceso
a
red,
dibujar
gráﬁcos

y
guardar
archivos
API’s
de
acceso
a
red,
dibujar
gráﬁcos

y
guardar
datos
locales.

Javascript
en
...
• ...
páginas
web:
Mediante
JS
podemos
modiﬁcar
el

contenido,
aspecto
visual
y
el
comportamiento
de
los

componentes.
Es
el
conocido
DHTML.

• ...
aplicaciones
web:
Usan
el
API
de
acceso
a
red

(XMLHTTPRequest)
para
obtener
datos
dinámicamente

sin
recargar
la
página
y
usan
las
nuevas
capacidades
de

HTML.
Es
la
web
2.0
Su
uso
debe
ser
opcional
Su
uso
es
obligatorio

Incluyendo
Javascript
en
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var clicks = 0;
</script>
</head>
<body>
<input type="button" value="Click++"
onclick="clicks += 1; console.log('clicks: ' + clicks);" />
<a href="javascript:document.write('You have clicked: ' + clicks + ' times');" /> Show </a>
<a href="javascript:void(0)"
onclick="console.log('You have clicked: ' + clicks + ' times');" /> Show in console </a>
</body>
</html>

Ejecución
de
programas
JS
• Fase
síncrona:
Se
ejecuta
todo
el
código
deﬁnido
en

eWquetas
<script>
en
el
orden
en
que
aparece
escrito
en

el
documento
HTML.

• Fase
asíncrona
(event-‐driven):
Se
ejecutan
los

manejadores
de
eventos
deﬁnidos
en
el
código
HTML

cuando
ocurren
los
eventos.

Ejecución
de
programas
JS
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var clicks = 0;
</script>
</head>
<body>
<input type="button" value="Click++"
onclick="clicks += 1; console.log('clicks: ' + clicks);" />
<a href="javascript:document.write('You have clicked: ' + clicks + ' times');" /> Show </a>
<a href="javascript:void(0)"
onclick="console.log('You have clicked: ' + clicks + ' times');" /> Show in console </a>
</body>
</html>

El
objeto
window
• Es
el
objeto
global.

• Deﬁne
funciones
y
variables
globales.

• setTimeout()
y
setInterval()

• locaWon

• history

• navigator

• screen

• alert(),
conﬁrm(),
prompt()

• más
en
la
documentación

DOM
• Estructura

• Nodos

• Atributos

• Recorriendo
el
DOM

• Modiﬁcando
el
DOM

DOM:
Estructura
• Representa
el
contenido
de
un
documento
HTML
como

un
árbol
de
nodos.
<!DOCTYPE html>
<html>
<head>
<title>Sample Document</title>
</head>
<body> 
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>

Seleccionando
Elementos
• Posibilidades:

• id

• nombre

• Wpo

• clase
CSS

• selector
CSS
<script>
document.getElementById(“theId”);
document.getElementsByName(“theName”);
document.getElementsByTagName(“p”);
document.getElementsByClassName(“attention”);
document.querySelector(“p[name=theName]”);
document.querySelectorAll(“p[name=theName]”);
</script>
...
<body>
<p id=”theId” name=”theName”
class=”attention”>Parrafo</p>
</body>

Probando
los
ejemplos
Lab
2

NodeList.
El
array
viviente
• Todos
los
métodos
de
selección,
excepto

getElementByid
y
querySelector
devuelven

un
objeto
NodeList.

• NodeList
es
un
Wpo
de
array
que
conWene

los
nodos.

• NodeList
es
un
array
viviente.
Siempre
está

actualizado,
excepto
si
es
resultado
de

selección
basada
en
selectores
CSS.

NodeList.
El
array
viviente
<!DOCTYPE html>
<html>
<head>
<script>
var p = document.getElementsByTagName(‘p’);
console.log(p.length); // 0
function loaded() {
console.log(p.length); // 1
}
</script>
</head>
<body onload=”loaded()”>
<p>Parrafo de prueba</p>
</body>
</html>
• Probando
el
array
viviente.

Recorriendo
el
DOM
• A
parWr
de
un
Node:

• parentNode

• childNodes

• ﬁrstChild,
lastChild

• nextSibling,
previousSibling
parentNode
NodepreviousSibling nextSibling
ﬁrstChild lastChild
childNodes

Información
de
los
Nodos
• Información
de
su
Wpo
y
contenido:

• nodeType:
Indica
el
Wpo
de
Nodo

• Document:
9,
Element:
1,
Text:
3,
Comments:
8

• nodeValue:
Contenido
textual
de
un
nodo
de
texto
o
comentario

• nodeName:
El
tag
name

• API
muy
sensible
a
las
modiﬁcaciones
del
documento.
Una

nueva
línea
en
blanco
se
interpretará
como
un
nodo
de
Wpo

texto
con
el
contenido
‘n’.

Considerando
solo
elementos
• Propiedades
exclusivas
de
nodos
de
Wpo
elemento

• children

• firstElementChild, lastElementChild

• nextElementSibling, previousElementSibling
• childElementCount
parentNode
NodepreviousElementSibling nextElementSibling
ﬁrstElementChild
children

lastElementChild
childElementCount:
2

DOM:
Ejercicio!
• Añadir
un
método
next
a
la
clase
Element
que
nos
de
el

siguiente
nodo
Element
hermano
garanWzando
que
funcione

incluso
en
navegadores
que
no
hayan
adoptado
el
API
basado

el
Elements
de
IE.

• Recordad
que
el
nodeType
de
los
nodos
de
Wpo
Element
es
1

• Documentación:
h2ps://developer.mozilla.org/en-‐US/docs/DOM/Node

DOM:
Ejercicio!
• Añadir
un
método
next
a
la
clase
Element
que
nos
de
el

siguiente
nodo
Element
hermano
garanWzando
que
funcione

incluso
en
navegadores
que
no
hayan
adoptado
el
API
basado

el
Elements
de
IE.

• Recordad
que
el
nodeType
de
los
nodos
de
Wpo
Element
es
1

• Documentación:
h2ps://developer.mozilla.org/en-‐US/docs/DOM/Node
Element.prototype.next = function() {
if (this.nextElementSibling) {
return this.nextElementSibling;
} else {
var sib = this.nextSibling;
while (sib && sib.nodeType !== 1) {
sib = sib.nextSibling;
}
return sib;
}
}

DOM:
Manejando
atributos
<script>
var p = document.getElementById(‘first’);
p.id === ‘first’; // true
p.className = ‘cssClass’;
p.removeAttribute(“class”);
var label = document.getElementsByTagName(‘label’)[0];
label.htmlFor; // “f_el”
</script>
...
<body>
<p id=”first”>Parrafo de prueba</p>
<label for=”f_el”>Label</label>
</body>
• Los
atributos
de
los
elementos
son

propiedades
del
objeto
Node

HTML5
dataset
<script>
p.dataset.x; // “1”
</script>
...
<body>
<p id=”first” data-x=”1” data-y=”2”>Parrafo de prueba</p>
</body>
• HTML5
permite
añadir
atributos
no

estándares
sin
generar
HTML
no
válido.

Atributos
como
objetos
<script>
p.attributes; // NodeList de objetos Attr
p.attributes[0];
p.attributes.id;
p.attributes[“id”];
p.attributes[“id”].value;
</script>
...
<body>
<p id=”first” data-x=”1” data-y=”2”>Parrafo de prueba</p>
</body>
• A2r:
Objeto
que
representa
un
atributo

HTML.

• Tienen
dos
propiedades:
name
y
value

Manejando
el
contenido
<script>
p.innerHTML; // “Parrafo de prueba”
p.innerHTML = “Parrafo modificado”;
</script>
...
<body>
<p id=”first”>Parrafo de prueba</p>
</body>
• innerHTML:
ObWene
o
asigna
el
contenido
p.outerHTML; // <p id=”first”>Parrafo de prueba</p>
p.outerHTML = “<label>A Label</label>;
• outerHTML:
ObWene
o
susWtuye
el
elemento

Manejando
el
contenido
• insertAdjacentHTML(posición,
contenido)

• posicion:
‘beforebegin’,
‘a‰erbegin’,
‘beforeend’,
‘a‰erend’

• contenido:
Cadena
HTML
a
insertar

Manejando
el
contenido
• Creando
e
insertando
nodos

• document.createElement(Wpo)

• element.appendChild(nodo)

• element.insertBefore(nodo_nuevo,
nodo)
var new_p = document.createElement(“p”);
new_p.innerHTML = “Nuevo parrafo!”;
document.body.appendChlid(new_p);
var new_p2 = document.createElement(“p”);
new_p2.innerHTML = “Otro parrafo”;
document.body.insertBefore(new_p2, new_p);
<body>
...
<p>Otro parrafo</p>
<p>Nuevo parrafo!</p>
</body>

Manejando
el
contenido
• Eliminando
y
reemplazando
nodos

• element.removeChild(nodo)

• element.replaceChild(nodo_nuevo,
nodo)
var new_p = document.createElement(“p”);
new_p.innerHTML = “Nuevo parrafo!”;
document.body.appendChlid(new_p);
var new_p2 = document.createElement(“p”);
new_p2.innerHTML = “Otro parrafo”;
document.body.insertBefore(new_p2, new_p);
document.body.removeChild(new_p2);
var replace = document.createElement(‘p’);
replace.innerHTML = “Reemplazo”;
document.body.replaceChild(replace, new_p);
<body>
...
<p>Reemplazo</p>
</body>

Manejando
el
contenido
• DocumentFragment

• Nodo
especial
que
sirve
como
contenedor
de
nodos.

• Nos
permite
trabajar
con
un
grupo
de
nodos
como
si

fuera
solo
uno.
var df = document.createDocumentFragment();
[‘a’, ‘e’, ‘i’, ‘o’. ‘u’].forEach(function(letter) {
var p = document.createElement(‘p’);
p.innerHTML = letter;
df.appendChild(p);
});
document.body.appendChild(df);
<body>
...
<p>a</p>
<p>e</p>
<p>i</p>
<p>o</p>
<p>u</p>
</body>

HTML:
Enlaces
al
documento
• Los
elementos
enlace
<a>
pueden
referenciar
secciones

dentro
del
documento.

• Al
hacer
click
en
el
enlace,
el
navegador
irá
a
la
sección

referenciada.
<a href=”#section1”>Go to section 1</a>
...
<h1 id=”section1”>

DOM:
Ejercicio!
• Mejorar
el
código
de
toc.js
para
que
cada
entrada
de
la

tabla
generada
sea
un
enlace
a
la
sección

correspondiente.

• No
se
puede
modiﬁcar
el
archivo
base.html,
por
tanto
el
algoritmo

deberá
modiﬁcar
también
el
contenido
existente
para
añadir
los

elementos
necesarios
para
que
los
enlaces
funcionen
correctamente.

• Para
que
cada
enlace
se
coloque
en
una
nueva
línea,
incluirlos
en

párrafos.
<p><a href=’#id_x’>Seccion 1.1</a></p>
<p><a href=’#id_y’>Seccion 1.2</a></p>
...
<h2 id=‘id_x’>Seccion 1.1</h2>
<h2 id=‘id_y’>Seccion 1.2</h2>

DOM:
Solucion!
function buildTOC() {
var toc = document.createElement('div');
document.body.insertBefore(toc, document.body.firstElementChild);
var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for (var i = 0 ; i < headings.length ; ++i) {
var heading = headings[i];
heading.id = i;
var level = parseInt(heading.tagName.charAt(1));
var tocEntry = document.createElement('p');
var indentation = "";
for (var j = 0 ; j < level ; ++j) {
indentation += "+";
}
var link = document.createElement('a');
link.innerHTML = indentation + heading.innerHTML;
link.href = '#' + i;
tocEntry.appendChild(link);
toc.appendChild(tocEntry);
}
}

Proyecto
guiado:

Creación
de
un
videojuego
HTML
5
h2p://diplomado-‐test.herokuapp.com/le2ers/game

Videojuego
HTML
5
Cargando
y

mostrando
las

imágenes
Videojuego
1

Geometría
de
los
elementos
• En
algunos
casos
vamos
a
necesitar
conocer
la
posición
y
tamaño
exactos
de

los
elementos.

• Sistema
de
coordenadas
cartesianas
con
el
origen
en
la
esquina
superior

izquierda
del
navegador.

• Pero
existen
dos
sistemas
de
coordenadas
dependiendo
del
scroll:
viewport

y
document.
x
x
y
y
Document
coordinates
Viewport
coordinates
Documento
HTML
Área
visible
del
documento

en
el
navegador

Geometría
de
los
elementos
window.pageXOﬀset
window.pageYOﬀset
Documento
HTML
Área
visible
del
documento

en
el
navegador

x
y
width
height
e.getBoundingClientRect()
var e = document.getElement...
var box = e.getBoundingClientRect();
e.x;
e.y;
e.width;
e.height;

Geometría
de
los
elementos
• Cuando
necesitamos
saber
qué
elemento
se
encuentra
en
una
posición

usaremos
document.elementFromPoint(x,
y);
uWlizando
coordenadas

viewport.

• Si
especiﬁcamos
coordenadas
fuera
del
viewport,
aunque
sean
coordenadas

válidas
del
document,
el
método
retornará
null

Eventos:
Conceptos
• Event
handler
o
event
listener:
Función
que
maneja
o
responde
a
un

determinado
evento.

• Event
object:
Objeto
asociado
al
evento
que
conWene
detalles
parWculares

del
mismo.
Se
suele
recibir
como
argumento
de
la
función
manejadora.

Tienen
propiedades:

• Tipo:
Cadena
que
indica
la
naturaleza
del
evento.

• Target:
Referencia
al
objeto
sobre
el
que
ocurrió
el
evento.

• Otras:
Dependen
de
cada
Wpo
de
evento,
coordenadas
de
ratón,

idenWﬁcador
de
tecla
pulsada,
etc...

• Propagación
o
‘event
bubbling’:
Proceso
por
el
que
el
navegador
decid
cuál

es
el
objeto
que
debe
manejar
el
evento.

• Cancelación:
Técnica
por
la
que
podemos
capturar
un
evento
y
evitar
su

acción
por
defecto.
Muy
uWlizada
para
validar
campos
de
formularios.

Eventos:
Tipos
• Eventos
dependientes
del
disposiWvo:
Directamente
relacionados
con
las

capacidades
del
disposiWvo
(mousedown,
keydown,
touchmove,
...)

• Eventos
independientes
del
disposiWvo:
Eventos
de
entrada
que
no

dependen
de
las
capacidades
del
disposiWvo
(click,
texWnput,
...)

• Eventos
de
interfaz
de
usuario:
Eventos
de
alto
nivel,
generados
por

elementos
de
la
interfaz
(focus,
blur,
submit,
...)

• Eventos
de
cambio
de
estado:
Lanzados
por
acWvidad
en
la
red,
no
por

acWvidad
del
usuario
(load)

• Eventos
de
APIs:
Eventos
que
puedan
ser
lanzados
por
cualquier
API
que

estemos
usando
(playing
y
volumechange
de
elemento
<audio>)

• Timers
y
errores:
Eventos
que
se
lanzan
cuando
un
Wmer
completa
su
cuenta

o
cuando
ocurre
un
error
en
Wempo
de
ejecución.

Manejando
eventos
• Manejadores
como
propiedades
de
objetos
Nodo.

• Las
propiedades
que
representan
manejadores
comienzan
por
‘on’

seguido
del
nombre
del
evento,
por
ejemplo:
‘onclick’.

• Problema:
Sólo
permite
un
manejador
por
evento
y
objeto.
<script>
window.onload = function() {
var p = document.getElementById(‘myp’);
p.onclick = function() {
this.innerHTML = ‘Clicked‘;
};
};
</script>
...
<body>
<p id=”myp”>Click me!</p>
</body>

Manejando
eventos
• Manejadores
como
atributos
HTML.

• Comienzan
por
‘on’
seguido
del
nombre
del
evento.

• El
valor
es
una
cadena
de
código
Javascript.

• Cuando
se
usa
esta
técnica
hay
que
saber
que
es
el
body
quien
recibe
los

eventos
que
van
a
la
window,
por
ejemplo:
‘load’
<body>
<p id=”myp” onclick=”this.innerHTML = ‘Clicked‘;”>Click me!</p>
</body>

Manejando
eventos
• Manejadores
como
atributos
HTML.

• Es
una
técnica
no
recomendada
porque
genera
código
no
reusable
y
muy

diicil
de
mantener.

• Mezcla
la
lógica
de
presentación
(HTML)
con
la
lógica
del
programa
(JS)

• Solo
permite
un
manejador
por
evento
y
objeto

Manejando
eventos
• API
deﬁniWvo
element.[add|remove]EventListener()

• Separación
adecuada
de
lógica
de
presentación
con
lógica
de
programa

• Permite
añadir
varios
manejadores
por
evento
y
objeto

• addEventListener(type,
listener,
useCapture)
<script>
window.addEventListener(‘load’, domLoaded, false);
function domLoaded() {
p.addEventListener(‘click’, pClicked, false);
}
function pClicked() {
this.innerHTML = ‘Clicked‘;
}
</script>
...
<body>
</body>

Manejando
eventos
• removeEventListener(type,
listener,
useCapture)
<script>
window.addEventListener(‘load’, domLoaded, false);
p.addEventListener(‘click’, pClicked, false);
}
this.innerHTML = ‘Clicked at: ‘ + new Date();
this.removeEventListener(‘click’, pClicked, false);
}
</script>
...
<body>
</body>

Manejando
eventos:

Internet
Explorer
<
9
• element.[a2ach|detach]Event(type,
listener)

• No
soporta
captura
de
eventos

• El
primer
argumento
debe
ir
precedido
de
on:
onclick
<script>
window.attachEvent(‘onload’, domLoaded);
p.attachEvent(‘onclick’, pClicked);
p.innerHTML = ‘Clicked at: ‘ + new Date();
p.detachEvent(‘onclick’, pClicked);
}
}
</script>
...
<body>
</body>

Manejando
eventos:

Internet
Explorer
<
9
• Código
cross-‐browser
<script>
if (window.addEventListener) {
window.addEventListener(‘onload’, domLoaded, false);
} else {
window.attachEvent(‘onload’, domLoaded);
}
if (p.addEventListener) {
p.addEventListener(‘onclick’, pClicked, false);
} else {
}
}
}
</script>
...
<body>
</body>

Manejando
eventos:
Ejercicio!
• Crear
un
documento
HTML
que
contenga
un
botón
y
un

párrafo
que
indique
el
número
de
veces
que
se
ha
hecho

click
en
el
botón.

Manejando
eventos:
Ejercicio!
• Crear
un
documento
HTML
que
contenga
un
botón
y
un

párrafo
que
indique
el
número
de
veces
que
se
ha
hecho

click
en
el
botón.
<script>
function loaded() {
var clicks = 0;
var p = document.getElementsByTagName('p')[0];
var b = document.getElementsByTagName('button')[0];
b.addEventListener('click', clicked, false);
function clicked() {
clicks ++;
p.innerHTML = "Button was clicked: " + clicks + " times.";
}
}
</script>
...
<body onload="loaded();">
<button>Click</button>
<p>Button was never clicked</p>
</body>

Manejadores:
Argumentos
• Las
funciones
manejadoras
reciben
un
único
argumento,

que
es
el
objeto
evento
que
ha
ocurrido.

• Si
el
navegador
es
IE
<
9
los
manejadores
no
reciben

ningún
argumento,
el
objeto
evento
está
en
una
variable

global
event.
/*
* Manejador cross-browser
*/
<script>
function handler(event) {
event = event || window.event
....
}
</script>
...

Manejadores:
Contexto
• Los
manejadores
se
deﬁnen
como
métodos
del
objeto.

• El
contexto
(this)
dentro
del
manejador
es
el
propio
objeto

• En
IE
<
9,
que
los
manejadores
se
invocan
como

funciones
globales.

• El
contexto
dentro
del
manejador
es
el
objeto
global.

• Solución:
Usar
closure
<script>
...
}
}
</script>

Manejadores:
Contexto
• Código
cross-‐browser
function addEvent(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else {
target.attachEvent("on" + type, function(event) { 
return handler.call(target, event);
});
}
}

Procesado
de
eventos
• 1ª
Fase:
Captura
de
eventos.

• 2ª
Fase:
Invocación
de
manejadores
en
el
objeto
que

lanzó
el
evento

• 3ª
Fase:
Propagación
(bubbling)
del
evento.
<html>
...
<body>
<div>
<a>
<img></img>
</a>
</div>
</body>
window
div
a
img

Fase
1:
Captura
de
eventos
• Se
acWva
con
el
tercer
parámetro
de

addEventListener(..,
..,
true).
Por
tanto,

no
disponible
en
IE
<
9.

• El
evento
recorre
el
árbol
en
senWdo

descendente
ejecutando
los

capturadores
registrados
si
existen.

• Esta
fase
nos
da
la
oportunidad
de

capturar
un
evento
antes
de
que
llegue

al
propio
objeto
que
lo
lanzó,
por
tanto

en
esta
fase
nunca
se
ejecutan

manejadores
del
target.
window
div
a
img

Fase
2:
Manejadores
en
el
target
window
div
a
img

Fase
3:
Propagación
(bubbling)
• Se
recorre
el
árbol
en
senWdo
ascendente
ejecutando

todos
los
manejadores
registrados
para
el
evento.
window
div
a
img

Cancelación
...
• ...
de
la
acción
por
defecto.
• Manejadores
como

atributos
HTML
<a onclick=”return false;”>
Click here</a>

Cancelación
...
• ...
de
la
acción
por
defecto.
• Manejadores
como

atributos
HTML
Click here</a>
• Manejadores

addEventListener
<script>
function handler(evt) {
...
evt.preventDefault();
}
</script>

Cancelación
...
• ...
de
la
acción
por
defecto.
• Manejadores
como

atributos
HTML
Click here</a>
• Manejadores

addEventListener
<script>
...
}
</script>
• Manejadores

a2achEvent
<script>
function handler() {
var evt = window.event;
evt.returnValue = false;
}
</script>

Cancelación
...
• ...
de
la
propagación.
• Manejadores

addEventListener
<script>
...
evt.stopPropagation();
}
</script>
• Manejadores

a2achEvent
<script>
evt.cancelBubble = true;
}
</script>

Cancelación
...
• ...
de
la
propagación.
• Manejadores

addEventListener
<script>
...
evt.stopPropagation();
}
</script>
• Manejadores

a2achEvent
<script>
evt.cancelBubble = true;
}
</script>
• ...
de
la
propagación
inmediatamente.
<script>
...
evt.stopImmediatePropagation();
}
</script>

Manejo
de
eventos:
Ejercicio!
• Escribir
una
función
que
valide
los
datos
del
siguiente

formulario
y
no
permita
su
envío
a
menos
que
el
campo

obligatorio
esté
relleno.
...
<form>
<input type=”text” id=”mandatory” />
<input type=”submit” value=”Send!”/>
</form>
...

Manejo
de
eventos:
Solución!
• La
solución
pasa
por
cancelar
la
acción
por
defecto
del
click

en
el
input
submit.
<script>
function loaded() {
var submitbt = document.querySelector(‘input[type=”submit”]’);
submitbt.addEventListener(‘click’, checkForm, false);
}
function checkForm(evt) {
var mandatory = document.getElementById(‘mandatory’);
if (!mandatory.value) {
}
}
</script>

Videojuego
HTML
5
Seleccionando

objetos
Videojuego
2

CSS
• CSS
Básico

• Manipulando
esWlos

• Consultando
esWlos

• Animaciones

CSS
Básico
• Propiedades
fundamentales:

• Fuentes:
font-family: ‘Arial’; font-size: 28 pt;

• Colores:
color: red;

• Márgenes:
margin-left: 10%;

• Bordes:
border-width: 1px;

• Fondos:
background-image: url(‘back.png’);

• Tamaños:
width: 100px; height: 200px;

• Posiciones:
position: absolute; left: 50px; top: 20px;

• ...

CSS
Básico
• Propiedades
‘de
acceso
rápido’
(shortcut):

Permiten
asignar
muchas
propiedades
fundamentales

relacionadas
de
una
sola
vez.

• Márgenes:

• margin: 10px 10px 20px 5px;
• margin-top: 10px; margin-right: 10px; margin-bottom: 20px; margin-left: 5px;

• Bordes:

• border: 1px solid blue;
• border-width: 1px; border-style: solid; border-color: blue;

• ...

Aplicando
CSS
• Inline:
Mediante
el
atributo
HTML
style
<p style=”margin: 20px; border: solid red 2px”>
Parrafo con 20 px de margen y borde rojo</p>

Aplicando
CSS
• Inline:
Mediante
el
atributo
HTML
style
<p style=”margin: 20px; border: solid red 2px”>
Parrafo con 20 px de margen y borde rojo</p>
• En
la
sección
head:
Mediante
un
tag
<style>
<head>
...
<style>
p { // p es un selector CSS!!
margin: 20px;
border: solid red 2px;
}
</style>
...
</head>

Aplicando
CSS
• Hojas
de
esWlos
independientes
<head>
...
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
...
</head>
/*
* css/styles.css
*/
p {
margin: 20px;
border: solid red 2px;
}

CSS
para
programadores
• Propiedades
más
uWlizadas:

• position
• top, left, bottom, right
• width, height
• z-index
• display
• visibility
• clip
• overflow
• margin, padding
• border
• background
• opacity

CSS:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Example</title>
<style>
img {
width: 200px;
height: 200px;
}
#translucent {
position: absolute;
top: 100px;
left: 100px;
opacity: .75;
}
</style>
</head>
<body>
<img src='images/A.jpg' />
<img id="translucent" src='images/E.jpg' />
</body>
</html>

CSS:
Clases
<head>
...
<style>
...
.translucent {
position: absolute;
top: 100px;
left: 100px;
opacity: .75;
}
</style>
</head>
<body>
...
<img class="translucent" src='images/E.jpg' />
</body>
• Concepto
similar
a
clases
en
OO.

Manipulando
esWlos
<body>
...
<p style=”position: absolute;
font-family: sans-serif;
background-color: #ffffff;
margin: 10px 20px 10px 20px;”> Parrafo </p>
</body>
• Manipulando
el
atributo
style:
<script>
...
e.style.position = “absolute”;
e.style.fontFamily = “sans-serif”;
e.style.backgroundColor = “#ffffff”;
e.style.marginTop = “10px”;
e.style.marginRight = “20px”;
e.style.marginBottom = “10px”;
e.style.marginLeft = “20px”;
</script>
<script>
...
var cssString = ”position: absolute;
font-family: sans-serif;
background-color: #ffffff;
margin: 10px 20px 10px 20px;”;
e.setAttribute(“style”, cssString);
// O también
e.style.cssText = cssString;
</script>

Manipulando
esWlos
• Manipulando
el
atributo
class:
<script>
...
e.className = “translucent”;
</script>
<body>
...
<p class=”class1”> Parrafo </p>
</body>
<script>
...
e.className += “ translucent”;
</script>
<body>
...
<p class=”translucent”> Parrafo </p>
</body>
<body>
...
<p class=”class1 translucent”> Parrafo </p>
</body>

Manipulando
esWlos
• Manipulando
la
lista
de
clases:

• classList
nos
devuelve
un
DOMTokenList

• add()

• remove()

• toggle()

• contains()
<script>
...
var clss = e.classList;
clss.add(“translucent”);
</script>
<body>
...
<p class=”translucent”> Parrafo </p>
</body>

CSS:
Ejercicio!
• Completar
la
función
loaded()
y
la
sección
style
para
obtener

este
resultado.

• No
añadir
nada
en
el
body,
todo
el
contenido
debe
ser
cargado
dinámicamente

con
JS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 200px;
}
.translucent {
}
</style>
<script>
function loaded() {
}
</script>
</head>
</body>
</html>

CSS:
Solución!
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 200px;
}
.translucent {
opacity: .75;
}
</style>
<script>
function loaded() {
var letters = ['A', 'E', 'I', 'O', 'U'];
for (var i = 0 ; i < letters.length ; ++i) {
var img = document.createElement('img');
img.src = 'images/' + letters[i] + '.jpg';
img.style.position = "absolute";
img.style.top = (100 * i) + "px";
img.style.left = (100 * i) + "px";
img.classList.add("translucent");
document.body.appendChild(img);
}
}
</script>
</head>
</body>
</html>

CSS:
El
esWlo
calculado
• Queremos
conocer
el
esWlo
de
un
elemento.

• window.getComputedStyle(element, null);
• Propiedades
read-‐only

• Valores
absolutos:
Todas
las
unidades
relaWvas,
como
porcentajes,
etc...
son

converWdas
a
pixeles.

• Todas
las
propiedades
de
acceso
rápido
son
converWdas
en
sus
correspondientes

fundamentales
<script>
function loaded() {
var p = document.getElementsByTagName(‘p’)[0];
var css = window.getComputedStyle(p, null);
console.log(css);
}
</script>
...
<body>
<p> Parrafo </p>
</body>

Videojuego
HTML
5
Arrastrando

objetos
Videojuego
3

JS
+
CSS:
Animaciones

Videojuego
HTML
5
AnimacionesVideojuego
4

Videojuego
HTML
5
h2p://diplomado-‐test.herokuapp.com/le2ers/game
Videojuego
Finalizado

Javascript
y
HTTP
• AJAX:
Término
que
designa
aplicaciones
que
usan
JS

para
comunicarse
con
servidores
sin
recargar
la

página.

• Clase
XMLH2pRequest:
Representa
un
par
peWción-‐
respuesta.

• Request:
Verbo
HTTP,
URL,
Headers,
Body

• Response:
Status,
Headers,
Body

Enviando
una
peWción
• 1.-‐
Instanciación

• 2.-‐
Open

• 3.-‐
Headers

• 4.-‐
Body
y
envío
// 1
var req = new XMLHttpRequest();
// 2
req.open(“GET”, “path/to/my/service”);
// 3
req.setRequestHeader(“Content-Type”, “application/json”);
req.setRequestHeader(“Accept”, “application/json”);
// 4
req.send(null);
• Orden
de
conﬁguración
obligatorio

Recibiendo
una
respuesta
• AJAX
es
un
API
asíncrono
Constante Valor Signiﬁcado
UNSENT 0 No
se
ha
invocado
open
aún
OPENED 1 Se
ha
invocado
a
open
HEADERS_RECEIVED 2 Cabeceras
recibidas
LOADING 3
Se
está
recibiendo
la

respuesta
DONE 4 Respuesta
completa

Recibiendo
una
respuesta
// 1
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status === 200) {
var type = request.getResponseHeader(“Content-Type”);
if (type.match(/^text/)) {
console.log(requ.responseText);
}
}
}
};
// 2
req.open(“GET”, “path/to/my/service”);
// 3
req.setRequestHeader(“Content-Type”, “application/json”);
req.setRequestHeader(“Accept”, “application/json”);
// 4
req.send(null);

AJAX:
Ejercicio!
• Escribir
un
documento
HTML
que
cargue
las
imágenes

retornadas
por
el
servicio
web.

• h2p://diplomado-‐test.herokuapp.com/le2ers

• Pista:
Bastará
con
asignar
la
propiedad
src
de
la
imagen
a
una
URL
para
que
el

navegador
la
cargue
automáWcamente.

AJAX:
Solución!
<!DOCTYPE html>
<html>
<head>
<script>
function loaded() {
req.open('GET', "http://diplomado-test.herokuapp.com/letters");
req.onreadystatechange = function(evt) {
if (this.readyState === 4 && this.status === 200) {
var json = JSON.parse(this.responseText);
var urls = json.forEach(function(item) {
var img = document.createElement("img");
img.style.width = img.style.height = "200px";
img.src = item.url;
document.body.appendChild(img);
});
}
};
req.send();
}
</script>
</head>
<body onload="loaded()">
</body>
</html>

XHR
2.0
• Deﬁne
un
nuevo
conjunto
de
eventos
para
controlar
el

estado
de
una
peWción
AJAX

• loadstart:
Cuando
send()
es
invocado

• progress:
Cada
50
ms
mientras
la
respuesta
está
siendo

descargada

• load:
La
peWción
ha
terminado
totalmente

• Errores:

• timeout,
abort,
error

Seguridad
• Primera
barrera
de
defensa:
Incapacidad.

• JS
no
Wene
acceso
al
sistema
de
ﬁcheros
y
directorios
del
ordenador.

• JS
Wene
un
acceso
a
red
restringido

• Segunda
barrera
de
defensa:
Restricciones.

• JS
puede
abrir
nuevas
ventanas,
pero
para
prevenir
su
uso
abusivo
solo
podrá

abrirlas
en
respuesta
a
un
evento
del
usuario

• JS
puede
cerrar
ventanas,
pero
solamente
aquellas
que
ese
mismo
programa

ha
abierto.
Para
otras
necesita
conﬁrmación
del
usuario.

• JS
no
puede
asignar
el
valor
de
un
HTML
FileUpload.

• Un
script
no
puede
leer
el
contenido
de
documentos
cargados
desde
otros

servidores,
ni
registrar
manejadores
de
eventos
de
estos
documentos.
Así

protege
de
leer
passwords,
etc...
Esto
se
conoce
como
‘Same-‐origin
policy’

Same-‐origin
policy
• Un
código
JS
sólo
puede
acceder
a
Windows
o
documents
que

Wenen
el
mismo
origen
que
el
documento
que
cargó
el
script.

• Origen
=
protocolo
+
host
+
puerto
del
documento
que
cargó
el

script

• Un
script
alojado
en
un
servidor
A
es
incluido
en
un
documento

de
un
servidor
B.
El
script
podrá
manejar
el
documento.
Si
el

script
abre
una
nueva
ventana
del
mismo
servidor
B,
también

podrá
manejarlo,
pero
si
abre
una
ventana
de
un
tercer

servidor
C,
entonces
Same-‐origin
policy
ya
no
le
permiWrá

manejarla.

• Esta
políWca
también
se
usa
para
determinar
con
qué

servidores
puede
comunicarse
con
AJAX

Javascript

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a Javascript

Similar a Javascript (20)

Último

Último (20)

Javascript