HOME

Contatti

MATEMATICA CON JAVASCRIPT


STRUTTURE FONDAMENTALI DI CONTROLLO: ITERAZIONE ENUMERATIVA (CICLO FOR NIDIFICATO)


Precedente      Successivo
F
acciamo il punto.
Argomenti correlati:


Parentesi graffe
Racchiudono un blocco di istruzioni e sono usate in molti casi, ad esempio nelle funzioni. In particolare:

  {
indica l'inizio (corrisponde al begin del Pascal

  }
indica la fine (corrisponde all' end del Pascal

Variabile booleana
Che assume solo i valori true (vero) o false (falso)

  document.write(...)
Metodo dell'oggetto document che scrive l'output in una nuova pagina.
In parentesi va scritto quello che deve essere visualizzato sullo schermo, ricordando che:
  • un contenuto fisso va scritto fra apici o virgolette;
  • le variabili vanno scritte senza apici;
  • contenuto fisso e variabili vanno concatenati con il segno +

document.write("<pre>")
Quanto viene scritto all'interno dei tags <pre> e </pre> si presenta come paragrafo preformattato, che cioè viene visualizzato così come è stato scritto; in particolare vengono conservati gli spazi e gli "a capo".
Nel nostro caso è indispensabile se si vogliono rendere le sequenze escape /t e /n

  \t
Sequenza escape, o di controllo, che permette di inserire una tabulazione (simula il tasto Tab)

  \n
Sequenza escape, o di controllo, che permette di andare a capo (new line)

APPROFONDIMENTO SULLE sequenze escape


  for (i=1; i<=10; i++)
Ciclo enumerativo esterno nel quale
  1. nel campo inizializzazione scriviamo i=1:
    poniamo il nome del contatore = i e il suo valore iniziale = 1;
  2. nel campo condizione scriviamo i<=10: l'azione va ripetuta per 10 volte;
  3. nel campo incremento scriviamo i++: ogni volta che abbiamo compiuto un'azione, incrementiamo il contatore di 1.

  for (j=1; j<=10; j++)
Ciclo enumerativo interno nel quale
  1. nel campo inizializzazione scriviamo j=1:
    poniamo il nome del contatore = j e il suo valore iniziale = 1;
  2. nel campo condizione scriviamo j<=10: l'azione va ripetuta per 10 volte;
  3. nel campo incremento scriviamo j++: ogni volta che abbiamo compiuto un'azione, incrementiamo il contatore di 1.
Come in tutti i cicli nidificati prima viene eseguito il ciclo interno e poi quello esterno.

if (i*j<10)
Se il prodotto degli indici è minore di 10, cioè composto da una cifra...

{document.write(' ' + i*j + '\t');}
...vengono lasciati 2 spazi prima di scriverlo; di seguito v'è una tabulazione

else if (i*j<100)
Altrimenti, se il prodotto degli indici è minore di 100, cioè composto da 2 cifre...

{document.write(' ' + i*j + '\t');}
...viene lasciato 1 spazio prima di scriverlo; di seguito v'è una tabulazione

else document.write(i*j + '\t');
Altrimenti non vengono lasciati spazi prima di scriverlo; dopo v'è una tabulazione

APPROFONDIMENTO SULLA selezione nidificata


  document.close()
Metodo dell'oggetto document.
Si comunica al browser che è terminata la procedura di scrittura del documento. Se non si include questa riga di codice non avrà luogo la stampa né altri eventuali comandi sulla pagina che abbiamo appena aperta.

Come per le altre strutture di controllo, è possibile annidare più cicli for uno dentro l'altro: l'unica cosa essenziale è che non ci siano sovrapposizioni fra i cicli, cioé occorre chiudere per primo il ciclo più interno, come si fa per le parentesi.
I cicli nidificati sono molto utili in numerosi problemi di matematica, come vedremo.

 

Ad esempio la sintassi del ciclo for nidificato, nel caso di tre variabili, è

for (var1 = ValoreIniziale; var1 < ValoreFinale; var1 = var + incremento)
{
for (var2 = ValoreIniziale; var2 < ValoreFinale; var2 = var2 + incremento)
{
for (var3 = ValoreIniziale; var3 < ValoreFinale; var3 = var3 + incremento)
{
   istruzioni da eseguire;
}
}
}

 

Costruiamo la tabellina della moltiplicazione per i numeri che vanno da 1 a 10.
Vogliamo che il risultato appaia come nell'esempio qui in basso, cioè vogliamo ottenere on solo i vari prodotti, ma anche una certa formattazione: i numeri devono essere allineati a destra e in colonna.

Nella prima riga scriveremo il prodotto di tutti i numeri da 1 a 10 per 1; nella seconda riga il prodotto di tutti i numeri da 1 a 10 per 2 e così via. E' chiaro che in questo caso abbiamo bisogno di due indici: uno per le righe ed uno per le colonne.
Indichiamo con i l'indice per le righe, e con j quello per le colonne.
Prepariamo la funzione JavaScript che ci occorre con il seguente codice, da inserire fra i tags <HEAD> ed </HEAD>:

<script type="text/javascript">
function tabellina0() {
  document.write("<pre>")
  for (i=1; i<=10; i++) {
    for (j=1; j<=10; j++) {
     if (i*j<10) {document.write(' ' + i*j + '\t');}
     else if (i*j<100) {document.write(' ' + i*j + '\t');}
     else document.write(i*j + '\t');
    }
  document.write('\n')
  }
  document.write("</pre>");
  document.close();  }
</script>
Controlliamo la correttezza del programma attraverso la tavola di traccia, calcolata, per semplicità, per valori di i fino a 3 e per valori di j fino a 2.

azione

indice 1

condizione

indice 2

condizione

prodotto
i*j

i

i<=3

j

j<=2

1

vera

 

 

 
2°- 3°

 

 

1

vera

1*1=1
4°- 5°

 

 

2

vera

1*2=2

 

 

3

falsa

 

2

vera

 

 

 
8°- 9°

 

 

1

vera

2*1=2
10°- 11°

 

 

2

vera

2*2=4
12°

 

 

3

falsa

 
13°

3

vera

 

 

 
14°- 15°

 

 

1

vera

3*1=3
16°- 17°

 

 

2

vera

3*2=6
18°

 

 

3

falsa

 
19°

4

falsa

 

 

 

Come si vede, viene dato inizialmente all'indice i il valore 1, quindi si avvia il ciclo interno.

j prende successivamente i valori

  1. e viene scritto il primo prodotto;
  2. e viene scritto il secondo prodotto;
  3. a questo punto j ha superato il valore massimo e si esce dal ciclo interno
Ora i prende il valore 2, e si torna al ciclo interno... e così via.

Creiamo un bottone con il seguente codice, da inserire fra i tags <BODY> e </BODY>:

<form name="MioForm0">
<input type=button value="Primo esempio" name="botton0" OnClick="javascript:tabellina0()">
</form>
Otteniamo il seguente risultato (clic sul pulsante per visualizzare l'output del programma):

NOTA BENE: E' possibile migliorare l'output del programma con l'uso delle tabelle


 

Vi invitiamo inoltre, se volete provare il vostro codice, a visionare la sezione

PROVA TU

riguardante l'uso della struttura fondamentale di controllo ciclo for nidificato.
Troverete il programma che prepara una tabella additiva 4 × 5


INDICE              STRUTTURE FONDAMENTALI DI CONTROLLO - Precedente -  1  -  2  -  3  -  4  -  5  -  6  -  7  -  8  -  9  -  10   - Successivo

©2002 - 2012 www.webfract.it