Corso Javascript

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 di JavaScript.
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.
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.
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 di 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.
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 a Java di HTML.it.
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
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:
<html>
<head>
</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).
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>
</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. 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>
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.
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.
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) (vedi articolo: Gli standard di progettazione del Web).
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 dom level identificazione

level 0/1 (dom
netscape 4 document.layers
proprietario)
netscape 6 level 1 document.getelementbyid
internet level 0/1 (dom
document.all
explorer 4 proprietario)
internet document.all,
level 1
explorer 5 / 6 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 livello vi troverete di
fronte a tre differenti sintassi:
browser sintassi
netscape 4 document.layers["mioliv"].visibility= "hide";
internet
explorer (4, 5, document.all["mioliv"].style.visibility= "hidden";
6)
internet
document.getelementbyid("mioliv").style.visibility=
explorer 5 e 5
"hidden";
- netscape 6
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:
<html>
<head>
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;background-color:red;color:white;">
mio livello
</div>
<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!
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".
evento si applica a... descrizione esempio

(elementi
maggiormenti
usati)
onload <body> "sul <body
<img> 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
<body> si onunload="alert('ciao');">
verifica
quando il
browser
"scarica" il
documento.
cioè alla
chiusura del
documento.
onmouse <a> "al passaggio <a
over <area> del mouse". onmouseover="alert('ciao');"
<input> href="pagina.html">
(submit, si verifica
reset,button, quando l'utente
checkbox, passa il mouse
radio, option) su un'area
sensibile (link
o mappa).
con ie 5+
questo evento
può essere
associato
anche a td, tr,
etc.
onmouse <a> "quando il <a
out <area> mouse esce". onmouseout="alert('ciao');"
<input> (vedi href="pagina.html">
sopra) 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,
etc.
onclick <a> "sul click del <a onclick="alert('ciao');"
<area> mouse..." href="pagina.html">
<input>
avviene
quando l'utente
clicca
sull'elemento
onkey <a> si verifica <textarea
press <area> quando si è onkeypress="alert('ciao');">
<input> all'interno </textarea>
<div> dell'elemento e
viene premuto
un tasto della
tastiera.
onchange <input si verifica <select
type="select"> quando onchange="alert('ciao');">
l'elemento
subisce un <option>
cambiamento a uno
seguito </option>
dell'azione <option>
dell'utente. due
</option>
<option>
tre
</option>
</select>
onsubmit <form> quando viene <form name="mioform"
eseguita l'invio action="http://...."
del form onsubmit="alert('ciao');">
(tramite
bottone o
tramite invio
da tastiera).
onfocus <a> "quando <body
<input> l'elemento ha il
<body> focus..." onfocus="alert('ciao');">
entra in azione (provate questo esempio con

non appena altre finestre del browser
l'elemento è aperte, e provate a passare
attivo. dalla vostra pagina alle altre
finestre e viceversa)
onblur <a> "quando <body
<input> l'elemento non onblur="alert('ciao');">
<body> è più attivo..."
viene
richiamato
quando
l'elemento
smette di
essere attivo.
Un discorso a parte merita l'evento onFocus, che spesso suscita delle 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.
onBlursemplicemente è 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.
È 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');"

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
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>
for (prop in document.all.mioLiv) {

if (prop.indexOf("on")==0)
document.write(prop+"<br/>");
}
</script>
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:
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ì:
<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>
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:
<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.
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-serif">
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>
<tr> <td></td> </tr>
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 tutto il codice:
<SCRIPT>

