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:
http://www.w3schools.com/jsref/jsref_obj_math.asp

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)

Math.min(2,1,9,3) => 1 // nmero mnimo

Math.max(2,1,9,3) => 9 // nmero mximo
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

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[a.length-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

a.length

=> 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 a.length
w a.length = 3;
n modifica el tamao del array
n Que pasa a ser 4

// el array se reduce
a.length = 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

a.sort()

=> [1, 3, 5]

a.reverse()

=> [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

a.push(false)
a

=> 4
=> [5, 3, 1, false]

a.pop()
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 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

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

JSON.stringify(...) y JSON.parse(...)

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

JSON.stringify(new Date())

=> '"2013-08-08T17:13:10.751Z"'

JSON.stringify(NaN)

=> 'null'

JSON.stringify(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: 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: http://www.w3schools.com/svg/

http://commons.wikimedia.org/wiki/File:Compass.svg

Sunday, February 23, 14

http://commons.wikimedia.org/wiki/SVG_examples
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: http://www.w3schools.com/svg/
n Las imgenes GIT, JPEG o PNG no reescalan bien
w porque tienen una resolucin determinada
Esta WebApp tiene 2 botones: + y -
Cada vez que pulsamos uno de estos botones
n el tamao de la imagen debe aumentar o disminuir un 10%
w segn pulsemos + y -
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: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html

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

https://developer.mozilla.org/En/Canvas_tutorial
http://www.desarrolloweb.com/manuales/manual-canvas-html5.html
http://www.html5canvastutorials.com/
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
http://www.chromeexperiments.com/webgl

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 http://www.w3schools.com/html/html5_video.asp

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