Corso Base JavaScript

7/31/2019 Corso Base JavaScript

1/115

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

Corso base JavaScript per esempi

Introduzione

1. A chi si rivolge questo corsoIl corso una naturale prosecuzione del corso HTML e prepara allo studio approfondito di JavaScript

2. Perch usare JavaScript?Tutto quello che potete fare utilizzando JavaScript

3. Cosa JavaScriptIl ruolo di JavaScript all'interno dei linguaggi di web publishing

4. La storia di JavaScriptCome nato, come si evoluto e quali sono gli standard di JavaScript

5. JavaScript non JavaLe differenze fra Java e JavaScript: due linguaggi dalle poche cose in comune

Come fatto un browser

6. Gli oggettiIl browser pu essere sezionato in vari elementi o oggetti

7. I metodiI metodi degli oggetti JavaScript

8. Il DOM e le problematiche ad esso connesseI modelli di documento dei browser e i problemi di compatibilit

9. Gli eventiCosa sono e come vengono organizati gli eventi JavaScript

Elementi di base

10. Dove scrivere il codiceCome e dove scrivere il codice JavaScript in un documento HTML

11. Il tag NOSCRIPTUtilizzare JavaScript anche per i browser che non supportano il tag SCRIPT

12. Includere un file esterno

Utilizzare JavaScript per includere file esterni nelle pagine HTML

1


2/115


13. I CommentiInserire i commenti agli script JavaScript per mantenere il codice decifrabile

14. Come scrivere nella paginaVediamo come poter scrivere con JavaScript testo o codice in una pagina

15. Il debugger: trovare gli erroriCome rintracciare con il nostro Browser gli errori JavaScript

Lavoriamo con le finestre

16. Le finestre di dialogoVisualizzare con JavaScript le finestre di sistema di Windows

17. Le finestre personalizzabiliCome aprire nuove finestre del Browser con JavaScript

18. Le caratteristiche delle finestre personalizzabiliCome modificare e rendere pi personalizzate le finestre aperte con JavaScript

Introduzione alla programmazione

19. Le variabili

Cosa sono e come vengono utilizzate le variabili20. Le stringheUtilizzo delle stringhe nelle variabili JavaScript

21. Come utilizzare le variabiliEsempi pratici di utilizzo delle variabili in JavaScript

22. Operare con le variabiliSottrarre, sommare e manipolare le variabili

23. Differenza tra variabili e oggetti

Cosa distingue le variabili dagli oggetti. Esempi pratici

Le funzioni

24. Introduzione alle funzioniFunzioni: cosa sono e come si richiamano nella pagina

25. Dove utilizzare le funzioni IPrimo approccio all'ambito delle funzioni nella scrittura del codice

26. Dove utilizzare le funzioni IIVariabili locali e variabili globali: differenze d'uso

2


3/115


27. I parametri delle funzioniInseriamo parametri variabili all'interno delle funzioni

28. Restituire i valori di una funzioneCome esportare un valore di una funzione all'esterno

I Controlli Condizionali

29. Verificare una condizione: ifIntrodurre deviazioni negli script: la funzione IF

30. Operatori relazionaliVerificare le relazioni: gli operatori JavaScript

31. Come funzionano else ed else ifIntrodure le azioni dopo la verifica: else ed else if

32. Esempio: individuare il browserCome individuare il browser del visitatore attraverso i controlli condizionali

33. Gli operatori logiciCome annidare pi controlli condizionali dentro altri

34. Uso del "not" e operatori di bitCome controllare una condizione di falsit e glioperatori di bit

35. Interrompere il flusso del codice con returnUtilizzare il blocco del codice in un costrutto condizionale

36. Esempi pratici dell'utilizzo di if, else if, elseControllare le azioni dell'utente e variare le celle a seconda della risoluzione

37. Lo switchSemplificare l'utilizzo di molti if all'interno di un valore

38. Loperatore ternarioSemplificare l'utilizzo di molti if con un operatore ternario

I Controlli Iterativi

39. Gli ArrayCosa sono e come si costruiscono gli Array

40. Array di array e array associativiCreare Array che contengono altri Array

3


4/115


41. WhileRealizzare routine che si ripetono

42. Do whileCostruire routine ripetitive prima di valutare la condizione

43. Ciclo ForRipetere la stessa routine per un numero specifico di volte

44. For inCome ricavare le propriet di un oggetto

45. Break e continueInterrompere e uscire da un costrutto

Conclusioni

46. L'IndentazioneRendere pi leggibile il codice JavaScript

47. Tecniche di debugUsare gli alert per scoprire gli errori di scripting

48. L'istruzione "eval" ICome aggirare le differenti interpretazioni dei Browser

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

4


5/115


1. A chi si rivolge questo corso

Il corso che state per seguire si rivolge ai webmaster alle prime armi. Illettore ideale quello che ha appena terminato di studiare la guida all'HTMLe ha incominciato a comporre le sue prime pagine. Nelle seguenti lezioninon verr dunque dato per scontato nulla: non richiesta la capacit disaper programmare, n una grande esperienza nel web publishing.

Si tratta di lezioni con una finalit prevalentemente pratica: si vuol far s cheil webmaster sia in grado di operare autonomamente con JavaScript, e chequindi sia in grado di comprendere la sintassi, di poter modificare a secondadelle proprie necessit i gadget trovati in rete, e di poter creareautonomamente 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 JavaScriptper "aggiustare" o "abbellire le proprie pagine: faremo quindi molti esempiinerenti le differenze tra i browser, le diversit di risoluzione del monitor, eanalizzeremo molte situazioni di "quotidiano webpublishing".