</SCRIPT>
<noscript>
codice HTML
</noscript>
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).
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"></script>
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.
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 tag di
descrizione
apertura chiusura
è un commento “veloce”, che deve essere
non si
// espresso in una sola riga senza andare a
chiude
capo
/* */ si usa per scrivere commenti su più righe
ecco un esempio:
// questo è un commento su una sola riga
/*
questo è un commento che sta su più righe,
serve nel caso in cui ci siano commenti
paricolarmente lunghi
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:
/* 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.
Come 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:

<html>
<head>
<title>Corso JavaScript ad esempi</title>
</head>
<body>
//Visualizza la scritta "il mio primo script"

document.write("il mio primo script");
</script> </body>
</html>
Come si può vedere la sintassi è:
document.write("scritta");
quello che vogliamo scrivere deve essere racchiuso tra virgolette (significa che si tratta di una
sequenza di caratteri, ovvero di una stringa), oppure deve trattarsi di una valore che JavaScript
può convertire in automatico in una stringa, come un numero:
document.write(1);
Il punto e virgola invece non c'entra con il metodo write, ma indica soltanto che l'istruzione è
terminata.
Con questo metodo possiamo scrivere anche del codice HTML:

<html>
<head>
</head>
<body>
//Visualizza la scritta "il mio primo script"

document.write("<h1><font face="Verdana,Arial,Helvetica,sans-serif">il mio secondo
script</font></h1>");
</script>
</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 gli articloli
su Javascript di 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.
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:

<html>
<head>
</head>
<body>
<script language="JavaScript">
//Visualizza la srcitta "il mio primo script"
document.write("il mio primo script");
</script>
</body>
</html>
Non riconoscendo il metodo, il browser vi segnalerà un errore. Vediamo ora come attivare il
debugger e individuare l'errore.
browser come attivare il debugger

internet explorer strumenti > opzioni internet > avanzate
• verificare che la voce «disabilita il debug

degli script» non sia selezionata.
• oppure alla comparsa del primo errore:
o cliccare due volte sul messaggio di
errore in basso a sinistra
o selezionare la voce: «visualizza

sempre i messaggi di errore»
netscape 4.x digitare javascript nella barra degli indirizzi ogni
netscape 6.x volta che si vuole effettuare il debug e premere
invio.
si aprirà la “console javascript” con tutte le

indicazioni degli errori.
opera files > preferences > multimedia
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 HTML Kit -
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
cercando la Storia di Grace Murray Hopper.
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.
Sintassi di alert()
alert(messaggio)
Il contenuto dell'alert è 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).
Esempi di alert()
alert("Ecco il messaggio") // messaggio inserito direttamente
var messaggio = "Ecco il messaggio";

alert(messaggio); // messaggio inserito tramite variabile
Come per document.write(), in gererale per le stringhe, se bisogna usare le virgolette all'interno
del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare errori.
Testo con sequenze di escape
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>
testo link (http://www.html.it)
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="return confirm('Sei sicuro di voler uscire

dalla pagina?');" target="_blank">testo link</a>
testo link (http://www.html.it)
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');">

testo link (#)
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");
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.
Il codice è il seguente:
window.open('percorso','nome finestra','caratteristiche separate da virgola');
indica un percorso (relativo o

percorso assoluto) di un file html da inserire
all'interno della finestra
indica il nome della finestra che

nome finestra
abbiamo creato (opzionale)
caratteristiche se specifica la forma, la dimensione e la

parate posizione della finestra, possiamo
da virgola anche far sì che la finestra non sia
ridimensionale, o che non ci siano le
barre degli strumenti e le barre di
scorrimento.
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ì:
// apre una finestra vuota

window.open('','','');
Vediamo un esempio concreto:

<html>
<head>
<title>esempio</title>
</head>
<body bgcolor="#ffffff" text="#000000" >
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 realizzato la possibilità di cambiare due link con un solo click:

<html>
<head>
</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>
</body>
</html>
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:

<html>
<head>
</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','');">
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:

<html>
<head>
</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.
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.
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:
il codice è questo:
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 valore spiegazione esempio

la larghezza della finestra
width numerico width=400
in pixel
l'altezza della finestra in
height numerico height=200
pixel
la distanza dalla sinistra del
left numerico left=300
monitor
la distanza dal lato
top numerico top=350
superiore del monitor
indica se la finestra può
resizable yes / no resizable=no
essere ridimensionata o no
indica se la finestra va
fullscreen yes / no fullscreen=no
aperta a tutto schermo
indica se la finestra deve
channelmode yes / no essere aperta "in modalità channelmode=no
canale" (solo per ie)
la barra del menu (quella
menubar yes / no con scritto "file", menubar=no
"modifica", ecc.)
la barra degli strumenti del
toolbar yes / no browser (con i pulsanti toolbar=no
"indietro", "avanti")
la barra degli indirizzi del
location yes / no location=no
browser
le barre di scorrimento
scrollbars yes / no scrollbars=no
laterali
la barra di stato (quella in
status yes / no status=no
basso)
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 viene impostato a "0" nel caso di left e top
o viene impostato sull'intera grandezza dello schermo nel caso di width e
left
o viene automaticamrnte impostato su "no" in tutti gli altri casi
2. Quando una caratteristica viene impostata su "yes"
o la forma "caratteristica=yes" può anche essere scritta semplicemente
con "caratteristica". Ad esempio:
window.open('http://www.html.it','','fullscreen');
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');
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ì:
// creo una variabile che si chiama "mioNome"

var mioNome;
//assegno a mioNome il contenuto "Wolfgang"

mioNome="Wolfgang";
Una variabile potrà contenere qualsiasi tipo di dati valido e cioè:
Tipo di
Spiegazione Esempio
dati
Numero Qualsiasi valore numerico miaVariabile=300;
Numero a Numeri con virgola miaVariabile=12.5;
virgola
mobile
Stringa Qualsiasi valore letterale. È miaVariabile="Wolfgang";
una sequenza di caratteri,
racchiusa tra virgolette.
null È uno speciale tipo di dato miaVariabile=null;
che indica l’assenza di alcun
valore (“è il nulla”). Non è lo
zero.
booleano È uno tipo di dato che indica //Vero:
uno stato. Di fatto un valore miaVariabile=true;
booleano può assumere solo miaVariabile=1;
due valori: acceso (vero),
spento (falso). È il classico //Falso:
“interruttore della luce”. miaVariabile=false;
miaVariabile=0;
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
"dichiarate" 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), la dichiarazione 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.
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 descrizione esempio

Si fanno precedere le
carattere di escape virgolette interne alla stringa
miaScritta=”ho
da un carattere di escape (il
detto “basta!””;
” back-slash), che fa sì che le
virgolette siano ignorate
Apici semplici
Cambiando il tipo di
dentro apici doppi miaScritta=”ho
virgolette, si evita di chiudere
detto ‘basta!’”;
impropriamente la stringa
“’’”
Apici doppi dentro
apici semplici Ovviamente anche l’esempio miaScritta=’ho
contrario è valido detto “basta!”’;
‘““‘
Trasformare le
Trasformando le virgolette
virgolette in miaScritta=”ho
nei caratteri speciali
" detto "
dell’HTML il risultato non
basta!"”;
cambia
“ " " “
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.
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 nelle lezioni precedenti, 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.
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:
/* creo una variabile contenente la larghezza della finestra */

