Comment séparer le JavaScript dans votre page Web

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 droite. 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 fonctionnera comme vous le souhaitez, vous pourrez améliorer la page en extrayant le JavaScript dans un fichier externe afin que le contenu de votre page dans le HTML ne soit pas encombré d'éléments non liés au 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 vous avoir amené à avoir une ou plusieurs grandes sections de JavaScript est réellement intégré à votre page Web elle-même et leurs instructions ne vous indiquent pas comment déplacer ce code hors de votre page dans un fichier séparé tout en conservant le JavaScript travail. 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 configurez-le comme un fichier séparé (ou des fichiers si vous avez plus d'un morceau de JavaScript incorporé 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.

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 pouvez mettre à jour votre code plus à jour 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 ont mis 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).

1. 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.
2. 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.
3. 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.
4. 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.
5. 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 à lier à la copie externe du script.
6. 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 étiquette.
7. 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".
8. 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 le contenu du fichier seront très différents de cela car vous aurez extrait quel que soit JavaScript a été intégré dans votre page Web et donné au fichier un nom descriptif basé sur ce Cela fait. Le processus réel d'extraction sera le même, quelles que soient les lignes qu'il contient.

Qu'en est-il de ces deux autres lignes dans chacun des exemples deux et trois? Eh bien, le but de ces lignes dans l'exemple deux est de cacher le JavaScript de Netscape 1 et d'Internet Explorer 2, dont aucun n'utilise plus et donc ces lignes ne sont pas vraiment nécessaires dans le premier endroit. Placer le code dans un fichier externe masque le code des navigateurs qui ne comprennent pas la balise de script plus efficacement que de l'entourer de toute façon dans un commentaire HTML. Le troisième exemple est utilisé pour les pages XHTML pour indiquer aux validateurs que le JavaScript doit être traité comme contenu de page et non pour le valider en HTML (si vous utilisez un doctype HTML plutôt qu'un XHTML, le validateur le sait déjà et donc ces balises ne sont pas nécessaire). Avec le JavaScript dans un fichier séparé, il n'y a plus de JavaScript dans la page à ignorer par les valideurs et ces lignes ne sont donc plus nécessaires.

L'une des façons les plus utiles d'utiliser JavaScript pour ajouter des fonctionnalités à une page Web est d'effectuer une sorte de traitement en réponse à une action de votre visiteur. L'action la plus courante à laquelle vous souhaitez répondre sera lorsque ce visiteur clique sur quelque chose. Le gestionnaire d'événements qui vous permet de répondre aux visiteurs qui cliquent sur quelque chose s'appelle sur clic.

Lorsque la plupart des gens pensent à ajouter un gestionnaire d'événements onclick à leur page Web, ils pensent immédiatement à l'ajouter à un étiquette. Cela donne un morceau de code qui ressemble souvent à:

