Javascript

class: center, middle
# Introduzione a JavaScript

---

# Variabili
- Usi let per variabili normali
- Usi const per costanti
- var è obsoleta
- Scope controlla dove la variabile vive

```js
let x = 10;
const nome = "Davide";
```

---

# Tipi di Dato
- Number per numeri
- String per testo
- Boolean per vero/falso
- Array e Object per collezioni
- null / undefined significano “assenza”

```js
let n = 3.14;
let s = "Ciao";
let ok = true;
```

---

# Sintassi Base
- Istruzioni generalmente separate da ;
- Blocchi delimitati da { }
- JavaScript è case sensitive
- Commenti con // o /* */

```js
let a = 5; // commento
```

---

# if
- Esegue codice solo se la condizione è vera
- else if gestisce più condizioni
- === è il confronto “serio” e preciso
- Utile per scelte logiche

```js
if(x === 10){
    console.log("dieci");
}
```

---

# while
- Ripete finché la condizione resta vera
- Rischio loop infinito se sbagli
- Utile per cicli non predefiniti
- L'incremento viene fatto manualmente da codice

```js
let i = 0;
while(i < 3){
    console.log(i);
    i++;
}
```

---

# for
- Ciclo classico con contatore
- Perfetto per iterazioni numeriche
- Tre parti: init; condizione; incremento
- Pulito e leggibile

```js
for(let i = 0; i < 5; i++){
    console.log(i);
}
```

---

# switch
- Alternativa a molti if
- Ogni caso vuole un break
- Default per gestione extra
- Elegante se hai molti valori fissi

```js
switch(giorno){
    case 1: console.log("Lun"); break;
    case 2: console.log("Mar"); break;
    default: console.log("Altro");
}
```

---

# Array
- Collezione ordinata di elementi
- Accesso tramite indici
- Metodi pratici per manipolarlo
- Può crescere dinamicamente

```js
let arr = [1,2,3];
```

---

# Array: push / pop
- push() aggiunge alla fine
- pop() rimuove l’ultimo
- Ideale come stack
- rapido da usare

```js
arr.push(4);
let x = arr.pop();
```

---

# Array: shift / unshift
- shift() rimuove il primo
- unshift() aggiunge all’inizio
- Utile per code
- un po’ più costoso di push/pop

```js
arr.unshift(0);
let y = arr.shift();
```

---

# Funzioni
- Blocco di codice riutilizzabile
- Possono restituire valori
- Accettano parametri
- Arrow function più snelle

```js
function somma(a,b){
    return a+b;
}
```

```js
// arrow function
const somma = (a,b) => {
    return a+b;
}
```

---

# Variabili Locali / Globali
- Locali: valide solo nel blocco o funzione
- Globali: visibili ovunque (da evitare)
- Scope riduce conflitti
- Const previene la modifica ai valori

```js
let globale = 10;
function test(){
    let locale = 5;
    console.log(globale, locale); // stampa 10 e 5
}

test();
console.log(locale); // errore, qua 'locale' non è visibile

```

---

# Oggetti JavaScript
- Strutture chiave-valore
- Permettono di modellare dati complessi
- Metodi: funzioni interne all'oggetto
- Utile per rappresentare entità reali

```js
let persona = {
    nome: "Davide",
    saluta: function(){
        console.log("Ciao!");
    }
};

console.log(persona.nome); // stampa 'Davide'
persona.saluta(); // stampa "Ciao!"

```

---

# document.getElementById
- Seleziona un elemento della pagina
- Restituisce un oggetto DOM
- Permette di modificarlo
- Metodo fondamentale

```js
let t = document.getElementById("titolo");
t.innerText = "Nuovo testo";
```

---

# Input: valore
- value permette di leggere un input
- Sempre una stringa
- Facile da impostare dinamicamente
- Usato nei form

```js
let i = document.getElementById("nome");
i.value = "Davide";
```

---

# textContent
- Serve per testo interno di div/span
- Non interpreta HTML
- Sicuro contro injection
- Comodo per scrivere testo

```js
let box = document.getElementById("descr");
box.textContent = "Hello there";
```

---

# Canvas
- Elemento grafico HTML5
- Perfetto per giochi e animazioni
- Richiede contesto 2D
- Disegni tutto via API

```js
let canvas = document.getElementById("c");
let ctx = canvas.getContext("2d");
```

---

# Canvas: Rettangoli
- fillRect disegna un rettangolo pieno
- strokeRect disegna solo il bordo
- fillStyle imposta il colore
- Usato spesso come base grafica

```js
ctx.fillStyle = "red";
ctx.fillRect(10,10,50,50);
```

---

# Canvas: Testo
- Usare font per impostare stile
- fillText stampa il testo
- Posizione con coordinate
- Utile per HUD nei giochi

```js
ctx.font = "20px Arial";
ctx.fillText("Ciao", 20, 40);
```

---

# Canvas: Immagini
- new Image() per creare immagine
- onload attende la caricazione
- drawImage la disegna sul canvas
- Usata per sprite nei giochi

```js
let img = new Image();
img.src = "sprite.png";
img.onload = () => ctx.drawImage(img, 0, 0);
```

---

# Gameloop
- requestAnimationFrame è fluido
- clearRect pulisce il canvas
- update e draw ogni frame
- Struttura base di ogni gioco

```js
function loop(){
    ctx.clearRect(0,0,300,300);
    // update & draw
    requestAnimationFrame(loop);
}
loop();
```