Viene qui proposta un percorso di esercitazioni di complessità crescente che costituisce la struttura del corso base di Javascript. Esso si articola nelle seguenti esercitazioni:
I commenti utilizzabili in javascript sono due:
<html>
<head>
<title> Javascritpt 01 - Commenti </title>
</head>
<body>
<script type="text/javascript">
<!--
// questo è un commento su una riga (si chiude andando a capo)
/* questo commento invece
continua su più righe */
//-->
</script>
</body>
</html>
 HTML |
PDF |
Per scrivere codice html nella pagina, utilizziamo il metodo write dell'oggetto document
NB
<html>
<head>
<title> Javascritpt 02 - metodo write </title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('<p> Sono uno script che scrive un paragrafo nella pagina con il metodo write di document </p>');
document.write('<p> Sono uno script <br /> che scrive nella pagina <br /> con il metodo write di document </p>');
//-->
</script>
</body>
</html>
| HTML |
PDF |
Per assegnare un valore ad una variabile (non c'è bisogno nè di dichiararla, nè di inizializzarla) si deve usare l'operatore di assegnazione = secondo la seguente sintassi:
<html>
<head>
<title> Javascritpt 03 - variabili e assegnazione </title>
</head>
<body>
<script type="text/javascript">
<!--
stringa1='<p> Sono una stringa di testo che produce un paragrafo nella pagina html </p>'
document.write(stringa1);
//-->
</script>
</body>
</html>
| HTML |
PDF |
L'operatore preposto alla concatenazione del testo è + lo stesso è pure l'operatore aritmetico che produce la somma. Nei casi di operatori omogenei, il risultato è il seguente:
Nei casi di operatori ibridi il risultato è invece sempre di tipo stringa, ossia quando si prova a sommare numeri con una stringa, i numeri vengono automaticamente considerati come stringa e si produce la loro concatenazione:
<html>
<head>
<title> Javascritpt 04 - operatore più </title>
</head>
<body>
<script type="text/javascript">
<!--
document.write(1+2);document.write('<br />')
document.write('a'+'b');document.write('<br />')
document.write(1+'a');document.write('<br />')
document.write('a'+1);document.write('<br />')
document.write(1+'2');document.write('<br />')
document.write('1'+2);document.write('<br />')
//-->
</script>
</body>
</html>
| HTML |
PDF |
Uno script può anche caricarsi da un file esterno (un file di testo con estensione js) tramite l'attributo src del tag script
<html>
<head>
<title> Javascritpt 05 - script esterni </title>
</head>
<body>
<script type="text/javascript" src="05.js"> </script>
</body>
</html>
Questo è il contenuto del file 05.js richiamato dalla pagina:
stringa = 'Sono uno script esterno'
document.write('<p>' + stringa + '</p>')
| HTML |
PDF |
Utilzzando il metodo alert dell'oggetto window si fa apparire una finestra di avvertimento che presenta all'utente il messaggio voluto. La sintassi pertanto è:
<html>
<head>
<title> Javascritpt 06 - metodo alert </title>
</head>
<body>
<script type="text/javascript">
<!--
window.alert('Benvenuto nel sito');
//-->
</script>
</body>
</html>
| HTML |
PDF |
Il metodo confirm di windows propone all'utente una finestra di conferma con i pulstanti ok e annulla grazie alla quale egli può operare scelte del tipo si/no, infatti questo metodo restituisce vero o falso. La sintassi sara:
<html>
<head>
<title> Javascritpt 07 - metodo confirm </title>
</head>
<body>
<script type="text/javascript">
<!--
scelta = window.confirm('quesito');
document.write(scelta);
//-->
</script>
</body>
</html>
NB
Senza assegnare alla variabile scelta quanto restituito dal metodo confirm, lo si sarebbe potuto direttamente porre come argomento del metodo write, così:
| HTML |
PDF |
Per una interazione maggiore con l'utente e perché possa immettere valori, utilizzeremo il metodo prompt di window. Esso consta di due argomenti di tipo stringa (separati da una virgola): il primo è il quesito da porre all'utente ed il secondo è l'eventuale risposta predefinita. La sintassi è quindi:
NB
Il metodo prompt di window, consente all'utente di rispondere ad un quesito tramite una casella di testo, questo metodo, restituisce sempre una stringa. nel caso si voglia convertire in numero quanto digitato dall'utente ci si deve avvalere di funzioni che convertono una stringa in numero:
la prima converte una stringa in numero intero, mentre la seconda in numero reale
ATTENZIONE
Se si prova a convertire in numero una stringa che non lo è, entrambe le funzioni restituiscono la costante NaN. La costante NaN sta per "not a number"
<html>
<head>
<title> Javascritpt 08 - metodo prompt (parseInt parseFloat NaN)</title>
</head>
<body>
<script type="text/javascript">
<!--
nome = window.prompt('Immettere il proprio nome:','');
età = window.prompt('Immettere il propria età:','17');
document.write(nome + ' dice di avere ' + età + ' anni');
//-->
</script>
</body>
</html>
| HTML |
PDF |
Per operare una selezione durante l'esecuzione del programma, si usa il costrutto if. L'evenienza più semplice è quella di una istruzione che deve essere eseguita soltanto se una condizione è verificata. La sintassi sarà:
Il costrutto if esegue l'istruzione soltanto se la condzione è verificata, ovvero se la condizione (normalmente si tratta di un confronto) ha restituito il valore booleano vero (true). Inoltre, esso esige un'unica istruzione da eseguire, ma visto che queste potrebbero essere più di una, per raggrupparle in un unico blocco, si dovranno usare le parentesi graffe, così:
Ritengo molto più chiara (anche nel caso di singole istruzioni) la forma:
if (condizione) {
istruzione 1;
istruzione 2;
...;
istruzione n;
}
Dovendo verificare delle condizioni, cioè eseguire dei test i quali possono restituire vero o falso, ci si avvarrà degli operatori di confronto:
| operatori di confronto | |
|---|---|
| operatore | significato |
> |
maggiore |
< |
minore |
>= |
maggiore o uguale |
<= |
minore o uguale |
== |
uguale |
!= |
diverso |
<html>
<head>
<title> Javascritpt 09 - if </title>
</head>
<body>
<script type="text/javascript">
<!--
voto=window.prompt('Immettere il proprio voto in informatica:','')
voto=parseInt(voto);
if (voto < 6) {
window.alert('ATTENZIONE!\nNon hai raggiunto la sufficienza!');
}
//-->
</script>
</body>
</html>
| HTML |
PDF |
Il costrutto if, verifica una condizione e se il test è stato positivo (la condizione è stata verificata) esegue una istruzione; se si vuole che ne venga eseguita una seconda quando il test è stato negativo (la condizione non è stata verificata), si utilizza il costrutto if-else secondo questa sintassi:
Come sopra, volendo eseguire più di una istruzione sia nel caso di condizione verificata (if), sia nel caso di condizione non verificata (else), le si devono raggruppare tra parentesi graffe, così:
if (condizione) {
istruzione 1 se vero;
istruzione 2 se vero;
...;
istruzione n se vero;
} else {
istruzione 1 se falso;
istruzione 2 se falso;
...;
istruzione n se falso;
}
<html>
<head>
<title> Javascritpt 10 - if-else </title>
</head>
<body>
<script type="text/javascript">
<!--
età=window.prompt('Immettere la propria età:','')
età=parseInt(età);
if (età < 18) {
window.alert('minorenne');
} else {
window.alert('maggiorenne');
}
//-->
</script>
</body>
</html>
| HTML |
PDF |
L'operatore ternario altro non è che una forma contratta del costrutto if-else. la sintassi è:
Il programma precedente, con l'uso dell'operatore ternario, diventa:
<html>
<head>
<title> Javascritpt 11 - operatore ternario </title>
</head>
<body>
<script type="text/javascript">
<!--
età=window.prompt('Immettere la propria età:','')
età=parseInt(età);
età < 18 ? window.alert('minorenne') : window.alert('maggiorenne');
//-->
</script>
</body>
</html>
| HTML |
PDF |
Grazie al costrutto if-else (o l'operatore ternario) è possibile far sì che il programma si comporti in due modi a seconda che una condizione sia verificata o meno; quando invece le condizioni da verificare fossero più d'una, quindi le possibilità più di due, si utilizza il costrutto if-else if- else if-...-else:
if (condizione 1) {
istruzioni se vero 1; break;
} else if (condizione 2) {
istruzioni se vero 2; break;
} else if (condizione n) {
istruzioni se vero n; break;
} else {
istruzioni se nessuna condizione vera;
}
Si verificano quindi n condizioni per le quali si devono eseguire le istruzioni indicate, sino a concludere con un else che specifica le istruzioni da eseguire nel caso che nessuna delle condizioni sia verificata.
Il programma precedente, ad esempio, restituirebbe l'alert maggiorenne anche nel caso che l'utente abbia digitato delle lettere o premuto annulla, questo perché un non-numero (NaN), non è minore di 18; lo si può migliorare come in questo altro esempio, verificando due condizioni che, nel caso la variabile età non sia un numero, sarebbero entrambe non verificate (i confonti restituirebbero entrambi falso):
<html>
<head>
<title> Javascritpt 12 - if-else if-else </title>
</head>
<body>
<script type="text/javascript">
<!--
età=window.prompt('Immettere la propria età:','')
età=parseInt(età);
if (età < 18) {
window.alert('minorenne');
} else if (età >= 18) {
window.alert('maggiorenne');
} else {
window.alert('età non valida');
}
//-->
</script>
</body>
</html>
| HTML |
PDF |
Come visto, javascript offre tre diversi tipi di finestre incorporate:
Una banale esercitazione che le contempli tutte potrebbe essere la seguente:
<html>
<head>
<title> Javascript 13 - finestre incorporate </title>
</head>
<body>
<script type="text/javascript">
<!--
nome = window.prompt('Inserire il proprio nome','qui');
conferma = window.confirm('Sei sicuro di chiamarti ' + nome + '?');
if (conferma) {
window.alert('Benvenuto/a ' + nome + '!!!');
} else {
window.alert('Non sai neanche come ti chiami!');
}
/*
alternativa tramite l'operatore ternario
conferma ? window.alert('Benvenuto/a ' + nome + '!!!') : window.alert('Non sai neanche come ti chiami!');
*/
//-->
</script>
</body>
</html>
| HTML |
PDF |
Per sperimentare l'uso del costrutto if-else if-else, realizziamo un programma che associ al colore del semaforo il suo significato:
<html>
<head>
<title> Javascritpt 14 - semaforo </title>
</head>
<body>
<script type="text/javascript">
<!--
col=window.prompt('Digitare un colore del semaforo:','')
if (col == 'rosso') {
window.alert('il colore rosso significa stop');
} else if (col == 'arancio') {
window.alert('il colore arancio significa attenzione');
} else if (col == 'verde') {
window.alert('il colore verde significa via');
} else {
window.alert(col + ' non è un colore del semaforo');
}
//-->
</script>
</body>
</html>
| HTML |
PDF |
Un costrutto alternativo all'uso di if-else if-else, potrebbe essere switch. Nel caso si debbabo usare operatori di confronto diversi da ==, bisognerebbe usare il costrutto if-else if-else, ma quando si debbano verificare soltanto uguaglianze, l'uso del costrutto switch offre snellezza al codice.
NB
Il costrutto switch continua a verificare le condizioni anche quando una abbia dato esito positivo, pertanto, ogni istruzione va fatta seguire da break. Essa è l'istruzione di stop che si usa per interrompere anticipatamente un ciclo.
La sintassi è questa:
switch (variabile) {
case (valore 1) : istruzione se variabile==valore 1; break;
case (valore 2) : istruzione se variabile==valore 2; break;
case (valore n) : istruzione se variabile==valore n; break;
default: istruzione se nessun confronto con esito positivo;
}
L'esercitazione per provare il costrutto switch, chiede all'utente il proprio voto, quindi, una volta convertita la stringa in numero intero, lo associa ad un giudizio, sceglie ovvero una risposta in funzione del voto. Infine scrive nella pagina il risultato del confronto ossia il giudizio associato al voto.
NB
Senza usare la funzione parseInt, nei case dello switch si sarebbero dovuto porre i voti come stringa, cioè tra virgolette (case '0' : ... oppure case "0" : ...). Si noti pure che il medesimo risultato lo si sarebbe raggiunto utilizzando un ciclo del tipo if-else if-else.
<html>
<head>
<title> Javascript 15 - switch </title>
</head>
<script type="text/javascript">
<!--
//richiesta del voto all'utente
voto=parseInt(window.prompt('Digitare il proprio voto in Informatica',''));
//scelta del giudizio corrispondente al voto
switch (voto) {
case 1 : risp='hai un profitto inqualificabile';break;
case 2 : risp='hai un profitto pessimo';break;
case 3 : risp='hai un profitto gravemente insufficiente';break;
case 4 : risp='hai un profitto gravemente insufficiente';break;
case 5 : risp='hai un profitto insufficiente';break;
case 6 : risp='hai un profitto sufficiente';break;
case 7 : risp='hai un profitto discreto';break;
case 8 : risp='hai un profitto buono';break;
case 9 : risp='hai un profitto ottimale';break;
case 10 : risp='hai un profitto eccellente';break;
default : risp='non lo si è scritto bene';
}
//risultato
document.write('Visto che il tuo voto in informatica è <b>' + voto + '</b> allora, <b>' + risp + '</b>!');
//-->
</script>
<body>
</body>
</html>
| HTML |
PDF |
Dovendo verificare diverse condizioni, quindi più test che possono restituire vero o falso, sia per i costrutti if, sia per i cilci in genere, si utilizzano gli operatori logici. Questi sono:
| operatori logici | |
|---|---|
| operatore | significato |
&& |
AND |
|| |
OR |
! |
NOT |
le corrispondenti tabelle di verità sono:
|
|
|
||||||||||||||||||||||||||||||||||||||||||||
Negli esempi precedenti, veniva richiesta l'età all'utente senza verificare che egli avesse immesso un numero; come detto sopra, andando a convertire la stringa in numero con le funzioni parseInt o parseFloat, queste restituiscono la costante NaN (not a number) nel caso la stringa non sia convertibile in numero, quindi sia nel caso l'utente non abbia digitato niente, sia nel caso abbia digitato lettere, sia nel caso abbia premuto il pulsante annulla (in questo ultimo caso, il metodo window.prompt() avrebbe restituito falso).
Con la funzione isNaN(valore), si può verificare questa evenienza, infatti essa restituisce vero se valore è NaN e falso in caso contrario.
Volendo verificare le seguenti condizioni:
Senza gli operatori logici, si dovrebbero effettuare tre test, così:
if (isNaN(età)) {
window.alert('errore: età non valida');
} else if (età < 0) {
window.alert('errore: età non valida');
} else if (età > 120) {
window.alert('errore: età non valida');
} else {
document.write('complimenti, lei può vantare ' + età + ' anni');
}
Grazie invece agli operatori logici, ne basta uno:
<html>
<head>
<title> Javascritpt 16 - operatori logici </title>
</head>
<body>
<script type="text/javascript">
<!--
età=window.prompt('Immettere la propria età:','');
età=parseInt(età);
if (isNaN(età) || età < 0 || età > 120) {
window.alert('errore: età non valida');
} else {
document.write('compliementi, lei può vantare ' + età + ' anni');
}
//-->
</script>
</body>
</html>
NB
Non è casuale l'ordine dei confronti effettuati, infatti le condizioni vengono verificate nell'ordine in cui si sono scritte. Il programma esegue il primo confronto, se questo ha dato esito negativo, continua, eseguendo il confronto successivo, altrimenti esegue l'istruizone ed esce dal costrutto if.
Ne deriva che, sia usando il costrutto if-else if-else, sia usando gli operatori logici, bisogna verificare che la variabile età sia un numero prima di verificare che sia un numero positivo.
| HTML |
PDF |
Volendo che il nostro programma funzioni correttamente, qualuque sia il comportamento dell'utente, converrà usare dei costrutti nidificati, ovvero, inserire i costrutti (per ora soltanto costrutti if-else) all'interno di altri.
<html>
<head>
<title> Javascritpt 17 - costrutti nidificati </title>
</head>
<body>
<script type="text/javascript">
<!--
età=window.prompt('Immettere la propria età:','');
età=parseInt(età);
/*
converrebbe porre il metodo prompt direttamente come
argomento della funzione parseInt così:
età=parseInt(window.prompt('Immettere la propria età:',''));
*/
if (!isNaN(età)) {
if (età < 0 || età > 120) {
window.alert('errore: età non valida');
} else {
document.write('compliementi, lei può vantare ' + età + ' anni');
}
} else {
window.alert('errore: valore non numerico');
}
//-->
</script>
</body>
</html>
| HTML |
PDF |
Javascript mette a disposizione del programmatore i seguenti operatori aritmetici:
| operatori aritmetici | |
|---|---|
| operatore | operazione |
+ |
addizione |
- |
sottrazione |
* |
moltiplicazione |
/ |
divisione |
% |
resto della divisione |
++ |
incremento |
-- |
decremento |
NB
L'operatore di incremento ++, produce un incremento di uno, quindi, l'istruzione a++ equivale ad a=a+1. Lo stesso dicasi per l'operatore di decremento (a-- equivale ad a=a-1).
Questa semplice esercitazione mostra il loro uso:
<html>
<head>
<title> Javascritpt 18 - operatori aritmetici </title>
</head>
<body>
<script type="text/javascript">
<!--
a = 5;
b = 2;
document.write('<h3> a = ' + a + ' b = ' + b + '</h3>');
ris = a + b;
document.write('a + b = ' + ris + '<br />');
ris = a - b;
document.write('a - b = ' + ris + '<br />');
ris = a * b;
document.write('a * b = ' + ris + '<br />');
ris = a / b;
document.write('a / b = ' + ris + '<br />');
ris = a % b;
document.write('a % b = ' + ris + '<br />');
a++;
document.write('a++ = ' + a + '<br />');
a--;
document.write('a-- = ' + a + '<br />');
//-->
</script>
</body>
</html>
NB
Si noti che nell'uso del metodo write(), si sono concatenate stringhe di testo come '<h3> a = ' con variabili di tipo numerico come a e b, senza bisogno di convertirle prima in stringhe. Il metodo write() provvede automaticamente alla loro conversione.
| HTML |
PDF |
Un capitolo essenziale nella programmazione è costituito dai cilci, cioè quei costrutti che permettono di ripetere ciclicamente una o più istruzioni, sinché una certa condizione è verificata. Il primo ciclo da trattare è il ciclo while (in italiano mentre, finché, sinché ). Questo esegue le istruzioni in esso contenute sinchè (while) una condizione è vera. La sintassi del ciclo while è:
while (condizione){
istruzione 1;
istruzione 2;
...
istruzione n;
}
NB
Visto che la condizione deve essere verificata perché il cilclo inizi, se la condizione è in relazione con il valore di una variabile, bisogna che questa sia già dichiarata prima del ciclo.
Un esempio dell'uso del ciclo while potrebbe essere quello di una pagina protetta da password. In questo caso, si è inizializzata una variabile per la password come stringa nulla (pw = ''), quindi si ripete la richiesta di immettere la password sinché (while) questa è diversa da quella prestabilita.
<html>
<head>
<title> Javascritpt 19 - while </title>
</head>
<body>
<script type="text/javascript">
<!--
pw = '';
while (pw != 'uccellani.it') {
pw=window.prompt('Password','')
}
document.write('<h1>Benarrivato nella pagina protetta</h1>')
//-->
</script>
</body>
</html>
| HTML |
PDF |
Si potrebbe usare il ciclo while quando ci si avvale di una variabile che funge da contatore. In questo caso la si inizializza prima del ciclo (non c'è bisogno di dichiaralrla prima di inizializzarla) e l'ultima istruzione del ciclo dovrà essere l'incremento del contatore (che se dimenticato non consente al ciclo di terminare).
NB
Sarebbe più proprio utilizzare un ciclo for.
Nell'uso del ciclo while avvalendosi di un contatore, avremo:
inizializzazione contatore;
while (condizione){
istruzione 1;
istruzione 2;
...
istruzione n;
incremento contatore;
}
Un esempio è la seguente pagina che scrive nel documento i valori interi da 0 a 9:
<html>
<head>
<title> Javascritpt 20 - while e contatore </title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('pre-ciclo' + '<br />');
c=0; //inizializzazione contatore
while (c < 10) {
document.write( c + '<br />');
c++; //incremento contatore
}
document.write('post-ciclo');
//-->
</script>
</body>
</html>
| HTML |
PDF |
Grazie all'uso del ciclo for, rispetto al ciclo while e contatore, è possibile sia inizializzare il contatore, sia verificare la condizione , sia incrementare il contatore in sede di apertura del ciclo. La sua sintassi è:
for (inizializzazione contatore ; condizione ; incremento contatore) {
istruzione 1;
istruzione 2;
...
istruzione n;
}
La pagina precedente, usando un ciclo for risulterebbe così:
<html>
<head>
<title> Javascritpt 21 - for </title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('pre-ciclo' + '<br />');
for (c=0 ; c < 10 ; c++) {
document.write( c + '<br />');
}
document.write('post-ciclo');
//-->
</script>
</body>
</html>
| HTML |
PDF |
