Pagina principale di Javascript

Tutto il codice visto fino veniva eseguito automaticamente dalla pagina, non c'era nessuna interazione con l'utente punto. La vera forza di Javascript consiste nel poter modificare la pagina attuale in risposta a delle azioni compiute dall'utente.

Queste interazioni con l'utente sono scaturite da degli eventi.

Eccone alcuni:

Quando si verifica un evento è possibile eseguire del codice Javascript, solitamente una funzione.

<!-- viene chiamta la funzione quando clicco sul bottone -->
<button onclick="funzioneJS()">Clicca</button>

<!--faccio qualcosa quando la pagina è carica -->
<body onload="start()">

Gli eventi vanno esplicitamente inseriti dentro i tag sui quali vogliamo porre l'attenzione usando l'attributo corrispondente all'evento.

Il metodo addEventListener è utilizzato per aggiungere un gestore di eventi a un elemento della pagina.

Quando un determinato tipo di evento si verifica sull'elemento, viene chiamato il gestore di eventi associato ed esegue il codice associato a quell'evento.

Anche questo metodo è utilizzato per rendere interattive le pagine web, consentendo di definire comportamenti specifici per vari eventi, come clic del mouse, pressioni del tasto, passaggi del mouse sopra un elemento e così via.

// Otteniamo un riferimento all'elemento del DOM tramite il suo ID
const myButton = document.getElementById('myButton');

// Aggiungiamo un gestore di eventi per il clic del mouse
myButton.addEventListener('click', function() {
    // Qui va il codice che si desidera eseguire quando l'evento avviene
    console.log('Il pulsante è stato cliccato!');
});

Un event listner molto utile è il DOMContentLoaded, che ci consente di associare del codice al caricamento della pagina:

document.addEventListener('DOMContentLoaded', function() {
    // Il codice da eseguire quando il documento è completamente caricato
    console.log('Il documento è stato completamente caricato.');
});

Il codice compreso tra le due parentesi graffe verrà eseguito solo se la pagina è stata completamente caricata.

Questo è utile per evitare di inserire il codice sempre sotto degli oggetti sui quali vogliamo operare.

Negli esempi di script visti fino ad ora, il codice che agiva su un elemento era inserito nelle linee succsive all'elemento stesso. Questo è dovuto al fatto che la pagina che viene letta dall'alto verso il basso, se non inesriamo lo scirpt sotto, l'oggetto a cui vogliamo fare rifermento non esiste.

Inserire il codice dentro il listener sull'evento DOMContentLoaded, fa sì che nel momento in cui viene eseguito uno script tutti gli elementi della pagina sono nel DOM. Quando un elemento esiste nel DOM può essere manipolato con Javascript.

Senza event listner

//non fuziona - prima script e poi HTML
<script>
    document.getElementById('div1').style.color = 'red'
</script>
<div id="div1"> Ciao </div>
//fuziona - prima HTML e poi script 
<script>
    document.getElementById('div1').style.color = 'red'
</script>
<div id="div1"> Ciao </div>

Usando l'event listner:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event listner</title>
    <script>
        //usando event listner possiamo scirivere tutto il codice nell'Head
        //o in file esterno
        document.addEventListener('DOMContentLoaded', function() {
            // Il documento è caricato
            document.getElementById('div1').style.color = 'red';
        });
    </script>
</head>
<body>
    <div id="div1"> Ciao </div>
</body>
</html>