E' un insieme di numeri ordinati secondo 3 righe e 4 colonne.
Il generico elemento di una matrice M3,4 si indica con ai,j (1 ≤ i ≤ 3 e 1 ≤ j ≤ 4).
Esso occupa la posizione individuata dall'intersezione tra la i-esima riga e la j-esima colonna della matrice. In generale, con Mm,n si indica una matrice di m righe per n colonne.
Diagramma ad albero
Si tratta di un metodo grafico molto usato in varie discipline che offre numerose applicazioni, ad esempio in probabilità, nella rappresentazione di espressioni algebriche, in informatica.
E' formato da un numero finito di nodi e da linee che li uniscono. Il nostro è un albero ordinato con radice, la quale non è altro che un nodo particolare da cui si diramano i vari percorsi.
Facendo un'analogia con un albero genealogico, possiamo dire che la radice è il capostipite; esso ha 3 figli, i 3 tag <tr>, detti nodi del primo ordine, ognuno dei quali ha 4 figli, i tag <td>, detti nodi del secondo ordine, ognuno dei quali ha come figlio il testo in esso contenuto (nodi del terzo ordine).
<table>
marcatore che indica l'inserimento di una tabella
border=1
il bordo ha uno spessore di 1 pixel
cellpadding=6
i dati di ciascuna cella sono contornati da 6 pixel
style="border-collapse:collapse"
Mostra il bordo della tabella come una linea singola
Le funzioni in JavaScript permettono di scrivere del codice in un blocco in modo che possa essere utilizzato anche più volte quando sia necessario. La sintassi è:
function nome(argomenti){
istruzioni;
}
dove al posto di nome possiamo scrivere un termine che ci ricordi lo scopo della funzione stessa. Le istruzioni vanno separate dal punto e virgola.
Per riferirsi, o chiamare, una funzione, basta usare questa sintassi:
nome(valore degli argomenti)
Se gli argomenti mancano, occorre comunque inserire le parentesi.
Ad esempio, noi abbiamo costruito la funzione function tabella3_5() ed in seguito l'abbiamo richiamata scrivendo tabella3_5().
Parentesi graffe
Racchiudono un blocco di istruzioni e sono usate in molti casi, ad esempio nelle funzioni. In particolare:
Metodo dell'oggetto document Ricordiamo che le parti fisse vanno scritte fra apici o virgolette, mentre quelle variabili vanno scritte così come sono; parti fisse e variabili vanno concatenate mediante il +.
<sub> </sub>
Quello che scriviamo fra i marcatori viene reso in formato pedice
document.close()
Si comunica al browser che è terminata la procedura di apertura della finestra e 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.
Ci proponiamo di costruire una tabella di 3 righe × 4 colonne e, a tale scopo, useremo il linguaggio HTML insieme a javascript.
LA FORMA DELLA TABELLA
La nostra tabella è una matrice di ordine 3 × 4. Iniziamo da qui. Osserviamo la figura in basso.
Diagramma ad albero che rappresenta una tabella di tre righe per quattro colonne Il diagramma è stato preparato usando il software libero DiagramDesigner
la radice è il tag <table> (inserimento tabella)
i nodi del primo ordine (figli della radice) sono 3 tag <tr> (inserimento riga)
i figli di ogni riga sono 5 tag <td> (inserimento colonna)
Ogni <td> ha un figlio costituito dal contenuto della singola cella. Ad esempio a3,2 è l'elemento della terza riga, seconda colonna.
NOTA BENE Anche se non l'abbiamo evidenziato, per semplificare il disegno, ogni tag va chiuso. Ad esempio i contenuti vanno scritti all'interno dei tag <td> ... </td>
CREARE LA GENERICA TABELLA 3 × 5
Decidiamo di creare la tabella con una funzione costruita con il seguente codice, da inserire fra i tags <HEAD> e </HEAD> oppure <BODY> e </BODY>. Ogni riga del codice è stata commentata; spiegazioni più approfondite sono nella sezione "Facciamo il punto" a sinistra nella pagina.
Codice
Commento
<script type="text/javascript">
//E' necessario che il codice sia all'interno dei tag <script...> e </script>
function tabella3_5() {
//la nostra funzione ha nome "tabella3_5()". La parentesi { segna l'inizio delle istruzioni
//Scrive il testo in parentesi nella pagina. In questo caso viene inserita una tabella. // Gli attributi sono spiegati a lato
for (i=1; i<=3; i++) {
//ciclo enumerativo esterno: per 3 volte ripetere le istruzioni chiuse fra le parentesi graffe che abbiamo scritto in rosso.
document.write('<tr>')
//scrivere il tag <tr>
for (j=1; j<=4; j++) {
//aprire il ciclo enumerativo interno: per 4 volte ripetere le istruzioni chiuse fra le parentesi graffe che abbiamo scritto in blu.
document.write('<td>');
//scrivere il tag <td>
document.write('a<sub>' + i + ',' + j +'</sub>');
//scrivere il testo 'a' seguito dal valore delle variabili i e j separate dalla virgola
document.write('</td>');
//scrivere il tag </td> (chiusura colonna)
}
//chiudere il ciclo interno
document.write('</tr>');
//scrivere il tag </tr> (chiusura riga)
}
//chiudere il ciclo esterno
document.write('</table>');
//scrivere il tag </table> (chiusura tabella)
document.close();
//Spiegazioni nella sezione "Facciamo il punto" a sinistra nella pagina
}
//fine funzione
Creiamo un bottone con il seguente codice, da inserire fra i tags <BODY> e </BODY> :(fai clic per selezionare il codice)
Otteniamo il seguente risultato:
Non è necessario inserire lo script in una funzione; noi l'abbiamo fatto solo per comodità. Inoltre, lo stile non è il massimo. Nella sezione PROVA TU , relativa alla costruzione di tabelle, vedrete uno script che si attiva senza bisogno di essere inserito in una funzione e potrete apportare al codice le correzioni desiderate, visualizzando immediatamente l'anteprima. Nel codice è stato poi inserito uno stile per migliorare l'output.
Vi invitiamo pertanto, se volete provare il vostro codice, a visionare la sezione
Non è necessario inserire lo script in una funzione; noi l'abbiamo fatto solo per comodità. Inoltre, lo stile non è il massimo.