Interno esterno JavaScript: Impara con l'esempio

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Interno ed esterno JavaQuesto articolo descrive i due posizionamenti supportati per il codice script all'interno di un progetto web. Confronta i due approcci, mostra esempi funzionanti, spiega il collegamento corretto con async e defer e indica quando ciascun posizionamento offre una migliore manutenibilità e prestazioni superiori.

  • 📄 Collocamento interno: Code Si trova tra i tag script all'interno del documento HTML e viene caricato con la pagina che lo possiede.
  • 🗂️ Collocamento esterno: Code risiede in un file .js separato, a cui si fa riferimento tramite l'attributo src, quindi molte pagine condividono un unico file sorgente.
  • 🔗 Regola di collegamento: Un tag script esterno deve essere sempre chiuso e il percorso src viene risolto rispetto al documento HTML, a meno che non venga fornito un percorso completo.
  • ⚙️ Controllo del caricamento: L'attributo `defer` esegue il file dopo che l'analisi HTML è completata, mentre `async` lo esegue non appena il download è terminato.
  • 🚀 Vantaggio della memorizzazione nella cache: I file esterni vengono memorizzati nella cache dal browser una sola volta e riutilizzati in tutte le pagine che vi fanno riferimento.
  • 🧭 Criterio di selezione: Mantieni la logica breve specifica per la pagina all'interno del file e sposta la logica condivisa o lunga in un file esterno per facilitare il debug.
  • 🚫 Manipolatori in linea: I gestori basati su attributi come onclick mescolano markup e comportamento e dovrebbero essere sostituiti da addEventListener.
Scopri di più

Interno ed esterno JavaCopione

Che cosa sono interno ed esterno? JavaCopione?

Puoi usare JavaScrivere il codice in due modi.

  1. Puoi includere il file JavaCodice script internamente all'interno del documento HTML stessa.
  2. Puoi mantenere il JavaCodice script in un file esterno separato e quindi punta a quel file dal tuo documento HTML.

Entrambi i posizionamenti eseguono esattamente lo stesso linguaggio e producono lo stesso risultato nel browser. La differenza sta in dove viene memorizzato il codice sorgente, in come il browser lo scarica e con quanta facilità il codice può essere riutilizzato e mantenuto all'interno di un sito web.

Cos'è Interno JavaCopione?

Interno JavaUno script è un codice scritto direttamente all'interno di una coppia di tag `<script>` nel file HTML. Il browser legge il markup dall'alto verso il basso e, quando raggiunge il tag `<script>`, esegue immediatamente le istruzioni, senza ulteriori richieste di rete.

Finora abbiamo utilizzato JS interno. Ecco un esempio –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Produzione:

Today is Wednesday.

Il giorno stampato cambia in base all'orologio di sistema del visitatore, perché la funzione getDay restituisce un numero da 0 per la domenica a 6 per il sabato, e tale numero viene utilizzato come indice nell'array dei giorni della settimana.

Cos'è l'Esterno JavaCopione?

Hai intenzione di visualizzare la data e l'ora correnti in tutte le tue pagine web. Supponiamo che tu abbia scritto il codice e lo abbia copiato in tutte le tue pagine web (diciamo 100). Ma in seguito, vuoi cambiare il formato in cui vengono visualizzate la data o l'ora. In questo caso, dovrai apportare le modifiche a tutte le 100 pagine web. Questo sarà un compito molto lungo e difficile.

Quindi, salva il JavaCopione codice in un nuovo file con estensione .js. Quindi, aggiungi una riga di codice in tutte le tue pagine web per puntare al tuo file .js in questo modo:

<script type="text/javascript" src="currentdetails.js"></script>

Note:Si presume che il file .js e tutte le pagine web si trovino nella stessa cartella. Se il file external.js si trova in una cartella diversa, è necessario specificare il percorso completo del file nell'attributo src. </script> Il tag <script> è obbligatorio anche se l'elemento non ha contenuto, perché un tag script auto-chiudente non è HTML valido e il resto della pagina verrebbe inghiottito dall'elemento non terminato.

Questo è il codice da inserire all'interno di currentdetails.js:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Questo è il tuo file currentdetails.js. Non preoccuparti se vedi lunghe righe di codice. Imparerai presto a programmare. Apporta le modifiche al tuo documento HTML in questo modo:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️ Attenzione: Lo script legacy sopra premette a ogni ora uno zero, quindi le 11 del mattino vengono visualizzate come 011. Assegna anche hours1 senza dichiararla, il che crea una variabile globale implicita e genera un errore in modalità rigorosa. La versione corretta riportata di seguito risolve entrambi i difetti.

Una versione moderna dello stesso file è più breve, dichiara tutte le variabili e riempie correttamente i valori:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Output di esempio:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

ARTICOLI CORRELATI

Come collegare un esterno JavaFile di script corretto

Tre elementi determinano se un file esterno viene caricato o meno: il percorso specificato nell'attributo src, la posizione del tag script nel documento e l'attributo loading applicato ad esso.

