La funzione

struttura di un programma

In una  lezione precedente abbiamo detto che un programma è un insieme di istruzioni che vengono eseguite da un computer per ottenere un certo risultato. Quando un programma è semplice, bastano poche istruzioni per scriverlo; quando un programma diventa più complesso, il numero di istruzioni aumenta; serve, innanzitutto, una buona organizzzazione del lavoro di programmazione, altrimenti ci si perde e non si conclude nulla; serve cioè mettere ordine nelle cose che facciamo.

La funzione

La funzione è un piccolo programma contenuto nel programma principale. In pratica, se abbiamo un certo numero di operazioni che si ripetono ogni volta tali e quali, le raggruppiamo insieme e gli diamo il nome di funzione.

Esercizio

Fare la somma di due numeri e fornire il risultato con l'istruzione alert.

Visto che l'operazione della somma è una operazione frequente in matematica è opportuno preparare una funzione, cioè un insieme di istruzioni che fanno la somma di due numeri. Questa funzione la chiamiamo somma e la possiamo costruire in questo modo:

function somma() {

c=a+b;

alert ("La somma è " + c);

}

Vediamo gli elementi fondamentali di una funzione in javascript. 

function è un parola obbligatoria e va scritta all'inizio della funzione; essa indica che da quel punto in poi tutte le istruzioni che si trovano nei righi successivi fanno parte della funzione, fino al segnale che la funzione finisce, cioè le parentesi graffe }.

somma() è il nome che noi abbiamo dato alla nostra funzione; se fosse una funzione per fare la differenza avremmo scritto;

differenza()

Notiamo nel nome della funzione le due parentesi tonde aperte e chiuse; esse sono obbligatorie; a volte all'interno delle parentesi tonde ci possiamo mettere un numero o una lettera; anche se non mettiamo niente nelle parentesitonde, esse le dobbiamo comunque mettere, una aperta e una chiusa.

{ parentesi graffa aperta; è obbligatoria e indica che da quel punto in poi si trovano le vere istruzioni che fanno parte della funzione, fino  al segnale che la funzione finisce, cioè le parentesi graffe chiuse }.

c=a+b;  è una istruzione che fa parte della funzione in quanto si trova all'interno delle parentesi graffe.

alert ("La somma è " + c);  è una istruzione che fa parte della funzione in quanto si trova all'interno delle parentesi graffe.

} parentesi graffa chiusa; è obbligatoria e indica che in questo punto finisce la funzione. Dopo la parentesi graffa chiusa non bisogna mettere il punto e virgola, come nelle altre istruzioni.

Per scrivere una parentesi graffa vi è una tecnica particolare, in quanto essa non si trova nella tastiera. Serve usare il tastierino numerico, quello con le sole cifre decimali, posto a destra sulla stessa tastiera.

Di tasti "Alt" ce ne sono due, dobbiamo usare quello a sinistra. Con la mano sinistra premiamo il tast "Alt" e lo teniamo sempre premuto, senza mai lasciarlo. Con la mano destra scriviamo il numero 123 con il tastierino numerico; non dobbiamo utilizzare i numeri che si trovano sulle lettere, ma solo i numeri del tastierino numerico, dopo aver controllato che la spia del tastierino sia accesa. Quindi con la sinistra premiamo "Alt", con la destra scriviamo 123 sul tastierino; dopo aver scritto 123 e non prima, lasciamo il tasto "Alt" che stavamo tenendo premuto con la sinistra. Dovrebbe apparire {.

Per la parentesi graffa chiusa il numero da fare è il 125; cioè con la sinistra premiamo "Alt", con la destra scriviamo 125 sul tastierino; dopo aver scritto 125 e non prima, lasciamo il tasto "Alt" che stavamo tenendo premuto con la sinistra. Dovrebbe apparire }.

Vediamo ora come fa la funzione a fare la somma di due numeri.

Le variabili

In matematica noi siamo abituati ad usare la variabile x e y. Se scriviamo:

x=5

vuol dire che al posto del 5 sto usando x; ma essendo x=5 vuol dire che quando faccio la somma il risultato non cambia.

I nomi alle variabili li diamo noi; sempre nomi corti, senza spazi, senza caratteri speciali. Di solito usiamo le lettere dell'alfabeto, a, b, c, d.

Oppure diamo un nome che ci ricorda l'operazione che abbiamo fatto.

Esempio

a=5;

b=3;

c= a+b;

Quale è il numero contenuto nella variabile c?

Nella variabile c si trova la somma di 5 +3; cioè il numero 8.

Quindi se scrivo in javascript:

alert ("La somma è " + c);

vedrò un segnale del tipo:

cioè nel segnale di allarme al posto di c Internet Explorer mi ha messo il numero contenuto nella variabile c, cioè 8.

Esercizio

Scrivere un programma con tre caselle di testo. Quando l'utente scrive un numero nelle prime due caselle, nella terza casella deve apparire la somma dei due numeri contenuti nelle prime due caselle di testo.

Soluzione

Ci costruiamo dapprima le tre caselle di testo con le seguenti istruzioni:

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

che significa:

input type="text" name="prima" mi costruisce una casella di testo di nome "prima";

onkeyup="somma()" quando l'utente lascia un tasto della tastiera mi va alla funzione somma() che fa la somma dei due numeri a+b.

Poi aggiungo:

<input type="text" name="seconda" onkeyup="somma()">

che significa:

input type="text" name="seconda" mi costruisce una casella di testo di nome "seconda";

onkeyup="somma()" quando l'utente lascia un tasto della tastiera mi va alla funzione somma() che fa la somma dei due numeri a+b.

Infine aggiungo:

<input type="text" name="terza">

che mi crea la terza casella di testo di nome "terza".

Ci tocca ora aggiustare la funziona somma(), in modo che prenda i valori delle due prime caselle di testo e metta il risultato della somma nella terza casella. Dopo le modifiche la funzione somma diventa:

function somma() {

a=eval(document.all.prima.value);

b=eval(document.all.seconda.value);

c=a+b;

document.all.terza.value=c;

}

Variabili tipo testo e variabili numeriche

In questa funzione stiamo utilizzando una nuova istruzione: eval.

eval è una istruzione molto potente, in quanto esegue quello che trova scritto tra parentesi; cioè esegue anche altre istruzioni javascript. Nel nostro caso:

a=eval(document.all.prima.value);

eval prende il valore contenuto nella casella di nome "prima" e lo trasforma in numero.

In numero?

Eh! Si!

Qui occore fare distinzioni tra parole di testo e i numeri. Se noi andiamo a scrivere in una casella di testo, quello che scriviamo è testo, cioè una parola. Anche se scrivo 5, quel 5 non è un numero con cui fare dei calcoli ma è solo come le altre lettere, cioè un testo con il quale non posso fare calcoli; questo è dovuto al fatto che la casella di testo contiene solo testo.

Quindi:

a=eval(document.all.prima.value);

mi prende quello che l'utente scrive nella prima casella di testo, lo trasforma in numero adatto per fare dei calcoli e lo memorizza nella variabile a.

Analogamente devo fare per la seconda casella di testo, cioè:

b=eval(document.all.seconda.value);

mi prende quello che l'utente scrive nella seconda casella di testo, lo trasforma in numero adatto per fare dei calcoli e lo memorizza nella variabile b.

Solo ora posso scrivere:

c=a+b;

ottenendo in c il valore della somma del numero contenuto in a + il numero contenuto in b.

Il listato completo del programma è il seguente:

Scriviamolo con Word e salviamolo con il nome di settimo.html e proviamolo con Internet explorer per vedere se funziona. Dovremmo vedere:

Annotazione

Notiamo nel listato una nuova istruzione html e cioè:

<script>

Essa è necessaria per far comprendere ad Internet explorer che quello che viene dopo sono delle istruzioni javascript e non normali comandi html. Inoltre

</script>

indica che le istruzioni javascript sono finite.

Infine notiamo che ogni istruzione javascript termina con un punto e virgola. Non che sia obbligatorio, in quanto sarebbe sufficiente andare all'altro rigo; ma è consigliabile mettere sempre un punto e virgola alla fine di ogni rigo, eccetto il rigo di fine funzione }, dove non va il punto e virgola.

Esercizi da svolgere

Esercizio 1

Scrivere un programma con tre caselle di testo. Quando l'utente scrive un numero nelle prime due caselle, nella terza casella deve apparire la differenza dei due numeri contenuti nelle prime due caselle di testo.

Esercizio 2

Scrivere un programma con tre caselle di testo. Quando l'utente scrive un numero nelle prime due caselle, nella terza casella deve apparire il prodotto dei due numeri contenuti nelle prime due caselle di testo.

Esercizio 3

Scrivere un programma con tre caselle di testo. Quando l'utente scrive un numero nelle prime due caselle, nella terza casella deve apparire il rapporto dei due numeri contenuti nelle prime due caselle di testo.

Corso Javascript per scuola media

Dizionario Javascript e html

prof. Pietro De Paolis

Scuola Elettrica

Altre applicazioni

Mappa per tipo di scuola

Indice di tutte le pagine del sito

Guida per navigare

Richiesta informazioni