Interne externe JavaScénario : Apprendre avec l'exemple

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Interne et externe JavaCet article décrit les deux emplacements possibles pour le code script dans un projet web. Il compare ces deux approches, présente des exemples concrets, explique la liaison correcte avec les fonctions async et defer, et indique dans quels cas chaque emplacement offre une meilleure maintenabilité et de meilleures performances.

  • 📄 Affectation interne : Code se situe entre les balises script à l'intérieur du document HTML et se charge avec la page qui le contient.
  • 🇧🇷 Stage externe : Code Elle réside dans un fichier .js séparé référencé via l'attribut src, de sorte que plusieurs pages partagent une seule source.
  • 🔗 Règle de liaison : Une balise script externe doit toujours être fermée, et le chemin src est résolu par rapport au document HTML, sauf si un chemin complet est fourni.
  • ⚙️ Contrôle du chargement : L'attribut defer exécute le fichier une fois l'analyse HTML terminée, tandis que l'attribut async l'exécute dès que le téléchargement est terminé.
  • 🚀 Avantage de la mise en cache : Les fichiers externes sont mis en cache par le navigateur une seule fois et réutilisés sur chaque page qui les référence.
  • 🧭 Critère de sélection : Conservez en interne la logique spécifique à chaque page et déplacez la logique partagée ou longue dans un fichier externe pour faciliter le débogage.
  • 🚫 Gestionnaires en ligne : Les gestionnaires basés sur les attributs, tels que onclick, mélangent balisage et comportement et devraient être remplacés par addEventListener.
En savoir plus

Interne et externe Javascénario

Que sont les termes « interne » et « externe » ? JavaScénario?

Vous pouvez utiliser JavaCode de script de deux manières.

  1. Vous pouvez soit inclure le JavaCode de script en interne dans votre document HTML elle-même.
  2. Vous pouvez garder le JavaCode de script dans un fichier externe séparé puis pointez sur ce fichier à partir de votre document HTML.

Les deux insertions exécutent exactement le même langage et produisent le même résultat dans le navigateur. La différence réside dans l'emplacement de stockage du code source, la manière dont le navigateur le télécharge et la facilité avec laquelle le code peut être réutilisé et maintenu sur l'ensemble d'un site web.

Qu'est-ce qui est interne JavaScénario?

Interne JavaUn script est un code directement intégré entre deux balises <script> dans un fichier HTML. Le navigateur lit le balisage de haut en bas et, lorsqu'il atteint la balise <script>, il exécute immédiatement les instructions, sans requête réseau supplémentaire.

Nous utilisons Internal JS jusqu’à présent. Voici un échantillon –

<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>

Sortie :

Today is Wednesday.

La date affichée change en fonction de l'horloge système du visiteur, car la fonction getDay renvoie un nombre allant de 0 pour dimanche à 6 pour samedi, et ce nombre est utilisé comme index dans le tableau des jours de la semaine.

Qu'est-ce qui est externe JavaScénario?

Vous prévoyez d'afficher la date et l'heure actuelles sur toutes vos pages web. Supposons que vous ayez écrit le code et que vous l'ayez copié sur toutes vos pages (disons 100). Mais plus tard, vous voudrez modifier le format d'affichage de la date ou de l'heure. Dans ce cas, vous devrez effectuer les modifications sur chacune des 100 pages web. Ce sera une tâche très longue et complexe.

Alors, sauvez le Javascénario codez dans un nouveau fichier avec l’extension .js. Ensuite, ajoutez une ligne de code dans toutes vos pages Web pour pointer vers votre fichier .js comme ceci :

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

NoteIl est supposé que le fichier .js et toutes vos pages web se trouvent dans le même dossier. Si le fichier external.js se trouve dans un dossier différent, vous devez spécifier le chemin complet vers ce fichier dans l'attribut src. </script> La balise <script> est obligatoire même si l'élément ne contient aucun contenu, car une balise script auto-fermante n'est pas du HTML valide et le reste de la page serait masqué par l'élément non terminé.

Voici le code que vous placez dans 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);

Voici votre fichier currentdetails.js. Ne vous inquiétez pas des longues lignes de code. Vous apprendrez bientôt à coder. Modifiez votre document HTML comme ceci :

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

⚠️ Attention : Le script hérité ci-dessus préfixe chaque heure d'un zéro, de sorte que 11 heures du matin s'affiche comme 011. Il attribue également hours1 sans la déclarer, ce qui crée une variable globale implicite et provoque une erreur en mode strict. La version corrigée ci-dessous résout ces deux problèmes.

Une réécriture moderne de ce même fichier est plus courte, déclare chaque variable et complète correctement les valeurs :

// 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;

Exemple de sortie:

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

ARTICLES LIÉS

Comment lier un fichier externe JavaFichier de script correctement

Trois détails déterminent si un fichier externe est chargé : le chemin d’accès indiqué dans l’attribut src, la position de la balise script dans le document et l’attribut loading qui lui est appliqué.

Les chemins d'accès sont résolus par rapport au document HTML, sauf si une barre oblique initiale ou une adresse complète est fournie.

