Nella programmazione, è sempre importante essere ordinati. Anche in JavaScript, c'è un ordine che si dovrebbe seguire per creare un file facilmente comprensibile sia per te che per un lettore esterno.
In questa lezione, vediamo come dividere un file JavaScript.
Divisione ottimale di un file
Il file dovrebbe essere sempre diviso in due sezioni:
Ecco un esempio di una buona divisione:
// Variabili e funzioni
let numero = 1;
let parola = "JavaScript";
function messaggio(testo){
alert(testo);
}
// Istruzioni
let mess = prompt("Inserisci il tuo messaggio da visualizzare:");
messaggio(mess);
let somma = numero + 34;
messaggio(somma);
Anche nella sezione Istruzioni puoi dichiarare le variabili, ma preferibilmente solo quelle che contengono risultati di un'istruzione. Ad esempio, il risultato di un prompt
.
Funzioni separate dal file
Una buona parte dei siti web preferisce dividere le funzioni dal file JavaScript principale. Per questo motivo, vengono creati file per ogni funzione dello script, e nominati con il nome della funzione.
Questa è una buona pratica, soprattutto se si hanno tante diverse funzioni.
Nel file HTML, possiamo inserire la richiesta di ogni script (che contengono le funzioni):
<!DOCTYPE html>
<html>
<head>
<title>Pagina di un sito</title>
<script src="funzione1.js"></script>
<script src="funzione2.js"></script>
<script src="funzione3.js"></script>
<script src="script-principale.js"></script>
<head>
<body>
<!-- Pagina -->
</body>
</html>
In questo caso, le funzioni sono tre: funzione1
, funzione2
e funzione3
. Sono state inserite nei file funzione1.js, funzione2.js, funzione3.js.
Ricorda di richiedere prima i file delle funzioni, poi lo script principale. Oppure, puoi utilizzare l'attributo defer.
<!DOCTYPE html>
<html>
<head>
<title>Pagina di un sito</title>
<script src="script-principale.js" defer></script>
<script src="funzione1.js"></script>
<script src="funzione2.js"></script>
<script src="funzione3.js"></script>
<head>
<body>
<!-- Pagina -->
</body>
</html>