JavaScript: le variabili (var), le matrici (Array), i cicli (for)

       data di oggi:

Ricordiamo che lo scopo che ci siamo fissati in queste lezioni è quello di costruire la seguente pagina: esercizi (finale)

Attualmente la nostra pagina è ancora incompleta e si trova nella seguente situazione:Esercizi sui colori (ora)

Cioè la nostra pagina a prima vista sembra che un primo quiz funzioni; ma in realtà, poiché ancora il nostro programma è agli inizi, funziona ben poco.

Infatti non è presenta ancora nessuna istruzione che analizzi le risposte date dal nostro alunni

Oggi cominciamo ad entrare nel corpo del programma scritto in JavaScript.

Le variabili (istruzione: var)

Le variabili sono la prima cosa da apprendere in ogni linguaggio di programmazione.

Le variabili servono per conservare in memoria dei dati e utilizzarli quando è necessario

Una variabile viene identificata da un nome che scegliamo noi. E' buona norma scegliere un nome piccolo ma che identifichi il contenuto della variabile stessa.

Le variabili vanno prima dichiarate sia nel nome che nel tipo.

Vediamo ora cosa vogliamo fare.

Torniamo al nostro primo quiz. Le risposte che l'alunno può dare sono tre.

Ogni risposta che l'alunno dà va memorizzata in una variabile e poi va controllato se questa risposta è esatta, oppure no, ai fini di assegnarli un punto.

Abbiamo, detto, infatti, che spetta un punto per ogni risposta esatta.

Quindi da una parte dobbiamo mettere le soluzioni di tutti e dieci i quiz.

Ecco a questo servono le variabili. A memorizzare dei dati. Nel nostro caso scegliamo una variabile in cui mettiamo le soluzioni di tutti i quiz, sarebbero le risposte esatte.

Quindi questa variabile la chiamiamo col nome: esatto.

Potrei scrivere:

esatto ="2";

Che significa?

Significa che il programma mi deve assegnare un posto in memoria per una variabile che io ho chiamato: esatto e che il contenuto di questa variabile deve essere il numero: 2.

Perché ho dato il valore: 2 alla variabile?

Perché la risposta esatta alla prima domanda è proprio la seconda, cioè il colore è il rosso.

Se invece la risposta esatta fosse stata: il giallo, gli avrei assegnato il numero: 1; se invece fosse stata il verde gli avrei assegnato il numero: 3.

In pratica, arbitrariamente, ho stabilito una corrispondenza tra un numero e la sua posizione nella risposta data dal nostro alunno.

Notiamo nella scrittura un";", cioè un punto e virgola e poi siamo andati all'altro rigo con "Invio".

esatto ="2";

Il punto e virgola rappresenta la fine di ogni istruzione in JavaScript; cioè ogni istruzione deve finire con un punto e virgola e poi all'altro rigo.

Non è che l'interprete, cioè quella parte di Internet Explorer, che deve comprendere il programma ed eseguirlo, sia fiscale sul punto e virgola; a volte basta premere "Invio" e andare all'altro rigo. Comunque per noi lo prendiamo come una legge: ogni istruzione termina con un punto e virgola.

Quanti esatto ci servono?

Poiché i quiz sono dieci, ci servono dieci variabili con nome esatto.

Come faccio a distinguerle?

Possiamo fare in questo modo:

esatto[1] = "2";
esatto[2] = "1";
esatto[3] = "3";
esatto[4] = "1";
esatto[5] = "3";
esatto[6] = "2";
esatto[7] = "1";
esatto[8] = "1";
esatto[9] = "2";
esatto[10] = "1";

Vuol dire che il primo esatto, cioè esatto[1] deve avere il valore: 2; il secondo esatto, cioè esatto[2] deve avere il valore: 1; e così via. Dove il numero 1 che la prima risposta è quella esatta.

Sono importanti le parentesi quadre che si fanno premendo il tasto "Alt Gr" con un dito e il tasto "[" con l'altro dito, contemporaneamente.

Non lasciamo spazi, che è meglio; anche se gli spazi sono tollerabili.

Questi dieci valori che abbiamo costruito rappresentano una matrice ad una colonna e a dieci righe.

La matrice in inglese si dice: Array.

Completiamo ora in modo corretto la creazione della nostra matrice scrivendola in questo modo:

var esatto = new Array (11);
esatto[1] = "2";
esatto[2] = "1";
esatto[3] = "3";
esatto[4] = "1";
esatto[5] = "3";
esatto[6] = "2";
esatto[7] = "1";
esatto[8] = "1";
esatto[9] = "2";
esatto[10] = "1";

Spiegazione:

Istruzione significato
var esatto = new Array (11); La istruzione var serve a dichiarare una variale.

Esatto = è il nome di questa variabile.

new Array(11) = questa variabile è del tipo a matrice, i cui elementi sono 11 (undici) tra parentesi tonde

esatto[1] = "2"; all'elemento n° 1 della matrice di nome esatto, viene assegnato il valore: 2.
esatto[2] = "1"; all'elemento n° 2 della matrice di nome esatto, viene assegnato il valore: 1.
.... .....
...... ....
esatto[10] = "1"; all'elemento n° 10 della matrice di nome esatto, viene assegnato il valore: 1.

La dichiarazione delle variabili può essere fatta in qualunque punto del programma, ma prima del loro uso.

E' consigliabile mettere tutte le variabili all'inizio del programma, in modo che siamo sicuri di averle dichiarate prima dell'uso.

Ricordiamo che nella matrice esiste anche un primo elemento che ha numero zero.

Cioè esiste:

esatto[0] 

ma ora non lo consideriamo, in quanto non ci serve.

Inoltre il numero di elementi che scriviamo nella matrice, nel nostro caso 11, è un numero facoltativo, in quanto gli elementi consentiti sono molti di più.

 

Le istruzioni di commento.

Quando un programma comincia a diventare lungo, ci si può perdere, nel senso che si perde il filo, specie se si ritorna sulla stesso programma dopo un certo numero di anni.

Per cui è buona norma di programmazione mettere dei commenti, cioè del testo che non è una vera istruzione, ma quando l'interprete la trova, salta l'intera linea e va alla successiva.

Il commento serve solo a noi.

Una linea di commento la si indica con la doppia barra // .

Esempio

// qui inizia la dichiarazione delle variabili

è una linea di commento in quanto inizia con la doppia barra //.

A questo punto, il listato del nostro programma è il seguente:

<script language="JavaScript">
<!-- 

// qui inizia la dichiarazione delle variabili
var esatto = new Array (11);
esatto[1] = "2";
esatto[2] = "1";
esatto[3] = "3";
esatto[4] = "1";
esatto[5] = "3";
esatto[6] = "2";
esatto[7] = "1";
esatto[8] = "1";
esatto[9] = "2";
esatto[10] = "1";

// -->
</script>

A questo punto abbiamo impostato i risultati, cioè le risposte esatte.

In pratica abbiamo una tabella su cui possiamo modificare le risposte esatte, cambiando il valore assegnato ad ogni variabile di nome esatto.

Controllo di quiz già fatto.

Nell'eseguire i quiz è necessario che il programma tenga sotto controllo alcune manovre svolte dall'alunno; nel nostro caso occorre controllare che un certo quiz, esempio il primo quiz, sia svolto una sola volta.

Nel caso che l'alunno torni ad eseguirlo di nuovo, cosa che è lecita per l'alunno, il programma deve tenerne conto, e cioè non vede valutare di nuovo se la risposta è esatta e darli di nuovo il punteggio di un punto, o meglio la può valutare ma non darle il punteggio.

Bensì il punteggio deve essere assegnato solo la prima volta che esegue il quiz n° 1.

Invece la seconda volta che lo esegue, a meno che non abbia cancellato tutto, il programma deve fornire la valutazione della risposta, se è corretta o meno, ma non deve assegnare il punteggio, in quanto già assegnato.

Per fare questo occorre introdurre una variabile che ci indichi se l'alunno abbia già svolto il quiz.

Il nome da assegnare a questa variabile è arbitrario; noi le diamo il nome di: flag.

var flag = new Array (11);

Alla variabile flag le facciamo assumere due valori zero oppure uno.

Se 

flag[1] = 0

vuol dire che il quiz n° 1 non è stato ancora svolto dall'allievo e che quindi possiamo attribuirli il punteggio che gli spetta.

Se invece, 

flag[1] = 1

vuol dire che il primo quiz è stato già svolto, e quindi non dobbiamo attribuirli il punteggio, in quanto lo ha già avuto.

Inizialmente tutti i valori flag devono essere posti a zero, in quanto i quiz non sono ancora risolti.

Quindi potremmo scrivere:

var flag = new Array (11);
flag[1] = 0;
flag[2] = 0;
flag[3] = 0;
flag[4] = 0;
flag[5] = 0;
flag[6] = 0;
flag[7] = 0;
flag[8] = 0;
flag[9] = 0;
flag[10] = 0;

Innanzitutto cominciamo fare una differenza

tra flag[1] = 0  flag[1]="0"

Non è la stessa cosa.

E qui inizia un concetto un pò complesso.

In realtà quando scrivo: 0 (zero) da non confondere con la: o (lettera o) lo zero sembrerebbe che sia un numero, cioè un qualcosa che posso sommare ad un altro numero ed ottenere un risultato.

Ma questo non è sempre vero.

Per cui in JavaScript se scrivo "0", cioè metto lo zero, o un qualunque altro numero tra le virgolette, vuol dire che quello non è un numero da sommare, ma è come un carattere o una lettera dell'alfabeto; in termine tecnico si dice che è una stringa, cioè un carattere o insieme di caratteri, ma non un numero.

Se invece lo zero lo metto senza le virgolette, e cioè

flag[1] = 0

vuol dire che lo zero è un numero e non una stringa.

Stesso discorso per tutti i numeri.

Poi vi è un altro problema di semplicità di scrittura e di esecuzione del programma.

La scrittura del programma, cioè un maggior numero di istruzioni che mettiamo, comporta, oltre che una perdita di tempo per noi, anche una occupazione di memoria per il computer.

