 |
CORSO DI JAVASCRIPTTerza Parte - Comandi JavaScript; ancora sui Commenti; Comandi di cicli e iterazioni: for, for..in, while; Syntax-highlighting; Interruzione e prosecuzione di un ciclo: Break e Continue; Le Funzioni - Creazione di funzioni e procedure definite dall'utente; Il comando Return; Comandi condizionali: if..else; Il comando ?;di Luciano GiustiniNota - La pagina si presta ottimamente ad 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. Il Corso è anche pubblicato con struttura frame su Web alla URL http://www.beta.it/online/Corsi/js-11 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 JavaScriptI 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">
<!--
function doThis() {
alert("Salve, e benvenuto al Corso JavaScript di BETA");
}
//-->
</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.
ancora sui CommentiLa volta scorsa abbiamo visto 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">
<!--
// Commento su una riga
/* Commento su più righe - Questa è la prima...
Questa è la seconda...
Questa è la terza riga di commento */
..codice..
//-->
</SCRIPT>
Comandi di cicli e iterazioni: for, for..in, whileJavaScript 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">
<!--
function exampleLoop() {
for (var size=5; size <= 10; size+=5)
document.write('<HR ALIGN=LEFT WIDTH=' + size + '%>');
}
//-->
</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">
<!--
function showProperties(obj, name) {
document.write('<TABLE BORDER=1><TR><TD ALIGN=MIDDLE>'+
name + '</TD></TR>');
for (i in obj)
document.writeln('<TD>' + i + '</TD>');
document.writeln('</TABLE>');
}
showProperties(document, 'document');
//-->
</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
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">
<!--
function showMoltiplication(number) {
var iLoop = 1;
document.write('<B>Tavola moltiplicativa per:</B> ' +
number + '</B><HR NOSHADE SIZE=1><PRE>');
while (iLoop <= 10) {
document.writeln(iLoop + 'x' + number +
'=' + (iLoop * number));
iLoop++;
}
document.writeln('</PRE>');
}
showMoltiplication(5);
//-->
</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 ContinueIl 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'utenteNella 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 :
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.
Il comando Return
sintassi return value;
esempio
function calcYears(years) {
hoursinYear = 24 * 365;
return (hoursinYear);
}
Comandi condizionali: if..elseIl comando if..else è un'istruzione condizionale che permette di eseguire uno o più comandi JavaScript, in base a una condizione definita dall'utente.
sintassi if (condition) { statement(s).. } [ else { statement(s).. } ] esempio
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var today = new date();
var minutes = today.getMinutes();
if (minutes >= 0 && minutes <=30)
document.write('<BODY TEXT="#FFFFFF" BGCOLOR="#000088">');
else
document.write('<BODY TEXT="#000088" BGCOLOR="#FFFFFF">');
//-->
</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.
sintassi ? (expression) trueStatement(s) : falseStatement(s) esempio
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var today = new date();
var secs = today.getSeconds();
var backColor = (secs >= 0 && secs <=30) ? 'FFFFFF' : 'C0C0C0';
document.write('<BODY TEXT="#000000" BGCOLOR="#' +
backColor + '">');
//-->
</SCRIPT>
Questo è un altro esempio di documento condizionale
</BODY>
</HTML>
Alla prossima!
Fine Terza 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
|
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.
|
