Seconda Parte 

Campi e intestazioni

Vediamo allora da vicino in cosa consiste il linguaggio e come definirlo e utilizzarlo nelle nostre pagine. Per definire una parte della pagina (campo di scripting) in cui scrivere codice JS bisogna utilizzare la sintassi seguente:

<SCRIPT LANGUAGE="JavaScript"> // Questo codice verra' eseguito da tutti i client con supporto JS ..codice.. </SCRIPT>

Sebbene il parametro LANGUAGE non sia obbligatorio, e' consigliato usarlo;

anzi e' importante, allo stato attuale dell'implementazione, definire meglio

quale versione di JS si sta scrivendo e quindi discriminare quale client

la deve eseguire. Per esempio:

<SCRIPT LANGUAGE="JavaScript1.1"> // Questo codice verra' eseguito solo da Netscape 3 e successivi ..codice.. </SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2"> // Questo codice verra' eseguito solo da Netscape 4 e successivi ..codice.. </SCRIPT>

E' bene precisare che non solo Netscape esegue codice JS nelle varie

versioni. Anche Microsoft Internet Explorer lo fa, solamente che di

solito "salta" una versione.In altre parole se il JS 1.1 viene eseguito

regolarmente da Netscape 3.0, allora dal lato IE si puo' star sicuri

solo con la versione 4.0. All'indietro il discorso e' vero fino a un

certo punto. IE 3.0 esegue JS in modo saltellante, alcune funzioni sono

supportate solo di JS 1.0, altre di JS 1.1, ma in pratica sono ben poche.

IE 2.x invece non supporta JS e quindi in questo ambito e' equivalente

alle versioni 1.x di Netscape.

Commenti

Poiche', appunto, non tutti i client supportano JS, e' buona regola incorporare il codice

in commenti HTML standard:

<SCRIPT LANGUAGE="JavaScript"> <!-- commentato per client vecchi ..codice.. // fine commento --> </SCRIPT>

L'interprete JS del client ovviamente non considerera' questi commenti

come codice, e d'altro canto un client vecchio non visualizzera' il codice

ne' verra "disturbato" dalla sua presenza, prendendolo per un commento

inserito nella pagina.

Inclusione di codice esterno

E' possibile, come accennato precedentemente, scrivere il codice JS separatamente e definirne l'inclusione in una o piu' pagine quando queste vengono richiamate, con un istruzione come la 

seguente:

<SCRIPT SRC="/script/listElements.js" LANGUAGE=""JavaScript1.1">
   </SCRIPT>

Notare che questo metodo e' supportato solo a partire da Netscape 3 e

che il parameto LANGUAGE, anche qui, non e' obbligatorio. La documentazione

JavaScript parla anche del supporto che il server dovrebbe dare al tipo MIME

application/x-javascript exts=js

da aggiungere nel file mime.types. In realtà pochissimi server aggiungono

questo tipo a quelli canonici, ma, almeno dalle mie esperienze, Navigator

non sembra soffrirne più di tanto, mentre MSIE si. Se deciderete di

utilizzare l'inclusione JS in parti chiave del vostro sito, o magari

per preservare la segretezza del codice sorgente, chiedete di inserirlo

nel mime.types al vostro Webmaster, è una modifica che richiede poco sforzo,

ma vi semplifica la vita.

Il tag <NOSCRIPT>

Uno dei tag più "controversi" che si trova in JS è il <NOSCRIPT>. Il suo scopo è quello di fare da discriminante tra i client che supportano JS e non. In pratica, l'etichetta non ha alcuna utilità per gli utenti con la versione 1.x di Netscape, perchè tale versione non riconosce il tag <NOSCRIPT>. Per le versioni 2.0, c'è un po' di confusione mentre dalla versione 3.0 in poi di Navigator il comportamento è stato definito: il client visualizza 

tutto quello che si trova all'interno dei tag <NOSCRIPT> e </NOSCRIPT> se:

a) Il supporto JavaScript è stato disabilitato da preferenze
b) Il client non supporta la versione presente di JavaScript.

Quindi, in una pagina scritta in JS sarà buona norma seguire questo schema:

<SCRIPT LANGUAGE="JavaScript"> <!-- commentato per client vecchi ..codice.. // fine commento --> </SCRIPT> <NOSCRIPT> <H3>Attenzione</H3> Questa pagina richiede il supporto JavaScript per essere visualizzata correttamente. </NOSCRIPT>

Dentro i tag eventualmente si può inserire tutto il formato di una pagina, se volete ugualmente presentare una scena "vivibile" e non un semplice annuncio.

Dove inserire la sezione JavaScript nella pagina

Sebbene teoricamente si possa inserire codice JavaScript in ogni dove nella pagina (vedremo in seguito la generazione di eventi dinamici e funzioni in-line), si possono formulare alcuni consigli per una migliore strutturazione. Per esempio, porre tutta la sezione JS all'interno dei tag <HEAD> e </HEAD> è senz'altro una buona abitudine, perchè 

è la prima parte della pagina che il client legge ed interpreta. Molti programmatori preferiscono porre tutto alla fine, altri ancora vicino agli oggetti della pagina che devono manipolare. La scelta è ampia, come detto, e a livello di specifiche non ci sono obblighi 

da rispettare, ma è molto meglio non mischiare indiscriminatamente codice HTML con codice JS. Ricordarsi anche di fare attenzione ai "commenti annidati". Come visto sopra, tutto il codice può essere racchiuso tra commenti standard HTML (<!-- e -->), e 

ripetere il carattere > oppure la sequenza -- nel codice JS può indurre il client in errore. In tal caso cercate di sostituirlo con qualcosa di equivalente (il < è meno "pericoloso"

 in questo senso), questo è maggiormente vero nel caso di generazione di codice HTML on-the-fly con document.write, trattato nella terza parte.

Errori e Finestre di errore

Nelle prime fasi di apprendimento ed esercizi farete senz'altro la conoscenza dei 

messaggi di errore JS che il client invia nel caso, appunto, di errori di procedura nel codice. Per semplicità considereremo quelli di Netscape, ma le considerazioni possono valere anche per MSIE. Il client legge in memoria il codice prima di eseguirlo, e se trova 

un errore manda un messaggio tramite una piccola finestra. La pagina viene comunque caricata, ma senza considerare tutto il codice seguente all'errore.. Una tipica finestra 

di errore è mostrata nella figura 1.

Il problema principale delle finestre di errore è che esse devono essere tolte prima di rivisualizzare qualsiasi pagina su Netscape e in ordine inverso alla loro apparizione. In altre parole, se gli errori forzati fossero stati due sarebbero venute due finestre, rispettivamente ad indicare il primo errore e il secondo. Bisognava allora fare click sull'ultima finestra e poi sulla precedente; il viceversa non è possibile, ed anche per questo motivo, in caso di multipli errori, bisogna fare ben attenzione a non spostare le finestre di errore, poichè di default esse vengono "impilate" in sequenza.
Ogni finestra mostra le seguenti informazioni:

La URL del file che ha dato l'errore di script
Il numero di linea (approssimato) in cui è occorso l'errore
Una descrizione dell'errore ("messaggio di errore")
I messaggi di errore JavaScript sono in lingua tecnica, e pertanto vanno interpretati. Ovviamente sono in inglese. Per esempio, nella figura 1 si vede un errore che porta la dicitura

