I contatori

Lo scorso anno abbiamo visto alcune istruzioni fondamentali del linguaggio di programmazione Javascript. Ricordiamo che l'abbiamo sempre unito ad alcune istruzioni html che ci servono per poter scrivere del testo sulla pagina e di poter leggere quello che l'utente del programma scrive nelle caselle di testo.

Oggi vediamo l'uso dei contatori. Il contatore è una variabile javascript che serve per contare quante volte l'utente compie una certa operazione. La prima cosa da fare è dare un nome al contatore; lo possiamo chiamare per esempio: contatore

Se scrivo:

contatore =0;

vuol dire che nella variabile che io ho chiamato contatore è memorizzato il numero 0 (zero) ; questo valore 0 mi resta sempre uguale, fin quando non viene cambiato.

Se scrivo:

contatore = contatore + 1;

vuol dire che il valore da memorizzare nella variabile contatore è quello che esisteva prima con l'aggiunta di 1.

Poiché prima nel contatore vi era zero; ora se aggiungo 1 il valore memorizzato nel contatore è:

0+1=1.

Se scrivo di nuovo:

contatore = contatore + 1;

vuol dire che il valore da memorizzare nella variabile contatore è quello che esisteva prima con l'aggiunta di 1.

Poiché prima nel contatore vi era 1; ora se aggiungo 1 il valore memorizzato nel contatore è:

1+1=2.

In conclusione un contatore mi serve per contare quante volte l'utente esegue una certa operazione. Vediamo ora come usare un contatore per dare un voto alla persona che risolve un esercizio.

Esercizio

Scrivere un programma di italiano che riconosca l'articolo determinativo esatto in tre periodi scelti a piacere. Prevedere nel programma un voto espresso in decimi.

Soluzione

Procediamo con ordine.

Intanto vediamo come si mettono i voti; anche se non siamo insegnanti, riusciamo a capire che i voti si possono mettere in molti modi. Spesso si usa mettere un giudizio su di un compito; per esempio:

Bene.

Oppure un giudizio del tipo:

sufficiente, discreto, buono, ottimo.

Un altro modo di mettere un voto è quello di mettere un numero che va da 1 a 10; dove:

1 = l'utente del programma non ha risposto a nessuna domanda;

10 = vuol dire che l'utente del programma ha risposto bene a tutte le domande previste.

Se le domande fossero 10, potremmo usare una istruzione del tipo:

contatore = contatore + 1;

Se mettiamo questa istruzione nel posto giusto, per ogni risposta esatta il contatore aumenta di 1; e se le risposte esatte sono 10, alla fine il contatore arriva a 10.

Nel nostro esercizio le domande sono 3 e quindi le risposte saranno 3.

Tuttavia possiamo sempre utilizzare il contatore in questo modo.

Dividiamo il numero 10 per 3 ed otteniamo:

10:3 = 10/3 = 3,333333 periodico.

Scriviamo l'istruzione javascript in questo modo:

contatore = contatore + 3.33333;

In questo modo ad ogni risposta esatta il contatore aumenta di valore; con 1 risposta esatta:

contatore = 3.3333;

con due risposte esatte:

contatore = 3.333 + 3.333 = 6.6666

Con tre risposte esatte:

contatore = 3.3333 + 3.3333 + 3.3333 = 9.999

Non è proprio 10 ma siamo lì vicino.

Notiamo che in italiano usiamo la virgola per i decimali; quindi in italiano scriviamo:

3,333 con la virgola decimale;

in javascript, invece, dobbiamo usare il punto; quindi:

3.333

come nella calcolatrice.

Detto questo passiamo alla scrittura del programma in javascript.

Che cosa ci serve?

Intanto ci serve una casella di testo in cui l'utente del programma scriverà l'articolo determinativo

La casella di testo la possiamo costruire facilmente con la seguente istruzione:

<input type="text" name="prima" onkeyup="verificaprima()"> 

La casella di testo ha nome: "prima"; quando l'utente scrive un articolo, con la funzione verificaprima() che costruiremo dopo, controlleremo che l'articolo scritto sia quello giusto.

Si tratta ora di scrivere la funzione verificaprima().

Intanto scegliamo un periodo a piacere; supponiamo che sia il seguente:

Il pane con la nutella è molto saporito.

Qui ci sono due articoli: il prima di pane e la prima di nutella. Decidiamo di togliere Il di pane e di mettere al suo posto una casella di testo.

  pane con la nutella è molto saporito.

In tal modo l'utente del programma sarà costretto a scrivere l'articolo Il nel posto giusto. La istruzione html mista javascript diventa:

<input type="text" name="prima" onkeyup="verificaprima()" size="8">  pane con la nutella è molto saporito.<br>

Ci serve una istruzione che controlli che l'articolo scritto sia quello giusto; questa è appunto l'istruzione if. La scriviamo in questo modo:

a=document.all.prima.value;

if (a=="Il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è " + contatore);

};

Nella variabile a è presente il testo scritto dall'utente. Supponiamo che l'utente abbia scritto: Il. Che cosa succederà quando inizia la funzione verificaprima()?

Con:

a=document.all.prima.value;

in a troviamo il valore scritto dall'utente; quindi:

a="Il"

Ora potremmo usare una if del genere, come abbiamo sempre fatto:

if (a=="Il") alert ("Risposta esatta!");

Tuttavia esiste il problema del punteggio, cioè del voto che dobbiamo mettere. Infatti visto che l'utente ha risposto bene alla prima domanda gli spettano 3.333 punti; quindi non basta che gli diciamo che la rispota è esatta; ma dobbiamo anche incrementare il contatore e comunicare il voto all'utente del programma.

