Comment créer et utiliser des fichiers JavaScript externes

Placer JavaScripts directement dans le fichier contenant le code HTML d'une page Web est idéal pour les scripts courts utilisés lors de l'apprentissage de JavaScript. Cependant, lorsque vous commencez à créer des scripts pour fournir des fonctionnalités importantes à votre page Web, la quantité de JavaScript peut devenir assez importante, et l'inclusion de ces grands scripts directement dans la page Web pose deux problèmes:

• Cela peut affecter le classement de votre page avec les différents moteurs de recherche si le JavaScript occupe une partie majoritaire du contenu de la page. Cela réduit la fréquence d'utilisation des mots clés et des phrases qui identifient le contenu..
• Il est plus difficile de réutiliser la même fonctionnalité JavaScript sur plusieurs pages de votre site Web. Chaque fois que vous souhaitez l'utiliser sur une page différente, vous devrez le copier et l'insérer dans chaque page supplémentaire, ainsi que toutes les modifications requises par le nouvel emplacement. 

C'est beaucoup mieux si nous rendons le JavaScript indépendant de la page Web qui l'utilise.

Sélection du code JavaScript à déplacer

Heureusement, les développeurs de HTML et JavaScript ont fourni une solution à ce problème. Nous pouvons déplacer nos JavaScripts hors de la page Web et le faire fonctionner exactement de la même manière.

La première chose que nous devons faire pour rendre un JavaScript externe à la page qui l'utilise est de sélectionner le code JavaScript lui-même (sans les balises de script HTML environnantes) et de le copier dans un fichier séparé.

Par exemple, si le script suivant est sur notre page, nous sélectionnerions et copierions la partie en gras:

var hello = 'Bonjour tout le monde';
document.write (bonjour);

Auparavant, il était pratique de placer JavaScript dans un document HTML à l'intérieur des balises de commentaire pour empêcher les anciens navigateurs d'afficher le code; cependant, les nouvelles normes HTML disent que les navigateurs doivent automatiquement traiter le code à l'intérieur des balises de commentaires HTML comme des commentaires, ce qui fait que les navigateurs ignorent votre Javascript. 

Si vous avez hérité des pages HTML de quelqu'un d'autre avec JavaScript à l'intérieur des balises de commentaire, vous n'avez pas besoin d'inclure les balises dans le code JavaScript que vous sélectionnez et copiez.

Par exemple, vous ne copiez que le code en gras, en omettant les balises de commentaire HTML dans l'exemple de code ci-dessous:

Enregistrement du code JavaScript en tant que fichier

Une fois que vous avez sélectionné le code JavaScript que vous souhaitez déplacer, collez-le dans un nouveau fichier. Donnez au fichier un nom qui suggère ce que fait le script ou identifie la page à laquelle appartient le script.

Donnez au fichier un .js suffixe pour que vous sachiez que le fichier contient JavaScript. Par exemple, nous pourrions utiliser hello.js comme nom du fichier pour enregistrer le JavaScript de l'exemple ci-dessus.

Lien vers le script externe

Maintenant que nous avons copié et enregistré notre JavaScript dans un fichier séparé, il nous suffit de référencer le fichier de script externe sur notre document de page Web HTML.

Tout d'abord, supprimez tout entre les balises de script: