Autori: Paolo Montanaro, Giovanni Nicco


Materiale che accompagna il libro:programmiLibro.html

Capitolo 1
Su alcune possibili ragioni per l'adozione del JavaScript come linguaggio di programmazione

Fondamenti di programmazione sono inclusi nei programmi PNI e vengono comunque trattati anche in altre tipologie scolastiche; una domanda che ci si può porre è se il Pascal, solitamente adottato, abbia ancora le caratteristiche che ne motivarono la scelta molti anni or sono.

Allora la parola vincente fu 'LINGUAGGIO STRUTTURATO': molto sinteticamente, ciò voleva dire un linguaggio che non possedesse l'istruzione 'go to', i programmi dovevano pertanto somigliare a fogli di carta distesi più che a fogli piegati, stropicciati e accartocciati come si poteva viceversa fare usando quella terribile istruzione che connetteva le parti più disparate del programma rendendolo inintelligibile.
Da allora è passato molto tempo e tutti i linguaggi di programmazione ad alto livello non hanno rifatto l'errore del Basic di inserire l'istruzione 'go to', in compenso si sono portati avanti sulla strada della gestione della complessità introducendo i concetti di OGGETTI e di 'EVENTI'.

L'OGGETTO sottende l'idea che laddove vi sia una struttura ben definita con proprietà e interazioni intrinseche, sue proprie, il programmatore deve inserire tale 'essenza' dell'oggetto nel codice stesso anziché (come avveniva in Pascal) introdurre una quantità di variabili e funzioni sconnesse tra loro. La possibilità di definire le 'proprietà' ed i 'metodi' di un oggetto, oltre a costituire un invito all'uso e allo sviluppo delle capacità astrattive, consente una impressionante semplificazione nella scrittura e nella lettura del codice, a titolo di esempio si pensi alla possibilità di definire un oggetto 'matrice algebrica' e un oggetto 'vettore' in modo tale da rendere funzionante la seguente istruzione: v2 = B*v1; dove v1 e v2 sono vettori e B una matrice.
Inoltre è possibile definire una gerarchia tra gli oggetti nel senso che un oggetto estremamente generale costituisce il 'prototipo' di una serie di oggetti che da esso 'ereditano' le proprietà e i metodi intrinseci ma che ad esempio introducono un vincolo su una specifica proprietà in modo tale da costituirne una 'sottoclasse'. Se, ad esempio, definiamo l'oggetto 'poligono' ecco che è possibile definire l'oggetto 'quadrilatero' come un poligono a quattro lati, quindi l'oggetto 'parallelogramma' come un quadrilatero con i lati paralleli a due a due ed in particolare un 'rombo' come un parallelogramma equilatero e un 'rettangolo' come un parallelogramma equiangolo e infine un 'quadrato' come un parallelogramma equilatero ed equiangolo.
La gestione di concetti quali 'classe', 'sottoclasse', 'istanza', 'ereditare', 'proprietà di classe', 'proprietà di istanza', 'algebra di una classe' in un contesto preciso e puntuale, vincolato alle regole del linguaggio di programmazione, fornisce un buon substrato dal quale partire per estendere/consolidare questi concetti all'intero contesto matematico e geometrico e, più in generale, linguistico-cognitivo.


