Corso Base JavaScript

[unit1] - HTML.
IT - Corso base JavaScript per esempi
Corso base JavaScript per esempi Introduzione

1. A chi si rivolge questo corso
Il corso una naturale prosecuzione del corso HTML e prepara allo studio approfondito di JavaScript
2. Perch usare JavaScript?

Tutto quello che potete fare utilizzando JavaScript
3. Cosa JavaScript
Il ruolo di JavaScript all'interno dei linguaggi di web publishing
4. La storia di JavaScript
Come nato, come si evoluto e quali sono gli standard di JavaScript
5. JavaScript non Java

Le differenze fra Java e JavaScript: due linguaggi dalle poche cose in comune
Come fatto un browser

6. Gli oggetti
Il browser pu essere sezionato in vari elementi o oggetti
7. I metodi
I metodi degli oggetti JavaScript
8. Il DOM e le problematiche ad esso connesse

I modelli di documento dei browser e i problemi di compatibilit
9. Gli eventi
Cosa sono e come vengono organizati gli eventi JavaScript
Elementi di base
10. Dove scrivere il codice
Come e dove scrivere il codice JavaScript in un documento HTML
11. Il tag NOSCRIPT

Utilizzare JavaScript anche per i browser che non supportano il tag SCRIPT
12. Includere un file esterno

Utilizzare JavaScript per includere file esterni nelle pagine HTML
[unit1] - HTML.IT - Corso base JavaScript per esempi
13. I Commenti
Inserire i commenti agli script JavaScript per mantenere il codice decifrabile
14. Come scrivere nella pagina

Vediamo come poter scrivere con JavaScript testo o codice in una pagina
15. Il debugger: trovare gli errori

Come rintracciare con il nostro Browser gli errori JavaScript
Lavoriamo con le finestre

16. Le finestre di dialogo
Visualizzare con JavaScript le finestre di sistema di Windows
17. Le finestre personalizzabili

Come aprire nuove finestre del Browser con JavaScript
18. Le caratteristiche delle finestre personalizzabili

Come modificare e rendere pi personalizzate le finestre aperte con JavaScript
Introduzione alla programmazione

19. Le variabili
Cosa sono e come vengono utilizzate le variabili
20. Le stringhe
Utilizzo delle stringhe nelle variabili JavaScript
21. Come utilizzare le variabili

Esempi pratici di utilizzo delle variabili in JavaScript
22. Operare con le variabili

Sottrarre, sommare e manipolare le variabili
23. Differenza tra variabili e oggetti

Cosa distingue le variabili dagli oggetti. Esempi pratici
Le funzioni
24. Introduzione alle funzioni
Funzioni: cosa sono e come si richiamano nella pagina
25. Dove utilizzare le funzioni I

Primo approccio all'ambito delle funzioni nella scrittura del codice
26. Dove utilizzare le funzioni II

Variabili locali e variabili globali: differenze d'uso
27. I parametri delle funzioni

Inseriamo parametri variabili all'interno delle funzioni
28. Restituire i valori di una funzione

Come esportare un valore di una funzione all'esterno
I Controlli Condizionali
29. Verificare una condizione: if
Introdurre deviazioni negli script: la funzione IF
30. Operatori relazionali

Verificare le relazioni: gli operatori JavaScript
31. Come funzionano else ed else if

Introdure le azioni dopo la verifica: else ed else if
32. Esempio: individuare il browser

Come individuare il browser del visitatore attraverso i controlli condizionali
33. Gli operatori logici

Come annidare pi controlli condizionali dentro altri
34. Uso del "not" e operatori di bit

Come controllare una condizione di falsit e glioperatori di bit
35. Interrompere il flusso del codice con return

Utilizzare il blocco del codice in un costrutto condizionale
36. Esempi pratici dell'utilizzo di if, else if, else

Controllare le azioni dell'utente e variare le celle a seconda della risoluzione
37. Lo switch
Semplificare l'utilizzo di molti if all'interno di un valore
38. Loperatore ternario

Semplificare l'utilizzo di molti if con un operatore ternario
I Controlli Iterativi
39. Gli Array
Cosa sono e come si costruiscono gli Array
40. Array di array e array associativi

Creare Array che contengono altri Array
41. While
Realizzare routine che si ripetono
42. Do while
Costruire routine ripetitive prima di valutare la condizione
43. Ciclo For

Ripetere la stessa routine per un numero specifico di volte
44. For in
Come ricavare le propriet di un oggetto
45. Break e continue

Interrompere e uscire da un costrutto
Conclusioni
46. L'Indentazione
Rendere pi leggibile il codice JavaScript
47. Tecniche di debug

Usare gli alert per scoprire gli errori di scripting
48. L'istruzione "eval" I

Come aggirare le differenti interpretazioni dei Browser
49. L'istruzione "eval" II