larghFinestra=300;
/* creo una variabile contenente l'altezza della finestra */

altezFinestra=300;
/* creo una variabile e mi ricavo il valore della

posizione della finestra a sinistra dello schermo */
sinistra = screen.width-larghFinestra;
/* creo una variabile e mi ricavo il valore della

posizione della finestra dall'alto dello schermo */
alto=(screen.height-larghFinestra)/2;
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ì:
sinistra=screen.width-larghFinestra-20;
Vediamo l'esempio completo:

<html>
<head>
</head>
<body>
/* creo una variabile contenente la

larghezza della finestra*/
larghFinestra=300;
/* creo una variabile contenente

l'altezza della finestra*/
altezFinestra=300;
/*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 */
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.
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. 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:
azione spiegazione
Nella finestra principale:
Chiude la finestra secondaria
miaFinestra.close()
Nella finestra stessa:
miaFinestra.close() Chiude la finestra secondaria
self.close()
Nella finestra stessa: Proverà a chiudere la finestra principale
(“opener” è appunto la finestra
miaFinestra.opener.close() principale), ma per motivi di sicurezza
verrà visualizzato un messaggio di
conferma.
Ecco un esempio completo:

<html>
<head>
</head>
<body>
<SCRIPT type="text/javascript">
/*creo una variabile contenente la larghezza della finestra*/

larghFinestra=300;
/* creo una variabile contenente l'altezza della finestra */

altezFinestra=300;
/*creo una variabile e mi ricavo il valore della posizione

della finestra a sinistra dello schermo*/
/*creo una variabile e mi ricavo il valore della posizione

della finestra dall'alto dello schermo */
/*creo un oggetto*/
miaFinestra=window.open("sponsor.htm", "", "left="+sinistra+", top="+alto+",
width="+larghFinestra+", height="+altezFinestra+", menubar, toolbar");
</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.
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
}
Insomma tutto il codice da noi elaborato deve essere contenuto all'interno delle parentesi graffe, che
delimitano l'inizio e la chiusura della funzione (Con Windows per digitare le parentesi graffe
comporre la combinazione di tasto: Alt Gr + Shift + tasto con parentesi quadre. Lo "Shift" è il tasto
con la freccia necessario per scrivere le maiuscole, da non confondere con il "Caps Lock").
La funzione che abbiamo appena creato si richiama poi con:
nomeFunzione();
da inserire nella head, nel corpo della pagina, oppure da richiamare tramite un evento. Con questo
codice non facciamo che richiamare il gruppo di istruzioni contenuti all'interno della funzione.
Per mantenere poi ordine all'interno della pagina, dobbiamo inserire tutte le nostre funzioni
all'interno della HEAD del documento, e richiamarle nella stessa HEAD o nel BODY (come detto -
facendovi riferimento tramite un evento oppure inserendole nel punto esatto in cui ci serve
richiamarle).
Vediamo un semplice esempio, per afferrare subito il concetto. Da inserire nel tag script:
function saluta() {
alert ("ciao");
}
saluta();
C'è una particolarità da notare che finora non abbiamo ancora espresso con chiarezza, ma che
dovrebbe essere emersa dai numerosi esempi presentati: ogni istruzione JavaScript deve essere
conclusa con un punto e virgola.
Se rielaboriamo alcuni degli esempi, esaminati nelle pagine precedenti, tramite l'utilizzo delle
funzioni otteniamo una sintassi molto più "pulita":