Siccome la if deve fare due cose non possiamo mettere le due cose da fare su di un unico rigo, ma dobbiamo utilizzare delle parentesi graffe. Per cui la if la scriviamo in questo modo:

if (a=="Il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

Notiamo la parentesi graffa aperta e la parentesi graffa chiusa, seguita dal punto e virgola. Questo vuol dire che se l'utente ha scritto il valore giusto:

if (a=="Il") 

Il computer mi deve eseguire tutte le istruzioni racchiuse tra le parentesi graffe, e precisamente con:

contatore=contatore+3.33333;

mi aumenta il contatore di 3.333 in modo da dare il voto, in quanto l'utente ha risposto bene; inoltre con una istruzione alert comunichiamo anche il voto. 

Infatti:

alert ("Risposta esatta! Il tuo voto è " + contatore);

vuol dire scrivi che la risposta è esatta; poi vi è un segno + che vuol dire aggiungi; seguito da

contatore

Poiché nel contatore vi è il punteggio, il computer scrive le parole:

Risposta esatta! Il tuo voto è

seguite dal valore contenuto nella variabile contatore. In definitiva il testo scritto sarà:

Risposta esatta! Il tuo voto è 3.333

se ha risposto bene ad una domanda.

Se, invece, ha risposto bene a 2 domande il testo scritto sarà:

Risposta esatta! Il tuo voto è 6.6666

Se, invece, ha risposto bene a 3 domande il testo scritto sarà:

Risposta esatta! Il tuo voto è 9.9999

La funzione verificaprima() completa è: 

function verificaprima() {

a=document.all.prima.value;

if (a=="Il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

}

Notiamo che la parentesi graffa chiusa della if va seguita da un punto e virgola; invece la parentesi graffa della funzione non va seguita dal punto e virgola.

2° periodo

Intanto scegliamo una frase a piacere; supponiamo che sia la seguente:

Oggi ho indossato il maglione rosso.

Decidiamo di togliere il e di mettere al suo posto una casella di testo.

Oggi ho indossato   maglione rosso.

In tal modo l'utente del programma sarà costretto a scrivere l'articolo il nel posto giusto. La istruzione html mista javascript diventa:

Oggi ho indossato <input type="text" name="seconda" onkeyup="verificaseconda()" size="8"> maglione rosso.<br>

Ci serve una istruzione che controlli che l'articolo scritto sia quello giusto; questa è appunto l'istruzione if. La scriviamo in questo modo:

a=document.all.seconda.value;

if (a=="il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

Nella variabile a è presente il testo scritto dall'utente. Supponiamo che l'utente abbia scritto: il. Che cosa succederà quando inizia la funzione verificaseconda()?

Con:

a=document.all.seconda.value;

in a troviamo il valore scritto dall'utente; quindi:

a="il"

Ora controlliamo con la if:

if (a=="il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

che incrementa il contatore di 3.333 e mi scrive il risultato con il voto.

La funzione verificaseconda() completa è: 

function verificaseconda() {

a=document.all.seconda.value;

if (a=="il") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

}

3° periodo

Procediamo nello stesso modo dei periodi precedenti.

Scegliamo una frase a piacere:

Ho pulito le mie scarpe con la spazzola nera.

Togliamo: la prima di spazzola e di mettere al suo posto una casella di testo.

Ho pulito le mie scarpe con spazzola nera.

In tal modo l'utente del programma sarà costretto a scrivere l'articolo la nel posto giusto. La istruzione html mista javascript diventa:

Ho pulito le mie scarpe con <input type="text" name="terza" onkeyup="verificaterza()" size="8"> spazzola nera.<br>

La funzione verificaterza() completa è: 

function verificaterza() {

a=document.all.terza.value;

if (a=="la") {

contatore=contatore+3.33333;

alert ("Risposta esatta! Il tuo voto è "+contatore);

};

}

Il listato completo del programma è:

Scriviamolo con Word e salviamolo con il nome dip primo.html e proviamolo con Internet Explorer per vedere se funziona. Dovremmo vedere:

Esercizio da svolgere n. 1

Scrivere un programma di italiano che riconosca l'articolo determinativo e dia il voto nei tre periodi seguenti. 

1 - .. televisore sta sempre acceso.

2 - Mia sorella sta con .. telefonino in mano.

3 - Mia madre ha acceso .. radio.

Esercizio da svolgere n. 2

Scrivere un programma di italiano che riconosca l'articolo determinativo e dia il voto nei tre periodi seguenti. 

1 - Ho lavato .. mia maglia di lana.

2 - Ho preso .. mio quaderno colorato.

3 - .. teconologia ha fatto molti progressi.

Esercizio da svolgere n. 3

Scrivere un programma di italiano che riconosca l'articolo determinativo e dia il voto nei tre periodi seguenti. 

1 - .. libri servono per studiare.

2 - .. gatta sta sempre con .. gomitolo tra le zampe.

3 - .. zinco è un minerale poco costoso.

------

Corso Javascript per scuola media

Dizionario Javascript e html

prof. Pietro De Paolis

©  ING. PIETRO DE PAOLIS - E' consentita la diffusione citando l'autore e il dominio: - Scuola Elettrica - www.scuolaelettrica.it

Scuola Elettrica

Altre applicazioni

Mappa per tipo di scuola

Indice di tutte le pagine del sito

Guida per navigare

Richiesta informazioni