C'est le faux façon d'utiliser onclick à moins que vous n'ayez une adresse réelle dans l'attribut href afin que ceux sans JavaScript soient transférés quelque part lorsqu'ils cliquent sur le lien. Beaucoup de gens omettent également le "retour faux" de ce code et se demandent alors pourquoi le haut de la page actuelle est toujours chargé après l'exécution du script (c'est ce que href = "#" indique à la page de faire, sauf si false est renvoyé par tous les gestionnaires d'événements. Bien sûr, si vous avez quelque chose de significatif comme destination du lien, vous voudrez peut-être y aller après avoir exécuté le code onclick et vous n'aurez pas besoin du "return false".

Beaucoup de gens ne réalisent pas que le gestionnaire d'événements onclick peut être ajouté à tout Balise HTML dans la page Web afin d'interagir lorsque votre visiteur clique sur ce contenu. Donc, si vous voulez que quelque chose s'exécute lorsque les gens cliquent sur une image, vous pouvez utiliser:

Si vous souhaitez exécuter quelque chose lorsque les gens cliquent sur un texte, vous pouvez utiliser:

Du texte

Bien sûr, ceux-ci ne donnent pas l'indice visuel automatique qu'il y aura une réponse si votre visiteur clique dessus. façon dont un lien fait, mais vous pouvez ajouter cet indice visuel assez facilement vous-même en stylisant l'image ou la durée de manière appropriée.

L'autre chose à noter à propos de ces façons d'attacher le gestionnaire d'événements onclick est qu'elles ne nécessitent pas le "return false" car aucune action par défaut ne se produira lorsque l'utilisateur cliquera sur l'élément qui doit être désactivée.

Ces façons de fixer le onclick sont une grande amélioration par rapport à la mauvaise méthode que beaucoup de gens utilisent, mais c'est encore loin d'être le meilleur moyen de le coder. Un problème avec l'ajout d'un clic en utilisant l'une des méthodes ci-dessus est qu'il mélange toujours votre JavaScript avec votre HTML. sur clic est ne pas un attribut HTML, c'est un gestionnaire d'événements JavaScript. En tant que tel, pour séparer notre JavaScript de notre HTML afin de faciliter la maintenance de la page, nous devons obtenir cette référence onclick du fichier HTML dans un fichier JavaScript distinct où il appartient.

La façon la plus simple de le faire est de remplacer le onclick dans le HTML par un id cela rendra facile d'attacher le gestionnaire d'événements à l'endroit approprié dans le HTML. Ainsi, notre code HTML pourrait maintenant contenir l'une de ces déclarations:

 Du texte

Nous pouvons ensuite coder le JavaScript dans un fichier JavaScript distinct qui est soit lié au bas du corps de la page, soit qui se trouve en tête de la page et où se trouve notre code dans une fonction qui est elle-même appelée après le chargement de la page. Notre JavaScript pour attacher les gestionnaires d'événements ressemble maintenant à ceci:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Une chose à noter. Vous remarquerez que nous avons toujours écrit onclick entièrement en minuscules. Lors du codage de l'instruction dans leur code HTML, certaines personnes l'écriront en tant que onClick. C'est faux car les noms des gestionnaires d'événements JavaScript sont tous en minuscules et il n'existe aucun gestionnaire tel que onClick. Vous pouvez vous en sortir lorsque vous incluez directement le code JavaScript dans votre balise HTML, car le code HTML ne respecte pas la casse et le navigateur le mappera sur le nom correct pour vous. Vous ne pouvez pas vous en sortir avec la mauvaise capitalisation dans votre JavaScript lui-même car le JavaScript est sensible à la casse et il n'y a rien de tel en JavaScript comme onClick.

Ce code est une énorme amélioration par rapport aux versions précédentes car nous attachons maintenant à la fois l'événement à l'élément correct dans notre HTML et nous avons le JavaScript complètement séparé du HTML. Nous pouvons encore améliorer cela.

Le seul problème qui reste est que nous ne pouvons attacher qu'un seul gestionnaire d'événements onclick à un élément spécifique. Si nous devons à tout moment attacher un gestionnaire d'événements onclick différent au même élément, le traitement précédemment attaché ne sera plus attaché à cet élément. Lorsque vous ajoutez une variété de scripts différents à votre page Web à des fins différentes, il existe au moins un possibilité que deux ou plusieurs d'entre eux souhaitent fournir un traitement à effectuer lorsque le même élément est cliqué sur. La solution compliquée à ce problème consiste à identifier où cette situation se produit et à combiner le traitement qui doit être appelé ensemble à une fonction qui effectue tout le traitement.

Bien que les affrontements comme celui-ci soient moins courants avec onclick qu'avec onload, devoir identifier les affrontements à l'avance et les combiner n'est pas la solution idéale. Ce n'est pas une solution du tout lorsque le traitement réel qui doit être attaché à l'élément change avec le temps, de sorte qu'il y a parfois une chose à faire, parfois une autre et parfois les deux.

La meilleure solution consiste à cesser complètement d'utiliser un gestionnaire d'événements et à utiliser à la place un écouteur d'événements JavaScript (avec avec l'attachement correspondant pour Jscript - car il s'agit de l'une de ces situations où JavaScript et JScript différer). Nous pouvons le faire plus facilement en créant d'abord une fonction addEvent qui ajoutera soit un écouteur d'événement soit une pièce jointe en fonction de celui que la langue en cours d'exécution prend en charge;

