logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Come dividere un file JavaScript

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

  • Variabili e funzioni: la sezione in cui puoi inserire tutte le variabili che dichiari e le funzioni che utilizzi all'interno dello script.
  • Istruzioni: la sezione che contiene il corpo dello script, con prompt, chiamate alle funzioni e molto altro.

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>