Ejemplo de un Cronómetro. Juan Quemada, DIT, UPM

Transcripción

1 Ejemplo de u Croómetro Jua Quemada, DIT, UPM 1

2 Croómetro WebApp similar a u croómetro digital Cueta décimas de segudo (100 miliseg.) El cotador se iicializa co 0,0 segudos w.tofixed(1) formatea co 1 decimal Tiee 2 botoes arracar/parar: arraca o para la cueta w a partir del valor e que quedo arraca si croómetro parado para si croómetro cotado iicializar: poe el cotador a 0,0 La libreria zepto.js utilizada e los temas siguietes equivale a jquery 2.0 Los ejemplos puede sustituir zepto por jquery y fucioará igual w Jua Quemada, DIT, UPM 2

3 Croómetro Jua Quemada, DIT, UPM 3

4 DOM como almacé de datos El avegador guarda e documet la págia HTML que está mostrado documet es u objeto JavaScript co propiedades w que cotiee todos los elemetos de la págia Las propiedades DOM so variables: src, value, ierhtml,... dode la iformació se puede guardar y recuperar w DOM solo cotiee strigs y todo debe covertirse a/de strig Los elemetos de DOM se puede utilizar como variables Hemos utilizado el elemeto <spa id="croo"> w para almacear el cotador de decimas de segudo Jua Quemada, DIT, UPM 4

5 Memoria local e HTML5 Jua Quemada, DIT, UPM 5

6 Almaceamieto de datos e cliete HTML5 implemeta uevos tipos de almaceamieto de variables Secillas y eficietes de utilizar desde Javascript w Defiició: Variables locales los datos se guarda permaetemete, hasta que se borra Variables de sesió Los datos solo se guarda solo durate la sesió w Comiezo de sesió: apertura de avegador o pestaña w Fial de sesió: cierre de avegador o pestaña Jua Quemada, DIT, UPM 6

7 Variables locales y de sesió So propiedades de los objetos localstorage y sessiostorage solo puede coteer strigs, como por ejemplo w localstorage.usuario = Pedro Pérez ; w sessiostorage.apellido = Pérez ; Las variables locales está asociadas a protocolo, domiio y puerto u programa solo puede acceder a propiedades de local/sessiostorage w creadas por otros programas cargados del mismo servidor Same origi policy Seguridad: u programa solo cofia e programas del mismo servidor Modularidad: cada servidor tiee u espacio de ombres diferete Jua Quemada, DIT, UPM 7

8 Ejemplo de localstorage Cada usuario que acceda a esta págia tedrá ua cueta diferete La variable está e su avegador Jua Quemada, DIT, UPM 8

9 Croómetro co memoria Nueva versió del croómetro co localstorage así matiee la cueta de décimas de segudos w etre usos sucesivos de la aplicació El croómetro utiliza ahora la variable localstorage.c w para guardar la cueta de segudos Debemos iicializar localstorage.c co parámetro por defecto para cuado se ejecute por primera vez Como la iformació se guarda ahora e localstorage y o e DOM hay que actualizar primero localstorage y luego mostrar e DOM Jua Quemada, DIT, UPM 9

10 Croómetro: localstorage Jua Quemada, DIT, UPM 10

11 JavaScript y HTML5: iframes y origi policy Jua Quemada, DIT, UPM 11

12 iframe Importa u recurso Web w e u marco de avegació idepediete U iframe crea ua caja de area segura dode poder importar objetos exteros iframe Ejemplo: elaza u juego e otro servidor El iframe evita que se itroduzca virus w Acceso JavaScript limitado a caja de area Jua Quemada, DIT, UPM 12

13 Seguridad Web: Same Origi Policy La seguridad se cotrola e las aplicacioes JavaScript Permitiedo que u programa JavaScript e u iframe solo acceda w Al árbol DOM de la págia pricipal si proviee del mismo orige Esto evita e el ejemplo aterior que el juego w robe o modifique iformació o datos del usuario e la págia extera Orige protocolo, servidor y puerto del URL La restricció de perteecer al mismo orige Solo afecta al recurso pricipal: págia Web, recurso, w Los scripts o los estilos o está afectados y puede veir de otro servidor Así es posible hacer mash-ups seguros de coteidos que o esté e uestra cadea de cofiaza Jua Quemada, DIT, UPM 13

14 Ejemplo co iframes Jua Quemada, DIT, UPM 14

15 Flexbox Flexbox permite u diseño resposivo fácil y flexible: display: flex; flex-wrap: wrap; coloca cada iframe a la derecha del aterior. Al llegar al limite pasa a la líea siguiete. Jua Quemada, DIT, UPM 15

16 Código Jua Quemada, DIT, UPM 16

17 JSON: JavaScript Object Notatio Jua Quemada, DIT, UPM 17

18 JSON JSON: formato textual de represetació de tipos y objetos JavaScript U objeto JavaScript se trasforma a u strig JSON co JSON.strigify(object) U strig JSON se trasforma e el objeto origial co JSON.parse(strig_JSON) var x = {a:1, b:{y:[false, ull, ""]}}, y, z; y = JSON.strigify(x); => '{"a":1, "b":{"y":[false, ull, ""]}}' z = JSON.parse(y); => {a:1, b:{y:[false, ull, ""]}} Jua Quemada, DIT, UPM 18

19 Serializació de datos Serializació: trasformació reversible de u tipo u objeto (e memoria) e u strig equivalete La serializació es u formato de itercambio de datos Almacear datos e u fichero Eviar datos a través de ua líea de comuicació Paso de parámetros e iterfaces REST E JavaScript se realiza desde ECMAScript 5 co JSON.strigify(...) y JSON.parse(...) Otros formatos de serializació: XML, HTML, XDR(C),... Estos formatos está siedo desplazados por JSON, icluso XML w Hay bibliotecas de JSON para los leguajes más importates Jua Quemada, DIT, UPM 19

20 Características de JSON JSON puede serializar objetos, arrays, strigs, úmeros fiitos, true, false y ull w NaN, Ifiity y -Ifiity se serializa a ull w Objetos Date se serializa a formato ISO la recostrucció devuelve u strig y o el objeto origial No se puede serializar w Fucioes, RegExp, errores, udefied Admite filtros para los elemetos o soportados ver doc de APIs JavaScript JSON.strigify(ew Date()) JSON.strigify(NaN) JSON.strigify(Ifiity) => '" T17:13:10.751Z"' => 'ull' => 'ull' Jua Quemada, DIT, UPM 20

21 JSON e ejemplo co iframes, array y for Si queremos almacear e el avegador el array de urls para que o se pierda los urls itroducidos, hay que guardarlo serializado co JSON e localstorage Jua Quemada, DIT, UPM 21

22 Fial del tema Muchas gracias! Jua Quemada, DIT, UPM 22