Data la finalit "pratica" molti concetti teorici verranno soltanto accennati,altri verranno volutamente omessi o posticipati (in quanto non ritenutifondamentali nell'ottica del webmaster o della situazione che si staanalizzando).

Pertanto, pur essendo questo corso perfettamente autonomo, chi volesseapprofondire gli aspetti teorici al termine della lettura pu utilmenteconsultare il Corso a JavaScript.

5


6/115


2. Perch usare JavaScript?

Oggi in ogni sito web che si rispetti c' sempre un po' di JavaScript: ancheun semplice effetto di "roll-over", magari ottenuto usando un qualchesoftware grafico (FireWorks, Image Ready), nasconde tra le righe del codiceHTML un po' di sintassi JavaScript. Infatti, con questo semplice linguaggio discripting che viene "letto" dal browser, si possono eseguire un'infinit dioperazioni che il semplice HTML non permette. Potete:

"aggiustare" l'HTML in modo da correggere le imperfezioni che sivedono in un browser (es: Netscape), ma che in un altro browsernon 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 lapagina, 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 unaserie di effetti che l'HTML da solo non consente. Per rendervi conto di tuttoquello che si pu fare con JavaScript sfogliate l'archivio della mailing listJavaScript 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 autonomianell'elaborare gli script e creare da soli gli script che vi servono. Ma non sipu per ottenere tutto e subito, e per raggiungere un simile obiettivodovremo addentrarci all'interno delle strutture logiche di questo semplice eduttile linguaggio.

6


7/115


3. Cosa JavaScript

JavaScript un linguaggio di scripting lato-client, che viene interpretato dalbrowser. Sembra un affermazione molto astrusa, ma in realt unadefinizione molto semplice ed efficace.

Il web - come ogni webmaster che si rispetti dovrebbe sapere - funziona adue livelli:

1. le pagine web vengono inviate all'utente da un web server, cio daun programma che si trova su un computer remoto, e che per lo pinon fa nient'altro che inviare le pagine a chi ne fa richiesta (in realtpu fare un sacco di altre cose, ma in questo contesto non necessario specificarle...)

2. l'utente da casa visualizza sul proprio browserle pagine che glisono stato inviate. Un "browser" un programma che permette dileggere le pagine scritte in linguaggio HTML: si tratta di "InternetExplorer", "Netscape Navigator", "Opera" e altri.

Quando visualizziamo le nostre pagine web da casa ci sono dunque duecomputer 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 ( unlinguaggio 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 unapagina all'altra: con JavaScript possibile infatti passare una piccolaquantit di dati da una pagina all'altra, ma un'operazione che pu essereeffettuata con una certa difficolt (coi linguaggi server side, si esegue invecein maniera intuitiva); non possibile invece trasmettere quantit di datielevate.

Dicevamo inoltre che JavaScript un linguaggio di scripting: questosignifica che la sintassi JavaScript potete scriverla direttamente dentro lapagina HTML, senza bisogno di produrre alcun file compilato.

Con i linguaggi di programmazione invece (come il C, il C++) si scrive lasintassi, e poi la si passa a un compilatore, che produce un file "compilato",

in cui la sintassi scomparsa. Tutti i programmi di windows ad esempiosono dei file compilati, in cui non c' pi traccia della sintassi originaria (ciodei "sorgenti").

JavaScript invece non compilato: potete quindi visualizzare in qualsiasimomento il codice di una pagina HTML e leggere le righe di sintassiJavaScript.

Dire che un linguaggio di scripting sottintende dunque il fatto che sia unlinguaggio interpretato: come abbiamo visto non esiste nessun compilatore,ma direttamente il browser, tramite un apposito motore di scripting (cio divisualizzazione), che legge le parti di codice JavaScript.

7


8/115


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

il "database server" (un altro programma che immagazzina i dati e lirestituisce, quando vengono richiesti)

Il corso di JavaScript che affronteremo vi servir per aggiungere dinamicitalle vostre pagine web, non per interagire coi database.

8


9/115


4. La storia di JavaScript

Nel 1995 Netscape decise di dotare il proprio browser di un linguaggio discripting che permettesse ai web designer di interagire con i diversi oggettidella pagina (immagini, form, link, ecc.), ma soprattutto con le applet Java(programmi che permettono di interagire con l'utente). Infatti in quello stessoanno Netscape era particolarmente vicina alla Sun Microsystems (ideatricedi Java), con cui aveva stretto una partnership. Brendan Eich venneincaricato del progetto e invent LiveScript (chiamato cos ad indicare lapropria vivacit e dinamicit).

Le due aziende il 4 dicembre 1995 annunciarono la nascita di questo nuovolinguaggio, descrivendolo come complementare all'HTML e a Java. Laversione 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 iwebdesigner non utilizzarono JavaScript per interagire con le applet java(come avrebbe voluto Netscape), ma piuttosto per rendere pi vive lepagine. 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 simileall'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 Sundecisero di standardizzare JavaScript e si affidano all'European ComputerManufacturers Association (ECMA). La stessa associazione che oggi incaricata da Microsoft di standardizzare il C#. La standardizzazioneincominci nel novembre 1996 e fu adottata nel giugno 1997 da ECMA enell'aprile 1998 da ISO (International Organization for Standardization, unadelle pi prestigiose organizzazioni internazionali che si occupano distandard).

Attualmente siamo alla terza versione di ECMAScript.

ECMAScript dunque figlio di JavaScript. E oggi quando si diceJavaScript, JScript ed ECMAscript sostanzialmente si indicano tre varietdello stesso linguaggio.

Bisogna poi tener conto che differenti versioni del browser, implementanodifferenti versioni di JavaScript (la pi recente la 1.4, mentre la 1.5 ancora in beta), quindi il modo di interpretare determinati costrutti potrebbevariare da una sottoversione del browser all'altra.

Tutto questo tuttavia non ci deve minimamente preoccupare: si tratta dellanormale evoluzione (e crescita) di un linguaggio di scripting che si adattaalle diverse esigenze sopraggiunte (dei programmatori e del commercio). Laversione di JavaScript comunque pur sempre la 1.x e dunque tra unasottoversione e l'altra non ci saranno degli sconvolgimenti sostanziali. Equando la differenza c' ci penseranno i manuali (o meglio ancora ireference ad avvertirci.

9


10/115


Per quel che riguarda il futuro del nostro linguaggio, attualmente esistonodue proposte di Netscape per JavaScript/ECMAScript (passer del tempo,per prima che le proposte siano riviste e accettate, e prima che i browsersiano 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 browserla potete trovare sul Corso Javascript di HTML.it.

Per completezza bisogna inoltre notare, che JavaScript pu anche essereutilizzato per scrivere delle applicazioni server side, nel caso che il webserver lo consenta (se, ad esempio, si utilizza iPlanet di Sun): in questocaso JavaScript pu dunque svolgere mansioni analoghe a quelle chenormalmente vengono effettuate da php, asp o jsp. L'utilizzo di JavaScriptlato server per lo pi un caso sporadico, e comunque non ce neoccuperemo 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 unacaratteristica di JavaScript.

10


11/115


5. JavaScript non Java

Capita sempre di sentire nei forum di html frasi come "Aiutatemi con questoscript Java". Per lo pi chi scrive una cosa di questo genere intende "unoscript JavaScript".

Bene: JavaScript non Java. Il fatto che i due linguaggi abbiano nomisimili solo una trovata di marketing, dovuta all'alleanza tra Netscape eSun. Una trovata che nel corso degli anni - a dire la verit - ha ingeneratosoltanto confusione.

Java un linguaggio di programmazione, la cui avvenuta realizzazione fuannunciata nel maggio 1995 da John Gage (direttore dello "Science Office"di Sun Microsystems). Dello stesso anno l'annuncio della realizzazione delbrowser "HotJava", realizzato apposta per dimostrare le possibilit di questo

linguaggio.

Alla sua comparsa Java sconvolse il mondo dell'information technology, dalmomento che introdusse il concetto rivoluzionario della Virtual machine: unprocessore virtuale che viene installato sulla macchina (Windows,Macintosh, Linux, o quello che ) e i programmi vengono poi realizzati perquel processore virtuale.

In pratica quando vi viene richiesto di installare Java, voi installate sul vostropc 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 codiceHTML), le quali permettevano finalmente di interagire con le azionidell'utente (cosa questa che l'HTML non permette).

Nacque quindi l'esigenza di integrare meglio le applet, e fu studiato unlinguaggio apposito (che - come abbiamo visto - il nostro LiveScript -dicembre 1995). Dato il grande successo di Java, LiveScript fu ribattezzatoJavaScript, ma i due linguaggi hanno poche cose in comune. Nel corso deglianni Java ha sviluppato una formidabile libreria di oggetti, classi e metodi,che oggi sono la vera forza di questo linguaggio. Oggi con java sirealizzano:

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 JavaScriptpotete intervenire "solo" sulle vostre pagine web.

JavaScript e Java si assomigliano un po' nella sintassi (nel modo dirichiamare oggetti e le loro propriet tramite il "."), ma l'analogia termina l. Inrealt si tratta di due mondi complementari, di due linguaggi che fanno cosedifferenti. Se volete programmare in Java, e non JavaScript quello che viinteressa, potete consultare la Guida Java di HTML.it.

11


12/115


6. Gli oggetti

Quando programmate con JavaScript dovete immaginare che la paginaHTML sia formata da vari elementi in varia relazione fra loro. Il browserinfatti (con all'interno il documento HTML) pu essere infatti "sezionato" invari 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 diloro (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 questepropriet.

Facciamo un esempio. Prendiamo il seguente codice HTML:

Esempio

La pagina contiene un campo di input text (che in genere serve all'utenteper scrivere dei dati). Se volessi conoscere la lunghezza del testo contenutonel modulo, utilizzando il modello a oggetti e le propriet utilizzate daJavaScript, non avrei che da scrivere:

document.mioForm.testoProva.value.length

12


13/115


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 quelloche si chiama 'mioForm', consideriamo poi il campo chiamato 'testoProva'.Bene. Una volta individuato 'testoProva', prendiamo il valore di questocampo 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".Non vi preoccupate se l'esempio adesso non vi del tutto chiaro:esamineremo subito nelle prossime pagine la sintassi introdotta nelle righedi codice scritte poc'anzi (vedremo subito cosa vuol dire "onLoad" e cosavuol dire "alert").

L'importante comprendere il concetto, che cio una pagina web vienescomposta da JavaScript in un modello ad oggetti (ognuno con le suepropriet) in relazione reciproca.

Ovviamente la sintassi per richiamare gli oggetti non dovuta al nostroestro, ma - visto che JavaScript ha la struttura di un linguaggio di

programmazione - deve essere espressa in maniera rigorosa, secondo lastruttura del linguaggio (non potremmo scrivere, ad esempio,document.testoProva.length.mioForm.value senza incorrere in errori).

13


14/115


7. I metodi

Un altro concetto importante che ognuno degli oggetti del browser ha ipropri metodi. Questo equivale a dire che ognuno degli oggetti del browserha a disposizione determinate azioni e non altre.

Facciamo subito un altro esempio, per rendere pi chiaro il concetto. Esistel'oggetto history che contiene la storia della navigazione dell'utente per quelche riguarda una finestra.

Tramite il metodo back() dell'oggetto history possibile mandare indietrol'utente alla pagina da cui arrivato (ovviamente l'utente deve esserearrivato qui a partire da un'altra pagina, altrimenti - se la richiesta diretta -non c' pagina verso cui tornare indietro):

Esempio

torna indietro

evidente che il metodo back() proprio dell'oggetto history, e non (peresempio) del campo del form che abbiamo visto prima.

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

onLoad="document.mioForm.testoProva.back()"

non potrete che ottenere un errore.

E inoltre anche se scrivete:

torna indietro

otterrete un valore indefinito perch non state interrogando correttamentel'elemento history, che un array.

Ma anche se lo interrogaste nella maniera giusta, cio cos (esamineremo inseguito questo tipo di sintassi):

for (n=0;n


15/115


non otterreste comunque alcun valore, perch - per motivi di sicurezza - non possibile leggere il valore della history di un documento ( possibile conNetscape 4, ma solo con determinati privilegi).

Ogni oggetto ha dunque i propri, personalissimi metodi e va interrogato nellagiusta maniera.

Per ora non analizzeremo tutti i vari elementi che compongono il browser, iloro metodi, e le loro reciproche relazioni, anche perch - come vedremonella prossima lezione - differenti browser (Netscape e Internet Explorer) edifferenti versioni dello stesso browser (Netscape 4 e Netscape 6) hannosviluppato modelli diversi per concepire le relazioni reciproche di questioggetti 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 diprogrammazione (C++, Python, Java, C#) che permette di descrivere ilcomportamento degli elementi presenti nel codice e di attribuire ad essideterminate azioni.

Per il momento noi non tratteremo l'approccio ad oggetti, ma bene sapereche JavaScript oltre a fornire la possibilit di interfacciarsi verso gli oggettipredefiniti (quelli del browser che abbiamo visto finora) supporta pienamentela creazione da parte del programmatore di oggetti e metodi personalizzati.

15


16/115


8. Il DOM e le problematiche ad esso connesse

Abbiamo detto che un browser organizzato ad oggetti e che questi oggettisono in vario modo in relazione fra loro. La grossa difficolt dellaprogrammazione lato client che differenti browser hanno sviluppato, nelcorso degli anni, differenti modelli in cui mettere in relazione gli oggetti.

Stiamo parlando del Document Object Model (DOM), il "modello a oggettidel documento". Viene preso come riferimento il document (e non il browsero la finestra), dal momento che il nodo centrale attorno al quale sisviluppano 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 4agenerazione, 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 incompatibilecon quello di Internet Explorer 4 e viceversa.

Microsoft prefer infatti un DOM "flat", cio con tutti gli elementi sullo stessopiano dell'oggetto document. Netscape invece aveva scelto di adottare unDOM particolarmente gerarchico. Questa situazione particolarmenteevidente quando si ha a che fare con la sintassi relativa ai livelli. Se, in unapagina 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 e per l'altro browser. Per risolvere questa situazione diincompatibilit di fatto, il W3C (l'organismo che si occupa di rilasciare lespecifiche per il web, come l'HTML) decise di standardizzare il DOM.

16


17/115


La prima specifica definitiva (DOM level 1) dell'ottobre 1998; nel dicembre2001 stata rilasciata invece la specifica relativa al DOM level 2; eattualmente il W3C sta lavorando al DOM level 3. Un gran contributo nei variprocedimenti di standardizzazione stato anche dato dal Web StandardsProject (WaSP).

Le specifiche sviluppate dal W3C sono quelle di riferimento a cui si stannoadeguando tutti i browser di nuova generazione (di generazione 5 e 6).

Attualmente la situazione la seguente:

Browser DOM level Identificazione

Netscape 4 Level 0/1 (DOMproprietario)

document.layers

Netscape 6 level 1 document.getElementById

Internet

Explorer 4

Level 0/1 (DOM

proprietario)document.all

InternetExplorer 5 / 6

level 1 document.all,document.getElementById

In pratica viene definito come DOM level 0 quello supportato da Netscape 2e 3, e da Internet Explorer 3: si tratta di un DOM molto scarno, composto perlo pi da document.images, document.applets, document.forms e pochialtri elementi. Si tratta di una base minimale comune.

Il DOM dei due browser si divide poi con i browser di 4 generazione, e piprecisamente con l'introduzione dei livelli all'interno del documento. Si tratta

di un DOM intermedio, ibrido, che non pu essere considerato n DOM level0, n tantomeno DOM level 1 (che ancora non esiste).

La specifica del W3C del 1998 stabilisce nuovamente un DOM comune (ilDOM level 1, in cui il browser identificato da document.getElementById )a cui sia Microsoft, sia Netscape hanno deciso di adeguarsi (dal momentoche entrambe fanno parte del consorzio). Netscape per ha deciso di nonmantenere un legame con il proprio passato, ripudiando il proprioprecedente DOM: la sintassi scritta per Netscape 4 pu infatti risultare nonpi 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 muoversiall'interno della finestra del browser) nello scrivere sintassi crossbrowser,che vada bene cio sia per Netscape, sia per Internet Explorer edeventualmente anche per Opera.

Nel nostro corso non ci cureremo delle problematiche del DOM, dalmomento che per ora avremo modo di utilizzare sporadicamente i livelli. bene per che teniate ben presente che, quando state sviluppando degliscript e avete a che fare con i livelli (anche se dovete soltanto cambiare lavisibilit da visibile a invisibile o viceversa) dovete attentamente verificare la

visualizzazione nei differenti browser, perch potreste avere delle sorprese.

Se er esem io dovete cambiare la visibilit da visibile a invisibile di un

17


18/115


livello vi troverete di fronte a tre differenti sintassi:

Browser Sintassi

Netscape 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 duebarre verticali a inizio riga) a seconda del browser. Non vi preoccupate seancora non comprendete il significato del codice, dal momento che vedremotutto 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";/*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!

18


19/115


9. Gli eventi

19

Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo lapresenza degli eventi.

Un evento molto semplicemente qualcosa che accade nel documento.

Anche nella vita quotidiana un evento qualcosa che accade: ad esempio unatazzina di caff che cade e si rompe. Il documento dunque l'ambiente entro cuivengono realizzate delle "azioni", in parte dovute alla volont dell'utente (passaggiodel mouse su un link, click su qualcosa...), altre volte dovute alla situazionecontingente (la pagina stata caricata).

Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScripte 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; quandopassa su un determinato link possiamo scambiare due immagini, eccetera.

Gli eventi (le possibili cose che possono capitare all'interno della pagina) sonodavvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilitmesse a disposizione degli sviluppatori.Vediamo quali sono quegli eventi che vicapiter pi spesso di incontrare.

Come si pu vedere dagli esempi il modo corretto per sfruttare gli eventi quello diinserire l'evento all'interno della sintassi dell'elemento HTML e racchiudere il codiceJavaScript tra virgolette. Secondo questo modello:

Abbiamo gi incontrato in precedenza l' "alert" una finestra di dialogo cheavverte di qualcosa.

Negli esempi qui sotto, quando viene eseguita una determinata azione, vienemostrato un alert con scritto "ciao".

Evento

Si applica a

(elementimaggiormentiusati)

Descrizione esempio

onLoad BODY

IMAGE

"alcaricamento..."L'evento scattaquantol'oggettorisultacompletamentecaricato.

onUnLoad BODY Applicato alBODY si


20/115


20

verifica quandoil browser"scarica" ildocumento.Cio allachiusura del

documento.

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

onMouseOver A

AREA

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

"al passaggiodel mouse".

Si verificaquandol'utente passail mouse suun'areasensibile (linko mappa).

Con IE 5+questo eventopu essereassociatoanche a TD,TR, eccetera

onMouseOut A

AREA

INPUT (vedisopra)

"quando ilmouse esce".

Si verificaquandol'utente con il

mouse esce aldi fuoridell'areasensibile (linko mappa).

Con IE 5+questo eventopu essereassociatoanche a TD,TR, eccetera

onClick A

AREA

INPUT

"al click delmouse..."

Avvienequandol'utente cliccasull'elemento

onKeyPress A

AREA

INPUT

Si verificaquando si all'internodell'elemento e

viene premutoun tasto della


21/115


DIV tastiera.

onChange INPUTTYPE="SELECT"

Si verificaquandol'elemento

subisce uncambiamento aseguitodell'azionedell'utente.

uno

duetre

OnSubmit FORM Quando vieneeseguita l'inviodel form(tramitebottone otramite invioda tastiera).

onFocus A

INPUT

BODY

"quandol'elemento ha ilfocus..."

Entra in azionenon appenal'elemento attivo.

(Provate la sintassi di questoesempio con altre finestredel browser aperte, eprovate a passare dallavostra pagina alle altrefinestre e viceversa)

onBlur A

INPUT

BODY

"quandol'elemento non

pi attivo..."Vienerichiamatoquandol'elemntosmette diessere attivo.

Un discorso a parte merita l'evento onFocus, che spesso suscita dell perplessit.

"onFocus" significa "quando l'elemento focalizzato": significa che in quelmomento attivo quel determinato elemento della pagina HTML.

Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha ilfocus: il link o la mappa ha infatti una piccola linea tratteggiata che lo circonda (nelcaso del link, se l'elemento focalizzato, si trova nello stato "ACTIVE").

Anche nel caso delle finestre del browser facile accorgersi di quando unelemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi inprimo piano) la barra in alto azzurra (o del colore definito dall'utente), in casocontrario grigia.

onBlursemplicemente il contrario di onFocus: quando l'elemento che aveva ilfocus lo perde (perch l'attenzione dell'utente si concentrata su altro) vieneazionato l'evento onBlur.

21


22/115


da notare che a uno stesso elemento possono essere attribuiti pi eventi Adesempio:

testo del link

(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 collegatieventi diversi, ciascuno con il proprio codice da eseguire).

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

Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Peresempio, un livello in Internet Explorer 6 dotato di tutti i seguenti eventi (come sipu vedere non c' l'evento onLoad, n onSubmit, perch riferiti a un livello nonavrebbero 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, ondragleaveChi fosse interessato a una classificazione pi esauriente degli eventi puconsultare il Corso JavaScript

NOTA A MARGINE

Chi volesse sapere come ho ricavato tutti gli eventi mensionati sopra, sappia cheper ricavarli ho utilizzatoquesto codice JavaScript. sufficiente inserirlo nel BODYdel documento:

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

22


23/115


10. Dove scrivere il codice

Possiamo inserire il codice JavaScript in qualsiasi parte del documento(nella head oppure nel body) a seconda delle nostre esigenze.

Per scrivere la sintassi sufficiente aprire il tag . Il codiceJavaScript va inserito tra l'apertura e la chiusura del tag. Cos:

alert("ciao");

Per facilitare il lavoro del browser, opportuno esplicitare nella

dichiarazione il tipo di linguaggio da noi usato:

alert("ciao");

Fino a qualche tempo fa non si usava l'attributo type per specificare illinguaggio, era in voga invece l'utilizzo dell'attributo language. Cos:

alert("ciao");

Il W3C (l'organo internazionale preposto alla standardizzazione dei linguaggidel Web) ha per precisato che pi corretta la notazione con type, mentrel'utilizzo di language deprecato: significa che tutti i browser sono in gradodi interpretare correttamente , e dunque lapagina verr visualizzata correttamente anche se usiamo questa sintassi,ma preferibile usare .

Abbiamo detto che il tag (che contiene la sintassi da noielaboarata) pu essere incluso tanto nel BODY, quanto nella HEAD deldocumento:

inseriremo il tag SCRIPT nella HEAD ogni volta che sar possibile. buona norma infatti separare il codice dello scripting dal codiceHTML della pagina vera e propria, in modo da mantenere la paginapi leggibile

inseriremo il tag SCRIPT nel BODY della pagina, ogni volta che lasintassi JavaScript sia necessaria per visualizzare il layout dellapagina stessa. Pu capitare infatti che il codice HTML venga scrittoattraverso JavaScript: in questo caso bene che la sintassi checompleta la visualizzazione di un punto della pagina venga scritta inquel 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 sitratta. importante tuttavia accennare gi ora che le funzioni possonoessere richiamate attraverso un evento. Cos:

23


24/115


Oppure attraverso un richiamo diretto all'interno del link, con un effettoanalogo all'evento onClick (la funzione dunque entra in azione quando siclicca sul link). Cos:

Oramai sono pochi i browser obsoleti che non supportano i linguaggi discripting, in ogni caso buona norma quella di usare i commenti per"nascondere" il codice JavaScript ai quei browser che non sono in grado diinterpretarlo.

Pi ancora questa tecnica utile con i motori di ricerca, che - ai finidell'indicizzazione - non "catturano" mai tutta la pagina HTML, ma soltantoparte 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 nonsono poi in grado di leggere: opportuno che essi vedano soltanto quellaparte della pagina in grado di produrre un qualche risultato diposizionamento. Per "nascondere" il codice JavaScript usiamo duquequesta sintassi:

Abbiamo quindi racchiuso il codice JavaScript all'interno dei commentidell'HTML, con una particolarit: la chiusura del commento HTML preceduto da un "commento-JavaScript" (//). Questo avviene per evitare chei browser che interpretano il codice fraintendano l'indicazione e vedano lachiusura 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 interpretanoJavaScript

Note a margine

In taluni casi anche utile specificare la versione di JavaScript che si stausando. In questo caso si deve usare l'attributo language (e non type) inquesto modo:

alert("ciao");

Si tratta di una precisazione per lo pi superflua ( pi che sufficiente), ma che in particolari situazionipu tornare utile.

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

24


25/115


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 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 datifossero uguali sia nel tipo, sia nel valore. Nel nostro caso il valore lostesso (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 laragione per cui il risultato diverso soltanto nel caso in cui si espliciti divoler usare Javascript 1.2.

Quanto all'integrazione di JavaScript all'interno della pagina, dal punto divista terorico c' una terza via (oltre agli venti e al richiamo nel link), checonsiste nell'inserire la sintassi JavaScript (ad esempio una variabile)direttamente all'interno dei tag HTML. Cos:

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

25


26/115


11. Il tag NOSCRIPT

26

Abbiamo visto che alcuni browser particolarmenti obsoleti e i motori dircierca non leggono JavaScript. il caso di aggiungere che JavaScript puessere disabilitato anche dall'utente. In Netscape (4.x e 6.x) ad esempiobasta 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 distile).

Per prevenire queste eventualit, il caso di predisporre la pagina in modoche 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 lasintassi. sufficiente utilizzare il tag NOSCRIPT e racchiudervi all'interno ilcontenuto alternativo da visualizzare.

All'interno del tag NOSCRIPT pu essere utilizzata la sintassi HTML pervisualizzare messaggi o addirittura un layout alternativo.Attenzione per anon proporre intere pagine all'interno del tag, perch questo andrebbe adiscapito del peso della pagina.

Ecco un esempio:

Per visualzzarecorrettamente il contenuto della pagina occorre avere JavaScriptabilitato.

Il tag NOSCRIPT pu essere posizionato in vario modo.

Nel caso in cui usiate pesantemente JavaScript in tutta la pagina e ci sianoparti del sito che non funzionano senza di esso, vi conviene inserire ununico avvertimento in tutto il documento html.

In questa situazione, non il caso che utilizziate NOSCRIPT ogni volta cheutilizzate SCRIPT: i due tag non vanno necessariamente in coppia. inveceopportuno inserire NOSCRIPT in un punto strategico della pagina, all'internoper esempio di uno spazio vuoto ben visibile, o prima del blocco checontiene il testo principale.

Tuttavia abbiamo detto che JavaScript pu essere usato anche per scriverel'HTML, nel caso in cui vi troviate in una situazione di questo genere, viconviene - diversamente dalla situazione precedente - usare NOSCRIPTper completare e concludere il layout, anzich visualizzare degli

avvertimenti. Ad esempio:


27/115


document.write("");

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

Nell'esempio che abbiamo visto or ora non serve avvertire l'utente che deveavere JavaScript abilitato: serve invece chiudere la tabella anche nel caso incui il browser non legga il contenuto del tag , e possiamo farlo -

appunto - grazie al tag .

Da notare che la maggior parte degli utenti sono in posssesso di un browserin grado di leggere JavaScript (lo sono tutti i brower a partire da Netscape 2ed Internet Explorer 3). Pochissimi di loro (attualmente il 2%), leggendo leindicazioni su riviste o rubriche di informatica avranno disabilitato JavaScriptpensando 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 anziinterpretano perfettamente il contenuto del tag NOSCRIPT, tanto che molto

spesso nelle pagine che restituiscono i risultati (a seguito della ricerca) sivede nella descrizione dei siti fornita dal motore indicazioni sul fatto che "lepagine del sito utilizzano JavaScript..." Attenzione dunque a quello chescrivete all'interno del tag NOSCRIPT.

Il tag NOSCRIPT funziona in modo del tutto analogo al tag NOFRAMES edunque pu essere uno strumento prezioso per migliorare il posizionamentonei 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 particolarmenteobsoleti, in grado di leggere per lo pi il contenuto delle pagine e poco altro.Ignorano dunque il tag e - se abbiamo utilizzato i commenti

all'interno del tag SCRIPT per nascondere il codice - ignorano anche lerighe di codice JavaScript. Neanche il tag sanno cosa vogliadire, ma semplicemente riconosono come familiare la sinatssi HTMLall'interno del tag NOSCRIPT e quindi la leggono e la inseriscono nei propriindici.

Insomma di tutta la sintassi:

codice HTML

27


28/115


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 vecchibrowser, 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 interpretarecorrettamente il rapporto tra SCRIPT e NOSCRIPT, e conoscendone ilfunzionamento, non visualizzano il contenuto all'interno del NOSCRIPT (o alcontrario lo visualizzano quando JavaScript viene disabilitato).

28


29/115


12. Includere un file esterno

Nel caso in cui lo stesso JavaScript venga ripetuto in pi pagine, pu essereutile includere il codice in un file esterno. Questo ci permette di:

scrivere le correzioni, migliorie, variazioni in unico file; senza dovermodificare tutte le pagine che utilizzano quella sintassi

migliorare la velocit di visualizzazione delle pagine, dal momentoche il file (come le immagini e i fogli di stile esterni) vienememorizzato nella cache del browser

Si tratta di prender tutto il codice Javascript elaborato e inserirlo in un file ditesto vuoto. sufficiente mettere il codice cos com' senza nessunpreambolo. 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 uncartella del vostro computer e poi utilizzare i comandi: strumenti > opzionicartella > visualizza e assicurarvi che la voce "Nascondi l'estensione deifile conosciuti" non sia selezionata. Infine schiacciate il bottone che dice diapplicare le impostazioni a tutte le cartelle.

importante che siate in grado di identificare l'estensione dei file. Un erroretipico 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 nellepagine. 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 ilprocedimento di inclusione di JavaScript: il tag NOSCRIPT pu essereutilizzato nel solito modo con gli stessi risultati.

Da notare che in pratica quello che stiamo facendo includere un file ditesto "lato client" (dal momento che il codice JavaScript a tutti gli effettisemplice testo), secondo un procedimento analogo all'inclusione di fogli distile esterni.

29


30/115


13. I Commenti

30

Dovreste gi conoscere i commenti dell'HTML ( perla chiusura). In JavaScript i commenti si fanno in modo diverso, e se usaste icommenti dell'HTML all'interno del codice JavaScript incorreste in un errore(fatto salvo il caso che abbiamo analizzato prima, in cui i commenti vengonoutilizzati per nascondere il codice ai motori di ricerca).

JavaScript ha due tipi di commenti (nel corso delle lezioni precedenti liabbiamo gi visti qualche volta):

Tag di Apertura Tag di chiusura Descrizione

// non si chiude

un commento veloce,che deve essere espresso in

una sola riga senza andarea capo

/* */ Si usa per scriverecommenti 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 particolari esigenze esplicative

Esempio di codice:alert("ciao");*/

Come si vede il codice JavaScript inserito all'interno dei commenti non vieneeseguito. Si tratta di una caratteristica utile, perch ci permette di

commentare / decommentare porzioni di codice di cui non conosciamoancora 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 editorvisuali in grado di ricostruire la pagina e guidarvi all'interno di centinaia dirighe di codice.

Coi commenti possiamo dunque documentare e rendere comprensibile ognipassaggio della nostra programmazione.

Ad esempio:


31/115


/* inizio blocco di codice per individuareil 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 allalunga una strategia perdente, perch lo stesso individuo, a distanza di

mesi, pu aver difficolt a riconoscere e interpretare il codice che lui stessoha scritto. Evidentemente i commenti diventano tanto pi necessari, quandosi lavora in gruppo.

31


32/115


14. Come scrivere nella pagina

Scrivere nella pagina Uno dei metodi pi importanti di JavaScript il metodowrite che si riferisce all'oggetto document (la pagina). Questo metodo ciconsente di scrivere all'interno di una pagina HTML usando JavaScript.

Vediamo subito un esempio:

Come si pu vedere la sintassi :

quello che vogliamo scrivere deve essere racchiuso tra virgolette (significa

cdeve trattarsi di una valore che JavaScript pu convertire in autohe si tratta di una sequenza di caratteri, ovvero di una stringa), oppure

matico inuna stringa, come un numero:

Il punto e virgola invece non c'entra con il metodo write, ma indica soltantoche l'istruzione terminata.

Con questo metodo possiamo scrivere anche del codice HTML:

32


33/115


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 dichiarire meglio il suo utilizzo.

Dobbiamo ricordare ancora una volta che i motori di ricerca non leggonoJavaScript, e che quindi bene scrivere il codice HTML attraverso questolinguaggio soltanto nel caso in cui abbiamo delle ragioni particolari per farlo.Se volete approfondire la conoscenza del metodo document.write(), poteteconsultare un articolo di PRO.HTML.it in cui viene spiegato come utilizzandoi JavaScript esterni e il document.write() sia possibile creare delle vere eproprie inclusioni lato-client di intere parti della pagina.

33


34/115


15. Il debugger: trovare gli errori

Vi capiter di scrivere delle porzioni di codice pi o meno complesse, e vicapiter senz'altro di fare degli errori. Se dimenticate un punto e virgola, senon chiudete le virgolette, o dimenticate una parentesi... in tutti questi casistate commettendo un errore e non vi funzioner pi nulla. Anzi: InternetExplorer visualizzer un messaggio di errore in basso a sinistra (una speciedi triangolino giallo).

Come fare quindi? Niente paura: tutti i principali browser hanno incorporatoun 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:

Non riconoscendo il metodo, il browser vi segnaler un errore. Vediamo oracome attivare il debugger e individuare l'errore.

34


35/115


selezionare report JavaScript errors

Se visualizziamo la pagina di prima, con il debugger attivo otteniamo ilseguente 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 acontare le righe a mano, ma se usiamo qualche altro software un po' pievoluto (HomeSite, oppure FirstPage - quest'ultimo gratis) basterselezionare l'opzione che visualizza il numero delle righe per visualizzare intutta comodit la riga contenente l'errore (per lo pi l'opzione viene azionatao disabilitata da un tasto con il simbolo convenzionale "#").

Grazie alle indicazioni del debugger possiamo individuare e correggere glierrori anche in codici molto pi complessi di quello utilizzato nell'esempio.

Un'avvertenza: poich browser diversi hanno caratteristiche differenti (comeabbiamo visto), ogni browser visualizzer differenti messaggi di errore aseconda del codice.

Se nella stragrande maggioranza dei casi i browser si comporteranno nellostesso modo, dovete prestare particolare attenzione in quei casi in cuielaborare JavaScript che riguardano i livelli, o in tutti quei casi in cui il DOMdei vari browser non coincida. Per ora abituatevi ad eseminare la stessapagina con diversi browser: se non compaiono messaggi di errore stranitutto va bene, in caso contrario preoccupatevi di individuare e correggerel'errore.

Curiosit: Sulla parola "bug" ("insetto") c' un aneddoto divertente. Il 9

settembre del 1945 Grace Murray Hopper (ufficiale e matematica di granvalore) che prestava servizio in Virginia presso la marina militare degli StatiUniti stava cercando di trovare l'errore che inceppava il computer basato suun sistema Harvard Mark II, quando trov un insetto che girovagavaallegramente in mezzo ai circuiti e che era la causa del malfunzionamento.Da allora il termine "bug" entr nell'informatica per indicare un errore diprogrammazione. Potete leggere tutta la vicenda nella Storia di GraceMurray Hopper.

35


36/115


16. Le finestre di dialogo

JavaScript in grado di generare tre differenti tiplogie di "finestre implicite"(dette anche "finestre incorporate", "finestre modali", o "finestre di dialogo"),che avremo modo di utilizzare pi volte nei nostri script (soprattutto l'alert).

Alert

Abbiamo gi incontrato l'alert diverse volte nel corso delle nostre lezioni e sitratta senz'altro della finestra che vi capiter di utilizzare pi spesso: l'alertvisualizza un avvertimento, un messaggio di errore che blocca qualsiasiazione dell'utente finch egli non d il suo benestare cliccando sul bottone.

La sintassi :

alert("messaggio");

Il contenuto dell'alert deve essere sempre una stringa (cio una sequenza dicaratteri), il che vuol dire che deve essere racchiuso tra virgolette oppureche deve essere un valore che JavaScript sia in grado di convertire inautomatico in un valore letterale (come nel caso dei numeri).

Come per il document.write(), se dovete usare delle virgolette all'internodel messaggio bene che usiate i caratteri di escape (cio il back-slash),onde evitare gli errori. Ad esempio:

alert("Marco disse \"Ciao Mondo!\"");

Ecco un esempio di alert:

testo link

Come si pu vedere, finch l'utente non clicca su "ok", la pagina non vaverso il link indicato.

Da notare le virgolette ad apice semplice dentro le virgolette ad apicedoppio, per evitare di "chiudere prematuramente" il contenuto dell'eventoonClick.

Confirm

una finestra che pone una domanda e chiede conferma dando lapossibilit 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:testo link

36


37/115


Prompt

una finestra che pone una domanda e consente all'utente di dare larisposta che vuole. Pu avere anche un valore di risposta predefinito. La

sintassi :

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

la risposta predefinita facoltativa.

Ad esempio:

o anche:

Per visualizzare il nome dell'utente nella pagina dovremo poi "catturarlo" inqualche modo. Vedremo pi avanti come fare. Nota a margine Nell'ottica incui abbiamo affrontato il corso finora bene specificare che in realt lefinestre modali sono metodi dell'oggetto "window". Quindi la sintassi estesaper visualizzare le finestre modali dovrebbe essere:

window.alert("messaggio");window.confirm("messaggio");window.prompt("domanda","risposta predefinita");

37


38/115


17. Le finestre personalizzabili

Le finestre che abbiamo visto nella lezione precedente sono finestre disistema. Hanno una grafica minimale e pre-impostata, che di solito vascarsamente d'accordo con un sito dalla grafica accattivante in cui vienestudiato ogni minimo particolare. Con JavaScript possiamo creare dellefinestre personalizzate che si adattino alle nostre esigenze.

La sintassi questa:

window.open('percorso','nome finestra','caratteristiche separate davirgola');

PercorsoIndica un percorso (relativo o assoluto) diun file html da inserire all'interno dellafinestra

Nome finestra Indica il nome della finestra che abbiamocreato (opzionale)

Caratteristiche separateda virgola

Specifica la forma, la dimensione e laposizione della finestra, possiamo anchefar s che la finestra non siaridimensionale, o che non ci siano le barredegli 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 fattoche ciascun parametro sia indicato tra virgolette (semplici o doppie, nonimporta) ci dice inoltre che ci troviamo di fronte a delle stringhe (sequenze dicaratteri). Ognuno di questi parametri pu essere lasciato vuoto, ma la suapresenza va comunque indicata. Cos:

window.open('','','');

La sintassi qui sopra apre una finestra vuota.

Vediamo un esempio concreto:

esempio

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

Come abbiamo visto nel corso delle lezioni precedenti possiamo applicareanche la sintassi JavaScript agli eventi. Ad esempio questa sintassi apreun'ulteriore finestra secondaria al click del mouse. Abbiamo dun ue

38


39/115


realizzato la possibilit di cambiare due link con un solo click:

esempio

due link

< >

Ovviamente possibile associare la capacit di aprire finestre secondarieanche 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 lechiudono appena possibile. Inoltre esistono alcuni software che consentonoall'utente di impedire che i siti web aprano delle finestre secondarie nellepagine in cui essi stanno navigando.

Per quel che riguarda il secondo parametro (il nome della finestra) da direche, se il metodo window.open viene richiamato due volte all'interno della

stessa pagina ed esiste gi una finestra con lo stesso nome, non vengonocreate due differenti finestre, ma viene ricaricato il contenuto della finestragi 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 comevalore dell'attributo "target" nei tag "A" e "FORM". quindi possibilericaricare il contenuto di una finestra secondaria, semplicementespecificando il "target" del link nella finestra principale. Un esempio chiarirtutto:

39


40/115


primafinestra
seconda

finestra
ricarica ilcontenuto

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() ewindow.prompt. Pi precisamente il metodo window.open() ha quattroargomenti, non tre:

window.open('percorso','nome finestra','carrateristiche separate davirgola','cronologia');

L'ultimo argomento serve solo nel caso in cui il contenuto di una finestradebba essere ricaricato: si pu allora specificare se il nuovo valore devesostituire il valore precedente nella cronologia, o se piuttosto deve essereinserito un nuovo valore nella cronologia. In questo caso (e solo in questocaso) bisogner specificare:

esempio

primafinestra
secondafinestra

(cancellate la cronologia del vostro browser e osservate l'esempio,inserendo oppure omettendo il quarto parametro). Nella maggior parte dellesituazioni in cui vi verrete a trovare il quarto argomento potr esseretranquillamente omesso.

40


41/115


Ultima considerazione

Per rendere pi intuitivi i concetti abbiamo spesso parlato di "parametri". Chiconosce gi la programmazione sa che questo scorretto, molte volteavremmo dovuto parlare di "argomenti". Tuttavia preferisco spiegare soltanto

in un secondo momento che cosa sono gli "argomenti" e quindi ho preferitoutilizzare una terminologia imprecisa, ma di pi immediata comprensione.

41


42/115


18. Le caratteristiche delle finestre personalizzabili

42

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 ilnome della finestra.

Abbiamo detto che il terzo parametro (l'ultimo della lista) ci permette di creare unafinestra "come vogliamo noi". Per farlo sufficiente impostare una serie dicaratteristiche separate dalla virgola (ognuna di queste variabili si pu inserireoppure omettere e non comparir). Ad esempio:

La sintassi questa:

window.open('http://www.html.it','miaFinestra','width=300,height=300,toolbar=yes,location=no,status=yes,menubar=yes,scrollbars=no,resizable=no');

NB la riga precedente non va a capo

L'esempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra delmenu, la barra di stato (quella in basso), ma senza la barra degli indirizzi; lafinestra non pu essere inoltre ridimensionata.

Vediamo nel dettaglio quali sono le principali caratteristiche che possono essereattribuite alla finestra:

Caratteristica Valore Spiegazione Esempio

width numerico La larghezza della finestra inpixel

width=400

height numerico L'altezza della finestra inpixel

height=200

left numerico La distanza dalla sinistra delmonitor

left=300

top numericoLa distanza dal lato superioredel monitor top=350

resizable yes / no Indica se la finestra puessere ridimensionata o no resizable=no

fullscreen yes / no Indica 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


43/115


location yes / noLa barra degli indirizzi delbrowser location=no

scrollbars yes / noLe barre di scorrimentolaterali scrollbars=no

status yes / noLa barra di stato (quella in

basso)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 dallavirgola. Ad esempio con:

apria tutto schermo

Si apre una finestra a schermo intero (che pu essere chiusa dall'utente soloutilizzando 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 finestrepossiamo 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 diwidth 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 scrittasemplicemente 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');

43


44/115


19. Le variabili

Conviene immaginare le variabili come delle "scatole" all'interno delle qualiimmagazzinare dati. In JavaScript per creare delle variabili sufficienteassegnare un contenuto. Cos:

mioNome="Wolfgang";

Come si vede dall'esempio, l'espressione che crea una variabile compostada tre parti:

nome della variabile (mioNome)

operatore di assegnamento (=)

contenuto ("Wolfgang")

Volendo anche possibile esplicitare la creazione della variabile, al fine direndere pi chiara la sintassi. Cos:

var mioNome; // creo una variabile che si chiama "mioNome"mioNome="Wolfgang"; //assegno a mioNome il contenuto "Wolfgang"

Una variabile potr contenere qualsiasi tipo di dati valido e cio:

Tipo di dati Spiegazione Esempio

Numero Qualsiasi valore numerico miaVariabile=300;

Numero avirgola mobile Numeri con virgola miaVariabile=12.5;

StringaQualsiasi valore letterale. unasequenza di caratteri, racchiusatra virgolette.

miaVariabile=Wolfgang;

null uno speciale tipo di dato cheindica lassenza di alcun valore( il nulla). Non lo zero.

miaVariabile=null;

booleano

uno tipo di dato che indica uno

stato. Di fatto un valore booleanopu assumere solo due valori:acceso (vero), spento (falso). ilclassico interruttore della luce.

Vero:miaVariabile=true;

miaVariabile=1;Falso:miaVariabile=false;miaVariabile=0;

Esiste anche un tipo di dati particolare, l' "array" su cui ci soffermeremo inseguito.

In altri linguaggi di programmazione (C, C++, Java) le variabili di solitodevono essere prima "inizializzate" scegliendo il tipo di dati che esse devonocontenere: in questo modo si sceglie infatti lo spazio di memoria che la

variabile deve occupare; solo in un secondo momento viene assegnato ilcontenuto. In JavaScript, come in altri linguaggi di scripting e diro rammazione i moderni h as thon l'inizializzazione cio la

44


45/115


scelta del tipo di dati) avviene in automatico. Quindi se voi scrivete:

mioNome="Wolfgang";

avete creato in automatico una stringa.Le variabili in JavaScript (quando non si trovino all'interno di funzioni) hannovalidit in tutta la pagina. Vedremo meglio in seguito che cosa significaquest'affermazione.

45


46/115


20. Le Stringhe

Se volete creare una stringa e vi dimenticate le virgolette, incorrerete in unerrore. Ad esempio:

mioNome=Wolfgang;

vi dar errore, perch Wolfgang non tra virgolette (non quindi unastringa) e il motore di scripting che interpreta la pagina si aspetter di trovareun'altra variabile che si chiama Wolfgang.

Ricordate sempre che quando create delle stringhe dovete seguire dellesemplici regole:

tutto il contenuto della stringa deve essere compreso tra le virgolettedi apertura e quelle di chiusura (non importa che si tratti di virgolettesemplici 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 stessotipo 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 chiusaprematuramente).

Ci sono diversi stratagemmi per utilizzare le virgolette all'interno di unastringa. Vediamone alcuni:

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 dentroapici doppi

Cambiando il tipo di virgolette,si evita di chiudereimpropriamente la stringa

miaScritta=hodetto basta!;

Apici doppi dentroapici semplici

Ovviamente anche lesempiocontrario valido

miaScritta=hodetto basta!;

Trasformare levirgolette in"

" "

Trasformando le virgolette neicaratteri speciali dellHTML il

risultato non cambia

miaScritta=hodetto "

basta!";

46


47/115


Potete invece assegnare a una variabile il contenuto di un'altra variabile, inun 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 unastringa ma una variabile creata all'interno della pagina.

47


48/115


21. Come utilizzare le variabili

Riprendiamo l'esempio del metodo prompt() che abbiamo visto qualchelezione fa. Questo metodo ci restituisce quello che l'utente scrive all'internodella finestra di dialogo.

prompt("Scrivi il tuo nome","il tuo nome"); //chiede all'utente di scrivereil suo nome e restituisce il nome dell'utente

Possiamo sfruttare questa caratteristica ad esempio per "memorizzare" ilnome dell'utente e andarlo a scrivere poi nel corpo della pagina.

Per memorizzare il nome dell'utente, basta inserire il nome in una variabile.

Alla fine non ci resta che scrivere nel corpo della pagina (con undocument.write() )la variabile memorizzata.

Cos:

Esempio

nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");document.write("Benvenuto ");document.write(nomeUtente);

Da notare come il secondo document.write() dell'esempio non faccia uso di

virgolette (per quanto il document.write() accetti soltanto delle stringhe), dalmomento che il contenuto della variabile gi riconosciuto come stringa.

Ovviamente non possibile usare questo esempio in un sito web, perch lapagina ci chiederebbe il nostro nome ogni volta che la carichiamo. Levariabili infatti hanno validit all'interno della singola pagina, dopodichvengono distrutte, non c' modo dunque di creare una variabile che siconservi nel tempo (almeno non in modo immediato). stata una sceltadegli ideatori di JavaScript, dovuta a motivi di sicurezza.

Per applicare concretamente l'esempio che abbiamo visto in un sito webdovremmo utilizzare qualche espediente per memorizzare i dati dell'utente(un ottimo metodo sarebbe sen'altro l'utilizzo di un cookie).

48


49/115


22. Operare con le variabili

Quello che rende le variabili interessanti ovviamente la possibili dioperare con esse. Non solo i tipi numerici possono essere addizionati,sottratti, moltiplicati e divisi; ma anche le stringhe possono esseremanipolate in vario modo. L'operazione di somma (cio di concatenamento)di stringhe , ad esempio, di estrema semplicit. Nell'esempio della lezioneprecedente 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 diconcatenamento di questo tipo:

Stringa + variabile di tipo stringa + Stringa Inoltre la capacit diJavaScript 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 troppiproblemi in una stringa e sommato a un'altra stringa.

Esaminiamo ora un esempio concreto in cui utilizziamo le operazioni travariabili per posizionare le finestre. Come abbiamo visto il metodowindow.open() ci permette di posizionare le finestre dove vogliamo.Purtroppo basta che l'utente cambi risoluzione per avere un diversoposizionamento 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 di1024x768 (per cambiare risoluzione, utilizzare il tasto destro sul desktop epoi propriet > schermo > impostazioni). Il problema comunqueanalizzato accuratamente in un nostro articolo dedicato a come costruire unsito per diverse risoluzioni.

Noi vogliamo invece posizionare una finestra a destra del monitor e a metdello schermo indipendentemente dalla risoluzione.

49


50/115


Ci viene subito in mente che per posizionare la finestra in questo modopossiamo utilizzare un po' di formule:

posizione da sinistra = larghezza dello schermo - larghezza della finestraposizione dall'alto= (altezza dello schermo - altezza finestra)/2

Traduciamo queste formule in codice JavaScript. La propriet che indica lalarghezza dello schermo screen.width, per l'altezza useremo invecescreen.height. Quindi:

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

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

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

sinistra dello schermo

alto=(screen.height-larghFinestra)/2;//creo una variabile e mi ricavo il valore della posizione della finestradall'alto dello schermo one della finestra a sinistra dello schermo

NB: le righe precedenti non vanno a capo

Da notare le parentesi nell'ultima formula, che indicano la precedenza degli

operatori: come abbiamo imparato dalle Scuole Medie in poi, se non avessimesso la parentesi la divisione sarebbe stata eseguita prima dellasottrazione, dando luogo a un risultato errato. A questo punto non ci restache inserire le variabili che abbiamo calcolato all'interno della sintassi delwindow.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 nonabbiamo che da portare la finestra pi in qua (il "left" della finestra inizierquindi un po' prima) , cos:

Vediamo l'esempio completo:

50


51/115


finestra*/altezFinestra=300; /* creo una variabile contenente l'altezza dellafinestra*/

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

alto=(screen.height-larghFinestra)/2; /*creo una variabile e mi ricavo ilvalore della posizione della finestra dall'alto dello schermo */

window.open("sponsor.htm","","left="+sinistra+",top="+alto+",width="+larghFinestra+",height="+altezFinestra+",menubar,toolbar");

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 unconcatenamento di variabili

Per chi volesse approfondire l'argomento, nel corso di javaScript presenteuna lista degli operatori Javascript che possiamo utilizzare quandomanipoliamo le variabili.

51


52/115


23. Differenza tra variabili e oggetti

Sotto alcuni aspetti gli oggetti possono essere paragonati a delle variabili. Inpi hanno per la capacit di compiere delle azioni.

Se io creo ad esempio:

miaFinestra=window.open("sponsor.htm","","left=500,top=150,width=300,height=300,menubar,toolbar");

non ho creato una variabile, ma ho creato in realt un oggetto che eredita imetodi ("le azioni") propri dell'oggetto window. Questo significa che possoutilizzare l'oggetto miaFinestra per compiere determinate operazioni. Adesempio:

Ecco un esempio completo:

52


53/115


height="+altezFinestra+",menubar,toolbar"); /*creo un oggetto*/

chiudi

La differenza tra le variabili gli oggetti che le prime sono dei mericontenitori "stupidi", i secondi invece sono in grado di compiere determinateazioni (a seconda di come siano stati definiti e a seconda dei metodi chehanno a disposizione).

Torneremo in seguito sugli oggetti, approfondendo il loro utilizzo. Per orabasti sapere che gli oggetti possono essere paragonati a delle "variabilipotenziate", in quanto in grado di compiere delle azioni.

53


54/115


24. Introduzione alle funzioni

54

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 quandooccorre.

La sintassi necessaria per creare una funzione questa:

function nomeFunzione() {// nostro codice}


55/115


Corso JavaScript ad esempi

/* 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 asinistra dello schermo*/sinistra=screen.width-larghFinestra+20;

/*creo una variabile e mi ricavo il valore della posizione della finestradall'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();

Nell'esempio che abbiamo esaminato or ora sono presenti tre funzioni, duedelle quali vengono richiamate attraverso l'utilizzo di eventi, mentre la terzaviene richiamata all'interno della pagina.

Da notare inoltre che l'evento "onLoad" viene eseguito subito dopo ilcompletamento della pagina, dunque una funzione richiamata all'interno delBODY della pagina verr "lanciata" prima della funzione richiamatadall'evento onLoad. Nel nostro esempio la funzione "scriviRisoluzione()"viene lanciata rima della funzione "a rifinestra ".

55


56/115


evidente che tramite un utilizzo oculato di funzioni ed eventi possibilecreare delle pagine molto ordinate, con il codice JavaScript suddiviso inmolteplici parti, "azionato" soltanto quando richiamato.

Nota a margineIn realt possibile specificare che la funzione deve essere richiamata daun determinato evento direttamente dal codice JavaScript.

La sintassi questa (da inserire nella HEAD):

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

document.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 lafunzione "saluta" viene creato dalla stessa sintassi JavaScript, anzichessere specificato nel codice HTML.

56


57/115


25. Dove utilizzare le funzioni I

Prendiamo in considerazione questo esempio:

scritta="ciao";

function saluta() {alert(scritta);

}

saluta();

in questo primo esempio una variabile viene creata e inizializzata al di fuoridella funzione ed poi richiamata all'interno della funzione stessa, senzache 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 erichiamate poi dall'esterno: in un caso la variabile viene scritta addirittura inpagina senza che tutto ci crei minimamente dei problemi.

Molti linguaggi di programmazione creano una distinzione netta tra levariabili create all'interno del programma (nel nostro caso all'interno dellaa ina e le variabili create all'interno delle funzioni. Le rime rendono il

57


58/115


nome di variabili globali e sono valide in tutto il programma, le secondevengono dette variabili locali e sono valide soltanto all'interno dellafunzione. Per indicare il contesto entro cui una variabile valida si parla disolito 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. Vistoche questi sono i nostri primi programmi, possiamo evitare di distinguere travariabili locali e variabili globali. Facciamo per attenzione a non incapparein due tipici errori:

1. Evitiamo di sovrascrivere le variabili nei nostri programmi. Adesempio:


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

Nell'esempio

Corso Base JavaScript

Documents

Transcript of Corso Base JavaScript