Tipo Number de JavaScript
Juan Quemada, DIT, UPM
Sunday, February 23, 14
Nmeros: tipo number
Los nmeros se representan con literales de
n
Enteros:
32
w Entero mximo: 9007199254740992
n
n
Decimales:
Coma flotante:
32.23
3.2e1 (3,2x10)
w Rango real: 1,797x10^308 --- 5x10^-324
Todos los nmeros son del tipo number
Todos los nmeros se representan igual
internamente
n
coma flotante de doble precisin (64bits)
El tipo number incluye 2 valores especiales
n
Infinity: representa desbordamiento
n
NaN: representa resultado no nmerico
10 + 4
10 - 4
10 * 4
10 / 4
10 % 4
// sumar
// restar
// multiplicar
// dividir
// operacin 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
Sunday, February 23, 14
=> 14
=> 6
=> 40
=> 2.5
=> 2
Conversin a enteros
'67' + 13
Cuando JavaScript calcula expresiones
n conviendo tipos segn necesita
w segn las prioridades de operadores
Conversin a entero (o real)
n boleano: true a 1, false a 0
n String: Convierte nmero a valor o NaN
n null: a 0,
undefined: a NaN
Juan Quemada, DIT, UPM
Sunday, February 23, 14
=> 6713
+'67'
+ 13 => 80
+'6.7e1' + 13 => 80
'xx' + 13
+'xx' + 13
=> 'xx13'
=> NaN
13 + true
13 + false
=> 14
=> 13
. []
new
()
++ -! ~
+ delete
typeof void
* / %
+
+ << >> >>>
< <= > >=
instanceof in
== != === !==
&
^
|
&&
||
?:
=
OP=
,
Acceso a propiedad o invocar mtodo; ndice a array
Crear objeto con constructor de clase
Invocacin de funcin/mtodo o agrupar expresin
Pre o post auto-incremento; pre o post auto-decremento
Negacin lgica (NOT); complemento de bits
Operador unitario, nmeros. signo positivo;
signo negativo
Borrar propiedad de un objeto
Devolver tipo; valor indefinido
Nmeros.
Multiplicacin;
divisin; modulo (o resto)
Concatenacin de string
Nmeros. 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
Operacin lgica y (AND)
Los operadores estn ordenados
Operacin lgica o (OR)
verticalmente por prioridades.
Asignacin condicional
Los ms altos se evalan antes.
Asignacin de valor
Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluacin mltiple
Operadores JavaScript
Juan Quemada, DIT, UPM
Sunday, February 23, 14
Modulo Math
El Modulo Math contiene
n constantes y funciones matemticas
Constantes
n Nmeros: 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()
Mas info:
[Link]
[Link] => 3.141592653589793
Math.E => 2.718281828459045
// numero aleatorio entre 0 y 1
[Link]() => 0.7890234
[Link](3,2)
[Link](9)
[Link](2,1,9,3) => 1 // nmero mnimo
[Link](2,1,9,3) => 9 // nmero mximo
[Link](3.2)
[Link](3.2)
[Link](3.2)
=> 3
=> 4
=> 3
[Link](1)
=> 0.8414709848078965
[Link](0.8414709848078965) => 1
Juan Quemada, DIT, UPM
Sunday, February 23, 14
=> 9 // 3 al cuadrado
=> 3 // raz cuadrada de 3
La Clase Array de JavaScript
Juan Quemada, DIT, UPM
Sunday, February 23, 14
Arrays
Array: lista ordenada de
n elementos heterogneos
w accesibles a travs de un ndice
n de 0 a length-1
Tamao mximo: 2^32-2 elementos
Elementos
n a[0] es el primer elemento
n ........
n a[[Link]-1] ltimo elemento
Juan Quemada, DIT, UPM
Sunday, February 23, 14
var x = [1, 2, 3];
a[0]
a[1]
a[2]
=> 1
=> 2
=> 3
[Link]
=> 3
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
Sunday, February 23, 14
Tamao del Array
Los arrays son dinmicos
n pueden crecer y encoger
var a = [1, 3, 1];
a;
=> [1, 3, 1]
Asignar un elemento fuera de rango
n incrementa el tamao del array
a[4] = 2;
a;
=> 2
=> [1, 3, 1, , 2]
El tamao del array se puede modificar
n con la propiedad [Link]
w [Link] = 3;
n modifica el tamao del array
n Que pasa a ser 4
// el array se reduce
[Link] = 2 => 2
Juan Quemada, DIT, UPM
Sunday, February 23, 14
=> [1, 3]
Mtodos de Array
Array hereda mtodos de su clase
var a = [1, 5, 3];
sort(): devuelve array ordenado
[Link]()
=> [1, 3, 5]
[Link]()
=> [5, 3, 1]
reverse(): devuelve array invertido
push(e1, .., en)
n aade e1, ..,en al final del array
pop()
n extrae ltimo elemento del array
[Link](false)
a
=> 4
=> [5, 3, 1, false]
[Link]()
a
=> false
=> [5, 3, 1]
Juan Quemada, DIT, UPM
Sunday, February 23, 14
10
JSON - JavaScript Objet Notation
Juan Quemada, DIT, UPM
Sunday, February 23, 14
11
JSON
JSON: formato textual de representacin de tipos y objetos JavaScript
n [Link]
Un objeto JavaScript se transforma a un string JSON con
n [Link](object)
Un string JSON se transforma en el objeto original con
n [Link](string_JSON)
var x = {a:1, b:{y:[false, null, ""]}},
y,
z;
y = [Link](x);
=> '{"a":1, "b ":{"y ":[false, null, ""]}}'
z = [Link](y);
=> {a:1, b:{y:[false, null, ""]}}
Juan Quemada, DIT, UPM
Sunday, February 23, 14
12
Serializacin de datos
Serializacin:
n transformacin reversible de un tipo u objeto (en
memoria) en un string equivalente
La serializacin es un formato de intercambio de datos
n
n
n
Almacenar datos en un fichero
Enviar datos a travs de una lnea de comunicacin
Paso de parmetros en interfaces REST
En JavaScript se realiza desde ECMAScript 5 con
n
[Link](...) y [Link](...)
Otros formatos de serializacin: XML, HTML, XDR(C), ...
n XML est siendo desplazados por JSON
w Hay bibliotecas de JSON para los lenguajes ms importantes
Juan Quemada, DIT, UPM
Sunday, February 23, 14
13
Caractersticas de JSON
JSON puede serializar
n
objetos, arrays, strings, nmeros finitos, true, false y null
w NaN, Infinity y -Infinity se serializan a null
w Objetos Date se serializan a formato ISO
n
la reconstruccin devuelve un string y no el objeto original
No se puede serializar
w Funciones, RegExp, errores, undefined
Admite filtros para los elementos no soportados
n
ver doc de APIs JavaScript
[Link](new Date())
=> '"2013-08-08T[Link].751Z"'
[Link](NaN)
=> 'null'
[Link](Infinity)
=> 'null'
Juan Quemada, DIT, UPM
Sunday, February 23, 14
14
HTML5 SVG - Scalable Vector
Graphics
Juan Quemada, DIT, UPM
Sunday, February 23, 14
15
SVG: Scalable Vector Graphics
Formato de representacin de grficos vectoriales
n Pueden cambiar de tamao sin perdida de calidad
Recursos
n Galeria Wikimedia: [Link]
n Editor SVG: [Link]
n Tutorial: [Link]
[Link]
Sunday, February 23, 14
[Link]
16
Ejemplo Ajuste SVG
Ajuste SVG ilustra como reescalar una imagen SVG
n Las imagenes en SVG reescalan sin perder calidad
w porque son grficos vectoriales
w tutorial: [Link]
n Las imgenes GIT, JPEG o PNG no reescalan bien
w porque tienen una resolucin determinada
Esta WebApp tiene 2 botones: + y -
Cada vez que pulsamos uno de estos botones
n el tamao de la imagen debe aumentar o disminuir un 10%
w segn pulsemos + y -
Juan Quemada, DIT, UPM
Sunday, February 23, 14
17
Ejemplo SVG
Juan Quemada, DIT, UPM
Sunday, February 23, 14
18
Ejempo Reloj SVG
Reloj SVG genera un reloj sencillo con SVG
n El reloj se compone de
w Un crculo negro
w Tres lineas para las manecillas del reloj
SVG puede animarse con javaScript
n modificando la representacin DOM del reloj
w tal y como se ilustra en el ejemplo siguiente
Se aade estilo CSS
n Mejora el aspecto
n Lo adapta al tamao de la pantalla
Juan Quemada, DIT, UPM
Sunday, February 23, 14
19
Reloj SVG
Juan Quemada, DIT, UPM
Sunday, February 23, 14
20
Animar las manecillas del reloj
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
Sunday, February 23, 14
21
SVG: Reloj animado
Juan Quemada, DIT, UPM
Sunday, February 23, 14
22
SVG: Reloj con estilo CSS
Juan Quemada, DIT, UPM
Sunday, February 23, 14
23
Objetos SVG
Los objetos SVG se pueden definir tambin como objetos externos en XML
n Para importarlos con:
w <img>, <object>, <embed>, <iframe>
n Tutorial: [Link]
24
Sunday, February 23, 14
HTML5 CANVAS
Juan Quemada, DIT, UPM
Sunday, February 23, 14
25
Mapas de bits con CANVAS
CANVAS define un mapa de bits
n Se define en HTML con la marca <canvas>
w Permite programar en Javascript
n aplicaciones interactivas, juegos, 2D, 3D, ....
n Esta soportado en los principales navegadores
Caractersticas
n Tiene resolucin fija y no reescala con calidad
w <canvas id=c1 width=150 height=350> Texto alternativo</canvas>
Tutoriales
n
n
n
[Link]
[Link]
[Link]
Juan Quemada, DIT, UPM
Sunday, February 23, 14
26
Ejempo Reloj CANVAS
Reloj CANVAS es similar al reloj programado con SVG
n Pero programado en el canvas
w Tiene el mimos circulo y manecillas del de SVG
SVG puede animarse con javaScript
n modificando la representacin DOM del reloj
w tal y como se ilustra en el ejemplo siguiente
Juan Quemada, DIT, UPM
Sunday, February 23, 14
27
Reloj CANVAS
Juan Quemada, DIT, UPM
Sunday, February 23, 14
28
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
Sunday, February 23, 14
29
CANVAS:
Reloj animado
Juan Quemada, DIT, UPM
Sunday, February 23, 14
30
WebGL: Web en 3D
[Link]
Juan Quemada, DIT, UPM
Sunday, February 23, 14
31
Audio, Video e iFrames en HTML5
Juan Quemada, DIT, UPM
Sunday, February 23, 14
32
Audio y Video en HTML5
Las marcas audio y video de HTML5
n Permiten incluir audio y video en pginas Web
w [Link]
Juan Quemada, DIT, UPM
Sunday, February 23, 14
33
Video: formatos
Contenedor OGG
n Video: Theora (VP7), Audio: Vorbis
w Calidad menor
Contenedor MP4
n Video: H264, Audio: ACC
w Existen Patentes
Contenedor WebM
n Video: VP8, Audio: Vorbis
Juan Quemada, DIT, UPM
Sunday, February 23, 14
34
iFrame
n marco de navegacin 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
Sunday, February 23, 14
35
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 pginas en otros frames que provienen del mismo origen
Esto evita en el ejemplo anterior que el juego
w Y robe o modifique informacin o datos del usuario en la pgina externa
Origen
n
protocolo, servidor y puerto del URL
La restriccin de pertenecer al mismo origen
n
Solo afecta a las pginas Web
w Los scripts JavaScript no estn afectados y pueden venir de otro servidor
As es posible hacer mash-ups seguros
n
de contenidos que no esten en nuestra cadena de confianza
Juan Quemada, DIT, UPM
Sunday, February 23, 14
36
Final del tema
Muchas gracias!
Juan Quemada, DIT, UPM
Sunday, February 23, 14
37