<html>
<head>
/* 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*/
/*creo una variabile e mi ricavo il valore della posizione della finestra dall'alto dello schermo */
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>
</head>
<body onLoad="apriFinestra();">
<a href="#" onClick="saluta();">clicca per ricevere un saluto</a> <br/><br/>

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()".
È 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.
Il codice è questo (da inserire nell' <head>):
function saluta() {
alert("ciao");
}
// assegnamo il gestore saluta all'evento onload

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.
Dove utilizzare le funzioni I
Prendiamo in considerazione questo esempio:
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:

<html>
<head>
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 >
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 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:

<html>
<head>
function scriviNome() {
// inizalizzo le variabili all'interno delle funzioni
nome=prompt("inserisci qui il tuo nome","il tuo nome");
}
scriviNome(); // richiamo la funzione
nome="Gianni"; // in questo modo sovrascrivo la variabile
</SCRIPT>
</head>
<body >
<SCRIPT TYPE="text/javascript">
document.write(nome);
</SCRIPT>
</body>
</html>
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:

<html>
<head>
function scriviNome() {
//inizalizzo le variabili all'interno delle funzioni
nome=prompt("inserisci qui il tuo nome","il tuo nome");
}
</script>
</head>
<body onLoad="scriviNome()">
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.
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:

<html>
<head>
function saluta() {
//inizializzo le variabili all'interno delle funzioni
var scritta2 = "ciao"; // variabile locale
var scritta3 = "prova scrittura"; //variabile locale
}
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>
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:
scritta2="ciao globale"; // variabile globale
function saluta() {
// inizializzo le variabili all'interno delle funzioni
var scritta2="ciao locale"; // variabile locale
}
// richiamo la funzione
saluta();
// faccio riferimento alla variabile

alert(scritta2);
</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: per evitare problemi con variabili locali e variabili globali, semplicemente omettete "var"
quando create delle variabili.
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(arg1, arg2, arg3, arg4) { //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. Ad esempio:
nomeFunzione("finestraFreeAsp",1 , 400, 390, "http://freeasp.html.it");
Gli argomenti sono quindi una specie di "ponte" tra l'interno e l'esterno della funzione.
Vediamo un esempio semplice che ci permetta di afferrare subito il concetto:
<html>
<head>
function saluta(nome) { //nome è l'argomento

alert("ciao "+nome);
}
</script>
</head>
<body>
<a href="#" onClick="saluta('Saibal')">Saluta Saibal</a><br/>

<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:
<html>
<head>
/* 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) {
/*assegno alla variabile il valore dell'argomento*/

larghFinestra=larghezza;
/* assegno alla variabile il valore dell'argomento*/
altezFinestra=altezza;
/*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>
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.
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.
<html>
<head>
function chiediNome() {
var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
//ATTENZIONE!
//la variabile è definita come "locale"
//se non mettessimo "var" funzionerebbe tutto
}
</script>
</head>
<body>
chiediNome(); // lancio la funzione
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 restituisce il valore della variabile

(o da un'espressione) (o dell'espressione)
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.
<html>
<head>
var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
return nomeUtente; //la funzione restituisce ora il nome dell'utente

}
</script>
</head>
<body>
valoreCatturato=chiediNome(); // lancio la funzione
document.write(valoreCatturato);
</script>
</body>
</html>
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:
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");
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é.
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:
Figura 1. Diagramma di flusso
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 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) {
}
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)
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.
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.
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.
<valore> <operatore di relazione> <valore>
Ad esempio:
x == 5
Ed ecco gli altri operatori:
Operatore Spiegazione Esempio

> maggiore x>7
>= maggiore uguale x>=7
< minore x<7
<= minore uguale x<=7
== uguale nome==”Mario”
!= diverso Nome!=”mario”
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 =
}
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 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.
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:

Figura 1. Diagramma di flusso II
e traducendolo in codice JavaScript:
if (condizione) {
// istruzione 1
}
else {
// istruzione 2
}
Ad esempio:
x = 9;
if (x < 7) {
alert("x è minore di 7");
}
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ì:
Figura 2. Diagramma di flusso III
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:
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.
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 codice JavaScript:
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 html.it: L`arte dello
sniffing: come riconoscere i browser e Riconosciamo i browser con Javascript.
Gli operatori logici
È possibile annidare un if dentro l'altro, in modo da poter valutare anche situazioni particolarmente
complesse. Ad esempio:
// provate a cambiare il valore, eventualmente

// indicando anche delle stringhe
valore = 5;
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:

x=6;
“and logico”
if ( (x>=5) && (x<=7) ) {
Devono essere vere le
&& alert ("x è compresa tra 5 e
espressioni a destra e sinistra
7");
dell’uguale.
}
nome="Gianni";
“or logico” if ( (nome=="Gianni") ||
Deve essere l’espressione a (nome=="Marco") ) {
||
sinistra dell’uguale o quella alert ("Sei Gianni oppure
a destra Marco");
}
! “not” nome="Marco"; if ( !
Viene posta di fronte (nome=="Marco")) {
all’espressione in questione
e la nega: alert ("Non sei Marco");
- 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.
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");
}
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.

x=6;
& “and a livello di bit” if ( (x>=5) & (x<=7) ) {

alert ("x è compresa tra 5 e 7");
}
nome="Gianni";
if ( (nome=="Gianni") |
| “or a livello di bit”
(nome=="Marco") ) {
alert ("Sei Gianni oppure Marco");
}
nome="Gianni";
“or esclusivo a livello if ( (nome=="Gianni") ^

^
di bit” (nome=="Marco") ) {
alert ("Sei Gianni oppure Marco");
}
x=7;
~ “not a livello di bit” if (~ (x==7) ) {

alert (“x non è 7”);
}
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:
if ( (document.all) && (navigator.platform.indexOf("Win")>-1) ) {

alert ("Stai usando Internet Explorer su Windows");
} else {
alert ("Stai usando Internet Explorer su Mac");
}
/* 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");
}
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(){
// se il browsr non è Internet Explorer

if (!document.all) {
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
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");
}
indexOf: è un metodo delle stringhe e si utilizza per verificare se una determinata stringa contiene o
meno un determinato testo (ovvero una determinata sottostringa). La sintassi è la seguente:
indexOf(valore)
Se la sottostringa cercata non c'è, il metodo restituisce -1. In tutti gli altri casi restituisce la
posizione della sottostringa (la prima posizione è 0).
Il codice è:
miaStringa.indexOf("miaSottoStringa");
Ad esempio:
valore="ciao mondo";
alert(valore.indexOf("mondo")); //restituisce 5
Se la sottostringa esiste all'interno della stringa, il valore restituito da indexOf sarà allora maggiore
di -1.
Utilizziamo le istruzioni che abbiamo appena esaminato per costruire un controllo su un modulo di
una pagina web. Immaginiamo di avere due campi:
• il primo è l'età
• il secondo è un'e-mail
e ipotizziamo di voler far un controllo sul form tale che se il formato dell'età è numerico e il campo
dell'e-mail contiene una chiocciola, il modulo può essere inviato. In caso contrario verrà
visualizzato un messaggio di errore e il modulo non partirà. Ecco l'esempio:
<html>
<head>
function valida() {
//prendo i valori dei campi, abbreviandone i nomi

eta=dati.eta.value;
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.
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:
<html>
<head>
function conferma () {
chiediConferma = confirm('Sei sicuro di voler uscire dalla pagina?');
if (chiediConferma == true){
location.href="#"; //ricarica la pagina
}
/* o anche nella forma più sintetica:
if (confirm('Sei sicuro di voler uscire dalla pagina?')){

location.href="#"; //ricarica la pagina
}
*/
}
</script>
</head>
<body>
<A href="#" onClick="conferma();">testo link</a>
</body>
</html>
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ì:
<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>
<head>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">

<tr>
/* quando c'è una sola istruzione non c'è bisogno
di parentesi graffe e può essere scritto tutto
sulla medesima riga */
if (screen.width==640) altezzaCella=80;
else if (screen.width==800) altezzaCella=100;
else altezzaCella=200;
document.write("<TD height=""+altezzaCella+"">");
</script>
<no script>
<td width="100">
</no script>
prova</td>
<tr>
</table>
</body>
</html>
come si vede l'if ci permette di impostare l'altezza in modo variabile a seconda della risoluzione.
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:
Figura 1. Diagramma di flusso
la sintassi è:
switch(<variabile da valutare>) {
case <valore 1>:

//istruzioni
break; //si ferma qui
case <valore 2>:

//istruzioni
...
case <valore n>:

//istruzioni
default:
//istruzioni
}
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.
Il codice dell'esempio della lezione precedente avremmo potuto scriverlo senz'altro come switch. Al
posto di:
if (screen.width==640) altezzaCella=80;
else altezzaCella=200;
switch (screen.width) {
case 640:
altezzaCella=80;
break;
case 800:
altezzaCella=100;
break;
case 1024:
altezzaCella=150;
break;
default:
altezzaCella=200;
}
L'operatore 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 è utile ad assegnare una valore ad una variabile usando la forma
compatta:
<variabile> = <condizione>?<valore1>:<valore2>
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);
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.
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 d'ordine". 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:
//viene creato l'array miaVariabile = new Array(); //assegno ad ogni elemento dell'array il valore
che voglio miaVariabile[i]=contenuto;
dove "i" è l'indice che indica la posizione all'interno dell'array. Nel contare gli elementi di un array
si comincia sempre dallo 0.
Esiste anche un'ulteriore 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 = new Array(); //viene creato l'array

