Mashup con Javascript

Transcript

1 Mashup con Javascript

2 Browser components UI: address bar, back/forward button, bookmarking menu etc Every part of the browser display except the main window The browser engine - marshalls the actions between the UI and the rendering engine.

3 Browser components Rendering engine display the requested content. Networking - used for network calls, like HTTP requests. UI backend - used for drawing basic widgets like combo boxes and windows. JavaScript interpreter. Data storage.

4 Webkit DOM tree = HTML ements objects Render tree = styling information together with visual instructions in the HTML. Set of rectangles with visual attributes, like color and dimensions Layout = assign coordinate to each rectangle Painting = Objects are rendered by UI backend

5 Example DOM and render tree

6 Browser Object model Rappresentazione ad oggetti del Browser Permette di interagire con il browser via programma Window (rappresenta una finestra nel browser) Browser Navigator (info sul browser) History (Storia del broswer) Location (Info URL corrente, no posizione!) Document (Documento caricato nella finestra)

7 DOM hierarchy

8 Metodi oggetto window (w3c)

9 Oggetto window in Chrome

10 window.screen

11 L oggetto navigator

12 Ed ancora

13 Oggetti DOM Integrati o interni Array, Date, String,.. Definiti dall utente

14 Oggetti JS Proprietà JS Date,Math,.. XMLHttpRequest Browser (BOM) Window, Navigator,.. tipololgie Oggetto possiede può generare Metodi Eventi Documento (DOM) Tag htm oggetto

15 Oggetti Object Array Boolean Date Math (oggetto di sistema, no «new Math» ) Number String RegEx

16 Esempio: Date Date è il nome di una funzione....che restituisce una stringa new Date() restituisce un oggetto

17 Altro esempio: Number Come per Date

18 Math Math è un oggetto Creato dalla funzione Object Possiamo creare un istanza di Math?...

19 Access elementi del documento

20

21 Eventi

22 Eventi

23 Eventi

24 Esempi

25 Oggetti in JS Un oggetto è una array associativo Chiave = Proprietà o nome metodo Vari modi per creare un oggetto Letterali Elencando le proprietà Factory pattern Constructor pattern Prototype pattern

26 Lista di coppie (nome,valore) Oggetti letterali

27 Elencare le proprietà Oggetto vuoto Aggiungo proprietà nome Aggiungo proprietà cognome Struttura dell oggetto proto : oggetto «modello», settato mediante attributo prototype delle funzioni (vedi dopo)

28 Factory pattern Definisco una funzione che crea un oggetto Attacco proprietà all oggetto creato Restituisco l oggetto creato

29 Contructor pattern Definisco una funzione che fungerà da costruttore L oggetto è creato dal chiamante Uso this per aggiungere proprietà all oggetto creato Nota: il costruttore non restituisce nulla

30 Prototype pattern Prototype è una proprietà delle funzioni Se la funzione è usata come costruttuore, allora tutte le istanze di oggetti vedono lo stesso prototype (esso è cioè condiviso) Nell esempio, nome e cognome sono valori di default Come faccio per sovrascriverli?

31 Altro esempio Prototype pattern

32 Catena prototype ed ereditarità Nella ricerca di una proprietà si risale dall oggetto in su, seguendo la catena dei prototipi Metodi ereditati da Object

33 Esempio (estendere un oggetto) [1,2,3].sum() => 6

34 Esempio: prototipo di String

35 Altro esempio:l oggetto Math

36 AJAX Asynchronous JavaScript And XML. JS comunica direttamente con il server usando l oggetto JavaScript XMLHttpRequest Per motivi di sicurezza le richieste possono essere inviate solaente allo stesso dominio dal quale è stata caricata la pagina

37 Architecture AJAX allows to reduce the granularity of data exchanged A single element instead of the entire document

38 XMLHttpRequest specification

39 XMLHttpRequest in Crome

40 Esempio Caricare photo da Flickr..