La programmazione Web Linguaggio JavaScript

Transcript

1 La programmazione Web 6-Linguaggio JavaScript 6) Sommario 0. Introduzione 1. Tag <Script> Il tag HTML per l'inserimento di script all'interno di pagine Web 2. Richiamo degli script Due modi per inserire script nella pagina: richiamo da un file esterno o direttamente nel documento 3. Browser non compatibili Il tag <NOSCRIPT> per browser non compatibili con Javascript 4. Il linguaggio Commenti e punteggiatura, Istruzioni, Dati 5. Oggetti predefiniti String, Math e Date 6. DOM (Documento Object Model) Modello ad oggetti del documento 7. Gli eventi Gli eventi sono utilizzati per richiamare delle istruzioni. 8. Elementi specifici Proprietà principali di elementi specifici. 9. L oggetto Form Gli elementi dei moduli. 10. I Cookie Gestione dei cookie. 6.0) Introduzione JavaScript è un linguaggio di programmazione interpretato e leggero, che dispone di funzionalità orientate agli oggetti. Il nucleo del linguaggio è stato incorporato all'interno del browser. Esso permette di accedere agli oggetti rappresentativi della finestra di navigazione e del suo contenuto. Esistono tre varianti JavaScript: Lato client, lato server ed embedded. Quando si parla di JavaScript generalmente si ci riferisce alla variante lato client che è quella più comune. La versione di JavaScript lato client permette l'inserimento di contenuti eseguibili all'interno di pagine Web; così le pagine Web non sono più pagine HTML statiche, ma possono comprendere programmi che interagiscono con l'utente, controllando il browser e creando dinamicamente nuovi contenuti HTML. Sintatticamente JavaScript somiglia al linguaggio C, C ++ e Java. 6.1) Tag SCRIPT I browser ricevono le pagine HTML con tutto il contenuto, quando si incontra il tag <SCRIPT> questo viene eseguito (dal browser lato client) come tutti gli altri tag, dall'alto in basso, ma il suo contenuto è interpretato secondo un codice diverso. Il formato del tag <SCRIPT> è: <SCRIPT Language="Javascript"></SCRIPT> 6.2) Richiamo degli script In linea di principio uno script può essere inserito in due modi all'interno di pagina HTML : inserendo il codice nel documento; caricandolo da un file esterno. l'uso del file esterno, infatti, è dettato dal limite di dimensione di 32K che deve rispettare una pagina web. Script esterni In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione.js. Viene richiamato con l'attributo SRC del tag SCRIPT: 1

2 <SCRIPT Language= Javascript SRC="nomefile.js">  </SCRIPT> Script interni Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag <HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito secondo l'ordine di caricamento. Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script, quello che si trova nella sezione BODY è visibile agli script che lo seguono. ESEMPIO N.1 <HTML> <HEAD> <SCRIPT Language="Javascript"> x=1;alert('testa='+x); </SCRIPT> </HEAD> <BODY> <SCRIPT Language="Javascript"> x++;alert('corpo='+x); </SCRIPT> <SCRIPT Language="Javascript"> x++;alert('corpo='+x); </SCRIPT> </BODY> </HTML> Esecuzione degli script Le istruzioni in Javascript possono essere eseguite in diverso modo: all'interno degli script, individuati dai tag <SCRIPT>, in maniera sequenziale, per cui l'esecuzione è automatica; caricandoli da file esterni; in seguito all'attivazione di un evento (handler) come un click del mouse o la pressione di un tasto; in luogo di un nella forma: <A HREF="Javascript:comando"> Esempio <HTML><HEAD></HEAD> <BODY> <SCRIPT Language="Javascript"></SCRIPT> <a href="#" onmouseover="alert('hai passato il mouse')">passa il mouse</a> <a href="javascript:alert('hai cliccato')">clicca qui</a> </BODY></HTML> 6.3) Browser non compatibili Potrebbero essere utilizzati anche browser non compatibili con Javascript oppure quelli in cui Javascript è disabilitato. In questo caso ci viene in aiuto il tag <NOSCRIPT></NOSCRIPT> che può contenere testo e grafica alternativi oppure un reindirizzamento in pagine statiche, che non usano Javascript, mediante la sequenza: <NOSCRIPT> <META HTTP-EQUIV REFRESH CONTENT="0; URL=altrapagina.htm"> </NOSCRIPT> 6.4) Il linguaggio Javascript è un linguaggio interpretato, l interprete è incorporato nel browser. E un linguaggio orientato agli oggetti. Un oggetto è formato da un insieme di variabili che costituiscono le proprietà dell oggetto e di funzioni che costituiscono i metodi. Commenti e punteggiatura I commenti sono racchiusi tra barre e asterischi come nell'esempio sotto riportato: /*commento*/ e può essere posto su più righe o su una riga singola. Un altro tipo di commento è la doppia barra( // ), presa a prestito dal linguaggio C, ma è valida solo per commenti posti su una singola riga, anche se non la occupano per intero: int x: //commento E ammesso l uso del commento HTML per racchiudere tutti gli script nei tag di commento, facendoli aprire dopo il tag di script e chiudere prima della chiusura del tag: <script language="javascript"> <!-- 2

