Mod7 JavaScript 5

Juan Quemada, DIT, UPM

Tipo Number de JavaScript

1

Sunday, February 23, 14


Nmeros: tipo numberLos nmeros se representan con literales den Enteros: 32

w Entero mximo: 9007199254740992n Decimales: 32.23n Coma flotante: 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 internamenten coma flotante de doble precisin (64bits)

El tipo number incluye 2 valores especialesn Infinity: representa desbordamienton NaN: representa resultado no nmerico

10 + 4 => 14 // sumar10 - 4 => 6 // restar10 * 4 => 40 // multiplicar10 / 4 => 2.5 // dividir10 % 4 => 2 // operacin resto

//decimales dan error de redondeo 0.1 + 0.2 => 0,3000000000004

3e2 => 3003e-2 => 0,03

+10/0 => Infinity //desborda-10/0 => -Infinity //desborda

5e500 => Infinity //desborda

2



Conversin a enteros

Cuando JavaScript calcula expresionesn conviendo tipos segn necesita

w segn las prioridades de operadores

Conversin a entero (o real)n boleano: true a 1, false a 0n String: Convierte nmero a valor o NaNn null: a 0, undefined: a NaN

'67' + 13 => 6713

+'67' + 13 => 80+'6.7e1' + 13 => 80

'xx' + 13 => 'xx13'+'xx' + 13 => NaN

13 + true => 1413 + false => 13

3



Los operadores estn ordenados verticalmente por prioridades. Los ms altos se evalan antes.

Operadores JavaScript

. [] Acceso a propiedad o invocar mtodo; ndice a arraynew 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 negativodelete Borrar propiedad de un objetotypeof void 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 igualinstanceof in objeto pertenece a clase?; propiedad pertenece a objeto?== != === !== Igualdad; desigualdad; identidad; no identidad& Operacion y (AND) de bits^ Operacion exclusivo (XOR) de bits| Operacion (OR) de bits&& Operacin lgica y (AND)|| Operacin lgica o (OR)?: Asignacin condicional= Asignacin de valorOP= Asig. con operacin: += -= *= /= %= = >>>= &= ^= |=, Evaluacin mltiple

4



Modulo MathEl Modulo Math contienen constantes y funciones matemticas

Constantesn Nmeros: E, PI, SQRT2, ...n ...

Funcionesn 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.141592653589793Math.E => 2.718281828459045

// numero aleatorio entre 0 y 1Math.random() => 0.7890234

Math.pow(3,2) => 9 // 3 al cuadradoMath.sqrt(9) => 3 // raz cuadrada de 3

Math.min(2,1,9,3) => 1 // nmero mnimoMath.max(2,1,9,3) => 9 // nmero mximo

Math.floor(3.2) => 3 Math.ceil(3.2) => 4Math.round(3.2) => 3

Math.sin(1) => 0.8414709848078965Math.asin(0.8414709848078965) => 1

5



La Clase Array de JavaScript

6



Arrays

Array: lista ordenada den elementos heterogneos

w accesibles a travs de un ndicen de 0 a length-1

Tamao mximo: 2^32-2 elementos

Elementosn a[0] es el primer elementon ........n a[a.length-1] ltimo elemento

var x = [1, 2, 3];

a[0] => 1a[1] => 2a[2] => 3

a.length => 3

7



Elementos de un Array

Elementos del array pueden contener cualquier valor u objeton undefinedn otro array n objetosn ...

Indexar elementos que no existenn devuelve undefined

w por ejemplo con ndices mayores que length

var a = [1, undefined, 'a', , [1, 2]];

a[3]; => undefineda[4]; => [1, 2]

a[9]; => undefined

a[4][1]; => 2

8



Tamao del Array

Los arrays son dinmicosn pueden crecer y encoger

Asignar un elemento fuera de rangon incrementa el tamao del array

El tamao del array se puede modificarn con la propiedad a.length

w a.length = 3;n modifica el tamao del array

n Que pasa a ser 4

var a = [1, 3, 1];

a; => [1, 3, 1]

a[4] = 2; => 2a; => [1, 3, 1, , 2]

// el array se reducea.length = 2 => 2

a => [1, 3]

9



Mtodos de Array

Array hereda mtodos de su clase

sort(): devuelve array ordenado

reverse(): devuelve array invertido

push(e1, .., en) n aade e1, ..,en al final del array

pop()n extrae ltimo elemento del array

var a = [1, 5, 3];

a.sort() => [1, 3, 5]

a.reverse() => [5, 3, 1]

a.push(false) => 4a => [5, 3, 1, false]

a.pop() => falsea => [5, 3, 1]

10



JSON - JavaScript Objet Notation

11


JSON: formato textual de representacin de tipos y objetos JavaScriptn http://json.org/json-es.html

Un objeto JavaScript se transforma a un string JSON conn JSON.stringify(object)

Un string JSON se transforma en el objeto original conn JSON.parse(string_JSON)


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, ""]}}

12



Serializacin: n transformacin reversible de un tipo u objeto (en

memoria) en un string equivalente

La serializacin es un formato de intercambio de datosn Almacenar datos en un fichero n Enviar datos a travs de una lnea de comunicacinn Paso de parmetros en interfaces REST

En JavaScript se realiza desde ECMAScript 5 conn 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

Serializacin de datos

13