alunni [0]="Mario";
alunni [1]="Gianni";
alunni [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 dell'array possono essere anche eterogenei. Se mai ne
avessimo bisogno, potremmo scegliere ad esempio creare un array che contenga il nome dell'alunno
(numeri pari nell'indice dell'array) e subito dopo la sua media di voti:
//viene creato l'array

alunni = new Array();
alunni [0]="Mario";
alunni [1]=7;
alunni [2]="Gianni";
alunni [3]=4;
alunni [4]="Monica";
alunni [5]=4;
oppure:
alunni = new Array("Mario", 7, "Gianni", 4,"Monica", 4);
Per richiamare un elemento è poi sufficiente richiamarne la posizione all'interno dell'array:
alert(alunni [4]);
In JavaScript ci sono diversi metodi che ci aiutano a manipolare gli array. Fra tutti ne vediamo
alcuni particolarmente utili:
Metodo o
Descrizione Esempio
proprietà
Conoscere la alunni=new Array("Mario",
length lunghezza di "Gianni","Monica");
un array alert(alunni.length);
Aggiungere
un elemento
alunni=new Array("Mario",
in coda
"Gianni","Monica");
push(elemento) all’array e
aggiungi=alunni.push("Davide");
restituire la
alert(aggiungi);
nuova
lunghezza
concat (elementi Aggiungere alunni=new Array("Mario",
da aggiungere) elementi ad "Gianni","Monica");
un array e aggiungi=alunni.concat("Davide","Giovanni");
restituire la alert(aggiungi);
nuova
lunghezza.
Restituisce
un nuovo
array formato
dalla somma
degli
elementi
Eliminare un
elemento
dalla fine
"Gianni","Monica");
dell’array e
pop() togli=alunni.pop();
restituisre il
alert(togli);
nome
alert(alunni.length);
dell’elemento
eliminato.
Eliminare un
elemento
dall’inizio
"Gianni","Monica");
dell’array e
shift() togli=alunni.shift();
restituire il
alert(togli);
nome
alert(alunni.length);
dell’elemento
eliminato
Invertire alunni=new Array("Mario",
l’ordine degli "Gianni","Monica");
reverse()
elementi di alunni.reverse();
un array alert(alunni[0]);
Dividere
l’array in un
"Gianni","Monica","Davide");
array più
slice(inizio,fine) alert(alunni.length);
piccolo e
alunni2=alunni.slice(0,2);
restituire il
alert(alunni2.length);
nuovo array
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 Alunno 2 Alunno 3