fonction addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); return true; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Nous pouvons maintenant attacher le traitement que nous voulons voir se produire lorsque notre élément est cliqué sur en utilisant:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

L'utilisation de cette méthode pour attacher le code à traiter lorsqu'un élément est cliqué signifie que faire un autre appel addEvent pour ajouter une autre fonction sera exécuté lorsqu'un élément spécifique est cliqué ne remplacera pas le traitement précédent par le nouveau traitement mais permettra à la place aux deux fonctions d'être courir. Nous n'avons pas besoin de savoir lors de l'appel d'un addEvent si nous avons déjà une fonction attachée à la élément à exécuter quand il est cliqué dessus, la nouvelle fonction sera exécutée avec et les fonctions qui étaient auparavant attaché.

Si nous avions besoin de pouvoir supprimer des fonctions de ce qui est exécuté lorsqu'un élément est cliqué, nous pourrions créer un fonction deleteEvent correspondante qui appelle la fonction appropriée pour supprimer un écouteur d'événements ou attaché un événement?

Le seul inconvénient de cette dernière façon d'attacher le traitement est que les navigateurs vraiment anciens ne prennent pas en charge ces façons relativement nouvelles d'attacher le traitement des événements à une page Web. Il devrait y avoir assez peu de personnes utilisant de tels navigateurs désuets pour les ignorer dans quel J (ava) Script que nous écrivons en dehors de l'écriture de notre code de telle manière qu'il ne cause pas un grand nombre d'erreurs messages. La fonction ci-dessus est écrite de manière à ne rien faire si aucune des façons dont elle l'utilise n'est prise en charge. La plupart de ces navigateurs vraiment anciens ne prennent pas en charge la méthode getElementById de référencer HTML non plus et donc un simple if (! document.getElementById) renvoie false; au sommet de l'une de vos fonctions qui effectuent de tels appels serait également approprié. Bien sûr, beaucoup de gens qui écrivent JavaScript ne sont pas aussi attentionnés à ceux qui utilisent encore des navigateurs anciens et ces utilisateurs doivent donc s'habituer à voir les erreurs JavaScript sur presque toutes les pages Web qu'ils visitent maintenant.

Lequel de ces différents moyens utilisez-vous pour attacher un traitement à votre page à exécuter lorsque vos visiteurs cliquent sur quelque chose? Si la façon dont vous le faites est plus proche des exemples en haut de la page que de ces exemples en bas de la page, alors c'est peut-être fois que vous avez pensé à améliorer la façon dont vous écrivez votre traitement onclick pour utiliser l'une des meilleures méthodes présentées plus bas sur le page.

En regardant le code de l'écouteur d'événements multi-navigateur, vous remarquerez qu'il existe un quatrième paramètre que nous avons appelé uC, dont l'utilisation n'est pas évidente dans la description précédente.

Les navigateurs ont deux ordres différents dans lesquels ils peuvent traiter les événements lorsque l'événement est déclenché. Ils peuvent travailler de l'extérieur vers

• uC = true à traiter pendant la phase de capture
• uC = false à traiter pendant la phase de bulle.

Donc, là où il y a plusieurs autres balises enroulées autour de celle sur laquelle l'événement a été déclenché lors de la phase de capture, cela commence en commençant par la balise la plus externe et en se déplaçant vers l'intérieur. vers celui qui a déclenché l'événement, puis une fois que l'étiquette à laquelle l'événement a été attaché a été traitée, la phase de bulle inverse le processus et revient encore.

Internet Explorer et les gestionnaires d'événements traditionnels traitent toujours la phase bulle et jamais la phase de capture et commencent donc toujours par la balise la plus spécifique et travaillent vers l'extérieur.

Donc, avec les gestionnaires d'événements:

xx