Cos'è JavaScript e il tuo primo script

Conosci la terza lingua del web e scrivi il tuo primo script che parla con la console del browser.

Le tre lingue del web

Dal Livello 1 conosci due lingue:

HTML – lo scheletro della pagina (cosa c’è sopra),
CSS – l’aspetto (come appare).

La terza e ultima lingua è JavaScript – il comportamento (cosa succede quando…). Quando clicchi ▶ su YouTube e il video parte, quando un negozio online calcola un prezzo, quando un gioco tiene il punteggio – è tutto JavaScript.

Dove vive JavaScript

JavaScript vive in un file proprio, proprio come il CSS. Lo colleghi alla pagina con un tag <script> – mettilo proprio alla fine di <body>, appena prima di </body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

Perché alla fine? Il browser legge la pagina dall’alto in basso. Quando lo script è in fondo, l’intera pagina esiste già, e lo script può lavorarci subito.

Te lo mostro: il tuo primo script

Nella cartella my-web, crea un file chiamato script.js e scrivi dentro:
```
console.log("Hi, this is your website!");
```
In index.html, aggiungi la riga <script src="script.js"></script> proprio prima di </body> e salva entrambi i file.
Apri la pagina nel browser e premi F12 (su Mac, Cmd+Alt+I). Si apre un pannello per sviluppatori – clicca la scheda Console.

Vedi “Hi, this is your website!”? Il tuo primo JavaScript funziona! 🎉

La console è una stanza segreta nel browser dove i programmatori chiacchierano con la pagina. I visitatori non la vedono mai – è solo per te. console.log(...) significa “stampalo nella console.” La userai sempre: è il modo migliore per capire cosa succede dentro lo script.

La console sa fare anche i calcoli

Prova a scrivere questo direttamente nella console (premi Invio dopo ogni riga):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript è anche una calcolatrice – somma i numeri e incolla i testi (chiamati stringhe, li riconosci dalle virgolette) uno dopo l’altro.

Ora tocca a te 💪

Aggiungi script.js a ogni pagina del tuo sito web (proprio come una volta hai aggiunto style.css).
Fai stampare allo script il nome del tuo sito web nella console e calcola quante ore mancano alle vacanze estive – per esempio, console.log("Hours left until vacation:", 48 * 24);.
Fai apposta un errore – cancella una virgoletta e salva. Guarda com’è l’errore nella console (testo rosso con numero di riga). Poi correggilo. È un’abitudine importante: la console ti dirà sempre dove sta il problema.

✅

Controlla da solo: Quando apri qualsiasi pagina del sito web, il tuo messaggio appare nella console. Sai aprire la console e com’è un errore. Questa è tutta la base – dalla prossima lezione iniziamo a fare magia sulla pagina.

Cosa porti via da questa lezione

JavaScript = la terza lingua del web: comportamento. Si scrive in un file script.js e si collega con un tag <script src="..."> prima di </body>.
La console (F12) è la tua finestra sullo script: console.log() stampa cose, gli errori appaiono in rosso con un numero di riga.
Il testo tra virgolette è una stringa, e le stringhe si incollano con +. I numeri si possono calcolare.