Déplacer JavaScript hors de la page Web
Share
Lorsque vous écrivez un nouveau JavaScript pour la première fois, la façon la plus simple de le configurer est d'incorporer le code JavaScript directement dans la page Web afin que tout soit au même endroit pendant que vous le testez pour le faire fonctionner correctement. De même, si vous insérez un script pré-écrit dans votre site Web, les instructions peuvent vous indiquer d'incorporer des parties ou la totalité du script dans la page Web elle-même..
C'est correct pour configurer la page et la faire fonctionner correctement en premier lieu, mais une fois que votre page fonctionne comme vous le souhaitez, vous pourrez améliorer la page en extrayant le JavaScript dans un fichier externe afin que votre page le contenu dans le HTML n'est pas si encombré avec des éléments sans contenu tels que JavaScript.
Si vous copiez et utilisez simplement des scripts Java écrits par d'autres personnes, leurs instructions sur la façon d'ajouter leur script à votre page peuvent avoir entraîné l'intégration d'une ou plusieurs grandes sections de JavaScript dans votre page Web elle-même et leurs instructions ne le disent pas vous comment vous pouvez déplacer ce code hors de votre page dans un fichier séparé et avoir toujours le travail JavaScript. Ne vous inquiétez pas, car quel que soit le code JavaScript que vous utilisez dans votre page, vous pouvez facilement déplacer le JavaScript hors de votre page et le configurer en tant que fichier séparé (ou fichiers si vous avez plus d'un morceau de JavaScript intégré dans la page). Le processus pour ce faire est toujours le même et est mieux illustré par un exemple.
Voyons à quoi pourrait ressembler un morceau de JavaScript lorsqu'il est intégré à votre page. Votre code JavaScript réel sera différent de celui illustré dans les exemples suivants, mais le processus est le même dans tous les cas.
Exemple un
if (top.location! = self.location) top.location = self.location; Exemple deux
Troisième exemple
/ * if (top.location! = self.location) top.location = self.location; / *]]> * / Votre JavaScript intégré devrait ressembler à l'un des trois exemples ci-dessus. Bien sûr, votre code JavaScript réel sera différent de celui indiqué, mais le JavaScript sera probablement intégré à la page en utilisant l'une des trois méthodes ci-dessus. Dans certains cas, votre code peut utiliser l'ancien language = "javascript" au lieu de type = "texte / javascript" dans ce cas, vous souhaiterez peut-être mettre votre code à jour pour commencer en remplaçant l'attribut language par le type one.
Avant de pouvoir extraire le JavaScript dans son propre fichier, vous devez d'abord identifier le code à extraire. Dans les trois exemples ci-dessus, deux lignes de code JavaScript réel doivent être extraites. Votre script aura probablement beaucoup plus de lignes mais peut être facilement identifié car il occupera la même place dans votre page que les deux lignes de JavaScript que nous avons mises en évidence dans les trois exemples ci-dessus (les trois exemples contiennent les deux mêmes lignes de JavaScript, c'est juste le conteneur autour d'eux qui est légèrement différent).
- La première chose que vous devez faire pour extraire réellement le JavaScript dans un fichier séparé est d'ouvrir un éditeur de texte brut et d'accéder au contenu de votre page Web. Vous devez ensuite localiser le JavaScript intégré qui sera entouré par l'une des variantes de code illustrées dans les exemples ci-dessus.
- Après avoir localisé le code JavaScript, vous devez le sélectionner et le copier dans votre presse-papiers. Avec l'exemple ci-dessus, le code à sélectionner est mis en surbrillance, vous n'avez pas besoin de sélectionner les balises de script ou les commentaires facultatifs qui peuvent apparaître autour de votre code JavaScript.
- Ouvrez une autre copie de votre éditeur de texte brut (ou un autre onglet si votre éditeur prend en charge l'ouverture de plusieurs fichiers à la fois) et collez-y le contenu JavaScript.
- Sélectionnez un nom de fichier descriptif à utiliser pour votre nouveau fichier et enregistrez le nouveau contenu en utilisant ce nom de fichier. Avec l'exemple de code, le but du script est de sortir des cadres afin qu'un nom approprié puisse être framebreak.js.
- Alors maintenant, nous avons le JavaScript dans un fichier séparé, nous retournons à l'éditeur où nous avons le contenu de la page d'origine pour y apporter les modifications pour créer un lien vers la copie externe du script.
- Comme nous avons maintenant le script dans un fichier séparé, nous pouvons tout supprimer entre les balises de script dans notre contenu d'origine afin que le
- La dernière étape consiste à ajouter un attribut supplémentaire à la balise de script identifiant où il peut trouver le JavaScript externe. Nous le faisons en utilisant un src = "nom de fichier" attribut. Avec notre exemple de script, nous spécifierions src = "framebreak.js".
- La seule complication à cela est que nous avons décidé de stocker les JavaScripts externes dans un dossier séparé des pages Web qui les utilisent. Si vous faites cela, vous devez ajouter le chemin d'accès du dossier de la page Web au dossier JavaScript devant le nom de fichier. Par exemple, si les JavaScripts sont stockés dans un js dossier dans le dossier qui contient nos pages Web, nous aurions besoin src = "js / framebreak.js"
À quoi ressemble notre code après avoir séparé le JavaScript dans un fichier séparé? Dans le cas de notre exemple JavaScript (en supposant que JavaScript et HTML se trouvent dans le même dossier), notre code HTML dans la page Web indique maintenant:
Nous avons également un fichier séparé appelé framebreak.js qui contient:
if (top.location! = self.location) top.location = self.location;Votre nom de fichier et son contenu seront très différents de cela, car vous aurez extrait le code JavaScript intégré à votre page Web et donné au fichier un nom descriptif en fonction de ce qu'il fait. Le processus réel d'extraction sera le même mais quelles que soient les lignes qu'il contient.