I percorsi vengono risolti rispetto al documento HTML, a meno che non venga fornito uno slash iniziale o un indirizzo completo.

Valore sorgente Significato Delibera di
currentdetails.js Nella stessa cartella della pagina HTML /pages/currentdetails.js
js/currentdetails.js Sottocartella della cartella corrente /pages/js/currentdetails.js
../currentdetails.js Una cartella sopra quella corrente /currentdetails.js
/assets/js/currentdetails.js Percorso assoluto dalla directory principale del sito /assets/js/currentdetails.js

L'attributo loading controlla quando il browser interrompe l'analisi dell'HTML per eseguire il file. La tabella seguente riassume i tre comportamenti disponibili.

Attributo Scaricare Momento dell'esecuzione Ordine conservato
Nona Blocca l'analisi HTML Subito dopo il download Si
differire Parallelamente all'analisi sintattica Dopo l'analisi del documento Si
async Parallelamente all'analisi sintattica Non appena il download termina Non 
<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

Suggerimento: Migliori type="text/javascript" L'attributo è facoltativo in HTML5 e può essere omesso. Mantienilo solo quando supporti browser molto vecchi, oppure sostituiscilo con type="module" quando si utilizzano le istruzioni di importazione ed esportazione.

Interno vs Esterno JavaSceneggiatura: Differenze chiave

Il confronto che segue mette a confronto entrambe le posizioni in base ai fattori che solitamente determinano la scelta.

Fattore Interno JavaCopione Esterno JavaCopione
Posizione di archiviazione All'interno del file HTML File separato con estensione .js
Riutilizzo tra le pagine Richiede la copia in ogni pagina Un file a cui fa riferimento ogni pagina
Memorizzazione nella cache del browser Scaricato nuovamente con ogni pagina Memorizzato nella cache una sola volta e riutilizzato
Sforzo di manutenzione Elevato quando il codice viene condiviso Basso, un solo file da modificare
Richiesta ExtraHT Non Sì, uno per file
Debug Più difficile in un file HTML lungo È più semplice con nomi di file e numeri di riga chiari.
adatto per Logica breve specifica per la pagina Librerie condivise e script lunghi

Quando utilizzare interno ed esterno JavaCopione Code?

Se hai solo poche righe di codice specifiche per una particolare pagina web, è meglio mantenere il tuo JavaInserisci il codice internamente al tuo documento HTML.

D'altra parte, se il tuo JavaIl codice script viene utilizzato in molte pagine web, quindi dovresti considerare di mantenerloping Inserisci il tuo codice in un file separato. In questo modo, se desideri apportare delle modifiche al codice, dovrai modificare un solo file, semplificando la manutenzione. Se il codice è molto lungo, è consigliabile mantenerlo in un file separato, in quanto facilita il debug.

Una regola pratica per i principianti è quella di non superare le dieci righe. Tutto ciò che è più breve e specifico per la pagina può rimanere interno, mentre tutto ciò che è più lungo o condiviso va inserito in un file esterno.

In linea JavaSceneggiatura e perché andrebbe evitata

Una terza possibilità di inserimento si riscontra nelle pagine più vecchie, dove il codice è scritto direttamente all'interno di un attributo HTML. Sebbene funzioni ancora, mescola struttura e comportamento e non può essere memorizzato nella cache, riutilizzato o protetto da una rigorosa politica di sicurezza dei contenuti.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Una volta che ti senti a tuo agio nell'inserire gli script, continua con JavaMetodi degli array di script, studia cicli in JavaCopionee lavorare attraverso il pratico JavaEsempi di codice script. I file esterni rendono inoltre molto più semplice la gestione della logica di archiviazione del browser, come ad esempio biscotti in JavaCopione.

DOMANDE FREQUENTI

Posizionalo appena prima del tag di chiusura del body, oppure nell'intestazione (head) con l'attributo defer. Entrambe le opzioni consentono il rendering dell'HTML per primo, in modo che gli elementi siano già presenti quando il codice viene eseguito.

Sì. Aggiungi un tag script per ogni file. Senza async, il browser li esegue nell'ordine in cui appaiono, quindi posiziona i file che definiscono le funzioni condivise prima dei file che le richiamano.

Le cause più comuni sono un percorso src errato, un tag script di chiusura mancante o un nome file con maiuscole e minuscole diverse. Apri il pannello di rete del browser e cerca una risposta 404.

Solo alla prima visita, quando viene effettuata una richiesta aggiuntiva. Successivamente, il file viene servito dalla cache del browser, il che di solito è più veloce rispetto alla ripetizione dello stesso codice in ogni pagina.

La maggior parte degli assistenti restituisce un singolo file HTML con tag script interni, perché questo viene eseguito senza configurazione. Richiedi esplicitamente un file .js separato quando hai bisogno di una struttura pronta per la produzione.

I file esterni con l'attributo async sono adatti ai widget di intelligenza artificiale di terze parti, come i chatbot, perché si caricano in modo indipendente e non bloccano mai il rendering della pagina circostante.

Riassumi questo post con: