Visualizzare tabelline da 1 a 10 in JavaScript

Le tabelline sono una parte essenziale dell'apprendimento matematico e sono spesso utilizzate per migliorare la comprensione e la memoria delle moltiplicazioni. In questa pagina, esploreremo come possiamo utilizzare JavaScript per visualizzare le tabelline da 1 a 10. Questo non solo aiuta a comprendere meglio le operazioni matematiche di base, ma fornisce anche un'introduzione pratica alla programmazione con JavaScript.

Implementazione in JavaScript

La visualizzazione delle tabelline da 1 a 10 richiede l'uso di cicli nidificati. Un ciclo esterno (da 1 a 10) può rappresentare il moltiplicatore, mentre un ciclo interno (anch'esso da 1 a 10) può rappresentare il numero con cui viene moltiplicato il moltiplicatore.

Vediamo come possiamo implementare questo in JavaScript:

function mostraTabelline() {
		for (let i = 1; i <= 10; i++) {
				console.log(`Tabellina del ${i}:`);
				for (let j = 1; j <= 10; j++) {
						console.log(`${i} x ${j} = ${i * j}`);
				}
				console.log('\n'); // Aggiunge una riga vuota per separare le tabelline
		}
}

mostraTabelline();

In questo codice, abbiamo definito una funzione mostraTabelline. All'interno di questa funzione, abbiamo due cicli for:

  • Il primo ciclo for (il ciclo esterno) itera i numeri da 1 a 10.
  • Il secondo ciclo for (il ciclo interno) è nidificato all'interno del primo e genera i prodotti per la tabellina corrente.

Visualizzare su pagina web le tabelline da 1 a 10

Se desideri visualizzare le tabelline su una pagina web invece che nella console, puoi modificare la funzione per manipolare il DOM (Document Object Model) di HTML. Ecco come potresti fare:

<!DOCTYPE html>
<html>
<head>
	<title>Tabelline da 1 a 10</title>
</head>
<body>
	<div id="tabelline"></div>

	<script>
		function mostraTabelline() {
				let contenuto = '';
				for (let i = 1; i <= 10; i++) {
					contenuto += `<h3>Tabellina del ${i}:</h3>`;
						for (let j = 1; j <= 10; j++) {
							contenuto += `${i} x ${j} = ${i * j}<br>`;
						}
						contenuto += '<br>'; // Aggiunge una riga vuota per separare le tabelline
				}
				document.getElementById('tabelline').innerHTML = contenuto;
		}

		mostraTabelline();
	</script>
</body>
</html>

In questo esempio, abbiamo usato innerHTML per inserire il contenuto generato dinamicamente all'interno di un elemento div con id="tabelline".

Visualizzare le tabelline da 1 a 10 in JavaScript è un esercizio eccellente per comprendere i concetti di cicli e annidamento. Sia che tu stia stampando nella console o visualizzando i risultati su una pagina web, JavaScript offre modi flessibili e potenti per lavorare con i dati e presentarli all'utente. Questo semplice esercizio dimostra quanto sia potente JavaScript per creare pagine web dinamiche e interattive.