3 alert("welcome!"); //--> </script> in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono. Spazi bianchi Javascript non bada agli spazi bianchi, tranne che per quelli che si trovano nelle stringhe, per cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con l'identazione aumenta la leggibilità del programma per cui sono vivamente consigliati. Apici Importanti sono gli apici, sia singoli (' ') che doppi (" "). I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli, a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe se questi già servono a racchiudere codice Javascript. Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della stringa stessa, si fanno precedere da una barra rovesciata (\). Istruzioni Le istruzioni hanno la responsabilità di controllare il flusso di elaborazione del codice. Esse possono: eseguire iterazioni, cioè ripetere una parte di codice per un certo numero di volte; eseguire decisioni condizionate; richiamare funzioni (si vedrà in seguito cosa sono); consentire al percorso dell'esecuzione di essere modificato dinamicamente. In Javascript ogni istruzione inizia ad ogni nuova riga o con il punto e virgola. Blocchi di istruzioni Un'istruzione composta, invece, è formata da un gruppo di due o più istruzioni che formano un gruppo logico, nel senso che l'esecuzione delle stesse è legata, ad esempio, al verificarsi di una condizione: tali istruzioni sono raggruppate in blocchi individuati dalle parentesi graffe. Dati Sono ammessi dati di tipo stringa come sequenze di caratteri racchiusi tra virgolette o apici. Nelle stringhe si possono inserire caratteri speciali facendoli precedere dalla barra rovesciata \ (escape). I caratteri sono in Unicode. Le stringhe sono oggetti della classe string. Non è obbligatorio dichiarare le variabili; esse verranno instanziate al momento dell uso. Esse sono di tipo variant. Per dichiarare una variabile si usa: var nome[=valore]; è ammessa l assegnazione multipla: j=k=i=0; Le variabili definite negli script sono globali. Esistono tipi di dati primitivi (numeri o boolean), tipi riferimento (oggetti) e stringhe. Gli array sono tipi speciali di oggetti. Si può determinare il tipo di una variabile usando l operatore typeof che restituisce il tipo (number, string, boolean, function, object o undefined). Tipi primitivi I numeri possono essere interi o reali. I valori booleani sono true (1) o false (0). Alcune conversioni di tipo sono effettuate automaticamente : da interi a stringhe, da stringhe a valori booleani, da numeri a booleani. Altre conversioni sono esplicite: parseint(s) da stringa a numero parsefloat(s) da stringa a float String(n) o tostring() da numero a stringa s=string(n) o s=n.tostring() La funzione eval è abbastanza complessa e cerca qualsiasi espressione Javascript valida per trasformarla in numerico: x=10; y=20; z=30; eval("x+y+z+900")=960 Un numero intero Può essere fornito in tre varianti: decimale, esadecimale e ottale secondo la base con cui viene rappresentato. Per rappresentare un ottale lo si fa precedere da uno 0, per rappresentare un esadecimale lo si fa precedere da 0x. Il valore nullo si ha quando le variabili sono indefinite, cioè quando non vi si assegna nessun valore all'atto della dichiarazione. Importante è sottolineare che ad una variabile può essere assegnato anche un oggetto e si può anche creare un oggetto generico tramite l'enunciato: nomeoggetto=new Object(); Operatori Sono gli stessi del linguaggio C (+, -, *, /, %, +=, -=, *=, /=, %=, ++ --). 3

4 Per concatenare stringhe occorre l operatore +. Anche nei confronti si hanno gli stessi operatori del linguaggio C (==,!=, <, >, <=, >=, &&,,! ). Operatori sui bit (&,, ^, ~, <<, >>) Operatore ternario? ( esempio max = k > j? k : j; ) Scope Le variabili si distinguono in variabili globali e variabili locali. 1. le variabili globali hanno valore per tutto il documento HTML e vanno dichiarate all'inizio dello script e fuori da ogni funzione: il posto preferibile è nei tag <SCRIPT> della sezione <HEAD> in modo tale da creare i contenitori dei valori prima di ogni loro utilizzo; 2. le variabili locali hanno valore solo all'interno della funzione in cui sono dichiarate, cioè all'interno del blocco di codice compreso tra function(){ e la chiusura della parentesi e vanno dichiarate entro questi blocchi. Da ciò si ricava che le variabili dichiarate all'interno di parentesi graffe possono essere utilizzate solo in quel blocco perchè sono variabili locali. Parole chiave In Javascript ci sono delle parole chiave che non si possono utilizzare come identificatori di dati, eccone l'elenco: abstract do if package throw catch final int short var* boolean double implements private throws char finally interface static void break else import protected transient class float long super while byte extends in public true const* for native switch with case false instanceof return try continue function new synchronized default goto null this Espressioni al volo Le espressioni possono essere calcolate anche all'interno di tag HTML permettendo di costruire valori "al volo": la sintassi è: &{espressione; un esempio é: <script>  </script> <table width="&{tabwidth;%"> Istruzioni condizionali if(espressione) istruzione [else istruzione]... switch (espressione) { case costante1: istruzioni break; case costante 2: istruzioni break;... default istruzioni Espressione1? Espressione2 :Espressione3 Un esempio molto elegante di operatore ternario è quello che serve a determinare il browser utilizzato: ie=document.all?1:0 n=document.layers?1:0 Explorer sa interpretare il comando document.all, Netscape sa interpretare document.layers e non viceversa per cui se il browser interpreta il comando allora sarà la variabile ie oppure n uguale ad 1. Istruzioni di iterazione for (inizializzazione; condizione; incremento) istruzione; Un altro tipo di ciclo è for...in che lavora con le proprietà di un oggetto. for (indice in oggetto) {istruzioni Tale funzione è utilizzata per analizzare le proprietà di un oggetto indicato. E' un'istruzione un po' complessa ma utilissima per conoscere il valore che in un certo momento posseggono le proprietà di un oggetto. 4

5 for (i in navigator){ document.write("proprieta\' :"+i); document.writeln (" valore: ": +navigator[i]); while (condizione) espressione che esegue l'espressione finchè la condizione è vera. Per creare un ciclo infinito può andare molto bene l'istruzione: while (true) {... do {istruzioni while (condizione) I comandi break e continue servono ad ottimizzare i cicli for e while oltre che all'operatore condizionale if. Il comando break, infatti, interrompe un blocco di istruzioni saltando alla prima istruzione seguente il blocco contenente il break. Il comando continue, invece, indica di continuare il blocco ma interrompendo l'iterazione in quel punto e riprendendo dall'inizio del blocco. Array Gli array sono liste numerate di oggetti, che in Javascript possono anche essere di tipo diverso. Javascript non supporta le matrici come variabili, ma come oggetti per cui si crea una matrice solo se si dichiara e tale dichiarazione va fatta come istanza dell'oggetto Array: nomematrice=new Array(num elementi) Per accedere ad un elemento della matrice si utilizza l'indice che indica la posizione dell'elemento all'interno della stessa. Tale posizione si inizia a conteggiare da 0 e non da 1. Esempio di dichiarazione: GiornSett = new Array(7) Per accedere ad ogni singolo elemento: GiornSett[0] = "Domenica" GiornSett[1] = "Lunedì" GiornSett[2] = "Martedì" GiornSett[3] = "Mercoledì" GiornSett[4] = "Giovedì" GiornSett[5] = "Venerdì" GiornSett[6] = "Sabato" per cui il primo elemento è "Domenica" ed ha indice 0. La seguente sintassi dichiara e assegna i valori agli elementi della matrice: GiornSett = new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato") In Javascript gli array sono array associativi, cioè permettono di usare delle stringhe come indici (o leggi di accesso). Per accedere agli elementi si usa l operatore [ ] o. : riga[ nome ] o anche riga.nome La proprietà più importante dell oggetto array è length che fornisce il numero di elementi dell array. Quando si è definita una matrice, i suoi elementi vengono riempiti con valore null, per la lunghezza specificata nella dichiarazione. È possibile modificare la dimensione di una matrice in modo dinamico, assegnando un valore alla proprietà LENGTH. Le matrici hanno tre metodi: Join( ) Unisce tutti gli elementi di una matrice, dando come risultato una stringa. Reverse ( ) Restituisce una versione capovolta della matrice. Sort ( ) Restituisce una versione ordinata della matrice. tostring( ) Converte tutti gli elementi di una matrice in una stringa, separandoli con virgole. Funzioni Le funzioni sono oggetti Function che hanno proprietà e metodi. Si può dichiarare una funzione, come in C, con: function(){ //istruzioni e si richiama con function(); Il passaggio di parametri avviene per valore. La funzione può restituire un valore con return espressione L oggetto Function ha due metodi interessanti che permettono di avere funzioni con numero di parametri variabile: arguments è un array contenente i parametri passati alla funzione (length indica quanti ne sono) caller riferimento alla funzione chiamante (null se il rimo livello) 5

6 6.5) Oggetti predefiniti Oggetto String: le stringhe di caratteri sono oggetti string. Proprietà: Length lunghezza della stringa in numero dei caratteri. Metodi: charat(i) restituisce il carattere che si trova nella posizione i. concat(s) concatena la stringa specificata alla fine indexof(s) restituisce la prima posizione della stringa dove inizia la stringa specificata lastindexof(s) restituisce l ultima posizione della stringa dove inizia la stringa specificata replace(s1,s2) sostituisce la prima stringa con la seconda search(s) restituisce true se la stringa è presente, false altrimenti split(s) restituisce un array che contiene le parti della stringa separate dalla stringa specificata substr(i) restituisce la sottostringa che inizia dalla posizione i substring(i,j) restituisce la sottostringa che inizia dalla posizione i e termina alla posizione j tolowercase() trasforma in minuscolo touppercase() trasforma in maiuscolo Oggetto Math: offre metodi utili per calcoli matematici e alcune costanti Proprietà: PI =pi greco, E=base dei logaritmi naturali Metodi: abs(a), exp(a), log(a), pow(a,b), sqrt(a), max(a,b), min(a,b), sin(a), cos(a), tan(a) di ovvio utilizzo round(a) numero intero più vicino ad a ceil(a) numero intero più piccolo >= a floor(a) numero intero più grande <=a random() numero casuale tra 0 e 1 esempio: n=math,pow(5,2); // n vale 25 Oggetto Date: contiene informazioni riguardanti la data e l ora di sistema lato client. Costruttori: Date() : restituisce la data di sistema. Metodi: tolocalestring() trasforma la data nel formato locale in base alle impostazioni di sistema getdate() restituisce il giorno del mese getmonth() restituisce il mese (0-11) getfullyear() restituisce l anno (4 cifre) gethours() restituisce l ora getminutes() restituisce i minuti getseconds() restituisce i secondi un esempio: <SCRIPT LANGUAGE="JavaScript"> Mesi = new Array("Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", Ottobre", "Novembre", "Dicembre"); Data = new Date() Giorno = Data.getDate() Mese = Data.getMonth() Anno = Data.getYear() if (Anno < 2000) Anno = Anno ; Datario = Data.toGMTString() GiorSet = Datario.substring(0,3) if (GiorSet == "Sun") GiorSet = "Domenica" if (GiorSet == "Mon") GiorSet = "Lunedì" if (GiorSet == "Tue") GiorSet = "Martedì" if (GiorSet == "Wed") GiorSet = "Mercoledì" if (GiorSet == "Thu") GiorSet = "Giovedì" if (GiorSet == "Fri") GiorSet = "Venerdì" if (GiorSet == "Sat") GiorSet = "Sabato" Ore = Data.getHours() Minuti = Data.getMinutes() Secondi = Data.getSeconds() if ((Ore > 6) && (Ore < 13)) Saluto = "Buongiorno" if ((Ore > 12) && (Ore < 18)) Saluto = "Buon pomeriggio" if ((Ore > 17) && (Ore < 22)) Saluto = "Buona sera" if (Ore > 21) Saluto = "Buona notte" if (Ore < 7) Saluto = "Buona notte" if (Minuti < 10) Minuti = "0" + Minuti if (Secondi < 10) Secondi = "0" + Secondi document.write("<font face = Elephant color=0xff00aa size = 4><align=center>", Saluto, ", sono le ore ",Ore, ":", Minuti, ".", Secondi," di ",GiorSet, ", ", Giorno, " ", Mesi[Mese], " ", Anno,"</font>") 6

7 </script> 6.6) Il DOM (Document Object Model) La vita di Javascript lato client è strettamente legata al DOM (modello ad oggetti del documento). Lo scopo del DOM è quello di fornire al programmatore una chiara interfaccia per controllare e modificare il contenuto, lo stile e la forma di un documento html e di tutti i suoi elementi. L'oggetto principale del DOM è rappresentato dalla finestra corrente del browser (oggetto window). Il modello di programmazione usato è quello basato su gli eventi. Si può fare in modo che uno script venga eseguito quando si verifica un particolare evento. Si può fare riferimento ad ogni oggetto seguendo la gerarchia; tutti gli oggetti sono accessibili come proprietà di altri oggetti. Gerarchia degli oggetti: window Rappresenta la finestra del browser Event Rappresenta l'evento che si è verificato Frames[] Collezione dei premi se nella finestra corrente Location Rappresenta l'url corrente che il browser sta visualizzando History Rappresenta l history list del browser Navigator Rappresenta il browser stesso Screen Rappresenta uno schermo Document Rappresenta il documento correntemente visualizzato All[] Collezione di tutti gli elementi (tag) del documento Anchors[] Collezione delle ancore Applets[] Collezione delle applet Body Corpo del documento Frames[] Collezione dei frames definiti dal documento Images[] Collezione delle immagini Links[] Collezione dei link Selection Rappresenta il testo selezionato nel documento Scripts[] Collezione di script stylesheets[] Collezione dei fogli stile Forms[] Collezione dei moduli Elements[] Collezione di elementi di un modulo Oggetto Window: è l'oggetto di primo livello della gerarchia; il suo nome può essere omesso dato che dovrebbe essere presente in tutti i riferimenti. Proprietà: name nome della finestra che può essere usato nell'attributo target di un collegamento ipertestuale; se il nome specificato in target non esiste, viene creata una nuova finestra con questo nome. Status Contenuto corrente della barra di stato; permette di visualizzare messaggi DefaultStatus Non presenta il contenuto di default della barra di stato; può essere sostituito da altri messaggi ma poi viene ripristinato Self Riferimento alla finestra corrente Opener Riferimento ad un altro oggetto Windows che ha aperto la finestra; se la finestra è stata aperta dall'utente contiene null Closed ha valore true se la finestra chiusa Metodi: alert( ) Confirm() Prompt() Open() Genera una finestra di dialogo con testo e pulsante OK; serve per visualizzare un messaggio Genera una finestra di dialogo con testo e pulsante OK e Annulla; permette la scelta tra due alternative Genera una finestra di dialogo con testo, e pulsante che è annulla e un campo di testo per inserire una stringa Gestione della finestra Apre una nuova finestra del browser restituendo un oggetto Window che rappresenta la finestra aperta; questa finestra può essere completamente controllata mediante parametri del metodo; ha 4 parametri l'url del documento da visualizzare (o finestra vuota se non specificato) il nome nella finestra che può essere utilizzato nell'attributo target dai collegamenti una stringa che specifica le caratteristiche della finestra: o fullscreen (yes/no) indica se la finestra deve essere tutto schermo 7

8 Close() MoveTo(x,y) MoveBy(x,y) ResizeTo(x,y) ResizeBy(x,y) ScrollTo(x,y) ScrollBy(x,y) Focus() Blur() ExecScript() SetTimeout() o toolbar (yes/no) specifica se visualizzare della barra degli strumenti o location (yes/no) specifica se visualizzare la barra indirizzo o status (yes/no) specifica se visualizzare la barra di stato o menubar (yes/no) specifica se visualizzare la barra dei menu o scrollbars (yes/no) specifica se visualizzare le barre di scorrimento o resizable (yes/no) specifica se la finestra è ridimensionabile o width,height impostano le dimensioni della finestra in pixel o top,left specificano la posizione del vertice superiore sinistro della finestra in pixel un valore booleano che indica se l'url indicato deve creare un nuovo elemento (false) nell'elenco cronologico o sostituire quello corrente (true) Chiude una finestra; si possono chiudere sono le finestre create dal proprio codice; la finestra chiusa continua ad esistere (indicato dalla proprietà closed). Occorre quindi controllare sempre se le finestre che si vogliono chiudere sono effettivamente aperte. Sposta la finestra alle coordinate specificate Sposta la finestra del numero specificato di pixel Imposta le dimensioni della finestra ai valori specificati Modifica le dimensioni della finestra aggiungendo ai valori specificati positivi o negativi Sposta il documento della finestra alla posizione specificata (gli oggetti anchor hanno proprietà x e y che possono essere usate per spostarsi direttamente su un ancora Trascorrere il documento della finestra del numero di pixel specificato Altri metodi Richiede il focus Cede il focus Esegue uno script Esegue una funzione dopo che è trascorso un intervallo di tempo in millisecondi; ha due parametri di primo e indica la funzione da eseguire, il secondo dopo quanti millisecondi viene eseguita; una funzione in esecuzione può usarlo per ripetersi senza intervento da parte dell'utente; il metodo restituisce un identificatore che va passato come parametro al metodo cleartimeout() per annullare il richiamo della funzione ClearTimeout() Annulla la chiamata alla fusione effettuata con settimeout() SetInterval() Esegue ripetutamente una funzione con un ritardo specificato fra una esecuzione e l'altra; ha due parametri: il primo indica la funzione eseguire, il secondo dopo quanti millisecondi viene eseguita; il metodo restituisce un identificatore che va passato come parametro al metodo clearinterval() per terminare la ripetizione ClearInterval() Termina le chiamate ripetute alla funzione impostata con setinterval() L oggetto window contiene un discreto numero di oggetti (come si vede dalla gerarchia degli oggetti). Oggetto Location: La barra degli indirizzi era presentata da window.location: grande questo riferimento possibile interagire con essa. Proprietà: href Contiene l'indirizzo mostrato dalla barra. È una proprietà di lettura e scrittura. L'assegnazione di un valore a questa proprietà permette di spedire il visitatore alla pagina specificata Protocol, host, Specificano le singole parti dell'url. Search indica la parte dopo il punto di domanda pathname, search Metodi: replace() Reload() Sostituisce il documento corrente numero specificato; non si può più accedere al documento corrente con il pulsante indietro Aggiorna la pagina Oggetto History: Da la possibilità di muoversi lungo la cronologia. La proprietà length restituisce il numero di posizioni visitate dall'utente. Metodi: back() pulsante indietro del browser Forward() go() pulsanti avanti del browser) manda a una specifica posizione dell'elenco storico A HREF="javascript:history.back();"><IMG BORDER = 0 SRC="Immagini/Freccia%20sinistra.gif" width="100" height="60"> </A><A HREF="history.forward();"><IMG BORDER = 0 SRC="Immagini/Freccia%20destra.gif" width="100" height="60"></a> 8

9 Oggetto Navigator: fornisce informazioni relative al browser utilizzato Proprietà: appname e Nome e versione del browser appversion Platform Piattaforma usata Oggetto Screen: fornisce informazioni sulla risoluzione e numero di colori dello schermo Proprietà: width e height Risoluzione dello schermo in pixel ColorDepth Profondità di colore Oggetto Document: Insieme all'oggetto window, è sicuramente l'oggetto più importante del DOM. Esso permette di generare documenti o di modificarne dinamicamente il contenuto e l'aspetto. Metodi: write(s) Proprietà: location o URL title referrer lastmodified Scrive nel documento il codice html specificato nella stringa. Richiamato in uno script, inserisce il codice nel documento; se richiamato in un gestore di evento, crea un nuovo documento che sostituisce il precedente. restituisce la URL del documento corrente titolo del documento in corso restituisce la URL del documento che l'utente visualizzava prima della pagina in corso restituisce l'ultima data di modifica del documento ESEMPIO <SCRIPT LANGUAGE="JavaScript"> document.write("<p>proprietà <b>location</b> restituisce la URL del documento corrente") Doc = document.location document.write("<br> Esempio: <u>",doc,"</u>") document.write("<p>proprietà <b>title</b> visualizza un testo nella barra del titolo del documento in corso") Doc = document.title document.write("<br> Esempio: <u>",doc,"</u> Testo prima della codifica JavaScript") document.title = "Questo testo è scritto con Javascript" Doc = document.title document.write("<br> Esempio: <u>",doc,"</u> Testo dopo la codifica JavaScript") document.write("<p>proprietà <b>referer</b> restituisce la URL del documento che l'utente visualizzava prima della pagina in corso (funzione non attiva)") Doc = document.referer document.write("<br> Esempio: <u>",doc,"</u>") document.write("<p>proprietà <b>lastmodified</b> restituisce l'ultima data di modifica del documento") Doc = document.lastmodified document.write("<br> Esempio: <u>",doc,"</u>") </script> bgcolor fgcolor linkcolor vlinkcolor parentwindow Cookie controlla il colore dello sfondo della pagina corrente. controlla il colore del testo. controlla il colore per i collegamenti non visitati controlla il colore per i collegamenti visitati Riferimento aslla finestra che contiene il documento Permette di leggere e scrivere cookie (si vedrà in seguito) L oggetto document contiene un discreto numero di collezioni/elementi (come si vede dalla gerarchia degli oggetti). Tutti questi elementi sono a loro volta degli oggetti ed hanno delle proprietà. Alcune di queste proprietà sono comuni a tutti gli oggetti (come ad esempio la proprietà id che serve ad assegnare un nome all elemento, con il quale javascript può accedervi per cambiare le relative proprietà). Le collezioni più comuni saranno trattate singolarmente (images, links, anchors, forms). Una volta che si è avuto accesso al singolo elemento, è possibile accedere alle proprietà (attributi) dello stesso per conoscerle e/o cambiarle. Più avanti si approfondirà questo argomento. Proprietà comuni agli elementi del documento: id Nome dell elemento (sola lettura) tagname Nome del tag html che ha creato l elemento Style Permette di accedere alla proprietà di stile Document Riferimento al documento che contiene l elemento parentelement Riferimento all elemento genitore nella gerarchia Sourceindex Indice dell elemento nella collezione document.all Proprietà che permettono di modificare il contenuto degli elementi innertext Testo contenuto tra i tag dell elemento 9

10 innerhtml Testo contenuto tra i tag dell elemento, può contenere tag html outertext Rappresenta tutto il testo dell elemento, inclusi i tag outerhtml Rappresenta tutto il testo dell elemento, inclusi i tag Metodi comuni agli elementi del documento: scrollintoview() Fa scorrere il documento in modo che l elemento compaia in cima alla finestra. Un esempio di uso di alcune funzioni: EFFETTO TERREMOTO <head> <SCRIPT LANGUAGE="JavaScript"> function terremoto(x) { brie4 = (navigator.appname == "Microsoft Internet Explorer") && (parseint(navigator.appversion) >= 4); if (brie4) { for (i = 12; i > 0; i--) { for (j = x; j > 0; j--) { self.moveby(0,i); self.moveby(i,0); self.moveby(0,-i); self.moveby(-i,0); else window.alert ("L'effetto terremoto non è visibile con questo tipo di browser") </script> </head> <body> <SCRIPT LANGUAGE="JavaScript"> document.write("<p>questo effetto è visibile solo sui browser della Microsoft con versione superiore alla 3 ") document.write("<br>il browser che stai utilizzando è ", navigator.appname) document.write("<br>la versione di questo browser è ", navigator.appversion.substring(0,4)) document.write("<h3 align=center>") Timer = 4 Scosse = 1 Intensit = 2 ID = settimeout("aggiorn();",1000); function Aggiorn() { Timer = Timer - 1 if (Timer > -1) { ID = settimeout("aggiorn();",1000); else { ID = settimeout("tempo();",100); terremoto(intensit) if ((Timer > -1) && (Scosse == 1)) document.all.clock.innerhtml = "Mancano <h1>" + Timer + " secondi <h3> al terremoto nel browser"; if ((Timer > -1) && (Scosse > 1)) document.all.clock.innerhtml = "Alla " + Scosse + " scossa mancano <h1>" + Timer + " secondi <h3>"; function Tempo() { Timer = 4 Scosse = Scosse + 1 document.all.clock.innerhtml = "<p><h4>la scossa sismica è stata pari a " + Intensit + " secondi" Intensit = Intensit + 2 // ID = settimeout("aggiorn();",(intensit + 2) * 1000); ID = settimeout("aggiorn();",3000); </script> <span id="clock"></span> </body> ) Gli eventi Gli eventi sono utilizzati per richiamare delle istruzioni. Gli script vengono eseguiti in maniera sequenziale; per fare in modo di inserire dinamicità e interattività occorre che questi vengano attivati o richiamati solo quando si verificano particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Normalmente ad un evento viene associata una sola istruzione, per cui il più delle volte l'associazione è fatta con un blocco di istruzioni e, quindi, con le funzioni che prendono il nome di handler o gestori di eventi. Un esempio: <A HREF="pagina.html" onclick="alert('ciao')">link</a> notiamo come l'evento onclick sia inserito nel Tag come se fosse un atributo dello stesso. Anche se meno comune, gli eventi possono essere attivati direttamente all'interno degli Script, richiamandoli come se fossero una proprietà dell'oggetto. La sintassi è: 10

11 Oggetto.evento=handler; Ripeto che questa modalità è raramente nella normale attività. Esempio: document.images[num].onload=carica(); dove la funzione carica() serve a caricare una immagine successiva. Prima della descrizione degli eventi attivabili, anticipiamo che tutti gli eventi hanno la propria sintassi, composta dal loro nome col prefisso on, ad esempio l'evento click è richiamato con l'handler onclick. Gli eventi che possono essere attivati dipendono dall oggetto che li scatena, per cui ne daremo ora una classificazione in base all oggetto. Gestori di eventi relativi agli oggetti contenuti nei FORM onblur Si verifica quando un oggetto perde il focus onchange Si verifica quando un campo o un'area di testo vengono modificati e si preme il tasto di tabulazione onclick Si verifica quando l'utente fa clic su un elemento ondblclick Si verifica quando l'utente fa doppio clic su un elemento onfocus Si verifica quando un elemento acquisisce il focus onmousedown Si verifica quando si preme un tasto del mouse sull'oggetto onmousemove Si verifica quando il puntatore attraversa un elemento onmouseover Si verifica quando il puntatore si sposta su un elemento onmouseout Si verifica quando il puntatore si allontana da un elemento onmouseup Si verifica quando si rilascia un tasto del mouse onkeydown Si verifica quando si preme un tasto e il focus è sul campo di testo onkeypress Si verifica quando si preme un tasto codificato come ASCII onkeyup Si verifica quando si rilascia un tasto e il focus è sul campo di testo onselect Si verifica quando l'utente seleziona un testo onsubmit Si verifica quando si preme un pulsante SUBMIT ossia di "Invio dati" onabort onblur onerror onfocus onload onresize onunload Gestori di eventi dell'oggetto WINDOW Si verifica quando l'utente interrompe il caricamento di un'immagine Si verifica quando la finestra perde il focus Si verifica se il documento non può essere caricato Si verifica quando la finestra riceve il focus Si verifica quando termina il caricamento del documento (nel tag Body) Si verifica quando l'utente ridimensiona una finestra Si verifica quando l'utente abbandona il documento o esce onclick onmouseout onmouseover Gestori di eventi dell'oggetto LINK o Anchor Si verifica quando l'utente fa clic sul collegamento Si verifica quando il puntatore si allontana da un collegamento Si verifica quando il puntatore si sposta sul collegamento onload onabort onerror Gestori di eventi dell'oggetto IMAGES Si verifica quando un'immagine viene caricata completamente Si verifica se l'utente chiude bruscamente la pagina prima che l'immagine sia stata completamente caricata Si verifica se non si trova il file immagine Gestori di eventi abbinati al MOUSE onclick Si verifica quando l'utente fa clic su un elemento ondblclick Si verifica quando l'utente fa doppio clic su un elemento onmousedown Si verifica quando si preme un tasto del mouse onmousemove Si verifica quando il puntatore attraversa un elemento onmouseover Si verifica quando il puntatore si sposta su un elemento onmouseout Si verifica quando il puntatore si allontana da un elemento onmouseup Si verifica quando si rilascia un tasto del mouse onkeydown onkeypress onkeyup Gestori di eventi eventi abbinati alla TASTIERA Si verifica quando si preme un tasto Si verifica quando si preme un tasto codificato come ASCII Si verifica quando si rilascia un tasto 11

12 6.8) Elementi specifici Image La matrice IMAGES contiene un elemento per ogni immagine esistente sulla pagina. È possibile creare un oggetto IMAGES indipendente nel quale inserire più immagini, le quali verranno caricate e sistemate nella memoria Cache del computer client. Una volta precaricate le immagini è possibile utilizzarle per sostituire qualsiasi altra immagine presente nella pagina. Fotogramma = new Array (4); Creazione matrice per l' oggetto IMAGES. Fotogramma[0] = "Immagini/Cavallo.gif"; Definizione elementi della matrice per le immagini precaricate. Fotogramma[1] = "Immagini/Attenzione computer.gif"; Fotogramma[2] = "Immagini/Cervello.gif"; Fotogramma[3] = "Immagini/Ancora.gif"; Fotogramma[4] = "Immagini/Compressione programmi.gif"; Ciascun oggetto IMAGES ha le seguenti proprietà: border stabilisce se è stato disegnato un bordo intorno a un'immagine collegata. complete Indica se l'immagine è stata caricata completamente. Attributo con valore booleano ( True o False ). height - width Rappresentano rispettivamente altezza e larghezza dell'immagine. hspace- vspace Rappresentano rispettivamente la spaziatura orizzontale e verticale dell'immagine e servono per definire la posizione sulla pagina. Attributi di sola lettura. name Nome dell'immagine. lowsrc Consente di definire un'immagine a bassa risoluzione che viene caricata prima di quella effettiva. src Origine o sorgente dell'immagine. Esempio Rollover: <script> var corrente=0; var immagini=new Array(); var collegamenti=new Array(); collegamenti[0]=" immagini[0]="0.jpg"; collegamenti[1]=" immagini[1]="1.jpg"; collegamenti[2]=" immagini[2]="2.jpg"; collegamenti[3]=" immagini[3]="3.jpg"; function ruota(){ corrente++; if (corrente >= immagini.length) corrente=0; document.banner.src = immagini[corrente]; settimeout('ruota()',5000); function clicca(){ window.open(collegamenti[corrente]); </script> <body onload="settimeout('ruota()',3000)"> <a href="javascript:clicca();"> <img name="banner" src="0.jpg" border="0" heigth="300" width="300"> </a> </body> Anchor Hanno le stesse proprietà dell oggetto Location (href, protocol, host, pathname, search). Style permette di modificare gli stili applicati ai vari tag. Tutti gli attributi di stile corrispondono a proprietà dell'oggetto di stile. Si accede alla proprietà di stile con la notazione oggetto.style. proprietà 12

13 6.9) L oggetto Form I moduli sono insiemi di elementi (caselle di testo, pulsanti di selezione, menu a discesa, pulsanti di comando, ecc.) che permettono all'utente di inserire nei dati; facendo click su un pulsante (di solito invia o submit) si richiede l'esecuzione di una azione. Per poter far riferimento agli elementi del modulo è importante assegnare un nome ad ogni elemento (attributo name o id) attraverso il nome si può fare riferimento al contenuto o valore dell elemento negli script. Si può fare riferimento al form assegnandogli un nome (name o id). L'attributo action permette di specificare l'applicazione da eseguire sul server. I possibili eventi gestibili dal form sono stati descritti nel paragrafo relativo agli eventi. Proprietà del Form: action specifica la pagina del server che si occupa di elaborare il form elements[] collezione degli elementi contenuti nel form encoding codifica delle informazioni del form method metodo di invio dati name nome del form Prendiamo ora in esame le proprietà degli elementi del form. Text / Password / Textarea value Il testo inserito defaultvalue Valore predefinito name Nome dell elemento form Riferimento al form contenitore type Tipo di elemento Hidden / Button / Submit /Reset / File form Riferimento al form contenitore name Nome dell elemento type Tipo di elemento value Il testo inserito Checkbox / Radio checked defaultchecked form name type value Select form name Options[ ] selectedindex type Option defaultselected selected text value Indica se il pulsante è selezionato Valore predefinito Riferimento al form contenitore Nome dell elemento Tipo di elemento Indica il valore corrispondente al pulsante Riferimento al form contenitore Nome dell elemento Rappresenta la collezione delle scelte; specificando come indice selectedindex si può accedere ad una specifica scelta Indice della opzione selezionata Tipo di elemento Valore della opzione 13

14 6.10) I Cookie HTTP e' un protocollo stateless; per ricordare qualcosa delle precedenti connessioni sono stati inventati i 'cookie' ( biscotto in inglese). Un cookie è un pezzo di informazione (un piccolo file di testo) inviato dal server, che può essere memorizzato nell hard disk del client, dove vengono memorizzate informazioni di vario genere sulle abitudini e i gusti dell'utente (personalizzazione delle pagine, numero visite, ecc), per essere successivamente recuperate. Sono una sorta di promemoria depositati sui nostri hard disk per tenere memoria di informazioni che altrimenti andrebbero perse al momento dell'uscita dal sito Per consentirne la memorizzazione (in JavaScript) è necessario settare alcuni parametri, di cui solo due sono quelli essenziali. - Il valore che interessa conservare per il suo successivo riutilizzo. - La data di scadenza del cookie. Se si omette questo parametro viene presa come data di scadenza la data attuale di collegamento e il browser cancellerà il cookie nel momento in cui si chiuderà la sua sessione. È necessario, pertanto, inserire una data successiva alla data di collegamento per consentire al cookie di permanere sul disco fisso dell'utente. L'istruzione per scrivere un cookie è document.cookie più una stringa cosi composta: Valore ; EXPIRES = Data di scadenza espressa in millisencondi. Per leggerlo si deve assegnare la proprietà document.cookie ad una variabile che assumerà il valore del cookie. Nota: Un file cookie si riferisce all'intero sito e non a una specifica pagina dello stesso, quindi nel caso in cui si gestisce più di un valore è necessario spezzare la stringa ed inserirla in più variabili quanti sono i valori da gestire. Esempio: <html><head> <script language="javascript">  </script></head> <body> <script>  </script> </body></html> Per la gestione dei cookie sono utili alcune funzioni: split( separatore ) : il metodo, applicato ad una stringa, ritorna un array di sottostringhe dividendole in base al separatore escare(s) e unescape(s) serve ad evitare qualsiasi conflitto tra il valore del cookie e la sintassi della sua dichiarazione. Ad esempio se nel valore fossero presenti dei punti e virgola questo causerebbe problemi di interpretazione. 14

15 Tabella dei colori aliceblue "#F0F8FF" antiquewhite "#FAEBD7" aqua "#00FFFF" aquamarine "#FFFD4" azure "#F0FFFF" beige "#F5F5DC" bisque "#FFE4C4" black "#000000" blanchedalmond "#FFEBCD" blue "#0000FF" blueviolet "#8A2BE2" brown "#A52A2A" burlywood "#DEB887" cadetblue "#5F9EA0" chartreuse "#7FFF00" chocolate "#D2691E" coral "#FF7F50" cornflowerblue "#6495ED" cornsilk "#FFF8DC" crimson "#DC143C" cyan "#00FFFF" darkblue "#00008B" darkcyan "#008B8B" darkgoldenrod "#D2691E" darkgray "#A9A9A9" darkgreen "#006400" darkkhaki "#BDB76B" darkmagenta "#8B008B" darkolivegreen "#556B2F" darkorange "#FF8C00" darkorchid "#993214" darkred "#8B0000" darksalmon "#E9967A" darkseagreen "#2BBC2B" darkslateblue "#483D8B" darkslategray "#2F4F4F" darkturquoise "#001414" darkviolet "#9400D3" deeppink "#FF1493" deepskyblue "#00BFFF" dimgray "#696969" dodgerblue "#1E90FF" firebrick "#B22222" floralwhite "#FFFAF0" forestgreen "#228B22" fuchsia "#FF00FF" gainsboro "#DCDCDC" ghostwhite "#F8F8FF" gold "#FFD700" goldenrod "#DAA520" gray "#808080" green "#008000" greenyellow "#ADFF00" honeydew "#F0FFF0" hotpink "#FF6950" indianred "#145C5C" indigo "#4B001E" ivory "#FFFF0" khaki "#F01E8C" lavender "#1E1EFA" 15

16 lavenderblush "#FFF0F5" lawngreen "#7FCC00" lemonchiffon "#FFFA14" lightblue "#ADD81E" lightcoral "#F08080" lightcyan "#E0FFFF" lightgoldenrodyellow "#FAFAD2" lightgreen "#90EE90" lightgrey "#D3D3D3" lightpink "#FFB6C1" lightsalmon "#FFA07A" lightseagreen "#20B2AA" lightskyblue "#8714FA" lightslategray "#778899" lightsteeblue "#B0C4DE" lightyellow "#FFFFB0" lime "#00FF00" limegreen "#321432" linen "#F0F01E" magenta "#FF00FF" maroon "#800000" mediumaquamarine "#6614AA" mediumblue "#000014" mediumorchid "#BA55D3" mediumpurple "#9370DB" mediumseagreen "#3CB371" mediumslateblue "#7B68EE" mediumspringgreen "#00FA9A" mediumturquoise "#481414" mediumvioletred "#C71585" midnightblue "#191970" mintcream "#F5FFFA" mistyrose "#FFE4E1" moccasin "#FFE4B5" navajowhite "#FFDEAD" navy "#000080" oldlace "#FDF51E" olive "#808000" olivedrab "#6B2A23" orange "#FFA500" orangered "#FF4500" orchid "#DA70D6" palegoldenrod "#EEE8AA" palegreen "#98FB98" paleturquoise "#AFEEEE" palevioletred "#DB7093" papayawhip "#FFEFD5" peachpuff "#FFDAB9" peru "#14853F" pink "#FFC014" plum "#DDA0DD" powderblue "#B0E01E" purple "#800080" red "#FF0000" rosybrown "#BC2B2B" royalblue "#4169E1" saddlebrown "#8B4513" salmon "#FA8072" sandybrown "#F4A460" seagreen "#2E8B57" seashell "#FFF5EE" sienna "#A0522D" silver "#C0C0C0" skyblue "#8714EB" 16

17 slateblue "#6A5A14" slategray "#708090" snow "#FFFAFA" springgreen "#00FF7F" steelblue "#461E50" tan "#D2508C" teal "#008080" thistle "#D8BfD8" tomato "#FF6347" turquoise "#40E014" violet "#EE1EEE" wheat "#F5DEB3" white "#FFFFFF" whitesmoke "#F5F5F5" yellow "#FFFF00" yellowgreen "#9A1432" 17

Vedere altro