regola carattere
programmare
vettori
i vettori
Come precedentemente detto, una variabile altro non è che un nome simbolico con il quale si fa riferimento al contenuto di una porzione di memoria, la si potrebbe quindi immaginare come un cassetto ove immaganizzinare dei dati.
| variabile |
|---|
| dato |
Ecco, se una variabile è un cassetto, un vettore (o array) è una cassettiera.
È quindi un blocco unico composto di tante celle, ovvero di tante variabili. Come per le variabili, all'array viene assegnato un nome ed alle sue singole celle ci si riferirà con un indice numerico intero.
Continuando con l'esempio della cassettiera, essa disporrà di un primo cassetto , un secondo, un terzo ecc. ecc. La cosa da notare è che l'indice con cui ci si riferisce alla cella (al cassetto), comincia da 0, quindi il primo dato sarà nella cella 0, il secondo nella 1, il terzo nella 2 ed il centesimo dato nella cella 99.
| 0 | 1 | 2 | 3 | 4 | |
|---|---|---|---|---|---|
| vettore | dato 1 | dato 2 | dato 3 | dato 4 | dato 5 |
In generale:
- L'n-esimo dato sarè nella cella n-1.
- Un array di lunghezza 10 (che contiene 10 dati) sarà composto dalle celle da 0 a 9.
Per creare un array si usa la sintassi:
new Array(num);
ove num (opzionale) indica il numero di celle di cui l'array è composto.
Per riferirsi ad una variabile, si indica il suo nome ed anche per un array è lo stesso, ma per riferirsi al dato contenuto in una deterinata cella dell'array, la sintassi è questa;
nome_array[i]
ove i indica il numero della cella (0, 1, 2 ecc.)
Per riferirsi ad esempio alla dato 3 contenuto nella cella 2 dell'array vettore, si scriverà:
vettore[2]
nota
Javascript non supporta il tipo di dato array, infatti bisogna usare l'operatore speciale new il quale ci consente di creare una istanza dell'oggetto Array.
Curiosità
Creare una istanza di un oggetto significa creare una occorrenza, un esemplare, un sorta di copia di un oggetto predefinito. Così si usa dire traducendo in modo poco corretto il termine anglosassone instance che significa esempio, caso.
Riempiamo i cassetti
Per inserire dati nelle celle dell'array esistono 3 alternative:
prima
var nome = new Array(num); nome[0] = dato1; nome[1] = dato2; nome[2] = dato3; ... nome[num-1] = dato num;
seconda
var nome = new Array(dato1, dato2, dato 3, ..., dato num);
terza
var nome = [dato1, dato2, dato 3, ..., dato num];
vettori (esempio 1)
Un primo esempio dell'uso di vettori, potrebbe essere uno script che trasformi un numero intero tra 1 e 10 nel corrispondente numero romano.
- Si crea un array nnRomano.
- Si chiede all'utente di immettere un numero tra 1 e 10.
- Si risponde con il corrispondente numero romano.
Come appena detto, per riempire il vettore abbiamo tre alternative:
var nnRomano=new Array(10); //conoscendo il numero di celle necessarie si specifica nnRomano[0]='I'; nnRomano[1]='II'; nnRomano[2]='III'; nnRomano[3]='IV'; nnRomano[4]='V'; nnRomano[5]='VI'; nnRomano[6]='VII'; nnRomano[7]='VIII'; nnRomano[8]='IX'; nnRomano[9]='X';
oppure
var nnRomano=new Array('I','II','III','IV','V','VI','VII','VIII','IX','X');
o anche
var nnRomano=['I','II','III','IV','V','VI','VII','VIII','IX','X'];
Il risultato non cambia.
Adesso bisogna chiedere all'utente un numero e convertirlo. Se l'utente risponde 5, dovremo riferirci alla cella che contiene V, cioè la 4 che , in generale, se l'utente vuol conoscere il corrispondente del numero num, faremo riferimento alla cella num - 1 dell'array.
Lo script completo sarà:
var nnRomano = new Array(10); //conoscendo il numero di celle necessarie si specifica
nnRomano[0] = 'I';
nnRomano[1] = 'II';
nnRomano[2] = 'III';
nnRomano[3] = 'IV';
nnRomano[4] = 'V';
nnRomano[5] = 'VI';
nnRomano[6] = 'VII';
nnRomano[7] = 'VIII';
nnRomano[8] = 'IX';
nnRomano[9] = 'X';
/* le alternativa contratte sarebbero state:
- var nnRomano = new Array('I','II','III','IV','V','VI','VII','VIII','IX','X');
- var nnRomano = ['I','II','III','IV','V','VI','VII','VIII','IX','X'];
*/
var num = parseInt(window.prompt('Immettere un numero tra 1 e 10',''));
if (!isNaN(num) && num >= 1 && num <= 10) {
var numRom = nnRomano[num - 1];
document.write('<p>Il corrispondente romano del numero ' + num + ' è:</p>');
document.write('<h2>' + numRom + '</h2>.');
} else {
window.alert('numero non valido');
}
/* dovendo riusare in seguito la variabile numRom ha senso crearla, ma nel
nostro caso è poco utile, pertanto, evitandola, avremmo:
document.write('<h2>' + nnRomano[num - 1] + '</h2>.');
*/
vettori paralleli
Con array paralleli si intende un gruppo di due o più array dove gli elementi nella stessa posizione costituiscono un insieme di dati correlati.
Pensando ad un gruppo di studenti ed al loro voto potremo costruire la seguente un array studenti che contenga i loro nomi ed un secondo array voti per i rispettivi voti:
| studenti | voti |
|---|---|
| Daniele | 6 |
| Laura | 4 |
| Roberto | 8 |
| Emanuela | 7 |
| Marco | 5 |
Come si nota la corrispondenza tra lo studente ed il suo voto è data dalla posizione che i due dati occupano nei rispettivi array: Daniele 6 (posizione 0), Laura 4 (posizione 1), Roberto 8 (posizione 2)ecc. ecc.
Quindi allo studente 0 corrisponde il voto 0, allo studente 1 il voto 1 ed in generale, allo studente n il voto n (studenti[n] -> voti[n]):
| i | studenti | voti |
|---|---|---|
| 0 | Daniele | 6 |
| 1 | Laura | 4 |
| 2 | Roberto | 8 |
| 3 | Emanuela | 7 |
| 4 | Marco | 5 |
Per costruire la tabella studenti-voti usando due array paralleli, porremo lo script nel tag table. Il programma (facendo ovviamente uso di un ciclo for), ad ogni iterazione scriverà una riga con le celle studente e voto:
var studenti = new Array(5)
studenti[0] = 'Daniele';
studenti[1] = 'Laura';
studenti[2] = 'Roberto';
studenti[3] = 'Emanuela';
studenti[4] = 'Marco';
/* le alternativa contratte sarebbero state:
var studenti = new Array('Daniele','Laura','Roberto','Emanuela','Marco');
var studenti = ['Daniele','Laura','Roberto','Emanuela','Marco'];
*/
var voti = new Array(5);
voti[0] = 6;
voti[1] = 4;
voti[2] = 8;
voti[3] = 7;
voti[4] = 5;
/* le alternativa contratte sarebbero state:
var voti = new Array(6,4,8,7,5);
var voti = [6,4,8,7,5];
*/
for (i = 0 ; i < 5 ; i++) {
document.write('<tr> <td>' + studenti[i] + '</td> <td>' + voti[i] + '</td> </tr>');
}
matrici
Oltre alla possibilità appena vista, di definire dei vettori monodimensionali paralleli, si dispone anche di array multidimenisonali. In particolare, gli array bidimensionali, vengono chiamati matrici, perché in matematica, si dicono matrici, delle
tabelle ordinate in righe e colonne.Le matrici, sono in sostanza delle tabelle a doppia entrata e si costruiscono tramite array bidimensionali.
Visto che JavaScript non supporta direttamente gli array bidimensionali, questi si costruiscono con array di array.
Si crea ovvero un array padre, che in ogni sua cella conterrà un array figlo.
Mantenendo l'esempio degli studenti, possiamo ora caricare più voti (ad esempio 5) per ciascun allievo (ad esempio 3). Creeremo pertanto un array padre allievo, che nella cella 0 contiene l'array con i voti del primo allievo, nella cella 1 quello con i voti del secondo e nella terza cella l'array con i voti del terzo.
| 1° voto | 2° voto | 3° voto | 4° voto | 5° voto | |
|---|---|---|---|---|---|
| 1° allievo | 1 | 3 | 5 | 7 | 9 |
| 2° allievo | 2 | 4 | 6 | 8 | 10 |
| 3° allievo | 4 | 5 | 6 | 7 | 8 |
Per riferirsi alle celle dell'array padre continueremo ad usare la variabile i, per quelle degli array figli useremo la variabile j.
L'elemento i dell'array padre sarà un array con le sue celle, per riferirsi alla sua cella j, si utilizzerà la sintassi:
vettore[i][j]
Quindi ci si riferirà al quarto voto (cella 3) del primo allievo (cella 0) così:
allievo[0][3]
Per costruire la matrice avremo, al solito diverse alternative:
prima
var allievo = new Array(3); allievo[0] = new Array(5); allievo[0][0] = 1; allievo[0][1] = 3; allievo[0][2] = 5; allievo[0][3] = 7; allievo[0][4] = 9; allievo[1] = new Array(5); allievo[1][0] = 2; allievo[1][1] = 4; allievo[1][2] = 6; allievo[1][3] = 8; allievo[1][4] = 10; allievo[2] = new Array(5); allievo[2][0] = 4; allievo[2][1] = 5; allievo[2][2] = 6; allievo[2][3] = 7; allievo[2][4] = 8;
seconda
var allievo = new Array(3); allievo[0] = new Array(1,3,5,7,9); allievo[1] = new Array(2,4,6,8,10); allievo[2] = new Array(4,5,6,7,8);
terza
var allievo = [[1,3,5,7,9],[2,4,6,8,10],[4,5,6,7,8]];
Otteniamo il medesimo risultato.
Per scorrere i vari voti dei vari allievi si avrà bisogno di due cicli for nidificati:
for (var i = 0 ; i < 3 ; i++) {
for (var j = 0 ; j < 5 ; j++) {
allievo[i][j]
}
}
Nella seguente pagina, è stato inserito nella sezione head lo script sopra che crea la matrice.
Nella sezione body poi, è stata inserita la prima riga della tabella con le intestazioni (1° voto, 2° voto ecc.), segue uno script che, scorrendo la matrice, scrive le altre tre righe con i voti:
<body>
<table border="1">
<tr>
<th> </th>
<th>1º voto</th>
<th>2º voto</th>
<th>3º voto</th>
<th>4º voto</th>
<th>5º voto</th>
</tr>
<script type="text/javascript">
<!--
for (var i = 0 ; i < 3 ; i++) {
document.write('<tr><th>' + (i + 1) + 'º allievo</th>');
for (var j = 0 ; j < 5 ; j++) {
document.write('<td align="center">' + allievo[i][j] + '</td>');
}
document.write('</tr>');
}
//-->
</script>
</table>
</body>