 |
CORSO DI JAVASCRIPTSeconda Parte - Campi e intestazioni; Errori e finestre di errore; Funzioni, dichiarazione e chiamatadi Luciano GiustiniNota - La pagina è stata studiata per essere stampata: consiglio senz'altro questa soluzione per meglio comprendere il codice e la struttura dei paragrafi. Può essere ancora meglio affiancare la versione elettronica con quella cartacea per gli esempi inseriti da salvare. Campi e intestazioniVediamo 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.
CommentiPoiche', 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 esternoE' 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=jsda 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:
b) Il client non supporta la versione presente di JavaScript. <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 paginaSebbene 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 erroreNelle 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.
Fig.1 - Finestra di errore JavaScript - In questo caso è stata volontariamente omessa una parentesi graffa dalla funzione.
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.
Il numero di linea (approssimato) in cui è occorso l'errore Una descrizione dell'errore ("messaggio di errore") La riga in cui è contenuto o che genera l'errore (non sempre)
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.
FunzioniIl 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 sintassiLa 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 completeQuella 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.
Fine Seconda parte______________________________________________________________________________
BIBLIOGRAFIA E RIFERIMENTI
Riferimenti BETA
Gruppi di discussione
Documentazioni cartacee
Luciano Giustini è raggiungibile su Internet all'indirizzo l.giustini@beta.it
 Per saperne di più sui corsi di BETA
|
|