Dall'altro lato l'EVENTO, così come l'oggetto, richiama a una realtà la cui modelizzazione non è riconducibile ad una linea unica e omni-valente quanto a un interconnesione di entità e di ruoli.
Se rimane quindi possibile e necessario parlare di 'algoritmo' bisogna comunque prendere atto,ad esempio, che l'utente che interagisce con un programma vuole poter fare più cose senza un ordine ben preciso. La navigazione in Internet, per rendere l'idea, non ha un aspetto algoritmico bensì è basata su 'eventi': se clicco un link cambia la pagina visualizzata, se clicco un determinato pulsante succede qualcosa, se ne clicco un altro succede qualcos'altro, non più 'sequenza rigida' quindi ma 'compresenza di sequenze'. In pratica le singole 'funzioni' costituiscono tanti programmi indipendenti, ognuno dotato di un inizio e una fine ma controllati direttamente dal sistema operativo e non da un 'programma principale'.
Dal vecchio autocratico begin program ... end program del Pascal si è passati al cooperative-working degli oggetti-eventi: non più un programma che doveva tutto prevedere e contenere quanto collezioni di piccole entità che 'sanno quello che fanno' e vengono messe a lavorare assieme.
In pratica ciò è particolarmente utile per realizzare interfaccia grafiche in cui pulsanti, caselle di testo, aree di editing, immagini, link, etc. vengano utilizzati dal 'programma' in quanto 'oggetti' dotati di 'metodi' e in grado di lanciare 'eventi'. Attingendo dalle librerie di oggetti precostituite o realizzate in precedenza è quindi possibile realizzare programmi in maniera semplice con elaborate interfaccia grafiche che permettono un uso facile anche da parte di un utente non esperto.


