Manuale di JavaScript

Il codice javascript viene eseguito dalle versioni 2 e successive di Netscape Communicator, 3 e successive di Internet Esplorer e da tutti i browser che ne supportano la sintassi. Per questo motivo, al fine di non creare confusione con i browser non abilitati all'esecuzione di javascript, il codice viene inserito tra i TAGs di commento <!-- e -->. Questo evita che i vecchi browser, invece di interpretare il sorgente, lo visualizzino nella pagina.

alert(); è una funzione predefinita di javascript che apre una finestrella in cui viene riportato un avviso (nel nostro caso la scritta "Welcome to Software Developers"). Nel primo esempio la finestrella verrà aperta prima che venga visualizzato il testo del documento all'interno del browser; quindi premendo il tasto "ok" la finestrella verrà chiusa e proseguirà la normale visualizzazione delle informazioni contenute nel BODY del documento HTML. Nel secondo caso invece, essendo il codice javascript posizionato subito prima del TAG di chiusura </BODY>, la finestrella verrà aperta solo dopo che nella pagina nel browser è stato riportato il contenuto del documento.

Se non vogliamo inserire listati javascript all'interno del codice che definisce la pagina HTML sarà sufficiente creare un file a parte contenente il codice, salvarlo con estensione .js e quindi aggiungere il parametro SRC all'interno del TAG <SCRIPT>. Questa procedura può essere utile quando lo stesso programma viene utilizzato da più pagine. La sintassi del TAG sarà quindi:

Il tutto risulterà come segue:

E' importante ricordare che Javascript distingue tra lettere maiuscole e minuscole. Ciò vuol dire che la corretta sintassi ad esempio, della funzione alert() è:

Qualora dovessimo scrivere:

lo script potrebbe non funzionare. Dico "potrebbe" in quanto la maggior parte dei browser attualmente in circolazione tendono a correggere questo tipo di errori. Consiglio comunque di far attenzione a questa caratteristica di javascript per evitare comportamenti imprevedibili dei vostri programmi. Altra cosa cui dovete fare attenzione è ricordarvi di concludere ogni comando con il carattere ";" (punto e virgola).

Fate attenzione a come viene utilizzato il carattere " (virgolette) all'interno del codice. Tutto il testo che compare all'interno delle virgolette è considerato testo statico (una costante), mentre quello che non compare tra virgolette, quando non fa parte della sintassi del linguaggio, è considerato una variabile. Il seguente esempio evidenzia quanto detto.

Nella prima istruzione di visualizzazione (document.write("Il mio nome è "+MyFullName);) MyFullName è considerato una variabile e quindi nella pagina del browser viene visualizzato il suo valore. Nella seconda istruzione write invece (document.write("Il mio nome è "+MyFullName);), MyFullName si trova all'interno delle virgolette ("), viene quindi considerato testo statico e non una variabile. Questo è il motivo del diverso output prodotto dalle due istruzioni ed evidenziato in fig.2.2.

Fate attenzione all'operatore "uguale a" che è espresso da due simboli "=" (uguale) affiancati ("=="). Uno degli errori più comuni commessi dai programmatori, non solo in javascript, è quello di dimenticare un "=" nell'eseguire un confronto. Questo tipo di errore altera gravemente il flusso logico del programma. Osservate le seguenti righe:

La prima istruzione viene interpretata come un confronto e restituisce il valore vero se la variabile Cognome contiene il valore "Rossi", falso altrimenti. La seconda istruzione invece assegna il valore "Rossi" alla variabile Cognome.

Il costrutto IF (a) THEN (b) ELSE (c) viene completato dall'utilizzo degli operatori booleani AND, OR e NOT. Tali operatori sono espressi in javascript tramite la sintassi riportata in tabella 3.2.

Probabilmente conoscerete il funzionamento delle tabelle di verità operatori booleani che comunque è riportata nella tabella 3.3.

Un'altra istruzione utile per il controllo del flusso del programma è il costrutto for. Quest'ultimo ci permette di richiedere l'esecuzione di una o più istruzioni fin quando non si verifica una particolare condizione, detta condizione d'uscita. La sintassi javascript del costrutto è la seguente:

dove v è la variabile di controllo del ciclo. v viene inizializzata sul valore startValue prima dell'inizio del ciclo. condizione su v è la condizione di uscita del ciclo. Il ciclo termina quando condizione su v restituisce il valore false (cioè quando la condizione su v non è più verificata, quindi falsa). Il primo controllo sulla condizione viene effettuato all'ingresso nel ciclo, prima della prima iterazione, è quindi possibile che le istruzioni appartenenti a bloccoDiIstruzioni non vengano mai eseguite. Ciò avviene quando condizione su v restituisce immediatamente il valore false. istruzione su v è un'istruzione che modifica il valore della variabile di controllo v. Tale istruzione generalmente fa si che v tenda al valore che soddisfa la condizione di uscita (quindi tale da rendere condizione su v falso). Se così non fosse il rischio sarebbe quello di mandare il processo in loop, cioè creare un ciclo infinito, senza uscita.
L'esempio di seguito contiene codice javascript che costruisce una tabella tramite l'istruzione for.

Per quanto quello descritto sia il modo più comune di utilizzare il costrutto for, è anche possibile che la variabile di controllo non sia v, cioè che la condizione di uscita non riguardi la variabile v; o che l'istruzione di iterazione non modifichi v ma qualche altra variabile. E' anche possibile che venga omessa una o più istruzioni tra quelle di inizializzazione, controllo, iterazione.
Tramite l'esecuzione dell'istruzione break all'interno del bloccoDiIstruzioni di un ciclo viene immediatamente interrotta l'esecuzione del ciclo stesso, anche se la condizione di uscita non si è ancora verificata.
Di seguito sono riportati alcuni esempi.

Il codice javascript visualizza parte dei colori utilizzabili nelle pagine web, con i rispettivi valori RGB. Osserviamo che nel secondo e terzo ciclo for manca l'istruzione di inizializzazione della variabile di controllo. Le variabili g e b infatti vengono inizializzate all'inizio del codice in quanto sono utilizzate già nel primo ciclo. Da notare inoltre l'utilizzo del carattere "\" per inserire nel codice HTML generato dal programma il carattere " (virgolette). L'istruzione:

genera la seguente linea di codice HTML:

Nel prossimo esempio faremo uso dell'istruzione break per interrompere l'esecuzione di un ciclo for nel quale non è stata definita alcuna condizione d'uscita.

Osservate l'output del browser in fig.4.3. Il ciclo termina alla settima iterazione in quanto quando la variabile di controllo k raggiunge il valore 7, viene eseguita l'istruzione break.

Oltre all'istruzione break, è possibile utilizzare, all'interno di un ciclo for, l'istruzione continue. Quest'ultima interrompe l'esecuzione di una particolare iterazione, senza però interrompere l'esecuzione del ciclo.
Nell'esempio di seguito vengono interrotte la terza e la settima iterazione. Il ciclo comunque continua fin quando non risulta verificata la condizione d'uscita.

Osservate l'output del browser in fig.4.4. in cui non compaiono le linee di output relative alle iterazioni 3 e 7.

dove condizione è la condizione di uscita del ciclo. Il ciclo termina quando condizione restituisce il valore false (cioè quando la condizione risulta falsa). Il primo controllo sulla condizione viene effettuato all'ingresso nel ciclo, prima della prima iterazione, è quindi possibile che le istruzioni appartenenti a bloccoDiIstruzioni non vengano mai eseguite nel caso condizione risulti immediatamente false. Anche nel caso di cicli while, come per i cicli for, sussiste il pericolo di mandare il processo in loop. Questo avviene quando, al ripetersi delle iterazioni, non si verifica mai la condizione d'uscita.

La stessa applicazione vista nel capitolo precedente, che costruisce una tabella è stata realizzata sostituendo il ciclo for con un ciclo while.
Di seguito è riportato il codice.

Anche nei cicli while è possibile far uso delle parole chiave break e continue, il cui funzionamento è stato spiegato nel capitolo precedente.

Nella tabella 5.2 sono riportati alcuni estratti di codice di cicli while e di cicli for. Ogni coppia di istruzioni esegue le stesse operazioni.

Gli array generalmente sono utilizzati per memorizzare variabili dello stesso tipo, o comunque legate da una qualche relazione logica. L'uso degli array risulta comodo anche in fase di consultazione: se decidiamo di accedere alle variabili contenute in un array, magari per stamparle come nell'esempio precedente, l'operazione può essere svolta utilizzando un'unica istruzione di ciclo (for o while). Al contrario, se avessimo utilizzato al posto di un array più variabili di nome differente non sarebbe stato altrettanto immediato scrivere il codice necessario ad accedere ad ognuna di esse. Il codice che segue fornisce lo stesso output del precedente, ma non fa uso di variabili di tipo array. Osservate come la procedura di visualizzazione dei valori delle cinque variabili richieda più istruzioni.

Gli esempi sviluppati in questo capitolo probabilmente non mostrano la vera utilità degli array. Purtroppo, quanto abbiamo appreso fino ad ora non è sufficiente per sviluppare esempi che mostrino a pieno i vantaggi effettivamente offerti da questo genere di oggetti. Non preoccupatevi, nei prossimi capitoli, quando avremo imparato qualcosa di più, torneremo ad utilizzare gli array in modo più intelligente.

Dove NomeFunzione è il nome della funzione; par1, par2, ..., parN sono N parametri che la funzione riceve in input quando ne è richiesta l'esecuzione (N può anche essere 0). I parametri passati ad una funzione non devono essere necessariamente tipi di dati elementari (interi, stringhe, ...) ma possono anche essere oggetti definiti dal programmatore (vedi cap. 8). Tra le parentesi graffe ("{" e "}") compare il corpo della funzione, cioè le istruzioni che verranno eseguite al momento dell'attivazione. Eseguito il blocco di istruzioni viene generalmente restituito un valore, indicato col nome di output o risultato della funzione.

Supponiamo di aver la necessità di definire una funzione che visualizzi del testo, passato come parametro, in un documento HTML sotto forma di paragrafo. Potremo scrivere una funzione come la seguente:

Quando all'interno del codice javascript avremo bisogno di visualizzare del testo sotto forma di paragrafo sarà sufficiente utilizzare l'istruzione:

di seguito è riportato il codice completo della pagina HTML in cui è definita ed utilizzata la funzione writeString().

E' possibile inviare ad una funzione più parametri di quelli effettivamente richiesti. In questo caso dovremo far uso della parola chiave arguments per accedervi. arguments potrà essere trattato come un array di lunghezza pari al numero di parametri in eccesso che sono stati passati alla funzione. Definiamo una funzione utile per visualizzare in un documento HTML liste di elementi. L'unico parametro previsto è listType che indica il tipo dell'elenco (numerato o semplice). Gli altri parametri vengono controllati tramite l'array argumets.

Vediamo ora come può essere utilizzata la funzione appena definita. Di seguito è riportato il codice di una pagina HTML che fa uso di printList().