1. Tag <script>
Prima di immergerci nello studio dettagliato di HTML, mi piacerebbe presentarti un'altra cosa fantastica: il linguaggio JavaScript.
JavaScript è un linguaggio di programmazione potente, usato per creare pagine web dinamiche e interattive. Ti permette di rispondere alle azioni dell'utente, modificare il contenuto delle pagine web, interagire con i server e in molti altri modi migliorare l'esperienza utente sui siti web.
Adesso non studieremo JavaScript in dettaglio, ma ogni tanto lo aggiungerò negli esempi, quindi lascia che ti spieghi come JavaScript si integra in un documento HTML.
Il tag <script>; viene usato per integrare il codice
JavaScript in un documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduzione a JavaScript</title>
</head>
<body>
<h1>Benvenuto sul mio sito!</h1>
<script>
// Inserisci qui il tuo codice JavaScript
alert('Ciao, mondo!');
</script>
</body>
</html>
In questo esempio viene utilizzato il tag <script>
per integrare un semplice codice JavaScript che mostra una finestra popup
con il messaggio "Ciao, mondo!".
2. Collegare uno script
A volte è meglio conservare il codice JavaScript
in un file separato. Questo migliora
l'organizzazione del codice e il suo riutilizzo. Per collegare un file
JavaScript si usa sempre il tag <script>, ma con
l'attributo src si può indicare il nome del file JavaScript.
Collegamento di un file JavaScript esterno:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduzione a JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Benvenuto sul mio sito!</h1>
</body>
</html>
Questo file HTML suggerisce al browser di collegare un file JavaScript chiamato script.js, che potrebbe contenere lo stesso codice dell'esempio precedente:
//script.js:
// Inserisci qui il tuo codice JavaScript
alert('Ciao, mondo!');
L'attributo defer viene usato per indicare al browser di
eseguire lo script solo dopo che l'intero documento HTML è stato caricato e
visualizzato.
3. Codice Inline
Ricordi come scrivevamo gli stili CSS direttamente all'interno dell'attributo style di un elemento?
<p style="color:red"> Rosso</p>
Allo stesso modo, si può scrivere il codice JavaScript.
Supponiamo di voler fare in modo che un elemento cambi colore in blu quando viene cliccato. Allora dobbiamo scrivere questo codice:
<p style="color:red" onclick="this.style.color = 'blue';">Rosso</p>
In verde è evidenziato il codice JavaScript,
che verrà eseguito quando l'utente cliccherà sull'elemento <p>. Facile, vero?
-
onclick: Attributo HTML che specifica la funzione eseguita al clic sull'elemento. this: Riferimento all'elemento cliccato.-
style.color: Proprietà CSS che cambia il colore del testo dell'elemento.
GO TO FULL VERSION