Vi sono molti linguaggi che consentono (oltre a essere ovviamente 'strutturati'), l'uso di oggetti e eventi: Le ragioni che si possono addurre per motivare la scelta del JavaScript tra questi e lo stesso Pascal sono le seguenti
  1. E' gratuito: si realizzano i programmi in 'blocco note' e si eseguono con i browser 'Explorer' o Netscape (senza, per inciso, dover necessariamente usare Internet)
  2. E' presente su qualsiasi computer degli allievi (in quanto incluso in Windows)
  3. E' interpretato e non compilato: questo raddoppia (almeno) il tempo di produzione dei programmi (non bisogna tutte le volte compilare per provare il programma)
  4. E' utilizzato nel mondo del lavoro (milioni di pagine Web contengono codice JavaScript!)
  5. E' possibile mettere i programmi realizzati in rete in modo da darne visibilità: questo costituisce un port-folio per l'allievo ma anche per la scuola stessa allorquando la realizzazione dei programmi venga guidata verso la realizzazione di librerie-progetti comuni.
  6. Include i principali concetti della programmazione a oggetti ed eventi presenti nei più professionali linguaggi C++ e Java (con una sintassi, per altro, molto simile) senza però averne la rigidità (è cioè possibile anche fare programmi semplici senza l'uso di oggetti e classi in modo che in una sola ora di lezione di possano realizzare programmi perfettamente funzionanti)
  7. Ha una sintassi molto 'tollerante' che consente di alleggerire moltissimo la programmazione
  8. Consente di rendere attiva dal punto di vista cognitivo la fruizione di Internet: è possibile ampliare la conoscenza del JavaScript fino a includere il linguaggio HTML, visto in questo caso come formattatore per l'output dei programmi: tale acquisizione (quella del linguaggio HTML) consente di vedere una pagina Web stessa come un programma decodificabile, riproducibile e con il quale è possibile interagire.
  9. Il linguaggio JavaScript è dotato di tutte le potenzialità per rendere il computer una calcolatrice programmabile STANDARD: tutti gli allievi la possiedono, i programmi sono facilmente distribuibili via Internet (sono infatti delle pagine Web), il costo è nullo, la capacità di calcolo e di visualizzazione è ottima.
  10. La manualistica relativa a questo linguaggio è impressionante: basta collegarsi a Internet per reperire facilmente manuali, esempi, corsi interattivi e quant'altro.
L'uso di C++ o Java può essere una naturale estensione a quello del JavaScript, rispetto a questo essi aggiungono maggiore velocità di esecuzione, gestione di istruzioni grafiche, trattamento file diretto, sono comunque notevolmente più complessi. In un corso per docenti di 15 ore è possibile, con prerequisito una consolidata conoscenza della programmazione in un linguaggio qualsiasi (strutture while, until, for e if; input, output, variabili, vettori, matrici)
  1. imparare a gestire l'ambiente note-pad/pagina Web per realizzare un programma in JavaScript
  2. imparare a tradurre un generico programma dal Pascal al JavaScript
  3. individuare e saper gestire le principali difficoltà della programmazione JavaScript
  4. assimilare le basi teoriche della programmazione a oggetti e farne un uso elementare
  5. apprendere i principali tag HTML per la formattazione dei risultati e per la produzione di interfaccia grafiche
  6. prendere conoscenza della possibilità di creare e far creare (agli allievi) siti Web e librerie comuni di programmi messi in rete Internet

Capitolo 2
Scomposizione in fattori primi e comando while

Ricordi come si scompongono i numeri in fattori primi?
Si tratta di un fatto che in matematica torna e ritorna durante tutto il tuo percorso di studi. Varebbe quindi la pena scrivere un breve programma che svolga questo compito. Ricordiamo che un numero primo è un numero (diverso da 1) divisibile (senza resto) esclusivamente per 1 e per se stesso.
Per esempio i numeri primi iniziali sono 2,3,5,7,11,13,17,19,23,29,...
Ricordiamo inoltre che il meccanismo per trovare la scomposizione di un numero in fattori primi è quello di cercare (partendo dai più piccoli) i divisori primi del numero in questione. Quando se ne trova uno si effettua la divisione e si ripete il procedimento sul risultato ottenuto fino a quando il risultato della divisione è 1.
Esempio, scomponiamo in fattori il numero 980:
E' divisibile per 2? Si.
Eseguiamo:
980/2=490
Andiamo avanti: 490 è divisibile per 2? Si.
Eseguiamo:
490/2=245
Andiamo avanti: 245 è divisibile per 2? No.
per 3? No. (un numero è divisibile per 3 se la somma delle sue cifre è divisibile per 3, in questo caso abbiamo 2+4+5=11 che non è divisibile per 3)
per 5? Si. (infatti un numero è divisibile per 5 se esso finisce per 5 o per 0). Eseguiamo:
245/5=49
Andiamo avanti: 49 è divisibile per 5? No.
per 7? Si. Eseguiamo:
49/7=7
Andiamo avanti: 7 è divisibile per 7? Si:
7/7=1
La scomposizione è terminata, il prodotti di tutti i divisori trovati costituisce la scomposizione del numero iniziale, in questo caso si può quindi scrivere 980=2×2×5×7 o più brevemente 980=22×5×7.
Solitamente questo procedimento viene rappresentato con il seguente schema:
980| 2
490| 2
245| 5
49| 7
7| 7
1|
Ricordato come effettuare la scomposizione, l'obiettivo è ora quello di istruire il computer usando JavaScript affinchè esegua la scomposizione al posto nostro.
Apriamo il Blocco Note e digitiamo le righe che seguono: 
<HTML><BODY><SCRIPT>
var divisore=2;
var n=prompt("inserisci il numero da scomporre"," ");
while(n>1){
	if(   (n % divisore)==0    ){document.write(n+" |"+divisore+"<br>"); n=n/divisore}
	  else{divisore++}
}
</SCRIPT></BODY></HTML>


2.1  Analisi del codice

Capitolo 3
Ciao x, ovvero l'input e l'output sul computer

3.1  Il problema

Per cominciare vorremmo insegnare al computer come salutare una persona di cui non conosce ancora il nome. In JavaScript esiste un comando che si chiama "prompt" che ci permette di comunicargli un nome o un numero o più in generale una informazione. Una volta che il computer sia in possesso di tale informazione, vogliamo che saluti la persona stampando un messaggio sul video. Per realizzare ciò, noi "programmatori" dobbiamo dettagliare tutte le singole operazioni che lui "computer" eseguirà quando si troverà davanti una qualsiasi persona ütente". Nota bene: in questo momento noi faremo sia la parte del programmatore che quella dell'utente. Per "programmare" il computer ci serviremo di un editor di testo, su Windows esiste ad esempio Note Pad meglio noto come Blocco Note , lanciamolo e scriviamo le seguenti istruzioni: 
<HTML>
<SCRIPT>
   var x = prompt("Come ti chiami?"," "); 
   document.write("Ciao " + x + " Benvenuto in JavaScript!");
</SCRIPT>
</HTML>

Salviamo con il nome "ciao.html" nella cartella 'documenti' (facendo attenzione a scegliere 'Tutti i file' nella casella sottostante 'Salva Come'). Bene!, abbiamo scritto il nostro primo programma in JavaScript, adesso vogliamo vedere se funziona: senza chiudere Note Pad apriamo la cartella documenti e clicchiamo sull'icona 'ciao.html'.

3.2  Analisi del codice

Capitolo 4
Quanto vale il quadrato di x? if, uso di funzioni e numeri casuali

4.1  Il problema

In matematica ricorrono spesso i quadrati dei numeri (o da calcolare o da conoscere per risolvere una radice). E' buona cosa conoscere almeno quelli dei numeri piccoli, diciamo dei numeri minori di 20. Nel seguente programma il computer 'penserà' un numero intero compreso tra 1 e 20 e noi (utenti) dovremo indovinarlo. 
<SCRIPT>
	var nDa0A1Esclusi = Math.random();
	var nDa1A21Esclusi = ( nDa0A1Esclusi * 20 )+1;
	var n = parseInt(nDa1A21Esclusi);
	var x = prompt("Dimmi il quadrato di "+n," ");
	if ( x==n*n){document.write("<b>Risposta esatta!</b> <br>(premi F5 per riprovare)")};
	if ( x!=n*n){document.write("Risposta sbagliata: il quadrato di "+n+" è <b>"+n*n+"</b>")}
</SCRIPT>

Procediamo come abbiamo fatto per il precedente programma: salviamo con il nome quadrato.html e lanciamo il programma cliccando sopra la nuova icona (quadrato.html).

4.2  Analisi del codice

Capitolo 5
Ciclo for

5.1  la tabellina di Pitagora

... 
<HTML>
<BODY>
<SCRIPT>
document.write('<TABLE BORDER=1>')
for(var i=1;i<=20;i++){
	document.write('<TR>')
	for(var j=1;j<=20;j++){
		document.write('<TD>'+i*j)
	}
}
document.write('</TABLE>')
</SCRIPT>
</BODY>
</HTML>


...

5.2  Analisi del codice

Capitolo 6
IF, FOR e giochetti con i numeri

6.1  Il ciclo FOR e i numeri irrazionali

Comunque il vostro insegnante abbia deciso di introdurre i numeri irrazionali, un aspetto sorprendente di questi consiste nel possedere progressione decimale illimitata non periodica: non soltanto essi non sono interi, ma presentano un numero di decimali infinito costituito da cifre che compaiono secondo una sequenza che cambia continuamente. Tra i numeri irrazionali più illustri che si incontrano a scuola citiamo Pi greco, la radice quadrata del numero due, il numero di Nepero. Questi numeri sono particolarmente famosi in quanto connessi a molteplici problemi matematici ed in qualche caso la loro storia risale a tempi remotissimi (per esempio circa il problema del rapporto tra una circonferenza e il suo diametro, ovvero di Pi greco, vi è già traccia nel Papiro Rhind compilato dallo scriba egizio di nome Ahmes approssimativamente attorno al 1650 A.C.). Esempi tanto illustri contribuiscono a volte a formare l'idea che i numeri irrazionali siano pochi e legati esclusivamente ad amenità matematiche. In realtà costruire un numero irrazionale è quanto di più semplice si possa fare. Ogni sviluppo decimale fatto da infinite cifre che non sia periodico ne individua uno. Così ad esempio sono numeri irrazionali i seguenti: 3,012345678910111213141516171819 (tre seguito da una virgola dopo la quale si immagini di scrivere tutto l'insieme dei numeri naturali); 0,10100100010000100000(zero virgola seguito dalle potenze del numero 10) 2,19254981121169(due virgola seguito dal quadrato di tutti i numeri dispari) e via così potremmo immaginarne facilmente altri. Nel programma che segue ci si propone di visualizzare le prime cifre di un numero irrazionale la cui progressione decimale sia costituita da numeri dati a caso tra lo 0 e il 9 (più non periodico di così!). Una volta lanciato, il programma domanda all'utente quanti decimali egli voglia visualizzare (visualizzarli tutti è impossibile visto che i decimali di un numero irrazionale sono infiniti!), quindi il programma procede alla generazione del numero. Gli espedienti che vengono sfruttati per raggiungere lo scopo sono: la funzione JavaScript per la generazione di numeri casuali già commentata in precedenza, un ciclo FOR che produce la progressione numerica, un ciclo IF che controlla la stampa sul video di tale progressione. Si tratta di aprire il Blocco Note, e digitare: 
<SCRIPT>
var decimali=prompt("Questo programma genera un numero irrazionale minore di 10. Quanti decimali vuoi visualizzare?"," ");
var n=parseInt(10*Math.random());
document.write(n+".");
for(var i=1;i<=decimali;i++){
	n=parseInt(10*Math.random());
	document.write(n);
	if(i%107==0){
		document.write("<br>");
	}
}
document.write("...");
</SCRIPT>