Come aggirare le differenti interpretazioni dei Browser
1. A chi si rivolge questo corso
Il corso che state per seguire si rivolge ai webmaster alle prime armi. Il lettore ideale quello che ha appena terminato di studiare la guida all'HTML e ha incominciato a comporre le sue prime pagine. Nelle seguenti lezioni non verr dunque dato per scontato nulla: non richiesta la capacit di saper programmare, n una grande esperienza nel web publishing. Si tratta di lezioni con una finalit prevalentemente pratica: si vuol far s che il webmaster sia in grado di operare autonomamente con JavaScript, e che quindi sia in grado di comprendere la sintassi, di poter modificare a seconda delle proprie necessit i gadget trovati in rete, e di poter creare autonomamente il codice che gli occorre per le proprie pagine. anche importante sottolineare che l'ottica non quella del "programmatore puro", ma appunto quella del webmaster che si trova ad usare JavaScript per "aggiustare" o "abbellire le proprie pagine: faremo quindi molti esempi inerenti le differenze tra i browser, le diversit di risoluzione del monitor, e analizzeremo molte situazioni di "quotidiano webpublishing". Data la finalit "pratica" molti concetti teorici verranno soltanto accennati, altri verranno volutamente omessi o posticipati (in quanto non ritenuti fondamentali nell'ottica del webmaster o della situazione che si sta analizzando). Pertanto, pur essendo questo corso perfettamente autonomo, chi volesse approfondire gli aspetti teorici al termine della lettura pu utilmente consultare il Corso a JavaScript.
2. Perch usare JavaScript?
Oggi in ogni sito web che si rispetti c' sempre un po' di JavaScript: anche un semplice effetto di "roll-over", magari ottenuto usando un qualche software grafico (FireWorks, Image Ready), nasconde tra le righe del codice HTML un po' di sintassi JavaScript. Infatti, con questo semplice linguaggio di scripting che viene "letto" dal browser, si possono eseguire un'infinit di operazioni che il semplice HTML non permette. Potete: "aggiustare" l'HTML in modo da correggere le imperfezioni che si vedono in un browser (es: Netscape), ma che in un altro browser non ci sono (es: Internet Explorer) scambiare delle immagini (effetto di roll-over) aprire nuove finestre secondarie effettuare controlli sui moduli, per verificare l'input dell'utente eseguire azioni "a tempo" ("dopo 5 secondi vai a quella pagina") aggiungere effetti "dinamici" (oggetti che si muovono in giro per la pagina, ma anche "menu a discesa", "menu a comparsa", ecc) modificare il contenuto di un frameset
e molte altre cose che permettono di aggiungere alle vostre pagine web una serie di effetti che l'HTML da solo non consente. Per rendervi conto di tutto quello che si pu fare con JavaScript sfogliate l'archivio della mailing list JavaScript di HTML.it. La guida che state leggendo ha lo scopo di introdurvi gradualmente alla sintassi di JavaScript: dalle basi, fino a raggiungere una certa autonomia nell'elaborare gli script e creare da soli gli script che vi servono. Ma non si pu per ottenere tutto e subito, e per raggiungere un simile obiettivo dovremo addentrarci all'interno delle strutture logiche di questo semplice e duttile linguaggio.
3. Cosa JavaScript
JavaScript un linguaggio di scripting lato-client, che viene interpretato dal browser. Sembra un affermazione molto astrusa, ma in realt una definizione molto semplice ed efficace. Il web - come ogni webmaster che si rispetti dovrebbe sapere - funziona a due livelli: 1. le pagine web vengono inviate all'utente da un web server, cio da un programma che si trova su un computer remoto, e che per lo pi non fa nient'altro che inviare le pagine a chi ne fa richiesta (in realt pu fare un sacco di altre cose, ma in questo contesto non necessario specificarle...) 2. l'utente da casa visualizza sul proprio browser le pagine che gli sono stato inviate. Un "browser" un programma che permette di leggere le pagine scritte in linguaggio HTML: si tratta di "Internet Explorer", "Netscape Navigator", "Opera" e altri. Quando visualizziamo le nostre pagine web da casa ci sono dunque due computer che si parlano: il server e il client. Alcuni linguaggi di scripting (asp, php, perl) vengono eseguiti dal web server (si chiamano appunto linguaggi server side o lato server). JavaScript, invece, viene eseguito sul nostro computer di casa dal browser ( un linguaggio client side o lato client). Dire che JavaScript un linguaggio lato client, significa anche che i vostri script avranno validit all'interno delle singole pagine web, e non da una pagina all'altra: con JavaScript possibile infatti passare una piccola quantit di dati da una pagina all'altra, ma un'operazione che pu essere effettuata con una certa difficolt (coi linguaggi server side, si esegue invece in maniera intuitiva); non possibile invece trasmettere quantit di dati elevate. Dicevamo inoltre che JavaScript un linguaggio di scripting: questo significa che la sintassi JavaScript potete scriverla direttamente dentro la pagina HTML, senza bisogno di produrre alcun file compilato. Con i linguaggi di programmazione invece (come il C, il C++) si scrive la sintassi, e poi la si passa a un compilatore, che produce un file "compilato", in cui la sintassi scomparsa. Tutti i programmi di windows ad esempio sono dei file compilati, in cui non c' pi traccia della sintassi originaria (cio dei "sorgenti"). JavaScript invece non compilato: potete quindi visualizzare in qualsiasi momento il codice di una pagina HTML e leggere le righe di sintassi JavaScript. Dire che un linguaggio di scripting sottintende dunque il fatto che sia un linguaggio interpretato: come abbiamo visto non esiste nessun compilatore, ma direttamente il browser, tramite un apposito motore di scripting (cio di visualizzazione), che legge le parti di codice JavaScript.
Nota a margine
A dirla tutta il web fatto a tre livelli, e non a due: il client (il pc su cui visualizzate le pagine) il "web server" (il programma che vi spedisce le pagine dal pc remoto) il "database server" (un altro programma che immagazzina i dati e li restituisce, quando vengono richiesti)
Il corso di JavaScript che affronteremo vi servir per aggiungere dinamicit alle vostre pagine web, non per interagire coi database.
4. La storia di JavaScript
Nel 1995 Netscape decise di dotare il proprio browser di un linguaggio di scripting che permettesse ai web designer di interagire con i diversi oggetti della pagina (immagini, form, link, ecc.), ma soprattutto con le applet Java (programmi che permettono di interagire con l'utente). Infatti in quello stesso anno Netscape era particolarmente vicina alla Sun Microsystems (ideatrice di Java), con cui aveva stretto una partnership. Brendan Eich venne incaricato del progetto e invent LiveScript (chiamato cos ad indicare la propria vivacit e dinamicit). Le due aziende il 4 dicembre 1995 annunciarono la nascita di questo nuovo linguaggio, descrivendolo come complementare all'HTML e a Java. La versione beta di Netscape Navigator 2.0 incorporava quindi LiveScript, ma in omaggio a Java - Netscape decise di ribattezzare il nuovo linguaggio di scripting JavaScript. La versione 2.0 di Netscape Navigator fu un grande successo, ma i webdesigner non utilizzarono JavaScript per interagire con le applet java (come avrebbe voluto Netscape), ma piuttosto per rendere pi vive le pagine. in quest'anno che nacque nel web l'effetto di roll-over. Microsoft rispose a JavaScript in due modi: con l'introduzione di VBScript all'interno di Internet Explorer 3 con una propria versione di JavaScript, sotto molti aspetti simile all'originale, chiamata JScript (siamo nel luglio 1996)
JScript dunque la versione di JavaScript supportata da Internet Explorer. A causa di alcune differenze presenti in Internet Explorer 3 Netscape e Sun decisero di standardizzare JavaScript e si affidano all'European Computer Manufacturers Association (ECMA). La stessa associazione che oggi incaricata da Microsoft di standardizzare il C#. La standardizzazione incominci nel novembre 1996 e fu adottata nel giugno 1997 da ECMA e nell'aprile 1998 da ISO (International Organization for Standardization, una delle pi prestigiose organizzazioni internazionali che si occupano di standard). Attualmente siamo alla terza versione di ECMAScript. ECMAScript dunque figlio di JavaScript. E oggi quando si dice JavaScript, JScript ed ECMAscript sostanzialmente si indicano tre variet dello stesso linguaggio. Bisogna poi tener conto che differenti versioni del browser, implementano differenti versioni di JavaScript (la pi recente la 1.4, mentre la 1.5 ancora in beta), quindi il modo di interpretare determinati costrutti potrebbe variare da una sottoversione del browser all'altra. Tutto questo tuttavia non ci deve minimamente preoccupare: si tratta della normale evoluzione (e crescita) di un linguaggio di scripting che si adatta alle diverse esigenze sopraggiunte (dei programmatori e del commercio). La versione di JavaScript comunque pur sempre la 1.x e dunque tra una sottoversione e l'altra non ci saranno degli sconvolgimenti sostanziali. E quando la differenza c' ci penseranno i manuali (o meglio ancora i reference) ad avvertirci.
Per quel che riguarda il futuro del nostro linguaggio, attualmente esistono due proposte di Netscape per JavaScript/ECMAScript (passer del tempo, per prima che le proposte siano riviste e accettate, e prima che i browser siano in grado di leggere le nuove versioni del linguaggio): JavaScript 2.0 e EcmaScript 4 . Un tabella di confronto sulle varie versioni di JavaScript rispetto al browser la potete trovare sul Corso Javascript di HTML.it. Per completezza bisogna inoltre notare, che JavaScript pu anche essere utilizzato per scrivere delle applicazioni server side, nel caso che il web server lo consenta (se, ad esempio, si utilizza iPlanet di Sun): in questo caso JavaScript pu dunque svolgere mansioni analoghe a quelle che normalmente vengono effettuate da php, asp o jsp. L'utilizzo di JavaScript lato server per lo pi un caso sporadico, e comunque non ce ne occuperemo nella presente guida. La sintassi di JavaScript pu essere utilizzata inoltre per scrivere pagine asp, ma questo dipende dalla versatilit di asp, pi che essere una caratteristica di JavaScript.
10
5. JavaScript non Java
Capita sempre di sentire nei forum di html frasi come "Aiutatemi con questo script Java". Per lo pi chi scrive una cosa di questo genere intende "uno script JavaScript". Bene: JavaScript non Java. Il fatto che i due linguaggi abbiano nomi simili solo una trovata di marketing, dovuta all'alleanza tra Netscape e Sun. Una trovata che nel corso degli anni - a dire la verit - ha ingenerato soltanto confusione. Java un linguaggio di programmazione, la cui avvenuta realizzazione fu annunciata nel maggio 1995 da John Gage (direttore dello "Science Office" di Sun Microsystems). Dello stesso anno l'annuncio della realizzazione del browser "HotJava", realizzato apposta per dimostrare le possibilit di questo linguaggio. Alla sua comparsa Java sconvolse il mondo dell'information technology, dal momento che introdusse il concetto rivoluzionario della Virtual machine: un processore virtuale che viene installato sulla macchina (Windows, Macintosh, Linux, o quello che ) e i programmi vengono poi realizzati per quel processore virtuale. In pratica quando vi viene richiesto di installare Java, voi installate sul vostro pc un software che legge (cio che interpreta) i programmi scritti in "Java": questo software appunto la "Java Virtual Machine". Sun diede inoltre la possibilit di inserire la programmazione nel web, attraverso le applet (piccoli programmi in java che si inseriscono nel codice HTML), le quali permettevano finalmente di interagire con le azioni dell'utente (cosa questa che l'HTML non permette). Nacque quindi l'esigenza di integrare meglio le applet, e fu studiato un linguaggio apposito (che - come abbiamo visto - il nostro LiveScript dicembre 1995). Dato il grande successo di Java, LiveScript fu ribattezzato JavaScript, ma i due linguaggi hanno poche cose in comune. Nel corso degli anni Java ha sviluppato una formidabile libreria di oggetti, classi e metodi, che oggi sono la vera forza di questo linguaggio. Oggi con java si realizzano: programmi (come StarOffice e OpenOffice) applet (ma sono in disuso) applicazioni lato server (J2EE, servlet, jsp)
Tutte cose che con JavaScript lato-client non potete fare. Con JavaScript potete intervenire "solo" sulle vostre pagine web. JavaScript e Java si assomigliano un po' nella sintassi (nel modo di richiamare oggetti e le loro propriet tramite il "."), ma l'analogia termina l. In realt si tratta di due mondi complementari, di due linguaggi che fanno cose differenti. Se volete programmare in Java, e non JavaScript quello che vi interessa, potete consultare la Guida Java di HTML.it.
11
6. Gli oggetti
Quando programmate con JavaScript dovete immaginare che la pagina HTML sia formata da vari elementi in varia relazione fra loro. Il browser infatti (con all'interno il documento HTML) pu essere infatti "sezionato" in vari elementi: prima di tutto c' il browser stesso (l'oggetto navigator) poi la finestra che contiene tutto quanto (l'oggetto window) eventuali frames (l'oggetto window.frames) il documento HTML vero e proprio (document) i moduli per raccogliere l'input dell'utente (document.forms["nomeForm"]) le immagini (document.images["nomeImmagine"]) i cookie (document.cookie["nomeCookie"]) i livelli le applet (document.applets["nomeApplet"]) la barra degli indirizzi (location) la barra di stato, nella parte bassa del browser (status)
e via di seguito. Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figli) e tramite JavaScript utilizzando la corretta sintassi - possibile interrogare questi elementi, leggerne le propriet e in taluni casi anche cambiare il valore di queste propriet. Facciamo un esempio. Prendiamo il seguente codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <FORM NAME="mioForm"> <input type="text" name="testoProva" value="paradiclorobenzoro"> </FORM> </body> </html>
La pagina contiene un campo di input text (che in genere serve all'utente per scrivere dei dati). Se volessi conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le propriet utilizzate da JavaScript, non avrei che da scrivere:
document.mioForm.testoProva.value.length
12
che un modo sintetico di scrivere:

window.document.forms['mioForm'].testoProva.value.length
La riga che abbiamo scritto precedentemente significa: "prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form presenti nel documento e facciamo riferimento a quello che si chiama 'mioForm', consideriamo poi il campo chiamato 'testoProva'. Bene. Una volta individuato 'testoProva', prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo campo" Infatti se scriviamo un codice come questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body onLoad="alert(document.mioForm.testoProva.value.length)"> <FORM NAME="mioForm"> <input type="text" name="testoProva" value="paradiclorobenzoro"> </FORM> </body> </html>
al caricamento della pagina vedremo un messaggio che indica la lunghezza di "paradiclorobenzoro". Non vi preoccupate se l'esempio adesso non vi del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte poc'anzi (vedremo subito cosa vuol dire "onLoad" e cosa vuol dire "alert"). L'importante comprendere il concetto, che cio una pagina web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue propriet) in relazione reciproca. Ovviamente la sintassi per richiamare gli oggetti non dovuta al nostro estro, ma - visto che JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio, document.testoProva.length.mioForm.value senza incorrere in errori).
13
7. I metodi
Un altro concetto importante che ognuno degli oggetti del browser ha i propri metodi. Questo equivale a dire che ognuno degli oggetti del browser ha a disposizione determinate azioni e non altre. Facciamo subito un altro esempio, per rendere pi chiaro il concetto. Esiste l'oggetto history che contiene la storia della navigazione dell'utente per quel che riguarda una finestra. Tramite il metodo back() dell'oggetto history possibile mandare indietro l'utente alla pagina da cui arrivato (ovviamente l'utente deve essere arrivato qui a partire da un'altra pagina, altrimenti - se la richiesta diretta non c' pagina verso cui tornare indietro):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <A HREF="#" onClick="history.back()">torna indietro</A> </body> </html>
evidente che il metodo back() proprio dell'oggetto history, e non (per esempio) del campo del form che abbiamo visto prima. Infatti se adattate l'esempio relativo al campo del form e scrivete:
onLoad="document.mioForm.testoProva.back()"
non potrete che ottenere un errore. E inoltre anche se scrivete:

<A HREF="#" onClick="alert(history.value)">torna indietro</A>
otterrete un valore indefinito perch non state interrogando correttamente l'elemento history, che un array. Ma anche se lo interrogaste nella maniera giusta, cio cos (esamineremo in seguito questo tipo di sintassi):
<SCRIPT TYPE="text/javascript"> for (n=0;n<history.lenght;n++) { document.writeln(history[n].value); } </SCRIPT>
14
non otterreste comunque alcun valore, perch - per motivi di sicurezza - non possibile leggere il valore della history di un documento ( possibile con Netscape 4, ma solo con determinati privilegi). Ogni oggetto ha dunque i propri, personalissimi metodi e va interrogato nella giusta maniera. Per ora non analizzeremo tutti i vari elementi che compongono il browser, i loro metodi, e le loro reciproche relazioni, anche perch - come vedremo nella prossima lezione - differenti browser (Netscape e Internet Explorer) e differenti versioni dello stesso browser (Netscape 4 e Netscape 6) hanno sviluppato modelli diversi per concepire le relazioni reciproche di questi oggetti e metodi.
Nota a margine
Abbiamo parlato di oggetti e di metodi come se fossero concetti intuitivi, senza darne una definizione rigorsa. In realt questi termini (oggetti, metodi, classi) sono concetti fondamentali e definiti con estrema precisione nella "programmazione orientata agli oggetti" (Object Oriented Programming "OOP"). Si tratta, appunto, della tecnica usata in tutti i moderni linguaggi di programmazione (C++, Python, Java, C#) che permette di descrivere il comportamento degli elementi presenti nel codice e di attribuire ad essi determinate azioni. Per il momento noi non tratteremo l'approccio ad oggetti, ma bene sapere che JavaScript oltre a fornire la possibilit di interfacciarsi verso gli oggetti predefiniti (quelli del browser che abbiamo visto finora) supporta pienamente la creazione da parte del programmatore di oggetti e metodi personalizzati.
15
8. Il DOM e le problematiche ad esso connesse
Abbiamo detto che un browser organizzato ad oggetti e che questi oggetti sono in vario modo in relazione fra loro. La grossa difficolt della programmazione lato client che differenti browser hanno sviluppato, nel corso degli anni, differenti modelli in cui mettere in relazione gli oggetti. Stiamo parlando del Document Object Model (DOM), il "modello a oggetti del documento". Viene preso come riferimento il document (e non il browser o la finestra), dal momento che il nodo centrale attorno al quale si sviluppano gli altri oggetti e le altre propriet. I primi browser (Netscape 2 e Internet Explorer 3) forniti di JavaScript utilizzavano un DOM molto elementare, che normalmente viene chiamato "livello 0". In breve per, con la diffusione sul mercato dei browser di 4a generazione, i DOM sviluppati da Microsoft e da Netscape divennero ancora una volta - incompatibili fra loro. In pratica il codice scritto per Netscape 4 molto spesso risulta incompatibile con quello di Internet Explorer 4 e viceversa. Microsoft prefer infatti un DOM "flat", cio con tutti gli elementi sullo stesso piano dell'oggetto document. Netscape invece aveva scelto di adottare un DOM particolarmente gerarchico. Questa situazione particolarmente evidente quando si ha a che fare con la sintassi relativa ai livelli. Se, in una pagina HTML, abbiamo un livello di questo tipo:
<div id="mioLiv" style="position:absolute ">livello</div>
per ottenere il nome del livello, la sintassi per Internet Explorer :

document.all.mioLiv.id
o anche:
mioLiv.id
per Netscape 4 invece :

document.layers.mioLiv.id
Di fatto document.all diviene un modo per identificare Internet Explorer, mentre document.layers individua Netscape 4. L'unico modo per programmare per entrambi i browser quello di scrivere la sintassi per l'uno e per l'altro browser. Per risolvere questa situazione di incompatibilit di fatto, il W3C (l'organismo che si occupa di rilasciare le specifiche per il web, come l'HTML) decise di standardizzare il DOM.
16
La prima specifica definitiva (DOM level 1) dell'ottobre 1998; nel dicembre 2001 stata rilasciata invece la specifica relativa al DOM level 2; e attualmente il W3C sta lavorando al DOM level 3. Un gran contributo nei vari procedimenti di standardizzazione stato anche dato dal Web Standards Project (WaSP). Le specifiche sviluppate dal W3C sono quelle di riferimento a cui si stanno adeguando tutti i browser di nuova generazione (di generazione 5 e 6). Attualmente la situazione la seguente:
Browser Netscape 4 Netscape 6 Internet Explorer 4 Internet Explorer 5 / 6
DOM level Level 0/1 (DOM proprietario) level 1 Level 0/1 (DOM proprietario) level 1
Identificazione document.layers document.getElementById document.all document.all, document.getElementById
In pratica viene definito come DOM level 0 quello supportato da Netscape 2 e 3, e da Internet Explorer 3: si tratta di un DOM molto scarno, composto per lo pi da document.images, document.applets, document.forms e pochi altri elementi. Si tratta di una base minimale comune. Il DOM dei due browser si divide poi con i browser di 4 generazione, e pi precisamente con l'introduzione dei livelli all'interno del documento. Si tratta di un DOM intermedio, ibrido, che non pu essere considerato n DOM level 0, n tantomeno DOM level 1 (che ancora non esiste). La specifica del W3C del 1998 stabilisce nuovamente un DOM comune (il DOM level 1, in cui il browser identificato da document.getElementById) a cui sia Microsoft, sia Netscape hanno deciso di adeguarsi (dal momento che entrambe fanno parte del consorzio). Netscape per ha deciso di non mantenere un legame con il proprio passato, ripudiando il proprio precedente DOM: la sintassi scritta per Netscape 4 pu infatti risultare non pi compatibile con Netscape 6. Comunque tutti i browser pi recenti (Internet Explorer 5 e 6, Opera 5 e 6, Netscape 6, Mozilla 1) supportano oramai il DOM level 1 con relativo document.getElementById. Tutta la problematica del DHTML (Dynamic HTML: il linguaggio che congiungendo HTML, CSS e JavaScript permette ai livelli di muoversi all'interno della finestra del browser) nello scrivere sintassi crossbrowser, che vada bene cio sia per Netscape, sia per Internet Explorer ed eventualmente anche per Opera. Nel nostro corso non ci cureremo delle problematiche del DOM, dal momento che per ora avremo modo di utilizzare sporadicamente i livelli. bene per che teniate ben presente che, quando state sviluppando degli script e avete a che fare con i livelli (anche se dovete soltanto cambiare la visibilit da visibile a invisibile o viceversa) dovete attentamente verificare la visualizzazione nei differenti browser, perch potreste avere delle sorprese. Se per esempio dovete cambiare la visibilit (da visibile a invisibile) di un
17
livello vi troverete di fronte a tre differenti sintassi:
Browser Netscape 4 Internet Explorer (4, 5, 6) Internet Explorer 5 e 5 Netscape 6
Sintassi document.layers["mioLiv"].visibility= "hide"; document.all["mioLiv"].style.visibility= "hidden"; document.getElementById("mioLiv").style.visibility= "hidden";
Provate a fare delle prove con questo esempio, togliendo i commenti (le due barre verticali a inizio riga) a seconda del browser. Non vi preoccupate se ancora non comprendete il significato del codice, dal momento che vedremo tutto in seguito:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Esempio</title> <SCRIPT TYPE="text/javascript"> function nascondi() { document.all["mioLiv"].style.visibility="hidden"; /*per Internet Explorer*/ // document.layers["mioLiv"].visibility= "hide"; /*per Netscape 4*/ //document.getElementById("mioLiv").style.visibility= "hidden"; /*per IE 5 / 6 e NN 6*/ } </SCRIPT> </head> <body> <DIV ID="mioLiv" style="position:absolute;backgroundcolor:red;color:white;"> mio livello </DIV> <BR><BR><BR><BR><BR><BR><BR><BR><BR> <A HREF="#" onClick="nascondi()">nascondi</A> </body> </html>
Come potete vedere la sintassi cambia moltissimo a seconda del browser: quindi, quando operate coi livelli, fate attenzione!
18
9. Gli eventi
Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi. Un evento molto semplicemente qualcosa che accade nel documento. Anche nella vita quotidiana un evento qualcosa che accade: ad esempio una tazzina di caff che cade e si rompe. Il documento dunque l'ambiente entro cui vengono realizzate delle "azioni", in parte dovute alla volont dell'utente (passaggio del mouse su un link, click su qualcosa...), altre volte dovute alla situazione contingente (la pagina stata caricata). Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena l'utente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, eccetera. Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilit messe a disposizione degli sviluppatori.Vediamo quali sono quegli eventi che vi capiter pi spesso di incontrare. Come si pu vedere dagli esempi il modo corretto per sfruttare gli eventi quello di inserire l'evento all'interno della sintassi dell'elemento HTML e racchiudere il codice JavaScript tra virgolette. Secondo questo modello:
<ELEMENTO nomeEvento="codice JavaScript">
Abbiamo gi incontrato in precedenza l' "alert" una finestra di dialogo che avverte di qualcosa. Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un alert con scritto "ciao".
Si applica a Evento (elementi maggiormenti usati) BODY IMAGE Descrizione esempio
onLoad
"al <BODY caricamento..." onLoad="alert('ciao');"> L'evento scatta <IMG quanto SRC="miaImmagine.jpg" l'oggetto onLoad="alert('ciao');"> risulta completamente caricato.
onUnLoad
BODY
Applicato al BODY si
<BODY onUnLoad="alert('ciao');">
19
verifica quando onUnLoad="alert('ciao');"> il browser "scarica" il documento. Cio alla chiusura del documento. onMouseOver A AREA INPUT (submit, reset,button, checkbox, radio,option) "al passaggio del mouse". Si verifica quando l'utente passa il mouse su un'area sensibile (link o mappa). Con IE 5+ questo evento pu essere associato anche a TD, TR, eccetera onMouseOut A AREA INPUT (vedi sopra) "quando il mouse esce". Si verifica quando l'utente con il mouse esce al di fuori dell'area sensibile (link o mappa). Con IE 5+ questo evento pu essere associato anche a TD, TR, eccetera onClick A AREA INPUT "al click del mouse..." Avviene quando l'utente clicca sull'elemento <A onClick="alert('ciao');" HREF="pagina.html"> <A onMouseOut="alert('ciao');" HREF="pagina.html"> <A onMouseOver="alert('ciao');" HREF="pagina.html">
onKeyPress
A AREA INPUT
Si verifica <TEXTAREA quando si onKeyPress="alert('ciao');"> all'interno </TEXTAREA> dell'elemento e viene premuto un tasto della
20
DIV onChange
tastiera.
INPUT Si verifica <SELECT TYPE="SELECT" quando onChange="alert('ciao');"> l'elemento <OPTION>uno subisce un <OPTION>due cambiamento a <OPTION>tre seguito </SELECT> dell'azione dell'utente. FORM Quando viene <FORM NAME="mioForm" eseguita l'invio ACTION="http://...." del form onSubmit="alert('ciao');"> (tramite bottone o tramite invio da tastiera). "quando <BODY l'elemento ha il onFocus="alert('ciao');"> focus..." (Provate la sintassi di questo Entra in azione esempio con altre finestre non appena del browser aperte, e l'elemento provate a passare dalla attivo. vostra pagina alle altre finestre e viceversa) "quando <BODY l'elemento non onBlur="alert('ciao');"> pi attivo..." Viene richiamato quando l'elemnto smette di essere attivo.
OnSubmit
onFocus
A INPUT BODY
onBlur
A INPUT BODY
Un discorso a parte merita l'evento onFocus, che spesso suscita dell perplessit. "onFocus" significa "quando l'elemento focalizzato": significa che in quel momento attivo quel determinato elemento della pagina HTML. Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha il focus: il link o la mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se l'elemento focalizzato, si trova nello stato "ACTIVE"). Anche nel caso delle finestre del browser facile accorgersi di quando un elemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto azzurra (o del colore definito dall'utente), in caso contrario grigia. onBlur semplicemente il contrario di onFocus: quando l'elemento che aveva il focus lo perde (perch l'attenzione dell'utente si concentrata su altro) viene azionato l'evento onBlur.
21
da notare che a uno stesso elemento possono essere attribuiti pi eventi Ad esempio:
<A onMouseOver="alert('passaggio sul link');" onMouseOut="alert('uscita dal link');" onClick="alert('click sul link');" HREF=pagina.html>testo del link </A>
(Certo l'alert non l'ideale per far interagire i tre eventi fra loro, ma l'importante aver compreso il concetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il proprio codice da eseguire). Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventi pi noti e pi usati. Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Per esempio, un livello in Internet Explorer 6 dotato di tutti i seguenti eventi (come si pu vedere non c' l'evento onLoad, n onSubmit, perch riferiti a un livello non avrebbero alcun senso): onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove, onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste, onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart, oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup, onresizestart, onmouseover, onmouseleave, onmoveend, onresize, ondrop, onpage, onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut, onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout, onmouseenter, onlayoutcomplete, onafterupdate, ondragleave Chi fosse interessato a una classificazione pi esauriente degli eventi pu consultare il Corso JavaScript
NOTA A MARGINE
Chi volesse sapere come ho ricavato tutti gli eventi mensionati sopra, sappia che per ricavarli ho utilizzatoquesto codice JavaScript. sufficiente inserirlo nel BODY del documento:
<DIV id="mioLiv" style="position:absolute"></DIV> <SCRIPT TYPE="text/javascript"> for (prop in document.all.mioLiv) { if (prop.indexOf("on")==0) document.write (prop+"<BR>"); } </SCRIPT>
22
10. Dove scrivere il codice
Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze. Per scrivere la sintassi sufficiente aprire il tag <SCRIPT>. Il codice JavaScript va inserito tra l'apertura e la chiusura del tag. Cos:
<SCRIPT> alert("ciao"); </SCRIPT>
Per facilitare il lavoro del browser, opportuno esplicitare nella dichiarazione il tipo di linguaggio da noi usato:
<SCRIPT type="text/javascript"> alert("ciao"); </SCRIPT>
Fino a qualche tempo fa non si usava l'attributo type per specificare il linguaggio, era in voga invece l'utilizzo dell'attributo language. Cos:
<SCRIPT language="JavaScript"> alert("ciao"); </SCRIPT>
Il W3C (l'organo internazionale preposto alla standardizzazione dei linguaggi del Web) ha per precisato che pi corretta la notazione con type, mentre l'utilizzo di language deprecato: significa che tutti i browser sono in grado di interpretare correttamente <SCRIPT language="JavaScript">, e dunque la pagina verr visualizzata correttamente anche se usiamo questa sintassi, ma preferibile usare <SCRIPT type="text/javascript">. Abbiamo detto che il tag <SCRIPT> (che contiene la sintassi da noi elaboarata) pu essere incluso tanto nel BODY, quanto nella HEAD del documento: inseriremo il tag SCRIPT nella HEAD ogni volta che sar possibile. buona norma infatti separare il codice dello scripting dal codice HTML della pagina vera e propria, in modo da mantenere la pagina pi leggibile inseriremo il tag SCRIPT nel BODY della pagina, ogni volta che la sintassi JavaScript sia necessaria per visualizzare il layout della pagina stessa. Pu capitare infatti che il codice HTML venga scritto attraverso JavaScript: in questo caso bene che la sintassi che completa la visualizzazione di un punto della pagina venga scritta in quel determinato punto
Quando scriveremo del codice nella head del documento ci capiter per lo pi di avere a che fare con delle funzioni. Vedremo pi avanti di cosa si tratta. importante tuttavia accennare gi ora che le funzioni possono essere richiamate attraverso un evento. Cos:
23
<A HREF="http://www.html.it" onMouseOver="miaFunzione();">
Oppure attraverso un richiamo diretto all'interno del link, con un effetto analogo all'evento onClick (la funzione dunque entra in azione quando si clicca sul link). Cos:
<A HREF="javascript:miaFunzione();">
Oramai sono pochi i browser obsoleti che non supportano i linguaggi di scripting, in ogni caso buona norma quella di usare i commenti per "nascondere" il codice JavaScript ai quei browser che non sono in grado di interpretarlo. Pi ancora questa tecnica utile con i motori di ricerca, che - ai fini dell'indicizzazione - non "catturano" mai tutta la pagina HTML, ma soltanto parte di essa. Inoltre i motori di ricerca sono del tutto incapace di leggere il codice di scripting. Inutile dunque che essi catturino delle righe che non sono poi in grado di leggere: opportuno che essi vedano soltanto quella parte della pagina in grado di produrre un qualche risultato di posizionamento. Per "nascondere" il codice JavaScript usiamo duque questa sintassi:
<SCRIPT type="text/javascript"> <!-alert("ciao"); //--> </SCRIPT>
Abbiamo quindi racchiuso il codice JavaScript all'interno dei commenti dell'HTML, con una particolarit: la chiusura del commento HTML preceduto da un "commento-JavaScript" (//). Questo avviene per evitare che i browser che interpretano il codice fraintendano l'indicazione e vedano la chiusura del commento HTML (-->) come codice JavaScript da interpretare. L'indicazione "//-->" pu dunque essere scomposta in due parti: "//" nasconde la riga ai browser che interpretano JavaScript "-->" chiude il commento HTML per i browser che non interpretano JavaScript
Note a margine
In taluni casi anche utile specificare la versione di JavaScript che si sta usando. In questo caso si deve usare l'attributo language (e non type) in questo modo:
<SCRIPT language="javascript 1.2"> alert("ciao"); </SCRIPT>
Si tratta di una precisazione per lo pi superflua (<SCRIPT type="text/javascript"> pi che sufficiente), ma che in particolari situazioni pu tornare utile. Si confrontino per esempio queste due sintassi con Netscape 4.x:
24
<SCRIPT language="JavaScript"> alert("1"==1); //d "true" </SCRIPT>
e:
<SCRIPT language="JavaScript1.2"> alert("1"==1); // d "false" </SCRIPT>
Le due sintassi danno luogo a due valori differenti, pur essendo identiche, perch la Netscape decise a un certo punto (appunto con JavaScript 1.2) che l'uguaglianza tra due dati fosse vera soltanto nel caso in cui i due dati fossero uguali sia nel tipo, sia nel valore. Nel nostro caso il valore lo stesso (1), ma i tipi sono diversi (a sinistra dell'uguale c' un valore letterale, a destra un valore numerico). Questa strada stata poi nuovamente abbandonata con JavaScript 1.3 e successive versioni. Ed ecco spiegata la ragione per cui il risultato diverso soltanto nel caso in cui si espliciti di voler usare Javascript 1.2. Quanto all'integrazione di JavaScript all'interno della pagina, dal punto di vista terorico c' una terza via (oltre agli venti e al richiamo nel link), che consiste nell'inserire la sintassi JavaScript (ad esempio una variabile) direttamente all'interno dei tag HTML. Cos:
<TD width="&{miaVariabile};%">
in pratica invece questa sintassi sembra funzionare con il solo Netscape 4.x.
25
11. Il tag NOSCRIPT
Abbiamo visto che alcuni browser particolarmenti obsoleti e i motori di rcierca non leggono JavaScript. il caso di aggiungere che JavaScript pu essere disabilitato anche dall'utente. In Netscape (4.x e 6.x) ad esempio basta andare in: Modifica > Preferenze > Avanzate per avere la possibilit di abilitare e disabilitare JavaScript (in Netscape 4, disabilitando JavaScript si disabilitano automaticamente anche i fogli di stile). Per prevenire queste eventualit, il caso di predisporre la pagina in modo che sia visualizzata correttamente anche nel caso in cui l'utente (o il browser o il motore di ricerca) non sia in grado di visualizzare correttamente la sintassi. sufficiente utilizzare il tag NOSCRIPT e racchiudervi all'interno il contenuto alternativo da visualizzare. All'interno del tag NOSCRIPT pu essere utilizzata la sintassi HTML per visualizzare messaggi o addirittura un layout alternativo.Attenzione per a non proporre intere pagine all'interno del tag, perch questo andrebbe a discapito del peso della pagina. Ecco un esempio:
<NOSCRIPT> <DIV ALIGN="center"> <H3><FONT FACE="Verdana,Arial,Helvetica,sans-serfi">Per visualzzare correttamente il contenuto della pagina occorre avere JavaScript abilitato.</FONT></H3> </DIV> </NOSCRIPT>
Il tag NOSCRIPT pu essere posizionato in vario modo. Nel caso in cui usiate pesantemente JavaScript in tutta la pagina e ci siano parti del sito che non funzionano senza di esso, vi conviene inserire un unico avvertimento in tutto il documento html. In questa situazione, non il caso che utilizziate NOSCRIPT ogni volta che utilizzate SCRIPT: i due tag non vanno necessariamente in coppia. invece opportuno inserire NOSCRIPT in un punto strategico della pagina, all'interno per esempio di uno spazio vuoto ben visibile, o prima del blocco che contiene il testo principale. Tuttavia abbiamo detto che JavaScript pu essere usato anche per scrivere l'HTML, nel caso in cui vi troviate in una situazione di questo genere, vi conviene - diversamente dalla situazione precedente - usare NOSCRIPT per completare e concludere il layout, anzich visualizzare degli avvertimenti. Ad esempio:
<TABLE>
26
<TR> <TD> </TD> </TR> <SCRIPT type="text/javascript"> document.write("</TABLE>"); </SCRIPT> <NOSCRIPT> </TABLE> </NOSCRIPT>
document.write serve per scrivere nella pagina. Lo vedremo in seguito. Nell'esempio che abbiamo visto or ora non serve avvertire l'utente che deve avere JavaScript abilitato: serve invece chiudere la tabella anche nel caso in cui il browser non legga il contenuto del tag <SCRIPT>, e possiamo farlo appunto - grazie al tag <NOSCRIPT>. Da notare che la maggior parte degli utenti sono in posssesso di un browser in grado di leggere JavaScript (lo sono tutti i brower a partire da Netscape 2 ed Internet Explorer 3). Pochissimi di loro (attualmente il 2%), leggendo le indicazioni su riviste o rubriche di informatica avranno disabilitato JavaScript pensando di migliorare la propria sicurezza online.
Tag NOSCRIPT e i motori di ricerca

I motori di ricerca invece sono del tutto ciechi rispetto a JavaScript e anzi interpretano perfettamente il contenuto del tag NOSCRIPT, tanto che molto spesso nelle pagine che restituiscono i risultati (a seguito della ricerca) si vede nella descrizione dei siti fornita dal motore indicazioni sul fatto che "le pagine del sito utilizzano JavaScript..." Attenzione dunque a quello che scrivete all'interno del tag NOSCRIPT. Il tag NOSCRIPT funziona in modo del tutto analogo al tag NOFRAMES e dunque pu essere uno strumento prezioso per migliorare il posizionamento nei motori di ricerca di pagine che utilizzano intensamente JavaScript. Cerchiamo di capire meglio come funziona questo tag. I motori di ricerca sono paragonabili a dei browser testuali particolarmente obsoleti, in grado di leggere per lo pi il contenuto delle pagine e poco altro. Ignorano dunque il tag <SCRIPT> e - se abbiamo utilizzato i commenti all'interno del tag SCRIPT per nascondere il codice - ignorano anche le righe di codice JavaScript. Neanche il tag <NOSCRIPT> sanno cosa voglia dire, ma semplicemente riconosono come familiare la sinatssi HTML all'interno del tag NOSCRIPT e quindi la leggono e la inseriscono nei propri indici. Insomma di tutta la sintassi:
<SCRIPT> <!-// codiceJavaScript //--> </SCRIPT> <NOSCRIPT> codice HTML </NOSCRIPT>
27
i motori di ricerca (e i vecchi browser) non capiscono quasi niente: interpretano soltanto il codice html compreso all'interno del tag NOSCRIPT. Si tratta anche di un comportamento logico: infatti al tempo dei vecchi browser, JavaScript ancora non era stato inventato, e dunque essi non avevano modo di sapere che cosa fosse. In realt sono i browser "moderni" ad essere in grado di interpretare correttamente il rapporto tra SCRIPT e NOSCRIPT, e conoscendone il funzionamento, non visualizzano il contenuto all'interno del NOSCRIPT (o al contrario lo visualizzano quando JavaScript viene disabilitato).
28
12. Includere un file esterno
Nel caso in cui lo stesso JavaScript venga ripetuto in pi pagine, pu essere utile includere il codice in un file esterno. Questo ci permette di: scrivere le correzioni, migliorie, variazioni in unico file; senza dover modificare tutte le pagine che utilizzano quella sintassi migliorare la velocit di visualizzazione delle pagine, dal momento che il file (come le immagini e i fogli di stile esterni) viene memorizzato nella cache del browser
Si tratta di prender tutto il codice Javascript elaborato e inserirlo in un file di testo vuoto. sufficiente mettere il codice cos com' senza nessun preambolo. Potremmo inserire, ad esempio, anche soltanto:
alert("ciao");
Il file va poi salvato con estensione ".js". Avvertenza: per visualizzare le estensioni dei file dovete andare in un cartella del vostro computer e poi utilizzare i comandi: strumenti > opzioni cartella > visualizza e assicurarvi che la voce "Nascondi l'estensione dei file conosciuti" non sia selezionata. Infine schiacciate il bottone che dice di applicare le impostazioni a tutte le cartelle. importante che siate in grado di identificare l'estensione dei file. Un errore tipico dei principianti quello di creare dei file che si chiamano "nomeFile.js" ed in realt hanno estensione ".txt" (il file errato sarebbe quindi "nomeFile.js.txt", mentre voi dovete creare il file "nomeFile.js"). Una volta che avete creato il file "js", non vi resta che includerlo nelle pagine. La sintassi :
<SCRIPT type="text/javascript" src="mioJavascript.js">
L'attributo src deve contenere l'indicazione del percorso (assoluto o relativo) del file, come per le immagini. Non ci sono particolari accorgimenti per il procedimento di inclusione di JavaScript: il tag NOSCRIPT pu essere utilizzato nel solito modo con gli stessi risultati. Da notare che in pratica quello che stiamo facendo includere un file di testo "lato client" (dal momento che il codice JavaScript a tutti gli effetti semplice testo), secondo un procedimento analogo all'inclusione di fogli di stile esterni.
29
13. I Commenti
Dovreste gi conoscere i commenti dell'HTML ( per la chiusura). In JavaScript i commenti si fanno in modo diverso, e se usaste i commenti dell'HTML all'interno del codice JavaScript incorreste in un errore (fatto salvo il caso che abbiamo analizzato prima, in cui i commenti vengono utilizzati per nascondere il codice ai motori di ricerca). JavaScript ha due tipi di commenti (nel corso delle lezioni precedenti li abbiamo gi visti qualche volta):
Tag di Apertura // Tag di chiusura non si chiude Descrizione un commento veloce, che deve essere espresso in una sola riga senza andare a capo Si usa per scrivere commenti su pi righe
/*
*/
Ecco un esempio:
<SCRIPT type="text/javascript"> // questo un commento su una sola riga /* questo un commento che sta su pi righe, serve nel caso in cui ci siano particolari esigenze esplicative Esempio di codice: alert("ciao"); */ </SCRIPT>
Come si vede il codice JavaScript inserito all'interno dei commenti non viene eseguito. Si tratta di una caratteristica utile, perch ci permette di commentare / decommentare porzioni di codice di cui non conosciamo ancora l'esattezza o l'efficacia. I commenti sono indispensabili per mantenere il codice ordinato e leggibile. Bisogna sempre tenere sempre presente che - a differenza dell'HTML JavaScript un linguaggio di scripting: non esitono dunque degli editor visuali in grado di ricostruire la pagina e guidarvi all'interno di centinaia di righe di codice. Coi commenti possiamo dunque documentare e rendere comprensibile ogni passaggio della nostra programmazione. Ad esempio:
<SCRIPT type="text/javascript">
30
/* inizio blocco di codice per individuare il sistema operativo*/ // codice JavaScript... /* inizio blocco di codice per individuare il browser*/ // codice JavaScript... /*se Internt Explorer esegui questo...*/ //eccetera </SCRIPT>
Molti programmatori - per pigrizia - non inseriscono i commenti, ma alla lunga una strategia perdente, perch lo stesso individuo, a distanza di mesi, pu aver difficolt a riconoscere e interpretare il codice che lui stesso ha scritto. Evidentemente i commenti diventano tanto pi necessari, quando si lavora in gruppo.
31
14. Come scrivere nella pagina
Scrivere nella pagina Uno dei metodi pi importanti di JavaScript il metodo write che si riferisce all'oggetto document (la pagina). Questo metodo ci consente di scrivere all'interno di una pagina HTML usando JavaScript. Vediamo subito un esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Come si pu vedere la sintassi : Il punto e virgola invece non c'entra con il metodo write, ma indica soltanto quello che vogliamo scrivere deve essere racchiuso tra virgolette (significa che l'istruzione terminata. che si tratta di una sequenza di caratteri, ovvero di una stringa), oppure devequesto metodo possiamo scrivere anche del codice HTML: matico in Con trattarsi di una valore che JavaScript pu convertire in auto una stringa, come un numero:
32
</body> </html>
NB: la riga javascript non va a capo Se il codice HTML (o la scritta) all'interno del metodo document.write() contiene delle virgolette queste devono essere precedute dal "back-slash" (cio \ ). Si tratta del cosidetto "carattere di escape", vedremo in seguito di chiarire meglio il suo utilizzo. Dobbiamo ricordare ancora una volta che i motori di ricerca non leggono JavaScript, e che quindi bene scrivere il codice HTML attraverso questo linguaggio soltanto nel caso in cui abbiamo delle ragioni particolari per farlo. Se volete approfondire la conoscenza del metodo document.write(), potete consultare un articolo di PRO.HTML.it in cui viene spiegato come utilizzando i JavaScript esterni e il document.write() sia possibile creare delle vere e proprie inclusioni lato-client di intere parti della pagina.
33
15. Il debugger: trovare gli errori
Vi capiter di scrivere delle porzioni di codice pi o meno complesse, e vi capiter senz'altro di fare degli errori. Se dimenticate un punto e virgola, se non chiudete le virgolette, o dimenticate una parentesi... in tutti questi casi state commettendo un errore e non vi funzioner pi nulla. Anzi: Internet Explorer visualizzer un messaggio di errore in basso a sinistra (una specie di triangolino giallo). Come fare quindi? Niente paura: tutti i principali browser hanno incorporato un debugger, uno strumento cio che vi permette di individuare i "bugs" (letteralmente gli insetti): i vostri errori nel programma. Proviamo ad esempio a scrivere white al posto di write:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
Non riconoscendo il metodo, il browser vi segnaler un errore. Vediamo ora come attivare il debugger e individuare l'errore.
34
selezionare report JavaScript errors
Se visualizziamo la pagina di prima, con il debugger attivo otteniamo il seguente messaggio di errore: "Linea 10. Errore: l'oggetto non supporta questo metodo o propriet" A questo punto, se usiamo il Blocco note di Windows siamo costretti a contare le righe a mano, ma se usiamo qualche altro software un po' pi evoluto (HomeSite, oppure FirstPage - quest'ultimo gratis) baster selezionare l'opzione che visualizza il numero delle righe per visualizzare in tutta comodit la riga contenente l'errore (per lo pi l'opzione viene azionata o disabilitata da un tasto con il simbolo convenzionale "#"). Grazie alle indicazioni del debugger possiamo individuare e correggere gli errori anche in codici molto pi complessi di quello utilizzato nell'esempio. Un'avvertenza: poich browser diversi hanno caratteristiche differenti (come abbiamo visto), ogni browser visualizzer differenti messaggi di errore a seconda del codice. Se nella stragrande maggioranza dei casi i browser si comporteranno nello stesso modo, dovete prestare particolare attenzione in quei casi in cui elaborare JavaScript che riguardano i livelli, o in tutti quei casi in cui il DOM dei vari browser non coincida. Per ora abituatevi ad eseminare la stessa pagina con diversi browser: se non compaiono messaggi di errore strani tutto va bene, in caso contrario preoccupatevi di individuare e correggere l'errore. Curiosit: Sulla parola "bug" ("insetto") c' un aneddoto divertente. Il 9 settembre del 1945 Grace Murray Hopper (ufficiale e matematica di gran valore) che prestava servizio in Virginia presso la marina militare degli Stati Uniti stava cercando di trovare l'errore che inceppava il computer basato su un sistema Harvard Mark II, quando trov un insetto che girovagava allegramente in mezzo ai circuiti e che era la causa del malfunzionamento. Da allora il termine "bug" entr nell'informatica per indicare un errore di programmazione. Potete leggere tutta la vicenda nella Storia di Grace Murray Hopper.
35
16. Le finestre di dialogo
JavaScript in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche "finestre incorporate", "finestre modali", o "finestre di dialogo"), che avremo modo di utilizzare pi volte nei nostri script (soprattutto l'alert).
Alert
Abbiamo gi incontrato l'alert diverse volte nel corso delle nostre lezioni e si tratta senz'altro della finestra che vi capiter di utilizzare pi spesso: l'alert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione dell'utente finch egli non d il suo benestare cliccando sul bottone. La sintassi :
alert("messaggio");
Il contenuto dell'alert deve essere sempre una stringa (cio una sequenza di caratteri), il che vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei numeri). Come per il document.write(), se dovete usare delle virgolette all'interno del messaggio bene che usiate i caratteri di escape (cio il back-slash), onde evitare gli errori. Ad esempio:
alert("Marco disse \"Ciao Mondo!\"");
Ecco un esempio di alert:

<A HREF="http://www.html.it" onClick="alert('Stai per uscire');" TARGET="_blank">testo link</a>
Come si pu vedere, finch l'utente non clicca su "ok", la pagina non va verso il link indicato. Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di "chiudere prematuramente" il contenuto dell'evento onClick.
Confirm
una finestra che pone una domanda e chiede conferma dando la possibilit di scegliere tra due opzioni ("ok" e "annulla"). La sintassi :
confirm("messaggio");
Mentre l'alert concede una sola possibilit di scelta ("ok"), il confirm d la possibilit di scegliere tra due opzioni:
<A HREF="http://www.html.it" onClick="confirm('Sei sicuro di voler uscire dalla pagina?');" TARGET="_blank">testo link</a>
36
Prompt
una finestra che pone una domanda e consente all'utente di dare la risposta che vuole. Pu avere anche un valore di risposta predefinito. La sintassi :
prompt("domanda","risposta predefinita");
la risposta predefinita facoltativa. Ad esempio:

<body onLoad="prompt('Come ti chiami?');">
o anche:
<body onLoad="prompt('Come ti chiami?','inserisci qui il tuo nome');">
Per visualizzare il nome dell'utente nella pagina dovremo poi "catturarlo" in qualche modo. Vedremo pi avanti come fare. Nota a margine Nell'ottica in cui abbiamo affrontato il corso finora bene specificare che in realt le finestre modali sono metodi dell'oggetto "window". Quindi la sintassi estesa per visualizzare le finestre modali dovrebbe essere:
window.alert("messaggio"); window.confirm("messaggio"); window.prompt("domanda","risposta predefinita");
37
17. Le finestre personalizzabili
Le finestre che abbiamo visto nella lezione precedente sono finestre di sistema. Hanno una grafica minimale e pre-impostata, che di solito va scarsamente d'accordo con un sito dalla grafica accattivante in cui viene studiato ogni minimo particolare. Con JavaScript possiamo creare delle finestre personalizzate che si adattino alle nostre esigenze. La sintassi questa:
window.open('percorso','nome finestra','caratteristiche separate da virgola');
Percorso Nome finestra
Indica un percorso (relativo o assoluto) di un file html da inserire all'interno della finestra Indica il nome della finestra che abbiamo creato (opzionale) Specifica la forma, la dimensione e la posizione della finestra, possiamo anche far s che la finestra non sia ridimensionale, o che non ci siano le barre degli strumenti e le barre di scorrimento.
Caratteristiche separate da virgola
Abbiamo quindi la possibilit di specificare tre diversi parametri che ci permettono di creare una finestra che si adatti alle nostre esigenze. Il fatto che ciascun parametro sia indicato tra virgolette (semplici o doppie, non importa) ci dice inoltre che ci troviamo di fronte a delle stringhe (sequenze di caratteri). Ognuno di questi parametri pu essere lasciato vuoto, ma la sua presenza va comunque indicata. Cos:
window.open('','','');
La sintassi qui sopra apre una finestra vuota. Vediamo un esempio concreto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <SCRIPT TYPE="text/javascript"> window.open('http://www.html.it','miaFinestra',''); </SCRIPT> </body> </html>
Come abbiamo visto nel corso delle lezioni precedenti possiamo applicare anche la sintassi JavaScript agli eventi. Ad esempio questa sintassi apre un'ulteriore finestra secondaria al click del mouse. Abbiamo dunque
38
realizzato la possibilit di cambiare due link con un solo click:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="http://pro.html.it" onClick="window.open('http://www.html.it','miaFinestra','');">due link on un solo click</A>
Ovviamente possibile associare la capacit di aprire finestre secondarie anche ad altri eventi. Ad esempio con:
<BODY onLoad="window.open('http://www.html.it','miaFinestra','');">
la finestra secondaria si apre all'apertura della pagina. E con:

<BODY onUnLoad="window.open('http://www.html.it','miaFinestra','');">
la finestra si apre invece alla chiusura della pagina. bene per non esagerare con l'apertura selvaggia di finestre secondarie (le cosiddette "pop-up"), perch gli utenti di solito non le amano molto e le chiudono appena possibile. Inoltre esistono alcuni software che consentono all'utente di impedire che i siti web aprano delle finestre secondarie nelle pagine in cui essi stanno navigando. Per quel che riguarda il secondo parametro (il nome della finestra) da dire che, se il metodo window.open viene richiamato due volte all'interno della stessa pagina ed esiste gi una finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il contenuto della finestra gi esistente (e se la seconda finestra ha caratteristiche diverse dalla prima, le nuove caratteristiche vengono ignorate, in quanto la finestra gi stata "formata"). Inoltre se la finestra ha un nome, questo nome pu essere usato come valore dell'attributo "target" nei tag "A" e "FORM". quindi possibile ricaricare il contenuto di una finestra secondaria, semplicemente specificando il "target" del link nella finestra principale. Un esempio chiarir tutto:
39
<A HREF="#" onClick="window.open('http://www.html.it','finestra','');">prima finestra</A><BR> <A HREF="#" onClick="window.open('http://pro.html.it','finestra','');">seconda finestra</A><BR> <A HREF="http://freephp.html.it" target="finestra">ricarica il contenuto</A><BR> </body> </html>
Le caratteristiche della finestra le esamineremo nella lezione successiva.
Note a margine
Come i pi accorti avranno notato window.open() anch'esso un metodo dell'oggetto window, come window.alert(), window.confirm() e window.prompt. Pi precisamente il metodo window.open() ha quattro argomenti, non tre:
window.open('percorso','nome finestra','carrateristiche separate da virgola','cronologia');
L'ultimo argomento serve solo nel caso in cui il contenuto di una finestra debba essere ricaricato: si pu allora specificare se il nuovo valore deve sostituire il valore precedente nella cronologia, o se piuttosto deve essere inserito un nuovo valore nella cronologia. In questo caso (e solo in questo caso) bisogner specificare:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>esempio</title> </head> <body bgcolor="#FFFFFF" text="#000000" > <A HREF="#" onClick="window.open('http://www.html.it','finestra','');">prima finestra</A><BR> <A HREF="#" onClick="window.open('http://pro.html.it','finestra','',true);">seconda finestra</A><BR> </body> </html>
(cancellate la cronologia del vostro browser e osservate l'esempio, inserendo oppure omettendo il quarto parametro). Nella maggior parte delle situazioni in cui vi verrete a trovare il quarto argomento potr essere tranquillamente omesso.
40
Ultima considerazione
Per rendere pi intuitivi i concetti abbiamo spesso parlato di "parametri". Chi conosce gi la programmazione sa che questo scorretto, molte volte avremmo dovuto parlare di "argomenti". Tuttavia preferisco spiegare soltanto in un secondo momento che cosa sono gli "argomenti" e quindi ho preferito utilizzare una terminologia imprecisa, ma di pi immediata comprensione.
41
18. Le caratteristiche delle finestre personalizzabili
Finora abbiamo esaminato la seguente sintassi:

window.open('percorso','nome finestra','valori separati da virgola');
in cui i primi due parametri ci permettono di specificare il percorso del file html e il nome della finestra. Abbiamo detto che il terzo parametro (l'ultimo della lista) ci permette di creare una finestra "come vogliamo noi". Per farlo sufficiente impostare una serie di caratteristiche separate dalla virgola (ognuna di queste variabili si pu inserire oppure omettere e non comparir). Ad esempio: La sintassi questa:
window.open('http://www.html.it','miaFinestra','width=300,height=300 ,toolbar=yes, location=no,status=yes,menubar=yes,scrollbars=no,resizable=no');
NB la riga precedente non va a capo L'esempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra del menu, la barra di stato (quella in basso), ma senza la barra degli indirizzi; la finestra non pu essere inoltre ridimensionata. Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla finestra:
Caratteristica width height left top resizable fullscreen channelmode Valore numerico numerico numerico numerico yes / no yes / no yes / no Spiegazione Esempio
La larghezza della finestra in width=400 pixel L'altezza della finestra in pixel La distanza dalla sinistra del monitor height=200 left=300
La distanza dal lato superiore top=350 del monitor Indica se la finestra pu essere ridimensionata o no Indica se la finestra va aperta a tutto schermo Indica se la finestra deve essere aperta "in modalit canale" (solo per IE) La barra del menu (quella con scritto "File", "Modifica", ecc.) La barra degli strumenti del browser (con i pulsanti "indietro", "avanti") resizable=no fullscreen=no channelmode=no
menubar
yes / no
menubar=no
toolbar
yes / no
toolbar=no
42
location scrollbars status
yes / no yes / no yes / no
La barra degli indirizzi del browser Le barre di scorrimento laterali La barra di stato (quella in basso)
location=no scrollbars=no status=no
Come si pu intuire dagli esempi, la sintassi deve avere la forma: caratteristica=[valore] inoltre, come detto pi volte, le varie caratteristiche devono essere separate dalla virgola. Ad esempio con:
<A HREF="javascript:window.open('http://www.html.it','','fullscreen=yes');">apri a tutto schermo</A>
Si apre una finestra a schermo intero (che pu essere chiusa dall'utente solo utilizzando la combinazione di tasti Ctrl + W o ALT + F4). Invece con:
window.open('sponsor.htm', '', 'width=220,height=220,scrollbars=no');
si apre una finestra analoga alla "finestra dello sponsor di HTML.it". Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre possiamo inoltre tener presente due scorciatoie. 1. Quando una caratteristica viene omessa il suo valore: o o o o viene impostato a "0" nel caso di left e top viene impostato sull'intera grandezza dello schermo nel caso di width e left viene automaticamrnte impostato su "no" in tutti gli altri casi la forma "caratteristica=yes" pu anche essere scritta semplicemente con "caratteristica". Ad esempio:
window.open('http://www.html.it','','fullscreen');"
2. Quando una caratteristica viene impostata su "yes"
Quindi al posto di:

window.open('sponsor.htm', '', 'width=220,height=220,left=0,top=0,resizable=no,menubar=yes,toolbar=yes, scrollbars=no,locations=no,status=no');
NB La riga precedente non va a capo. baster scrivere:

window.open('sponsor.htm', '', 'width=300,height=300,menubar,toolbar');
43
19. Le variabili
Conviene immaginare le variabili come delle "scatole" all'interno delle quali immagazzinare dati. In JavaScript per creare delle variabili sufficiente assegnare un contenuto. Cos:
mioNome="Wolfgang";
Come si vede dall'esempio, l'espressione che crea una variabile composta da tre parti: nome della variabile (mioNome) operatore di assegnamento (=) contenuto ("Wolfgang")
Volendo anche possibile esplicitare la creazione della variabile, al fine di rendere pi chiara la sintassi. Cos:
var mioNome; // creo una variabile che si chiama "mioNome" mioNome="Wolfgang"; //assegno a mioNome il contenuto "Wolfgang"
Una variabile potr contenere qualsiasi tipo di dati valido e cio:

Tipo di dati Numero Numero a virgola mobile Stringa Spiegazione Qualsiasi valore numerico Numeri con virgola Qualsiasi valore letterale. una sequenza di caratteri, racchiusa tra virgolette. uno speciale tipo di dato che indica lassenza di alcun valore ( il nulla). Non lo zero. uno tipo di dato che indica uno stato. Di fatto un valore booleano pu assumere solo due valori: acceso (vero), spento (falso). il classico interruttore della luce. Esempio miaVariabile=300; miaVariabile=12.5; miaVariabile= Wolfgang; miaVariabile=null; Vero: miaVariabile=true; miaVariabile=1; Falso: miaVariabile=false; miaVariabile=0;
null
booleano
Esiste anche un tipo di dati particolare, l' "array" su cui ci soffermeremo in seguito. In altri linguaggi di programmazione (C, C++, Java) le variabili di solito devono essere prima "inizializzate" scegliendo il tipo di dati che esse devono contenere: in questo modo si sceglie infatti lo spazio di memoria che la variabile deve occupare; solo in un secondo momento viene assegnato il contenuto. In JavaScript, come in altri linguaggi di scripting e di programmazione pi moderni (php, asp, python), l'inizializzazione (cio la
44
scelta del tipo di dati) avviene in automatico. Quindi se voi scrivete:

mioNome="Wolfgang";
avete creato in automatico una stringa. Le variabili in JavaScript (quando non si trovino all'interno di funzioni) hanno validit in tutta la pagina. Vedremo meglio in seguito che cosa significa quest'affermazione.
45
20. Le Stringhe
Se volete creare una stringa e vi dimenticate le virgolette, incorrerete in un errore. Ad esempio:

mioNome=Wolfgang;
vi dar errore, perch Wolfgang non tra virgolette (non quindi una stringa) e il motore di scripting che interpreta la pagina si aspetter di trovare un'altra variabile che si chiama Wolfgang. Ricordate sempre che quando create delle stringhe dovete seguire delle semplici regole: tutto il contenuto della stringa deve essere compreso tra le virgolette di apertura e quelle di chiusura (non importa che si tratti di virgolette semplici o di virgolette doppie) non dovete andare a capo tra l'apertura e la chiusura se all'interno della stringa aprite delle altre virgolette (dello stesso tipo di quelle aperte poc'anzi) incorrete in un errore
Ad esempio una sintassi di questo genere errata:

miaScritta="ho detto "basta!"";
perch la stringa non viene scritta correttamente (viene infatti chiusa prematuramente). Ci sono diversi stratagemmi per utilizzare le virgolette all'interno di una stringa. Vediamone alcuni:
Stratagemma Carattere di escape \ Descrizione Si fanno precedere le virgolette interne alla stringa da un carattere di escape (il back-slash), che fa s che le virgolette siano ignorate Esempio miaScritta=ho detto \basta!\;
Apici semplici dentro Cambiando il tipo di virgolette, apici doppi miaScritta=ho si evita di chiudere detto basta!; impropriamente la stringa Apici doppi dentro apici semplici Trasformare le virgolette in " " " Trasformando le virgolette nei caratteri speciali dellHTML il risultato non cambia miaScritta=ho detto " basta!"; Ovviamente anche lesempio contrario valido miaScritta=ho detto basta!;
46
Potete invece assegnare a una variabile il contenuto di un'altra variabile, in un gioco di matrioske. Cos:
Wolfgang="sono io"; mioNome=Wolfgang; alert(mioNome); //visualizza "sono io"
In questo caso non avrete nessun errore, perch la "Wolfgang" non una stringa ma una variabile creata all'interno della pagina.
47
21. Come utilizzare le variabili
Riprendiamo l'esempio del metodo prompt() che abbiamo visto qualche lezione fa. Questo metodo ci restituisce quello che l'utente scrive all'interno della finestra di dialogo.
prompt("Scrivi il tuo nome","il tuo nome"); //chiede all'utente di scrivere il suo nome e restituisce il nome dell'utente
Possiamo sfruttare questa caratteristica ad esempio per "memorizzare" il nome dell'utente e andarlo a scrivere poi nel corpo della pagina. Per memorizzare il nome dell'utente, basta inserire il nome in una variabile. Alla fine non ci resta che scrivere nel corpo della pagina (con un document.write() )la variabile memorizzata. Cos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Esempio</title> </head> <body> <SCRIPT type="text/javascript"> nomeUtente=prompt("Scrivi il tuo nome","il tuo nome"); document.write("Benvenuto "); document.write(nomeUtente); </SCRIPT> </body> </html>
Da notare come il secondo document.write() dell'esempio non faccia uso di virgolette (per quanto il document.write() accetti soltanto delle stringhe), dal momento che il contenuto della variabile gi riconosciuto come stringa. Ovviamente non possibile usare questo esempio in un sito web, perch la pagina ci chiederebbe il nostro nome ogni volta che la carichiamo. Le variabili infatti hanno validit all'interno della singola pagina, dopodich vengono distrutte, non c' modo dunque di creare una variabile che si conservi nel tempo (almeno non in modo immediato). stata una scelta degli ideatori di JavaScript, dovuta a motivi di sicurezza. Per applicare concretamente l'esempio che abbiamo visto in un sito web dovremmo utilizzare qualche espediente per memorizzare i dati dell'utente (un ottimo metodo sarebbe sen'altro l'utilizzo di un cookie).
48
22. Operare con le variabili
Quello che rende le variabili interessanti ovviamente la possibili di operare con esse. Non solo i tipi numerici possono essere addizionati, sottratti, moltiplicati e divisi; ma anche le stringhe possono essere manipolate in vario modo. L'operazione di somma (cio di concatenamento) di stringhe , ad esempio, di estrema semplicit. Nell'esempio della lezione precedente al posto di:
document.write("Benvenuto "); document.write(nomeUtente);
avremmo potuto scrivere:

document.write("Benvenuto "+nomeUtente+"!");
In cui si vede chiaramente che stiamo facendo un'operazione di concatenamento di questo tipo: Stringa + variabile di tipo stringa + Stringa Inoltre la capacit di JavaScript di convertire in automatico i tipi di dati ci aiuta enormemente nelle operazioni tra variabili. Vediamo questo esempio:
anno=2002; scritta="Siamo nel "; scrittaTotale= scritta+anno; document.write(scrittaTotale);
Come si vede un tipo numerico (anno) viene convertito senza troppi problemi in una stringa e sommato a un'altra stringa. Esaminiamo ora un esempio concreto in cui utilizziamo le operazioni tra variabili per posizionare le finestre. Come abbiamo visto il metodo window.open() ci permette di posizionare le finestre dove vogliamo. Purtroppo basta che l'utente cambi risoluzione per avere un diverso posizionamento della finestra. Ad esempio:
window.open("sponsor.htm","", "left=500,top=150,width=300,height=300,menubar,toolbar");
d un diverso risultato se la risoluzione di 800x600, o se la risoluzione di 1024x768 (per cambiare risoluzione, utilizzare il tasto destro sul desktop e poi propriet > schermo > impostazioni). Il problema comunque analizzato accuratamente in un nostro articolo dedicato a come costruire un sito per diverse risoluzioni. Noi vogliamo invece posizionare una finestra a destra del monitor e a met dello schermo indipendentemente dalla risoluzione.
49
Ci viene subito in mente che per posizionare la finestra in questo modo possiamo utilizzare un po' di formule: posizione da sinistra = larghezza dello schermo - larghezza della finestra posizione dall'alto= (altezza dello schermo - altezza finestra)/2 Traduciamo queste formule in codice JavaScript. La propriet che indica la larghezza dello schermo screen.width, per l'altezza useremo invece screen.height. Quindi:
larghFinestra=300; //creo una variabile contenente la larghezza della finestra altezFinestra=300; // creo una variabile contenente l'altezza della finestra sinistra=screen.width-larghFinestra; //creo una variabile e mi ricavo il valore della posizione della finestra a sinistra dello schermo alto=(screen.height-larghFinestra)/2; //creo una variabile e mi ricavo il valore della posizione della finestra dall'alto dello schermo one della finestra a sinistra dello schermo
NB: le righe precedenti non vanno a capo Da notare le parentesi nell'ultima formula, che indicano la precedenza degli operatori: come abbiamo imparato dalle Scuole Medie in poi, se non avessi messo la parentesi la divisione sarebbe stata eseguita prima della sottrazione, dando luogo a un risultato errato. A questo punto non ci resta che inserire le variabili che abbiamo calcolato all'interno della sintassi del window.open(). Cos:
window.open("sponsor.htm","", "left="+sinistra+",top="+alto+",width="+larghFinestra+", height="+altezFinestra+",menubar,toolbar");
Se vogliamo "scostare" la finestra dal bordo destro dello schermo non abbiamo che da portare la finestra pi in qua (il "left" della finestra inizier quindi un po' prima) , cos: Vediamo l'esempio completo:
50
finestra*/ altezFinestra=300; /* creo una variabile contenente l'altezza della finestra*/ sinistra=screen.width-larghFinestra+20; /*creo una variabile e mi ricavo il valore della posizione della finestra a sinistra dello schermo*/ alto=(screen.height-larghFinestra)/2; /*creo una variabile e mi ricavo il valore della posizione della finestra dall'alto dello schermo */ window.open("sponsor.htm","", "left="+sinistra+",top="+alto+",width="+larghFinestra+", height="+altezFinestra+",menubar,toolbar"); </SCRIPT> </body> </html>
Come si pu notare nell'esempio il "+" viene usato con due valori diversi: quando ci troviamo ad operare con i numeri d luogo a una somma quando ci troviamo ad operare con le stringhe d luogo a un concatenamento di variabili
Per chi volesse approfondire l'argomento, nel corso di javaScript presente una lista degli operatori Javascript che possiamo utilizzare quando manipoliamo le variabili.
51
23. Differenza tra variabili e oggetti
Sotto alcuni aspetti gli oggetti possono essere paragonati a delle variabili. In pi hanno per la capacit di compiere delle azioni. Se io creo ad esempio:
miaFinestra=window.open("sponsor.htm","", "left=500,top=150,width=300,height=300,menubar,toolbar");
non ho creato una variabile, ma ho creato in realt un oggetto che eredita i metodi ("le azioni") propri dell'oggetto window. Questo significa che posso utilizzare l'oggetto miaFinestra per compiere determinate operazioni. Ad esempio:
Ecco un esempio completo:
52
height="+altezFinestra+",menubar,toolbar"); /*creo un oggetto*/ </SCRIPT> <A HREF="javaScript:miaFinestra.close()">chiudi</A> </body> </html>
La differenza tra le variabili gli oggetti che le prime sono dei meri contenitori "stupidi", i secondi invece sono in grado di compiere determinate azioni (a seconda di come siano stati definiti e a seconda dei metodi che hanno a disposizione). Torneremo in seguito sugli oggetti, approfondendo il loro utilizzo. Per ora basti sapere che gli oggetti possono essere paragonati a delle "variabili potenziate", in quanto in grado di compiere delle azioni.
53
24. Introduzione alle funzioni
Le funzioni sono un comodo contenitore in cui racchiudere il codice. Anzich "sporcare la pagina" mischiando codice HTML e linguaggio JavaScript, sufficiente inserire il codice in una funzione e richiamare la funzione quando occorre. La sintassi necessaria per creare una funzione questa:
function nomeFunzione() { // nostro codice }
54
<head> <title>Corso JavaScript ad esempi</title> <SCRIPT type="text/javascript"> /* prima funzione*/ function saluta() { alert("ciao"); } /*seconda funzione*/ function apriFinestra() { /*creo una variabile contenente la larghezza della finestra*/ larghFinestra=500; /* creo una variabile contenente l'altezza della finestra*/ altezFinestra=500; /*creo una variabile e mi ricavo il valore della posizione della finestra a sinistra dello schermo*/ sinistra=screen.width-larghFinestra+20; /*creo una variabile e mi ricavo il valore della posizione della finestra dall'alto dello schermo */ alto=(screen.height-larghFinestra)/2; window.open("http://www.html.it","", "left="+sinistra+",top="+alto+",width=" +larghFinestra+",height="+altezFinestra+",menubar,toolbar"); //NB la riga precedente non va a capo } /*terza funzione*/ function scriviRisoluzione(){ document.write("Stai navigando a una risoluzione di "+screen.width+" x "+screen.height); } </SCRIPT> </body> </head> <body onLoad="apriFinestra();"> <A HREF="#" onClick="saluta();">clicca per ricevere un saluto</A> <BR><BR> <SCRIPT type="text/javascript"> scriviRisoluzione(); </SCRIPT> </body> </html>
Nell'esempio che abbiamo esaminato or ora sono presenti tre funzioni, due delle quali vengono richiamate attraverso l'utilizzo di eventi, mentre la terza viene richiamata all'interno della pagina. Da notare inoltre che l'evento "onLoad" viene eseguito subito dopo il completamento della pagina, dunque una funzione richiamata all'interno del BODY della pagina verr "lanciata" prima della funzione richiamata dall'evento onLoad. Nel nostro esempio la funzione "scriviRisoluzione()" viene lanciata prima della funzione "aprifinestra()".
55
evidente che tramite un utilizzo oculato di funzioni ed eventi possibile creare delle pagine molto ordinate, con il codice JavaScript suddiviso in molteplici parti, "azionato" soltanto quando richiamato.
Nota a margine
In realt possibile specificare che la funzione deve essere richiamata da un determinato evento direttamente dal codice JavaScript. La sintassi questa (da inserire nella HEAD):
<SCRIPT type="text/javascript"> function saluta() { alert("ciao"); } document.onload=saluta(); //la funzione viene lanciata non appena il documento caricato //notare che "onload" scritto tutto minuscolo </SCRIPT>
Come si vede nell'esempio il collegamento tra l'evento "onload" e la funzione "saluta" viene creato dalla stessa sintassi JavaScript, anzich essere specificato nel codice HTML.
56
25. Dove utilizzare le funzioni I
Prendiamo in considerazione questo esempio:

<SCRIPT type="text/javascript"> scritta="ciao"; function saluta() { alert(scritta); } saluta(); </SCRIPT>
in questo primo esempio una variabile viene creata e inizializzata al di fuori della funzione ed poi richiamata all'interno della funzione stessa, senza che tutto ci crei minimamente dei problemi. Esaminiamo un altro esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <SCRIPT type="text/javascript"> function saluta() { //inizalizzo le variabili all'interno delle funzioni scritta2="ciao"; scritta3="prova scrittura" } saluta(); //richiamo la funzione alert(scritta2); //faccio riferimento alla variabile creata nella funzione </SCRIPT> </head> <body > <SCRIPT TYPE="text/javascript"> document.write(scritta3); </SCRIPT> </body> </html>
In questo esempio due variabili vengono create all'interno delle funzioni e richiamate poi dall'esterno: in un caso la variabile viene scritta addirittura in pagina senza che tutto ci crei minimamente dei problemi. Molti linguaggi di programmazione creano una distinzione netta tra le variabili create all'interno del programma (nel nostro caso all'interno della pagina) e le variabili create all'interno delle funzioni. Le prime prendono il
57
nome di variabili globali e sono valide in tutto il programma, le seconde vengono dette variabili locali e sono valide soltanto all'interno della funzione. Per indicare il contesto entro cui una variabile valida si parla di solito di ambito delle variabili (in inglese "scope"). Per semplificare la vita del programmatore, in JavaScript questa distinzione valida solo se espressamente richiesta dal programmatore stesso. Visto che questi sono i nostri primi programmi, possiamo evitare di distinguere tra variabili locali e variabili globali. Facciamo per attenzione a non incappare in due tipici errori:
1. Evitiamo di sovrascrivere le variabili nei nostri programmi. Ad esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <SCRIPT type="text/javascript"> function scriviNome() { // inizalizzo le variabili all'interno delle funzioni nome=prompt("inserisci qui il tuo nome","il tuo nome"); }
Nell'esempio, dato che la variabile "nome" viene inizializzata dopo la funzione, il contenuto della variabile creata nella funzione viene sovrascritto. 2. Ricordiamoci di utilizzare gli eventi nel modo appropriato:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
58
</SCRIPT> </head> <body onLoad="scriviNome()"> <SCRIPT TYPE="text/javascript"> document.write(nome); </SCRIPT> </body> </html>
In questo caso siamo incappati un errore grossolano: la variabile "nome" viene richiamata dal document.write (che si trova nel corpo della pagina) senza essere stata ancora creata, infatti l'evento onLoad (che richiama la funzione che crea la variabile) viene lanciato dopo il completamento della pagina.
59
26. Dove utilizzare le funzioni II
Abbiamo visto che, se vogliamo, possiamo fare a meno di distinguere tra variabili globali (quelle valide in tutta la pagina) e variabili locali (quelle valide solamente all'interno delle funzioni). Qualche lettore esperto, pu per trovarsi pi a suo agio mantenendo questa distinzione (gli altri lettori possono passare oltre senza troppe preoccupazioni). Per creare le variabili locali (valide solo nella funzione) sufficiente premettere alla dichiarazione di variabile il prefisso var. Guardate cosa succede se modifichiamo l'esempio della lezione precedente con il prefisso var:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <SCRIPT type="text/javascript">
le variabili non vengono pi "lette", perch definite come "locali" all'interno della funzione. Dunque il motore di scripting della pagina si dimentica di queste variabili appena uscito dalla funzione. Un ulteriore esempio chiarir tutto:
60
} saluta(); //richiamo la funzione alert(scritta2); //faccio riferimento alla variabile </SCRIPT>
Tra le due variabili "vince" la variabili globale, perch la variabile locale ha il suo ciclo di vita solo all'interno della funzione. Se utilizziamo variabili globali e variabili locali, le funzioni diventano una scatola chiusa, e il suo interno non vede nulla di quanto avviene al di fuori. Avremo quindi bisogno di strumenti per passare dei valori all'interno della funzione, e di altri strumenti per estrarre quello che abbiamo elaborato dentro la funzione stessa: li vedremo nelle prossime lezioni.
Nota Bene
Se volete evitare di avere problemi di vario genere con variabili locali e variabili globali, semplicemente omettete "var" quando create delle variabili.
61
27. I parametri delle funzioni
In molti casi pu essere utile passare dei "valori variabili" a una funzione, in modo da poterla utilizzare in molti contesti. In questo modo non siamo costretti a scrivere una funzione ogni volta che dobbiamo cambiare qualcosa: basta scrivere il codice una sola volta e individuare delle porzioni variabili. Facciamo un esempio concreto. C' una pagina in cui vogliamo aprire tre differenti finestre di diverse dimensioni: la prima di 300x290 e deve contenere un link a www.html.it la seconda di 400x390 e deve contenere un link ad freeasp.html.it la terza di 500x490 e deve contenere un link a free.php.html.it
In questo caso non necessario scrivere tre differenti funzioni: basta scrivere la funzione una volta sola, specificando che ci sono delle parti della funzione che variano. Queste parti variabili si chiamano argomenti o parametri e vanno espresse nella dichiarazione della funzione. Cos:
function nomeFunzione(argomento1, argomento2, argomento3, argomento4) { //codice }
I parametri vengono indicati all'interno del codice nel punto che ci occorre, e svolgono a tutti gli effetti il ruolo di variabili. Nella chiamata alla funzione dovremo poi indicare il valore che i parametri assumono nel caso specifico. Gli argomenti sono quindi una specie di "ponte" tra l'interno e l'esterno della funzione. Ad esempio: Vediamo un esempio semplice che ci permetta di afferrare subito il concetto:
62
<A HREF="#" onClick="saluta('Phantom')">Saluta Phantom</A><BR> <A HREF="#" onClick="saluta('Berenicebis')">Saluta Berenicebis</A><BR> </body> </html>
Come si vede nell'esempio la funzione sempre la stessa, ma c' un "punto" che cambia: quel "punto variabile" l'argomento che viene indicato nella dichiarazione della funzione, cio qui:
function saluta(nome)
per poi essere applicato all'interno del codice al momento giusto. Cio qui:
alert("ciao "+nome);
Torniamo all'esempio delle finestre, e riprendiamo quanto visto in una lezione precedente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Esempio</title> <SCRIPT type="text/javascript"> /*nella funzione sottostante passiamo 4 argomenti: il nome della finestra necessario per aprire differenti finestre e non sempre la stessa*/ function apriFinestra(nomeFinestra,larghezza,altezza,collegamento) { larghFinestra=larghezza; /*assegno alla variabile il valore dell'argomento*/ altezFinestra=altezza; /* assegno alla variabile il valore dell'argomento*/ sinistra=screen.width-larghFinestra+20; alto=(screen.height-larghFinestra)/2; /*gli ultimi due argomenti sono nella stringa sottostante */ window.open(collegamento,nomeFinestra,"left="+sinistra+",top="+alto+",width=" +larghFinestra+",height="+altezFinestra+",menubar,toolbar,resizable"); //NB la riga precedente non va a capo } </SCRIPT> </head> <body> <A HREF="#" onClick="apriFinestra('finestraHTML',300,290,'http://www.html.it')">HTML.it</A><BR> <A HREF="#" onClick="apriFinestra('finestraASP',400,390,'http://freeasp.html.it')">FREEASP</A><BR> <A HREF="#" onClick="apriFinestra('finestraPHP',500,490,'http://freephp.html.it')">FREEPHP</A><BR> </body> </html>
63
come si vede la funzione che apre la finestra sempre la medesima, cambiano invece le dimensioni, il nome della finestra e il link: tutto questo viene passato alla funzione come argomento.
64
28. Restituire i valori di una funzione
Abbiamo visto che se utilizziamo un approccio rigoroso con variabili globali e locali (quelle create con var) le funzioni diventano una scatola chiusa, e tutto quello che succede all'interno di una funzione non ha nessuna validit al di fuori. Ma come fare per comunicare con l'esterno? Se dobbiamo introdurre dei valori all'interno della funzione possiamo utilizzare gli argomenti, ma finora non abbiamo visto ancora nulla che ci permetta di restituire all'esterno dei valori. Vediamo un esempio. Per comodit decidiamo di inserire in una funzione il prompt con la richiesta di nome (che abbiamo esaminato in una precedente lezione) e decidiamo di utilizzare la dichiarazione di variabili locali.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <SCRIPT TYPE="text/javascript"> function chiediNome() { var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome"); //la variabile definita come "locale" //se non mettessimo "var" funzionerebbe tutto } </SCRIPT> </head> <body> <SCRIPT TYPE="text/javascript"> chiediNome(); // lancio la funzione document.write("Benvenuto "); document.write(nomeUtente); </SCRIPT> </body> </html>
Come si vede lo script che abbiamo composto d errore, semplicemente perch la variabile preceduta da var e quindi definita come locale: il browser (o pi esattamente il motore di scripting del browser) si scorda della variabile appena fuori dalla funzione. Per risolvere questo problema dobbiamo utilizzare l'istruzione return, che serve per restituire i valori e fa s che una funzione comunichi con l'esterno. Il return va messo sempre alla fine della porzione di codice che ci interessa, e si utilizza in due modi:
return seguito da una variabile (o restituisce il valore della variabile da un'espressione) (o dell'espressione)
65
return da solo
fa terminare la porzione di codice
Basta poi catturare tutta quanta la funzione in una variabile, per aver catturato il valore restituito dalla funzione stessa. Cos:
miaVariabile = miaFunzione();
Vediamo l'esempio precedente adattato con l'uso di return.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <SCRIPT TYPE="text/javascript"> function chiediNome() { var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome"); return nomeUtente; //la funzione restituisce ora il nome dell'utente } </SCRIPT> </head> <body> <SCRIPT TYPE="text/javascript"> valoreCatturato=chiediNome(); // lancio la funzione document.write("Benvenuto "); document.write(valoreCatturato); </SCRIPT> </body>
In JavaScript per lo pi utilizzerete un approccio "soft" alle variabili, e spesso non distinguerete tra variabili globali e locali, quindi non vi capiter spesso di usare return. Infatti per avere a disposizione nel resto della pagina un valore creato all'interno di una funzione, basta crearlo senza usare var. Tutto funziona alla perfezione se scriviamo:
function chiediNome() { nomeUtente=prompt("Scrivi il tuo nome","il tuo nome"); } chiediNome(); alert(nomeUtente);
Come abbiamo visto per, il return serve anche per bloccare l'esecuzione del codice e ci sono particolari contesti in cui pu tornare particolarmente utile: lo vedremo nelle prossime lezioni. Vediamo comunque un esempio per afferrare subito il concetto:
function saluta() { alert("primo ciao");
66
return; alert("secondo ciao"); } saluta();
come si vede il secondo alert non viene eseguito, perch posto dopo il return.
Nota Bene
A scanso di equivoci, opportuno specificare che n gli argomenti, n il return sono obbligatori: in molti casi avremo funzioni che non hanno bisogno di nessun argomento, e che non restituiscono alcunch.
67
29. Verificare una condizione: if
Il codice che abbiamo utilizzato fino a questa lezione molto semplice: si sempre trattato di lavorare con le finestre, inserire dati in variabili e al massimo abbiamo sommato delle stringhe. Se la programmazione fosse soltanto questo, avremmo la possibilit di compiere ben poche operazioni. In realt programmare qualcosa di pi complesso, dal momento che siamo in grado di porre delle condizioni, impostare delle ripetizioni, e altro. Possiamo ad esempio volere che il programma che stiamo scrivendo faccia qualche cosa soltanto a una determinata condizione (ad esempio solo nel caso in cui il browser dell'utente sia Internet Explorer). Potremmo schematizzare cos: se una determinata condizione verificata fai questo
Pi esattamente si tratta di prendere una determinata condizione, valutarla, e se vera (cio se restituisce true), verranno eseguite le istruzioni indicate. Se la condizione non si verifica non verr fatto alcunch. Ecco una rappresentazione grafica di quello che abbiamo appena detto:
Ed ecco il modo in cui JavaScript (in maniera del tutto analoga al C) esprime questo costrutto:
if (espressione da verificare) { //istruzioni }
La struttura della sintassi chiara: la condizione da verificare viene indicata tra le parentesi tonde che seguono l'if (in inglese "se", appunto). Notare le parentesi graffe, che racchiudono il codice da eseguire nel caso in cui la
68
condizione sia valida. bene inoltre ricordare, che ogni istruzione deve essere seguita dal punto e virgola. Per afferrare subito la sintassi per un po' vedremo alcuni semplici esempi numerici. Non appena saremo padroni dei concetti torneremo ad esaminare esempi pratici, inerenti il webpublishing. Vediamo un esempio di if:
x=5; // sostituite x con quello che volete if (x==5) { alert("la variabile x uguale a 5"); }
L'espressione (x==5) risulta vera, dal momento che la variabile stata creata appositamente con il valore richiesto dalla condizione (ma d'ora in poi provate a sostituire il valore della variabile creata all'inizio degli esempi per vedere i differenti risultati degli script). Infatti se invece abbiamo:
x=6; if (x==5) { alert("la variabile x uguale a 5"); }
L'espressione dell'esempio viene valuta, ma dal momento che non vera l'alert non viene visualizzato. Negli esempi appena esaminati, abbiamo incontrato per la prima volta l'operatore di uguaglianza, cio ==, che ci permette di verificare che le variabili (o le espressioni) a sinistra e a destra dell'uguale abbiano lo stesso valore.
Nota a margine
Le parentesi graffe sono necessarie soltanto nel caso in cui le istruzioni da eseguire siano pi di una, altrimenti possono essere anche omesse. Infatti le parentesi graffe indicano sempre l'esistenza di un blocco di istruzioni (le abbiamo gi incontrate nelle funzioni con la medesima funzione). Ad esempio:
x=5; if (x==5) alert("la variabile x uguale a 5");
o anche tutto su una riga:

x=5; if (x==5) alert("la variabile x uguale a 5");
mettere le parentesi graffe in presenza di una sola istruzione tuttavia non costituisce errore e di solito conferisce una maggior leggibilit al codice.
69
30. Operatori relazionali
Nella lezione precedente abbiamo introdotto il concetto intuitivo di "condizione da valutare". In realt si tratta pi esattamente di valutare che la relazione tra due valori (o espressioni) sia vera. Infatti la condizione da valutare di solito viene espressa sotto forma di relazione, cio cos:
valore 1 - operatore di relazione - valore 2
Ad esempio:
x==5
Ed ecco gli altri operatori:

Operatore > >= < <= == != Spiegazione maggiore maggiore uguale minore minore uguale uguale diverso x>7 x>=7 x<7 x<=7 nome==Mario Nome!=mario Esempio
Un errore tipico dei principianti quello di confondere l'operatore di uguaglianza, con il doppio simbolo "=" (==) con l'operatore di assegnamento (=). Ad esempio questo:
x=8; if (x=5) { //dovrebbe essere ==, non = alert("la variabile x uguale a 5"); }
risulter sempre vero, perch all'interno delle parentesi viene assegnato un valore, e non viene invece eseguito un confronto. Inserire la relazione tra due valori in un alert un metodo sbrigativo per sapere se la relazione vera oppure no:
x=5; alert(x>=5); alert(x<5);
Finora abbiamo sempre assegnato il valore delle variabili all'interno della pagina: tuttavia non si tratta di un procedimento molto utile, dal momento che la possibilit di valutare la veridicit di un espressione ci interessa
70
soprattutto quando non conosciamo i valori delle variabili. Ci interessa sapere ad esempio se: variabileUtente == variabileImpostataDaMe; oppure variabileAmbiente == variabileImpostataDaMe; negli esempi delle prossime lezioni vedremo come "catturare" questi valori.
71
31. Come funzionano else ed else if
Abbiamo visto che possibile fare eseguire un'azione se una condizione vera. Ma se volessimo far eseguire un'altra azione nel caso in cui la condizione sia falsa? Possiamo allora impostare un programma di questo tipo: se una determinata condizione verificata fai questo in tutti gli altri casi fai quest'altro
Possiamo esprimere graficamente questo concetto con i diagrammi di flusso:
e traducendolo con la sintassi di JavaScript:

if (condizione) { // istruzione 1 } else { // istruzione 2 }
Ad esempio:
x=9; if (x<7) { alert("x minore di 7"); }
72
else { alert("x non minore di 7"); }
Con una sintassi analoga si possono anche verificare l'esistenza di diverse condizioni. Si tratta di impostare un programma di questo genere: se si verifica questa condizione fai questo altrimenti, se si verifica quest'altra condizione fai quest'altro in tutti gli altri casi fai quest'altro
che graficamente si pu rappresentare cos:
Per esprimere l'else if, JavaScipt prevede una sintassi di questo genere:
if (prima condizione) { //istruzioni } else if (seconda condizione) { //istruzioni } else { //istruzioni }
Ed ecco un esempio:
73
nome="Gianni"; if (nome=="Mario") { alert("ciao Mario"); } else if (nome=="Gianni") { alert("ciao Gianni"); } else { prompt ("identificati","inserisci il tuo nome"); }
possibile anche introdurre pi di un else if all'interno dello stesso blocco di codice; dunque possibile verificare quante condizioni si desidera.
74
32. Esempio: individuare il browser
Abbiamo visto, quando abbiamo parlato del DOM che la difficolt maggiore della programmazione JavaScript consiste nel fatto che a browser differenti corrispondono differenti modelli di documenti. JavaScript ci consente di verificare in un modo molto semplice se una propriet di un oggetto esiste oppure no, sufficiente utilizzare la sintassi:
if (nomeOggetto.nomePropriet) { //istruzioni }
se la propriet esiste, nomeOggetto.nomePropriet restituisce true e quindi la condizioni verificata (e dunque le istruzioni vengono eseguite). Se la propriet non esiste nomeOggetto.nomePropriet restituisce false, e quindi la condizione non verificata. Questo accorgimento ci molto utile nei molti casi in cui vogliamo adattare la pagina a seconda del browser: ad esempio per spedire un foglio di stile differente a seconda del browser usato. Abbiamo detto che internet Explorer (qualsiasi versione) viene identificato da document.all, Netscape da document.layers, i browser di nuova generazione da document.getElmentById. Per individuare il browser e far eseguire un codice differente a seconda del risultato, dovete allora impostare un programma di questo genere: se presente document.all codice da eseguire (se entriamo in questa casistica, i successivi else if ed else non vengono neanche valutati) se invece presente document.layers codice da eseguire se presente document.getElementById codice da eseguire in tutti gli altri casi codice da eseguire
Traducendo quanto appena detto in sintassi JavaScript:
75
if (document.all) { alert("stai usando Internet Explorer"); } else if (document.layers) { alert("stai usando Netscape 4"); } else if (document.getElementById) { alert("stai usando Netscape 6, o un browser di nuova generazione"); } else { prompt ("stai usando un browser sconosciuto"); }
Attenzione per alle "propriet mimetiche" di Opera, che in grado di camuffarsi da Internet Explorer o da Netscape. Se volete approfondire l'argomento, e vedere come spedire un differente foglio di stile esterno a seconda del browser potete consultare due articoli su pro.html.it: L`arte dello sniffing: come riconoscere i browser e Riconosciamo i browser con Javascript.
76
33. Gli operatori logici
possibile annidare un if dentro l'altro, in modo da poter valutare anche situazioni particolarmente complesse. Ad esempio:
valore=5; //provate a cambiare il valore, eventualmente indicando anche delle stringhe if (isNaN(valore) ) { // isNaN() vuol dire "not a number" e serve per vedere se il tipo di dati in esame differente da un numero alert(valore + " non un numero!"); } else { if (valore>=9) { alert(valore + " maggiore o uguale a 9") } else { alert(valore + " minore di 9") } }
Ma oltre ad utilizzare annidamenti particolarmente complessi, possiamo usare gli operatori logici per concatenare diverse espressioni e creare condizioni complesse. La sintassi questa: ( (espressione 1) - operatore logico - (espressione 2) ) dove (come abbiamo visto nelle precedenti lezioni) espressione 1 ed espressione 2 stanno per: valore1 - operatore relazionale - valore 2 Ad esempio:
x=6; if ( (x>=5)&&(x<=7) ) { alert ("x compresa tra 5 e 7"); }
In questo modo possiamo valutare pi condizioni contemporaneamente. Gli operatori logici che utilizzerete maggiormente sono i seguenti:
Operatore Spiegazione Esempio
77
x=6; && and logico Devono essere vere le espressioni a destra e sinistra delluguale. if ( (x>=5) && (x<=7) ) { alert ("x compresa tra 5 e 7"); } nome="Gianni"; or logico Deve essere lespressione a sinistra delluguale o quella a destra if ( (nome=="Gianni") || (nome=="Marco") ) { alert ("Sei Gianni oppure Marco"); } nome="Marco"; if ( !(nome=="Marco")) { alert ("Non sei Marco"); }
||
not Viene posta di fronte allespressione in questione e la nega: - se false la cambia in true - se true la cambia in false
Gli operatori logici funzionano nel modo seguente: viene esaminato l'operando di sinistra: se questo restituisce false, l'esame dell'espressione non viene ulteriormente proseguito, e il risultato false se questo restituisce true, si passa ad esaminare l'operatore di destra il confronto restituisce il valore dell'operatore di destra (true o false)
Avrete notato che la rappresentazione grafica di un operatore logico prevede il raddoppiamento del simbolo corrispondente (es: &&). Nel caso in cui vi dimentichiate di raddoppiare il simbolo (es: &), state in realt utilizzando un operatore a livello di bit: il che non scorretto, ma non sempre dar luogo allo stesso risultato.
78
34. Uso del "not" e operatori di bit
Una menzione particolare la merita l'operatore di negazione(indicato con !), che serve a negare un'espressione. Si tratta di un operatore unario: viene infatti posto di fronte all'espressione da negare, senza essere confrontato con nient'altro. Utilizzando l'operatore di diversit nel giusto modo possiamo scrivere: se la condizione falsa fai questo
La sintassi la seguente:
if ( ! (espressione) ) { //istruzioni }
che significa: se nego l'espressione e cos facendo ho un risultato vero allora fai questo
Ad esempio:
x=7; if (! (x==7) ) { alert ("x non 7"); }
Ovviamente l'esempio che abbiamo appena esaminato non di particolare utilit e in questo caso non c' una grossa differenza rispetto all'utilizzo dell'operatore di diversit (!=) che abbiamo visto nelle lezioni precedenti:
x=7; if (x!=7) { alert ("x non 7"); }
Ma se teniamo conto che possiamo utilizzare gli operatori logici per creare situazioni molto complesse, combinando fra loro le varie espressioni, allora appare evidente come l'utilizzo del not sia particolarmente utile. Ad esempio:
nome="Gianni"; if ( ! ( (nome=="Gianni") || (nome=="Marco") ) ) { alert ("Non sei n Gianni, n Marco"); }
79
Nota a margine
Abbiamo accennato nella lezione precedente agli "operatori a livello di bit". Nella programmazione JavaScript non li userete quasi mai, ma bene sapere che esistono. Perch se per errore scrivete:
(x>=5) & (x<=7)
in realt state utilizzando un operatore a livello di bit e non un operatore logico. La differenza sta nel fatto che gli operatore di bit convertono tutte le espressioni in valori binari, prima di eseguire i confronti, e poi li confrontano bit a bit. Dal momento che - a volte - ci comporta delle approssimazioni, la valutazione delle espressioni pu non dare adito allo stesso risultato rispetto agli operatori logici. Vediamo un esempio in cui operatori logici e operatori a livello di bit danno adito a risultati differenti. Nell'esempio seguente l'operatore logico restituisce un risultato corretto:
80
L'oggetto navigator.platform contiene le indicazioni sul sistema operativo che l'utente sta usando. Nel caso di Windows: alert(navigator.platform); restituisce "Win32" indexOf serve per cercare del testo in una stringa: se non lo trova restituisce "-1", ecco perch abbiamo chiesto di verificare che il risultato di indexOf sia maggiore di -1. In pratica cos facendo abbiamo chiesto di verificare che navigator.platform contenga "Win". */
Utilizzando l'operatore a livello di bit invece il risultato dello script non corretto:
if ( (document.all) & (navigator.platform.indexOf("Win")!=-1) ) { alert ("Stai usando Internet Explorer su Windows"); } else { alert ("Stai usando Internet Explorer su Mac"); }
81
35. Interrompere il flusso del codice con return
In una lezione precedente abbiamo visto che (se ci troviamo all'interno della funzione) abbiamo la possibilit di interrompere il flusso del codice tramite l'utilizzo dell'istruzione return. Possiamo applicare questa possibilit all'utilizzo dell'if: se entriamo in una determinata casistica la funzione restituisce i valori e, con la restituzione dei valori, il flusso del codice viene interrotto
Ad esempio:
function checkBrowser(){ if (!document.all) { // se il browsr non Internet Explorer alert ("Non stai usando Internet Explorer"); return; // Il codice si interrompe qui } alert ("Il tuo browser Internet Explorer"); nome=prompt("Scrivi il tuo nome","il tuo nome qui"); } checkBrowser();
Ovviamente il metodo del return funziona soltanto se ci troviamo all'interno di una funzione. Un'utile applicazione di quanto abbiamo appena visto si ha nella validazione dei form, in cui l'istruzione return pu essere utilizzata per interrompere la submit, nel caso in cui i dati non siano nel formato desiderato. Prima di proseguire, esaminiamo per due istruzioni JavaScript, che abbiamo gi accennato nella lezione precedente, e che ci serviranno nel corso dell'esempio: isNaN(valore): la funzione isNaN() significa "is not a number " (non un numero) e serve per verificare se un determinato valore non numerico. Se il valore numerico restituisce false, in caso contrario restituisce true. La sintassi :
isNaN(valore)
Ad esempio:
valore=4; alert(isNaN(valore)); //restituisce false
82
oppure
valore="ciao mondo"; alert(isNaN(valore)); //restituisce true
quindi possibile creare un controllo di questo tipo:

if (isNaN(valore)) { alert ("valore non un numero"); }
83
indexOf: un metodo delle stringhe e si utilizza per verificare se una
eta=dati.eta.value; //prendo i valori dei campi, abbreviandone i nomi email=dati.email.value; if (isNaN(eta)){ alert ("Inserisci un'et valida"); return false; } if (email.indexOf("@")==-1) { alert ("Inserisci un'email valida"); return false; } } </SCRIPT> </head> <body> <FORM name="dati" action="http://www.html.it" onSubmit="return valida();"> <!-notare il return anteposto alla chiamata della funzione--> La tua et: <input type="text" name="eta"><BR> La tua e-mail: <input type="text" name="email"><BR> <input type="submit" value="invia"> </FORM> </body> </html>
Come si pu notare ogni volta che si entra in una determinata casistica e compare il return, l'esecuzione del codice si arresta, se invece tutto va bene non viene incontrato nessun return e dunque l'azione del form viene eseguita.
84
36. Esempi pratici dell'utilizzo di if, else if, else
In una delle lezioni precedenti abbiamo imparato ad usare le finestre di dialogo, tra cui il confirm. L'esempio fornito tuttavia non funzionava nel modo corretto, perch il confirm non arrestava l'azione nel caso in cui l'utente cliccasse su "cancel":
<A HREF="http://www.html.it" onClick="confirm('Sei sicuro di voler uscire dalla pagina?');" TARGET="_blank">testo link</a>
Il confirm restituisce true nel caso in cui l'utente clicchi su ok, restituisce false in caso contrario. Dovrebbe esserci chiaro a questo punto come sfruttare un if per utilizzare correttamente il confirm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
Sono moltissime le occasioni in cui possiamo utilizzare un if per "aggiustare" la pagina, oppure verificare una qualche azione compiuta dall'utente. Premesso che in molti casi possiamo cavarcela egregiamente utilizzando le dimensioni delle celle (o dei box css) in percentuale. Ad esempio cos:
85
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="80%" height="80%" bgcolor="#FF0000"> </td> </tr> <tr> <td height="20%"> </td> </TR> </table>
Poniamo ad esempio di voler scrivere l'altezza di una cella in pixel e in modo variabile a seconda della risoluzione. Vogliamo far s ad esempio che la nostra cella abbia un'altezza di: 80 px a 640x480 100 px a 800x600 150 px a 1024x768 200 px a 1152x864 o risoluzioni maggiori
perch prove empiriche ci dicono che questa altezza si adatta perfettamente al layout che stiamo sviluppando. Consideriamo allora la larghezza dello schermo che ci indica la risoluzione. Nella pagina avremo uno script di questo genere:
<html>
86
</html>
come si vede l'if ci permette di impostare l'altezza in modo variabile a seconda della risoluzione.
87
37. Lo switch
Lo switch non nient'altro che un particolare caso di if particolarmente ramificato, in cui vine presa in esame un'unica variabile che pu assumere differenti valori, e conseguentemente esistono molteplici else if. In pratica il diagramma di flusso dello switch il medesimo dell'else if:
la sintassi :
switch(variabileDaValutare) {
da notare la sintassi case (seguita dai due punti) che indica che stiamo entrando in uno dei casi e l'istruzione break, che serve per interrompere lo switch, ogni volta che si rientra nella casistica che ci interessa. La sintassi dell'esempio della lezioni precedente avremmo potuto scriverla senz'altro come switch. Al posto di:
88
else altezzaCella=200;

switch (screen.width) { case 640: altezzaCella=80; break; case 800: altezzaCella=100; break; case 1024: altezzaCella=150; break; default: altezzaCella=200; }
89
38. Loperatore ternario
Come lo switch anche l'operatore ternario (detto anche "operatore di selezione") fornisce una sintassi abbreviata per esprimere un particolare tipo di if. Questa situazione infatti:
if (condizione) //istruzione 1 (singola istruzione) } else { istruzione 2 (singola istruzione) }
Pu essere anche rappresentata pi sinteticamente con l'utilizzo dell'operatore ternario: condizione?istruzione1:istruzione2 Ad esempio:
document.all?alert("stai usando Internet Explorer"):alert("non stai usando Internet Explorer");
In certi casi l'operatore ternario si presta a una sintassi semplificata: variabile=condizione?valore1:valore2 in cui alla variabile viene assegnato direttamente il risultato del controllo ternario. Se nell'esempio delle lezioni precedenti avessimo voluto scrivere due differenti valori per l'altezza della cella, uno per la risoluzione di 800x600 e uno per tutte le altre risoluzioni, al posto di:
if (screen.width==800) altezzaCella=100; } else { altezzaCella=150; }

screen.width==800?altezzaCella=100: altezzaCella=150;
Volendo, l'utilizzo delle parentesi permette di comprendere meglio il costrutto:

(screen.width==800)?(altezzaCella=100):(altezzaCella=150);
90
Avremmo anche potuto usare la sintassi pi compatta:

altezzaCella=screen.width==800?100:150;
L'operatore ternario viene spesso usato nella sintassi che prevede lo "sniff" (cio l'individuazione) del browser. un procedimento tipicamente utilizzato nel dhtml ( l'utilizzo congiunto di JavaScript e dei css) per scrivere sintassi crossbrowser (che vada bene cio tanto per Internet Explorer, quanto per Netscape o altro): Il metodo questo: se esiste document.all (o document.layers o altro) viene inizializzata una variabile a true altrimenti alla variabile viene assegnato il valore di false
Ad esempio:
document.all? IE=true:IE=false;
che pu anche essere scritto (semplificando la sintassi):

IE= document.all?true: false;
Poi sufficiente verificare:

if (IE)
per sapere di avere a che fare con Interent Explorer. Il procedimento dettagliato per lo sniff del browser descritto nell'articolo L'arte dello sniffing: come riconoscere i browser
Nota a margine
Alcuni programmatori ritengono molto elegante utilizzare la sintassi dell'operatore ternario. Altri programmatori preferiscono invece fare a meno di questo costrutto e utilizzano l'if-else in forma estesa, perch ritengono l'operatore ternario troppo compatto e conseguentemente di difficile lettura: il rischio che - trovandosi a leggere la sintassi di altri oppure leggendo il proprio codice a distanza di mesi - la sintassi risulti oscura e poco comprensibile. Personalmente consiglio di utilizzare questo costrutto solo quando avrete un po' pi di pratica di programmazione.
91
39. Gli Array
Gli array sono un tipo particolare di dati: se le variabili sono delle "scatole" in cui inserire i dati, gli array possono essere paragonati a "scatole a scomparti multipli", in cui ogni scomparto ha il suo "numero dordine". Si tratta infatti di un tipo particolare di variabile che ci permette di inserire molteplici dati in maniera ordinata. La sintassi per creare un array la seguente:
miaVariabile = new Array(); //viene creato larray miaVariabile[i]=contenuto; //assegno ad ogni elemento dellarray il valore che voglio
dove "i" lindice che indica la posizione allinterno dellarray. Nel contare gli elementi di un array si comincia sempre dallo 0. Esiste anche unulteriore sintassi per creare un array (pi sintetica):
miaVariabile = new Array(contenuto_1,contenuto_2, , contenuto_n);
Possiamo ad esempio creare un array che contenga i nomi degli studenti di un corso.
alunni alunni alunni alunni = new Array(); //viene creato larray [0]="Mario"; [1]="Gianni"; [2]="Monica";
e con la sintassi sintetica:

alunni=new Array("Mario", "Gianni","Monica");
notare che i diversi elementi sono separati da virgola. I tipi di dati contenuti dai vari elementi dellarray possono essere anche eterogenei. Se mai ne avessimo bisogno, potremmo scegliere ad esempio creare un array che contenga il nome dellalunno (numeri pari nellindice dellarray) e subito dopo la sua media di voti:
alunni alunni alunni alunni alunni alunni alunni = new Array(); //viene creato larray [0]="Mario"; [1]=7; [2]="Gianni"; [3]=4; [4]="Monica"; [5]=4;
92
oppure:
alunni=new Array("Mario", 7, "Gianni", 4,"Monica", 4);
Per richiamare un elemento poi sufficiente richiamarne la posizione allinterno dellarray:

alert(alunni [4]);
In JavaScript ci sono diversi metodi che ci aiutano a manipolare gli array. Fra tutti ne vediamo alcuni particolarmente utili:
93
Dividere larray in un array pi slice(inizio,fine) piccolo e restituire il nuovo array
alunni=new Array("Mario", "Gianni","Monica","Davide"); alert(alunni.length); alunni2=alunni.slice(0,2); alert(alunni2.length);
94
40. Array di array e array associativi
Pu darsi che non vi capiti di usarli molto spesso, ma bene sapere che avete la possibilit di creare array che hanno come elementi altri array. In pratica in questo modo costruite una matrice. Cos:
Alunno 1 Classe 1 Classe 2 Aldo Mario Alunno 2 Giovanni Gianni Alunno 3 Giacomo Monica
La sintassi necessaria a costruire una matrice di questo genere la seguente:

primaClasse=new Array("Aldo","Giovanni", "Giacomo"); secondaClasse=new Array("Mario","Gianni","Monica"); classi=new Array(primaClasse,secondaClasse);
O anche, con una sintassi pi elegante:

classi=newArray(); classi[0]= new Array("Aldo","Giovanni", "Giacomo"); classi[1]= new Array ("Mario","Gianni","Monica");
E poi per far riferimento a un singolo elemento sar sufficiente richiamare la posizione che occupa nella matrice:
alert(classi[1][2]);
JavaScript supporta anche gli array associativi: si tratta della possibilit di assegnare un "nome" allindice dellarray, anzich un numero. Ad esempio:
voti=new Array(); voti["Mario"]=7; voti["Gianni"]=4; voti["Monica"]=4; alert(voti["Mario"]);
95
41. While
Una delle caratteristiche saliente della programmazione la possibilit di costruire delle routine che svolgano operazioni ripetitive. Se l'if, lo switch e l'operatore ternario ci consentono di prendere delle decisioni, while, do while, for e for in ci permettono invece di eseguire dei cicli di programmazione. Proprio per questo questi costrutti vengono di solito utilizzati insieme agli array: perch le istruzioni vengono eseguite di volta in volta su tutti gli elementi dellarray. In tutti i casi si tratta di costrutti che eseguono una determinata azione, finch una certa condizione valida. La sintassi JavaScript corrispondente quella che segue:
while (condizione) { //istruzioni }
Vediamo il diagramma di flusso corrispondente a questa situazione: assegno un indice a 0 finch valida la condizione: o o eseguo una determina istruzione e poi aumento di uno lindice
quando listruzione non pi valida, esco dal programma
Lindice viene aumentato scrivendo:

i=i+1;
o pi sinteticamente:
i=i++;
96
Se volessimo scorrere un array potremmo ad esempio: inizializzare un indice con 0 confrontare lindice con la lunghezza dellarray finch lindice minore della lunghezza dellarray o o o compiere una determinata azione quindi aumentare lindice di un unit proseguire con il codice
in caso contrario:
Poniamo ad esempio di volere stampare una tabella in HTML, che contiene i
97
nomi degli alunni e i loro voti:

<SCRIPT type="text/javascript"> alunni =new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica"); voti= new Array(3,8,5,7,4,4); // a ogni nome corrisponde un voto </SCRIPT> <table border="1"> <tr> <td><B>Voti</B></td> <td><B>Alunni</B></td> </tr> <SCRIPT type="text/javascript"> i=0; while(i<alunni.length) { //inizio blocco di istruzioni document.write("<TR>"); document.write("<TD>"+alunni[i]+"</TD>");//notare l'indice variabile document.write("<TD>"+voti[i]+"</TD>"); document.write("</TR>"); //fine blocco di istruzioni i++; //aumento l'indice di 1 } </SCRIPT> </table>
Da notare nellesempio che lindice e la lunghezza dellarray sono stati confrontati ogni volta, poi sono state eseguite le istruzioni e infine aumentato lindice. Solo quando lindice diventato superiore alla lunghezza dellarray siamo "usciti" dal while. Ricordiamoci per che se scriviamo l'HTML con JavaScript, saremo poi penalizzati dai motori di ricerca (vedi la lezioni sul TAG Noscript).
98
42. Do while
Il do while ha un funzionamento del tutto analogo al while, solo che listruzione viene eseguita prima che la condizione venga valutata: in questo modo si ha la certezza che listruzione venga eseguita almeno una volta. La sintassi :
do { //istruzioni } while (condizione);
Ed ecco il corrispondente diagramma di flusso:
99
Adattando lesempio di prima - come si vede si ottiene il medesimo risultato:

<SCRIPT type="text/javascript"> alunni =new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica"); voti= new Array(3,8,5,7,4,4); // a ogni nome corrisponde un voto </SCRIPT> <table border="1"> <tr> <td><B>Voti</B></td> <td><B>Alunni</B></td> </tr> <SCRIPT type="text/javascript"> i=0; do { //inizio blocco di istruzioni document.write("<TR>"); document.write("<TD>"+alunni[i]+"</TD>");//notare l'indice variabile document.write("<TD>"+voti[i]+"</TD>"); document.write("</TR>"); //fine blocco di istruzioni i++; //aumento l'indice di 1 } while(i<alunni.length); </SCRIPT> </table>
Tuttavia interessante notare che se anche avessimo posto che:

i=1000;
il codice sarebbe stato eseguito almeno uno volta, anche se la condizione del nostro esempio non potr mai essere verificata.
100
43. Ciclo For
Il ciclo di for un comodo modo per eseguire in una volta sola: la valutazione di una condizione e lincremento di un indice fittizio per eseguire le ripetizioni. La sintassi molto compatta e i programmatori alle prime armi potrebbero avere qualche difficolt nellapprendimento di questo costrutto. La novit rispetto al while che linizializzazione di un indice, la valutazione della condizione e laumento dellindice devono essere indicati gi allinterno del costrutto. Cos:
for (inizializzazione_indice; condizione_da_valutare, aumento_indice ) { //istruzioni }
Da notare i punti e virgola che separano le diverse istruzioni allinterno della parentesi. Il ciclo di for con un diagramma di flusso pu essere rappresentato in questo modo:
101
E nel nostro esempio:

<SCRIPT type="text/javascript"> alunni =new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica"); voti= new Array(3,8,5,7,4,4); // a ogni nome corrisponde un voto </SCRIPT> <table border="1"> <tr> <td><B>Voti</B></td> <td><B>Alunni</B></td> </tr> <SCRIPT type="text/javascript">
102
for (i=0; i<alunni.length; i++) { //inizio blocco di istruzioni document.write("<TR>"); document.write("<TD>"+alunni[i]+"</TD>");//notare l'indice variabile document.write("<TD>"+voti[i]+"</TD>"); document.write("</TR>"); //fine blocco di istruzioni } </SCRIPT> </table>
Nell'articolo Alleggerire le pagine di dati con JavaScript viene descritto un procedimento che utilizza un ciclo di for e gli array di array per ottimizzare il peso delle pagine.
Nota a margine
Ci si pu chiedere a questo punto quando si debba usare while e quando invece usare for. Nella maggior parte dei casi un ciclo di for far al caso vostro, se per dovete porre delle condizioni multiple sar meglio usare un while. Ad esempio:
for (i=0; ( (condizione 1)&&(condizione 2) ); i++) { }
l'esempio precedente funziona, ma non molto elegante, n molto chiaro; in questo caso meglio usare un while:
i=0; while ( (condizione 1)&&(condizione 2) ) { //istruzioni } i++;
103
44. For in
Molti programmatori non conoscono questo costrutto che proprio di JavaScript (da non confondere con il foreach di altri linguaggi), eppure utilissimo per ricavare quali sono le propriet di un oggetto. La sintassi :
for (propriet in oggetto) { //istruzioni }
dove propriet una "variabile-contenitore" che stiamo creando al volo. Questo costrutto pu essere utilizzato anche per ricavare le propriet di un determinato oggetto della pagina (nell'esempio un form):
<FORM NAME="mioForm"> <input type="button" NAME="miotesto" value="mio campo di prova"> </FORM> <SCRIPT TYPE="text/javascript"> for (prop in document.mioForm) { document.write(prop+"<BR>"); } </SCRIPT>
da vedere con diversi browser per apprezzarne lutilit. Una sintassi di questo genere la avevo utilizzata nel descrivere gli eventi JavaScript, per ricavare i vari eventi che si applicano a un livello. Il for in pu essere utilizzato anche per scorrere gli elementi di un array, se interrogato con la giusta sintassi:
<SCRIPT type="text/javascript"> alunni =new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica"); for (prop in alunni) { document.write(alunni[prop]+"<BR>"); } </SCRIPT>
104
45. Break e continue
Abbiamo gi incontrato Break, quando abbiamo parlato dello switch: si tratta di unistruzione che ci consente di uscire da un costrutto. Se utilizzata con for, for in, while, o dowhile serve per interrompere il ciclo delle ripetizioni. Poniamo di voler interrompere il ciclo dellesempio delle pagine precedenti dopo il terzo elemento:
<SCRIPT type="text/javascript"> alunni =new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica"); voti= new Array(3,8,5,7,4,4); // a ogni nome corrisponde un voto </SCRIPT> <table border="1"> <tr> <td><B>Voti</B></td> <td><B>Alunni</B></td> </tr> <SCRIPT type="text/javascript"> for (i=0; i<alunni.length; i++) { //inizio blocco di istruzioni document.write("<TR>"); document.write("<TD>"+alunni[i]+"</TD>");//notare l'indice variabile document.write("<TD>"+voti[i]+"</TD>"); document.write("</TR>"); //fine blocco di istruzioni if(i==2)break; } </SCRIPT> </table>
Una situazione come quella descritta tuttavia non molto utile. Sarebbe bastato scrivere:
for (i=0; i<2; i++)
invece in situazioni pi complesse lutilizzo di break di estrema utilit. Continue invece serve per forzare lesecuzione del codice, anche se dovrebbe essere interrotta (per esempio da un if allinterno del ciclo).
105
46. L'Indentazione
Nella lezione sui commenti JavaScript abbiamo visto come questi ci aiutino a mantenere in ordine il codice e a comprenderlo a distanza di mesi. Un altro utile strumento per manterenrere in ordine il codice la cosiddetta "indentazione": si tratta di utilizzare la tabulazione (tasto tab), per far rientrare il codice, di solito in corrispondenza contenuto delle parentesi graffe (che individuano blocchi di codice). Es:
if (document.all) { |<---tab -->| alert ("stai usando explorer"); }
Quanto alle parentesi graffe (che si ottengono, lo ricordiamo, con Alt-GR + Shift + [) ci sono due scuole di pensiero: chi preferisce aprirne una subito dopo le istruzioni (come negli esempi),e richiuderla andando a capo chi invece preferisce riportare a capo l'apertura e la chiusura delle parentesi quadre. Cos:
if (document.all) { |<---tab -->| alert ("stai usando explorer"); }
L'importante che il codice compreso tra le parentesi sia rientrato. L'indentazione infatti garantisce una maggiore leggibilit del codice stesso, e permette di scorrerlo velocemente per trovare i punti che ci interessano.
106
47. Tecniche di debug
Pu capitare che tutto lo script sia esatto per il browser (nel senso che non retituisca erorre), eppure non dia il risultato voluto. Bisogna allora individuare il punto in cui siamo incappati in un bug che mina la validit del nostro programma (questa volta un errore concettuale, non un errore di sintassi). Possiamo allora utilizzare in vario modo gli alert, per sorvegliare il "buon andamento" dello script. Possimo usare l'alert per:
Usiamo l'alert per Visualizzare il contenuto di una variabile Esempio numero=6; numero=numero-5; alert(numero); if (document.all) { alert(IE); } else { alert(non IE); } alunni=new Array(Aldo,Giovanni,Giacomo); Sorvegliare il buon andamento di un ciclo for (n=0;n<alunni.length;n++) { alert(n); alert(alunni[n]); }
Scoprire in quale caso del controllo condizionale ci troviamo
Tutti questi utilizzi dell' alert ci posso venire in aiuto per sovergliare il "buon andamento" del codice e per scoprire a che punto del programma siamo arrivati.
107
48. L'istruzione "eval" I
Abbiamo detto finora che la difficolt della programmazione JavaScript sta tutta nella diversit dei DOM dei browser. Listruzione eval tutto ci che ci serve per aggirare questo ostacolo. Eval infatti trasforma la stringa racchiusa tra parentesi tonde in codice JavaScript. La sintassi la seguente:
eval ("stringa da valutare");
Ad esempio: per assegnare linvisibilit a un livello, come abbiamo visto parlando del DOM dovremmo scrivere: Con Netscape 4: document.layers["mioLiv"].visibility= "hide"; Con Internet Explorer 4: document.all["mioLiv "].style.visibility= "hidden"; Con Internet Explorer 6: document.getElementById["mioLiv "].style.visibility= "hidden";
Prendiamo ad esempio la pagina seguente, realizzata con i livelli, descritti attraverso i fogli di stile incorporati:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <STYLE TYPE="text/css"> #mioLiv { background-color:orange; width:300px; height:300px; border:1px; visibility:show; } </STYLE> <SCRIPT TYPE="text/javaScript"> function nascondi(){ //istruzioni } </SCRIPT> </head> <body>  <A HREF="javascript:nascondi();">nascondi il livello</A> <BR><BR><BR> <DIV id="mioLiv"><br><br><br><br><br></DIV> </body>
108
</html>
dovremmo scrivere la funzione nascondi() in questo modo:

function nascondi() { if (document.all) { document.all["mioLiv"].style.visibility="hidden"; /*cambio la visibilit da visibile a invisibile con IE*/ } else if (document.layers){ //NN4 } document.layers["mioLiv"].visibility="hide";
else if (document.getElementById) { //NN6 ed Opera document.getElementById("mioLiv").style.visibility="hidden"; } }
In questo modo "sprechiamo" per del codice, perch ripetiamo la stessa istruzione in tre diversi casi. C' allora da chiedersi se ci sia il modo di scrivere una volta soltanto l'istruzione comune (quella che imposta l'invisibilit) e rendere variabili delle porzioni di codice. Inoltre potremmo poi desiderare nuovamente la visualizzazione del livello appena nascosto. Ci occorrebbe quindi una funzione mostra() di questo genere:
function mostra() { if (document.all) { document.all["mioLiv"].style.visibility="visible"; } else if (document.layers){ document.layers["mioLiv"].visibility="show"; } else if (document.getElementById) { document.getElementById("mioLiv").style.visibility="visible"; } }
richiamata da questa riga di codice, da inseire nel BODY del documento:

<A HREF="javascript:mostra();">mostra il livello</A>
E' evidente per che stiamo scrivendo del codice doppio, perch le due funzioni sono molto simili fra di loro. L'istruzione eval la soluzione a tutti i nostri problemi. Per prima cosa notiamo che tutte le istruzioni hanno delle parti comuni. L'istruzione infatti
109
cos composta:
documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";"
dove:
document.all document.layers document.getElementById [
documento parA
110
nascosto="\"hidden\""; visibile="\"visible\"";
else if (document.layers){ //NN4 documento="document.layers"; parA="[\""; parB="\"]"; visibilita=".visibility"; nascosto="\"hide\""; visibile="\"show\"";
else if (document.getElementById) { // Opera e NN6 documento="document.getElementById"; parA="(\""; parB="\")"; visibilita=".style.visibility"; nascosto="\"hidden\""; visibile="\"visible\""; } }
function nascondi() { //eseguo l'istruzione tramite eval, come somma di variabili eval(documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";"); } function mostra() { //istruzione identica alla precedente, soltando che rende visbile eval(documento+parA+"mioLiv"+parB+visibilita+"="+visibile+";"); } inizializza(); //lancio la funzione che inizializza le variabili </SCRIPT> </head> <body>  <A HREF="javascript:nascondi();">nascondi il livello</A><BR> <A HREF="javascript:mostra();">mostra il livello</A> <BR><BR><BR> <DIV id="mioLiv"><br><br><br><br><br></DIV> </body> </html>
111
49. L'istruzione "eval" II
Riprendiamo l'esempio della lezione precedente: potremmo voler far s che il nostro lavoro non vada buttato, ma che sia riutilizzabile, indipendentemente dal livello. Con un minimo sforzo in pi possibile passare un argomento alle funzioni, in modo da renderla generica. Ecco l'esempio completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <STYLE TYPE="text/css"> #mioLiv { position:absolute; background-color:orange; width:300px; height:20px; border:1px; visibility:show; } </STYLE> <SCRIPT TYPE="text/javaScript"> function inizializza(){ if (document.all) { documento="document.all"; parA="[\""; parB="\"]"; visibilita=".style.visibility"; nascosto="\"hidden\""; visibile="\"visible\""; } else if (document.layers){
112
eval(documento+parA+livello+parB+visibilita+"="+nascosto+";"); } //la funzione dichiarata con l'argomento livello function mostra(livello) { eval(documento+parA+livello+parB+visibilita+"="+visibile+";"); } inizializza(); </SCRIPT> </head> <body>   <A HREF="javascript:nascondi('mioLiv');">nascondi il livello</A><BR> <A HREF="javascript:mostra('mioLiv');">mostra il livello</A> <BR><BR><BR> <DIV id="mioLiv"><br><br><br><br><br></DIV> </body> </html>
Se volessimo essere ancor pi raffinati, non dovremmo creare due funzioni diverse, ma un unica funzione che: se il livello nascosto, lo visulizza se il livello visualizzato, lo nasconde
Per farlo basterebbe assegnare la visibilit in maniera variabile, e lo stato della variabile potrebbe essere deciso eseguendo a priori un controllo condizionale. Proviamo ad esprimere a parole questo concetto: se il livello visibile --> il nuovo stato nascosto se il livello nascosto --> il nuovo stato visibile
ci troviamo in una tipica situazione da controllo ternario. Proviamo ancora ad esprimerci aancora parole: stato=(livello_visibile)?nascosto:visibile; Traduciamo adesso in una sitassi adatta per Internet Explorer:
stato=(document.all["mioLiv"].style.visibility=="visible")?hidden:visible;
poi basta assegnare:

document.all["mioLiv"].style.visibility==stato;
Adesso basta fare le debite modifiche, tenendo conto che:
113
document.all["mioLiv"].style.visibility;
per noi:
documento+parA+livello+parB+visibilita;
che hidden per noi nascosto e visibile per noi visibile. Infine non ci resta che cucire il tutto con eval(). Vediamo l'esempio completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <STYLE TYPE="text/css"> #mioLiv { position:absolute; background-color:orange; width:300px; height:300px; border:1px; visibility:show; } </STYLE> <SCRIPT TYPE="text/javaScript"> function inizializza(){ if (document.all) { documento="document.all"; parA="[\""; parB="\"]"; visibilita=".style.visibility"; nascosto="\"hidden\""; visibile="\"visible\""; } else if (document.layers){ documento="document.layers"; parA="[\""; parB="\"]";
114
function rileva(livello) { visibilitaLivello=documento+parA+livello+parB+visibilita; /*se fosse explorer sarebbe: document.all["mioLiv"].style.visibility */ stato=eval("("+visibilitaLivello+"=="+visibile+")?"+nascosto+":"+visibile+";"); eval(documento+parA+livello+parB+visibilita+"=\""+stato+"\";"); } inizializza(); </SCRIPT> </head> <body>  <A HREF="javascript:rileva('mioLiv');">nascondi / mostra il livello</A><BR> <BR><BR><BR> <DIV id="mioLiv"><br><br><br><br><br> <br><br><br><br><br></DIV> </body> </html>
Con questo ultimo esempio abbiamo ottenuto una funzione per il cambio della visibilit di un livello, sufficientemente generica da essere adeguata a qualsiasi situazione, visto che non dipende n dal nome del livello, n dalla sua visibilit o invisibilit.
115

Corso Base JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Corso Base JavaScript

Uploaded by

Copyright:

Available Formats

[unit1] - HTML.

IT - Corso base JavaScript per esempi

Corso base JavaScript per esempi Introduzione

2. Perch usare JavaScript?

5. JavaScript non Java

Come fatto un browser

8. Il DOM e le problematiche ad esso connesse

11. Il tag NOSCRIPT

12. Includere un file esterno

[unit1] - HTML.IT - Corso base JavaScript per esempi

14. Come scrivere nella pagina

15. Il debugger: trovare gli errori

Lavoriamo con le finestre

17. Le finestre personalizzabili

18. Le caratteristiche delle finestre personalizzabili

Introduzione alla programmazione

21. Come utilizzare le variabili

22. Operare con le variabili

23. Differenza tra variabili e oggetti

25. Dove utilizzare le funzioni I

26. Dove utilizzare le funzioni II

[unit1] - HTML.IT - Corso base JavaScript per esempi

27. I parametri delle funzioni

28. Restituire i valori di una funzione

30. Operatori relazionali

31. Come funzionano else ed else if

32. Esempio: individuare il browser

33. Gli operatori logici

34. Uso del "not" e operatori di bit

35. Interrompere il flusso del codice con return

36. Esempi pratici dell'utilizzo di if, else if, else

38. Loperatore ternario

40. Array di array e array associativi

[unit1] - HTML.IT - Corso base JavaScript per esempi

43. Ciclo For

45. Break e continue

47. Tecniche di debug

48. L'istruzione "eval" I

49. L'istruzione "eval" II

[unit1] - HTML.IT - Corso base JavaScript per esempi

1. A chi si rivolge questo corso

[unit1] - HTML.IT - Corso base JavaScript per esempi

2. Perch usare JavaScript?

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

5. JavaScript non Java

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

che un modo sintetico di scrivere:

[unit1] - HTML.IT - Corso base JavaScript per esempi

non potrete che ottenere un errore. E inoltre anche se scrivete:

[unit1] - HTML.IT - Corso base JavaScript per esempi

[unit1] - HTML.IT - Corso base JavaScript per esempi

8. Il DOM e le problematiche ad esso connesse

per ottenere il nome del livello, la sintassi per Internet Explorer :

per Netscape 4 invece :

[unit1] - HTML.IT - Corso base JavaScript per esempi

Browser Netscape 4 Netscape 6 Internet Explorer 4 Internet Explorer 5 / 6

Identificazione document.layers document.getElementById document.all document.all, document.getElementById

[unit1] - HTML.IT - Corso base JavaScript per esempi

livello vi troverete di fronte a tre differenti sintassi: