s13-JavaScript MOOC14 1 JQ Completo

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
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
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
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
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
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
+
+ -
^ 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
+
+ -
^ 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 *
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aqu se introduce la sentencia
11
Final del tema
Muchas gracias!
12
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
Ejercicio
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
Programa, sentencia,
variable y comentario
15
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
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
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
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
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
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
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
Final del tema
Muchas gracias!
23
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
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
Expresiones con variables
26
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
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
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
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

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
Ejercicio
Al ejecutar un programa cuya primera sentencia es var x = 2;
n Indicar el contenido de la variable x despus de ejecutar la

!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

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
Scripts y entrada/salida
33
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
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
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
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
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
Final del tema
Muchas gracias!
39
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
Booleano, igualdad y otros
operadores lgicos
41
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
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
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
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
Final del tema
Muchas gracias!
46
Ejercicio
!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
Ejercicio
!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
Sentencia if/else
49
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
Ejemplo con sentencia if/else
51
Ejemplo con

sentencia if
52
Ejemplo de prompt()
53
Ejemplo de else-if
54
Final del tema
Muchas gracias!
55
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
Strings e internacionalizacin (I18N)
57
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
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
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
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
Ejemplo I18N
62
Final del tema
Muchas gracias!
63
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
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
Nmeros
66
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
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
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
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
Final del tema
Muchas gracias!
71
Ejercicio
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
Ejercicio
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
Funciones
74
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
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) {

};
!
comer('Jos', 'paella'); => 'Jos come paella'
!
comer('Jos', 'paella', 'carne'); => 'Jos come paella'
comer('Jos'); => 'Jos come undefined'
76
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
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');
};
!
comer('Jos'); => 'Jos come algo'
comer(); => 'Alguien come algo'
78
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) {

};
!
comer('Jos','paella'); => 'Jos come paella'
79
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) {

};
!
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
http://vishub.org/categories/43
Seleccionar Hacer clic para