missing { before function body

Con questa dicitura si indica la mancanza (missing) di una parentesi graffa prima (before) del corpo della funzione. Ed infatti è l'errore che ho generato appositamente per provocarne l'avviso. Alla fine del corso includerò una appendice con gli errori più comuni e le loro interpretazioni e possibili cause.

Funzioni

Il costrutto fondamentale di ogni programma JavaScript è la funzione. Facciamo una piccola digressione.
JavaScript deriva dal Java, che a sua volta deriva da C e C++: da questi linguaggi Java non ha trasposto l'uso dei puntatori e altre differenze minori, mentre dal Java ne è stata fatta una versione semplificata per JavaScript. In altre parole, la parentela con C e C++ è piuttosto fumosa, ma comunque la sintassi e i principi sono riconducibili ai "fratelli maggiori". Le funzioni ne sono un esempio, ma anche la filosofia a oggetti di JavaScript (che vedremo in seguito) può essere sicuramente un buon indizio, e anche un esempio di codice moderno, che ne fanno un'ottima piattaforma di sviluppo per passare magari poi ai linguaggi più complessi.
   Le funzioni in JS rappresentano lo scope locale più esterno possibile, ovvero il massimo costrutto nel quale le variabili sono locali: variabili definite o dichiarate dentro una funzione sono viste solamente all'interno della funzione e di tutte le procedure contenute in essa. Tutte le altre variabili generate all'interno di un campo <SCRIPT></SCRIPT>, ma al di fuori di funzione, sono di tipo globale (o almeno dovrebbero esserlo, ma di questo parleremo un'altra volta), ovvero sono viste da tutte le funzioni all'interno di campi script nella pagina.

Analisi della sintassi

La sintassi tipica di una funzione JS all'interno di un campo scripting è semplice. Il corpo deve essere sempre contenuto in una parentesi graffa aperta e una chiusa: { }. Il nome delle funzioni deve contenere poi due parentesi, con dentro opzionalmente le variabili passate dal chiamante (parametri attuali), e tutti i nomi sono case-sensitive, quindi il nome unaFunzione() è diverso da UNAFUNZIONE(), lo stesso vale ovviamente per i nomi di variabile. Vediamo un esempio. Quella che segue è la dichiarazione di una funzione semplice. Quando viene invocata, la funziona mostra una finestra standard con un bottone "OK" e il testo specificato.

function doThis() { alert("Salve, e benvenuto al Corso JavaScript di BETA"); }

E' importante che nel momento in cui dichiarate una funzione scriviate subito le due parentesi graffe, in special modo quella di chiusura. Questo perchè, come vedremo, all'interno di una funzione generalmente sono annidate diverse procedure, ognuna delle quali può richiedere altre parentesi graffe di definizione dello scope, e quindi fare confusione alla fine, perdendosi tra mille graffe, può essere molto facile, oltre che fatale. Lo stesso discorso si allarga anche alle procedure stesse, naturalmente.
Seguire una modalità di scrittura "indentata" può facilitare la comprensione del codice, e anche la stesura. Non c'è comunque alcuna obbligatorietà, e anche qui ognuno segue delle consuetudini derivanti dalla propria esperienza, o dalle abitudini consolidate. Per chi inizia adesso a programmare, consiglio tuttavia di seguire il modo indentato: prenderete senz'altro una ..buona abitudine, e, nel caso vi troviate a lavorare in team, apprezzata dai colleghi programmatori.  

Funzioni in pagine complete

Quella che segue è la stessa funzione inserita in una pagina e chiamata quando la pagina stessa è stata completamente caricata.  

<HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- commentato per client vecchi function doThis() { alert("Salve, e benvenuto al Corso JavaScript di BETA"); } // fine commento --> </SCRIPT> <BODY onLoad="doThis()"> <H3>Esempio di una finestra "alert"</H3> </BODY> </HTML>

Un esempio un po' più complicato. Quella che segue è una pagina HTML completa (potete provarla selezionando e copiando direttamente il codice da questa pagina e salvandolo col nome di pr1_e1.htm):

<HTML> <HEAD> <TITLE>BETA - Corso JavaScript - pr1_e1</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- commentato per client vecchi document.write('<BODY onLoad="doThat()">'+ '<H3>Esempio di una finestra "alert"</H3>'+ '</BODY>'); function doThat() { alert(" Benvenuto al Corso JavaScript di BETA!" + br() + " Salvi questa pagina col nome pr1_e1.htm," + br() + "preferibilmente nella directory \\beta\\corsi\\js10_11\\"); } // fine commento --> </SCRIPT> </HEAD> <NOSCRIPT> <BODY> <H3>Attenzione</H3> Questa pagina richiede il supporto JavaScript per essere visualizzata correttamente. </BODY> </NOSCRIPT> </HTML>

Il codice è abbastanza chiaro per comprendere i meccanismi di JS: quando si carica la pagina, il client legge il campo di scripting dichiarato dentro gli header, quindi scrive la "pagina" al volo (col metodo document.write(), analizzato nella terza parte). La pagina contiene a sua volta un richiamo al codice, e precisamente alla funzione che mostra la finestra di benvenuto. Completa la serie il testo contenuto nel campo di no-scripting, che viene visualizzato con le condizioni di cui abbiamo parlato sopra. Notare l'uso dell'oggetto br() per generare dei ritorno a capo, e la suddivisione del testo in più righe per comodità di scrittura, sempre possibile utilizzando, come da esempio, gli operatori + in fondo alla riga e gli apici all'inizio e fine di ogni riga di testo. Notare anche che il carattere letterale \ all'interno della stringa di testo deve essere reso con \\, altrimenti viene interpretato come un'espressione regolare. A tal proposito ricordo che il ritorno a capo dentro una finestra può essere gestito anche con la stringa \n frammista al testo stesso. Infine, come si nota dall'esempio, si possono usare indistintamente apici doppi o singoli " ', ma sempre alternando i due.