PROGRAMMAZIONE

LINGUAGGI WEB

Asp

Php

GUIDE DI BASE

CORSO DI JAVASCRIPT

Terza Parte

Ricordo che, prima della fine del corso, darò conto anche delle modifiche introdotte nella nuova implementazione standard di JavaScript, definita EcmaScript. E' possibile vedere fin d'ora di cosa si tratta collegandosi all'indirizzo http://www.ecma.ch/.

Abbiamo visto nella scorsa puntata come scrivere la nostra prima funzione in JavaScript, la sintassi e gli errori, e alcune indicazioni per le dichiarazioni. Vediamo ora di entrare nel merito introducendo i comandi JavaScript, alcuni dei quali (i fondamentali) saranno oggetto di paragrafi a parte.

Comandi JavaScript

I comandi possono essere costituiti da blocchi di codice, e abbiamo visto il costrutto della funzione che può servire a contenerli, oppure da singole righe di codice.Ogni comando che occupa una singola linea può avere un punto e virgola (;) che indica la fine del comando. Ricordarsi che JavaScript è un linguaggio case-sensitive, distingue cioè le maiuscole dalle minuscole. Al contrario dell'HTML, quindi, ma attenzione: il codice JavaScript dentro al codice HTML è ancora case-sensitive tranne per quello che viene considerato a tutti gli effetti come tag HTML. Un esempio varrà più di tante parole:

<HTML> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY> <H4>Esempio di una finestra "alert"</H4> <FORM> <INPUT TYPE="BUTTON" VALUE="Mostra Alert" ONCLICK="doThis()"> </FORM> </BODY> </HTML>

OnClick, attributo di evento JavaScript, in questo caso diventa a tutti gli effetti un tag HTML e come tale

la sintassi è case - insensitive: può essere scritto tutto maiuscolo, minuscolo, ecc. La chiamata di funzione doThis(), come valore, deve essere invece scritta esattamente come è stata dichiarata.

Commenti

La volta scorsa abbiamo visto brevemente i commenti da includere per rendere compatibile una pagina contenente comandi JavaScript con i client Web vecchi. Vediamo ora quali sono i commenti che invece riguardano il linguaggio JavaScript vero e proprio. Apro una parentesi per consigliare vivamente l'uso di righe di commento a compendio e spiegazione del codice presente. Molto spesso le modifiche, gli aggiornamenti, rivestono un ruolo fondamentale nella corretta gestione di pagine JavaScript, e operare

su centinaia di righe senza ricordarsi esattamenteil loro significato può voler dire molti mal di testa in più e tempo speso male. Segnate inoltre nome dell'autore, eventuale copyright e data di creazione/aggiornamento all'inizio del codice.
I commenti si dividono tra quelli a riga singola (//.. ) e quelli composti (/* .. */); questi ultimi servono qualora vogliate scrivere annotazioni su più righe. Per esempio:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Comandi di cicli e iterazioni: for, for..in, while

JavaScript possiede tre (o due, in pratica) comandi di iterazione: for, for..in e while, oltre ai comandi break e continue. Sembrerà poco, ma comunque la potenza di questi costrutti in pratica serve a

risolvere virtualmente qualsiasi problema iterativo, senza ricorrere alla ricorsività. Pratica, quest'ultima, che genera anche il problema della saturazione di memoria, specie per codici molto costosi in termini di risorse. Meglio quindi i cicli; che vediamo ora, sono molto simili a quelli di Java e C, e quindi non mi dilungherò eccessivamente sulle spiegazioni di ogni singola semantica.

For

sintassi

for ([initial-expression]; [condition]; [update-expression]) { statement(s)... }

esempio

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Notare che non ci sono le parentesi graffe all'interno del ciclo for, poichè in questo caso c'è un solo comando (e una sola riga di codice).

Una variazione del ciclo for è for..in, utilizzato per analizzare le proprietà di un oggetto, che identifichiamo con objectName, tramite l'ausilio di un contatore (i nell'esempio). In JavaScript una proprietà è un valore che appartiene a un oggetto; molti oggetti JavaScript possiedono una serie di proprietà il cui valore può essere ricavato ed eventualmente modificato.

For..in

sintassi

for (index in objectName) { statement(s).. }

esempio

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Notiamo alcune cose: alla funzione sono passate due variabili; una delle due è chiamata obj, e non per esempio object, che potrebbe sembrare più intuitivo, perchè object è una parola riservata.Fate sempre attenzione quando scegliete i nomi di variabili a considerare le parole riservate; consultate le tabelle aggiornate fornite assieme all'implementazione di JavaScript che state usando (vedi riferimenti, sotto).

Syntax-highlighting
Un buon metodo per ridurre la frequenza di questo inconveniente, e comunque per scrivere "meglio" in codice, sia JavaScript sia HTML, può essere quello di utilizzare un editor con il syntax-highlight corretto.

In questo modo le parole riservate verranno evidenziate rispetto al codice circostante. Nei riferimenti, collegandosi al settore di BETA "Download Software", consigliamo alcuni editor tra quelli syntax-highlight: Editeur (http://www.studioware.com), TextPad (http://www.textpad.com) e HomeSite, provato su questo stesso numero di BETA. In ogni caso un editor con la sintassi HTML dovrebbe prevedere la personalizzazione dei tag così come quella di JavaScript, visto che nuovi comandi vengono aggiunti ad ogni release di Netscape. Anche la colorazione dovrebbe essere personalizzabile, considerando che quella proposta da Netscape stessa, di cui vediamo un esempio in figura (view-source), appare attualmente la più gradita, e più utilizzata dagli editor a meno di piccole differenze.

Syntax-highlighting - Ecco come appare un documento HTML e JavaScript visualizzato tramite il comando View, Page Source da Netscape 4.0. Il tipo di sintassi colorata adottata da Netscape appare la più gradita agli sviluppatori e molti editor HTML vi si rifanno per la visualizzazione dei codici.

Una buona regola di scrittura, soprattutto quando il codice JavaScript è molto lungo e complesso, è di indentare (rientrare le righe) il codice secondo le strutture e le appartenenze. Questa è tra l'altro una pratica molto consigliata anche per tutti i linguaggi di programmazione, e il JavaScript non fa eccezione.

Vediamo adesso il ciclo while, terzo costrutto iterativo del linguaggio JavaScript. Con questo tipo di ciclo

si possono eseguire uno o più comandi JavaScript mentre sussiste una condizione. Anche qui, se dentro

al corpo del ciclo si devono eseguire più istruzioni esse vanno racchiuse tra parentesi graffe, viceversa non ve n'è bisogno.

While

sintassi

while (loopCondition) { statement(s).. }

esempio

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Notiamo, in questo caso, che la tavola moltiplicativa dell'esempio si ferma dopo 10 iterazioni.

La funzione viene chiamata fornendo direttamente un numero; in una sistemazione definitiva

si può utilizzare l'input dell'utente, tramite un prompt (sintassi: prompt('userMessage',

[inputDefault])), oppure una form scritta ad-hoc.

Interruzione e prosecuzione di un ciclo: Break e Continue

Il comando break (sintassi: break;) serve a interrompere un ciclo, come for, while, facendolo terminare nel punto in cui si trova il comando e passando il controllo al comando successivo al ciclo. Nell'ultimo esempio che abbiamo visto proviamo a porre il comando break come segue:

... while (iLoop <= 10) { if (iLoop == 6) break; ... } // l'uscita dal ciclo while porta qui ...

Quindi la funzione del comando break è quella di uscire dal ciclo. Il comando continue (sintassi: continue;) invece di provocare l'uscita dal ciclo ne obbliga l'iterazione successiva. In altre parole promuove la prosecuzione del ciclo in cui si trova; se questo è un while, il comando continue fa

ripartire il ciclo ritornando alla condizione iniziale, mentre in un ciclo for (e for..in) salta alla update-expression.

Le Funzioni - Creazione di funzioni e procedure definite dall'utente

Nella seconda parte del corso abbiamo introdotto le funzioni, il costrutto di JavaScript per i blocchi di codice che realizzano uno specifico task ed eventualmente restituiscono un valore. Funzioni e procedure sono la stessa cosa in JavaScript; le procedure eseguono un certo blocco di codice mostrando alla fine

un risultato, mentre le funzioni realizzano un certo processo restituendo uno specifico valore.

function doThis() { var odiern = new date(); alert("Salve! Oggi e' il " + odiern); }

Ogni funzione per essere eseguita ha bisogno di una chiamata di funzione. Ne abbiamo viste

alcune negli esempi precedenti. Le chiamate possono avvenire in qualsiasi punto della pagina

(o della struttura frame, che vedremo in seguito nel Corso), a patto di trovarsi in un JavaScript

scope:

dentro un corpo JavaScript: <SCRIPT>doThis()</SCRIPT>
come valore di un tag HTML: <A HREF="JavaScript:doThis()">Click Here</A>
come valore di un campo form: <..ONCLICK="doThis()"></FORM>
..e in altri casi ancora, l'importante è scrivere la funzione rispettando il case e alternando gli apici doppi

e singoli per non incorrere in errori. Come abbiamo visto in alcuni dei precedenti esempi, le funzioni possono accettare degli argomenti, cioè valori memorizzati o creati in un altro punto della propria applicazione, come la proprietà di un oggetto JavaScript o un input da utente, che vengono passati alla funzione. Ogni blocco di codice che non sia composto da un solo comando deve essere entrocontenuto in parentesi graffe ({..}). Da ricordare che non possono essere annidate funzioni all'interno di altre funzioni, mentre ovviamente possono esistere blocchi dentro altri blocchi - è il caso per esempio di if..else spiegato sotto, in tal caso separati dalle graffe.

Il comando Return

Se una funzione deve restituire uno specifico valore, si deve usare il comando return con il valore, o l'espressione, che si vuole restituire. Il comando return è opzionale, in quanto non tutte le funzioni restituiscono valori. Return

sintassi

return value;
return (value);

esempio

function calcYears(years) { hoursinYear = 24 * 365; return (hoursinYear); }

TRUCCHI E ASTUZIE
Se si vuole abbandonare una funzione in uno specifico punto, invece di utilizzare complessi comandi condizionali, può bastare porre un comando return. Il programma si sposterà al comando immediatamente successivo alla chiamata della funzione.

Comandi condizionali: if..else

Il comando if..else è un'istruzione condizionale che permette di eseguire uno o più comandi JavaScript,

in base a una condizione definita dall'utente. If..else

sintassi

if (condition) { statement(s).. } [ else { statement(s).. } ]

esempio

<HTML> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> Questo è un esempio di documento condizionale </BODY> </HTML>

Noterete che il tag <BODY> manca nel documento (c'è una riga bianca al suo posto): questo è voluto, poichè è il programma JavaScript che lo dichiara, a seconda dell'ora in cui viene visualizzato il documento. Notare anche che questo codice JavaScript viene eseguito direttamente e non è contenuto

in una funzione: verrà eseguito in qualsiasi caso.

Il comando ?

JavaScript fornisce anche un comando di verifica di una condizione del tipo: se una certa espressione è vera fai questo, se è falsa fai quello. La differenza con il costrutto if..else si basa sul solo valore booleano che in questo caso può assumere la condizione. In pratica il costrutto ? può essere considerato una forma abbreviata di if..else, anche se non è molto utilizzato. comando ?

sintassi

? (expression) trueStatement(s) : falseStatement(s)

esempio

<HTML> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> Questo è un altro esempio di documento condizionale </BODY> </HTML>

Torna al menù principale - Prossima lezione

Nuova pagina 1

HOME PAGE - CONTATTI - COLLABORA - PRIVACY - HOSTING - DOMINI

© Copyright 2002-2011. Tutto il materiale che potete visionare in questo sito è dei rispettivi proprietari.

Tutorialpc non si assume responsabilità per eventuali errori degli autori.
Risoluzione consigliata 800x600 pixel