Está en la página 1de 289

Introduccin a JavaScript, a sus

tipos y valores

1
Juan Quemada, DIT, UPM
JavaScript
JavaScript
n Diseado por Netscape en 1995 para ejecutar en un Navegador

w Hoy se ha convertido en el lenguaje del Web y Internet


!
Norma ECMA (European Computer Manufacturers Association)
n Versin soportada en navegadores actuales:

w ES5: ECMAScript v5, Dic. 2009, (JavaScript 1.5)


n Navegadores antiguos soportan
w ES3: ECMAScript v3, Dic. 1999, (JavaScript 1.3)
!
Gua: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Libro: JavaScript Pocket Reference, D. Flanagan, OReilly 2012, 3rd Ed.
Juan Quemada, DIT, UPM 2
Tipos, objetos y valores
Tipos de JavaScript
n number

w Literales de nmeros: 32, 1000, 3.8


n boolean
w Los literales son los valores true y false
n string
w Los literales de string son caracteres delimitados entre comillas o apstrofes
n "Hola, que tal", 'Hola, que tal',
w Internacionalizacin con Unicode: ' , ', ''
n undefined
w undefined: representa indefinido
!
Objetos: agregaciones estructuradas de valores nn
n1
n Se agrupan en clases: Object, Array, Date, ... n2
w Objeto null: valor especial que representa objeto nulo v1 v2 .. vn
3
Juan Quemada, DIT, UPM
Operadores y expresiones
JavaScript incluye operadores de tipos y objetos
n Los operadores permiten formar expresiones

w Componiendo valores con los operadores


n Que Javascript evalua hasta obtener un resultado
!
Por ejemplo, con las operaciones aritmeticas +, -, *, /
n podemos formar expresiones nmericas

w Expresiones con sintaxis erronea abortan la ejecucin del programa

13 + 7 => 20 // Suma de nmeros


13 - 7 => 6 // Resta de nmeros
!
(8*2 - 4)/3 => 4 // Expresin con parntesis
!
8/*3 => Error_de_ejecucin // Ejecucin se interrumpe
8 3 => Error_de_ejecucin // Ejecucin se interrumpe
4
Juan Quemada, DIT, UPM
Sobrecarga de operadores
Algunos operadores tienen varias semnticas diferentes
!
Por ejemplo, el operador + tiene 3 semnticas diferentes
n Suma de enteros (operador binario)

n Signo de un nmero (operador unitario)

n Concatenacin de strings (operador binario)

13 + 7 => 20 // Suma de nmeros


!
+13 => 13 // Signo de un nmero
!
"Hola " + "Pepe" => "Hola Pepe" // Concatenacin de strings

5
Juan Quemada, DIT, UPM
Conversin de tipos en expresiones
13 + 7 => 20
JavaScript realiza conversin automatica de tipos !
n cuando hay ambiguedad en una expresin "13" + "7" => "137"
w utiliza las prioridades para resolver la ambiguedad !
! "13" + 7 => "137"
! !
La expresin "13" + 7 es ambigua +"13" + 7 => 20
n porque combina un string con un number

w JavaScript asigna mas prioridad al operador + de strings, convirtiendo 7 a string


!
La expresin +"13" tambin necesita conversin automtica de tipos
n El operador + solo esta definido para number

w JavaScript debe convertir el string "13" a number antes de aplicar operador +

6
Juan Quemada, DIT, UPM
Operador typeof
El operador typeof permite conocer el tipo de un valor
n Devuelve un string con el nombre del tipo

w "number", "string", "boolean", "undefined", "object" y "function"

!
typeof 7 => "number"
!
typeof "hola" => "string"
!
typeof true => "boolean"
!
typeof undefined => "undefined"
!
typeof null => "object"
typeof new Date() => "object"
!
typeof new Function() => "function"

7
Juan Quemada, DIT, UPM
Los operadores estn ordenados con prioridad descendente. Mas altos ms prioridad.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] Acceso a propiedad o invocar mtodo; ndice a array
new Crear objeto con constructor de clase
() Invocacin de funcin/mtodo o agrupar expresin
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negacin lgica (NOT); complemento de bits
+ - Operador unitario, nmeros. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Nmeros. Multiplicacin; divisin; modulo (o resto)
+
+ -
Concatenacin de string
Nmeros. Suma; resta Operadores JavaScript
<< >> >>> Desplazamientos de bit
< <= > >= Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !== Igualdad; desigualdad; identidad; no identidad
& Operacion y (AND) de bits
^ Operacion exclusivo (XOR) de bits
| Operacion (OR) de bits !
&& Operacin lgica y (AND) +" " 3 + 7 => 10
|| Operacin lgica o (OR) + unitario tiene mas prioridad y
?: Asignacin condicional se evala antes que + binario
= Asignacin de valor
OP= Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluacin mltiple 8
Juan Quemada, DIT, UPM
Los operadores estn ordenados con prioridad descendente. Mas altos ms prioridad.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] Acceso a propiedad o invocar mtodo; ndice a array
new Crear objeto con constructor de clase
() Invocacin de funcin/mtodo o agrupar expresin
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negacin lgica (NOT); complemento de bits
+ - Operador unitario, nmeros. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Nmeros. Multiplicacin; divisin; modulo (o resto)
+
+ -
Concatenacin de string
Nmeros. Suma; resta Operadores JavaScript
<< >> >>> Desplazamientos de bit
< <= > >= Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !== Igualdad; desigualdad; identidad; no identidad
& Operacion y (AND) de bits
^ Operacion exclusivo (XOR) de bits 8*2 - 4 => 12
| Operacion (OR) de bits * tiene mas prioridad y se evala
&& Operacin lgica y (AND) antes que -. Es equivalente a:
|| Operacin lgica o (OR)
?: Asignacin condicional (8*2) - 4 => 12
= Asignacin de valor
OP= Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluacin mltiple 9
Juan Quemada, DIT, UPM
Los operadores estn ordenados con prioridad descendente. Mas altos ms prioridad.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] Acceso a propiedad o invocar mtodo; ndice a array
new Crear objeto con constructor de clase
() Invocacin de funcin/mtodo o agrupar expresin
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negacin lgica (NOT); complemento de bits
+ - Operador unitario, nmeros. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Nmeros. Multiplicacin; divisin; modulo (o resto)
+
+ -
Concatenacin de string
Nmeros. Suma; resta Operadores JavaScript
<< >> >>> Desplazamientos de bit
< <= > >= Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !== Igualdad; desigualdad; identidad; no identidad
& Operacion y (AND) de bits
^ Operacion exclusivo (XOR) de bits
| Operacion (OR) de bits
&& Operacin lgica y (AND) 8*(2 - 4) => -16
|| Operacin lgica o (OR) El parntesis tiene ms prioridad y
?: Asignacin condicional obliga a evaluar primero - y luego *
= Asignacin de valor
OP= Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluacin mltiple 10
Juan Quemada, DIT, UPM
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aqu se introduce la sentencia
11
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

12
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversin de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions

10+23 => 23, 33*, 23, 1023, number, string, boolean, ErrorDeEjecucin
typeof (10+23) => 23, 33, 23, 1023, number*, string, boolean, ErrorDeEjecucin
"10"+23 => 23, 33, 23, 1023*, number, string, boolean, ErrorDeEjecucin
"10" 23 => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin*
typeof ("10"+23) => 23, 33, 23, 1023, number, string*, boolean, ErrorDeEjecucin
+"10"+23 => 23, 33*, 23, 1023, number, string, boolean, ErrorDeEjecucin
"230" / "10" => 23*, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
"33" - / "10" => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin*
typeof (true) => 23, 33, 23, 1023, number, string, boolean*, ErrorDeEjecucin
23 + "" => 23, 33, 23*, 1023, number, string, boolean, ErrorDeEjecucin
typeof ("") => 23, 33, 23, 1023, number, string*, boolean, ErrorDeEjecucin

13
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversin de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions

10+23 => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
typeof (10+23) => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
"10"+23 => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
"10" 23 => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
typeof ("10"+23) => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
+"10"+23 => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
"230" / "10" => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
"33" - / "10" => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
typeof (true) => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
23 + "" => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin
typeof ("") => 23, 33, 23, 1023, number, string, boolean, ErrorDeEjecucin

14
Juan Quemada, DIT, UPM
Programa, sentencia,
variable y comentario

15
Juan Quemada, DIT, UPM
Programa, sentencias y comentarios
Un programa es una secuencia de sentencias
n que se ejecutan en el orden en que han sido definidas
!
Las sentencias realizan tareas al ejecutarse en un ordenador
n Son los elementos activos de un programa
!
Los comentarios solo tienen valor informativo
n para entender o recordar como funciona el programa
Comentario
Sentencia: definicin de
variable x inicializada a 7
var x = 7; // Comentario

16
Juan Quemada, DIT, UPM
Comentarios
Los comentarios son mensajes informativos
n Deben ser claros, concisos y explicar todo lo importante del programa
w Incluso el propio autor los necesita con el tiempo para recordar detalles del programa
!
En JavaScript hay 2 tipos de comentarios
n Monolinea: Delimitados por // y final de lnea
n Multilinea: Delimitados por /* y */
w OJO! Los comentarios multi-linea tienen problemas con las expresiones regulares

/* Ejemplo de comentario multilnea que ocupa 2 lneas


-> al tener ambiguedades, se recomienda utilizarlos con cuidado */
!
var x = 1; // Comentario monolnea que acaba al final de esta lnea

17
Juan Quemada, DIT, UPM
Variables y estado del programa
Las variables se crean con la sentencia de definicin de variables
n Comienza con la palabra reservada var

w Seguida de la variable, a la que se puede asignar un valor inicial


n Se pueden crear varias variables en una sentencia x
w separando las definiciones por comas
! undefined
Estado del programa
n conjunto de valores contenido en todas sus variables
y
var x; // crea la variable x y asigna undefined "Hola"
!
var y = "Hola"; // crea y, asignandole el valor "Hola" z
! t
var z = 1, t = 2; // crea x e y, asignandoles 1 y 2 respectivamente 1
2
18
Juan Quemada, DIT, UPM
Sentencia de asignacin de variables
Una variable es un contenedor de valores
n La sentencia de asignacin introduce un nuevo valor en la variable

w Modificando, por tanto, el estado del programa


! x
Las variables de JavaScript son no tipadas
n pueden contener valores de cualquier tipo de JavaScript
5
x
var x = 5; // Crea la variable x y le asigna el valor inicial 5 "Hola"
!
x = "Hola"; // Asigna el string (texto) "hola" a la variable x
! x
x = new Date(); // Asigna objeto Date a la variable x Mon Sep 02 2013 09:16:47
GMT+0200 (CEST)

19
Juan Quemada, DIT, UPM
STATEMENT SINTAXIS DESCRIPCIN DE LA SENTENCIA JAVASCRIPT
block { statements }; Agrupar un bloque de sentencias como 1 sentencia
break break [label]; Salir del bucle o switch o sentencia etiquetada
case case expression: Etiquetar sentencia dentro de sentencia switch
continue continue [label]; Salto a sig. iteracin de bucle actual/etiquetado
debugger debugger: Punto de parada (breakpoint) del depurador
default default: Etiquetar setencia default en sentencia switch
do/while do statement Alternativa al bucle while con condicin al final
while(expression);
empty ; Sentencia vaca, no hace nada
expression expression; Evaluar expresin (incluye asignacin a variable)
for for(init; test; incr) Bucle sencillo. "init": inicializacin;
statement "test": condicin; "incr": acciones final bucle
for/in for (var in object) Enumerar las propiedades del objeto "object"
statement
function function name([param[,...]]) Declarar una funcin llamada "name"
{ body }
if/else if (expr) statement1 Ejecutar statement1 o statement2
[else statement2]
label label: statement Etiquetar sentencia con nombre "label"
return return [expression]; Devolver un valor desde una funcin
switch switch (expression) Multiopcin con etiquetas "case" o "default"
{ statements }
throw throw expression; Lanzar una excepcin
try try {statements} Gestionar excepciones
[catch { statements }]
[finally { statements }]
strict "use strict"; Activar restricciones strict a script o funcin
var var name [ = expr] [ ,... ]; Declarar e initializar una o mas variables
while while (expression) statement Bucle bsico con condicin al principio
with with (object) statement Extender cadena de mbito (no recomendado)
20
Juan Quemada, DIT, UPM
Delimitacin de sentencias
; delimita el final de una sentencia
!
El final de sentencia tambin puede delimitarse con nueva linea
n Pero hay ambigedades y no se recomienda hacerlo
!
Recomendacin: cada sentencia en una linea terminada con ;
-> es mas legible y seguro

// Ejemplos de delimitacin de x
// sentencias que
// no recomendables undefined
! x
var x; x = "Hola"
"Hola"
!
var y = "Pepe" y
"Pepe"
21
Juan Quemada, DIT, UPM
Nombres de variables
El nombre (o identificador) de una variable debe comenzar por:
n letra, _ o $

w El nombre pueden contener adems nmeros


!
n Nombres bien construidos: x, ya_vs, $A1, $, _43dias
n Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
w Nombre incorrecto: da error_de_ejecucin e interrumpe el programa
!
Un nombre de variable
n no debe ser una palabra reservada de JavaScript
!
Las variables son sensibles a maysculas
n mi_var y Mi_var son variables distintas

22
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

23
Juan Quemada, DIT, UPM
Ejercicio
Tenemos un programa JavaScript cuya primera sentencia es: var x = 1;
n Cual ser el resultado de ejecutar despues la siguiente sentencia

var y = 4; => El estado del programa cambia: aparece una nueva variable con un nuevo valor(1)
El estado del programa cambia: cambia el valor asignando a una variable existente
El programa se interrumpe (ErrorDeEjecucin) por sintaxis incorrecta
!
var y; => ..... (las mismas respuestas) .... (1)
var y = 1; => ..... (las mismas respuestas) .... (1)
var @y = 1; => ..... (las mismas respuestas) .... (3)
var %f = 1; => ..... (las mismas respuestas) .... (3)
var $f = 1; => ..... (las mismas respuestas) .... (1)
var #1 = 1; => ..... (las mismas respuestas) .... (3)
var _1 = 1; => ..... (las mismas respuestas) .... (1)
var 1_1 = 1; => ..... (las mismas respuestas) .... (3)
var nio = 2; => ..... (las mismas respuestas) .... (1)
x = 3; => ..... (las mismas respuestas) .... (2)

24
Juan Quemada, DIT, UPM
Ejercicio
Tenemos un programa JavaScript cuya primera sentencia es: var x = 1;
n Cual ser el resultado de ejecutar despues la siguiente sentencia

var y = 4; => El estado del programa cambia: aparece una nueva variable con un nuevo valor
El estado del programa cambia: cambia el valor asignando a una variable existente
El programa se interrumpe (ErrorDeEjecucin) por sintaxis incorrecta
!
var y; => ..... (las mismas respuestas) ....
var y = 1; => ..... (las mismas respuestas) ....
var @y = 1; => ..... (las mismas respuestas) ....
var %f = 1; => ..... (las mismas respuestas) ....
var $f = 1; => ..... (las mismas respuestas) ....
var #1 = 1; => ..... (las mismas respuestas) ....
var _1 = 1; => ..... (las mismas respuestas) ....
var 1_1 = 1; => ..... (las mismas respuestas) .
var nio = 2; => ..... (las mismas respuestas) ....
x = 3; => ..... (las mismas respuestas) ....

25
Juan Quemada, DIT, UPM
Expresiones con variables

26
Juan Quemada, DIT, UPM
Expresiones con variables
Una variable representa el valor que contiene
n Puede ser usada en expresiones como cualquier otro valor
!
Una variable puede utilizarse en la expresin que se asigna a ella misma
n La parte derecha usa el valor anterior a la ejecucin de la sentencia

w En y = y - 2; la variable y tiene el valor 8, por lo que se asigna a y un 6 (8-2)


!
Usar una variable no definida en una expresin
n provoca un error y la ejecucin del programa se interrumpe

