Ci viene in aiuto il linguaggio HTML: si tratta di costruire una tabella e di inserire opportunamente i vari prodotti.
Prepariamo la funzione JavaScript che ci occorre con il seguente codice, da inserire fra i tags <HEAD> ed </HEAD> :
<script language=JavaScript>
function tabellina1() {
document.write('<table cellpadding=2 cellspacing=4 border=1>')
for (i=1; i<=10; i=i++) {
document.write('<tr>')
for (j=1; j<=10; j++) {
document.write('<td align=right>' + i*j);
}
}
document.write(</table>)
}
</script>
Si tratta di inserire una tabella fuori dal ciclo; in corrispondenza dell'indice i creiamo una riga mentre in corrispondenza del'indice j creiamo una colonna. In questo modo si forma una tabella di dieci righe × dieci colonne. Chiuso il ciclo inseriamo la chiusura della tabella (</table>).
Creiamo un bottone con il seguente codice, da inserire fra i tags <BODY> e </BODY> :
<form name="Mioform">
<input type=button value="Clicca" name="bottone" OnClick="javascript:tabellina1()">
</form>
Otteniamo il seguente risultato:
|
Costruiamo ora la tabella dell'addizione, sempre per i numeri che vanno da 1 a 10, migliorando l'output: in alto a sinistra inseriamo il simbolo dall'operazione e continuiamo sia la prima riga che la prima colonna scrivendo i numeri che vogliamo addizionare; per una migliore visualizzazione cambiamo il colore della prima riga e della prima colonna. Il risultato si ottiene con il seguente codice, da inserire fra i tags <HEAD> ed </HEAD> :
<script language=JavaScript>
function tabellina2() {
document.write('<table cellpadding=6 cellspacing=1 border=1>')
document.write('<tr><td bgcolor=gold><font color=navy size=1><b><p align=center>+</b></p>')
for (i=1; i<=10; i++){
document.write('<td align=right bgcolor=#cccccc><font color=red size=1>'+i)
}
for (i=1; i<=10; i=i++) {
document.write('<tr><td align=right bgcolor=#cccccc><font color=red size=1>' + i);
for (j=1; j<=10; j++) {
bo=eval(i+j)
document.write('<td align=right><font color=navy size=1>' + bo);
}
}
document.write('</table>')
}
</script>
Dopo aver dichiarato la tabella, inseriamo la prima riga: la prima colonna di questa riga, con sfondo color oro (gold), contiene il simbolo +; un ciclo semplice permette l'inserimento di dieci celle ognuna delle quali contiene un numero (da 1 a 10); di seguito, attraverso un ciclo nidificato, inseriamo 10 righe × 11 colonne: la prima colonna, di sfondo grigio, contiene anche essa i numeri da 1 a 10, le altre le somme.
Creiamo un bottone con il seguente codice, da inserire fra i tags <BODY> e </BODY> :
<form name="Mioform1">
<input type=button value="Clicca" name="bottone" OnClick="javascript:pari()">
</form>
Otteniamo il seguente risultato:
|