Più sono le istruzioni da eseguire, più il programma inizia a diventare lento.

Sia perché impiega più tempo per scaricarlo da internet e caricarlo sul computer e sia come numero di istruzioni da interpretare ed eseguire.

Quindi è buona norma di programmazione rendere la scrittura del programma, cioè il listato, il più semplice possibile, riducendo il numero di istruzioni.

Vediamo ora un modo per ridurre le istruzioni.

I cicli: for.

L'istruzione: for è una delle istruzioni molto usate in JavaScript.

Essa rappresenta un ciclo, cioè indica una cosa da fare ripetutamente per un certo numero di volte.

Proviamo a scriverla in questo modo e poi vediamo che significa.

for (i=1; i<11; i++) flag [i] = 0;

Vediamo prima la variabile di nome i.

La variabile i è usata in questo caso come variabile numerica, e non come stringa, cioè come variabile che può essere sommata o moltiplicata per altri numeri.

Nel nostro caso la variabile i funziona da contatore, cioè da uno che conta dei numeri, partendo dal numero 1, poi il 2, poi il 3 e così via fino al dieci.

Leggiamo infatti la seguente parte della istruzione:

(i=1; i<11; i++)

istruzione significato
i=1; la variabile i assume il valore numerico di 1.

Il segno = è come un comando, cioè prendi il numero 1 e mettilo nella variale di nome i.

E' un ordine; è una assegnazione.

Attenzione al punto e virgola!

i<11; Per i minore di 11.

Qui è il vero ciclo, cioè occorre che l'operazione, partendo dal numero uno, sia ripetuta un certo numero di volte fintanto che la variabile i raggiunge il valore di 10; infatti deve essere minore di undici, quindi 10.

Quindi l'operazione che vedremo dopo deve essere ripetuta per dieci volte, sempre la stessa.

i++ Il doppio ++ indica un aumento o incremento della variabile. Se l'incremento non è specificato vuol dire che si incrementa di 1.

L'insieme delle tre istruzioni

(i=1; i<11; i++)

racchiuse tra parentesi tonde comporta un procedimento di operazioni in questo ordine:

a) - i=1;

b) - poiché i deve essere incrementato di 1, come da istruzione i++, i assume il valore che aveva in precedenza aumentato di uno e cioè 

i = i+1=1+1=2

Quindi i è diventato 2.

c) - poiché i deve essere incrementato di 1 come da istruzione i++, i assume il valore che aveva in precedenza (2) aumentato di 1 e cioè 

i = i+1=2+1=3

Quindi i è diventato 3.

d) - poiché i deve essere incrementato di 1 come da istruzione i++, i assume il valore che aveva in precedenza (3) aumentato di uno e cioè 

i = i+1=3+1=4

 Quindi i è diventato 4.

Il ciclo si ripete finché i=10.

E cioè esattamente dieci volte.

Cosa deve fare il computer per dieci volte?

Deve ripetere per dieci volte la seguente istruzione:

flag[i] = 0

Infatti l'istruzione completa è:

for (i=1; i<11; i++) flag [i] = 0;

Il risultato che otteniamo è:

a) - poiché i=1 si ha flag[1] =0

b) - poiché i=2 si ha flag[2] =0

c) - poiché i=3 si ha flag[3] =0

e così via fino all'ultima:

l) - poiché i=10 si ha flag[10] =0

La conclusione che tiriamo questa

flag[1] = 0;
flag[2] = 0;
flag[3] = 0;
flag[4] = 0;
flag[5] = 0;
flag[6] = 0;
flag[7] = 0;
flag[8] = 0;
flag[9] = 0;
flag[10] = 0;
le dieci istruzioni di sinistra sono uguali all'unica istruzione di destra for (i=1; i<11; i++) flag [i] = 0;
 

a questo punto abbiamo fatto già due cose importanti, e cioè abbiamo stabilito le risposte esatte e abbiamo messo un controllo sull'alunno per vedere se il quiz è stato svolto oppure no.

Il nostro programma si trova ora in questa situazione:

<script language="JavaScript">
<!-- 

// qui inizia la dichiarazione delle variabili
var esatto = new Array (11);
esatto[1] = "2";
esatto[2] = "1";
esatto[3] = "3";
esatto[4] = "1";
esatto[5] = "3";
esatto[6] = "2";
esatto[7] = "1";
esatto[8] = "1";
esatto[9] = "2";
esatto[10] = "1";


//qui inizio il controllo del numero di volte eseguito e azzero la variabile di controllo flag
var flag = new Array (11);
for (i=1; i<11; i++) flag [i] = 0;


// -->
</script>

 

Anche per oggi basta. Il nostro programma di valutazione è ancora incompleto, quindi non può funzionare completamente.

Anche se la pagina viene caricata ed eseguita, non vediamo alcun effetto sulla pagina che resta questa: Esercizi sui colori (ora)

Indice del corso  Indice Scuola Elettrica - generico


Scuola Elettrica



 

Altre applicazioni


Mappa per tipo di scuola

 

Indice di tutte le pagine del sito


Guida per navigare


Richiesta informazioni


Scuola Elettrica