var x = 3; x
! 3 y
var y = 5 + x;
! 8
y = y - 2; y
! 6
x = y + z; // variable z no ha sido definida
Error
27
Juan Quemada, DIT, UPM
Asignacin con operacin
Es muy comn modificar el valor de una variable
n sumando, restando, .... algn valor

w Por ejemplo, x = x +7; y = y - 3; z = z * 8; .......


!
JavaScript tiene operadores especiales para estas operaciones
n +=, -=, *=, /=, %=, ......( aplica a operadores lgicos, desplazamiento, ..)

w x += 7; ser lo mismo que x = x + 7;


x
var x = 3; // define x inicializada a 3
! x 3
x += 2; // suma 2 a x
! x 5
x *= 3; // multiplica x por 3
!
x %= 4; // % operacin mdulo:
x 15
// divide x por 4 y devuelve el resto 3
28
Juan Quemada, DIT, UPM
Pre y post incremento o decremento
JavaScript posee los operadores ++ y -- de auto-incremento/decremento
n auto-incremento (++) suma 1 a la variable a la que se aplica

n auto-decremento (--) resta 1 a la variable a la que se aplica


!
++ y -- se aplican a la izquierda o derecha de una variable en una expresin
n modificando el valor antes o despus de evaluar la expresin

w Al producir efectos laterales y programas crpticos, no se recomienda un uso limitado

var x = 3; x
!
var y = ++x + 2; x 3
!
var z = y-- + 2; y 4
y 6
z 5
8 Juan Quemada, DIT, UPM 29
Final del tema
Muchas gracias!

30
Juan Quemada, DIT, UPM
Ejercicio
Al ejecutar un programa cuya primera sentencia es var x = 2;
n Indicar el contenido de la variable x despus de ejecutar la

siguiente sentencia o si ocurrir ErrorDeEjecucin


!x *= 2; => 0, 1, 2, 3, 4*, 20, 20, ErrorDeEjecucin
!x += "0"; => 0, 1, 2, 3, 4, 20, 20*, ErrorDeEjecucin
!xx =/=++z;
2;
=> 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin*
=> 0, 1*, 2, 3, 4, 20, 20, ErrorDeEjecucin
!x -= 2; => 0*, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
!x = x + t; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin*

n Indicar el contenido de la variable y despus de ejecutar la


siguiente sentencia o si ocurrir ErrorDeEjecucin
var y = ++x + 1; => 0, 1, 2, 3, 4*, 20, 20, ErrorDeEjecucin
var y = ++t + 1; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin*
var y = 1 + x++; => 0, 1, 2, 3*, 4, 20, 20, ErrorDeEjecucin
var y = k + 1; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin*
var y = 1 + x--; => 0, 1, 2, 3*, 4, 20, 20, ErrorDeEjecucin
var y = 1 + --x; => 0, 1, 2*, 3, 4, 20, 20, ErrorDeEjecucin

31
Juan Quemada, DIT, UPM
Ejercicio
Al ejecutar un programa cuya primera sentencia es var x = 2;
n Indicar el contenido de la variable x despus de ejecutar la

siguiente sentencia o si ocurrir ErrorDeEjecucin


!x *= 2; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
!x += "0"; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
!xx =/=++z;
2;
=> 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
=> 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
!x -= 2; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
!x = x + t; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin

n Indicar el contenido de la variable y despus de ejecutar la


siguiente sentencia o si ocurrir ErrorDeEjecucin
var y = ++x + 1; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
var y = ++t + 1; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
var y = 1 + x++; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
var y = k + 1; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
var y = 1 + x--; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin
var y = 1 + --x; => 0, 1, 2, 3, 4, 20, 20, ErrorDeEjecucin

32
Juan Quemada, DIT, UPM
Scripts y entrada/salida

33
Juan Quemada, DIT, UPM
Entrada/Salida y ejecucin de expresiones
La sentencia de ejecucin de expresiones puede evaluar expresiones
n como por ejemplo, 3+2; o alert(Texto);
w sin asignar el resultado, puede ser: x = 3+2; o 3+2;
!
Estas sentencias se utilizan habitualmente para comunicar con el exterior
n p.e. alert(Texto); muestra una ventana desplegable al usuario
!
Una expresin sin efecto lateral, solo genera un valor
n Si ese valor no se guarda en una variable

w La instruccin no tiene ningn efecto en el programa, solo consume recursos

alert("Texto"); // expresiones tiles, envan mensaje al exterior