ejemplo actualizar pag.
Hacer clic
en el
Modulo 1
Editor
Interactivo
81
Final del tema
Muchas gracias!
82
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
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_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
84
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
Objetos, propiedades y mtodos
86
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
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
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
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
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aqu se introduce la sentencia
91
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
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
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
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
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
Ejercicio
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
Ejercicio
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
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
Objetos: caractersticas avanzadas
101
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
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
// 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
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
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
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
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
Final del tema
Muchas gracias!
109
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
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
DOM: Document Object Model
112
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
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
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
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
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
window.screen
118
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
Al ejecutar la instruccin en la
consola Web de Firefox,
cambiamos la fecha por hola
120
Final del tema
Muchas gracias!
121
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
Ejercicio
<!DOCTYPE html> !
<html> .... <body> !
!
!
<p id="id3">Casa</p>
!
</body> !
</html>
!
document.getElementById("id1").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", "ErrorEjecucin"
document.getElementById("id2").innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
id1.innerHTML => undefined, "", "Ttulo", "Coche", "Casa", ErrorEjecucin
123
Sentencia for/in de JavaScript
124
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
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
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
window.screen
128
Final del tema
Muchas gracias!
129
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
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
Eventos Javascript
132
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
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
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
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
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
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
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
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
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
Final del tema
Muchas gracias!
142
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
Botones y formularios en JavaScript
144
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
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
Pregunta
147
Final del tema
Muchas gracias!
148
Ejercicio
!
<!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>
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
Ejercicio
!
<!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>
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("id3").innerHTML => undefined, "", "null", "Ttulo", "Texto", 7, 7"
150
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
Libreras JavaScript jQuery y Zepto
152
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
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
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
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
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
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
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
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
Final del tema
Muchas gracias!
161
Ejercicio
Dada una pgina HTML que utiliza la librera Zepto con el siguiente contenido
!
<!DOCTYPE html>
!
<html> .... <body>
!
!
<div id="id4" class="Casa">Casa</div>
!
</body> !
!
</html>
$("#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
Ejercicio
Dada una pgina HTML que utiliza la librera Zepto con el siguiente contenido
!
<!DOCTYPE html>
!
<html> .... <body>
!
!
<div id="id4" class="Casa">Casa</div>
!
</body> !
!
</html>
$("#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
Eventos con jQuery y Zepto
164
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
Pregunta
Zepto
166
Final del tema
Muchas gracias!
167
Ejercicio
!<!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>
$("#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
Ejercicio
!<!DOCTYPE html><html>
!<script type="text/javascript" src="zepto.min.js" > </script>
! $(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>
$("#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
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
La Clase Array
171
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
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
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
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
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
Final del tema
Muchas gracias!
177
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].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
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
Bucles: sentencias while, for y do/
while
180
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
veces(..): bucle while
182
veces(..): bucle for
183
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
veces(..): bucle do
185
Final del tema
Muchas gracias!
186
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
Ejemplos con iframe, array y for
188
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
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
Ejemplo con
iFrames
191
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
Cdigo
193
Final del tema
Muchas gracias!
194
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
Ejemplo de un Cronmetro
196
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
Cronmetro
198
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
Final del tema
Muchas gracias!
200
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
Eventos tactiles en JavaScript
202
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
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
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
Evento tactil JavaScript
206
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
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
Final del tema
Muchas gracias!
209
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
Memoria local en HTML5
211
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
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
Ejemplo de localStorage
Cada usuario que acceda a esta pgina tendr una cuenta diferente
n La variable est en su navegador
214
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
Cronmetro:
localStorage
216
Final del tema
Muchas gracias!
217
Javascript: Notepad
218
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
NotePad
220
Aadir a NotePad utilizando jQuery
n El editor WYSIWYG Cleditor
Ejercicio w Codifcado en javascript/jQuery
almacenamiento n http://premiumsoftware.net/cleditor/
221
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
JSON: JavaScript Object Notation
223
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
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
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
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
Final del tema
Muchas gracias!
228
Ejercicio
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
Ejercicio
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
HTML5 SVG: Scalable Vector
Graphics
231
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
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
Ejemplo SVG
234
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
Reloj SVG
236
SVG: Reloj animado
con transform
237
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
SVG: Reloj animado
con coordenadas
239
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
SVG: Reloj con estilo CSS
241
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
Final del tema
Muchas gracias!
243
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
HTML5 CANVAS
245
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
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
Reloj CANVAS
248
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
CANVAS:
Reloj animado
250
WebGL: Web en 3D
http://www.chromeexperiments.com/webgl
251
Final del tema
Muchas gracias!
252
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
Aplicaciones FirefoxOS
254
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
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
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
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
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
Final del tema
Muchas gracias!
260
Reloj SVG como App FirefoxOS
261
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
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
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
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
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
install.html
267
Instalar hosted App en simulador FirefoxOS
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm

6. Aplicacin
instalada
4. clicar para
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
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
index.html
271
Instalar packed App en simulador FirefoxOS
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/
6. Aplicacin
instalada
4. clicar para
Final del tema
Muchas gracias!
273
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
Geolocalizacin en HTML5
275
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
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
Ejemplo
Geolocation
<!DOCTYPE html>
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
!
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
Aplicacin HTML5 geolocalizada en
Google Maps
280
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
Geo-mapa
282
Geo-mapa
283
Geo-mapa
284
Estilo CSS multi-terminal
285
Final del tema
Muchas gracias!
286
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
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
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

s13-JavaScript MOOC14 1 JQ Completo

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

s13-JavaScript MOOC14 1 JQ Completo

Încărcat de

Drepturi de autor:

Formate disponibile

Introduccin a JavaScript, a sus

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

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

w Literales de nmeros: 32, 1000, 3.8

w Componiendo valores con los operadores

w Expresiones con sintaxis erronea abortan la ejecucin del programa

13 + 7 => 20 // Suma de nmeros

n Signo de un nmero (operador unitario)

n Concatenacin de strings (operador binario)

13 + 7 => 20 // Suma de nmeros

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

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

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

/* Ejemplo de comentario multilnea que ocupa 2 lneas

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

w Modificando, por tanto, el estado del programa

w El nombre pueden contener adems nmeros

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

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

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

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

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

siguiente sentencia o si ocurrir ErrorDeEjecucin

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

siguiente sentencia o si ocurrir ErrorDeEjecucin

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

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

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

w Se ejecuta al cargar la pgina HTML en el navegador

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

w Se ejecuta al cargar la pgina HTML en el navegador

Cuando el usuario lo introduce

w y lo presenta con document.write(.)

pared en metros y guardar el valor en una variable

pared en metros y guardar el valor en otra variable

usuario los metros cuadrados de superficie de la pared utilizando

El tipo boolean solo tiene 2 valores

Igualdad estricta (identidad) // Identidad de tipos bsicos

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

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

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

Comienza por la palabra reservada if

Bloque: sentencias delimitadas por {..}

La parte else es opcional

la respuesta a travs de su cajetn de entrada

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

Pantalla: es grfica y puede representar cualquier carcter

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

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

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

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

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

'67' + 13 => 6713

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

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

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

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

function comer(persona, comida) {

function comer (persona, comida) {

w Se puede invocar a travs del nombre de la variable

var comer = function(persona, comida) {

n Puede incluir una lista de parmetros separados por coma

var comer = function(persona, comida) {

Seleccionar Hacer clic para