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:
JavaScript for – In questa lezione parleremo del ciclo for in JavaScript e faremo alcuni esempi di utilizzo per capirne meglio il funzionamento.
In JavaScript, il ciclo for è una struttura di controllo che permette di iterare su una sequenza di elementi o di eseguire un blocco di codice un certo numero di volte.
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.
Visualizzare i numeri da 1 a 9 utilizzando il ciclo for.
for(let i = 0; i < 10; i++){
console.log(i);
}
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.
Dunque l’output prodotto da questo semplicissimo script rappresenta i numeri da 0 a 9.
Analogamente potremmo stampare i numeri in senso decrescente:
for (let i = 9; i >= 0; i--) {
console.log(i);
}
In questo caso abbiamo:
let i = 9; inizializza la variabile i al valore iniziale di 9.
i >= 0; è la condizione di continuazione: il ciclo continuerà finché i è maggiore o uguale a 0.
i-- è il decremento: diminuisce il valore di i di 1 ad ogni iterazione.
Secondo esempio con il ciclo for in JavaScript
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(let 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(let i = 1; i < 100; i += 2){
console.log(i);
}
Quando usare il ciclo for
Il ciclo for in JavaScript è utilizzato quando è necessario eseguire un blocco di codice un numero specifico di volte o quando si vuole iterare su una sequenza di elementi, come ad esempio gli elementi di un array.
Commenti recenti