document.write(Texto");
!
var x = 3; // definicin e inicializacin de variable
!
x*5 - 2; // es una expresin correcta, pero intil al no guardar el resultado
!
x = x*5 + 2; // asignacin, es una expresin til porque guarda el resultado
34
Juan Quemada, DIT, UPM
Ejemplo I: Script con fecha
Script: programa JavaScript insertado en una pgina HTML
n Delimitado con las marcas <script> con atributo type=text/javascript

w Se ejecuta al cargar la pgina HTML en el navegador


document.write("Texto") inserta "Texto" en la pgina Web
n En lugar del bloque script, al cargar la pgina y ejecutar el script

w document.writeln(Texto") inserta adems de Texto, nueva lnea al final

35
Juan Quemada, DIT, UPM
Ejemplo II: Script con expresin
Script: programa JavaScript insertado en una pgina HTML
n Delimitado con la marca <script> con atributo type=text/javascript

w Se ejecuta al cargar la pgina HTML en el navegador


alert("Texto") muestra "Texto" en un desplegable
n se utiliza para alertar al usuario sobre algn evento o resultado

36
Juan Quemada, DIT, UPM
Funciones alert(), confirm() y prompt()
Interaccin sencilla basada en pop-ups
!
alert(msj):
n presenta un mensaje al usuario
w Retorna al pulsar OK
!
confirm(msj):
n Presenta mensaje y pide confirmacin/rechazo
w Retorna al pulsar, devuelve true(Ok)/false(Cancel)
!
prompt(msj):
n Presenta mensaje y pide un dato de entrada
w Al pulsar OK, retorna y devuelve string introducido
n Si se pulsa Cancel devuelve null 37
Juan Quemada, DIT, UPM
Ejemplo III: Script conversor
El script pide el nmero de Euros a convertir a Dlares
n con el desplegable de la funcin prompt()

Cuando el usuario lo introduce


n calcula el equivalente en dlares ( * 1,34)

w y lo presenta con document.write(.)


Recargando la pgina
n se vuelve a ejecutar el programa

38
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

39
Juan Quemada, DIT, UPM
Ejercicio
Construir un script insertado en una pgina HTML que calcule la
superficie en metros cuadrados de una pared
n El script debe pedir primero al usuario (con prompt()) la altura de la

pared en metros y guardar el valor en una variable


n A continuacin debe pedir al usuario (con prompt()) la anchura de la

pared en metros y guardar el valor en otra variable


n Despus debe multiplicar la altura por la anchura y presentar al

usuario los metros cuadrados de superficie de la pared utilizando


document.write(..)

40
Juan Quemada, DIT, UPM
Booleano, igualdad y otros
operadores lgicos

41
Juan Quemada, DIT, UPM
Tipo boolean

El tipo boolean solo tiene 2 valores


!false => true
n true: verdadero !true => false
n false: falso !
! !
!4 => false
Operador negacin (negation): !
!"4" => false
n Convierte al valor lgico opuesto
!null => true
! !0 => true
Conversin a boolean !
!!"" => false
n false: 0, -0, NaN, null, undefined, "", ''
!!4 => true
n true: resto de valores

42
Juan Quemada, DIT, UPM
Identidad e igualdad

Igualdad estricta (identidad) // Identidad de tipos bsicos


n igualdad de tipo y valor: === !
0 === 0 => true
w funciona bien solo con tipos bsicos! 0 === 0.0 => true
n Objetos: identidad de referencias 0 === 0.00 => true
n negacin de igualdad estricta: !== !
0 === 1 => false
! !
Igualdad y desigualdad dbil: == y != 0 === false => false
n Realiza conversiones impredecibles
!
'' === "" => true
w NO UTILIZAR! '' === " " => false
!
Mas info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness

43
Juan Quemada, DIT, UPM
Operadores: &&, || y ?:
0 && true => 0
Operador lgico Y (AND): a && b 1 && "5" => "5"
n si a evala a false
!
undefined || 0 => 0
w devuelve a, sino devuelve b 13 || 0 => 13
! !
(7) ? 0 : 1 => 0
Operador lgico O (OR): a || b
("")? 0 : 1 => 1
n si a evala a true
!
w devuelve a, sino devuelve b !
// Asignar valor por defecto
! // si x es undefined o null
Operador condicional: (c) ? a : b; !
n si c evala a true x = x || 0;
w devuelve a, sino devuelve b

44
Juan Quemada, DIT, UPM
Operadores de comparacin

JavaScript tiene 4 operadores de comparacin 1.2 < 1.3 => true


n Menor: < !
1< 1 => false
n Menor o igual: <=
1 <= 1 => true
n Mayor: > 1> 1 => false
n Mayor o igual: >= 1 >= 1 => true
! !
false < true => true
Nmeros, booleanos, strings y objetos !
n tienen definida una relacin de orden "a" < "b" => true
w Aunque se utilizan principalmente con nmeros !
"a" < "a" => false
"a" < "aa" => true

45
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

46
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversin de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions

!10 => se evala a 0, 10, null, undefined, false o true


!!null => se evala a 0, 10, null, undefined, false o true
!(0 === "") => se evala a 0, 10, null, undefined, false o true
!(0 !== "") => se evala a 0, 10, null, undefined, false o true
true ? 10 : null => se evala a 0, 10, null, undefined, false o true
0 ? 10 : null => se evala a 0, 10, null, undefined, false o true
(0 || undefined) && true => se evala a 0, 10, null, undefined, false o true
(1 && !undefined) || true => se evala a 0, 10, null, undefined, false o true
(!0 || !undefined) && !true => se evala a 0, 10, null, undefined, false o true
(!0 && undefined) || !1 => se evala a 0, 10, null, undefined, false o true
5 <= 6 => se evala a 0, 10, null, undefined, false o true
5 >= 5 => se evala a 0, 10, null, undefined, false o true
"c" < "cc" => se evala a 0, 10, null, undefined, false o true
"b" > "bb" => se evala a 0, 10, null, undefined, false o true

47
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversin de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions

!10 => se evala a 0, 10, null, undefined, false* o true


!!null => se evala a 0, 10, null, undefined, false* o true
!(0 === "") => se evala a 0, 10, null, undefined, false o true*
!(0 !== "") => se evala a 0, 10, null, undefined, false* o true
true ? 10 : null => se evala a 0, 10*, null, undefined, false o true
0 ? 10 : null => se evala a 0, 10, null*, undefined, false o true
(0 || undefined) && true => se evala a 0, 10, null, undefined*, false o true
(1 && !undefined) || true => se evala a 0, 10, null, undefined, false o true*
(!0 || !undefined) && !true => se evala a 0, 10, null, undefined, false* o true
(!0 && undefined) || !1 => se evala a 0, 10, null, undefined, false* o true
5 <= 6 => se evala a 0, 10, null, undefined, false o true*
5 >= 5 => se evala a 0, 10, null, undefined, false o true*
"c" < "cc" => se evala a 0, 10, null, undefined, false o true*
"b" > "bb" => se evala a 0, 10, null, undefined, false* o true

48
Juan Quemada, DIT, UPM
Sentencia if/else

49
Juan Quemada, DIT, UPM
if/else permite ejecucin condicional de

Sentencia if/else
n bloques de instrucciones

Comienza por la palabra reservada if


n La condicin va despus entre parntesis

Bloque: sentencias delimitadas por {..}


n Bloque de 1 sentencia puede omitir {}

La parte else es opcional

50
Juan Quemada, DIT, UPM
Ejemplo con sentencia if/else
Juan Quemada, DIT, UPM
51
Ejemplo con

sentencia if
Juan Quemada, DIT, UPM
52
Ejemplo de prompt()

53
Juan Quemada, DIT, UPM
Ejemplo de else-if

54
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

55
Juan Quemada, DIT, UPM
Ejercicio
Construir un script insertado en una pgina HTML que realice la
pregunta: Capital de Espaa?
n Se debe utilizar la funcin prompt() para enviar la pregunta, pidiendo

la respuesta a travs de su cajetn de entrada


!
Usar if/else para comprobar si la respuesta es Madrid o no
!
Si la respuesta es correcta se deber insertar en la pgina HTML
n el string: Correcto, Madrid es la capital de Espaa
!
Si contesta cualquier otra cosa se insertar el string
n Su respuesta ..respuesta introducida.. no es correcta

!
Adems del string, la pgina debe tener un encabezado de nivel 1 (<h1>)
56
Juan Quemada, DIT, UPM
Strings e internacionalizacin (I18N)

57
Juan Quemada, DIT, UPM
El tipo string
Texto internacionalizado codificado con el cdigo UNICODE
n Puede representar muchas lenguas diferentes
!
Literales de string: textos delimitados por comillas o apstrofes
n "hola, que tal", 'hola, que tal', ' , ' o ''
w string "hola, que tal" en varios idiomas
n String vaco: "" o ''
n "texto 'entrecomillado' "
w comillas y apstrofes se pueden anidar: 'entrecomillado' forma parte del texto
!
Operador de concatenacin de strings: +
n "Hola" + " " + "Pepe" => "Hola Pepe"

58
Juan Quemada, DIT, UPM
Internacionalizacin (I18N) Teclado chino

UNICODE es un consorcio internacional: http://www.unicode.org/


n Define normas de internacionalizacin (I18N), como el cdigo UNICODE
w UNICODE puede representar muchas lenguas: http://www.unicode.org/charts/
!
JavaScript utiliza solo el Basic Multilingual Plane de UNICODE
n Caracteres codificados en 2 octetos (16 bits), similar a BMP
w UNICODE tiene otros planos que incluyen lenguas poco frecuentes
!
Teclado: suele incluir solo las lenguas de un pas
n Los caracteres de lenguas no incluidas
w solo se pueden representar con caracteres escapados
w por ejemplo,'\u55e8 representa el ideograma chino ''
! Teclado arabe

Pantalla: es grfica y puede representar cualquier carcter


59
Juan Quemada, DIT, UPM
Caracteres escapados
Los caracteres escapados
n son caracteres no representables dentro de un string

w comienzan por la barra inclinada (\) y la tabla incluye algunos de los ms habituales
!
Ademas podemos representar cualquier carcter UNICODE o ISO-LATIN-1:
n \uXXXX carcter UNICODE de cdigo hexadecimal XXXX
n \xXX carcter ISO-LATIN-1 de cdigo hexadecimal XX
!
CARACTERES ESCAPADOS
Algunos ejemplos !
n "Comillas dentro de \"comillas\"" NUL (nulo): \0, \x00, \u0000
Backspace: \b, \x08, \u0008
w " debe ir escapado dentro del string
Horizontal tab: \t, \x09, \u0009
n "Dos \n lineas" Newline: \n, \x0A, \u000A
w retorno de lnea delimita sentencias Vertical tab: \t, \x0B, \u000B
Form feed: \f, \x0C, \u000C
n "Dos \u000A lineas" Carriage return: \r, \x0D, \u000D
Comillas (dobles): \", \x22, \u0022
Apstrofe : \', \x27, \u0027
Backslash: \\, \x5C, \u005C
60
Juan Quemada, DIT, UPM
ciudad
Clase String
La clase String [0] [1] ........ [5]
n incluye mtodos y propiedades para procesar strings
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
!
Un string es un array de caracteres
! un ndice entre 0 y nmero_de_caracteres-1 referencia cada carcter
n

Propiedad con tamao: 'ciudad'.length => 6


!
Acceso como array: 'ciudad'[2] => u
!
Mtodo: 'ciudad'.charCodeAt(2) => 117
! devuelve cdigo UNICODE de tercer carcter
n

Mtodo: 'ciudad'.indexOf('da') => 3


! devuelve posicin de substring
n

Mtodo: 'ciudad'.substring(2,5) => 'uda'


n devuelve substring entre ambos ndices
61
Juan Quemada, DIT, UPM
Ejemplo I18N

62
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

63
Juan Quemada, DIT, UPM
Ejercicio
Cuantas lneas tienen los strings del siguiente ejemplo: 1, 2, 3, 4 o 5
! 'Cuantas lneas \n tiene \u000A este \x27string\x27?' (3)
! 'Cuantas lneas \x0A tiene este "string"?' (2)
! 'Cuantas\n lneas\n tiene\u000A este\n \x27string\x27?' (5)
'Cuantas lneas tiene este \x27string\x27?' (1)
! '\u55e8\uff0c\n\u4f60\u597d\u5417' (2)
! ' , \n' (2)
'\n' (2)
!
A que valor se evalan las siguientes expresiones

'hola cocacola'.indexof('la') => 1, 2*, 3, 4, 9, 10, 11, 12 o 13


'hola cocacola'.length - 2 => 1, 2, 3, 4, 9, 10, 11*, 12 o 13
'hola cocacola'.substring(5,7) + 'ca' => 'la', ' c', 'co', 'coc', 'coca'* o 'ca'
'hola cocacola'.substring(5,8) + "" => 'la', ' c', 'co', 'coc'*, 'coca' o 'ca'
'hola cocacola'.substring(5,8) + 'a' => 'la', ' c', 'co', 'coc', 'coca'* o 'ca'
'hola cocacola'.substring(7,8) => 'la', ' c'*, 'co', 'coc', 'coca' o 'ca'

64
Juan Quemada, DIT, UPM
Ejercicio
Cuantas lneas tienen los strings del siguiente ejemplo: 1, 2, 3, 4 o 5
! 'Cuantas lneas \n tiene \u000A este \x27string\x27?'
! 'Cuantas lneas \x0A tiene este "string"?'
! 'Cuantas\n lneas\n tiene\u000A este\n \x27string\x27?'
'Cuantas lneas tiene este \x27string\x27?'
! '\u55e8\uff0c\n\u4f60\u597d\u5417'
! ' , \n'
'\n'
!
A que valor se evalan las siguientes expresiones

'hola cocacola'.indexof('la') => 1, 2, 3, 4, 9, 10, 11, 12 o 13


'hola cocacola'.length - 2 => 1, 2, 3, 4, 9, 10, 11, 12 o 13
'hola cocacola'.substring(5,7) + 'ca' => 'la', ' c', 'co', 'coc', 'coca' o 'ca'
'hola cocacola'.substring(5,8) + "" => 'la', ' c', 'co', 'coc', 'coca' o 'ca'
'hola cocacola'.substring(5,8) + 'a' => 'la', ' c', 'co', 'coc', 'coca' o 'ca'
'hola cocacola'.substring(7,8) => 'la', ' c', 'co', 'coc', 'coca' o 'ca'

65
Juan Quemada, DIT, UPM
Nmeros

66
Juan Quemada, DIT, UPM
Nmeros: tipo number
Los nmeros se representan con literales de
n Enteros: 32
10 + 4 => 14 // sumar
w Entero mximo: 9007199254740992
10 - 4 => 6 // restar
n Decimales: 32.23
10 * 4 => 40 // multiplicar
n Coma flotante: 3.2e1 (3,2x10) 10 / 4 => 2.5 // dividir
w Rango real: 1,797x10^308 --- 5x10^-324 10 % 4 => 2 // operacin resto
! !
Todos los nmeros son del tipo number //decimales dan error de redondeo
! 0.1 + 0.2 => 0,3000000000004
Todos los nmeros se representan igual !
internamente 3e2 => 300
n coma flotante de doble precisin (64bits) 3e-2 => 0,03
! !
El tipo number incluye 2 valores especiales
+10/0 => Infinity //desborda
-10/0 => -Infinity //desborda
n Infinity: representa desbordamiento
!
n NaN: representa resultado no nmerico 5e500 => Infinity //desborda

67
Juan Quemada, DIT, UPM
Conversin a enteros

'67' + 13 => 6713


Cuando JavaScript calcula expresiones !
n convirtiendo tipos segn necesita +'67' + 13 => 80
+'6.7e1' + 13 => 80
w utiliza las prioridades de operadores
!
! !
Conversin a entero (o real) 'xx' + 13 => 'xx13'
n booleano: true a 1, false a 0 +'xx' + 13 => NaN
n String: Convierte nmero a valor o NaN
!
!
n null: a 0, undefined: a NaN 13 + true => 14
! 13 + false => 13
Convertir un string a un nmero
n se denomina tambin parsear" o analizar sintcticamente

w es similar al anlisis sintctico realizado a los literales de nmeros

68
Juan Quemada, DIT, UPM
Modulo Math Math.PI => 3.141592653589793
Math.E => 2.718281828459045
El Modulo Math contiene !
n constantes y funciones matemticas // numero aleatorio entre 0 y 1
! Math.random() => 0.7890234
Constantes
!
Math.pow(3,2) => 9 // 3 al cuadrado
n Nmeros: E, PI, SQRT2, ...
Math.sqrt(9) => 3 // raz cuadrada de 3
n ... !
Funciones Math.min(2,1,9,3) => 1 // nmero mnimo
Math.max(2,1,9,3) => 9 // nmero mximo
n sin(x), cos(x), tan(x), asin(x), ....
!
n log(x), exp(x), pow(x, y), sqrt(x), .... Math.floor(3.2) => 3
n abs(x), ceil(x), floor(x), round(x), .... Math.ceil(3.2) => 4
n min(x,y,z,..), max (x,y,z,..), ...
Math.round(3.2) => 3
n random()
!
Math.sin(1) => 0.8414709848078965
! Math.asin(0.8414709848078965) => 1
Mas info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
69
Juan Quemada, DIT, UPM
Clase Number var x = 1.1;
La clase Number encapsula nmeros !
n como objetos equivalentes x.toFixed(0) => "1"
! x.toFixed(2) => 1.10"
Number define algunos mtodos tiles !
n toFixed(n) devuelve string (1).toFixed(2) => 1.00"
w redondeando a n decimales
!
1.toFixed(2) => Error sintctico
n toExponential(n) devuelve string
!
w redondeando mantisa a n decima. Math.PI.toFixed(4) => "3.1416"
n toPrecision(n) devuelve string !
w redondeando a n dgitos (0.1).toExponential(2) => "1.00e-1"
! x.toExponential(2) => "1.10e+0"
JS convierte una expresin a objeto al !
n aplicar el mtodo a una expresin (0.1).toPrecision(2) => "0.10"
x.toPrecision(2) => "1.1"
w Ojo! literales dan error sintctico
Mas info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

70
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

71
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones

0/0 => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN*, Infinity, -Infinity


1/0 => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity*, -Infinity
Math.pow(3,2) => 0, 0, 2, 2, 3, 3, 6, 6, 9*, "9", NaN, Infinity, -Infinity
Math.pow(3,8000) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity*, -Infinity
Math.min(0,1,6,3) => 0*, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.max(0,1,6,3) => 0, 0, 2, 2, 3, 3, 6*, 6, 9, "9", NaN, Infinity, -Infinity
Math.floor(2.7) => 0, 0, 2*, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.ceil(2.7) => 0, 0, 2, 2, 3*, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.round(2.7) => 0, 0, 2, 2, 3*, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.sqrt(4) => 0, 0, 2*, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.sqrt(-4) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN*, Infinity, -Infinity
(3).toFixed(0) => 0, 0, 2, 2, 3, 3*, 6, 6, 9, "9", NaN, Infinity, -Infinity
(0).toFixed(0) => 0, 0*, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
(3).toPrecision(1) => 0, 0, 2, 2, 3, 3*, 6, 6, 9, "9", NaN, Infinity, -Infinity
(0).toPrecision(1) => 0, 0*, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
72
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones

0/0 => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity


1/0 => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.pow(3,2) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.pow(3,8000) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.min(0,1,6,3) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.max(0,1,6,3) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.floor(2.7) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.ceil(2.7) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.round(2.7) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.sqrt(4) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
Math.sqrt(-4) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
(3).toFixed(0) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
(0).toFixed(0) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
(3).toPrecision(1) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
(0).toPrecision(1) => 0, 0, 2, 2, 3, 3, 6, 6, 9, "9", NaN, Infinity, -Infinity
73
Juan Quemada, DIT, UPM
Funciones

74
Juan Quemada, DIT, UPM
Definicin de la funcin Nombre Parmetros Bloque de cdigo
delimitado por {....}

!
Funcin function comer(persona, comida) {
return (persona + " come " + comida);
};
Invocacin
!
o ejecucin comer('Jos', 'paella'); => 'Jos come paella'
de la funcin

Funcin:
n bloque de cdigo con parmetros, invocable (ejecutable) a travs del nombre

w La ejecucin finaliza con la sentencia return expr o al final del bloque


n Al acabar la ejecucin, devuelve un resultado: valor de retorno
!
Valor de retorno
n resultado de evalar expr, si se ejecuta la sentencia return expr

n undefined, si se alcanza final del bloque sin haber ejecutado ningn return

75
Juan Quemada, DIT, UPM
Parmetros de una funcin
Los parmetros de la funcin son variables utilizables en el cuerpo de la funcin
Al invocarlas se asignan los valores de la invocacin
!
La funcin se puede invocar con un nmero variable de parmetros
Un parmetro inexistente est undefined

function comer(persona, comida) {


return (persona + " come " + comida);
};
!
comer('Jos', 'paella'); => 'Jos come paella'
!
comer('Jos', 'paella', 'carne'); => 'Jos come paella'
comer('Jos'); => 'Jos come undefined'

76
Juan Quemada, DIT, UPM
El array de argumentos
Los parmetros de la funcin estn accesibles tambin a travs del
n array de argumentos: arguments[....]
w Cada parmetro es un elemento del array
!
En: comer('Jos', 'paella')
n arguments[0] => 'Jos'
n arguments[1] => 'paella'

function comer() {
return (arguments[0] + " come " + arguments[1]);
};
!
comer('Jos', 'paella'); => 'Jos come paella'
!
comer('Jos', 'paella', 'carne'); => 'Jos come paella'
comer('Jos'); => 'Jos come undefined'
77
Juan Quemada, DIT, UPM
Parmetros por defecto
Funciones invocadas con un nmero variable de parmetros
n Suelen definir parmetros por defecto con el operador ||

w "x || <parmetro_por_defecto>"
!
Si x es undefined, ser false y devolver parmetro por defecto
Los parmetros son variables y se les puede asignar un valor

function comer (persona, comida) {


persona = (persona || 'Alguin');
comida = (comida || 'algo');
return (persona + " come " + comida);
};
!
comer('Jos'); => 'Jos come algo'
comer(); => 'Alguien come algo'

78
Juan Quemada, DIT, UPM
Funciones como objetos
Las funciones son objetos de pleno derecho
n pueden asignarse a variables, propiedades, parmetros, ....
!
function literal: es una funcin que se define sin nombre
n Se suele asignar a una variable, que le da su nombre

w Se puede invocar a travs del nombre de la variable

var comer = function(persona, comida) {


return (persona + " come " + comida);
};
!
comer('Jos','paella'); => 'Jos come paella'

79
Juan Quemada, DIT, UPM
Operador de invocacin de una funcin
El objeto funcin puede asignarse o utilizarse como un valor
n el objeto funcin contiene el cdigo de la funcin
!
el operador (...) invoca una funcin ejecutando su cdigo
n Solo es aplicable a funciones (objetos de la clase Function)

n Puede incluir una lista de parmetros separados por coma

var comer = function(persona, comida) {


return (persona + " come " + comida);
};
!
var x = comer; // asigna a x el cdigo de la funcin
x('Jos','paella'); => 'Jos come paella'
x() => 'undefined come undefined
!
var y = comer(); // asigna a y el resultado de invocar la funcin
y => 'undefined come undefined'
80
Juan Quemada, DIT, UPM
http://vishub.org/categories/43

Seleccionar Hacer clic para


ejemplo actualizar pag.

Hacer clic
en el
Modulo 1

Editor
Interactivo
81
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

82
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos las siguientes definiciones de funciones y variables
!
function f_1 (x) { return x; };
function
! f_2 () { return +arguments[1]; };
!
! f_3 = function (x) { return !x; };
var
! f_4 = f_2;
var
Como se evaluarn las siguientes expresiones

f_1 (7) => 7*, "7", 8, "8", 14, 76", undefined, false, "false", true, "true"
f_1 (undefined) => 7, "7", 8, "8", 14, "76", undefined*, false, "false", true, "true"
f_1 (7, 8) => 7*, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
f_1 () => 7, "7", 8, "8", 14, "76", undefined*, false, "false", true, "true"
f_2 (7, 8) => 7, "7", 8*, "8", 14, "76", undefined, false, "false", true, true"
f_2 (7, "7") => 7*, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
f_2 (7, "8") => 7, "7", 8*, "8", 14, "76", undefined, false, "false", true, true"
f_3 (7) => 7, "7", 8, "8", 14, "76", undefined, false*, "false", true, "true"
f_3 (undefined) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true*, true"
f_4 (6, 7) => 7*, "7", 8, "8", 14, "76", undefined, false, "false", true, true
f_4 (7, "8") => 7, "7", 8*, "8", 14, "76", undefined, false, "false", true, true"
83
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos las siguientes definiciones de funciones y variables
!
function f_1 (x) { return x; }
function
! f_2 () { return +arguments[1]; }
!
! f_3 = function (x) { return !x; }
var
! f_4 = f_2;
var
Como se evaluarn las siguientes expresiones

f_1 (7) => 7, "7", 8, "8", 14, 76", undefined, false, "false", true, "true"
f_1 (undefined) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
f_1 (7, 8) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
f_1 () => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
f_2 (7, 8) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
f_2 (7, "7") => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
f_2 (7, "8") => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
f_3 (7) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
f_3 (undefined) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
f_4 (6, 7) => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true
f_4 (7, "8") => 7, "7", 8, "8", 14, "76", undefined, false, "false", true, true"
84
Juan Quemada, DIT, UPM
Ejercicio
Construir un script insertado en una pgina HTML con un juego para
acertar un nmero aleatorio. El script generar aleatoriamente 1, 2 o 3 y
pedir al usuario que lo acierte, ofrecindole que introduzca el nmero a
travs de una ventana generada con prompt().
El script se deber estructurar de la siguiente forma:
n Se definir una funcin num() que devuelva aleatoriamente 1, 2 o 3.

Se recomienda utilizar Math.random() para generar el nmero


aleatorio, multiplicar por 3 y redondear a 1, 2 o 3 con Math.ceil().
n El nmero generado con num() se guardar en una variable.

n Se pedir al usuario (con prompt()) que acierte el nmero y su

respuesta se comparar con el nmero aleatorio guardado.


n Si acierta el nmero mostrar en la pgina Web Correcto, sino

responder Lo siento, el nmero era xxx si es 1, 2 o 3 y si es


cualquier otro string responder Debe contestar solo 1, 2 o 3.
n Y acabar. (se podr volver a ejecutar recargando la pgina)

Preguntas y respuestas incluirn adems, entre parntesis, la traduccin


del texto a ideogramas chinos (utilizar Google translator para traducir).
85
Juan Quemada, DIT, UPM
Objetos, propiedades y mtodos

86
Juan Quemada, DIT, UPM
nn
n2
n1 .. vn n1
n2
nn
Objetos v1
v2
..
v1 v2 vn
Los objetos son colecciones de variables
n agrupadas como un elemento estructurado que llamamos objecto
w Las variables de un objeto se denominan propiedades
!
Una propiedad es un par nombre:valor donde
n los nombres deben ser todos diferentes en un mismo objeto
!
Se definen con el literal: { nombre:valor, ... }
n Por ejemplo: {titulo: 'Avatar', director: 'James Cameron'}
w crea un objeto con 2 propiedades:
n titulo:'Avatar' titulo director
n director:'James Cameron' 'James
'Avatar' Cameron'

87
Juan Quemada, DIT, UPM
pelicula

Propiedades titulo director

'James
'Avatar' Cameron'
El acceso a propiedades utiliza el operador punto
n obj.propiedad
!
Por ej. en: var pelicula = {titulo: 'Avatar', director: 'James Cameron'}
n pelicula.titulo => "Avatar"
n pelicula.director => "James Cameron"
n pelicula.fecha => undefined // la propiedad fecha no existe
!
Aplicar el operador punto sobre undefined o null
n Provoca un Error_de_ejecucin y aborta la ejecucin del programa
!
La notacin punto solo acepta nombres de propiedades
n Con la sintaxis de variables: a, _method, $1, ...

w No son utilizables: #43", "?a=1", ......


88
Juan Quemada, DIT, UPM
pelicula

titulo director
Notacin array 'James
'Avatar' Cameron'
La notacin array es equivalente a la notacin punto
n pelicula["titulo"] es equivalente a pelicula.titulo

w Al acceder a: var pelicula = {titulo: 'Avatar', director: 'James Cameron'}


!
La notacin array permite utilizar strings arbitrarios como nombres
n por ejemplo, objeto["El director"], pelicula[""] o a["%43"]

w OJO! es conveniente utilizar siempre nombres compatibles con notacin punto


!
Nombres (strings) arbitrarios son posibles tambin en un literal de objeto:
n Por ejemplo, {"titulo": 'Avatar', "El director": 'James Cameron'}

89
Juan Quemada, DIT, UPM
Nombres de propiedades como variables
La notacin array permite acceder tambin a propiedades
n cuyo nombre esta en una variable en forma de string

w Esto no es posible con la notacin punto

var x = {titulo: 'Avatar', director: 'James Cameron'}


!
x.titulo; => 'Avatar'
x['titulo'] ; => 'Avatar'
! x tiene una propiedad de
var p = 'titulo'; // inicializada con string 'titulo' nombre 'titulo', que es el
! string que contiene p
x[p] ; => 'Avatar'
! El objeto x no tiene ninguna propiedad
de nombre p y devuelve undefined
x.p; => undefined
90
Juan Quemada, DIT, UPM
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aqu se introduce la sentencia
91
Juan Quemada, DIT, UPM
Clases y herencia
Todos los objetos de JavaScript pertenecen a la clase Object
n Javascript posee mas clases predefinidas que derivan de Object
w Date, Number, String, Array, Function, .
w https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects
n Un objeto hereda los mtodos y propiedades de su clase
!
Un mtodo es una operacin (~funcin) invocable sobre un objeto
n Se invoca con la notacin punto: objeto.metodo(..params..)
!
Todas las clases tienen un constructor con el nombre de la clase
n que permite crear objetos con el operador new
w Por ejemplo, new Object() crea un objeto vaco equivalente a {}

92
Juan Quemada, DIT, UPM
Mtodos de la clase
Un objeto hereda mtodos de su clase, por ejemplo
n los objetos de la clase Date heredan mtodos como

w toString(), getDay(), getFullYear(), getHours(), getMinutes(), .. (ver ejemplo)


w https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
!
Solo se puede invocar mtodos heredados o definidos en un objeto
n Invocar un mtodo no heredado ni definido en un objeto

w provoca un error_de_ejecucin

var fecha = new Date();


!
fecha.toString() => Fri Aug 08 2014 12:34:36 GMT+0200 (CEST)
fecha.getHours() => 12
fecha.getMinutes() => 34
fecha.getSeconds() => 36
93
Juan Quemada, DIT, UPM
Definicin de un nuevo mtodo de un objeto
Los mtodos se pueden definir tambin directamente en un objeto
n El nuevo mtodo solo se define para ese objeto (no es de la clase)
!
Invocar un mtodo cambia el entorno de ejecucin de JavaScript
n pasando a ser el objeto invocado, que se referencia con this
w this.titulo referencia la propiedad titulo del objeto pelicula

var pelicula = {
titulo:'Avatar',
director:'James Cameron',
!
resumen:function (){
return "El director de " + this.titulo + " es " + this.director;
}
}
!
pelicula.resumen() => "El director de Avatar es James Cameron"
94
Juan Quemada, DIT, UPM
Algunas Clases predefinidas
Object
n Clase raz, suele usarse el literal: {a:3, b:"que tal"}
Array
n Coleccin indexable, suele usarse el literal: [1, 2, 3]
Date
n Hora y fecha extraida del reloj del sistema: new Date()
Function
n Encapsula cdigo, suele usarse literal o def.: function (x) {....}
RegExp
n Expresiones regulares, suele usarse el literal: /(hola)+$/
Math
n Modulo con constantes y funciones matemticas
Number, String y Boolean
n Clases que encapsulan valores de los tipos number, string y boolean como objetos
n Sus mtodos se aplican a los tipos directamente, la conversin a objetos es automatica
Juan Quemada, DIT, UPM 95
Final del tema
Muchas gracias!

96
Juan Quemada, DIT, UPM
Mtodos de la clase
Un mtodo es una operacin (~funcin) invocable sobre un objeto
n Se invoca con la notacin punto: objeto.metodo(..params..)
!
Un objeto hereda mtodos de su clase
n Solo se puede invocar mtodos heredados o definidos en un objeto

w Invocar un mtodo no heredado ni definido en un objeto, da error_de_ejecucin


!
Ejemplo: la clase Date incluye mtodos (ilustrados arriba) como
n getDay(), getFullYear(), getHours(), getMinutes(), ..

w https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date

97
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Despues de haber definido las variables fruta y nada

var fruta = {peras:3, kiwis:7, frutas:function(){ return((this.peras+this.kiwis) + " frutas")}};


var nada = undefined;
var p = "peras";
!
fruta.peras => se evala a 3*, 7, "10 frutas", undefined o Error_de_ejecucin
fruta.kiwis => se evala a 3, 7*, "10 frutas", undefined o Error_de_ejecucin
fruta.frutas() => se evala a 3, 7, "10 frutas"*, undefined o Error_de_ejecucin
peras.frutas() => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin*
fruta.p => se evala a 3, 7, "10 frutas", undefined* o Error_de_ejecucin
fruta[p] => se evala a 3*, 7, "10 frutas", undefined o Error_de_ejecucin
fruta["peras"] => se evala a 3*, 7, "10 frutas", undefined o Error_de_ejecucin
fruta["kiwis"] => se evala a 3, 7*, "10 frutas", undefined o Error_de_ejecucin
fruta["fresas"] => se evala a 3, 7, "10 frutas", undefined* o Error_de_ejecucin
nada.frutas() => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin*
nada[p] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin*
nada.peras => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin*
nada["kiwis"] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin*

98
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Despues de haber definido las variables fruta y nada

var fruta = {peras:3, kiwis:7, frutas:function(){ return((this.peras+this.kiwis) + " frutas")}};


var nada = undefined;
var p = "peras";
!
fruta.peras => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta.kiwis => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta.frutas() => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
peras.frutas() => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta.p => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta[p] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta["peras"] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta["kiwis"] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
fruta["fresas"] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
nada.frutas() => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
nada[p] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
nada.peras => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin
nada["kiwis"] => se evala a 3, 7, "10 frutas", undefined o Error_de_ejecucin

99
Juan Quemada, DIT, UPM
Ejercicio
Crear una pgina HTML con un script, que primero cree la variable palabra
inicializandola como sigue:
n var palabra = {saludo:'hola', despedida:'adis'};
Despues debe muestrar en lineas diferentes, el resultado de evaluar las
siguientes expresiones:
n palabra.saludo
n palabra.despedida
n palabra.vivienda
Utilizar un bloque <pre></pre> para presentar el resultado de la evaluacin
con este formato:
n <expresin> => <evaluacin_de_la_expresin>
w tal y como se hace en el segundo ejemplo del tema

Utilizar tambin document.writeln(....) para introducir separaciones de linea


Sugerencia: una vez cargada la pgina, ejecutar estas 3 expresiones en la
consola JavaScript del navegador
100
Juan Quemada, DIT, UPM
Objetos: caractersticas avanzadas

101
Juan Quemada, DIT, UPM
x
peras fresas

Propiedades var x = { peras:3, fresas:20};


!
3 20

dinmicas x.peras = 7; x
! peras fresas
x.kiwis = 5;
Las propiedades de objetos 7 20
!
n Pueden crearse delete x.fresas;
x
n Pueden destruirse kiwis
! peras
fresas
Operaciones sobre propiedades 7 5
n x.c = 4 OJO: sentencia compleja!! 20

w si propiedad x.c existe, le asigna 4;


x
si x.c no existe, crea x.c y le asigna 4 kiwis
peras
n delete x.c
7 5
w si existe y.c, la elimina; si no existe, no hace nada
n "c" in x

w si x.c existe, devuelve true, sino devuelve, false

102
Juan Quemada, DIT, UPM
var pelicula = {
titulo: 'Avatar',
director:{
nombre:'James',
Objetos anidados: rboles apellido: 'Cameron'
}
};
Los objetos pueden anidarse entre si
n Los objetos anidados representan arboles
pelicula
!
La notacin punto o array puede encadenarse titulo director
n Representando un camino en el rbol

w Las siguientes expresiones se evaluan as: 'Avatar'


n pelicula.director.nombre => 'James' nombre apellido
n pelicula['director']['nombre'] => 'James'
'James' 'Cameron'
n pelicula['director'].apellido => 'Cameron'
n pelicula.estreno => undefined
n pelicula.estreno.ao => Error_de_ejecucin
103
Juan Quemada, DIT, UPM
// Dado un objeto pel definido con
!
var pel = {
titulo: 'Avatar',
Usar propiedades dinmicas director:James Cameron'
};
Las propiedades dinmicas de JavaScript
!
// se puede aadir pel.estreno con
n son muy tiles si se utilizan bien !
! pel.estreno = {
ao: '2009',
Un objeto solo debe definir las propiedades cine: Tivoli'
n que contengan informacin conocida }
w aadir mas solo si son necesarias !
// La expresin
! !
La informacin se puede consultar con pel.estreno && pel.estreno.ao
n prop1 && prop1.prop2 !
// devuelve pel.estreno o undefined,
w para evitar errores de ejecucin // evitando ErrorDeEjecucin, si
w si las propiedades no existen // pel.estreno no se hubiese creado

104
Juan Quemada, DIT, UPM
x {}

var x = {}; // x e y tienen la


var y = x; // misma referencia y z {}
! x {}
var z = {}; // la referencia a z
// es diferente de t
// la de x e y
! y 1
x.t = 1;
!
x.t => 1 // x accede al mismo
y.t => 1 // objeto que y Las variables que contienen objetos
z.t => undefined
n solo contienen la referencia al objeto
!
El objeto esta en otro lugar en memoria
Referencias n indicado por la referencia
! !
a objetos Esto produce efectos laterales
n como ilustra el ejemplo

105
Juan Quemada, DIT, UPM
var x = {}; // x e y contienen la
var y = x; // misma referencia
Identidad de objetos
var z = {} // la referencia a z
// es diferente de x e y
Las referencias a objetos afectan a la identidad !
n porque identidad de objetos
x === y => true
x === {} => false
w es identidad de referencias x === z => false
n los objetos no se comparan

w se comparan solo las referencias


n es poco util si no se redefine
x {}

!
Igualdad (debil) de objetos == y != y
n no tiene utilidad tampoco con objetos

w no se debe utilizar
z {}

106
Juan Quemada, DIT, UPM
Objeto window o this

window

screen document o o o o o o
history undefined Infinity
o o o o o o o o o o o o o o o

El entorno de ejecucin de JavaScript es el objeto global window


n El objeto global window tiene propiedades con informacin sobre
w Objetos predefinidos de JavaScript, el navegador, el documento HTML, .....
!
window se referencia tambin como this en el entorno global
n La propiedad document de window se referencia como
w window.document, this.document o document
!
Documentacin: https://developer.mozilla.org/en-US/docs/Web/API/Window
107
Juan Quemada, DIT, UPM
Variables globales y el entorno de ejecucin
window

screen document history location navigator o o o x

o o o o o o o o o o o o o o o

Un programa JavaScript se ejecuta con el objeto window como entorno


n una asignacin a una variable no definida como x = 1;

w Crea una nueva propiedad de window de nombre x, porque


n x = 1; es equivalente a this.x = 1; ya window.x = 1;
!
Olvidar definir una variable, es un error muy habitual
n y al asignar un valor a la variable no definida, JavaScript no da error

w sino que crea una nueva propiedad de window


n Es un error de diseo de JavaScript y hay que tratar de evitarlo
108
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

109
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones, despues de haber
ejecutado las siguientes sentencias
var pan = {blanco:6, de_ajo:5, integral:{de_semillas:{de_avena:3, de_lino:4}}};
leche = {entera:4, semi_desnatada:3, desnatada:5};
delete pan.de_ajo;
!
pan.integral.de_semillas.de_lino => 3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan.integral.sin_semillas.de_lino => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin*
pan.integral.de_semillas => 3, 4, 5, 6, {de_avena:3,de_lino:4}*, undefined o ErrorDeEjecucin
pan.de_semillas.de_ajo => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin*
pan.de_ajo => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecucin
pan['de_ajo'] => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecucin
pan['integral'].de_semillas => 3, 4, 5, 6, {de_avena:3,de_lino:4}*, undefined o ErrorDeEjecucin
pan['blanco']['integral'] => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecucin
leche.entera => 3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
this.leche.entera => 3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
window.leche.entera => 3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
window.leche.de_avena => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecucin
this.leche.de_avena.integral => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin*

110
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones, despues de haber
ejecutado las siguientes sentencias
var pan = {blanco:6, de_ajo:5, integral:{de_semillas:{de_avena:3, de_lino:4}}};
leche = {entera:4, semi_desnatada:3, desnatada:5};
delete pan.de_ajo;
!
pan.integral.de_semillas.de_lino => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan.integral.sin_semillas.de_lino => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan.integral.de_semillas => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan.de_semillas.de_ajo => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan.de_ajo => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan['de_ajo'] => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan['integral'].de_semillas => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
pan['blanco']['integral'] => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
leche.entera => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
this.leche.entera => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
window.leche.entera => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
window.leche.de_avena => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin
this.leche.de_avena.integral => 3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecucin

111
Juan Quemada, DIT, UPM
DOM: Document Object Model

112
Juan Quemada, DIT, UPM
DOM: Document Object Model window

screen document o o o
history location navigator
o o o o o o o o o o o o
HTML

BODY
HEAD
o o o o o o

Objeto DOM: objeto JS asociado al documento HTML visualizado en el navegador


n El navegador lo almacena en la propiedad document de window
w Que contiene el rbol de objetos DOM de la pgina HTML
w Doc: https://developer.mozilla.org/en/docs/Web/API/Document
!
Los objetos DOM pueden buscarse por atributos (id, class, ..) de HTML
n Por ej., el mtodo document.getElementById("idx") devuelve el objeto DOM

w asociado al elemento de la pgina HTML con identificador idx


!
window tiene adems propiedades con el nombre de los identificadores
n OJO! peligro: nombre puede coincidir con el de otra propiedad de window
113
Juan Quemada, DIT, UPM
getElementById ("fecha") devuelve el objeto DOM de <div id="fecha"></div>
!
Propiedad innerHTML de un objeto DOM
n Permite extraer/insertar HTML en el elemento del documento

Acceso a
DOM

114
Juan Quemada, DIT, UPM
Varios scripts
Una pgina
n con varios scripts

w es un nico programa
!
Scripts se juntan siguiendo el
orden de aparicin en la pgina
!
!
!
!!
!
funcin mostrar_fecha()
n Se define e invoca en

scripts diferentes

115
Juan Quemada, DIT, UPM
La propiedad fecha de window contiene el objeto DOM de <div id="fecha"></div>
n No est recomendado usar estas propiedades de window
w Si hay colisin de nombres con otras propiedades y puede haber problemas
Propiedad innerHTML de un objeto DOM
n Permite extraer/insertar HTML en el elemento del documento

Acceso a
DOM
116
Juan Quemada, DIT, UPM
window

screen documen
t o o o
history location navigator
o o o o o o o o o o o o
HTML

BODY
Location, history,
HEAD
o o o o o o screen, ...
location: propiedad que contiene el URL a la pgina en curso
n location = http://www.upm.es // Carga la pgina en el navegador
w location.reload() re-carga la pgina en curso
n propiedades: href (url), protocol, hostname, port, pathname, search (query), ...

history: propiedad con la historia de navegacin


n Mtodos para navegar por la historia: history.back(), history.forward(), ...

screen: dimensiones de la pantalla


n width, height, availWidth, availHeight: para adaptar apps a pantallas mviles

Documentacion: https://developer.mozilla.org/en-US/docs/Web/API/Window
117
Juan Quemada, DIT, UPM
window.screen

118
Juan Quemada, DIT, UPM
Funciones de seleccin de elementos
getElementById(my_id)
n Es el mas sencillo de utilizar porque devuelve
w El objeto DOM con el identificador buscado o null si no lo encuentra
n Un identificador solo puede estar en un objeto de una pgina HTML!
!
getElementsByName(my_name),
getElementsByTagName(my_tag),
getElementsByClassName(my_class),
querySelectorAll(CSS selector),...
n Devuelven una matriz de objetos
w Por ejemplo: getElementsByName(my_name)[0]
n referencia el primer elemento con atributo name=my_name
n Doc: https://developer.mozilla.org/en/docs/Web/API/Document

119
Juan Quemada, DIT, UPM
Al ejecutar la instruccin en la
consola Web de Firefox,
cambiamos la fecha por hola

120
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

121
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
<!DOCTYPE html> !
<html> .... <body> !
<h4 id="id1" >Ttulo</h4>
!
<p id="id2">Coche</p>
!
<p id="id3">Casa</p>
<div id="id4"></div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
</html>
!
Como se evaluarn las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML => undefined, "", Ttulo"*, "Coche", "Casa", "ErrorEjecucin"
document.getElementById("id2").innerHTML => undefined, "", "Ttulo", Coche"*, "Casa", ErrorEjecucin
document.getElementById("id3").innerHTML => undefined, "", "Ttulo", "Coche", Casa"*, ErrorEjecucin
document.getElementById("id4").innerHTML => undefined, "*, "Ttulo", "Coche", "Casa", ErrorEjecucin
document.getElementById("id7").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin*
id1.innerHTML => undefined, "", Ttulo"*, "Coche", "Casa", ErrorEjecucin
id2.innerHTML => undefined, "", "Ttulo", Coche"*, "Casa", ErrorEjecucin
id4.innerHTML => undefined, "*, "Ttulo", "Coche", "Casa", ErrorEjecucin
id6.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin*
id8.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin*

122
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
<!DOCTYPE html> !
<html> .... <body> !
<h4 id="id1" >Ttulo</h4>
!
<p id="id2">Coche</p>
!
<p id="id3">Casa</p>
<div id="id4"></div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
</html>
!
Como se evaluarn las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", "ErrorEjecucin"
document.getElementById("id2").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
document.getElementById("id3").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
document.getElementById("id4").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
document.getElementById("id7").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id1.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id2.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id4.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id6.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id8.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin

123
Juan Quemada, DIT, UPM
Sentencia for/in de JavaScript

124
Juan Quemada, DIT, UPM
Sentencia for/in
for (i in x) {..bloque de instrucciones..}
n itera en todas las propiedades del objeto x

!
El nombre de propiedad y su contenido se referencian con "i" y "x[i]"
n "i" contiene el nombre de la propiedad en cada iteracin

n "x[i]" representa el valor de la propiedad "i"

w Dentro de la sentencia for debe utilizarse la notacin array

x
a c
b
7 'hi' 'adios'

125
Juan Quemada, DIT, UPM
Sentencia for/in
x
En el ejemplo se utiliza for (i in x) {...} c
a b
n para mostrar en una pgina Web
7 'hi' 'adios'
w el contenido de las propiedades de un objeto

126
Juan Quemada, DIT, UPM
Sintaxis de la
sentencia for/in
La sentencia comienza por for
!
Sigue la condicin (i in obj)
n debe ir entre parntesis (...)

!
Los bloques de ms de 1 sentencia
n deben delimitarse con {....}

!
Bloques de 1 sentencia
n pueden omitir {..}, pero mejoran la

legibilidad delimitados con {..}

127
Juan Quemada, DIT, UPM
window.screen

128
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

129
Juan Quemada, DIT, UPM
Ejercicio
Construir una pgina HTML con un script que primero defina el
siguiente objeto
n var y = {x:'hola', y:'que', z:'tal', t: 'ests'}
!
A continuacin debe concatenar los strings que contienen sus
propiedades en un nico string con los valores separados por
un espacio en blanco, utilizando el bucle for/in
!
Por ltimo, debe mostrar el string concatenado en la pgina
HTML con la funcin document.write(....)

130
Juan Quemada, DIT, UPM
Ejercicio entregable
Construir una pgina HTML que liste el contenido de todas las propiedades de un objeto en
forma de tabla.
!
El nombre o referencia al objeto se pedir al usuario utilizando la funcin prompt, para que lo
introduzca a travs del cajetn del desplegable generado. El script deber aceptar nombres de
propiedades de window tales como screen, this.location, document, .. o incluso window y
si el nombre de la propiedad no existe devolver undefined. La tabla HTML generada tendr
2 columnas:
!
La 1a columna contendr los nombres de las propiedades de objeto
La 2a columna contendr el valor de la propiedad, siempre que no sea un objeto o funcin
(comprobarlo con el operador "typeof"). Si es un objeto o funcin se si indicar objeto o
funcin.
!
Incluir un formato CSS bien diseado para la visualizacin de la tabla. Pueden inspirarse en el
mostrado en el tema HTML/CSS Marcas bsicas".
!
Se recomienda utilizar un script que utilice la sentencia for/in para extraer las propiedades e
insertarlas en la pgina HTML con formato de tabla. Utilizar dentro del bucle una sentencia "if/
else" que compruebe con el operador "typeof" para indicar si es un objeto o funcin.
!
Alojar el script como un recurso pblico en un servidor en la nube (Google Drive) para que
pueda accederse por cualquier usuario desde cualquier navegador.
131
Juan Quemada, DIT, UPM
Eventos Javascript

132
Juan Quemada, DIT, UPM
Eventos y Manejadores
JavaScript utiliza eventos para interaccionar con el entorno
n Hay eventos de muchos tipos

w Temporizadores, clicks en boton, tocar en pantalla, pulsar tecla, ...


!
Manejador (callback) de evento
n funcin que se ejecuta al ocurrir el evento
!
El script inicial debe configurar los manejadores (callbacks)
n a ejecutar cuando ocurra cada evento que deba ser atendido

evento a evento b

Eje de
tiempos
Carga de pgina manejador a manejador b
HTML

133
Juan Quemada, DIT, UPM
Eventos peridicos con setInterval(....)
JavaScript tiene una funcin setInterval (..)
n para programar eventos peridicos

!
setInterval (manejador, periodo_en_milisegundos)
n tiene 2 parmetros

w manejador: funcin que se ejecuta al ocurrir el evento


w periodo_en_milisegundos: tiempo entre eventos peridicos

1 seg 2 seg 3 seg 4 seg 5 seg

Eje de
tiempos manejador manejador
manejador manejador manejador
setInterval(
manejador,
1000_miliseg.
)
134
Juan Quemada, DIT, UPM
Reloj
Utilizamos la funcin
n setInterval(manejador, T)

w para crear un reloj


!
Cada segundo se muestra
n El valor de reloj del sistema

135
Juan Quemada, DIT, UPM
Eventos DOM
Los eventos DOM se asocian a elementos HTML
n como atributos: 'onclick', 'ondblclick', 'onload', ....
w donde el manejador es el valor asignado al atributo
!
Ejemplo:
n <img src="img1.png" onclick="this.src='img2.png'" >
w Cdigo del manejador: "this.src='img2.png'" (valor del atributo)
n this referencia el objeto DOM asociado al manejador
!
Tutorial:
n https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes

136
Juan Quemada, DIT, UPM
Definimos 2 manejadores de evento en elem. <img .... >
n Atributo onclick: muestra el icono enfadado

Eventos n Atributo ondblclick: muestra el icono pasivo


!
en HTML this.src referencia atributo src de <img ..>
n this referencia objeto DOM asociado: <img ..>

137
Juan Quemada, DIT, UPM
Eventos definidos directamente en Javascript
Los manejadores de eventos se pueden definir con
n objeto.addEventListener(evento, manejador)

!
Tambin se pueden definir como propiedades
n objeto.evento = manejador

w objeto: objeto DOM al que se asocia el evento


w evento: nombre (onload, onclick, onmouseover, etc. )
w manejador: funcin ejecutada al ocurrir un evento
!
Ejemplos
n img.addEventListener("onclick", function() {... cdigo ...})

n img.onclick=function() {... cdigo...}

138
Juan Quemada, DIT, UPM
Los manejadores de evento se definen ahora en un script separado
n El objeto <img ...> se identifica desde JavaScript con getElementById(..)

n manejador se aade con mtodo: object.addEventListener(event, manejador)

n Actualmente se recomienda usar siempre addEventListener(.)

Evento como propiedad

139
Juan Quemada, DIT, UPM
Los manejadores de evento se definen tambin as en un script separado
n El objeto <img ...> se identifica desde JavaScript con getElementById(..)

n Sintaxis de los manejadores: object.event= manejador

Evento como propiedad

140
Juan Quemada, DIT, UPM
El script pasa a la cabecera, se separa del documento HTML
n El cdigo se mete en la funcin inicializar(), que se ejecutra al ocurrir onload

w onload ocurre con la pgina HTML ya cargada y el objeto DOM construido

Evento onload

141
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

142
Juan Quemada, DIT, UPM
Ejercicio
Modificar el reloj del ejemplo anterior para que presente
n Horas, minutos, segundos y milisegundos con el formato
w 12 horas, 23 minutos, 10 segundos, 123 ms
n Se recomienda variar el intervalo del evento a 1 ms
n Utilizar mtodos que extren de un objeto Date: horas, min., seg. y ms
w getHours(), getMinutes(), getSeconds() y getMilliseconds()
n Tutorial Date:
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
n Modificar el formato de presentacin en mostrar_hora()
!
Hacer que el reloj pare al hacer click sobre l (si est en marcha)
n y que vuelva a arrancar al hacer click sobre l cuando est parado
!
Utilizar addEventListener(..) para aadir manejadores de eventos:
n https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener
143
Juan Quemada, DIT, UPM
Botones y formularios en JavaScript

144
Juan Quemada, DIT, UPM
Entradas y botones
Entrada: un cajetn en pantalla para introducir texto en una aplicacin
n Se define con <input type=text ..>

w el atributo value="texto" representa en texto dentro del cajetin


Botn: elemento grfico que invita a hacer clic
n Se define con <buton type=button ...>nombre</button>

145
Juan Quemada, DIT, UPM
Ejemplo Pregunta
Esta WebApp plantea la pregunta
n Quien descubri Amrica?

w para ilustrar como interaccionar


n a travs de formularios y botones

!
Escribir la respuesta en el cajetn
n y pulsar el boton consultar

w para saber si es correcto


!
Segn sea la respuesta se responde
n Correcto o No es correcto

146
Juan Quemada, DIT, UPM
Pregunta

147
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

148
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
!
<!DOCTYPE html>
<html>
! ... <body>
!
! <h4 id="id1" >Ttulo</h4>
! <input type="text" id="id2" name= "caja" value="7">
<p id="id3" >Texto</p>
!!
<script type=text/javascript> script con expresiones </script>
!</body>
!
</html>
Como se evaluarn las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML => undefined, "", "null", Ttulo*, "Texto", 7, "7"
document.getElementById("id1").value => undefined*, "", "null", "Ttulo", "Texto", 7, "7"
id1.value => undefined*, "", "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id2").innerHTML => undefined, "*, "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id2").value => undefined, "", "null", "Ttulo", "Texto", 7, 7"*
id2.value => undefined, "", "null", "Ttulo", "Texto", 7, 7"*
document.getElementById("id3").innerHTML => undefined, "", "null", "Ttulo", Texto"*, 7, 7"
document.getElementById("id3").value => undefined*, "", "null", "Ttulo", "Texto", 7, "7"
id3.value => undefined*, "", "null", "Ttulo", Texto", 7, "7"
149
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
!
<!DOCTYPE html>
<html>
! ... <body>
!
! <h4 id="id1" >Ttulo</h4>
! <input type="text" id="id2" name= "caja" value="7">
<p id="id3" >Texto</p>
!!
<script type=text/javascript> script con expresiones </script>
!</body>
!
</html>
Como se evaluarn las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML => undefined, "", "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id1").value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
id1.value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id2").innerHTML => undefined, "", "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id2").value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
id2.value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
document.getElementById("id3").innerHTML => undefined, "", "null", "Ttulo", "Texto", 7, 7"
document.getElementById("id3").value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
id3.value => undefined, "", "null", "Ttulo", "Texto", 7, "7"
150
Juan Quemada, DIT, UPM
Ejercicio
Modificar el ejemplo anterior de forma que
n si la respuesta es incorrecta
w adems de indicar No es correcto
n inicialice el cajetin con el texto pruebe otra vez

!
Informacin sobre atributos JS de <input type=text ..> en:
n http://www.w3schools.com/jsref/dom_obj_text.asp

151
Juan Quemada, DIT, UPM
Libreras JavaScript jQuery y Zepto

152
Juan Quemada, DIT, UPM
Librerias Javascript
Las librerias JavaScript actuales son multi-navegador
n Funcionan en IE, Firefox, Safari, Chrome, Opera, ...

w Ahorran mucho tiempo -> utilizarlas siempre que existan


n Ejemplos: jQuery, Zepto, Prototype, Dojo, lungo.js, PhoneGap, ...

!
jQuery es muy popular (http://jquery.com/)
n Procesar DOM, gestionar eventos, animaciones y estilos CSS, Ajax, ..

!
Zepto: subconjunto compatible de jQuery para mviles (http://zeptojs.com)
n zepto.min.js ocupa solo 9,7Kbytes (gzipped)

w OJO! Soporta browsers mviles actuales, pero no Internet Explorer


n Aade eventos tactiles para mviles y tabletas

n Es equivalente a jQuery 2.0 aparecida recientemente


153
Juan Quemada, DIT, UPM
Objetos y funcin jQuery (o Zepto)
Objeto jQuery: representacin ms eficaz de un objeto DOM
n se procesan en bloque (array) con mtodos de jQuery como html(...)
!
Funcin jQuery: jQuery("<selector CSS>") o $("<selector CSS>")
n devuelve el array de objetos jQuery que casan con <selector CSS>

w Si no casa ninguno, devuelve null o undefined


n <selector CSS> selecciona objetos DOM igual que en CSS
w

! !
document.getElementById("fecha").innerHTML = "Hola";
!! // es equivalente a:
!
$("#fecha").html("Hola");
!
La funcin jQuery convierte adems objetos DOM y HTML a objetos jQuery
$(objetoDOM); // convierte objetoDOM a objeto jQuery
!
$("<ul><li>Uno</li><li>Dos</li></ul>") // convierte HTML a objeto jQuery

154
Juan Quemada, DIT, UPM
Fecha y hora con jQuery/Zepto
Libreria: script externo identificado por un URL que hay que cargar con:
n <script type="text/javascript" src="zepto.min.js" > </script>
!
$(#fecha) devuelve el objeto jQuery/Zepto del elemento con id=clock
!
$(#fecha).html(new Date()) inserta
n new Date() en objeto jQuery

w devuelto por $(#fecha)

155
Juan Quemada, DIT, UPM
Funcin ready: esperar a pgina cargada
Funcin ready(): ejecuta un script con el objeto DOM est construido
n Invocacin: $(document).ready(function() { .. cdigo js ... });

w Suele utilizarse la sintaxis abreviada: $(function() { .. cdigo .. });

156
Juan Quemada, DIT, UPM
Cache y CDN (Content Distribution Network)
Cache: contiene recursos accedidos anteriormente para acceso rapido
n Caches identifican recursos por igualdad de URLs

CDN: utilizar URL comn a Google, Microsoft, jQuery, Zepto, ...


n Para maximizar probabilidad de que recursos estn ya en la cache

157
Juan Quemada, DIT, UPM
Selectores tipo CSS de jQuery/Zepto
SELECTORES DE MARCAS CON ATRIBUTO ID
$("h1#d83") /* devuelve objecto con marca h1 e id=d83 */
$("#d83") /* devuelve objecto con con id=d83 */
!
SELECTORES DE MARCAS CON ATRIBUTO CLASS
$("h1.princ") /* devuelve array de objectos con marcas h1 y class=princ */
$(".princ") /* devuelve array de objectos con class=princ */
!
SELECTORES DE MARCAS CON ATRIBUTOS
$("h1[border]") /* devuelve array de objectos con marcas h1 y atributo border */
$("h1[border=yes]") /* devuelve array de objectos con marcas h1 y atributo border=yes */
!
SELECTORES DE MARCAS
$("h1, h2, p") /* devuelve array de objectos con marcas h1, h2 y p */
$("h1 h2") /* devuelve array de objectos con marca h2 despus de h1 en el rbol */
$("h1 > h2") /* devuelve array de objectos con marca h2 justo despus de h1 en arbol */
$("h1 + p") /* devuelve array de objetos con marca p adyacente a h1 del mismo nivel */
.................

158
Juan Quemada, DIT, UPM
jQuery/Zepto: Metodos modificadores
$(#id3).html(Hello World!)
n sustituye HTML por Hello World! en el elemento con id=id3

w $(#id3).html() devuelve contenido HTML de $(#id3)


n $(#id3).append(Hello World!) aade HTML al final del existente

$(.expr).val(3)
n inserta atributo value=3 a elementos de la clase expr

w $(#id3).val() devuelve atributo value de $(#id3)


$(#id3).attr(rel, license)
n inserta atributo rel=license a elemento con id=id3

w $(#id3).attr(rel) devuelve atributo rel de $(#id3)


$(ul).addClass(visible)
n inserta atributo class=visible a elementos <ul> (lista)

$(h1).hide() y $(h1).show()
n oculta o muestra elementos <h1>

159
Juan Quemada, DIT, UPM
4 Modos de invocar Zepto (o jQuery)
String con selector CSS: $(<selector CSS>)
n Devuelve un array de objetos jQuery que casan con <selector CSS>

!
String HTML: $(<ul><li>Uno</li><li>Dos</li></ul>)
n Devuelve objeto jQuery equivalente a string interpretado como HTML

!
Objeto DOM: $(document)
n Transforma objeto DOM en objeto jQuery equivalente

!
Funcin ready: $(function(){..}))
n Ejecuta la funcin cuando el rbol DOM est construido

160
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

161
Juan Quemada, DIT, UPM
Ejercicio
Dada una pgina HTML que utiliza la librera Zepto con el siguiente contenido
!
<!DOCTYPE html>
!
<html> .... <body>
<h4 id="id1" >Ttulo</h4>
!
<p id="id2">Coche</p>
!
<div id="id3"></div>
<div id="id4" class="Casa">Casa</div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
!
</html>

Como se evaluarn las siguientes expresiones si estuviesen en el script

$("#id1").html() => undefined o null, error_de_ejecucin, "", Ttulo"*, "Coche", "Casa"


$("#id2").html() => undefined o null, error_de_ejecucin, "", "Ttulo", Coche"*, "Casa"
$("#id3").attr("innerHTML") => undefined o null, error_de_ejecucin, "*, "Ttulo", "Coche", "Casa"
$("#id4").html() => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"*
$(".Casa").html() => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"*
$(".Casa").attr("innerHTML") => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"*
$("#id5").html() => undefined o null*, error_de_ejecucin, "", "Ttulo", "Coche", "Casa"
$("#id6").attr("innerHTML") => undefined* o null, error_de_ejecucin, "", "Ttulo", "Coche", "Casa"
$("#id4").attr("innerHTML") => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"*

162
Juan Quemada, DIT, UPM
Ejercicio
Dada una pgina HTML que utiliza la librera Zepto con el siguiente contenido
!
<!DOCTYPE html>
!
<html> .... <body>
<h4 id="id1" >Ttulo</h4>
!
<p id="id2">Coche</p>
!
<div id="id3"></div>
<div id="id4" class="Casa">Casa</div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
!
</html>

Como se evaluarn las siguientes expresiones si estuviesen en el script

$("#id1").html() => undefined o null, error_de_ejecucin, "", Ttulo", "Coche", "Casa"


$("#id2").html() => undefined o null, error_de_ejecucin, "", "Ttulo", Coche", "Casa"
$("#id3").attr("innerHTML") => undefined o null, error_de_ejecucin, ", "Ttulo", "Coche", "Casa"
$("#id4").html() => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"
$(".Casa").html() => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"
$(".Casa").attr("innerHTML") => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"
$("#id5").html() => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", "Casa"
$("#id6").attr("innerHTML") => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", "Casa"
$("#id4").attr("innerHTML") => undefined o null, error_de_ejecucin, "", "Ttulo", "Coche", Casa"

163
Juan Quemada, DIT, UPM
Eventos con jQuery y Zepto

164
Juan Quemada, DIT, UPM
Eventos con jQuery/Zepto
Manejadores de eventos: se definen sobre el objeto jQuery i de <img.. id=i1>
n con la funcion on -> i.on(evento, manejador)

165
Juan Quemada, DIT, UPM
Pregunta
Zepto

166
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

167
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
!<!DOCTYPE html><html>
!<script type="text/javascript" src="zepto.min.js" > </script>
<script type="text/javascript">
! $(function(){ ..... /* script con expresiones de abajo */ });
!</script></head><body>
<h4 id="id1" >Datos</h4>
!!
! Introduzca su edad:
<input type="text" id="id2" name="edad" value="7" class="dato">
!</body>
!</html>
Como se evaluarn las siguientes expresiones si estuviesen en el script
$("#id1").html() => undefined o null, "", Datos"*, "text", "edad", "id2", "7", "dato"
$("#id2").html() => undefined o null, "*, "Datos", "text", "edad", "id2", "7", "dato"
$(".dato").html() => undefined o null, *, "Datos", "text", "edad", "id2", "7", "dato"
$("#id1").val() => undefined* o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id1").attr("type") => undefined o null*, "", "Datos", "text", "edad", "id2", "7", "dato"
$(".dato").attr("id") => undefined o null, "", "Datos", "text", "edad", id2"*, "7", "dato"
$("#id2").val() => undefined o null, "", "Datos", "text", "edad", "id2", 7"*, "dato"
$("#id2").attr("name") => undefined o null, "", "Datos", "text", edad"*, "id2", "7", "dato"
$("#id2").attr("class") => undefined o null, "", "Datos", "text", "edad", "id2", "7", dato"*
168
Juan Quemada, DIT, UPM
Ejercicio
Si tenemos una pgina HTML con el siguiente contenido
!<!DOCTYPE html><html>
!<script type="text/javascript" src="zepto.min.js" > </script>
<script type="text/javascript">
! $(function(){ ..... /* script con expresiones de abajo */ });
!</script></head><body>
<h4 id="id1" >Datos</h4>
!!
! Introduzca su edad:
<input type="text" id="id2" name="edad" value="7" class="dato">
!</body>
!</html>
Como se evaluarn las siguientes expresiones si estuviesen en el script
$("#id1").html() => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id2").html() => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$(".dato").html() => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id1").val() => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id1").attr("type") => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$(".dato").attr("id") => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id2").val() => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id2").attr("name") => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
$("#id2").attr("class") => undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
169
Juan Quemada, DIT, UPM
Ejercicio

Modificar el ejemplo de script con Zepto que pregunta, Quin


descubri Amrica?, de forma que si la respuesta es incorrecta,
adems de indicar No es correcto, inicialice el cajetin con el texto
pruebe otra vez, insertando este string con mtodos de Zepto
!
Mas informacin sobre las funciones de Zepto que modifican
atributos HTML en:
n http://zeptojs.com/

n http://zeptojs.com/#val

n http://zeptojs.com/#attr

170
Juan Quemada, DIT, UPM
La Clase Array

171
Juan Quemada, DIT, UPM
Arrays
Array: lista ordenada de
n elementos heterogneos

w accesibles a travs de un ndice var x = [1, 2, 3];


n de 0 a length-1 !
! !
Tamao mximo: 2^32-2 elementos a[0] => 1
! a[1] => 2
Elementos a[2] => 3
n a[0] es el primer elemento
!
!
n ........
a.length => 3
n a[a.length-1] ltimo elemento

172
Juan Quemada, DIT, UPM
Elementos de un Array
Elementos del array pueden !
contener cualquier valor u objeto var a = [1, undefined, 'a', , [1, 2]];
n undefined
!
a[3]; => undefined
n otro array a[4]; => [1, 2]
n objetos !
n ... a[9]; => undefined
!
! a[4][1]; => 2
Indexar elementos que no existen
n devuelve undefined

w por ejemplo con ndices mayores


que length

173
Juan Quemada, DIT, UPM
Tamao del Array
!
Los arrays son dinmicos var a = [1, 3, 1];
n pueden crecer y encoger !
a; => [1, 3, 1]
! !
Asignar un elemento fuera de rango a[4] = 2; => 2
n incrementa el tamao del array a; => [1, 3, 1, , 2]
! !
El tamao del array se puede modificar // el array se reduce
n con la propiedad a.length
a.length = 2 => 2
!
w a.length = 3; a => [1, 3]
n modifica el tamao del array

n Que pasa a ser 4

174
Juan Quemada, DIT, UPM
Mtodos de Array

Array hereda mtodos de su clase var a = [1, 5, 3];


! !
sort(): devuelve array ordenado a.sort() => [1, 3, 5]
! !
a.reverse() => [5, 3, 1]
reverse(): devuelve array invertido
!
! a.push(false) => 4
push(e1, .., en) a => [5, 3, 1, false]
n aade e1, ..,en al final del array !
! a.pop() => false
a => [5, 3, 1]
pop()
n extrae ltimo elemento del array

175
Juan Quemada, DIT, UPM
Ms mtodos

join(<separador>):
n devuelve string uniendo elementos var a = [1, 5, 3, 7];
w introduce <separador> entre elementos !
! a.join(';') => '1;5;3;7'
slice(i,j): devuelve una rodaja !
n Indice negativo (j) es relativo al final
a.slice(1, -1) => [5, 3]
!
w ndice -1 es igual a a.length-2
a.splice(1,2,true) => [5, 3]
! a => [1, true, 7]
splice(i, j, e1, e2, .., en)
n sustituye j elementos desde i en array

w por e1, e2, ..,en


n Devuelve elementos eliminados

176
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

177
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes instrucciones y expresiones en
el orden dado
[3, ,1,2,0][0] => se evala a 0, 1, 2, 3, undefined, null
[3, ,1,2,0][1] => se evala a 0, 1, 2, 3, undefined, null
[3, ,1,2,0][8] => se evala a 0, 1, 2, 3, undefined, null
[3, ,1,2,0][2] => se evala a 0, 1, 2, 3, undefined, null
[3, ,1,2,0][4] => se evala a 0, 1, 2, 3, undefined, null
!
[3, ,1,2,0].sort() => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].reverse() => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].pop() => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].push(8) => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].length => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
!
var a = [3, 1, 4, 0];
a.slice(1, -1) => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.slice(1, 2) => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.splice(1, 2, 1, 4) => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]
a => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.splice(1, 2, 7) => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]
178
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes instrucciones y expresiones en
el orden dado
[3, ,1,2,0][0] => se evala a 0, 1, 2, 3*, undefined, null
[3, ,1,2,0][1] => se evala a 0, 1, 2, 3, undefined*, null
[3, ,1,2,0][8] => se evala a 0, 1, 2, 3, undefined*, null
[3, ,1,2,0][2] => se evala a 0, 1*, 2, 3, undefined, null
[3, ,1,2,0][4] => se evala a 0*, 1, 2, 3, undefined, null
!
[3, ,1,2,0].sort() => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ]*, [0,2,1, ,3]
[3, ,1,2,0].reverse() => se evala a 0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]*
[3, ,1,2,0].pop() => se evala a 0*, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].push(8) => se evala a 0, 5, 6, 8, [3, ,1,2,0,8]*, [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
[3, ,1,2,0].length => se evala a 0, 5*, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
!
var a = [3, 1, 4, 0];
a.slice(1, -1) => se evala a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a.splice(1, 2, 1, 4) => se evala a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a => se evala a [3,1,4,0]*, [1,4], [3,0], [3,7,0]
a.splice(1, 2, 7) => se evala a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a => se evala a [3,1,4,0], [1,4], [3,0], [3,7,0]*
179
Juan Quemada, DIT, UPM
Bucles: sentencias while, for y do/
while

180
Juan Quemada, DIT, UPM
Bucle
Un bucle es una secuencia o bloque de instrucciones
n que se repite mientras se cumple una condicin de permanencia
!
Un bucle se controla con 3 elementos,
n normalmente asociados a una variable(s) de control del bucle

w Inicializacin: fija los valores de arranque del bucle


w Permanencia en bucle: indica si se debe volver a ejecutar el bloque
w Acciones de final bloque: actualiza en cada repeticin las variables de control
!
Ilustraremos los bucles (while, for y do/while) con la funcin veces
!
veces(..) acepta letra y frase como primer y segundo parmetros
n Y devuelve el nmero de veces que la frase contiene la letra

181
Juan Quemada, DIT, UPM
veces(..): bucle while

182
Juan Quemada, DIT, UPM
veces(..): bucle for

183
Juan Quemada, DIT, UPM
Sintaxis de la
sentencia for
La sentencia comienza conr for
!
sigue la condicin (con 3 partes)
n (i=0; i < arguments[i]; i++)

w Inicializacin: i=0, ....


w Permanencia en bucle: i < arguments.length
w Accin final bloque: ++i, ...
!
La sentencia termina con un bloque que debe delimitarse con {....}
!
Bloques que contengan solo 1 sentencia
n pueden omitir {..}, pero se mejora la legibilidad delimitandolos con {..}

184
Juan Quemada, DIT, UPM
veces(..): bucle do

185
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

186
Juan Quemada, DIT, UPM
Ejercicio
Publicar un script en una pgina HTML, que utilize un bucle y la funcin
prompt() para solicitar de forma cclica en el cajetn del desplegable un
nmero para sumarlo a los anteriores o el string acabar para finalizar el
bucle.
!
Cada vez que introduzcamos un nmero debe sumarlo a los anteriores y
presentar el resultado de la suma en el desplegable siguiente, adems de
pedirnos un nuevo nmero o que finalicemos el proceso con "acabar".
!
Utilizar nueva linea (\n) en el mensaje que se presenta con prompt() para
presentar varias lneas encima del cajetn.
!
Cuando se introduzca un string que no sea, ni un nmero, ni acabar, debe
presentar adems el mensaje: entrada erronea, vuelva a intentarlo.
!
Realizar 2 scripts uno con un bucle while y otro con un bucle for. Controlar
la condicin del bucle con el valor que devuelve la funcin prompt().
187
Juan Quemada, DIT, UPM
Ejemplos con iframe, array y for

188
Juan Quemada, DIT, UPM
iFrame
n marco de navegacin independiente
iFrame
!
Un iFrame crea una caja de arena segura
donde poder importar objetos externos
n
!
Ejemplo: enlaza un juego en otro servidor
n El iFrame evita que se introduzca malvare
w Acceso JavaScript limitado a caja de arena

189
Juan Quemada, DIT, UPM
Seguridad Web: Same Origin Policy
La seguridad se controla en las aplicaciones JavaScript
n Permitiendo que un programa JavaScript en un iframe solo acceda
w Al arbol DOM de la pgina principal si proviene del mismo origen
n Esto evita en el ejemplo anterior que el juego
w robe o modifique informacin o datos del usuario en la pgina externa
!
Origen
n protocolo, servidor y puerto del URL
!
La restriccin de pertenecer al mismo origen
n Solo afecta al recurso principal: pgina Web, recurso,
w Los scripts o los estilos no estn afectados y pueden venir de otro servidor
!
As es posible hacer mash-ups seguros
n de contenidos que no esten en nuestra cadena de confianza
190
Juan Quemada, DIT, UPM
Ejemplo con
iFrames

191
Juan Quemada, DIT, UPM
Flexbox
Flexbox permite un diseo
responsivo fcil y flexible:
!
display: flex;
flex-wrap: wrap;
!
coloca cada iframe a la derecha
del anterior. Al llegar al limite
pasa a la lnea siguiente.

192
Juan Quemada, DIT, UPM
Cdigo

193
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

194
Juan Quemada, DIT, UPM
Ejercicio
Modificar el ejemplo de este tema para que se muestre el URL de
cada iframe justo encima de la ventana donde se visualiza su
contenido
n Los URLs irn numerados de forma que cada uno lleve delante

el string URL_n, siendo n el ndice en el array.


Aadir ademas un cajetn para introducir un nmero y un botn que
borre el URL con el ndice introducido cuando se pulse el botn
n Se recomienda utilizar el mtodo splice() para eliminar dicho

elemento del array y despus volver a repintar la lista de iFrames


restantes.

195
Juan Quemada, DIT, UPM
Ejemplo de un Cronmetro

196
Juan Quemada, DIT, UPM
Cronmetro
WebApp similar a un cronmetro digital
!
Cuenta dcimas de segundo (100 miliseg.)
n El contador se inicializa con 0,0 segundos

w n.toFixed(1) formatea con 1 decimal


!
Tiene 2 botones
n arrancar/parar: arranca o para la cuenta

w a partir del valor en que quedo


n arranca si cronmetro parado

n para si cronmetro contando

n inicializar: pone el contador a 0,0

197
Juan Quemada, DIT, UPM
Cronmetro

198
Juan Quemada, DIT, UPM
DOM como almacn de datos

El navegador guarda en document la pgina HTML que est mostrando


n document es un objeto JavaScript con propiedades

w que contienen todos los elementos de la pgina


!
Las propiedades DOM son variables: src, value, innerHTML, ....
n donde la informacin se puede guardar y recuperar

w DOM solo contiene strings y todo debe convertirse a/de string


!
Los elementos de DOM se pueden utilizar como variables
n Hemos utilizado el elemento <span id="crono">

w para almacenar el contador de decimas de segundo

199
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

200
Juan Quemada, DIT, UPM
Ejercicio

Aadir al cronmetro una lista debajo de los botones, que


muestre los instantes en que el cronmetro ha parado de
contar. La lista deber vaciarse cuando se inicialice el
cronmetro.
Sugerencia: aadir un bloque <div> debajo de los botones y
guardar en l los instantes de parada como lneas HTML,
separadas por <br>, como HTML asociado a dicho bloque
La respuesta al botn de inicializar hay que modificarla, para
que no inicialice el contador si se pulsa el boton inicializar
mientras el cronmetro est contando
Sugerencia: comprobar t === undefined antes de inicializar

201
Juan Quemada, DIT, UPM
Eventos tactiles en JavaScript

202
Juan Quemada, DIT, UPM
Eventos tactiles

iPhone (2007): dispara el uso de pantallas tactiles


n Empiezan a incluirse eventos touch en navegadores (JavaScript)
!
W3C est normalizando eventos tactiles bsicos o toques
n touchstart, touchmove, touchend
w https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events
!
Los tipos de toque en pantalla se denoniman gestos o gestures
n Se estan generando librerias de eventos, que incluyen

n por ejemplo, toque (tap), desplazamiento (swipe), pellizco (pinch), ..

203
Juan Quemada, DIT, UPM
Gestos (gestures)
La tendencia es utilizar gestos complejos soportados por librerias
n TapQUO, Zepto (touch, gesture), jQuery Mobile, Hammer, ...

w La figura muestra eventos tactiles de la librera TapQUO

204
Juan Quemada, DIT, UPM
Eventos bsicos para pantalla tactil (W3C)
Eventos tactiles bsicos devuelven un array de toques (TouchList)
n Un elemento por cada dedo que toque, generando 3 eventos
w touchstart: evento disparado al tocar la pantalla
w touchmove: evento disparado al finalizar el movimiento del toque
w touchend: evento disparado al acabar del toque
n Cada elemento de TouchList lleva las coordenadas y otros datos del toque
!
El ejemplo de la pgina siguiente modifica los controladores de eventos
n clic sencillo y doble de raton por los eventos swipe-right y swipe-left

w Los gestos swipe-right y swipe-left se detectan midiendo


n la diferencia de la coordenada X entre touchstart y touchmove

205
Juan Quemada, DIT, UPM
Evento tactil JavaScript

206
Juan Quemada, DIT, UPM
Eventos tactiles y Zepto
El nico evento reutilizable en pantallas tactiles es: click
n Suele estar enlazado al evento tap y funciona con pantallas tactiles
!
Zepto incluye 2 librerias de gestos tactiles
n touch.js que aade los eventos
w tap, singleTap, doubleTap, swipe, swipeUp, swipeDown, swipeLeft, swipeRight
n gesture.js que aade los eventos
w pinch, pinchIn, pinchOut

!
Los S.O. de los dispositivos tactiles como iOS o Android
n Llevan eventos predefinidos asociados a gestos
w Por ejemplo, iOS (Apple) predefine double_tab (ampliar) y pinch (ampliar)
n La configuracin por defecto se quita incluyendo en el manejador
w evento.preventDefault()

207
Juan Quemada, DIT, UPM
La libreria touch.js de Zepto detecta y dispara eventos tactiles automaticamente
n Si cargamos la librera podemos definir directamente manejadores de

w swipeRight y swipeLeft sobre el icono

Eventos touch.js

208
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

209
Juan Quemada, DIT, UPM
Ejercicio
Modificar el ejemplo del cronmetro, quitando los 2 botones:
arrancar/parar e inicializar
!
Aadir en su lugar los siguiente eventos tactiles sobre el body del
cronmetro
n Evento tap: sustituira a arrancar/parar
n Evento swipe: sustituira a inicializar
!
Utilizar la libreria touch.js para implementar los eventos tactiles

210
Juan Quemada, DIT, UPM
Memoria local en HTML5

211
Juan Quemada, DIT, UPM
Almacenamiento de datos en cliente
HTML5 implementa nuevos tipos de almacenamiento de variables
n Sencillas y eficientes de utilizar desde Javascript

w Definicin: http://dev.w3.org/html5/webstorage/
!
Variables locales
n los datos se guardan permanentemente, hasta que se borran

!
Variables de sesin
n Los datos solo se guardan solo durante la sesin
w Comienzo de sesin: apertura de navegador o pestaa
w Final de sesin: cierre de navegador o pestaa

212
Juan Quemada, DIT, UPM
Variables locales y de sesin
Son propiedades de los objetos localStorage y sessionStorage
n solo pueden contener strings, como por ejemplo
w localStorage.usuario = Pedro Prez;
w sessionStorage.apellido = Prez;
!
Las variables locales estn asociadas a protocolo, dominio y puerto
n un programa solo puede acceder a propiedades de local/sessionStorage

w creadas por otros programas cargados del mismo servidor


!
Same origin policy
n Seguridad: un programa solo confia en programas del mismo servidor
n Modularidad: cada servidor tiene un espacio de nombres diferente

213
Juan Quemada, DIT, UPM
Ejemplo de localStorage
Cada usuario que acceda a esta pgina tendr una cuenta diferente
n La variable est en su navegador

214
Juan Quemada, DIT, UPM
Cronmetro con memoria
Nueva versin del cronmetro con localStorage
n as mantiene la cuenta de dcimas de segundos

w entre usos sucesivos de la aplicacin


!
El cronmetro utiliza ahora la variable
n localStorage.c

w para guardar la cuenta de segundos


!
Debemos inicializar localStorage.c
n con parmetro por defecto para cuando se ejecute por primera vez

!
Como la informacin se guarda ahora en localStorage y no en DOM
n hay que actualizar primero localStorage y luego mostrar en DOM
215
Juan Quemada, DIT, UPM
Cronmetro:
localStorage

216
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

217
Juan Quemada, DIT, UPM
Javascript: Notepad

218
Juan Quemada, DIT, UPM
Ejemplo Notepad
Notepad es una aplicacin Web
n que crea una agenda donde guardar notas de texto

w que se almacenan en localStorage


!
La pgina Web que la implementa
n tiene en realidad 2 paginas en una

w La pgina que visualiza las notas


w La pgina que permite editar las notas
!
Al pulsar los botones (Editar o Salvar)
n Una pgina se activa con el mtodo show() de Zepto

w cuando la otra se desactiva con el mtodo hide()

219
Juan Quemada, DIT, UPM
NotePad

220
Juan Quemada, DIT, UPM
Aadir a NotePad utilizando jQuery
n El editor WYSIWYG Cleditor
Ejercicio w Codifcado en javascript/jQuery

almacenamiento n http://premiumsoftware.net/cleditor/

221
Juan Quemada, DIT, UPM
Ejercicio entregable
Aadir al cronmetro con memoria una lista debajo de los botones, que muestre los instantes
en que el cronmetro ha parado de contar. La lista deber vaciarse con el botn de inicializar
del cronmetro. La lista deber guardarse adems en una variable de localStorage, para que
los valores se guarden entre invocaciones sucesivas.

Sugerencia: aadir un bloque <div> vacio debajo de los botones donde se guarden los
instantes de parada como lneas HTML separadas por <br>. En cada parada se aadir una
nueva lnea.

Modificar adems lo siguiente:


!
- La respuesta al botn de inicializar, para no inicializar si se pulsa mientras el cronmetro est
en marcha. Se sugiere comprobar t === undefined antes de inicializar.
!
- Aadir los eventos tactiles tap y swipe sobre el body del cronmetro, para que las
operaciones parar/arrancar e inicializar se puedan hacer con tap y swipe respectivamente.
!
- Aadir una imagen de fondo con una esfera de cronmetro a la caja donde est el contador y
posicionar el contador en la parte de la imagen donde estara la cuenta en uno real, de forma
que se visualice con ms realismo. Se puede utilizar la imagen de cronmetro que se
suministra con los ejemplos del mdulo o buscar una en Internet. La lista de paradas estar
debajo de la esfera.
!
Alojar el script como un recurso pblico en un servidor en la nube (Google Drive) para que
pueda accederse por cualquier usuario desde cualquier navegador. 222
Juan Quemada, DIT, UPM
JSON: JavaScript Object Notation

223
Juan Quemada, DIT, UPM
JSON
JSON: formato textual de representacin de tipos y objetos JavaScript
n http://json.org/json-es.html
!
Un objeto JavaScript se transforma a un string JSON con
n JSON.stringify(object)
!
Un string JSON se transforma en el objeto original con
n JSON.parse(string_JSON)

var x = {a:1, b:{y:[false, null, ""]}}, y, z;


!
y = JSON.stringify(x); => '{"a":1, "b":{"y":[false, null, ""]}}'
!
z = JSON.parse(y); => {a:1, b:{y:[false, null, ""]}}

224
Juan Quemada, DIT, UPM
Serializacin de datos
Serializacin:
n transformacin reversible de un tipo u objeto (en

memoria) en un string equivalente


!
La serializacin es un formato de intercambio de datos
n Almacenar datos en un fichero
n Enviar datos a travs de una lnea de comunicacin
n Paso de parmetros en interfaces REST
!
En JavaScript se realiza desde ECMAScript 5 con
n JSON.stringify(...) y JSON.parse(...)
!
Otros formatos de serializacin: XML, HTML, XDR(C), ...
n Estos formatos estn siendo desplazados por JSON, incluso XML

w Hay bibliotecas de JSON para los lenguajes ms importantes


225
Juan Quemada, DIT, UPM
Caractersticas de JSON
JSON puede serializar
n objetos, arrays, strings, nmeros finitos, true, false y null
w NaN, Infinity y -Infinity se serializan a null
w Objetos Date se serializan a formato ISO
n la reconstruccin devuelve un string y no el objeto original
n No se puede serializar
w Funciones, RegExp, errores, undefined
!
Admite filtros para los elementos no soportados
n ver doc de APIs JavaScript
JSON.stringify(new Date()) => '"2013-08-08T17:13:10.751Z"'
!
JSON.stringify(NaN) => 'null'
!
JSON.stringify(Infinity) => 'null'
226
Juan Quemada, DIT, UPM
JSON en ejemplo con
iframes, array y for

Si queremos
almacenar en el
navegador el
array de urls
para que no se
pierdan los urls
introducidos, hay
que guardarlo
serializado con
JSON en
localStorage

227
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

228
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones

JSON.stringify({a:6, b:Infinity}); => '{"a":6,"b":Infinity}'


=> '{"a":6,"b":NaN}'
=> '{a:6,b:null}'
=> '{"a":6,"b":null}'
=> '{"a":6,"b":""}'
=> '{"a":6,"b":5}'
=> '{"a":6,"b":{}}'
=> '{"a":6,"b":[]}'
=> '{"a":6,"b":"null"}'
!
JSON.stringify({a:6, b:""}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:NaN}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:null}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b: "null"}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:''}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:5}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:{}}) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:[]}) => ..... (las mismas respuestas) ....

