Per semplicità stiamo usando il metodo document.write per stampare la nostra tavola pitagorica in JavaScript, ma potremmo usare anche i metodi per manipolare il DOM, divertendoci a creare dei nuovi elementi.
Il tutorial per manipolare gli elementi del DOM in JavaScript lo potete trovare al seguente link: DOM in JavaScript.
Tavola pitagorica JavaScript secondo esempio
Ecco un esempio della tavolta pitagorica implementata utilizzando i metodi createElement() e createTexnode().
Cliccate sul pulsante aggiungi tavola pitagorica sotto, per far apparire una tavola pitagorica 10 x 10.
Procedimento tavola pitagorica in JavaScript
Il codice html che ho utilizzato per creare l'esempio è composto da un button e un div dove far apparire la tavola pitagorica.
Il codice javascript rappresenta una funzione che al suo interno creo un tag tabella impostando l'attributo border a 1.
Poi utilizzando i due cicli for creo la tavola pitagorica dove all'interno di ogni cella inserisco, come nell'esempio precedente, il prodotto dei due indici.
Utilizzando il metodo appendChild appendo tutti gli elementi nella pagina html.
Ecco dunque il codice completo:
function aggiungi() {
var table = document.createElement("table");
table.setAttribute('border', 1)
for(let i=1; i <= 10; i++) {
var row = document.createElement("tr");
for(let j=1; j <= 10; j++) {
var col = document.createElement("td");
var testo = document.createTextNode(i * j);
col.appendChild(testo);
row.appendChild(col);
}
table.appendChild(row);
}
document.getElementById("tavola").appendChild(table);
}
Conclusione
In questa lezioni abbiamo sviluppato la tavola pitagorica in JavaScript utilizzando vari metodi.
JavaScript for cicli annidati – In questa lezione parleremo di cicli annidati con il ciclo for, cioè vedremo come utilizzare un ciclo dentro un altro ciclo.
Per spiegare il concetto di ciclo annidato proviamo a creare una tabella usando html e javascript.
JavaScript for cicli annidati – tabella
Supponiamo quindi di voler realizzare una tabella di 3 righe e 4 colonne dove in ogni cella scriveremo il valore della riga e della colonna.
Dovremmo ottenere quindi un risultato come quella della figura in basso:
Per procedere alla soluzione del seguente problema, innanzitutto apriamo il tag table a cui per comodità assegniamo un bordo pari a 1 e uno spazio tra il contenuto ed il bordo della tabella di 10 pixel.
Dopo, con un primo ciclo for esterno creiamo le tre righe. Dunque inizializziamo i ad 1 e inseriamo la condizione i<4.
Quindi inseriamo il tag di apertura della riga e sotto quello di chiusura con due istruzioni document.write differenti.
Tra il tag di apertura della riga e quello di chiusura inseriamo un altro ciclo for utilizzando una variabile j inizializzata a 1. Dopo impostiamo come condizione j<5 e incrementiamo j di 1.
All’interno di questo secondo ciclo inseriamo il tag per la cella e inseriamo il valore della riga e quello della colonna. Quindi chiudiamo il tag della colonna.
JavaScript for cicli annidati codice completo
Ecco di seguito il codice completo che presenta due cicli for, uno esterno ed uno interno.
In questo modo, quando il ciclo esterno verrà eseguito per la prima volta si scriverà il tag < tr > della prima riga. Dopo verrà eseguito il ciclo interno esattamente 4 volte, quindi si produrrà il seguente codice:
espressione1 in genere è un’inizializzazione come ad esempio: i=0.
espressione2 è una condizione, un test che restituisce un valore booleano.
mentre espressione3 di solito rappresenta un incremento oppure un decremento.
Le istruzioni all’interno delle parentesi graffe sono eseguite solo se l’espressione2 darà valore booleano true. Altrimenti il ciclo non verrà eseguito neanche una volta. Se l’espressione2, inoltre, è sempre vera allora le istruzioni all’interno delle parentesi graffe saranno eseguite all’infinito. Si dice dunque che il ciclo è infinito.
Primo esempio con JavaScript for
Visualizzare i numeri da 1 a 9 utilizzando il ciclo for.
Innanzitutto partiamo dalla prima espressione che è un’inizializzazione, Nel nostro caso possiamo utilizzare una variabile i che parte da 0.
La seconda espressione è il nostro test, cioè nel nostro caso i<10 in quanto il ciclo dovrà continuare finché non si arriva al numero 9.
La terza espressione è un incremento, nel nostro caso specifico è l’incremento della variabile i di 1.
All’interno del ciclo for inseriamo semplicemente una stampa della variabile i.
Ecco dunque il codice completo:
for(var i = 0; i < 10; i++){
console.log(i);
}
L’output prodotto da questo semplicissimo script sono i numeri da 0 a 9.
Secondo esempio con JavaScript for
Visualizziamo i numeri pari da 0 a 100.
I numeri pari si ottengono semplicemente incrementando il valore iniziale 0 di 2, quindi l’incremento diventa: i += 2.
Stampiamo poi sempre la nostra variabile i.
Quindi ecco la facile soluzione all’algoritmo proposto:
for(var i = 0; i <= 100; i += 2){
console.log(i);
}
Terzo esempio
Visualizziamo i numeri dispari da 1 a 99.
L’esercizio è simile al precedente, basta solo cambiare l’inizializzazione della variabile i.
Ecco dunque una possibile soluzione:
for(var i = 1; i < 100; i += 2){
console.log(i);
}
Questi sono solo alcuni esempi di esercizi con il ciclo for in JavaScript, nelle prossime lezioni proporrò tanti altri esempi.
