Introducción a JavaScript, a sus
tipos y valores
© Juan Quemada, DIT, UPM
1
JavaScript
JavaScript
n Diseñado 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 Versión 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)
!
Guía: 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, O´Reilly 2012, 3rd Ed.
©
Juan Quemada, DIT, UPM
2
Tipos, objetos y valores
Tipos de JavaScript
n number
w Literales de números:
n
32, 1000, 3.8
boolean
w Los literales son los valores
n
true y false
string
w Los literales de string son caracteres delimitados entre comillas o apóstrofes
"Hola, que tal", 'Hola, que tal',
w Internacionalización con Unicode: 'Γεια σου, ίσως', '嗨,你好吗'
n
n
undefined
w undefined: representa indefinido
!
Objetos: agregaciones estructuradas de valores
n Se agrupan en clases: Object, Array, Date, ...
w Objeto null: valor especial que representa objeto nulo
© Juan Quemada, DIT, UPM
n1
v1
n2
v2
3
nn
..
vn
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 númericas
w Expresiones con sintaxis erronea abortan la ejecución del programa
13 + 7
13 - 7
=>
=>
20
6
(8*2 - 4)/3
=>
4
8/*3
8 3
=>
=>
Error_de_ejecución // Ejecución se interrumpe
Error_de_ejecución // Ejecución se interrumpe
!
!
// Suma de números
// Resta de números
// Expresión con paréntesis
© Juan Quemada, DIT, UPM
4
Sobrecarga de operadores
Algunos operadores tienen varias semánticas diferentes
!
Por ejemplo, el operador + tiene 3 semánticas diferentes
n Suma de enteros (operador binario)
n Signo de un número (operador unitario)
n Concatenación de strings (operador binario)
!
13 + 7
+13
!
=>
20
// Suma de números
=>
13
// Signo de un número
"Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings
© Juan Quemada, DIT, UPM
5
Conversión de tipos en expresiones
JavaScript realiza conversión automatica de tipos
n cuando hay ambiguedad en una expresión
w utiliza las prioridades para resolver la ambiguedad
!
!
La expresión "13" + 7 es ambigua
n porque combina un string con un number
!
!
!
13 + 7
=> 20
"13" + "7"
=> "137"
"13" + 7
=> "137"
+"13" + 7
=> 20
w JavaScript asigna mas prioridad al operador + de strings, convirtiendo 7 a string
!
La expresión +"13" también necesita conversión automática de tipos
n El operador + solo esta definido para number
w JavaScript debe convertir el string "13" a number antes de aplicar operador +
© Juan Quemada, DIT, UPM
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
typeof new Date()
=> "object"
=> "object"
typeof new Function()
=> "function"
!
!
!
!
!
© Juan Quemada, DIT, UPM
7
Los operadores están ordenados con prioridad descendente. Mas altos más 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
. []
new
()
++ -! ~
+ delete
typeof void
* / %
+
+ << >> >>>
< <= > >=
instanceof in
== != === !==
&
^
|
&&
||
?:
=
OP=
,
Acceso a propiedad o invocar método; índice a array
Crear objeto con constructor de clase
Invocación de función/método o agrupar expresión
Pre o post auto-incremento; pre o post auto-decremento
Negación lógica (NOT); complemento de bits
Operador unitario, números. signo positivo;
signo negativo
Borrar propiedad de un objeto
Devolver tipo; valor indefinido
Números.
Multiplicación;
división; modulo (o resto)
Concatenación de string
Números. Suma; resta
Desplazamientos de bit
Menor; menor o igual; mayor; mayor o igual
¿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
Operación lógica y (AND)
+" "
Operación lógica o (OR)
“+” unitario tiene mas prioridad y
Asignación condicional
se evalúa antes que “+” binario
Asignación de valor
Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluación múltiple
8
Operadores JavaScript
3 + 7 => 10
© Juan Quemada, DIT, UPM
Los operadores están ordenados con prioridad descendente. Mas altos más 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
. []
new
()
++ -! ~
+ delete
typeof void
* / %
+
+ << >> >>>
< <= > >=
instanceof in
== != === !==
&
^
|
&&
||
?:
=
OP=
,
Acceso a propiedad o invocar método; índice a array
Crear objeto con constructor de clase
Invocación de función/método o agrupar expresión
Pre o post auto-incremento; pre o post auto-decremento
Negación lógica (NOT); complemento de bits
Operador unitario, números. signo positivo;
signo negativo
Borrar propiedad de un objeto
Devolver tipo; valor indefinido
Números.
Multiplicación;
división; modulo (o resto)
Concatenación de string
Números. Suma; resta
Desplazamientos de bit
Menor; menor o igual; mayor; mayor o igual
¿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
“*” tiene mas prioridad y se evalúa
Operación lógica y (AND)
antes que “-”. Es equivalente a:
Operación lógica o (OR)
Asignación condicional
Asignación de valor
Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluación múltiple
9
Operadores JavaScript
8*2 - 4 => 12
(8*2) - 4 => 12
© Juan Quemada, DIT, UPM
Los operadores están ordenados con prioridad descendente. Mas altos más 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
. []
new
()
++ -! ~
+ delete
typeof void
* / %
+
+ << >> >>>
< <= > >=
instanceof in
== != === !==
&
^
|
&&
||
?:
=
OP=
,
Acceso a propiedad o invocar método; índice a array
Crear objeto con constructor de clase
Invocación de función/método o agrupar expresión
Pre o post auto-incremento; pre o post auto-decremento
Negación lógica (NOT); complemento de bits
Operador unitario, números. signo positivo;
signo negativo
Borrar propiedad de un objeto
Devolver tipo; valor indefinido
Números.
Multiplicación;
división; modulo (o resto)
Concatenación de string
Números. Suma; resta
Desplazamientos de bit
Menor; menor o igual; mayor; mayor o igual
¿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
Operación lógica y (AND)
Operación lógica o (OR)
El paréntesis tiene más prioridad y
Asignación condicional
obliga a evaluar primero “-” y luego “*”
Asignación de valor
Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluación múltiple
10
Operadores JavaScript
8*(2 - 4) => -16
© Juan Quemada, DIT, UPM
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aquí se introduce la sentencia
©
Juan Quemada, DIT, UPM
11
Final del tema
Muchas gracias!
© Juan Quemada, DIT, UPM
12
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversión de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions
10+23
typeof (10+23)
"10"+23
"10" 23
typeof ("10"+23)
+"10"+23
"230" / "10"
"33" - / "10"
typeof (true)
23 + ""
typeof ("")
=> 23, 33*, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”*, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“*, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución*
=> 23, 33, “23“, “1023“, “number”, “string”*, “boolean”, ErrorDeEjecución
=> 23, 33*, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23*, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución*
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”*, ErrorDeEjecución
=> 23, 33, “23“*, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”*, “boolean”, ErrorDeEjecución
© Juan Quemada, DIT, UPM
13
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversión de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions
10+23
typeof (10+23)
"10"+23
"10" 23
typeof ("10"+23)
+"10"+23
"230" / "10"
"33" - / "10"
typeof (true)
23 + ""
typeof ("")
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
=> 23, 33, “23“, “1023“, “number”, “string”, “boolean”, ErrorDeEjecución
© Juan Quemada, DIT, UPM
14
Programa, sentencia,
variable y comentario
© Juan Quemada, DIT, UPM
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: definición de
variable x inicializada a 7
var x = 7;
// Comentario
© Juan Quemada, DIT, UPM
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
n
Monolinea: Delimitados por // y final de línea
Multilinea: Delimitados por /* y */
w OJO! Los comentarios multi-linea tienen problemas con las expresiones regulares
!
/* Ejemplo de comentario multilínea que ocupa 2 líneas
-> al tener ambiguedades, se recomienda utilizarlos con cuidado */
var x = 1;
// Comentario monolínea que acaba al final de esta línea
© Juan Quemada, DIT, UPM
17
Variables y estado del programa
Las variables se crean con la sentencia de definición de variables
n Comienza con la palabra reservada var
w Seguida de la variable, a la que se puede asignar un valor inicial
n
x
Se pueden crear varias variables en una sentencia
w separando las definiciones por comas
!
undefined
Estado del programa
n conjunto de valores contenido en todas sus variables
var x;
// crea la variable x y asigna undefined
var y = "Hola";
// crea y, asignandole el valor "Hola"
var z = 1, t = 2;
// crea x e y, asignandoles 1 y 2 respectivamente
!
!
© Juan Quemada, DIT, UPM
y
"Hola"
z
1
18
t
2
Sentencia de asignación de variables
Una variable es un contenedor de valores
n La sentencia de asignación introduce un nuevo valor en la variable
w Modificando, por tanto, el estado del programa
x
5
!
Las variables de JavaScript son no tipadas
n pueden contener valores de cualquier tipo de JavaScript
var x = 5;
!
x
// 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
© Juan Quemada, DIT, UPM
Mon Sep 02 2013 09:16:47
GMT+0200 (CEST)
19
STATEMENT
block
break
case
continue
debugger
default
do/while
empty
expression
for
for/in
function
if/else
label
return
switch
throw
try
strict
var
while
with
SINTAXIS
DESCRIPCIÓN DE LA SENTENCIA JAVASCRIPT
{ statements };
Agrupar un bloque de sentencias como 1 sentencia
break [label];
Salir del bucle o switch o sentencia etiquetada
case expression:
Etiquetar sentencia dentro de sentencia switch
continue [label];
Salto a sig. iteración de bucle actual/etiquetado
debugger:
Punto de parada (breakpoint) del depurador
default:
Etiquetar setencia default en sentencia switch
do statement
Alternativa al bucle while con condición al final
while(expression);
;
Sentencia vacía, no hace nada
expression;
Evaluar expresión (incluye asignación a variable)
for(init; test; incr)
Bucle sencillo. "init": inicialización;
statement
"test": condición; "incr": acciones final bucle
for (var in object)
Enumerar las propiedades del objeto "object"
statement
function name([param[,...]])
Declarar una función llamada "name"
{ body }
if (expr) statement1
Ejecutar statement1 o statement2
[else statement2]
label: statement
Etiquetar sentencia con nombre "label"
return [expression];
Devolver un valor desde una función
switch (expression)
Multiopción con etiquetas "case" o "default"
{ statements }
throw expression;
Lanzar una excepción
try {statements}
Gestionar excepciones
[catch { statements }]
[finally { statements }]
"use strict";
Activar restricciones strict a script o función
var name [ = expr] [ ,... ];
Declarar e initializar una o mas variables
while (expression) statement Bucle básico con condición al principio
with (object) statement
Extender cadena de ámbito (no recomendado)
20
© Juan Quemada, DIT, UPM
Delimitación de sentencias
“;” delimita el final de una sentencia
!
El final de sentencia también puede delimitarse con nueva linea
n Pero hay ambigüedades y no se recomienda hacerlo
!
Recomendación: cada sentencia en una linea terminada con “;”
-> es mas legible y seguro
// Ejemplos de delimitación de
// sentencias que
// no recomendables
!
x
undefined
var x; x = "Hola"
!
var y = "Pepe"
y
x
"Hola"
"Pepe"
© Juan Quemada, DIT, UPM
21
Nombres de variables
El nombre (o identificador) de una variable debe comenzar por:
n letra, _ o $
w El nombre pueden contener además números
!
n
n
Nombres bien construidos: x, ya_vás, $A1, $, _43dias
Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
w Nombre incorrecto: da error_de_ejecución e interrumpe el programa
!
Un nombre de variable
n no debe ser una palabra reservada de JavaScript
!
Las variables son sensibles a mayúsculas
n mi_var y Mi_var son variables distintas
© Juan Quemada, DIT, UPM
22
Final del tema
Muchas gracias!
© Juan Quemada, DIT, UPM
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 (ErrorDeEjecución) por sintaxis incorrecta
!
var y;
var y = 1;
var @y = 1;
var %f = 1;
var $f = 1;
var #1 = 1;
var _1 = 1;
var 1_1 = 1;
var niño = 2;
x = 3;
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
..... (las mismas respuestas) .... (1)
..... (las mismas respuestas) .... (1)
..... (las mismas respuestas) .... (3)
..... (las mismas respuestas) .... (3)
..... (las mismas respuestas) .... (1)
..... (las mismas respuestas) .... (3)
..... (las mismas respuestas) .... (1)
..... (las mismas respuestas) .... (3)
..... (las mismas respuestas) .... (1)
..... (las mismas respuestas) .... (2)
© Juan Quemada, DIT, UPM
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 (ErrorDeEjecución) por sintaxis incorrecta
!
var y;
var y = 1;
var @y = 1;
var %f = 1;
var $f = 1;
var #1 = 1;
var _1 = 1;
var 1_1 = 1;
var niño = 2;
x = 3;
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ….
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
© Juan Quemada, DIT, UPM
25
Expresiones con variables
© Juan Quemada, DIT, UPM
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 expresión que se asigna a ella misma
n La parte derecha usa el valor anterior a la ejecución 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 expresión
n provoca un error y la ejecución del programa se interrumpe
x
3
var x = 3;
!
var y = 5 + x;
!
y
6
y = y - 2;
!
x = y + z; // variable z no ha sido definida
© Juan Quemada, DIT, UPM
Error
27
y
8
Asignación con operación
Es muy común modificar el valor de una variable
n sumando, restando, .... algún valor
w Por ejemplo,
!
x = x +7;
y = y - 3;
z = z * 8;
.......
JavaScript tiene operadores especiales para estas operaciones
n +=, -=, *=, /=, %=, ......( aplica a operadores lógicos, desplazamiento, ..)
w x += 7;
será lo mismo que x = x + 7;
var x = 3; // define x inicializada a 3
!
x += 2;
// suma 2 a x
x *= 3;
// multiplica x por 3
x %= 4;
// % operación módulo:
// divide x por 4 y devuelve el resto
!
!
© Juan Quemada, DIT, UPM
x
x 3
x 5
x 15
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 expresión
n modificando el valor antes o después de evaluar la expresión
w Al producir efectos laterales y programas crípticos, no se recomienda un uso limitado
var x = 3;
!
var y = ++x + 2;
!
var z = y-- + 2;
z
8
y
y 6
5
© Juan Quemada, DIT, UPM
x
3
x
4
29
Final del tema
Muchas gracias!
© Juan Quemada, DIT, UPM
30
Ejercicio
Al ejecutar un programa cuya primera sentencia es var x = 2;
n Indicar el contenido de la variable x después de ejecutar la
siguiente sentencia o si ocurrirá ErrorDeEjecución
!x *= 2;
!x += "0";
!xx =/=++z;
2;
!x -= 2;
!x = x + t;
n
=> 0, 1, 2, 3, 4*, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”*, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución*
=> 0, 1*, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0*, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución*
Indicar el contenido de la variable y después de ejecutar la
siguiente sentencia o si ocurrirá ErrorDeEjecución
var y = ++x + 1;
var y = ++t + 1;
var y = 1 + x++;
var y = k + 1;
var y = 1 + x--;
var y = 1 + --x;
=> 0, 1, 2, 3, 4*, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución*
=> 0, 1, 2, 3*, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución*
=> 0, 1, 2, 3*, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2*, 3, 4, 20, “20”, ErrorDeEjecución
© Juan Quemada, DIT, UPM
31
Ejercicio
Al ejecutar un programa cuya primera sentencia es var x = 2;
n Indicar el contenido de la variable x después de ejecutar la
siguiente sentencia o si ocurrirá ErrorDeEjecución
!x *= 2;
!x += "0";
!xx =/=++z;
2;
!x -= 2;
!x = x + t;
n
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
Indicar el contenido de la variable y después de ejecutar la
siguiente sentencia o si ocurrirá ErrorDeEjecución
var y = ++x + 1;
var y = ++t + 1;
var y = 1 + x++;
var y = k + 1;
var y = 1 + x--;
var y = 1 + --x;
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
=> 0, 1, 2, 3, 4, 20, “20”, ErrorDeEjecución
© Juan Quemada, DIT, UPM
32
Scripts y entrada/salida
© Juan Quemada, DIT, UPM
33
Entrada/Salida y ejecución de expresiones
La sentencia de ejecución 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 expresión sin efecto lateral, solo genera un valor
n Si ese valor no se guarda en una variable
w La instrucción no tiene ningún efecto en el programa, solo consume recursos
alert("Texto");
// expresiones útiles, envían mensaje al exterior
document.write(“Texto");
!
var x = 3;
// definición e inicialización de variable
x*5 - 2;
// es una expresión correcta, pero inútil al no guardar el resultado
!
!
x = x*5 + 2;
// asignación, es una expresión útil porque guarda el resultado
© Juan Quemada, DIT, UPM
34
Ejemplo I: Script con fecha
Script: programa JavaScript insertado en una página HTML
n Delimitado con las marcas <script> con atributo “type=text/javascript”
w Se ejecuta al cargar la página HTML en el navegador
document.write("Texto") inserta "Texto" en la página Web
n En lugar del bloque script, al cargar la página y ejecutar el script
w document.writeln(“Texto") inserta además de Texto, nueva línea al final
© Juan Quemada, DIT, UPM
35
Ejemplo II: Script con expresión
Script: programa JavaScript insertado en una página HTML
n Delimitado con la marca <script> con atributo “type=text/javascript”
w Se ejecuta al cargar la página HTML en el navegador
alert("Texto") muestra "Texto" en un desplegable
n se utiliza para alertar al usuario sobre algún evento o resultado
© Juan Quemada, DIT, UPM
36
Funciones alert(), confirm() y prompt()
Interacción 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 confirmación/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”
©
Juan Quemada, DIT, UPM
37
Ejemplo III: Script conversor
El script pide el número de Euros a convertir a Dólares
n con el desplegable de la función prompt()
Cuando el usuario lo introduce
n calcula el equivalente en dólares ( * 1,34)
w y lo presenta con document.write(….)
Recargando la página
n se vuelve a ejecutar el programa
© Juan Quemada, DIT, UPM
38
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
39
Ejercicio
Construir un script insertado en una página 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 continuación debe pedir al usuario (con prompt()) la anchura de la
pared en metros y guardar el valor en otra variable
n Después debe multiplicar la altura por la anchura y presentar al
usuario los metros cuadrados de superficie de la pared utilizando
document.write(…..)
© Juan Quemada, DIT, UPM
40
Booleano, igualdad y otros
operadores lógicos
©
Juan Quemada, DIT, UPM
41
Tipo boolean
El tipo boolean solo tiene 2 valores
n true:
verdadero
n false: falso
!
Operador negación (negation): !
n Convierte al valor lógico opuesto
!
Conversión a boolean
n false: 0, -0, NaN, null, undefined, "", ''
n true: resto de valores
© Juan Quemada, DIT, UPM
!false
!true
!
!
=> true
=> false
!4
!"4"
!null
!0
=> false
=> false
=> true
=> true
!!""
!!4
=> false
=> true
!
42
Identidad e igualdad
Igualdad estricta (identidad)
n igualdad de tipo y valor:
===
w funciona bien solo con tipos básicos!
n Objetos: identidad de referencias
n negación de igualdad estricta:
!==
// Identidad de tipos básicos
!
!
Igualdad y desigualdad débil:
== y !=
n Realiza conversiones impredecibles
w ¡NO UTILIZAR!
!
!
0 === 0
0 === 0.0
0 === 0.00
=> true
=> true
=> true
0 === 1
=> false
0 === false
=> false
!
!
'' === ""
'' === " "
=> true
=> false
Mas info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness
© Juan Quemada, DIT, UPM
43
Operadores: &&, || y ?:
Operador lógico Y (AND): a && b
n si a evalúa a false
w devuelve a, sino devuelve b
0 && true
1 && "5"
=> 0
=> "5"
undefined || 0
13 || 0
=> 0
=> 13
(7) ? 0 : 1
("")? 0 : 1
=> 0
=> 1
!
!
!
Operador lógico O (OR):
a || b
n si a evalúa a true
w devuelve a, sino devuelve b
!
Operador condicional: (c) ? a : b;
n si c evalúa a true
w devuelve a, sino devuelve b
© Juan Quemada, DIT, UPM
!
!
// Asignar valor por defecto
// si x es undefined o null
!
x = x || 0;
44
Operadores de comparación
JavaScript tiene 4 operadores de comparación
n Menor:
<
n Menor o igual: <=
n Mayor:
>
n Mayor o igual: >=
!
Números, booleanos, strings y objetos
n tienen definida una relación de orden
w Aunque se utilizan principalmente con números
© Juan Quemada, DIT, UPM
1.2 < 1.3
=> true
1< 1
1 <= 1
1> 1
1 >= 1
=> false
=> true
=> false
=> true
!
!
false < true
=> true
"a" < "b"
=> true
"a" < "a"
"a" < "aa"
=> false
=> true
!
!
45
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
46
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversión de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions
!10
=>
!!null
=>
!(0 === "")
=>
!(0 !== "")
=>
true ? 10 : null
=>
0 ? 10 : null
=>
(0 || undefined) && true
=>
(1 && !undefined) || true
=>
(!0 || !undefined) && !true =>
(!0 && undefined) || !1
=>
5 <= 6
=>
5 >= 5
=>
"c" < "cc"
=>
"b" > "bb"
=>
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
se evalúa a 0, 10, null, undefined, false o true
© Juan Quemada, DIT, UPM
47
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Tabla de conversión de tipos
w https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-3/type-conversions
!10
=>
!!null
=>
!(0 === "")
=>
!(0 !== "")
=>
true ? 10 : null
=>
0 ? 10 : null
=>
(0 || undefined) && true
=>
(1 && !undefined) || true
=>
(!0 || !undefined) && !true =>
(!0 && undefined) || !1
=>
5 <= 6
=>
5 >= 5
=>
"c" < "cc"
=>
"b" > "bb"
=>
se evalúa a 0, 10, null, undefined, false* o true
se evalúa a 0, 10, null, undefined, false* o true
se evalúa a 0, 10, null, undefined, false o true*
se evalúa a 0, 10, null, undefined, false* o true
se evalúa a 0, 10*, null, undefined, false o true
se evalúa a 0, 10, null*, undefined, false o true
se evalúa a 0, 10, null, undefined*, false o true
se evalúa a 0, 10, null, undefined, false o true*
se evalúa a 0, 10, null, undefined, false* o true
se evalúa a 0, 10, null, undefined, false* o true
se evalúa a 0, 10, null, undefined, false o true*
se evalúa a 0, 10, null, undefined, false o true*
se evalúa a 0, 10, null, undefined, false o true*
se evalúa a 0, 10, null, undefined, false* o true
© Juan Quemada, DIT, UPM
48
Sentencia if/else
© Juan Quemada, DIT, UPM
49
Sentencia if/else
if/else permite ejecución condicional de
n bloques de instrucciones
Comienza por la palabra reservada if
n La condición va después entre paréntesis
Bloque: sentencias delimitadas por {..}
n Bloque de 1 sentencia puede omitir {}
La parte else es opcional
© Juan Quemada, DIT, UPM
50
Ejemplo con© sentencia if/else
Juan Quemada, DIT, UPM
51
Ejemplo con
sentencia if
©
Juan Quemada, DIT, UPM
52
Ejemplo de prompt()
© Juan Quemada, DIT, UPM
53
Ejemplo de else-if
© Juan Quemada, DIT, UPM
54
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
55
Ejercicio
Construir un script insertado en una página HTML que realice la
pregunta: “¿Capital de España?
n Se debe utilizar la función prompt() para enviar la pregunta, pidiendo
la respuesta a través de su cajetín de entrada
!
Usar if/else para comprobar si la respuesta es “Madrid” o no
!
Si la respuesta es correcta se deberá insertar en la página HTML
n el string:
Correcto, Madrid es la capital de España
!
Si contesta cualquier otra cosa se insertará el string
n Su respuesta “..respuesta introducida..” no es correcta
!
Además del string, la página debe tener un encabezado de nivel 1 (<h1>)
© Juan Quemada, DIT, UPM
56
Strings e internacionalización (I18N)
©
Juan Quemada, DIT, UPM
57
El tipo string
Texto internacionalizado codificado con el código UNICODE
n
Puede representar muchas lenguas diferentes
!
Literales de string: textos delimitados por comillas o apóstrofes
n
"hola, que tal", 'hola, que tal', 'Γεια σου, ίσως' o '嗨,你好吗'
w string "hola, que tal" en varios idiomas
n
n
String vacío:
"" o ''
"texto 'entrecomillado' "
w comillas y apóstrofes se pueden anidar: 'entrecomillado' forma parte del texto
!
Operador de concatenación de strings: +
n
"Hola" + " " + "Pepe"
=>
"Hola Pepe"
© Juan Quemada, DIT, UPM
58
Internacionalización (I18N)
Teclado chino
UNICODE es un consorcio internacional: http://www.unicode.org/
n
Define normas de internacionalización (I18N), como el código 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 país
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 gráfica y puede representar cualquier carácter
© Juan Quemada, DIT, UPM
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 más habituales
!
Ademas podemos representar cualquier carácter UNICODE o ISO-LATIN-1:
n \uXXXX carácter UNICODE de código hexadecimal
XXXX
n \xXX
carácter ISO-LATIN-1 de código hexadecimal XX
!
Algunos ejemplos
n "Comillas dentro de \"comillas\""
w " debe ir escapado dentro del string
n
"Dos \n lineas"
w retorno de línea delimita sentencias
n
"Dos \u000A lineas"
© Juan Quemada, DIT, UPM
CARACTERES ESCAPADOS
!
NUL (nulo):
Backspace:
Horizontal tab:
Newline:
Vertical tab:
Form feed:
Carriage return:
Comillas (dobles):
Apóstrofe :
Backslash:
\0,
\b,
\t,
\n,
\t,
\f,
\r,
\",
\',
\\,
\x00, \u0000
\x08, \u0008
\x09, \u0009
\x0A, \u000A
\x0B, \u000B
\x0C, \u000C
\x0D, \u000D
\x22, \u0022
\x27, \u0027
\x5C, \u005C
60
ciudad
Clase String
[0] [1] ........ [5]
La clase String
n
!
incluye métodos 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 número_de_caracteres-1 referencia cada carácter
Propiedad con tamaño: 'ciudad'.length
=> 6
!
Acceso como array:
'ciudad'[2]
=> ‘u’
!
n
Método:
'ciudad'.charCodeAt(2) => 117
! devuelve código UNICODE de tercer carácter
n
Método:
'ciudad'.indexOf('da')
=> 3
! devuelve posición de substring
n
Método:
n
'ciudad'.substring(2,5) => 'uda'
devuelve substring entre ambos índices
© Juan Quemada, DIT, UPM
61
Ejemplo I18N
© Juan Quemada, DIT, UPM
62
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
63
Ejercicio
Cuantas líneas tienen los strings del siguiente ejemplo: 1, 2, 3, 4 o 5
!
!
!
!
!
!
'¿Cuantas líneas \n tiene \u000A este \x27string\x27?'
'¿Cuantas líneas \x0A tiene este "string"?'
'¿Cuantas\n líneas\n tiene\u000A este\n \x27string\x27?'
'¿Cuantas líneas tiene este \x27string\x27?'
'\u55e8\uff0c\n\u4f60\u597d\u5417'
'Γεια σου, \nίσως'
'嗨,\n你好吗'
(3)
(2)
(5)
(1)
(2)
(2)
(2)
A que valor se evalúan las siguientes expresiones
'hola cocacola'.indexof('la')
'hola cocacola'.length - 2
'hola cocacola'.substring(5,7) + 'ca'
'hola cocacola'.substring(5,8) + ""
'hola cocacola'.substring(5,8) + 'a'
'hola cocacola'.substring(7,8)
=>
=>
=>
=>
=>
=>
1, 2*, 3, 4, 9, 10, 11, 12 o 13
1, 2, 3, 4, 9, 10, 11*, 12 o 13
'la', ' c', 'co', 'coc', 'coca'* o 'ca'
'la', ' c', 'co', 'coc'*, 'coca' o 'ca'
'la', ' c', 'co', 'coc', 'coca'* o 'ca'
'la', ' c'*, 'co', 'coc', 'coca' o 'ca'
© Juan Quemada, DIT, UPM
64
Ejercicio
Cuantas líneas tienen los strings del siguiente ejemplo: 1, 2, 3, 4 o 5
!
!
!
!
!
!
'¿Cuantas líneas \n tiene \u000A este \x27string\x27?'
'¿Cuantas líneas \x0A tiene este "string"?'
'¿Cuantas\n líneas\n tiene\u000A este\n \x27string\x27?'
'¿Cuantas líneas tiene este \x27string\x27?'
'\u55e8\uff0c\n\u4f60\u597d\u5417'
'Γεια σου, \nίσως'
'嗨,\n你好吗'
A que valor se evalúan las siguientes expresiones
'hola cocacola'.indexof('la')
'hola cocacola'.length - 2
'hola cocacola'.substring(5,7) + 'ca'
'hola cocacola'.substring(5,8) + ""
'hola cocacola'.substring(5,8) + 'a'
'hola cocacola'.substring(7,8)
=>
=>
=>
=>
=>
=>
1, 2, 3, 4, 9, 10, 11, 12 o 13
1, 2, 3, 4, 9, 10, 11, 12 o 13
'la', ' c', 'co', 'coc', 'coca' o 'ca'
'la', ' c', 'co', 'coc', 'coca' o 'ca'
'la', ' c', 'co', 'coc', 'coca' o 'ca'
'la', ' c', 'co', 'coc', 'coca' o 'ca'
© Juan Quemada, DIT, UPM
65
Números
©
Juan Quemada, DIT, UPM
66
Números: tipo number
Los números se representan con literales de
n
Enteros:
32
w Entero máximo: 9007199254740992
n
n
Decimales:
Coma flotante:
32.23
3.2e1 (3,2x10)
w Rango real: 1,797x10^308 --- 5x10^-324
!
Todos los números son del tipo number
!
Todos los números se representan igual
internamente
n
coma flotante de doble precisión (64bits)
!
El tipo number incluye 2 valores especiales
n
Infinity: representa desbordamiento
n
NaN: representa resultado no númerico
10 + 4
10 - 4
10 * 4
10 / 4
10 % 4
!
=> 14
=> 6
=> 40
=> 2.5
=> 2
// sumar
// restar
// multiplicar
// dividir
// operación resto
//decimales dan error de redondeo
0.1 + 0.2 => 0,3000000000004
!
3e2
3e-2
=> 300
=> 0,03
+10/0
-10/0
=> Infinity
=> -Infinity
//desborda
//desborda
5e500
=> Infinity
//desborda
!
!
© Juan Quemada, DIT, UPM
67
Conversión a enteros
Cuando JavaScript calcula expresiones
n convirtiendo tipos según necesita
w utiliza las prioridades de operadores
!
Conversión a entero (o real)
n booleano: true a 1, false a 0
n String: Convierte número a valor o NaN
n null: a 0,
undefined: a NaN
!
!
'67' + 13
=> 6713
+'67'
+ 13 => 80
+'6.7e1' + 13 => 80
!
!
'xx' + 13
+'xx' + 13
=> 'xx13'
=> NaN
13 + true
13 + false
=> 14
=> 13
!
!
Convertir un string a un número
n se denomina también “parsear" o analizar sintácticamente
w es similar al análisis sintáctico realizado a los literales de números
© Juan Quemada, DIT, UPM
68
Modulo Math
El Modulo Math contiene
n constantes y funciones matemáticas
!
Constantes
n Números: E, PI, SQRT2, ...
n ...
Funciones
n sin(x), cos(x), tan(x), asin(x), ....
n log(x), exp(x), pow(x, y), sqrt(x), ....
n abs(x), ceil(x), floor(x), round(x), ....
n min(x,y,z,..), max (x,y,z,..), ...
n random()
!
Math.PI => 3.141592653589793
Math.E => 2.718281828459045
!
// numero aleatorio entre 0 y 1
Math.random() => 0.7890234
!
Math.pow(3,2)
Math.sqrt(9)
!
=> 9 // 3 al cuadrado
=> 3 // raíz cuadrada de 3
Math.min(2,1,9,3) => 1 // número mínimo
Math.max(2,1,9,3) => 9 // número máximo
!
Math.floor(3.2)
Math.ceil(3.2)
Math.round(3.2)
!
=> 3
=> 4
=> 3
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
© Juan Quemada, DIT, UPM
69
Clase Number
var x = 1.1;
La clase Number encapsula números
n como objetos equivalentes
!
Number define algunos métodos útiles
n toFixed(n) devuelve string
w redondeando a n decimales
n toExponential(n) devuelve string
w redondeando mantisa a n decima.
n toPrecision(n) devuelve string
w redondeando a n dígitos
!
!
!
JS convierte una expresión a objeto al
n aplicar el método a una expresión
w Ojo! literales dan error sintáctico
x.toFixed(0)
x.toFixed(2)
=> "1"
=> “1.10"
(1).toFixed(2)
=> “1.00"
1.toFixed(2)
=> Error sintáctico
!
!
Math.PI.toFixed(4) => "3.1416"
!
(0.1).toExponential(2) => "1.00e-1"
x.toExponential(2)
=> "1.10e+0"
!
(0.1).toPrecision(2)
x.toPrecision(2)
=> "0.10"
=> "1.1"
Mas info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
© Juan Quemada, DIT, UPM
70
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
71
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
0/0
1/0
Math.pow(3,2)
Math.pow(3,8000)
Math.min(0,1,6,3)
Math.max(0,1,6,3)
Math.floor(2.7)
Math.ceil(2.7)
Math.round(2.7)
Math.sqrt(4)
Math.sqrt(-4)
(3).toFixed(0)
(0).toFixed(0)
(3).toPrecision(1)
(0).toPrecision(1)
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN*, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity*, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9*, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity*, -Infinity
=> 0*, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6*, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2*, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3*, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3*, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2*, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN*, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”*, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”*, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”*, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”*, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
© Juan Quemada, DIT, UPM
72
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
0/0
1/0
Math.pow(3,2)
Math.pow(3,8000)
Math.min(0,1,6,3)
Math.max(0,1,6,3)
Math.floor(2.7)
Math.ceil(2.7)
Math.round(2.7)
Math.sqrt(4)
Math.sqrt(-4)
(3).toFixed(0)
(0).toFixed(0)
(3).toPrecision(1)
(0).toPrecision(1)
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
=> 0, “0”, 2, “2”, 3, “3”, 6, “6”, 9, "9", NaN, Infinity, -Infinity
© Juan Quemada, DIT, UPM
73
Funciones
©
Juan Quemada, DIT, UPM
74
Definición de la función
Función
Invocación
o ejecución
de la función
Nombre
Parámetros
Bloque de código
delimitado por {....}
!
function comer(persona, comida) {
return (persona + " come " + comida);
};
!
comer('José', 'paella');
=> 'José come paella'
Función:
n bloque de código con parámetros, invocable (ejecutable) a través del nombre
w La ejecución finaliza con la sentencia “return expr” o al final del bloque
n Al acabar la ejecución, devuelve un resultado: valor de retorno
!
Valor de retorno
n resultado de evalúar expr, si se ejecuta la sentencia “return expr”
n undefined, si se alcanza final del bloque sin haber ejecutado ningún return
© Juan Quemada, DIT, UPM
75
Parámetros de una función
Los parámetros de la función son variables utilizables en el cuerpo de la función
•
Al invocarlas se asignan los valores de la invocación
!
La función se puede invocar con un número variable de parámetros
•
Un parámetro inexistente está undefined
function comer(persona, comida) {
return (persona + " come " + comida);
};
!
comer('José', 'paella');
!
=> 'José come paella'
comer('José', 'paella', 'carne'); => 'José come paella'
comer('José');
=> 'José come undefined'
© Juan Quemada, DIT, UPM
76
El array de argumentos
Los parámetros de la función están accesibles también a través del
n array de argumentos:
arguments[....]
w Cada parámetro 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'
© Juan Quemada, DIT, UPM
77
Parámetros por defecto
Funciones invocadas con un número variable de parámetros
n Suelen definir parámetros por defecto con el operador ||
w "x || <parámetro_por_defecto>"
!
Si x es “undefined”, será false y devolverá parámetro por defecto
Los parámetros son variables y se les puede asignar un valor
function comer (persona, comida) {
persona = (persona || 'Alguién');
comida = (comida || 'algo');
return (persona + " come " + comida);
};
!
comer('José');
comer();
=> 'José come algo'
=> 'Alguien come algo'
© Juan Quemada, DIT, UPM
78
Funciones como objetos
Las funciones son objetos de pleno derecho
n pueden asignarse a variables, propiedades, parámetros, ....
!
“function literal”: es una función que se define sin nombre
n Se suele asignar a una variable, que le da su nombre
w Se puede invocar a través del nombre de la variable
var comer = function(persona, comida) {
return (persona + " come " + comida);
};
!
comer('José','paella');
=> 'José come paella'
© Juan Quemada, DIT, UPM
79
Operador de invocación de una función
El objeto función puede asignarse o utilizarse como un valor
n el objeto función contiene el código de la función
!
el operador (...) invoca una función ejecutando su código
n Solo es aplicable a funciones (objetos de la clase Function)
n Puede incluir una lista de parámetros separados por coma
var comer = function(persona, comida) {
return (persona + " come " + comida);
};
!
var x = comer;
// asigna a x el código de la función
x('José','paella'); => 'José come paella'
x()
=> 'undefined come undefined’
!
var y = comer();
// asigna a y el resultado de invocar la función
y
=> 'undefined come undefined'
© Juan Quemada, DIT, UPM
80
http://vishub.org/categories/43
Seleccionar
ejemplo
Hacer clic para
actualizar pag.
Hacer clic
en el
Modulo 1
Editor
Interactivo
©
Juan Quemada, DIT, UPM
81
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
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
var
! f_4 = f_2;
Como se evaluarán las siguientes expresiones
f_1 (7)
f_1 (undefined)
f_1 (7, 8)
f_1 ()
f_2 (7, 8)
f_2 (7, "7")
f_2 (7, "8")
f_3 (7)
f_3 (undefined)
f_4 (6, 7)
f_4 (7, "8")
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
7*, "7", 8, "8", 14, ”76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined*, false, "false", true, "true"
7*, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined*, false, "false", true, "true"
7, "7", 8*, "8", 14, "76", undefined, false, "false", true, “true"
7*, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8*, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8, "8", 14, "76", undefined, false*, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true*, “true"
7*, "7", 8, "8", 14, "76", undefined, false, "false", true, “true”
7, "7", 8*, "8", 14, "76", undefined, false, "false", true, “true"
© Juan Quemada, DIT, UPM
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
var
! f_4 = f_2;
Como se evaluarán las siguientes expresiones
f_1 (7)
f_1 (undefined)
f_1 (7, 8)
f_1 ()
f_2 (7, 8)
f_2 (7, "7")
f_2 (7, "8")
f_3 (7)
f_3 (undefined)
f_4 (6, 7)
f_4 (7, "8")
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
7, "7", 8, "8", 14, ”76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, "true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true”
7, "7", 8, "8", 14, "76", undefined, false, "false", true, “true"
© Juan Quemada, DIT, UPM
84
Ejercicio
Construir un script insertado en una página HTML con un juego para
acertar un número aleatorio. El script generará aleatoriamente 1, 2 o 3 y
pedirá al usuario que lo acierte, ofreciéndole que introduzca el número a
través de una ventana generada con prompt().
El script se deberá estructurar de la siguiente forma:
n Se definirá una función “num()” que devuelva aleatoriamente 1, 2 o 3.
Se recomienda utilizar “Math.random()” para generar el número
aleatorio, multiplicar por 3 y redondear a 1, 2 o 3 con “Math.ceil()”.
n El número generado con “num()” se guardará en una variable.
n Se pedirá al usuario (con “prompt()”) que acierte el número y su
respuesta se comparará con el número aleatorio guardado.
n Si acierta el número mostrará en la página Web “Correcto”, sino
responderá “Lo siento, el número 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 página)
Preguntas y respuestas incluirán además, entre paréntesis, la traducción
del texto a ideogramas chinos (utilizar Google translator para traducir).
© Juan Quemada, DIT, UPM
85
Objetos, propiedades y métodos
© Juan Quemada, DIT, UPM
86
Objetos
n2
n1
v2
v1
nn
vn
..
n1
v1
n2
v2
nn
..
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
n
titulo:'Avatar'
director:'James Cameron'
titulo
'Avatar'
© Juan Quemada, DIT, UPM
87
director
'James
Cameron'
pelicula
Propiedades
titulo
El acceso a propiedades utiliza el operador punto
n obj.propiedad
'Avatar'
director
'James
Cameron'
!
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_ejecución y aborta la ejecución del programa
!
La notación punto solo acepta nombres de propiedades
n Con la sintaxis de variables: a, _method, $1, ...
w No son utilizables: “#43", "?a=1", ......
88
© Juan Quemada, DIT, UPM
pelicula
titulo
Notación array
'Avatar'
director
'James
Cameron'
La notación array es equivalente a la notación punto
n pelicula["titulo"] es equivalente a pelicula.titulo
w Al acceder a: var pelicula = {titulo: 'Avatar', director: 'James Cameron'}
!
La notación 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 notación punto
!
Nombres (strings) arbitrarios son posibles también en un literal de objeto:
n Por ejemplo, {"titulo": 'Avatar', "El director": 'James Cameron'}
89
© Juan Quemada, DIT, UPM
Nombres de propiedades como variables
La notación array permite acceder también a propiedades
n cuyo nombre esta en una variable en forma de string
w Esto no es posible con la notación punto
var x = {titulo: 'Avatar', director: 'James Cameron'}
!
x.titulo;
x['titulo'] ;
!
=> 'Avatar'
=> 'Avatar'
var p = 'titulo'; // inicializada con string 'titulo'
!
x[p] ;
=> 'Avatar'
x.p;
=> undefined
!
x tiene una propiedad de
nombre 'titulo', que es el
string que contiene p
El objeto x no tiene ninguna propiedad
de nombre p y devuelve undefined
90
© Juan Quemada, DIT, UPM
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
!
Aquí se introduce la sentencia
©
Juan Quemada, DIT, UPM
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 métodos y propiedades de su clase
!
Un método es una operación (~función) invocable sobre un objeto
n
Se invoca con la notación 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 vacío equivalente a {}
© Juan Quemada, DIT, UPM
92
Métodos de la clase
Un objeto hereda métodos de su clase, por ejemplo
n los objetos de la clase Date heredan métodos 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 métodos heredados o definidos en un objeto
n Invocar un método no heredado ni definido en un objeto
w provoca un error_de_ejecución
var fecha = new Date();
!
fecha.toString()
fecha.getHours()
fecha.getMinutes()
fecha.getSeconds()
=>
=>
=>
=>
Fri Aug 08 2014 12:34:36 GMT+0200 (CEST)
12
34
36
© Juan Quemada, DIT, UPM
93
Definición de un nuevo método de un objeto
Los métodos se pueden definir también directamente en un objeto
n
!
El nuevo método solo se define para ese objeto (no es de la clase)
Invocar un método cambia el entorno de ejecución 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"
© Juan Quemada, DIT, UPM
94
Algunas Clases predefinidas
Object
n
Clase raíz, suele usarse el literal:
{a:3, b:"que tal"}
Array
n
Colección indexable, suele usarse el literal:
[1, 2, 3]
Date
n
Hora y fecha extraida del reloj del sistema:
new Date()
Function
n
Encapsula código, suele usarse literal o def.:
function (x) {....}
RegExp
n
Expresiones regulares, suele usarse el literal: /(hola)+$/
Math
n
Modulo con constantes y funciones matemáticas
Number, String y Boolean
n
Clases que encapsulan valores de los tipos number, string y boolean como objetos
n
Sus métodos se aplican a los tipos directamente, la conversión a objetos es automatica
© Juan Quemada, DIT, UPM
95
Final del tema
Muchas gracias!
© Juan Quemada, DIT, UPM
96
Métodos de la clase
Un método es una operación (~función) invocable sobre un objeto
n Se invoca con la notación punto:
objeto.metodo(..params..)
!
Un objeto hereda métodos de su clase
n Solo se puede invocar métodos heredados o definidos en un objeto
w Invocar un método no heredado ni definido en un objeto, da error_de_ejecución
!
Ejemplo: la clase Date incluye métodos (ilustrados arriba) como
n getDay(), getFullYear(), getHours(), getMinutes(), …..
w https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
© Juan Quemada, DIT, UPM
97
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Despues de haber definido las variables fruta y nada
var fruta = {peras:3, kiwis:7, frutas:function(){ return((this.peras+this.kiwis) + " frutas")}};
var nada = undefined;
var p = "peras";
!
fruta.peras
fruta.kiwis
fruta.frutas()
peras.frutas()
fruta.p
fruta[p]
fruta["peras"]
fruta["kiwis"]
fruta["fresas"]
nada.frutas()
nada[p]
nada.peras
nada["kiwis"]
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
se evalúa a 3*, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7*, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas"*, undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución*
se evalúa a 3, 7, "10 frutas", undefined* o Error_de_ejecución
se evalúa a 3*, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3*, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7*, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined* o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución*
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución*
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución*
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución*
© Juan Quemada, DIT, UPM
98
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
n Despues de haber definido las variables fruta y nada
var fruta = {peras:3, kiwis:7, frutas:function(){ return((this.peras+this.kiwis) + " frutas")}};
var nada = undefined;
var p = "peras";
!
fruta.peras
fruta.kiwis
fruta.frutas()
peras.frutas()
fruta.p
fruta[p]
fruta["peras"]
fruta["kiwis"]
fruta["fresas"]
nada.frutas()
nada[p]
nada.peras
nada["kiwis"]
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
se evalúa a 3, 7, "10 frutas", undefined o Error_de_ejecución
© Juan Quemada, DIT, UPM
99
Ejercicio
Crear una página HTML con un script, que primero cree la variable palabra
inicializandola como sigue:
n
var palabra = {saludo:'hola', despedida:'adiós'};
Despues debe muestrar en lineas diferentes, el resultado de evaluar las
siguientes expresiones:
n
n
n
palabra.saludo
palabra.despedida
palabra.vivienda
Utilizar un bloque <pre></pre> para presentar el resultado de la evaluación
con este formato:
n
<expresión> => <evaluación_de_la_expresión>
w tal y como se hace en el segundo ejemplo del tema
Utilizar también document.writeln(....) para introducir separaciones de linea
Sugerencia: una vez cargada la página, ejecutar estas 3 expresiones en la
consola JavaScript del navegador
© Juan Quemada, DIT, UPM
100
Objetos: características avanzadas
©
Juan Quemada, DIT, UPM
101
x
peras
Propiedades
dinámicas
Las propiedades de objetos
n Pueden crearse
n Pueden destruirse
3
var x = { peras:3, fresas:20};
!
x.peras = 7;
!
x.kiwis = 5;
peras
20
x
peras
© Juan Quemada, DIT, UPM
fresas
7
delete x.fresas;
Operaciones sobre propiedades
n x.c = 4
¡¡OJO: sentencia compleja!!
w si propiedad x.c existe, le asigna 4;
si x.c no existe,
crea x.c y le asigna 4
n delete x.c
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
20
x
!
!
fresas
7
kiwis
fresas
5
20
x
peras
7
102
kiwis
5
var pelicula = {
titulo: 'Avatar',
director:{
nombre:'James',
apellido: 'Cameron'
}
};
Objetos anidados: árboles
Los objetos pueden anidarse entre si
n Los objetos anidados representan arboles
!
La notación punto o array puede encadenarse
n Representando un camino en el árbol
w Las siguientes expresiones se evaluan así:
n
n
n
n
n
pelicula.director.nombre
pelicula['director']['nombre']
pelicula['director'].apellido
pelicula.estreno
pelicula.estreno.año
=>
=>
=>
=>
=>
pelicula
titulo
director
'Avatar'
'James'
nombre
'James'
'James'
'Cameron'
undefined
Error_de_ejecución
© Juan Quemada, DIT, UPM
103
apellido
'Cameron'
// Dado un objeto pel definido con
!
Usar propiedades dinámicas
Las propiedades dinámicas de JavaScript
n son muy útiles si se utilizan bien
var pel = {
titulo: 'Avatar',
director:’James Cameron'
};
!
// se puede añadir pel.estreno con
!
pel.estreno = {
año: '2009',
Un objeto solo debe definir las propiedades
cine: ‘Tivoli'
n que contengan información conocida
}
!
w añadirá mas solo si son necesarias
!
La información se puede consultar con
n prop1 && prop1.prop2
w para evitar errores de ejecución
w si las propiedades no existen
© Juan Quemada, DIT, UPM
!
// La expresión
!
pel.estreno && pel.estreno.año
!
// devuelve pel.estreno o undefined,
// evitando ErrorDeEjecución, si
// pel.estreno no se hubiese creado
104
x
var x = {}; // x e y tienen la
var y = x; // misma referencia
!
y
{}
z
{}’
var z = {}; // la referencia a z
// es diferente de
// la de x e y
=> 1 // x accede al mismo
=> 1 // objeto que y
=> undefined
1
y
x.t = 1;
x.t
y.t
z.t
{}
t
!
!
x
Las variables que contienen objetos
n solo contienen la referencia al objeto
!
Referencias
a objetos
El objeto esta en otro lugar en memoria
n indicado por la referencia
!
!
Esto produce efectos laterales
n como ilustra el ejemplo
© Juan Quemada, DIT, UPM
105
Identidad de objetos
Las referencias a objetos afectan a la identidad
n porque identidad de objetos
w es identidad de referencias
n los objetos no se comparan
w se comparan solo las referencias
n es poco util si no se redefine
var x = {}; // x e y contienen la
var y = x; // misma referencia
var z = {} // la referencia a z
// es diferente de x e y
!
x === y
x === {}
x === z
x
=> true
=> false
=> false
{}
!
Igualdad (debil) de objetos
== y !=
n no tiene utilidad tampoco con objetos
w no se debe utilizar
© Juan Quemada, DIT, UPM
y
z
106
{}’
Objeto window o this
window
screen
document
o o o
o o o
o o o
history
undefined
o o o
Infinity
o o o
o o o
o o o
El entorno de ejecución de JavaScript es el objeto global window
n
El objeto global window tiene propiedades con información sobre
w Objetos predefinidos de JavaScript, el navegador, el documento HTML, .....
!
window se referencia también como this en el entorno global
n
La propiedad document de window se referencia como
w window.document, this.document o document
!
Documentación: https://developer.mozilla.org/en-US/docs/Web/API/Window
© Juan Quemada, DIT, UPM
107
Variables globales y el entorno de ejecución
window
screen
document
o o o
o o o
history
location
o o o
o o o
navigator
o o o
x
o o o
Un programa JavaScript se ejecuta con el objeto window como entorno
n una asignación 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 diseño de JavaScript y hay que tratar de evitarlo
© Juan Quemada, DIT, UPM
108
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
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
pan.integral.sin_semillas.de_lino
pan.integral.de_semillas
pan.de_semillas.de_ajo
pan.de_ajo
pan['de_ajo']
pan['integral'].de_semillas
pan['blanco']['integral']
leche.entera
this.leche.entera
window.leche.entera
window.leche.de_avena
this.leche.de_avena.integral
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución*
3, 4, 5, 6, {de_avena:3,de_lino:4}*, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución*
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}*, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecución
3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4*, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined* o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución*
© Juan Quemada, DIT, UPM
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
pan.integral.sin_semillas.de_lino
pan.integral.de_semillas
pan.de_semillas.de_ajo
pan.de_ajo
pan['de_ajo']
pan['integral'].de_semillas
pan['blanco']['integral']
leche.entera
this.leche.entera
window.leche.entera
window.leche.de_avena
this.leche.de_avena.integral
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
3, 4, 5, 6, {de_avena:3,de_lino:4}, undefined o ErrorDeEjecución
© Juan Quemada, DIT, UPM
111
DOM: Document Object Model
©
Juan Quemada, DIT, UPM
112
DOM: Document Object Model
screen
document
o o o
history
location
o o o
HTML
o o o
window
navigator
o o o
o o o
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 página 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 método document.getElementById("idx") devuelve el objeto DOM
w asociado al elemento de la página HTML con identificador “idx”
!
window tiene además propiedades con el nombre de los identificadores
n ¡OJO! peligro: nombre puede coincidir con el de otra propiedad de window
113
©
Juan Quemada, DIT, UPM
getElementById ("fecha") devuelve el objeto DOM de <div id="fecha"></div>
!
Propiedad innerHTML de un objeto DOM
n Permite extraer/insertar HTML en el elemento del documento
Acceso a
DOM
©
Juan Quemada, DIT, UPM
114
Varios scripts
Una página
n con varios scripts
w es un único programa
!
Scripts se juntan siguiendo el
orden de aparición en la página
!
!
!
!!
!
función mostrar_fecha()
n Se define e invoca en
scripts diferentes
©
Juan Quemada, DIT, UPM
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 colisión 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
©
Juan Quemada, DIT, UPM
116
window
screen
documen
t
o o o
history
o o o
HTML
HEAD
o o o
location
navigator
o o o
o o o
o o o
Location, history,
screen, ...
BODY
o o o
location: propiedad que contiene el URL a la página en curso
n location = “http://www.upm.es”
// Carga la página en el navegador
w location.reload() re-carga la página en curso
n propiedades: href (url), protocol, hostname, port, pathname, search (query), ...
history: propiedad con la historia de navegación
n Métodos para navegar por la historia: history.back(), history.forward(), ...
screen: dimensiones de la pantalla
n width, height, availWidth, availHeight: para adaptar apps a pantallas móviles
Documentacion: https://developer.mozilla.org/en-US/docs/Web/API/Window
©
Juan Quemada, DIT, UPM
117
window.screen
© Juan Quemada, DIT, UPM
118
Funciones de selección 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 página 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]
referencia el primer elemento con atributo name=”my_name”
Doc: https://developer.mozilla.org/en/docs/Web/API/Document
n
n
©
Juan Quemada, DIT, UPM
119
Al ejecutar la instrucción en la
consola Web de Firefox,
cambiamos la fecha por “hola”
©
Juan Quemada, DIT, UPM
120
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
121
Ejercicio
Si tenemos una página HTML con el siguiente contenido
<!DOCTYPE html> !
<html> .... <body> !
<h4 id="id1" >Título</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 evaluarán las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML
document.getElementById("id2").innerHTML
document.getElementById("id3").innerHTML
document.getElementById("id4").innerHTML
document.getElementById("id7").innerHTML
id1.innerHTML
id2.innerHTML
id4.innerHTML
id6.innerHTML
id8.innerHTML
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
undefined, "", “Título"*, "Coche", "Casa", "ErrorEjecución"
undefined, "", "Título", “Coche"*, "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", “Casa"*, “ErrorEjecución”
undefined, “"*, "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”*
undefined, "", “Título"*, "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", “Coche"*, "Casa", “ErrorEjecución”
undefined, “"*, "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”*
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”*
© Juan Quemada, DIT, UPM
122
Ejercicio
Si tenemos una página HTML con el siguiente contenido
<!DOCTYPE html> !
<html> .... <body> !
<h4 id="id1" >Título</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 evaluarán las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML
document.getElementById("id2").innerHTML
document.getElementById("id3").innerHTML
document.getElementById("id4").innerHTML
document.getElementById("id7").innerHTML
id1.innerHTML
id2.innerHTML
id4.innerHTML
id6.innerHTML
id8.innerHTML
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
undefined, "", "Título", "Coche", "Casa", "ErrorEjecución"
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
undefined, "", "Título", "Coche", "Casa", “ErrorEjecución”
© Juan Quemada, DIT, UPM
123
Sentencia for/in de JavaScript
©
Juan Quemada, DIT, UPM
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 iteración
n "x[i]" representa el valor de la propiedad "i"
w Dentro de la sentencia for debe utilizarse la notación array
x
a
7
c
b
'hi'
'adios'
© Juan Quemada, DIT, UPM
125
Sentencia for/in
En el ejemplo se utiliza for (i in x) {...}
n para mostrar en una página Web
w el contenido de las propiedades de un objeto
© Juan Quemada, DIT, UPM
x
c
a b
7
'hi'
126
'adios'
Sintaxis de la
sentencia for/in
La sentencia comienza por for
!
Sigue la condición (i in obj)
n debe ir entre paréntesis (...)
!
Los bloques de más de 1 sentencia
n deben delimitarse con {....}
!
Bloques de 1 sentencia
n pueden omitir {..}, pero mejoran la
legibilidad delimitados con {..}
© Juan Quemada, DIT, UPM
127
window.screen
© Juan Quemada, DIT, UPM
128
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
129
Ejercicio
Construir una página HTML con un script que primero defina el
siguiente objeto
n
var y = {x:'hola', y:'que', z:'tal', t: 'estás'}
!
A continuación 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 página
HTML con la función document.write(....)
© Juan Quemada, DIT, UPM
130
Ejercicio entregable
Construir una página 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 función prompt, para que lo
introduzca a través del cajetín 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 función
!
(comprobarlo con el operador "typeof"). Si es un objeto o función se si indicará “objeto” o
“función”.
Incluir un formato CSS bien diseñado para la visualización de la tabla. Pueden inspirarse en el
mostrado en el tema HTML/CSS Marcas básicas".
!
Se recomienda utilizar un script que utilice la sentencia “for/in” para extraer las propiedades e
insertarlas en la página 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 función.
!
Alojar el script como un recurso público en un servidor en la nube (Google Drive) para que
pueda accederse por cualquier usuario desde cualquier navegador.
© Juan Quemada, DIT, UPM
131
Eventos Javascript
©
Juan Quemada, DIT, UPM
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 función 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
Eje de
tiempos
Carga de página
HTML
manejador a
© Juan Quemada, DIT, UPM
evento b
manejador b
133
Eventos periódicos con setInterval(....)
JavaScript tiene una función setInterval (..)
n para programar eventos periódicos
!
setInterval (manejador, periodo_en_milisegundos)
n tiene 2 parámetros
w manejador: función que se ejecuta al ocurrir el evento
w periodo_en_milisegundos: tiempo entre eventos periódicos
1 seg
Eje de
tiempos
manejador
setInterval(
manejador,
1000_miliseg.
)
2 seg
3 seg
4 seg
5 seg
manejador
manejador
manejador
manejador
© Juan Quemada, DIT, UPM
134
Reloj
Utilizamos la función
n setInterval(manejador, T)
w para crear un reloj
!
Cada segundo se muestra
n El valor de reloj del sistema
©
Juan Quemada, DIT, UPM
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 Código del manejador: "this.src='img2.png'"
n
(valor del atributo)
this referencia el objeto DOM asociado al manejador
!
Tutorial:
n
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes
©
Juan Quemada, DIT, UPM
136
Eventos
en HTML
Definimos 2 manejadores de evento en elem. <img .... >
n Atributo onclick: muestra el icono enfadado
n Atributo ondblclick: muestra el icono pasivo
!
this.src referencia atributo src de <img ..>
n this referencia objeto DOM asociado: <img ..>
©
Juan Quemada, DIT, UPM
137
Eventos definidos directamente en Javascript
Los manejadores de eventos se pueden definir con
n objeto.addEventListener(evento, manejador)
!
También 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: función ejecutada al ocurrir un evento
!
Ejemplos
n img.addEventListener("onclick", function() {... código ...})
n img.onclick=function() {... código...}
©
Juan Quemada, DIT, UPM
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 añade con método: object.addEventListener(event, manejador)
n Actualmente se recomienda usar siempre addEventListener(….)
Evento como propiedad
©
Juan Quemada, DIT, UPM
139
Los manejadores de evento se definen también 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
©
Juan Quemada, DIT, UPM
140
El script pasa a la cabecera, se separa del documento HTML
n El código se mete en la función inicializar(), que se ejecutra al ocurrir onload
w onload ocurre con la página HTML ya cargada y el objeto DOM construido
Evento onload
©
Juan Quemada, DIT, UPM
141
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
142
Ejercicio
Modificar el reloj del ejemplo anterior para que presente
n
Horas, minutos, segundos y milisegundos con el formato
w
n
n
12 horas, 23 minutos, 10 segundos, 123 ms
Se recomienda variar el intervalo del evento a 1 ms
Utilizar métodos que extráen de un objeto Date: horas, min., seg. y ms
w getHours(), getMinutes(), getSeconds() y getMilliseconds()
n
Tutorial Date:
n
!
n
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Modificar el formato de presentación 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 añadir manejadores de eventos:
n
https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener
©
Juan Quemada, DIT, UPM
143
Botones y formularios en JavaScript
©
Juan Quemada, DIT, UPM
144
Entradas y botones
Entrada: un cajetín en pantalla para introducir texto en una aplicación
n Se define con <input type=text ..>
w el atributo value="texto" representa en texto dentro del cajetin
Botón: elemento gráfico que invita a hacer clic
n Se define con <buton type=button ...>nombre</button>
©
Juan Quemada, DIT, UPM
145
Ejemplo Pregunta
Esta WebApp plantea la pregunta
n ¿Quien descubrió América?
w para ilustrar como interaccionar
n a través de formularios y botones
!
Escribir la respuesta en el cajetín
n y pulsar el boton “consultar”
w para saber si es correcto
!
Según sea la respuesta se responde
n “Correcto” o “No es correcto”
© Juan Quemada, DIT, UPM
146
Pregunta
©
Juan Quemada, DIT, UPM
147
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
148
Ejercicio
Si tenemos una página HTML con el siguiente contenido
!
<!DOCTYPE
html>
<html>
... <body>
!
!
! <h4 id="id1" >Título</h4>
type="text" id="id2" name= "caja" value="7">
! <input
<p id="id3" >Texto</p>
!!
<script type=“text/javascript”> … script con expresiones …</script>
!</body>
!
</html>
Como se evaluarán las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML
document.getElementById("id1").value
id1.value
document.getElementById("id2").innerHTML
document.getElementById("id2").value
id2.value
document.getElementById("id3").innerHTML
document.getElementById("id3").value
id3.value
=>
=>
=>
=>
=>
=>
=>
=>
=>
undefined, "", "null", “Título”*, "Texto", 7, "7"
undefined*, "", "null", "Título", "Texto", 7, "7"
undefined*, "", "null", "Título", "Texto", 7, "7"
undefined, “"*, "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, “7"*
undefined, "", "null", "Título", "Texto", 7, “7"*
undefined, "", "null", "Título", “Texto"*, 7, “7"
undefined*, "", "null", "Título", "Texto", 7, "7"
undefined*, "", "null", "Título", “Texto", 7, "7"
© Juan Quemada, DIT, UPM
149
Ejercicio
Si tenemos una página HTML con el siguiente contenido
!
<!DOCTYPE
html>
<html>
... <body>
!
!
! <h4 id="id1" >Título</h4>
type="text" id="id2" name= "caja" value="7">
! <input
<p id="id3" >Texto</p>
!!
<script type=“text/javascript”> … script con expresiones …</script>
!</body>
!
</html>
Como se evaluarán las siguientes expresiones si estuviesen en el script
document.getElementById("id1").innerHTML
document.getElementById("id1").value
id1.value
document.getElementById("id2").innerHTML
document.getElementById("id2").value
id2.value
document.getElementById("id3").innerHTML
document.getElementById("id3").value
id3.value
=>
=>
=>
=>
=>
=>
=>
=>
=>
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, “7"
undefined, "", "null", "Título", "Texto", 7, "7"
undefined, "", "null", "Título", "Texto", 7, "7"
© Juan Quemada, DIT, UPM
150
Ejercicio
Modificar el ejemplo anterior de forma que
n
si la respuesta es incorrecta
w
además de indicar “No es correcto”
n inicialice el cajetin con el texto “pruebe otra vez”
!
Información sobre atributos JS de <input type=”text” ..> en:
n
http://www.w3schools.com/jsref/dom_obj_text.asp
©
Juan Quemada, DIT, UPM
151
Librerías JavaScript jQuery y Zepto
©
Juan Quemada, DIT, UPM
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 móviles (http://zeptojs.com)
n zepto.min.js ocupa solo 9,7Kbytes (gzipped)
w ¡OJO! Soporta browsers móviles actuales, pero no Internet Explorer
n Añade eventos tactiles para móviles y tabletas
n Es equivalente a jQuery 2.0 aparecida recientemente
©
Juan Quemada, DIT, UPM
153
Objetos y función jQuery (o Zepto)
Objeto jQuery: representación más eficaz de un objeto DOM
n se procesan en bloque (array) con métodos de jQuery como html(...)
!
Función 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 función jQuery convierte además 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
!
©
Juan Quemada, DIT, UPM
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”)
©
Juan Quemada, DIT, UPM
155
Función ready: esperar a página cargada
Función ready(): ejecuta un script con el objeto DOM está construido
n Invocación: $(document).ready(function() { .. código js ... });
w Suele utilizarse la sintaxis abreviada: $(function() { .. código .. });
©
Juan Quemada, DIT, UPM
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 común a Google, Microsoft, jQuery, Zepto, ...
n Para maximizar probabilidad de que recursos estén ya en la cache
©
Juan Quemada, DIT, UPM
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 después de h1 en el árbol */
$("h1 > h2")
/* devuelve array de objectos con marca h2 justo después de h1 en arbol */
$("h1 + p")
/* devuelve array de objetos con marca p adyacente a h1 del mismo nivel */
.................
©
Juan Quemada, DIT, UPM
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!’) añade 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>
©
Juan Quemada, DIT, UPM
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
!
“Función ready”: “$(function(){..}))“
n Ejecuta la función cuando el árbol DOM está construido
©
Juan Quemada, DIT, UPM
160
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
161
Ejercicio
Dada una página HTML que utiliza la librería Zepto con el siguiente contenido
!
<!DOCTYPE html>
<html>
.... <body>
!
<h4 id="id1" >Título</h4>
!
<p id="id2">Coche</p>
!
<div id="id3"></div>
<div id="id4" class="Casa">Casa</div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
</html>
!
Como se evaluarán las siguientes expresiones si estuviesen en el script
$("#id1").html()
=>
$("#id2").html()
=>
$("#id3").attr("innerHTML") =>
$("#id4").html()
=>
$(".Casa").html()
=>
$(".Casa").attr("innerHTML") =>
$("#id5").html()
=>
$("#id6").attr("innerHTML") =>
$("#id4").attr("innerHTML") =>
undefined o null, error_de_ejecución, "", “Título"*, "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", “Coche"*, "Casa"
undefined o null, error_de_ejecución, “"*, "Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"*
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"*
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"*
undefined o null*, error_de_ejecución, "", "Título", "Coche", "Casa"
undefined* o null, error_de_ejecución, "", "Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"*
© Juan Quemada, DIT, UPM
162
Ejercicio
Dada una página HTML que utiliza la librería Zepto con el siguiente contenido
!
<!DOCTYPE html>
<html>
.... <body>
!
<h4 id="id1" >Título</h4>
!
<p id="id2">Coche</p>
!
<div id="id3"></div>
<div id="id4" class="Casa">Casa</div>
!
<script type="text/javascript"> ...script con expresiones de abajo ... </script>
</body> !
</html>
!
Como se evaluarán las siguientes expresiones si estuviesen en el script
$("#id1").html()
=>
$("#id2").html()
=>
$("#id3").attr("innerHTML") =>
$("#id4").html()
=>
$(".Casa").html()
=>
$(".Casa").attr("innerHTML") =>
$("#id5").html()
=>
$("#id6").attr("innerHTML") =>
$("#id4").attr("innerHTML") =>
undefined o null, error_de_ejecución, "", “Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", “Coche", "Casa"
undefined o null, error_de_ejecución, “", "Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", "Casa"
undefined o null, error_de_ejecución, "", "Título", "Coche", “Casa"
© Juan Quemada, DIT, UPM
163
Eventos con jQuery y Zepto
©
Juan Quemada, DIT, UPM
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)
©
Juan Quemada, DIT, UPM
165
Pregunta
Zepto
©
Juan Quemada, DIT, UPM
166
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
167
Ejercicio
Si tenemos una página HTML con el siguiente contenido
!<!DOCTYPE html><html>
type="text/javascript" src="zepto.min.js" > </script>
!<script
<script type="text/javascript">
! $(function(){ ..... /* script con expresiones de abajo */ });
!</script></head><body>
<h4 id="id1" >Datos</h4>
!!
su edad:
! Introduzca
<input type="text" id="id2" name="edad" value="7" class="dato">
!</body>
!</html>
Como se evaluarán las siguientes expresiones si estuviesen en el script
$("#id1").html()
$("#id2").html()
$(".dato").html()
$("#id1").val()
$("#id1").attr("type")
$(".dato").attr("id")
$("#id2").val()
$("#id2").attr("name")
$("#id2").attr("class")
=> undefined o null, "", “Datos"*, "text", "edad", "id2", "7", "dato"
=> undefined o null, “"*, "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, “”*, "Datos", "text", "edad", "id2", "7", "dato"
=> undefined* o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null*, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", “id2"*, "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", “7"*, "dato"
=> undefined o null, "", "Datos", "text", “edad"*, "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", “dato"*
© Juan Quemada, DIT, UPM
168
Ejercicio
Si tenemos una página HTML con el siguiente contenido
!<!DOCTYPE html><html>
type="text/javascript" src="zepto.min.js" > </script>
!<script
<script type="text/javascript">
! $(function(){ ..... /* script con expresiones de abajo */ });
!</script></head><body>
<h4 id="id1" >Datos</h4>
!!
su edad:
! Introduzca
<input type="text" id="id2" name="edad" value="7" class="dato">
!</body>
!</html>
Como se evaluarán las siguientes expresiones si estuviesen en el script
$("#id1").html()
$("#id2").html()
$(".dato").html()
$("#id1").val()
$("#id1").attr("type")
$(".dato").attr("id")
$("#id2").val()
$("#id2").attr("name")
$("#id2").attr("class")
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
=> undefined o null, "", "Datos", "text", "edad", "id2", "7", "dato"
© Juan Quemada, DIT, UPM
169
Ejercicio
Modificar el ejemplo de script con Zepto que pregunta, “¿Quién
descubrió América?, de forma que si la respuesta es incorrecta,
además de indicar “No es correcto”, inicialice el cajetin con el texto
“pruebe otra vez”, insertando este string con métodos de Zepto
!
Mas información sobre las funciones de Zepto que modifican
atributos HTML en:
n http://zeptojs.com/
n http://zeptojs.com/#val
n http://zeptojs.com/#attr
©
Juan Quemada, DIT, UPM
170
La Clase Array
©
Juan Quemada, DIT, UPM
171
Arrays
Array: lista ordenada de
n elementos heterogéneos
w accesibles a través de un índice
n de 0 a length-1
!
Tamaño máximo: 2^32-2 elementos
!
Elementos
n a[0] es el primer elemento
n ........
n a[a.length-1] último elemento
© Juan Quemada, DIT, UPM
var x = [1, 2, 3];
!
!
a[0]
a[1]
a[2]
=> 1
=> 2
=> 3
a.length
=> 3
!
!
172
Elementos de un Array
Elementos del array pueden
contener cualquier valor u objeto
n undefined
n otro array
n objetos
n ...
!
Indexar elementos que no existen
n devuelve undefined
!
var a = [1, undefined, 'a', , [1, 2]];
!
a[3];
a[4];
=> undefined
=> [1, 2]
a[9];
=> undefined
a[4][1];
=> 2
!
!
w por ejemplo con índices mayores
que length
© Juan Quemada, DIT, UPM
173
Tamaño del Array
Los arrays son dinámicos
n pueden crecer y encoger
!
Asignar un elemento fuera de rango
n incrementa el tamaño del array
!
El tamaño del array se puede modificar
n con la propiedad a.length
w a.length = 3;
n modifica el tamaño del array
n Que pasa a ser 4
© Juan Quemada, DIT, UPM
!
var a = [1, 3, 1];
!
a;
=> [1, 3, 1]
a[4] = 2;
a;
=> 2
=> [1, 3, 1, , 2]
!
!
// el array se reduce
a.length = 2 => 2
!
a
=> [1, 3]
174
Métodos de Array
Array hereda métodos de su clase
!
var a = [1, 5, 3];
!
sort(): devuelve array ordenado
!
reverse(): devuelve array invertido
!
push(e1, .., en)
n añade e1, ..,en al final del array
!
pop()
n extrae último elemento del array
a.sort()
=> [1, 3, 5]
a.reverse()
=> [5, 3, 1]
!
!
a.push(false)
a
=> 4
=> [5, 3, 1, false]
a.pop()
a
=> false
=> [5, 3, 1]
!
© Juan Quemada, DIT, UPM
175
Más métodos
join(<separador>):
n devuelve string uniendo elementos
w introduce <separador> entre elementos
!
slice(i,j): devuelve una rodaja
n Indice negativo (j) es relativo al final
w índice “-1” es igual a a.length-2
!
var a = [1, 5, 3, 7];
!
a.join(';')
=> '1;5;3;7'
a.slice(1, -1)
=> [5, 3]
!
!
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
© Juan Quemada, DIT, UPM
176
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
177
Ejercicio
Indicar el resultado de evaluar las siguientes instrucciones y expresiones en
el orden dado
[3, ,1,2,0][0]
[3, ,1,2,0][1]
[3, ,1,2,0][8]
[3, ,1,2,0][2]
[3, ,1,2,0][4]
!
=>
=>
=>
=>
=>
[3, ,1,2,0].sort()
[3, ,1,2,0].reverse()
[3, ,1,2,0].pop()
[3, ,1,2,0].push(8)
[3, ,1,2,0].length
!
se evalúa a
se evalúa a
se evalúa a
se evalúa a
se evalúa a
0, 1, 2, 3, undefined, null
0, 1, 2, 3, undefined, null
0, 1, 2, 3, undefined, null
0, 1, 2, 3, undefined, null
0, 1, 2, 3, undefined, null
=> se evalúa a
=> se evalúa a
=> se evalúa a
=> se evalúa a
=> se evalúa a
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
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 evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.slice(1, 2)
=> se evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.splice(1, 2, 1, 4) => se evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]
a
=> se evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]
a.splice(1, 2, 7) => se evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]
© Juan Quemada, DIT, UPM
178
Ejercicio
Indicar el resultado de evaluar las siguientes instrucciones y expresiones en
el orden dado
[3, ,1,2,0][0]
[3, ,1,2,0][1]
[3, ,1,2,0][8]
[3, ,1,2,0][2]
[3, ,1,2,0][4]
!
=>
=>
=>
=>
=>
[3, ,1,2,0].sort()
[3, ,1,2,0].reverse()
[3, ,1,2,0].pop()
[3, ,1,2,0].push(8)
[3, ,1,2,0].length
!
se evalúa a
se evalúa a
se evalúa a
se evalúa a
se evalúa a
0, 1, 2, 3*, undefined, null
0, 1, 2, 3, undefined*, null
0, 1, 2, 3, undefined*, null
0, 1*, 2, 3, undefined, null
0*, 1, 2, 3, undefined, null
=> se evalúa a
=> se evalúa a
=> se evalúa a
=> se evalúa a
=> se evalúa a
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ]*, [0,2,1, ,3]
0, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]*
0*, 5, 6, 8, [3, ,1,2,0,8], [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
0, 5, 6, 8, [3, ,1,2,0,8]*, [3, ,1,2], [0,1,2,3, ], [0,2,1, ,3]
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 evalúa a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a.splice(1, 2, 1, 4) => se evalúa a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a
=> se evalúa a [3,1,4,0]*, [1,4], [3,0], [3,7,0]
a.splice(1, 2, 7) => se evalúa a [3,1,4,0], [1,4]*, [3,0], [3,7,0]
a
=> se evalúa a [3,1,4,0], [1,4], [3,0], [3,7,0]*
© Juan Quemada, DIT, UPM
179
Bucles: sentencias while, for y do/
while
©
Juan Quemada, DIT, UPM
180
Bucle
Un bucle es una secuencia o bloque de instrucciones
n que se repite mientras se cumple una condición de permanencia
!
Un bucle se controla con 3 elementos,
n normalmente asociados a una variable(s) de control del bucle
w Inicialización:
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 repetición las variables de control
!
Ilustraremos los bucles (while, for y do/while) con la función veces
!
veces(..) acepta letra y frase como primer y segundo parámetros
n Y devuelve el número de veces que la frase contiene la letra
© Juan Quemada, DIT, UPM
181
veces(..): bucle while
© Juan Quemada, DIT, UPM
182
veces(..): bucle for
© Juan Quemada, DIT, UPM
183
Sintaxis de la
sentencia for
La sentencia comienza conr for
!
sigue la condición (con 3 partes)
n (i=0; i < arguments[i]; i++)
w Inicialización:
i=0, ....
w Permanencia en bucle: i < arguments.length
w Acción 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 {..}
© Juan Quemada, DIT, UPM
184
veces(..): bucle do
© Juan Quemada, DIT, UPM
185
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
186
Ejercicio
Publicar un script en una página HTML, que utilize un bucle y la función
prompt() para solicitar de forma cíclica en el cajetín del desplegable un
número para sumarlo a los anteriores o el string “acabar” para finalizar el
bucle.
!
Cada vez que introduzcamos un número debe sumarlo a los anteriores y
presentar el resultado de la suma en el desplegable siguiente, además de
pedirnos un nuevo número o que finalicemos el proceso con "acabar".
!
Utilizar nueva linea (\n) en el mensaje que se presenta con prompt() para
presentar varias líneas encima del cajetín.
!
Cuando se introduzca un string que no sea, ni un número, ni “acabar”, debe
presentar además el mensaje: entrada erronea, vuelva a intentarlo.
!
Realizar 2 scripts uno con un bucle while y otro con un bucle for. Controlar
la condición del bucle con el valor que devuelve la función prompt().
© Juan Quemada, DIT, UPM
187
Ejemplos con iframe, array y for
©
Juan Quemada, DIT, UPM
188
iFrame
n marco de navegación independiente
!
iFrame
Un iFrame crea una caja de arena segura
n
donde poder importar objetos externos
!
Ejemplo: enlaza un juego en otro servidor
n
El iFrame evita que se introduzca malvare
w Acceso JavaScript limitado a caja de arena
© Juan Quemada, DIT, UPM
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 página principal si proviene del mismo origen
n
Esto evita en el ejemplo anterior que el juego
w robe o modifique información o datos del usuario en la página externa
!
Origen
n
protocolo, servidor y puerto del URL
!
La restricción de pertenecer al “mismo origen”
n
Solo afecta al recurso principal: página Web, recurso, …
w Los scripts o los estilos no están 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
©
Juan Quemada, DIT, UPM
190
Ejemplo con
iFrames
© Juan Quemada, DIT, UPM
191
Flexbox
Flexbox permite un diseño
responsivo fácil y flexible:
!
display: flex;
flex-wrap: wrap;
!
coloca cada iframe a la derecha
del anterior. Al llegar al limite
pasa a la línea siguiente.
© Juan Quemada, DIT, UPM
192
Código
© Juan Quemada, DIT, UPM
193
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
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 irán numerados de forma que cada uno lleve delante
el string URL_n, siendo n el índice en el array.
Añadir ademas un cajetín para introducir un número y un botón que
borre el URL con el índice introducido cuando se pulse el botón
n Se recomienda utilizar el método splice(…) para eliminar dicho
elemento del array y después volver a repintar la lista de iFrames
restantes.
© Juan Quemada, DIT, UPM
195
Ejemplo de un Cronómetro
©
Juan Quemada, DIT, UPM
196
Cronómetro
WebApp similar a un cronómetro digital
!
Cuenta décimas 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 cronómetro parado
n para si cronómetro contando
n inicializar: pone el contador a 0,0
© Juan Quemada, DIT, UPM
197
Cronómetro
©
Juan Quemada, DIT, UPM
198
DOM como almacén de datos
El navegador guarda en document la página HTML que está mostrando
n document es un objeto JavaScript con propiedades
w que contienen todos los elementos de la página
!
Las propiedades DOM son variables: src, value, innerHTML, ....
n donde la información 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
© Juan Quemada, DIT, UPM
199
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
200
Ejercicio
Añadir al cronómetro una lista debajo de los botones, que
muestre los instantes en que el cronómetro ha parado de
contar. La lista deberá vaciarse cuando se inicialice el
cronómetro.
Sugerencia: añadir un bloque <div> debajo de los botones y
guardar en él los instantes de parada como líneas HTML,
separadas por <br>, como HTML asociado a dicho bloque
La respuesta al botón de inicializar hay que modificarla, para
que no inicialice el contador si se pulsa el boton inicializar
mientras el cronómetro está contando
Sugerencia: comprobar “t === undefined” antes de inicializar
©
Juan Quemada, DIT, UPM
201
Eventos tactiles en JavaScript
©
Juan Quemada, DIT, UPM
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 básicos 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), ..
©
Juan Quemada, DIT, UPM
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 librería TapQUO
©
Juan Quemada, DIT, UPM
204
Eventos básicos para pantalla tactil (W3C)
Eventos tactiles básicos 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 página 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
© Juan Quemada, DIT, UPM
205
Evento tactil JavaScript
©
Juan Quemada, DIT, UPM
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 añade los eventos
w tap, singleTap, doubleTap, swipe, swipeUp, swipeDown, swipeLeft, swipeRight
n
gesture.js que añade 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 configuración por defecto se quita incluyendo en el manejador
w evento.preventDefault()
©
Juan Quemada, DIT, UPM
207
La libreria touch.js de Zepto detecta y dispara eventos tactiles automaticamente
n Si cargamos la librería podemos definir directamente manejadores de
w swipeRight y swipeLeft sobre el icono
Eventos touch.js
©
Juan Quemada, DIT, UPM
208
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
209
Ejercicio
Modificar el ejemplo del cronómetro, quitando los 2 botones:
arrancar/parar e inicializar
!
Añadir en su lugar los siguiente eventos tactiles sobre el body del
cronómetro
n
n
Evento tap: sustituira a arrancar/parar
Evento swipe: sustituira a inicializar
!
Utilizar la libreria touch.js para implementar los eventos tactiles
©
Juan Quemada, DIT, UPM
210
Memoria local en HTML5
©
Juan Quemada, DIT, UPM
211
Almacenamiento de datos en cliente
HTML5 implementa nuevos tipos de almacenamiento de variables
n Sencillas y eficientes de utilizar desde Javascript
w Definición: http://dev.w3.org/html5/webstorage/
!
Variables locales
n los datos se guardan permanentemente, hasta que se borran
!
Variables de sesión
n
Los datos solo se guardan solo durante la sesión
w Comienzo de sesión: apertura de navegador o pestaña
w Final de sesión:
cierre de navegador o pestaña
© Juan Quemada, DIT, UPM
212
Variables locales y de sesión
Son propiedades de los objetos localStorage y sessionStorage
n solo pueden contener strings,
como por ejemplo
w localStorage.usuario
= “Pedro Pérez”;
w sessionStorage.apellido = “Pérez”;
!
Las variables locales están 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
© Juan Quemada, DIT, UPM
213
Ejemplo de localStorage
Cada usuario que acceda a esta página tendrá una cuenta diferente
n La variable está en su navegador
©
Juan Quemada, DIT, UPM
214
Cronómetro con memoria
Nueva versión del cronómetro con localStorage
n así mantiene la cuenta de décimas de segundos
w entre usos sucesivos de la aplicación
!
El cronómetro utiliza ahora la variable
n localStorage.c
w para guardar la cuenta de segundos
!
Debemos inicializar localStorage.c
n con parámetro por defecto para cuando se ejecute por primera vez
!
Como la información se guarda ahora en localStorage y no en DOM
n
hay que actualizar primero localStorage y luego mostrar en DOM
© Juan Quemada, DIT, UPM
215
Cronómetro:
localStorage
©
Juan Quemada, DIT, UPM
216
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
217
Javascript: Notepad
©
Juan Quemada, DIT, UPM
218
Ejemplo Notepad
Notepad es una aplicación Web
n que crea una agenda donde guardar notas de texto
w que se almacenan en localStorage
!
La página Web que la implementa
n tiene en realidad 2 paginas en una
w La página que visualiza las notas
w La página que permite editar las notas
!
Al pulsar los botones (Editar o Salvar)
n Una página se activa con el método show() de Zepto
w cuando la otra se desactiva con el método hide()
© Juan Quemada, DIT, UPM
219
NotePad
©
Juan Quemada, DIT, UPM
220
Añadir a NotePad utilizando jQuery
n El editor WYSIWYG Cleditor
Ejercicio
almacenamiento
w Codifcado en javascript/jQuery
n
©
http://premiumsoftware.net/cleditor/
Juan Quemada, DIT, UPM
221
Ejercicio entregable
Añadir al cronómetro con memoria una lista debajo de los botones, que muestre los instantes
en que el cronómetro ha parado de contar. La lista deberá vaciarse con el botón de inicializar
del cronómetro. La lista deberá guardarse además en una variable de localStorage, para que
los valores se guarden entre invocaciones sucesivas.
Sugerencia: añadir un bloque <div> vacio debajo de los botones donde se guarden los
instantes de parada como líneas HTML separadas por <br>. En cada parada se añadirá una
nueva línea.
Modificar además lo siguiente:
!
- La respuesta al botón de inicializar, para no inicializar si se pulsa mientras el cronómetro está
en marcha. Se sugiere comprobar “t === undefined” antes de inicializar.
!
- Añadir los eventos tactiles tap y swipe sobre el body del cronómetro, para que las
operaciones parar/arrancar e inicializar se puedan hacer con tap y swipe respectivamente.
!
- Añadir una imagen de fondo con una esfera de cronómetro a la caja donde está el contador y
posicionar el contador en la parte de la imagen donde estaría la cuenta en uno real, de forma
que se visualice con más realismo. Se puede utilizar la imagen de cronómetro que se
suministra con los ejemplos del módulo o buscar una en Internet. La lista de paradas estará
debajo de la esfera.
!
Alojar el script como un recurso público en un servidor en la nube (Google Drive) para que
pueda accederse por cualquier usuario desde cualquier navegador.
222
© Juan Quemada, DIT, UPM
JSON: JavaScript Object Notation
© Juan Quemada, DIT, UPM
223
JSON
JSON: formato textual de representación 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, ""]}}
!
© Juan Quemada, DIT, UPM
224
Serialización de datos
Serialización:
n transformación reversible de un tipo u objeto (en
memoria) en un string equivalente
!
La serialización es un formato de intercambio de datos
n
n
n
Almacenar datos en un fichero
Enviar datos a través de una línea de comunicación
Paso de parámetros en interfaces REST
!
En JavaScript se realiza desde ECMAScript 5 con
n
JSON.stringify(...) y JSON.parse(...)
!
Otros formatos de serialización: XML, HTML, XDR(C), ...
n Estos formatos están siendo desplazados por JSON, incluso XML
w Hay bibliotecas de JSON para los lenguajes más importantes
© Juan Quemada, DIT, UPM
225
Características de JSON
JSON puede serializar
n
objetos, arrays, strings, números finitos, true, false y null
w NaN, Infinity y -Infinity se serializan a null
w Objetos Date se serializan a formato ISO
n
n
la reconstrucción devuelve un string y no el objeto original
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'
!
!
© Juan Quemada, DIT, UPM
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
© Juan Quemada, DIT, UPM
227
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
228
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
JSON.stringify({a:6, b:Infinity}); => '{"a":6,"b":Infinity}'
!
=>
=>
=>
=>
=>
=>
=>
=>
JSON.stringify({a:6, b:""})
=>
JSON.stringify({a:6, b:NaN}) =>
JSON.stringify({a:6, b:null}) =>
JSON.stringify({a:6, b: "null"}) =>
JSON.stringify({a:6, b:''})
=>
JSON.stringify({a:6, b:5})
=>
JSON.stringify({a:6, b:{}})
=>
JSON.stringify({a:6, b:[]})
=>
'{"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"}'
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
© Juan Quemada, DIT, UPM
229
Ejercicio
Indicar el resultado de evaluar las siguientes expresiones
JSON.stringify({a:6, b:Infinity}); (4) => '{"a":6,"b":Infinity}'
!
=>
=>
=>
=>
=>
=>
=>
=>
JSON.stringify({a:6, b:""})
(5) =>
JSON.stringify({a:6, b:NaN}) (4) =>
JSON.stringify({a:6, b:null}) (4) =>
JSON.stringify({a:6, b: "null"}) (9) =>
JSON.stringify({a:6, b:''})
(5) =>
JSON.stringify({a:6, b:5})
(6) =>
JSON.stringify({a:6, b:{}})
(7) =>
JSON.stringify({a:6, b:[]})
(8) =>
'{"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"}'
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
..... (las mismas respuestas) ....
© Juan Quemada, DIT, UPM
230
HTML5 SVG: Scalable Vector
Graphics
©
Juan Quemada, DIT, UPM
231
SVG: Scalable Vector Graphics
Formato de representación de gráficos vectoriales
n Pueden cambiar de tamaño sin perdida de calidad
!
Recursos
n Galeria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
n Editor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
n Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
n Tutorial: http://www.w3schools.com/svg/
http://commons.wikimedia.org/wiki/File:Compass.svg
©
http://commons.wikimedia.org/wiki/SVG_examples
232
Juan Quemada, DIT, UPM
Ejemplo “Ajuste SVG”
“Ajuste SVG” ilustra como reescalar una imagen SVG
n Las imagenes en SVG reescalan sin perder calidad
w porque son gráficos vectoriales
w tutorial: http://www.w3schools.com/svg/
n Las imágenes GIT, JPEG o PNG no reescalan bien
w porque tienen una resolución determinada
!
Esta WebApp tiene 2 botones: “+” y “-”
!
Cada vez que pulsamos uno de estos botones
n el tamaño de la imagen debe aumentar o disminuir un 10%
w según pulsemos “+” y “-”
© Juan Quemada, DIT, UPM
233
Ejemplo SVG
©
Juan Quemada, DIT, UPM
234
Ejempo “Reloj SVG”
“Reloj SVG” genera un reloj sencillo con SVG
n El reloj se compone de
w Un círculo negro
w Tres lineas para las manecillas del reloj
!
SVG puede animarse con javaScript
n modificando la representación DOM del reloj
w Versión 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 añade estilo CSS
n Mejora el aspecto y adapta al tamaño de la pantalla
© Juan Quemada, DIT, UPM
235
Reloj SVG
©
Juan Quemada, DIT, UPM
236
SVG: Reloj animado
con “transform”
©
Juan Quemada, DIT, UPM
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)
© Juan Quemada, DIT, UPM
238
SVG: Reloj animado
con coordenadas
©
Juan Quemada, DIT, UPM
239
Relojes con “estilo”
Usando CSS e imágenes se pueden diseñar
n Las capturas muestran pequeños cambios de diseño
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
© Juan Quemada, DIT, UPM
240
SVG: Reloj con estilo CSS
©
Juan Quemada, DIT, UPM
241
Objetos SVG
Los objetos SVG se pueden definir también 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
©
Juan Quemada, DIT, UPM
242
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
243
Ejercicio
Modificar el reloj animado basado en SVG, introduciendo la hora textual en
un cajetín en la mitad superior, pero dentro de la esfera del reloj
n Recomendación: utilizar la marca text de SVG
w http://www.w3schools.com/svg/svg_text.asp
!
Mejoras adicionales para interesados en profundizar más:
n Añadir una manecilla de décimas de segundo, con un circulo pequeño
en la mitad inferior del reloj, como tienen algunos relojes analógicos
n Añadir a voluntad mas elementos en la esfera del reloj.
© Juan Quemada, DIT, UPM
244
HTML5 CANVAS
©
Juan Quemada, DIT, UPM
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
!
Características
n Tiene resolución fija y no reescala con calidad
w <canvas id=”c1” width=”150” height=”350”> Texto alternativo</canvas>
!
Tutoriales
n
n
n
http://www.w3schools.com/html/html5_canvas.asp
http://www.w3schools.com/tags/ref_canvas.asp
https://developer.mozilla.org/En/Canvas_tutorial
© Juan Quemada, DIT, UPM
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 representación DOM del reloj
w tal y como se ilustra en el ejemplo siguiente
© Juan Quemada, DIT, UPM
247
Reloj CANVAS
©
Juan Quemada, DIT, UPM
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
© Juan Quemada, DIT, UPM
249
CANVAS:
Reloj animado
©
Juan Quemada, DIT, UPM
250
WebGL: Web en 3D
http://www.chromeexperiments.com/webgl
© Juan Quemada, DIT, UPM
251
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
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 Recomendación: 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 más:
n Añadir una manecilla de décimas de segundo, con un circulo pequeño
en la mitad inferior del reloj, como tienen algunos relojes analógicos
n Añadir a voluntad mas elementos en la esfera del reloj.
© Juan Quemada, DIT, UPM
253
Aplicaciones FirefoxOS
©
Juan Quemada, DIT, UPM
254
FirefoxOS
FirefoxOS es el nuevo SO
n
para móviles y tabletas
w Desarrollado por la Fundación Mozilla
!
Sus aplicaciones se programan en
n
HTML5, CSS y Javascript
!
Recursos y tutoriales
n
n
n
n
https://marketplace.firefox.com/developers/docs/firefox_os
https://marketplace.firefox.com/developers/docs/quick_start
https://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicaciones
https://developer.mozilla.org/en-US/Apps/Reference
© Juan Quemada, DIT, UPM
255
Apps FirefoxOS
Aplicaciones para instalar en móviles y tabletas
n
Funcionando con o sin conexión a Internet
w Construidas con tecnologías Web: URLs, HTTP, HTML, CSS, JavaScript, ...
n
También pueden instalarse en PCs o navegadores
!
Tipos de WebApps Firefox OS
n
n
hosted:
alojadas en un servidor
packaged: se descargan empaquetadas
w Hay tres tipos
n
n
n
Plain: aplicaciones Web convencionales
Certified: con acceso a algunos elementos restringidos
Privileged: con acceso a todos los recursos del móvil
© Juan Quemada, DIT, UPM
256
Hosted Apps
Webapps publicadas en modo ejecutable en un servidor Web
n
n
Pueden ejecutarse desde un navegador
Además de ser publicadas en una tienda a través de su URL
w para su instalación en un dispositivo FirefoxOS
n
Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps
!
Características
n
n
Necesitan conexión a Internet para ser ejecutadas
Solo puede haber una hosted WebApp por dominio Web
!
Se gestionan a través del objeto predefinido navigator.mozApps
n
con métodos install(....) o checkInstalled(....)
© Juan Quemada, DIT, UPM
257
Packaged WebApps
Webapps empaquetadas en un fichero ZIP
n
Pueden ser publicadas en una tienda
w para su instalación 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 conexión a Internet
!
Se instalan a través del objeto predefinido navigator.mozApps
n
con método installPackage(....)
© Juan Quemada, DIT, UPM
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
serán más o menos populares
w dependiendo de la aceptación de los usuarios
n
serán más o menos seguras
w dependiendo del control de la seguridad realizado
!
Market places con apps de Mozilla
n
https://marketplace.firefox.com
© Juan Quemada, DIT, UPM
259
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
260
Reloj SVG como App FirefoxOS
©
Juan Quemada, DIT, UPM
261
Reloj SVG como App
Incluimos el reloj SVG como
n
n
hosted App
packaged App
!
!
!
!
Ambas están publicadas en
n
Google Drive de asignatura
w https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/
© Juan Quemada, DIT, UPM
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
Después se arranca (Start Simulator) y se selecciona la versión 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
© Juan Quemada, DIT, UPM
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 botón de instalar
6. Aplicación
instalada
4. clicar para
confirmar instalación
1. clicar para desplegar el navegador
y poder instalar la hosted App
© Juan Quemada, DIT, UPM
4. clicar para
volver a escrit¡orio
264
Reloj SVG: hosted App
Para crear una hosted App con
Reloj SVG se debe añadir a
clock.htm:
n
Iconos
w que se mostrarán en el escritorio
n
Instalador
w de la WebApp en el escritorio
n
Manifiesto
w con información de instalación
n
El ejemplo suministrado incluye
además estilos y tipografías
© Juan Quemada, DIT, UPM
265
manifest.webapp
Fichero en formato JSON (JavaScript Object Notation)
n
Con información de instalación, recursos, diseñador, …
n Los URLs son relativos con path absoluto
JSON es un formato muy habitual para manifiestos
versión
nombre que aparece en el escritorio
descripción para tienda
URL de WebApp en servidor
iconos escritorio
equipo/empresa desarrolladora
© Juan Quemada, DIT, UPM
266
install.html
© Juan Quemada, DIT, UPM
267
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 botón de instalar
6. Aplicación
instalada
4. clicar para
confirmar instalación
1. clicar para desplegar el navegador
y poder instalar la hosted App
© Juan Quemada, DIT, UPM
4. clicar para
volver a escrit¡orio
268
Reloj SVG: packaged App
Componentes
n
Instalador
w de la WebApp en el escritorio
n
Manifiesto
w con información de instalación del
paquete
n
App empaquetada
w Zip con todos los ficheros de la App
los mismos ficheros de la hosted App
n Salvo manifiesto: URLs relativos
w OJO: Los ficheros deben empaquetarse
sin más, sin estar en ningún directorio
n
© Juan Quemada, DIT, UPM
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 están 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)
© Juan Quemada, DIT, UPM
270
index.html
© Juan Quemada, DIT, UPM
271
Instalar packed App en simulador FirefoxOS
2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/
3. clicar en botón de instalar
6. Aplicación
instalada
1. clicar para desplegar el navegador
y poder instalar la hosted App
4. clicar para
confirmar instalación
© Juan Quemada, DIT, UPM
4. clicar para
volver a escrit¡orio
272
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
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.
© Juan Quemada, DIT, UPM
274
Geolocalización en HTML5
©
Juan Quemada, DIT, UPM
275
Geolocalización y Sensores
HTML5 puede soportar geolocalización
n En todo tipo de clientes
w PCs, móviles tabletas, .....
!
El interfaz de geolocaclización
n da acceso tambien a otros sensores
w Brujula, acelerometro, .....
©
Juan Quemada, DIT, UPM
276
Geolocalización
La geolocalización se realiza siguiendo jerarquia de consultas
n GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .....
w Se devuelve la respuesta más precisa
!
La geolocalización está accesible en del objeto navigator.geolocation
n con método getCurrentPosition(successFunction, errorFunction)
w Permite conocer
n
n
n
Latitud y longitud en formato decimal
Altitud y precisión de la altitud
Dirección y velocidad
!
Norma y tutoriales
n
n
n
http://dev.w3.org/geo/api/spec-source.html
http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
http://code.google.com/apis/maps/index.html
©
Juan Quemada, DIT, UPM
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" />
<script type="text/javascript">
!
!
!
!
!
!
if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { alert('Geolocation is not supported in this browser.'); }
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }
</script>
</head>
<body>
<p>If your browser supports Geolocation, you should get an alert with your coordinates.</p>
<p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a
href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How
to use the W3C Geolocation API"</a>.
</body>
</html>
© Juan Quemada, DIT, UPM
278
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
279
Aplicación HTML5 geolocalizada en
Google Maps
©
Juan Quemada, DIT, UPM
280
Geolocalización con gmaps.js
Aplicacion de geolocalización
n Carga un mapa centrado en nuestra posición
w que se indica con un marcador
!
Usamos librería gmaps.js para acceso a Google Maps
n librería muy potente y sencilla de utilizar
w http://hpneo.github.io/gmaps/
n
n
Se recomienda consultar documentación y ejemplos
La librería de Google es bastante mas compleja
!
Se añade al mapa un manejador de eventos click/tap
n que calcula la ruta hasta el punto indicado
© Juan Quemada, DIT, UPM
281
Geo-mapa
©
Juan Quemada, DIT, UPM
282
Geo-mapa
©
Juan Quemada, DIT, UPM
283
Geo-mapa
©
Juan Quemada, DIT, UPM
284
Estilo CSS multi-terminal
©
Juan Quemada, DIT, UPM
285
Final del tema
Muchas gracias!
©
Juan Quemada, DIT, UPM
286
Ejercicio avanzado opcional
Modificar la aplicación con geolocalización 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
n
en vez de cargar un mapa limpio, como hace ahora
Además se debe incluir un boton de inicializar
w que cargue un mapa limpio centrado en nuestra posición
n
colocando un marcador en dicho punto
!
Recomendación: guardar la ruta como un array de posiciones
n donde cada posición 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
© Juan Quemada, DIT, UPM
287
Ejercicio opcional avanzado MOOC
Modificar la aplicación con geolocalización 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
n
en vez de cargar un mapa limpio, como hace ahora
Además se debe incluir un botón de inicio
w que cargue un mapa limpio centrado en nuestra posición
n
colocando un marcador en dicho punto
!
Recomendación: guardar la ruta como un array de posiciones
n donde cada posición 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 público de Google Drive
w y comprobar que se instala correctamente en el simulador de FirefoxOS
© Juan Quemada, DIT, UPM
288
Ejercicio entregable
Modificar la aplicación con geolocalización en Google Maps, añadiendo un botón 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 visualización.
Recomendación: 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
aplicación, contendrá el origen de la ruta para cuando haya que compactar.
Al pulsar "compactar" se renderiza el mapa limpio, se pondrán los marcadores
inicial (variable nueva) y final (“lat”, “long”) y se mostrará la ruta entre ellos.
Alojar el script como un recurso público en un servidor en la nube (Google Drive)
para que pueda accederse por cualquier usuario desde cualquier navegador.
© Juan Quemada, DIT, UPM
289