Lezione 2: Console, script tag e defer

Seconda lezione del nostro corso JavaScript: esplora l'uso della console per il debug e scopri come includere script con i tag <script> e l'attributo defer.

Lezione 2: Console, Tag `<script>` e `defer`

Benvenuti alla seconda lezione del nostro corso "Impara JavaScript in 50 lezioni"! Nella lezione precedente abbiamo mosso i primi passi nel mondo di JavaScript. Oggi approfondiremo alcuni concetti fondamentali per iniziare a scrivere ed eseguire il nostro codice: l'uso della console per il debug e le diverse modalità di inclusione degli script in una pagina HTML.

1. La Console JavaScript: Il Tuo Migliore Amico per il Debug

La console del browser è uno strumento indispensabile per ogni sviluppatore web. Ti permette di eseguire codice JavaScript, visualizzare messaggi e, soprattutto, identificare e correggere errori (debug).

Come aprirla?

La maggior parte dei browser moderni (Chrome, Firefox, Edge, Safari) offre strumenti per sviluppatori integrati. Di solito, puoi aprirli premendo F12 o facendo clic con il tasto destro sulla pagina e selezionando "Ispeziona" o "Ispeziona elemento", quindi navigando alla scheda "Console".

Cosa puoi farci?

Eseguire comandi: Puoi digitare direttamente comandi JavaScript e vedere il risultato.
Visualizzare messaggi: Puoi usare console.log() per stampare informazioni utili.
Individuare errori: Se il tuo codice JavaScript genera un errore, la console te lo segnalerà con un messaggio e spesso un riferimento alla riga di codice problematica.

Esempio Pratico:

Apri la console del tuo browser e digita:

console.log('Ciao dal corso JavaScript!');
let nome = 'Alice';
console.log('Il mio nome è:', nome);

Dovresti vedere i messaggi stampati nella console.

2. Includere JavaScript in HTML: Il Tag `<script>`

Per far sì che il browser esegua il nostro codice JavaScript, dobbiamo includerlo all'interno di una pagina HTML. Il modo più comune per farlo è utilizzare il tag <script>.

Ci sono due modi principali per usare il tag <script>:

Script Inline: Scrivere il codice JavaScript direttamente all'interno del tag <script>.
Script Esterno: Collegare un file .js esterno tramite l'attributo src.

2.1 Script Inline

Puoi inserire il tuo codice JavaScript direttamente nel file HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Script Inline</title>
</head>
<body>
  <h1>Esempio Script Inline</h1>
  <script>
    console.log('Questo è uno script inline!');
    alert('Ciao!'); // alert() mostra un popup
  </script>
</body>
</html>

Attenzione: L'uso eccessivo di script inline rende il codice meno manutenibile e più difficile da organizzare. È generalmente preferibile usare file esterni.

2.2 Script Esterno

Questo è l'approccio più comune e consigliato. Crei un file separato (ad esempio, script.js) e lo colleghi all'HTML:

File index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Script Esterno</title>
</head>
<body>
  <h1>Esempio Script Esterno</h1>
  <script src="script.js"></script>
</body>
</html>

File script.js:

console.log('Questo script viene da un file esterno!');
alert('Script esterno caricato!');

Quando il browser incontra il tag <script src="script.js"></script>, scarica il file script.js e lo esegue.

3. L'Attributo `defer`: Un Miglioramento Cruciale

Per impostazione predefinita, quando il browser incontra un tag <script> (specialmente se collegato a un file esterno), interrompe il parsing dell'HTML, scarica lo script e lo esegue prima di continuare a costruire la pagina. Questo può causare un rallentamento nel caricamento della pagina, soprattutto se lo script è grande o la connessione è lenta.

Qui entra in gioco l'attributo defer.

Cosa fa defer?

Quando aggiungi defer a un tag <script>, dici al browser:

Scarica lo script in parallelo mentre continui a parsare l'HTML.
Esegui lo script solo dopo che tutto l'HTML è stato completamente parsato, ma prima che l'evento DOMContentLoaded venga scatenato.
Gli script con defer vengono eseguiti nell'ordine in cui appaiono nel documento.

Esempio con defer:

<!DOCTYPE html>
<html>
<head>
  <title>Script con Defer</title>
  <script src="script1.js" defer></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <h1>Contenuto della pagina</h1>
  <!-- Altro HTML -->
</body>
</html>

In questo esempio, script1.js e script2.js verranno scaricati contemporaneamente mentre il browser costruisce il corpo della pagina. Verranno poi eseguiti uno dopo l'altro, prima che il browser dichiari che il DOM è pronto.

Perché usare defer?

Migliora le performance: La pagina viene visualizzata più velocemente perché il caricamento degli script non blocca il rendering dell'HTML.
Evita errori: Garantisce che gli script che manipolano elementi HTML vengano eseguiti solo dopo che quegli elementi sono stati creati e sono disponibili nel DOM.

Quando NON usare defer?

Se hai uno script che deve essere eseguito immediatamente durante il parsing dell'HTML (cosa rara per gli script di applicazione, più comune per script di analytics o funzionalità di base), potresti posizionarlo alla fine del <body> senza defer. Tuttavia, defer è quasi sempre la scelta migliore per script esterni.

Riassunto

La console è fondamentale per visualizzare messaggi e debuggare il codice JavaScript.
Il tag <script> viene usato per includere codice JavaScript in HTML, sia inline che da file esterni.
L'attributo defer migliora le performance caricando ed eseguendo gli script in modo non bloccante, dopo il parsing completo dell'HTML.

Nella prossima lezione, inizieremo a vedere le prime variabili e i tipi di dato in JavaScript. Continuate a esercitarvi con la console e provate a includere script con defer nelle vostre pagine HTML!

Impara JavaScript: Console, Script Tag e Defer (Lezione 2)

Lezione 2: Console, Tag <script> e defer