Una volta digitato il codice in questione, salvare con il nome irrazionale.html nella cartella documenti (facendo attenzione a scegliere la voce Tutti i file nella casella Salva Come che compare nella finestra). Per vedere se e come funziona il programma , aprire la cartella documenti e "doppiocliccare" sull'icona irrazionale.html. Il programma dovrebbe partire cominciando con il domandarvi quanti decimali del numero intendete visualizzare.

6.1.1  Analisi del codice

6.2  Il numero di Nepero

Un esempio di numero irrazionale molto illustre è rappresentato dal numero di Nepero indicato in letteratura con il simbolo 'e'. 'e' è quel numero irrazionale definito come il valore verso cui tendono, all'aumentare di 'n' i termini della successione:

æ
è 		1+  1
1
 ö
ø 		1

 
 , æ
è 		1+  1
2
 ö
ø 		2

 
 , æ
è 		1+  1
3
 ö
ø 		3

 
 , æ
è 		1+  1
4
 ö
ø 		4

 
 ,..., æ
è 		1+  1
n
 ö
ø 		n

 
per dirla da matematici:e = 2.718281828459045; ovvero
e =
lim
n ® +¥ 
æ
è 		1+  1
n
 ö
ø 		n

 
con
n Î N
le sue prime quindici cifre significative sono: e = 2.718281828459045 ovvero la successione scritta sopra converge poco alla volta verso questo valore. Il programma che segue individua le prime 7 cifre significative del numero di Nepero calcolando i termini della successione di cui sopra. Vengono calcolati i termini della successione fino a quello con n=2.000.000 saltando prima di 10 in 10 poi di 1000 in 1000 per velocizzare il calcolo. Superando n=2.000.000 cominciano ad intervenire problemi di instabilità numerica e la macchina non riesce più a gestisce il calcolo correttamente. Aprire il Blocco Note, e digitare: 
<SCRIPT>
alert('I cicli "for" di questo programma evidenziano le prime 7 cifre significative del numero di Nepero "e" ');
document.write('Le prime 16 cifre significative del numero di Nepero "e" sono: '+Math.exp(1)+'...<BR>');
document.write('Le prime 7 cifre significative di "e" vengono messe in evidenza di seguito, calcolando termini successivi della successione matematica di cui "e" rappresenta il limite superiore:<P>');
document.write('<PRE>n       (1+1/n)<SUP>n</SUP><HR>');
for(var i=1;i<=9;i++){
	document.write(i+'      '+Math.pow((1+1/i),i)+'<BR>');
}
for(var i=10;i<=990;i+=10){
	document.write(i+'      '+Math.pow((1+1/i),i)+'<BR>');

}
for(var i=1000;i<=2000000;i+=1000){
	document.write(i+'      '+Math.pow((1+1/i),i)+'<BR><PRE>');
}
document.write('</PRE>');
</SCRIPT>

Salvare con il nome nepero.html nella cartella documenti (facendo attenzione a scegliere la voce Tutti i file nella casella Salva Come che compare nella finestra). Per far girare il programma , aprire la cartella documenti e "doppiocliccare" sull'icona nepero.html.

6.2.1  Analisi del codice