Lien utile

Tutoriel sur le JavaScript - Fichiers externes

Tous niveaux


Tutoriel écrit par LaurentG alias KOogar le 31 Mars 2009


Après avoir déjà discuté de la mise en service de JavaScript dans le head et le body de votre document HTML, explorons maintenant le troisième type de situation: Un fichier externe. Si vous avez déjà utilisé précédemment des CSS externes, ce tuto sera un jeu d'enfant pour vous!

Sommaire :




Fichiers externes



Importation d’un fichier externe
L’importation d'un fichier externe est simple. Tout d'abord, le fichier que vous importez doit être valide en JavaScript, et seulement en JavaScript. Deuxièmement, le fichier doit posséder l'extension ".js". Enfin, vous devez connaître l'emplacement du fichier.
Supposons que nous disposons d'un fichier "js_file.js" qui contient une fonction d'alerte en une ligne "Bonjour tout le monde". De plus, supposons que le fichier est dans le même répertoire que le fichier HTML que nous allons coder. Pour importer le fichier vous devrez faire la chose suivante dans votre document HTML.

Le contenu du fichier js_file.js

.01
.02
.03
.04
  function popup() {
alert("Bonjour tout le monde")
}
Code HTML et JavaScript de votre document principale:
.01
.02
.03
.04
.05
.06
.07
.08
.09
.10
  <html>
<head>
<script src="js_file.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Cliquez moi!">
</body>
</html>

Fichiers externes, Trucs & Récapitulation

1. Utilisez les fichiers JavaScript externes lorsque vous souhaitez utiliser le même script sur de nombreuses pages, mais ne voulez pas avoir à réécrire le code sur chaque page!
2. Utilisez les fichiers JavaScript externes pour inclure les deux types de scripts: le type que vous placez dans le head (les fonctions) et le type que vous placez dans le body (les scripts que vous voulez exécuter durant les chargements de page).
3. Assurez-vous que vos fichiers JavaScript (.js) ne comprennent pas la balise script . Ils doivent contenir seulement des commentaires HTML et du code JavaScript, rien de plus!