Classe 1 Aldo Giovanni Giacomo
Classe 2 Mario Gianni Monica
Il codice necessario a costruire una matrice di questo genere è il 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"
all'indice dell'array, anziché un numero. Ad esempio:
voti = new Array();

voti["Mario"] = 7;
voti["Gianni"] = 4;
voti["Monica"] = 4;
alert(voti["Mario"]);
Un altro modo molto utile e veloce per dichiarare un array associativo è questo:
var arrayAssociativo = { "Mario":"7", "Gianni":"4", "Monica":"4" };
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 dell'array.
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 eseguo una determina istruzione
o e poi aumento di uno l'indice
• quando l'istruzione non è più valida, esco dal programma
L'indice viene aumentato scrivendo:
i=i+1;
o più sinteticamente:
i++;
Figura 1. Diagramma di flusso IV
Se volessimo scorrere un array potremmo ad esempio:
• inizializzare un indice con 0

• confrontare l'indice con la lunghezza dell'array
• finché l'indice è minore della lunghezza dell'array
o compiere una determinata azione
o quindi aumentare l'indice di un unità
• in caso contrario:
o proseguire con il codice
Poniamo ad esempio di volere stampare una tabella in HTML, che contiene i nomi degli alunni e i
loro voti:
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>
i=0;
//inizio blocco di istruzioni

while(i<alunni.length) {
document.write("<tr>");
//notare l'indice variabile

document.write("<td>"+alunni[i]+"</td>");
document.write("<td>"+voti[i]+"</td>");
document.write("</tr>");
//fine blocco di istruzioni
i++; //aumento l'indice di 1

}
</script>
</table>
Da notare nell'esempio che l'indice e la lunghezza dell'array sono stati confrontati ogni volta, poi
sono state eseguite le istruzioni e infine aumentato l'indice. Solo quando l'indice è diventato
superiore alla lunghezza dell'array 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>).
Do...while
Il do...while ha un funzionamento del tutto analogo al while, solo che l'istruzione viene eseguita
prima che la condizione venga valutata: in questo modo si ha la certezza che l'istruzione venga
eseguita almeno una volta.
La sintassi è:
do {
//istruzioni
} while (<condizione>);
Ed ecco il corrispondente diagramma di flusso:

