Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

Transcript

1 Javascript Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it

2 Indice Introduzione Oggetti DOM (document object model) Window gestione della barra di stato, gestione delle finestre, Gestione delle barre di scorrimento Oggetto document Modifica del colore di sfondo Metodo getelementbyid Attributo style Navigator History Elementi di Informatica e Reti di Calcolatori 2

3 Oggetti Oggetto: identifica un elemento memorizzato in memoria, contenente degli attributi e sul quale possono essere invocati (eseguiti) diversi metodi. Gli attributi (proprietà) determinano lo stato interno dell oggetto (possono essere altri oggetti) I metodi sono procedure che operano sugli attributi Elementi di Informatica e Reti di Calcolatori 3

4 DOM Window Document history navigator Elementi di Informatica e Reti di Calcolatori 4

5 DOM Oggetto window Descrizione rappresenta la finestra del browser e fornisce accesso agli oggetti document, history e location document rappresenta l oggetto XHTML contenuto nella finestra. Fornisce accesso a ogni elemento nel documento e ne consente la relativa modifica. history Tiene traccia dei siti visitati dall utente, e fornisce il modo di spostarsi tra queste finestre navigator Contiene delle informazioni sul browser in specifici attributi Elementi di Informatica e Reti di Calcolatori 5

6 Window L oggetto window rappresenta una finestra aperta nel browser Fornisce una serie di metodi e di attributi Esempi attributi outerheight: contiene l altezza della finestra outerwidth: contiene la larghezza della finestra Come accedere: window.outerwidth Esempi di metodi alert(); mostra un messaggio di alert con il bottone di ok close(): chiude la finestra corrente open(): apre una nuova finestra Come eseguire metodo: window.alert(..); Elementi di Informatica e Reti di Calcolatori 6

7 Window: gestione finestre Spesso può essere necessario inserire delle finestre di pop-up nella nostra pagina window.open("indirizzo della nuova finestra", "nome della nuova finestra", opzioni ); l'indirizzo della nuova finestra contiene l indirizzo della pagina di pop up che deve essere aperta Il nome della finestra è opzionale e permette di richiamare la finestra Opzioni permettono di modificare la visualizzazione <script> // changing bar states on the existing window </script> window.alert("sto per aprire la finestra di pop up"); window.open("finestra2.html","pagina_di_prova",'width=200,height=100'); Elementi di Informatica e Reti di Calcolatori 7

8 Window: gestione finestre fullscreen=yes no 1 0 Se la nuova finestra verrà mostrata a schermo intero o meno height=pixels Altezza della finestra. Il valore minimo è 100 left=pixels location=yes no 1 0 menubar=yes no 1 0 resizable=yes no 1 0 scrollbars=yes no 1 0 status=yes no 1 0 titlebar=yes no 1 0 toolbar=yes no 1 0 Posizione sinistra della finestra Whether or not to display the address field. Default is yes Se mostrare o meno la barra dei menu. Di default è yes Se la finestra è o no ridimensionabile. Di default è yes Se vengono mostrate le scrollbar. Di default è yes Se mostrare o meno la barra di stato. Di default è yes Se mostrare la barra del titolo Se mostrare o meno la toolbar. Di default è yes Elementi di Informatica e Reti di Calcolatori 8

9 Window.Document E la radice dell albero del documento Si trova all interno dell oggetto windows E possibile accedervi con windows.document oppure semplicemente document Consente l accesso agli elementi (dati) del documento Attributi body: contiene l elemento body del documento title: contiene il titolo del documento forms: contiene l insieme dei form presenti nel documento documentelement: contiene l elemento HTML e il suo sottoalbero Elementi di Informatica e Reti di Calcolatori 9

10 Window.Document Metodi getelementbyid(): ritorna l elemento associato all identificativo specificato getelementsbytagname(): ritorna l insieme degli elementi con uno specifico tag write( ): apre uno stream di output e scrive il contenuto della write Elementi di Informatica e Reti di Calcolatori 10

11 Window.Document body Oggetto Descrizione Document anchors forms body anchors Permette di accedere al contenuto XHTML/HTML del documento Contiene tutti gli elementi che sono ancorati ovvero quelli che possiedono un nome (attributo name) o un identificativo id images forms Contiene tutti i form presenti nella pagina HTML images Contiene le immagini presenti nella pagina html links links Contiene tutti gli elementi ancora (<a>) link con una proprietà href Elementi di Informatica e Reti di Calcolatori 11

12 Window.Document Esempio <html> <head> </head> <body> </p>"); <body> </html> <title>cambiare il titolo alla pagina</title> <h1>titolo</h1> <script> </script> //notare i singoli apici document.write("<p id= par1 > Questo paragrafo e' in Javascript window.alert("premi ok per continuare"); document.title="nuovo titolo"; Elementi di Informatica e Reti di Calcolatori 12

13 Oggetto style Oggetto style descrive lo stile di un elemento L oggetto style è composto da vari attributi uno per ogni proprietà del relativo elemento. Per esempio style.color permette di accedere e modificare la properietà color dell elemento considerato <html> <head>.</head> <body> <h1>titolo</h1> <script> //notare i singoli apici document.write( <p id= par1 > Questo paragrafo è in Javascript </p> ); </script><body></html> window.alert( Premi ok per continuare ); document.body.style.bankgroundcolor= red ; Elementi di Informatica e Reti di Calcolatori 13

14 Proprietà dell oggetto style L oggetto style contiene diverse categorie di proprietà: Background: backgroundcolor, backgroundimage, backgroundrepeat, Border bordercolor, borderstyle, Margin. Padding margin-top, margin-bottom, Posizionamento position, float, Tabelle bordercollapse, borderspacing Testo Color, font-size, font-family, color, lineheigth Elementi di Informatica e Reti di Calcolatori 14

15 Window.Document: getelementbyid Permette di accedere ad un elemento che ha un particolare identificativo Ricordati che l identificativo è univoco nella pagina Se ci sono più identificativi? <html> <body> </body> </html> <h1>titolo</h1> <script> </script> document.write("<p id='par1'>questo e' un paragrafo in JavaScript"); window.alert("premi ok per continuare"); document.getelementbyid("par1").style.color="red"; Elementi di Informatica e Reti di Calcolatori 15

16 Window.Navigator Contiene delle informazioni sul browser in specifici attributi Esempi attributi: appname: ritorna il nome del browser cookieenabled: determina se i cookies sono abilitati sul browser online: ritorna true se il browser è online, false altrimenti platform: ritorna la piattaforma di esecuzione Elementi di Informatica e Reti di Calcolatori 16

17 Window.Navigator <html> <body> <h1>giochiamo con il DOM: Navigator</h1> <script> document.write("<br/>la piattaforma di esecuzione e': "); document.write(navigator.platform); document.write("<br/>il browser e': "); document.write(navigator.appname); document.write("<br/>il cookies sono abilitati (true)/disabilitati (false): "); document.write(navigator.cookieenabled); document.write("<br/>il browser e' online (true)/offline (false): "); document.write(navigator.cookieenabled); document.write("<br/> La piattaforma di esecuzione e': "); document.write(navigator.appversion); </script> </body> </html> Elementi di Informatica e Reti di Calcolatori 17

18 Window.History L oggetto history che si trova dentro window contiene la storia degli URL visitati dall utente (all interno della finestra di bowser considerata) Attributi: lenght: contiene il numero di URL visitati Metodi forward(): carica l url successivo nella storia delle visite back(): carica il link precedente nella storia delle visite go(): carica uno specifico link dalla storia delle visite go(number) oppure go(url) Elementi di Informatica e Reti di Calcolatori 18