Aiuto veloce quando non ti ricordi

Scheda riassuntiva 📌

I pezzi di codice più utili in un solo posto. Non devi memorizzarli – anche i programmatori veri guardano sempre le schede riassuntive! Puoi stamparla e tenerla accanto alla tastiera.

Non sai cosa significa una parola? → Glossario

🧱 HTML – lo scheletro della pagina

HTML dice al browser COSA c'è sulla pagina. I tag di solito si aprono <così> e si chiudono </così>.

<h1>My website</h1>

Il titolo più grande. Solo una volta per pagina – come il titolo di un libro.

<h2>Chapter</h2>

Un titolo più piccolo. Vanno da <h1> fino a <h6> (il più piccolo).

<p>Hi, this is text.</p>

Un paragrafo di testo normale.

<strong>important</strong>

Rende il testo in grassetto.

<em>interesting</em>

Testo in corsivo (inclinato).

<a href="https://example.com">Click</a>

Un link. href contiene l'indirizzo dove deve portare.

<img src="dog.jpg" alt="My dog">

Un'immagine. src = il file dell'immagine, alt = una descrizione nel caso non si carichi.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Un elenco puntato. Ogni voce è un <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Un elenco numerato – il browser aggiunge i numeri da solo.

<div class="card">...</div>

Una scatola per raggruppare cose che stanno insieme. Il nome della classe lo inventi tu.

<!-- note to myself -->

Un commento. Il browser lo ignora – è solo per te.

🎨 CSS – come appare la pagina

CSS dice COME appaiono le cose. Scegli COSA stilizzare (un selettore), poi scrivi COME dentro le parentesi graffe.

h1 {
  color: red;
}

Tutti i titoli <h1> saranno rossi.

.card {
  background: yellow;
}

Tutto ciò che ha class="card" avrà sfondo giallo. Il punto significa «cerca questa classe».

p {
  font-size: 20px;
}

La dimensione del carattere dei paragrafi. Numero più grande = testo più grande.

body {
  font-family: Arial;
}

Il carattere per tutta la pagina.

.card {
  padding: 16px;
}

Spazio interno – distanza tra il contenuto e il bordo della scatola.

.card {
  margin: 16px;
}

Spazio esterno – distanza dalle cose intorno.

.card {
  border: 2px solid black;
}

Un bordo: spessore, stile della linea e colore.

.card {
  border-radius: 12px;
}

Angoli arrotondati. Numero più grande = più rotondo.

.menu {
  display: flex;
  gap: 10px;
}

Gli elementi dentro si allineano in fila con 10px di spazio. Il trucco magico per i menu!

img {
  width: 200px;
}

La larghezza dell'immagine. L'altezza si adatta da sola così non si schiaccia.

🪄 JavaScript – il comportamento della pagina

JavaScript dice cosa deve SUCCEDERE – per esempio dopo un clic. Va dentro un tag <script> verso la fine della pagina.

const name = 'Kate';

Una variabile – una scatola con etichetta dove metti qualcosa.

let points = 0;
points = points + 1;

let è una scatola che puoi cambiare. Qui aggiungiamo un punto.

alert('Hi!');

Mostra una finestra di messaggio. Perfetto per i tuoi primi esperimenti.

console.log('it works');

Scrive un messaggio nella console (F12) – una finestra segreta per i programmatori.

document.querySelector('h1')

Trova il primo <h1> sulla pagina così puoi lavorarci.

element.textContent = 'New text';

Cambia il testo dentro l'elemento che hai trovato.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Quando qualcuno clicca sull'elemento, si esegue quello che c'è dentro.

if (points > 10) {
  alert('You won!');
}

Una condizione: il codice dentro si esegue solo se quello tra parentesi è vero.

element.classList.toggle("dark");

Aggiunge una classe se manca – e la toglie se c'è. È proprio così che funziona la modalità scura.

🤖 Fetch e API – per gli Inventori

Fetch scarica dati da internet (meteo, mappe, IA). Le risposte tornano in JSON – sembra un oggetto JavaScript.

const r = await fetch(address);

Invia una richiesta a un'API e aspetta (await) la risposta.

const data = await r.json();

Trasforma la risposta in un oggetto con cui puoi lavorare.

data.current_weather.temperature

Prendi un valore dall'oggetto con i punti – come con qualsiasi altro oggetto.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = inviare dati AL server. body contiene l'oggetto trasformato in testo.

{ "city": "Prague", "temperature": 21 }

JSON – il linguaggio comune delle API. Testo tra virgolette, numeri senza.

JSON.stringify(obj)

Trasforma un oggetto in testo JSON (prima di inviarlo).

JSON.parse(text)

Trasforma il testo JSON di nuovo in un oggetto (dopo averlo ricevuto).

process.env.AI_KEY

Sul server: legge una chiave segreta dal file .env. Le chiavi non vanno mai nel browser!

⌨️ Terminale e Git – per i Maestri e gli esperti di Dati

Il terminale è una finestra dove scrivi comandi di testo al computer. Git ricorda la storia del tuo codice.

cd my-website

Entra nella cartella my-website (cd = change directory, cambia cartella).

ls

Elenca cosa c'è nella cartella attuale (su Windows: dir).

node server.js

Esegue il file server.js con Node.js.

npm install

Scarica tutti i pacchetti di cui il progetto ha bisogno.

git status

Mostra cosa è cambiato nel progetto dall'ultimo salvataggio.

git add .

Prepara tutte le modifiche da salvare (il punto significa «tutto»).

git commit -m "Added a menu"

Salva le modifiche nella storia con una nota su cosa hai fatto.

git push

Invia le modifiche salvate su GitHub.

💡

Come usare questa scheda: Se in una lezione trovi un tag o un comando e non sai cosa fa – cercalo qui. Se non capisci una parola, guarda il Glossario.