Passa al contenuto principale

Pyramid Generator

Anteprima Pyramid Generator Project

Il Progetto​

Generatore di piramidi sviluppato con concetti introduttivi di JavaScript, focalizzato su funzioni, loop, condizioni e manipolazione di array per creare pattern di ASCII art.

I started JavaScript enthusiastically, but the enthusiasm quickly faded in the first steps. The syntax, variables, basic concepts didn't give me that sense of "control" I had developed with CSS.

Codice Sorgente​

const character = "!";
const count = 10;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return " ".repeat(rowCount - rowNumber) + character.repeat(2 * rowNumber - 1) + " ".repeat(rowCount - rowNumber);
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = ""

for (const row of rows) {
  result = result + row + "\n";
}

console.log(result);

Ho iniziato JavaScript con entusiasmo, ma questo è svanito rapidamente nei primi passi. La sintassi, le variabili e i concetti di base non mi davano quella sensazione di “controllo” che avevo sviluppato con il CSS.

Il Punto di Svolta​

La svolta è arrivata con l’introduzione dei concetti di controllo del flusso – if ed else. All’improvviso ho visto la struttura logica dietro ogni decisione del codice. Non era più sintassi da memorizzare, ma logica applicata: “se questa condizione è vera, fai questo, altrimenti fai quello”.

Ho percepito questi costrutti come naturali, nonostante non avessi mai programmato prima. È stato come se il mio cervello avesse finalmente riconosciuto un linguaggio che parlava la sua stessa lingua: quella delle decisioni logiche.

L’Approccio Metodico​

Pur avendo approfondito la maggior parte degli step con il Code Tutor per garantire una comprensione profonda ed evitare lacune, ho mantenuto una regola ferrea: approfondire solo dopo aver completato lo step.

Risultato: in sole tre occasioni su 118 step ho dovuto chiedere aiuto al Code Tutor. Questo dimostra che l’approccio “prima completare, poi approfondire” funziona.

La Mancanza del Lato Visivo​

Mi manca il lato visivo, lo ammetto. Non sono soddisfatto di console.log, non sono soddisfatto di “parlare con me stesso” tramite il computer. Voglio che il computer parli con gli utenti.

Il Ritorno dell’Entusiasmo​

Non sono stati solo i concetti di if ed else a ridarmi energia, ma anche la prospettiva dell’integrazione di JavaScript con HTML e CSS. Sbirciando i prossimi progetti ho visto che a partire dal terzo progetto mescoleremo JavaScript con HTML e CSS.

Finalmente potrò vedere i risultati della mia logica in azione nell’interfaccia utente, non più limitati a console.log.

Non vedo l’ora di aggiornare il real-world-handbook con gli ultimi concetti JavaScript appresi!

Cosa Ho Imparato​

1. Fondamenti delle Variabili:

  • let vs const – quando usare variabili riassegnabili o costanti
  • undefined – stato delle variabili non inizializzate
  • Scope – variabili globali vs locali

2. Tipi di Dato:

  • Stringhe – apici singoli vs doppi, concatenazione, .repeat()
  • Numeri – operazioni aritmetiche, uso nei calcoli
  • Booleani – true/false, valori falsy ("", 0, false)

3. Array – Le Collezioni:

  • Creazione e accesso tramite indice [0], [1]
  • .push() – aggiungere alla fine
  • .unshift() – aggiungere all’inizio
  • .length – proprietà per la lunghezza

4. Funzioni – I Blocchi Riutilizzabili:

  • Dichiarazione e invocazione
  • Parametri multipli (es.: padRow(rowNumber, rowCount))
  • Return statement per restituire valori
  • Scope locale – variabili interne alle funzioni

5. Controllo del Flusso:

  • if/else – condizioni base e multiple
  • Operatori di confronto (<, >, <=, ==, ===, !==)
  • Differenza tra uguaglianza debole (==) e stretta (===)

6. Loop – Le Ripetizioni:

  • for classico – inizializzazione, condizione, incremento
  • while – con condizioni complesse
  • for...of – per iterare sugli array
  • Operatori di incremento (i++, i+=, i--)

7. Operatori:

  • Aritmetici (+, -, *, precedenza degli operatori)
  • Di assegnazione (=, +=, -=)
  • Concatenazione di stringhe con +

8. Console e Output:

  • console.log() per output e debug
  • Test di valori e funzioni

9. Commenti:

  • Singola riga (//) e multi-linea (/* */)
  • Best practice per la documentazione

10. Pattern e Costrutti Pratici:

  • Boolean flag per il controllo del flusso (inverted)
  • Accumulo del risultato (result = result + row + "\n")
  • Formula matematica per i pattern (2 * rowNumber - 1)
  • Decisioni condizionali nei loop (if dentro il for)

11. Best Practice Osservate:

  • Naming convention camelCase
  • Refactoring progressivo da codice ripetitivo a DRY
  • Testing incrementale con console.log

Riflessione​

JavaScript inizialmente mi è sembrato astratto rispetto alla concretezza visiva di HTML e CSS. Al momento sto ancora lavorando con console.log e non ho ancora visto JavaScript in azione con la manipolazione del DOM, ma la prospettiva di far reagire le interfacce alle azioni dell’utente mi incuriosisce moltissimo.

Il console.log è solo l’inizio: quando vedrò finalmente questa logica dare vita a esperienze utente interattive, capirò davvero la potenza di questo linguaggio.

Prossimo Progetto: Ripassare i fondamenti di JavaScript costruendo una Gradebook App