Corso_Javascript

8/7/2019 Corso_Javascript

1/104

A chi si rivolge questo corso

Il corso che state per seguire si rivolge ai webmaster alle prime armi. Il lettore ideale quello che haappena 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 saperprogrammare, n una grande esperienza nel web publishing.

Si tratta di lezioni con una finalit prevalentemente pratica: si vuol far s che il webmaster sia ingrado di operare autonomamente con JavaScript, e che quindi sia in grado di comprendere lasintassi, di poter modificare a seconda delle proprie necessit i gadget trovati in rete, e di potercreare 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 propriepagine: faremo quindi molti esempi inerenti le differenze tra i browser, le diversit di risoluzionedel monitor, e analizzeremo molte situazioni di "quotidiano webpublishing".

Data la finalit "pratica" molti concetti teorici verranno soltanto accennati, altri verrannovolutamente omessi o posticipati (in quanto non ritenuti fondamentali nell'ottica del webmaster odella situazione che si sta analizzando).

Pertanto, pur essendo questo corso perfettamente autonomo, chi volesse approfondire gli aspettiteorici 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 semplicelinguaggio di scripting che viene "letto" dal browser, si possono eseguire un'infinit di operazioniche 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 JavaScriptsfogliate l'archivio della mailing list JavaScript di HTML.it.


2/104

La guida che state leggendo ha lo scopo di introdurvi gradualmente alla sintassi di JavaScript: dallebasi, fino a raggiungere una certa autonomia nell'elaborare gli script e creare da soli gli script che viservono. Ma non si pu per ottenere tutto e subito, e per raggiungere un simile obiettivo dovremoaddentrarci 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 sitrova 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: ilserver 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 essereeffettuata 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


3/104

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 permettesseai web designer di interagire con i diversi oggetti della pagina (immagini, form, link, ecc.), masoprattutto con le applet Java (programmi che permettono di interagire con l'utente). Infatti in quellostesso anno Netscape era particolarmente vicina alla Sun Microsystems (ideatrice di Java), con cuiaveva 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 Navigator2.0 incorporava quindi LiveScript, ma - in omaggio a Java - Netscape decise di ribattezzare il nuovolinguaggio di scripting JavaScript.

La versione 2.0 di Netscape Navigator fu un grande successo, ma i webdesigner non utilizzaronoJavaScript per interagire con le applet java (come avrebbe voluto Netscape), ma piuttosto perrendere 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


4/104

con una propria versione di JavaScript, sotto molti aspetti simile all'originale, chiamataJScript (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 distandardizzare JavaScript e si affidano all'European Computer Manufacturers Association(ECMA). La stessa associazione che oggi incaricata da Microsoft di standardizzare il C#. Lastandardizzazione incominci nel novembre 1996 e fu adottata nel giugno 1997 da ECMA enell'aprile 1998 da ISO (International Organization for Standardization, una delle pi prestigioseorganizzazioni 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 edECMAscript sostanzialmente si indicano tre variet dello stesso linguaggio.

Bisogna poi tener conto che differenti versioni del browser, implementano differenti versioni diJavaScript (la pi recente la 1.4, mentre la 1.5 ancora in beta), quindi il modo di interpretaredeterminati costrutti potrebbe variare da una sottoversione del browser all'altra.

Tutto questo tuttavia non ci deve minimamente preoccupare: si tratta della normale evoluzione (ecrescita) di un linguaggio di scripting che si adatta alle diverse esigenze sopraggiunte (deiprogrammatori e del commercio). La versione di JavaScript comunque pur sempre la 1.x e dunquetra una sottoversione e l'altra non ci saranno degli sconvolgimenti sostanziali. E quando ladifferenza 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 Netscapeper 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 eEcmaScript 4 .

Un tabella di confronto sulle varie versioni di JavaScript rispetto al browser la potete trovare sulCorso di Javascript di HTML.it.

Per completezza bisogna inoltre notare, che JavaScript pu anche essere utilizzato per scrivere delleapplicazioni 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 normalmentevengono effettuate da php, asp o jsp. L'utilizzo di JavaScript lato server per lo pi un casosporadico, e comunque non ce ne occuperemo nella presente guida.

La sintassi di JavaScript pu essere utilizzata inoltre per scrivere pagine asp, ma questo dipendedalla 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".


5/104

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 maggio1995 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, didue linguaggi che fanno cose differenti.


6/104

Se volete programmare in Java, e non JavaScript quello che vi interessa, potete consultare laGuida 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:

Esempio


7/104

La pagina contiene un campo di input text (che in genere serve all'utente per scrivere dei dati). Sevolessi 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:

Esempio

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

"paradiclorobenzoro".


8/104

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 inun 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 cheJavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in manierarigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio,document.testoProva.length.mioForm.valuesenza 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):

Esempio


9/104

torna indietro

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:

torna indietro

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

for (n=0;n


10/104

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 afornire la possibilit di interfacciarsi verso gli oggetti predefiniti (quelli del browser che abbiamovisto finora) supporta pienamente la creazione da parte del programmatore di oggetti e metodipersonalizzati.

Il DOM e le problematiche ad esso connesse

Abbiamo detto che un browser organizzato ad oggetti e che questi oggetti sono in vario modo inrelazione fra loro. La grossa difficolt della programmazione lato client che differenti browser


11/104

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

livello

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 eper 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


12/104

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 alDOM 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

netscape 4level 0/1 (domproprietario)

document.layers

netscape 6 level 1 document.getelementbyidinternetexplorer 4

level 0/1 (domproprietario)

document.all

internetexplorer 5 / 6

level 1document.all,document.getelementbyid

In pratica viene definito come DOM level 0 quello supportato da Netscape 2 e 3, e da Internet

Explorer 3: si tratta di un DOM molto scarno, composto per lo pi da document.images,

document.applets, document.forms e pochi altri elementi. Si tratta di una base minimale

comune.

Il DOM dei due browser si divide poi con i browser di 4 generazione, e pi precisamente con

l'introduzione dei livelli all'interno del documento. Si tratta di un DOM intermedio, ibrido, che

non pu essere considerato n DOM level 0, n tantomeno DOM level 1 (che ancora non esiste).

La specifica del W3C del 1998 stabilisce nuovamente un DOM comune (il DOM level 1, in cui ilbrowser 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


13/104

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 avremomodo 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 sintassinetscape 4 document.layers["mioliv"].visibility= "hide";

internetexplorer (4, 5,6)

document.all["mioliv"].style.visibility= "hidden";

internetexplorer 5 e 5- netscape 6

document.getelementbyid("mioliv").style.visibility="hidden";

Provate a fare delle prove con questo esempio, togliendo i commenti (le due barre verticali a

inizio riga) a seconda del browser. Non vi preoccupate se ancora non comprendete il significato

del codice, dal momento che vedremo tutto in seguito:

Esempio

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";


14/104

/*per IE 5/6 e NN 6*/

}

mio livello

nascondi

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 checade e si rompe. Il documento dunque l'ambiente entro cui vengono realizzate delle "azioni", inparte dovute alla volont dell'utente (passaggio del mouse su un link, click su qualcosa...), altrevolte dovute alla situazione contingente (la pagina stata caricata).

Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguirenon appena l'utente esegue una data azione: quando clicca su un bottone di un form possiamocontrollare che i dati siano nel formato giusto; quando passa su un determinato link possiamoscambiare due immagini, eccetera.

Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e ogninuova versione del browser si arricchisce di nuove possibilit messe a disposizione deglisviluppatori. 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 inserirel'evento all'interno della sintassi dell'elemento HTML e racchiudere il codice JavaScript travirgolette. Secondo questo modello:


15/104

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...(elementimaggiormentiusati)

descrizione esempio

onload

"sulcaricamento..."

l'evento scattaquanto

l'oggettorisultacompletamentecaricato.

onunload applicato al siverificaquando ilbrowser"scarica" ildocumento.cio allachiusura deldocumento.

onmouse

over(submit,reset,button,checkbox,radio, option)

"al passaggiodel mouse".

si verificaquando l'utentepassa il mousesu un'area

sensibile (linko mappa).

con ie 5+questo eventopu essereassociatoanche a td, tr,etc.

onmouse

out (vedisopra)

"quando ilmouse esce".

si verificaquando l'utente


16/104


17/104

focus..."

entra in azionenon appenal'elemento

attivo.

onfocus="alert('ciao');">

(provate questo esempio conaltre finestre del browseraperte, e provate a passare

dalla vostra pagina alle altrefinestre e viceversa)

onblur

"quandol'elemento non pi attivo..."

vienerichiamatoquandol'elementosmette diessere 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 determinatoelemento della pagina HTML.

Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha il focus: il link ola 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: conWindows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto azzurra (o delcolore 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:

testo del link

(Certo l'alert non l'ideale per far interagire i tre eventi fra loro, ma l'importante aver compreso ilconcetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il propriocodice da eseguire).

Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventipi noti e pi usati.

Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Per esempio, un livelloin 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,


18/104

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 houtilizzatoquesto codice JavaScript. sufficiente inserirlo nel BODY del documento:

for (prop in document.all.mioLiv) {if (prop.indexOf("on")==0)document.write(prop+"
");

}

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 . Il codice JavaScript va inserito tral'apertura e la chiusura del tag. Cos:

alert("ciao");

Per facilitare il lavoro del browser, opportuno esplicitare nella dichiarazione il tipo di linguaggioda noi usato:

alert("ciao");

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:


19/104

alert("ciao");

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 , e dunque la pagina verr visualizzata correttamente anche se usiamoquesta sintassi, ma preferibile usare .

Abbiamo detto che il tag (che contiene la sintassi da noi elaboarata) pu essere inclusotanto nel BODY, quanto nella HEAD del documento:

inseriremo il tag SCRIPT nella HEAD ogni volta che sar possibile. buona norma infattiseparare il codice dello scripting dal codice HTML della pagina vera e propria, in modo damantenere la pagina pi leggibile

inseriremo il tag SCRIPT nel BODY della pagina, ogni volta che la sintassi JavaScript sianecessaria per visualizzare il layout della pagina stessa. Pu capitare infatti che il codiceHTML venga scritto attraverso JavaScript: in questo caso bene che la sintassi checompleta 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 farecon delle funzioni. Vedremo pi avanti di cosa si tratta. importante tuttavia accennare gi ora chele funzioni possono essere richiamate attraverso un evento. Cos:

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:

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 chenon 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 deltutto incapace di leggere il codice di scripting. Inutile dunque che essi catturino delle righe che nonsono poi in grado di leggere: opportuno che essi vedano soltanto quella parte della pagina in gradodi produrre un qualche risultato di posizionamento. Per "nascondere" il codice JavaScript usiamoduque questa sintassi:

Abbiamo quindi racchiuso il codice JavaScript all'interno dei commenti dell'HTML, con unaparticolarit: la chiusura del commento HTML preceduto da un "commento-JavaScript" (//).


20/104

Questo avviene per evitare che i browser che interpretano il codice fraintendano l'indicazione evedano 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 sideve usare l'attributo language (e non type) in questo modo:

alert("ciao");

Si tratta di una precisazione per lo pi superflua ( pi chesufficiente), ma che in particolari situazioni pu tornare utile.

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

alert("1"==1); //d "true"

e:

alert("1"==1); // d "false"

Le due sintassi danno luogo a due valori differenti, pur essendo identiche, perch la Netscape decisea un certo punto (appunto con JavaScript 1.2) che l'uguaglianza tra due dati fosse vera soltanto nelcaso 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 usareJavascript 1.2.

Quanto all'integrazione di JavaScript all'interno della pagina, dal punto di vista terorico c' una terzavia (oltre agli venti e al richiamo nel link), che consiste nell'inserire la sintassi JavaScript (adesempio una variabile) direttamente all'interno dei tag HTML. Cos:

in pratica invece questa sintassi sembra funzionare con il solo Netscape 4.x.

Il tag noscript


21/104

Abbiamo visto che alcuni browser particolarmenti obsoleti e i motori di rcierca non leggonoJavaScript. il caso di aggiungere che JavaScript pu essere disabilitato anche dall'utente. InNetscape (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 JavaScriptsi disabilitano automaticamente anche i fogli di stile).

Per prevenire queste eventualit, il caso di predisporre la pagina in modo che sia visualizzatacorrettamente anche nel caso in cui l'utente (o il browser o il motore di ricerca) non sia in grado divisualizzare correttamente la sintassi. sufficiente utilizzare il tag noscript e racchiuderviall'interno il contenuto alternativo da visualizzare.

All'interno del tag noscript pu essere utilizzata la sintassi HTML per visualizzare messaggi oaddirittura 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:

Per visualzzare correttamente il contenuto dellapagina occorre avere JavaScript abilitato.

Il tag pu essere posizionato in vario modo.

Nel caso in cui usiate pesantemente JavaScript in tutta la pagina e ci siano parti del sito che nonfunzionano senza di esso, vi conviene inserire un unico avvertimento in tutto il documento html.

In questa situazione, non il caso che utilizziate ogni volta che utilizzate : i due

tag non vanno necessariamente in coppia. invece opportuno inserire noscript in un puntostrategico della pagina, all'interno per esempio di uno spazio vuoto ben visibile, o prima del bloccoche contiene il testo principale.

Tuttavia abbiamo detto che JavaScript pu essere usato anche per scrivere l'HTML, nel caso in cuivi troviate in una situazione di questo genere, vi conviene - diversamente dalla situazioneprecedente - usare noscript per completare e concludere il layout, anzich visualizzare degliavvertimenti. Ad esempio:

document.write("");


22/104

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 JavaScriptabilitato: serve invece chiudere la tabella anche nel caso in cui il browser non legga il contenuto deltag , e possiamo farlo - appunto - grazie al tag .

Da notare che la maggior parte degli utenti sono in posssesso di un browser in grado di leggereJavaScript (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 disabilitatoJavaScript 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 interpretanoperfettamente il contenuto del tag noscript, tanto che molto spesso nelle pagine che restituiscono irisultati (a seguito della ricerca) si vede nella descrizione dei siti fornita dal motore indicazioni sulfatto che "le pagine del sito utilizzano JavaScript..." Attenzione dunque a quello che scriveteall'interno del tag .

Il tag funziona in modo del tutto analogo al tag e dunque pu essere uno

strumento prezioso per migliorare il posizionamento nei motori di ricerca di pagine che utilizzanointensamente JavaScript. Cerchiamo di capire meglio come funziona questo tag.

I motori di ricerca sono paragonabili a dei browser testuali particolarmente obsoleti, in grado dileggere per lo pi il contenuto delle pagine e poco altro. Ignorano dunque il tag e - seabbiamo utilizzato i commenti all'interno del tag per nascondere il codice - ignorano anchele righe di codice JavaScript. Neanche il tag sanno cosa voglia dire, ma semplicementericonosono come familiare la sinatssi HTML all'interno del tag noscript e quindi la leggono e lainseriscono nei propri indici.

Insomma di tutto il codice:

codice HTML

i motori di ricerca (e i vecchi browser) non capiscono quasi niente: interpretano soltanto il codicehtml compreso all'interno del tag . Si tratta anche di un comportamento logico: infatti altempo dei vecchi browser, JavaScript ancora non era stato inventato, e dunque essi non avevanomodo di sapere che cosa fosse.


23/104

In realt sono i browser "moderni" ad essere in grado di interpretare correttamente il rapporto tra e , e conoscendone il funzionamento, non visualizzano il contenuto all'internodel 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 :

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.


24/104

Da notare che in pratica quello che stiamo facendo includere un file di testo "lato client" (dalmomento che il codice JavaScript a tutti gli effetti semplice testo), secondo un procedimentoanalogo 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 qualchevolta):

tag di

aperturatag di

chiusuradescrizione

//non sichiude

un commento veloce, che deve essereespresso in una sola riga senza andare acapo

/* */ 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 commentiparicolarmente lunghi

esempio di codice:

alert("ciao");

*/

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 dicui non conosciamo ancora l'esattezza o l'efficacia.


25/104

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

Molti programmatori - per pigrizia - non inseriscono i commenti, ma alla lunga una strategiaperdente, 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 HTMLusando JavaScript.


26/104

Vediamo subito un esempio:

Corso JavaScript ad esempi

//Visualizza la scritta "il mio primo script"

document.write("il mio primo script");

Come si pu vedere la sintassi :

document.write("scritta");

quello che vogliamo scrivere deve essere racchiuso tra virgolette (significa che si tratta di unasequenza 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:


//Visualizza la scritta "il mio primo script"


27/104

document.write("il mio secondo

script");

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:



28/104

//Visualizza la srcitta "il mio primo script"

document.write("il mio primo script");

Non riconoscendo il metodo, il browser vi segnaler un errore. Vediamo ora come attivare il

debugger e individuare l'errore.

browser come attivare il debuggerinternet explorer strumenti > opzioni internet > avanzate

verificare che la voce disabilita il debugdegli 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: visualizzasempre i messaggi di errore

netscape 4.xnetscape 6.x

digitare javascript nella barra degli indirizzi ognivolta che si vuole effettuare il debug e premereinvio.

si aprir la console javascript con tutte leindicazioni 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


29/104

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 codicimolto 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, incaso 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 vicendacercando la Storia di Grace Murray Hopper.

Le finestre di dialogo

JavaScript in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche "finestreincorporate", "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 dellafinestra che vi capiter di utilizzare pi spesso: l'alert visualizza un avvertimento, un messaggio dierrore che blocca qualsiasi azione dell'utente finch egli non d il suo benestare cliccando sulbottone.

Sintassi di alert()

alert(messaggio)


30/104

Il contenuto dell'alert una stringa (cio una sequenza di caratteri), il che vuol dire che deve essereracchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire inautomatico 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 perdocument.write() , in gererale per le stringhe, se bisogna usare le virgolette all'internodel 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:

testo link

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 dueopzioni ("ok" e "annulla"). La sintassi :

confirm("messaggio");

Mentre l'alert concede una sola possibilit di scelta ("ok"), il confirm d la possibilit di sceglieretra due opzioni:

testo link

testo link (http://www.html.it)

Prompt

una finestra che pone una domanda e consente all'utente di dare la risposta che vuole. Pu avereanche un valore di risposta predefinito. La sintassi :

prompt("domanda","risposta predefinita");

la risposta predefinita facoltativa.Ad esempio:


31/104

o anche:

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 finestremodali 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');

percorso

indica un percorso (relativo o

assoluto) di un file html da inserire

all'interno della finestra

nome finestraindica il nome della finestra che

abbiamo creato (opzionale)

caratteristiche se

parate

da virgola

specifica la forma, la dimensione e la

posizione della finestra, possiamo

anche far s che la finestra non sia

ridimensionale, o che non ci siano lebarre degli strumenti e le barre di


32/104

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:

esempio

window.open('http://www.html.it','miaFinestra','');

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:

esempio

due link on un solo click


33/104

Ovviamente possibile associare la capacit di aprire finestre secondarie anche ad altri eventi. Ad

esempio con:

la finestra secondaria si apre all'apertura della pagina.

E con:

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

esempio

prima finestra


34/104

seconda finestra

ricarica il contenuto

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:

esempio

prima finestra

seconda

finestra

(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 quartoargomento potr essere tranquillamente omesso.


35/104

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

width numericola larghezza della finestrain pixel

width=400

height numericol'altezza della finestra inpixel

height=200

left numericola distanza dalla sinistra del

monitor

left=300

top numericola distanza dal latosuperiore del monitor

top=350


36/104

resizable yes / noindica se la finestra puessere ridimensionata o no

resizable=no

fullscreen yes / noindica se la finestra vaaperta a tutto schermo

fullscreen=no

channelmode yes / noindica se la finestra deveessere aperta "in modalitcanale" (solo per ie)

channelmode=no

menubar yes / nola barra del menu (quellacon scritto "file","modifica", ecc.)

menubar=no

toolbar yes / nola barra degli strumenti delbrowser (con i pulsanti"indietro", "avanti")

toolbar=no

location yes / nola barra degli indirizzi delbrowser

location=no

scrollbars yes / nole barre di scorrimentolaterali

scrollbars=no

status yes / nola barra di stato (quella inbasso)

status=no

Come si pu intuire dagli esempi, la sintassi deve avere la forma:

caratteristica=[valore]

inoltre, come detto pi volte, le varie caratteristiche devono essere separate dalla

virgola. Ad esempio con:

apri a

tutto schermo

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 eleft

o viene automaticamrnte impostato su "no" in tutti gli altri casi


37/104

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

dati Spiegazione Esempio

Numero Qualsiasi valore numerico miaVariabile=300;


38/104


39/104

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 apertepoc'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. Vediamonealcuni:

stratagemma descrizione esempio

carattere di escape

Si fanno precedere levirgolette interne alla stringada un carattere di escape (ilback-slash), che fa s che levirgolette siano ignorate

miaScritta=hodetto basta!;

Apici semplici

dentro apici doppi

Cambiando il tipo divirgolette, si evita di chiudereimpropriamente la stringa


Apici doppi dentroapici semplici

Ovviamente anche lesempiocontrario valido


Trasformare levirgolette in"

" "

Trasformando le virgolettenei caratteri specialidellHTML il risultato non

cambia

miaScritta=hodetto "

basta!";

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.


40/104

Operare con le variabili

Quello che rende le variabili interessanti ovviamente la possibili di operare con esse. Non soloi 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 enormementenelle 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:


41/104

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


42/104

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:

Esempio

/* 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 ilvalore 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 */



43/104


44/104

conferma.

Ecco un esempio completo:

Esempio

/*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");

chiudi

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


45/104

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 compieredelle 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, chedelimitano l'inizio e la chiusura della funzione (Con Windows per digitare le parentesi graffecomporre la combinazione di tasto: Alt Gr + Shift + tasto con parentesi quadre. Lo "Shift" il tastocon 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 questocodice 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 serverichiamarle).

Vediamo un semplice esempio, per afferrare subito il concetto. Da inserire nel tag script:

function saluta() {alert ("ciao");

}

saluta();


46/104

C' una particolarit da notare che finora non abbiamo ancora espresso con chiarezza, ma chedovrebbe essere emersa dai numerosi esempi presentati: ogni istruzione JavaScript deve essereconclusa 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":


/* prima funzione*/function saluta() {

alert("ciao");}

/*seconda funzione*/function apriFinestra() {

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

/* creo una variabile contenente l'altezza della finestra*/altezFinestra=500;

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

/*creo una variabile e mi ricavo il valore della posizione della finestra dall'alto dello schermo */alto=(screen.height-larghFinestra)/2;window.open("http://www.html.it","", "left="+sinistra+",top="+alto+", width="+larghFinestra+",

height="+altezFinestra+", menubar, toolbar");//NB la riga precedente non va a capo

}

/*terza funzione*/function scriviRisoluzione(){document.write("Stai navigando a una risoluzione di "+screen.width+" x "+screen.height);

}

clicca per ricevere un saluto

scriviRisoluzione();


47/104

Nell'esempio che abbiamo esaminato or ora sono presenti tre funzioni, due delle quali vengonorichiamate 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 dellafunzione richiamata dall'evento onLoad. Nel nostro esempio la funzione "scriviRisoluzione()" vienelanciata prima della funzione "aprifinestra()".

evidente che tramite un utilizzo oculato di funzioni ed eventi possibile creare delle pagine moltoordinate, con il codice JavaScript suddiviso in molteplici parti, "azionato" soltanto quandorichiamato.

Nota a margineIn realt possibile specificare che la funzione deve essere richiamata da un determinato eventodirettamente dal codice JavaScript.

Il codice questo (da inserire nell' ):

function saluta() {alert("ciao");}

// assegnamo il gestore saluta all'evento onloaddocument.onload=saluta;//la funzione viene lanciata non appena il documento caricato//notare che "onload" scritto tutto minuscolo

Come si vede nell'esempio il collegamento tra l'evento "onload" e la funzione "saluta" viene creatodalla 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);

}


48/104

saluta();

in questo primo esempio una variabile viene creata e inizializzata al di fuori della funzione ed poirichiamata all'interno della funzione stessa, senza che tutto ci crei minimamente dei problemi.

Esaminiamo un altro esempio:


function saluta() {//inizalizzo le variabili all'interno delle funzioniscritta2="ciao";scritta3="prova scrittura"

}

saluta(); //richiamo la funzionealert(scritta2); //faccio riferimento alla variabile creata nella funzione

document.write(scritta3);

In questo esempio due variabili vengono create all'interno delle funzioni e richiamate poidall'esterno: in un caso la variabile viene scritta addirittura in pagina senza che tutto ci creiminimamente dei problemi.

Molti linguaggi di programmazione creano una distinzione netta tra le variabili create all'interno delprogramma (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 secondevengono dette variabili locali e sono valide soltanto all'interno della funzione. Per indicare ilcontesto 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 seespressamente richiesta dal programmatore stesso. Visto che questi sono i nostri primi programmi,


49/104

possiamo evitare di distinguere tra variabili locali e variabili globali. Facciamo per attenzione anon incappare in due tipici errori:

1. Evitiamo di sovrascrivere le variabili nei nostri programmi. Ad esempio:


function scriviNome() {// inizalizzo le variabili all'interno delle funzioninome=prompt("inserisci qui il tuo nome","il tuo nome");

}

scriviNome(); // richiamo la funzione

nome="Gianni"; // in questo modo sovrascrivo la variabile

document.write(nome);

Nell'esempio, dato che la variabile "nome" viene inizializzata dopo la funzione, il contenutodella variabile creata nella funzione viene sovrascritto.

2. Ricordiamoci di utilizzare gli eventi nel modo appropriato:


function scriviNome() {//inizalizzo le variabili all'interno delle funzioninome=prompt("inserisci qui il tuo nome","il tuo nome");

}


50/104

document.write(nome);

In questo caso siamo incappati un errore grossolano: la variabile "nome" viene richiamatadal 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 ilcompletamento 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:


function saluta() {

//inizializzo le variabili all'interno delle funzioni

var scritta2 = "ciao"; // variabile locale

var scritta3 = "prova scrittura"; //variabile locale

}

saluta(); //richiamo la funzione


51/104

alert(scritta2); //faccio riferimento alla variabile creata nella funzione

document.write(scritta3);

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);

Tra le due variabili "vince" la variabili globale, perch la variabile locale ha il suo ciclo di vita solo

all'interno della funzione.


52/104

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 poterlautilizzare in molti contesti. In questo modo non siamo costretti a scrivere una funzione ogni voltache dobbiamo cambiare qualcosa: basta scrivere il codice una sola volta e individuare delle porzionivariabili.

Facciamo un esempio concreto. C' una pagina in cui vogliamo aprire tre differenti finestre didiverse 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 voltasola, specificando che ci sono delle parti della funzione che variano. Queste parti variabili sichiamano 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 casospecifico. 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:


53/104

Esempio

function saluta(nome) { //nome l'argomentoalert("ciao "+nome);}

Saluta Saibal
Saluta Phantom
Saluta Berenicebis

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:

Esempio

/* 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;



54/104


/*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}

HTML.it

FREEASP
FREEPHP

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.


55/104


function chiediNome() {

var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");

//ATTENZIONE!

//la variabile definita come "locale"

//se non mettessimo "var" funzionerebbe tutto

}

chiediNome(); // lancio la funzione


document.write(nomeUtente);

Come si vede lo script che abbiamo composto d errore, semplicemente perch la variabile

preceduta da var e quindi definita come locale: il browser (o pi esattamente il motore di

scripting del browser) si scorda della variabile appena fuori dalla funzione.

Per risolvere questo problema dobbiamo utilizzare l'istruzione return, che serve per restituire i

valori e fa s che una funzione comunichi con l'esterno. Il return va messo sempre alla fine della

porzione di codice che ci interessa, e si utilizza in due modi:

return seguito da una variabile

(o da un'espressione)

restituisce il valore della variabile(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


56/104

dalla funzione stessa. Cos:

miaVariabile = miaFunzione();

Vediamo l'esempio precedente adattato con l'uso di return.



var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");

return nomeUtente; //la funzione restituisce ora il nome dell'utente

}

valoreCatturato=chiediNome(); // lancio la funzione


document.write(valoreCatturato);

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");

Corso_Javascript

Documents

Transcript of Corso_Javascript