Valeur source Sens Résout à
currentdetails.js Même dossier que la page HTML /pages/currentdetails.js
js/currentdetails.js Sous-dossier du dossier actuel /pages/js/currentdetails.js
../currentdetails.js Un dossier au-dessus du dossier actuel /currentdetails.js
/assets/js/currentdetails.js Chemin absolu depuis la racine du site /assets/js/currentdetails.js

L'attribut « loading » détermine le moment où le navigateur cesse d'analyser le code HTML pour exécuter le fichier. Le tableau ci-dessous récapitule les trois comportements possibles.

Attribut Télécharger Moment d'exécution Ordre préservé
Aucun Blocs d'analyse HTML Immédiatement après le téléchargement Oui
reporter Parallèlement à l'analyse syntaxique Une fois le document analysé Oui
async Parallèlement à l'analyse syntaxique Dès que le téléchargement se termine 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>

Astuce : Le type="text/javascript" L'attribut `is` est facultatif en HTML5 et peut être omis. Ne le conservez que pour la prise en charge de navigateurs très anciens, ou remplacez-le par `is`. type="module" lors de l'utilisation des instructions d'importation et d'exportation.

Interne vs Externe JavaScript : Principales différences

Le tableau comparatif ci-dessous met en parallèle les deux options en fonction des facteurs qui déterminent habituellement le choix.

Facteur Interne Javascénario Externe Javascénario
Emplacement de stockage À l'intérieur du fichier HTML Fichier séparé avec l'extension .js
Réutiliser sur plusieurs pages Nécessite de copier sur chaque page Un fichier référencé par chaque page
Mise en cache du navigateur Téléchargé à nouveau avec chaque page Mis en cache une seule fois et réutilisé
Effort de maintenance Élevé lorsque le code est partagé Faible, un fichier à modifier
Requête HTTP supplémentaire Non Oui, un par fichier
Débogage Plus difficile dans un long fichier HTML Plus facile avec des noms de fichiers et des numéros de ligne clairs.
Le mieux adapté pour Logique spécifique à la page courte Bibliothèques partagées et scripts longs

Quand utiliser l'interne et l'externe Javascénario Code?

Si vous ne disposez que de quelques lignes de code spécifiques à une page Web particulière, il est préférable de conserver votre JavaCode de script en interne dans votre document HTML.

D'un autre côté, si votre JavaSi du code JavaScript est utilisé sur de nombreuses pages web, vous devriez envisager de le conserver.ping Placez votre code dans un fichier séparé. Ainsi, si vous souhaitez le modifier, il vous suffira de modifier un seul fichier, ce qui simplifie la maintenance. Si votre code est long, il est également préférable de le conserver dans un fichier séparé. Cela facilite le débogage.

Pour les débutants, une règle pratique consiste à ne pas dépasser une dizaine de lignes. Tout contenu plus court et spécifique à une page peut rester interne, tandis que tout contenu plus long ou partagé doit figurer dans un fichier externe.

En ligne JavaScénario et pourquoi il faut l'éviter

Une troisième possibilité existe sur les pages plus anciennes : le code est alors directement intégré dans un attribut HTML. Bien qu’il fonctionne encore, il mélange structure et comportement et ne peut être mis en cache, réutilisé ni protégé par une politique de sécurité du contenu stricte.

<!-- 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>

Une fois que vous maîtrisez le placement des scripts, continuez avec Javaméthodes de tableau de script, étude boucles dans Javascénarioet travaillez à travers le pratique JavaExemples de code de scriptLes fichiers externes facilitent également grandement la gestion de la logique de stockage du navigateur, comme par exemple : cookies dans Javascénario.

FAQ

Placez-le juste avant la balise de fermeture </body>, ou dans l'en-tête avec l'attribut `defer`. Dans les deux cas, le HTML est rendu en premier, de sorte que les éléments existent déjà au moment de l'exécution du code.

Oui. Ajoutez une balise script par fichier. Sans l'attribut async, le navigateur les exécute dans l'ordre d'apparition ; placez donc les fichiers définissant des fonctions partagées avant ceux qui les appellent.

Les causes habituelles sont un chemin d'accès incorrect à la source, l'absence d'une balise de fermeture `<script>` ou un nom de fichier dont la casse est incorrecte. Ouvrez le panneau réseau de votre navigateur et recherchez une réponse 404.

Uniquement lors de la première visite, lorsqu'une requête supplémentaire est effectuée. Ensuite, le fichier est servi depuis le cache du navigateur, ce qui est généralement plus rapide que de répéter le même code sur chaque page.

La plupart des assistants renvoient un seul fichier HTML contenant des balises script internes, car il s'exécute sans configuration. Demandez explicitement un fichier .js séparé si vous avez besoin d'une structure prête pour la production.

Les fichiers externes dotés de l'attribut async conviennent aux widgets d'IA tiers tels que les chatbots, car ils se chargent indépendamment et ne bloquent jamais le rendu de la page environnante.

Résumez cet article avec :