229
Juan Quemada, DIT, UPM
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones

JSON.stringify({a:6, b:Infinity}); (4) => '{"a":6,"b":Infinity}'


=> '{"a":6,"b":NaN}'
=> '{a:6,b:null}'
=> {a":6,"b":null}'
=> '{"a":6,"b":""}'
=> '{"a":6,"b":5}'
=> '{"a":6,"b":{}}'
=> '{"a":6,"b":[]}'
=> '{"a":6,"b":"null"}'
!
JSON.stringify({a:6, b:""}) (5) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:NaN}) (4) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:null}) (4) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b: "null"}) (9) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:''}) (5) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:5}) (6) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:{}}) (7) => ..... (las mismas respuestas) ....
JSON.stringify({a:6, b:[]}) (8) => ..... (las mismas respuestas) ....

230
Juan Quemada, DIT, UPM
HTML5 SVG: Scalable Vector
Graphics

231
Juan Quemada, DIT, UPM
SVG: Scalable Vector Graphics
Formato de representacin de grficos vectoriales
n Pueden cambiar de tamao sin perdida de calidad
!
Recursos
n Galeria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject

n Editor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

n Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG

n Tutorial: http://www.w3schools.com/svg/

http://commons.wikimedia.org/wiki/File:Compass.svg
http://commons.wikimedia.org/wiki/SVG_examples
232
Juan Quemada, DIT, UPM
Ejemplo Ajuste SVG
Ajuste SVG ilustra como reescalar una imagen SVG
n Las imagenes en SVG reescalan sin perder calidad

w porque son grficos vectoriales


w tutorial: http://www.w3schools.com/svg/
n Las imgenes GIT, JPEG o PNG no reescalan bien

w porque tienen una resolucin determinada


!
Esta WebApp tiene 2 botones: + y -
!
Cada vez que pulsamos uno de estos botones
n el tamao de la imagen debe aumentar o disminuir un 10%

w segn pulsemos + y -

233
Juan Quemada, DIT, UPM
Ejemplo SVG

234
Juan Quemada, DIT, UPM
Ejempo Reloj SVG
Reloj SVG genera un reloj sencillo con SVG
n El reloj se compone de

w Un crculo negro
w Tres lineas para las manecillas del reloj
!
SVG puede animarse con javaScript
n modificando la representacin DOM del reloj

w Versin 1: las manecillas se mueven con transform


w https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

w Version 2: Calcula las coordenadas de las manecillas


!
Se aade estilo CSS
n Mejora el aspecto y adapta al tamao de la pantalla

235
Juan Quemada, DIT, UPM
Reloj SVG

236
Juan Quemada, DIT, UPM
SVG: Reloj animado
con transform

237
Juan Quemada, DIT, UPM
Animar manecillas con coordenadas
Para animar las manecillas del reloj
n se incluye un script que cada segundo

w recalcula las coordenadas exteriores