Figura a. Diagramma di flusso VI
Adattando l'esempio di prima - come si vede - si ottiene il medesimo risultato:
</script>
<table border="1">
<tr>
<td><b>Voti</b></td>
<td><b>Alunni</b></td>
</tr>
i = 0;
do {

document.write("<td>"+alunni[i]+"</td>");//notare l'indice variabile

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.
Ciclo For
Il ciclo di for è un comodo modo per eseguire in una volta sola: la valutazione di una condizione e
l'incremento di un indice fittizio per eseguire le ripetizioni. La sintassi è molto compatta e i
programmatori alle prime armi potrebbero avere qualche difficoltà nell'apprendimento di questo
costrutto.
La novità rispetto al while è che l'inizializzazione di un indice, la valutazione della condizione e

l'aumento dell'indice devono essere indicati già all'interno del costrutto. Così:
for (<inizializzazione_indice>; <condizione_da_valutare>; <incremento_indice> ) { //istruzioni }
Da notare i punti e virgola che separano le diverse istruzioni all'interno della parentesi. Il ciclo di
for con un diagramma di flusso può essere rappresentato in questo modo:
Figura 1. Diagramma di flusso V
E nel nostro esempio:
</script>
<table border="1">
<tr>
</tr>
for (i=0; i<alunni.length; i++) {

}
</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
}
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>
for (prop in document.mioForm) {
document.write(prop+"<br/>");
}
</script>
da vedere con diversi browser per apprezzarne l'utilità.
Un codice di questo genere l'avevamo utilizzato 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:
alunni = new Array("Aldo","Giovanni","Giacomo","Mario","Gianni","Monica");
for (prop in alunni) {

document.write(alunni[prop]+"<br/>");}
</script>
Break e continue
Abbiamo già incontrato la parola chiave break, quando abbiamo parlato del costrutto switch: si
tratta di un'istruzione che ci consente di uscire da un costrutto.
Se utilizzata con for, for... in, while, o do...while serve per interrompere il ciclo delle ripetizioni.
Poniamo di voler interrompere il ciclo dell'esempio delle pagine precedenti dopo il terzo elemento:
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>
</tr>
for (i=0; i<alunni.length; i++) {
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 l'utilizzo di break è di estrema utilità. Continue invece serve per
forzare l'esecuzione del codice, anche se dovrebbe essere interrotta (per esempio da un if all'interno
del ciclo).
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.
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 Esempio

Visualizzare il numero=6;
contenuto di una numero=numero-5;
variabile alert(numero);
if (document.all) {
Scoprire in quale
alert(“IE”);
caso del controllo
} else {
condizionale ci
alert(“non IE”);
troviamo
}
alunni=new
Array(“Aldo”,”Giovanni”,”Giacomo”); for
Sorvegliare il buon
(n=0;n<alunni.length;n++) {
andamento di un
alert(n);
ciclo
alert(alunni[n]);
}
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.
L'istruzione "eval" - I
Abbiamo detto finora che la difficoltà della programmazione JavaScript sta tutta nella diversità
dei DOM dei browser. L'istruzione 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 l'invisibilità a un livello 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:

<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/>
<div id="mioLiv"><br/><br/><br/></div>
</body>
</html>
dovremmo scrivere la funzione nascondi() in questo modo:
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>
È 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 è così composta:
documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";"
dove:
document.all
documento document.layers
document.getElementById
[
parA
(
]
parB
)
.style.visibility
visibilita
.visibility
hidden
nascosto
hide
Possiamo dunque creare una funzione inzializza() da richiamare subito nella pagina, che crei le
variabili che abbiamo indicato in tabella. Infine con eval() possiamo eseguire l'istruzione come
somma di tutte le variabili da noi create.
Possiamo poi adattare la sintassi che abbiamo creato, in modo da generare un'ulteriore funzione
che ci mostri il livello (prima nascosto):
<html>
<head>
#mioLiv {
position:absolute;
width:300px;
height:20px;
border:1px;
visibility:visible;
}
</style>
function inizializza(){
if (document.all) {
// creo le variabili per la sintassi di IE

documento="document.all";
/* notare le virgolette precedute dall'escape ("),

* che si sono rese necessarie, per mantenere inalterata
* la sinassi e per non incorrere in errori
*/
parA="["";
parB=""]";
visibilita=".style.visibility";
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="")";
}
}
/* 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/>
<DIV id="mioLiv"><br/><br/><br/><br/><br/></DIV>
</body>
</html>
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:
<html>
<head>
#mioLiv {
position:absolute;
width:300px;
height:20px;
border:1px;
visibility:show;
}
</style>
if (document.all) {
parA="["";
parB=""]";
}
else if (document.layers){
parA="["";
parB=""]";
nascosto=""hide"";
visibile=""show"";
}
parA="("";
parB="")";
}
}
function nascondi(livello) {
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:
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:
<html>
<head>
#mioLiv {
position:absolute;
width:300px;
height:20px;
border:1px;
visibility:show;
}
</style>
<SCRIPT TYPE="text/javaScript">
if (document.all) {
parA="["";
parB=""]";
}
else if (document.layers){
parA="["";
parB=""]";
nascosto=""hide"";
visibile=""show"";
}
parA="("";
parB="")";
}
}
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à.
Caratteri speciali
All'interno delle stringhe è possibile indicare alcuni caratteri speciali ovvero delle sequenze che
costituiscono un mezzo per formattare il testo:
Designazione
Sequenza Descrizione
standard
\n Nuova riga (tipicamente usato per andare a capo) NL (LF)
\t Tab orizzontale HT
\b Backspace BS
\r Ritorno carrello (meno usato, in genere è accoppiato con \n) CR
\f Avanzamento pagina FF
\\
Backslash: serve per scrivere il cararattere backslash altrimenti
interpretato come sequenza di escape
Virgolette singole: per rappresentare questo carattere che
\' '
altrimenti è letto come delimitatore di stringa
Virgolette doppie: per rappresentare questo carattere che
\" "
altrimenti è letto come delimitatore di stringa
Il classico esempio di applicazione dei caratteri speciali nelle stringhe è il ritorno a capo:
document.write("questa è una riga \n e questa è un'altra riga");
Capita spesso, infatti, di voler indicare all'elaboratore di dover scrivere a video una stringa con
ritorni a capo fatti in questa maniera. Il nostro intreprete, in poche parole, quando trova queste
particolari sequenze sa di dover interpretare diversamente questi caratteri, come se fossero dei
comandi.
Escape ed Unescape
Le stringhe possono essere interpretate sia come sequenze di caratteri o come righe di comando. Un
campo di applicazione, ad esempio, è nel trattamento dei dati inviati al server, o anche al client, con
il metodo GET. In questo caso lo script riceve i dati come una stringa attaccata (appended) all'URL
originale in cui alcune sequenze di caratteri indicano vanno interpretati come caratteri particolari
come lo spazio vuoto o il separatore tra variabile e valore.
Ad esempio se effettuate una ricerca su Altavista vedrete aggiungersi all'URL una serie di caratteri
che segue un punto interrogativo, ebbene, quei caratteri opportunamente trattati, formano una
stringa che interroga il motore di ricerca. I caratteri scritti in quella notazione si chiamano sequenze
escape e utilizzano la codifica URL in cui:
1. le coppie nome=valore sono separate da una &;

2. gli spazi sono sostituiti da +;
3. i caratteri alfanumerici sostituiti dall'equivalente esadecimale preceduto da %.
Parte del lavoro del programma CGI che funzionano su server è proprio quello di decifrare la
stringa di input in caratteri ISO-Latin-1, e non le sequenze Unicode, ma Javascript può elaborare
queste stringhe anche all'interno dei propri script mediante i comandi escape:
escape("Ecco qui")
diventa "Ecco%20qui"
o con unescape per rendere la situazione contraria:

unescape("Ecco%20qui")
diventa "Ecco qui"
Opportunamente utilizzati, queste funzioni si rivelano utilissime e offrono all'utente un grande

grado di interattività

Corso Javascript

Uploaded by

Document Information

Original Title

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 Javascript

Uploaded by

Copyright:

Available Formats

A chi si rivolge questo corso

Perché usare JavaScript?

• "aggiustare" l'HTML in modo da correggere le imperfezioni che si vedono in un browser

• il client (il pc su cui visualizzate le pagine)

Le due aziende il 4 dicembre 1995 annunciarono la nascita di questo nuovo linguaggio,

La versione 2.0 di Netscape Navigator fu un grande successo, ma i webdesigner non utilizzarono

Microsoft rispose a JavaScript in due modi:

• con l'introduzione di VBScript all'interno di Internet Explorer 3

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

Attualmente siamo alla terza versione di ECMAScript.

ECMAScript è dunque figlio di JavaScript. E oggi quando si dice JavaScript, JScript ed

JavaScript non è Java

Java è un linguaggio di programmazione, la cui avvenuta realizzazione fu annunciata nel maggio

Oggi con java si realizzano:

• programmi (come StarOffice e OpenOffice)

• prima di tutto c'è il browser stesso (l'oggetto navigator)

Facciamo un esempio. Prendiamo il seguente codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

che è un modo sintetico di scrivere:

La riga che abbiamo scritto precedentemente significa:

"prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form

Infatti se scriviamo un codice come questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

al caricamento della pagina vedremo un messaggio che indica la lunghezza di

se la richiesta è diretta - non c'è pagina verso cui tornare indietro):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

form che abbiamo visto prima.

Infatti se adattate l'esempio relativo al campo del form e scrivete:

non potrete che ottenere un errore. Inoltre anche se scrivete:

<a href="#" onClick="alert(history.value)">torna indietro</a>

elementi presenti nel codice e di attribuire ad essi determinate azioni.

Il DOM e le problematiche ad esso connesse

I primi browser (Netscape 2 e Internet Explorer 3) forniti di JavaScript utilizzavano un DOM

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 è:

per Netscape 4 invece è:

Di fatto document.all diviene un modo per identificare Internet Explorer, mentre

Attualmente la situazione è la seguente:

browser dom level identificazione

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Un evento è – molto semplicemente – qualcosa che accade nel documento.

evento si applica a... descrizione esempio

l'evento scatta <img

entra in azione (provate questo esempio con

onBlursemplicemente è il contrario di onFocus: quando l'elemento che aveva il focus lo perde

<a onmouseover="alert('passaggio sul link');" onmouseout="alert('uscita dal link');"

onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove,

<div id="mioLiv" style="position:absolute"></div>

for (prop in document.all.mioLiv) {

Dove scrivere il codice

<a href="http://www.html.it" onMouseOver="miaFunzione();">

L'indicazione "//-->" può dunque essere scomposta in due parti:

• "//" nasconde la riga ai browser che interpretano JavaScript

<script language="javascript 1.2">

Si confrontino per esempio queste due sintassi con Netscape 4.x:

Modifica > Preferenze > Avanzate

Il tag &lt;noscript&gt; può essere posizionato in vario modo.

document.write serve per scrivere nella pagina. Lo vedremo in seguito.

Tag noscript e i motori di ricerca

Insomma di tutto il codice:

Includere un file esterno

Il tag <noscript> può essere posizionato in vario modo.