JSON puede serializarn objetos, arrays, strings, nmeros finitos, true, false y null

w NaN, Infinity y -Infinity se serializan a nullw Objetos Date se serializan a formato ISO

n la reconstruccin devuelve un string y no el objeto originaln No se puede serializar

w Funciones, RegExp, errores, undefined

Admite filtros para los elementos no soportadosn ver doc de APIs JavaScript


Caractersticas de JSON

JSON.stringify(new Date()) => '"2013-08-08T17:13:10.751Z"'

JSON.stringify(NaN) => 'null'

JSON.stringify(Infinity) => 'null'

14



HTML5 SVG - Scalable Vector Graphics

15


Formato de representacin de grficos vectorialesn Pueden cambiar de tamao sin perdida de calidad

Recursosn 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.htmln Tutorial: http://www.w3schools.com/svg/

SVG: Scalable Vector Graphics

http://commons.wikimedia.org/wiki/File:Compass.svghttp://commons.wikimedia.org/wiki/SVG_examples16



Ejemplo Ajuste SVGAjuste SVG ilustra como reescalar una imagen SVGn Las imagenes en SVG reescalan sin perder calidad

w porque son grficos vectorialesw tutorial: http://www.w3schools.com/svg/

n Las imgenes GIT, JPEG o PNG no reescalan bienw porque tienen una resolucin determinada

Esta WebApp tiene 2 botones: + y -

Cada vez que pulsamos uno de estos botonesn el tamao de la imagen debe aumentar o disminuir un 10%

w segn pulsemos + y -

17



Ejemplo SVG

18



Ejempo Reloj SVG

Reloj SVG genera un reloj sencillo con SVGn El reloj se compone de

w Un crculo negrow Tres lineas para las manecillas del reloj

SVG puede animarse con javaScriptn modificando la representacin DOM del reloj

w tal y como se ilustra en el ejemplo siguiente

Se aade estilo CSSn Mejora el aspecton Lo adapta al tamao de la pantalla

19



Reloj SVG

20



Animar las manecillas del relojPara animar las manecillas del reloj n se incluye un script que cada segundo

w recalcula las coordenadas exterioresn de las manecillas del reloj

n El secundero tiene una longitud de 50 pixelsn El minutero tiene una longitud de 40 pixelsn La manecilla horaria de 30 pixels

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

21



SVG: Reloj animado

22



SVG: Reloj con estilo CSS

23


Los objetos SVG se pueden definir tambin como objetos externos en XMLn Para importarlos con:

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

Objetos SVG

24



HTML5 CANVAS

25



CANVAS define un mapa de bitsn Se define en HTML con la marca

w Permite programar en Javascriptn aplicaciones interactivas, juegos, 2D, 3D, ....

n Esta soportado en los principales navegadores

Caractersticasn Tiene resolucin fija y no reescala con calidad

w Texto alternativo

Tutorialesn https://developer.mozilla.org/En/Canvas_tutorialn http://www.desarrolloweb.com/manuales/manual-canvas-html5.htmln http://www.html5canvastutorials.com/

Mapas de bits con CANVAS

26



Ejempo Reloj CANVAS

Reloj CANVAS es similar al reloj programado con SVGn Pero programado en el canvas

w Tiene el mimos circulo y manecillas del de SVG

SVG puede animarse con javaScriptn modificando la representacin DOM del reloj

w tal y como se ilustra en el ejemplo siguiente

27



Reloj CANVAS

28



Animar las manecillas del relojEl script calcula cada segundo las manecillasn una vez calculadas borra el canvas

w y vuelve a dibujar el reloj completon 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 funcionesn x2(tiempo, unidades_por_vuelta, x1, radio)n y2(tiempo, unidades_por_vuelta, y1, radio)

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

29



CANVAS: Reloj animado

30



WebGL: Web en 3D http://www.chromeexperiments.com/webgl

31



Audio, Video e iFrames en HTML5

32



Las marcas audio y video de HTML5n Permiten incluir audio y video en pginas Web

w http://www.w3schools.com/html/html5_video.asp

Audio y Video en HTML5

33



Contenedor OGGn Video: Theora (VP7), Audio: Vorbis

w Calidad menor

Contenedor MP4 n Video: H264, Audio: ACC

w Existen Patentes

Contenedor WebMn Video: VP8, Audio: Vorbis

Video: formatos

34



iFramen marco de navegacin independiente

Un iFrame crea una caja de arena seguran donde poder importar objetos externos

Ejemplo: enlaza un juego en otro servidorn El iFrame evita que se introduzca malvare

w Acceso JavaScript limitado a caja de arena

iFrame

35



Seguridad Web: Same Origin Policy La seguridad se controla en las aplicaciones JavaScriptn Permitiendo que un programa JavaScript en un iFrame solo acceda

w Al arbol DOM de pginas en otros frames que provienen del mismo origenn Esto evita en el ejemplo anterior que el juego

w Y robe o modifique informacin o datos del usuario en la pgina externa

Origenn protocolo, servidor y puerto del URL

La restriccin de pertenecer al mismo origenn 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 segurosn de contenidos que no esten en nuestra cadena de confianza

36



Final del temaMuchas gracias!

37


Date post:	17-Dec-2015
Category:	Documents
Upload:	antonio-cachuan
View:	38 times
Download:	1 times

Mod7 JavaScript 5

Documents