n de las manecillas del reloj

n El secundero tiene una longitud de 50 pixels

n El minutero tiene una longitud de 40 pixels

n La manecilla horaria de 30 pixels

!
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
n x2(tiempo, unidades_por_vuelta, x1, radio)

n y2(tiempo, unidades_por_vuelta, y1, radio)

238
Juan Quemada, DIT, UPM
SVG: Reloj animado
con coordenadas

239
Juan Quemada, DIT, UPM
Relojes con estilo

Usando CSS e imgenes se pueden disear


n Las capturas muestran pequeos cambios de diseo

w que cambian muy significativamente la apariencia del


reloj
!
n Hacer clic en estos URLs para verlos
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/09-clock_CSS.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_a.html
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_b.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_c.htm
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_d.htm

240
Juan Quemada, DIT, UPM
SVG: Reloj con estilo CSS

241
Juan Quemada, DIT, UPM
Objetos SVG
Los objetos SVG se pueden definir tambin como objetos externos en XML
n Para importarlos con:

w <img>, <object>, <embed>, <iframe>


n Tutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html

242
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

243
Juan Quemada, DIT, UPM
Ejercicio
Modificar el reloj animado basado en SVG, introduciendo la hora textual en
un cajetn en la mitad superior, pero dentro de la esfera del reloj
n Recomendacin: utilizar la marca text de SVG

w http://www.w3schools.com/svg/svg_text.asp
!
Mejoras adicionales para interesados en profundizar ms:
n Aadir una manecilla de dcimas de segundo, con un circulo pequeo

en la mitad inferior del reloj, como tienen algunos relojes analgicos


n Aadir a voluntad mas elementos en la esfera del reloj.

244
Juan Quemada, DIT, UPM
HTML5 CANVAS

245
Juan Quemada, DIT, UPM
Mapas de bits con CANVAS
CANVAS define un mapa de bits
n Se define en HTML con la marca <canvas>

w Permite programar en Javascript


n aplicaciones interactivas, juegos, 2D, 3D, ....

n Esta soportado en los principales navegadores


!
Caractersticas
n Tiene resolucin fija y no reescala con calidad

w <canvas id=c1 width=150 height=350> Texto alternativo</canvas>


!
Tutoriales
n http://www.w3schools.com/html/html5_canvas.asp
n http://www.w3schools.com/tags/ref_canvas.asp
n https://developer.mozilla.org/En/Canvas_tutorial

246
Juan Quemada, DIT, UPM
Ejemplo Reloj CANVAS

Reloj CANVAS es similar al reloj programado con SVG


n Pero programado en el canvas

w Tiene el mimos circulo y manecillas del de SVG


!
SVG puede animarse con javaScript
n modificando la representacin DOM del reloj

w tal y como se ilustra en el ejemplo siguiente

247
Juan Quemada, DIT, UPM
Reloj CANVAS

248
Juan Quemada, DIT, UPM
Animar las manecillas del reloj
El script calcula cada segundo las manecillas
n una vez calculadas borra el canvas

w y vuelve a dibujar el reloj completo


n Secundero (50 px), minutero (40 px), hora (30 px)

!
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
n x2(tiempo, unidades_por_vuelta, x1, radio)

n y2(tiempo, unidades_por_vuelta, y1, radio)

!
myLine(...) y myCircle(...)
n dibujan lineas y circulos

249
Juan Quemada, DIT, UPM
CANVAS:
Reloj animado

250
Juan Quemada, DIT, UPM
WebGL: Web en 3D
http://www.chromeexperiments.com/webgl

251
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

252
Juan Quemada, DIT, UPM
Ejercicio
Modificar el reloj animado basado en CANVAS, introduciendo la hora
textual en un cajetin en la mitad superior, pero dentro de la esfera del reloj
n Recomendacin: utilizar los comandos de texto del CANVAS

w http://www.w3schools.com/html/html5_canvas.asp
w http://www.w3schools.com/tags/ref_canvas.asp
!
Mejoras adicionales para interesados en profundizar ms:
n Aadir una manecilla de dcimas de segundo, con un circulo pequeo

en la mitad inferior del reloj, como tienen algunos relojes analgicos


n Aadir a voluntad mas elementos en la esfera del reloj.

253
Juan Quemada, DIT, UPM
Aplicaciones FirefoxOS

254
Juan Quemada, DIT, UPM
FirefoxOS
FirefoxOS es el nuevo SO
n para mviles y tabletas
w Desarrollado por la Fundacin Mozilla
!
Sus aplicaciones se programan en
n HTML5, CSS y Javascript
!
Recursos y tutoriales
n https://marketplace.firefox.com/developers/docs/firefox_os
n https://marketplace.firefox.com/developers/docs/quick_start
n https://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicaciones
n https://developer.mozilla.org/en-US/Apps/Reference

255
Juan Quemada, DIT, UPM
Apps FirefoxOS
Aplicaciones para instalar en mviles y tabletas
n Funcionando con o sin conexin a Internet
w Construidas con tecnologas Web: URLs, HTTP, HTML, CSS, JavaScript, ...
n Tambin pueden instalarse en PCs o navegadores
!
Tipos de WebApps Firefox OS
n hosted: alojadas en un servidor
n packaged: se descargan empaquetadas
w Hay tres tipos
n Plain: aplicaciones Web convencionales
n Certified: con acceso a algunos elementos restringidos
n Privileged: con acceso a todos los recursos del mvil

256
Juan Quemada, DIT, UPM
Hosted Apps
Webapps publicadas en modo ejecutable en un servidor Web
n Pueden ejecutarse desde un navegador
n Adems de ser publicadas en una tienda a travs de su URL
w para su instalacin en un dispositivo FirefoxOS
n Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps
!
Caractersticas
n Necesitan conexin a Internet para ser ejecutadas
n Solo puede haber una hosted WebApp por dominio Web
!
Se gestionan a travs del objeto predefinido navigator.mozApps
n con mtodos install(....) o checkInstalled(....)

257
Juan Quemada, DIT, UPM
Packaged WebApps
Webapps empaquetadas en un fichero ZIP
n Pueden ser publicadas en una tienda
w para su instalacin en dispositivos Firefox OS
n Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps
!
Se pueden publicar en tiendas o en servidores
n Solamente se pueden instalar
w No se pueden ejecutar directamente en un navegador
n Pueden ser autonomas
w Funcionando sin conexin a Internet
!
Se instalan a travs del objeto predefinido navigator.mozApps
n con mtodo installPackage(....)

258
Juan Quemada, DIT, UPM
Firefox Marketplace
Firefox Marketplace permite crear
n tiendas de aplicaciones alojadas en servidores
w https://developer.mozilla.org/en-US/Marketplace
!
Los Marketplace FirefoxOS pueden competir entre si
n sern ms o menos populares
w dependiendo de la aceptacin de los usuarios
n sern ms o menos seguras
w dependiendo del control de la seguridad realizado
!
Market places con apps de Mozilla
n https://marketplace.firefox.com

259
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

260
Juan Quemada, DIT, UPM
Reloj SVG como App FirefoxOS

261
Juan Quemada, DIT, UPM
Reloj SVG como App

Incluimos el reloj SVG como


n hosted App
n packaged App
!
!
!
!
Ambas estn publicadas en
n Google Drive de asignatura
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/
262
Juan Quemada, DIT, UPM
Arrancar el simulador de FirefoxOS en Firefox
Las apps se instalan en el simulador incluido en Firefox
n Firefox incluye a partir de Firefox 30.0 un simulador de FirefoxOS
w Se arranca seleccionando Tools -> Web Developer -> App Manager
n Despus se arranca (Start Simulator) y se selecciona la versin 1.4 (Firefox 1.4)
w OJO! La app con el Reloj dada est probada en Firefox 1.4 y 1.3 y pueden no funcionar en otras versiones

263
Juan Quemada, DIT, UPM
Instalar hosted App en simulador FirefoxOS
2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm

3. clicar en botn de instalar


6. Aplicacin
instalada

4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App 4. clicar para
volver a escritorio 264
Juan Quemada, DIT, UPM
Reloj SVG: hosted App

Para crear una hosted App con


Reloj SVG se debe aadir a
clock.htm:
n Iconos
w que se mostrarn en el escritorio
n Instalador
w de la WebApp en el escritorio
n Manifiesto
w con informacin de instalacin
n El ejemplo suministrado incluye
adems estilos y tipografas
265
Juan Quemada, DIT, UPM
manifest.webapp
Fichero en formato JSON (JavaScript Object Notation)
n Con informacin de instalacin, recursos, diseador,
n Los URLs son relativos con path absoluto

JSON es un formato muy habitual para manifiestos


versin nombre que aparece en el escritorio

descripcin para tienda

URL de WebApp en servidor

iconos escritorio

equipo/empresa desarrolladora

266
Juan Quemada, DIT, UPM
install.html

267
Juan Quemada, DIT, UPM
Instalar hosted App en simulador FirefoxOS
2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm

3. clicar en botn de instalar


6. Aplicacin
instalada

4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App 4. clicar para
volver a escritorio 268
Juan Quemada, DIT, UPM
Reloj SVG: packaged App

Componentes
n Instalador
w de la WebApp en el escritorio
n Manifiesto
w con informacin de instalacin del
paquete
n App empaquetada
w Zip con todos los ficheros de la App
n los mismos ficheros de la hosted App
n Salvo manifiesto: URLs relativos

w OJO: Los ficheros deben empaquetarse


sin ms, sin estar en ningn directorio

269
Juan Quemada, DIT, UPM
package.manifest
Fichero en formato JSON (JavaScript Object Notation)
n Con informacion sobre la webapp empaquetada
JSON representa datos como literales de objetos JavaScript
n Todos los datos estn serializados en el fichero como un string

version (igual al del manifest.webapp)

nombre (igual al del manifest.webapp)


URL a paquete en tienda

equipo/empresa desarrolladora
(igual al del manifest.webapp)

270
Juan Quemada, DIT, UPM
index.html

271
Juan Quemada, DIT, UPM
Instalar packed App en simulador FirefoxOS
2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/

3. clicar en botn de instalar

6. Aplicacin
instalada

4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App 4. clicar para
volver a escritorio 272
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

273
Juan Quemada, DIT, UPM
Ejercicio

Empaquetar como App FirefoxOS, tanto hosted, como packaged, el reloj


animado basado en SVG o en CANVAS (solo uno, el que se prefiera)
propuestos como ejercicios P2P opcionales en los temas SVG y CANVAS.
Publicar dichas apps en Google Drive para que se puedan instalar por
terceros.

274
Juan Quemada, DIT, UPM
Geolocalizacin en HTML5

275
Juan Quemada, DIT, UPM
Geolocalizacin y Sensores
HTML5 puede soportar geolocalizacin
n En todo tipo de clientes

w PCs, mviles tabletas, .....


!
El interfaz de geolocaclizacin
n da acceso tambien a otros sensores

w Brujula, acelerometro, .....

276
Juan Quemada, DIT, UPM
Geolocalizacin
La geolocalizacin se realiza siguiendo jerarquia de consultas
n GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .....
w Se devuelve la respuesta ms precisa
!
La geolocalizacin est accesible en del objeto navigator.geolocation
n con mtodo getCurrentPosition(successFunction, errorFunction)
w Permite conocer
n Latitud y longitud en formato decimal
n Altitud y precisin de la altitud
n Direccin y velocidad
!
Norma y tutoriales
n http://dev.w3.org/geo/api/spec-source.html
n http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
n http://code.google.com/apis/maps/index.html

277
Juan Quemada, DIT, UPM
Ejemplo
Geolocation
<!DOCTYPE html>
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
!
if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
!
navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
!
} else { alert('Geolocation is not supported in this browser.'); }
!
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
!
function errorFunction(position) { alert('Error!'); }
</script>
</head>
<body>
<p>If your browser supports Geolocation, you should get an alert with your coordinates.</p>
!
<p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a
href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How
to use the W3C Geolocation API"</a>.
</body> 278
</html> Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

279
Juan Quemada, DIT, UPM
Aplicacin HTML5 geolocalizada en
Google Maps

280
Juan Quemada, DIT, UPM
Geolocalizacin con gmaps.js

Aplicacion de geolocalizacin
n Carga un mapa centrado en nuestra posicin

w que se indica con un marcador


!
Usamos librera gmaps.js para acceso a Google Maps
n librera muy potente y sencilla de utilizar

w http://hpneo.github.io/gmaps/
n Se recomienda consultar documentacin y ejemplos
n La librera de Google es bastante mas compleja
!
Se aade al mapa un manejador de eventos click/tap
n que calcula la ruta hasta el punto indicado

281
Juan Quemada, DIT, UPM
Geo-mapa

282
Juan Quemada, DIT, UPM
Geo-mapa

283
Juan Quemada, DIT, UPM
Geo-mapa

284
Juan Quemada, DIT, UPM
Estilo CSS multi-terminal

285
Juan Quemada, DIT, UPM
Final del tema
Muchas gracias!

286
Juan Quemada, DIT, UPM
Ejercicio avanzado opcional
Modificar la aplicacin con geolocalizacin en Google Maps para que
n cuando se cierra la App, guardar la ruta en una variable de localStorage

w para que al volver a abrirla reproduzca la ruta anterior


n en vez de cargar un mapa limpio, como hace ahora
n Adems se debe incluir un boton de inicializar
w que cargue un mapa limpio centrado en nuestra posicin
n colocando un marcador en dicho punto
!
Recomendacin: guardar la ruta como un array de posiciones
n donde cada posicin es un array de [lat, lng]

w ejemplo: [[-1.040, 11.029], [0.040, 10.029], [5.040, 12.030]]


n guardar el array en localStorage serializado con JSON.stringify
w recuperarlo de localStorage deserializando con JSON.parse

287
Juan Quemada, DIT, UPM
Ejercicio opcional avanzado MOOC
Modificar la aplicacin con geolocalizacin en Google Maps para que
n cuando se cierra la App, guardar la ruta en una variable de localStorage

w para que al volver a abrirla reproduzca la ruta anterior


n en vez de cargar un mapa limpio, como hace ahora
n Adems se debe incluir un botn de inicio
w que cargue un mapa limpio centrado en nuestra posicin
n colocando un marcador en dicho punto
!
Recomendacin: guardar la ruta como un array de posiciones
n donde cada posicin es un array de [lat, lng]

w ejemplo: [[-1.040, 11.029], [0.040, 10.029], [5.040, 12.030]]


n guardar el array en localStorage serializado con JSON.stringify
w recuperarlo de localStorage deserializando con JSON.parse
!
Publicar la App como aplicaciones hosted y packaged
n en el directorio pblico de Google Drive

w y comprobar que se instala correctamente en el simulador de FirefoxOS

288
Juan Quemada, DIT, UPM
Ejercicio entregable
Modificar la aplicacin con geolocalizacin en Google Maps, aadiendo un botn de
compactar las rutas mostradas. Al pulsar el boton se deben eliminar los puntos
intermedios de la ruta.
!
La ruta se compactar volviendo a renderizar el mapa limpio y mostrando sobre l
solo los puntos inicial y final, juntro con la ruta directa que los une.

Mejorar a voluntad el estilo y la visualizacin.

Recomendacin: Crear una variable nueva que guarde en todo momento el punto
inicial de la ruta. la variable se inicializa en el momento de cargar la
aplicacin, contendr el origen de la ruta para cuando haya que compactar.

Al pulsar "compactar" se renderiza el mapa limpio, se pondrn los marcadores


inicial (variable nueva) y final (lat, long) y se mostrar la ruta entre ellos.

Alojar el script como un recurso pblico en un servidor en la nube (Google Drive)


para que pueda accederse por cualquier usuario desde cualquier navegador.

289
Juan Quemada, DIT, UPM