Vous êtes ici : Accueil des cours Misfu > Informatique > Apprendre la programmation > Cours Javascript > Placer du Javascript dans une page
Traduction de la page Placing JavaScript in your pages rédigée par Peter-Paul Koch et traduite par Christophe Bruggeman
La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.
Les includes Javascript ne sont pas pris en charge par Netscape 2 et Internet Explorer 3.
<noscript> n'est pas pris en charge par Netscape 2.
Vous devez placer correctement un Javascript dans une page HTML pour vous assurer que le navigateur l'exécute. Ce n'est pas particulièrement difficile, mais vous devez séparer le comportement (Javascript) et la structure (XHTML).
Bien qu'il y ait deux manières de faire cela, employer les includes JavaScript est le meilleur moyen car cela vous assure que votre code de Javascript résidera en dehors de votre fichier HTML. Ceci facilite la maintenance de vos pages, puisqu'elles contiennent seulement du XHTML. Ce moyen vous permet également de modifier la totalité de votre site en éditant un seul fichier.
Vous pouvez également mettre un Javascript directement dans votre page, mais cette méthode n’est pas conseillée. Nous jetterons également un bref coup d'oeil à la balise <noscript> tag.
Les includes javaScript ne sont pas pris en charge par Netscape 2 et Internet Explorer 3.
Les includes JavaScript ne sont pas rafraîchis par les versions plus anciennes d'Opera, peu importe le nombre de fois ou vous cliquez sur actualiser.
Solution: entrez l’URL des fichiers js dans la barre d'adresse, chargez la, cliquez sur actualiser, revenez a la page HTML et actualisez la.
Ce problème a été résolu dans la version 7.10, et peut-être quelques versions précédentes.
Vous devriez inclure un dossier de Javascript dans vos pages. Ceci a plusieurs avantages :
J'inclus un fichier Javascript, à chaque page de ce site, comme suit :
<script src="../quirksmode.js"></script>
Maintenant à chaque fois que la page est chargée, le navigateur met également le script du fichier quirksmode.js dans la page. Notez que vous ne voyezpas le script dans le code source, vous voyez juste la balise d'inclusion. Néanmoins les fonctions et les variables du fichier inclus sont disponibles aux scripts de chaque page.
J'emploie cet include pour des scripts que je veux disponibles à chaque page, comme 'last modified'. Pour regarder l'include, téléchargez http://www.quirksmode.org/quirksmode.js.
Sur cette page j'inclus un script spécial qui contient la fonction testIt().
Essayez de l'exécuter pour voir si votre navigateur prend en charge les includes.
Ne mettez pas une balise <script> dans le fichier includes, juste le code Javascript pur. Placez toujours l'include dans <head>.
Netscape 3,01 a de gros problèmes avec les includes si ils sont placés ailleurs. En outre, configurez le serveur pour envoyer le type MIME (Multipurpose Internet Mail Extension)
application/x-javascript avec le fichier .js . N'importe quel autre type fait que Netscape 3 (au moins, peut-être d’autres navigateurs),demande à l'utilisateur s'il veut télécharger ou ouvrir le fichier, créant des confusions.
N'ajoutez pas un ID à a une balise <script>. Ceci est possible pour Internet Explorer, ajouter l’ID à la balise neutralise celle-ci dans Netscape 4, ce qui fait que le script n’est pas exécuté.
Si vous voulez vous assurer que les navigateurs qui ne soutiennent pas les includes ne donnent pas des messages d'erreur, vous pouvez faire l'un ou l'autre de ce qui suit. Supposez que vous incluez la fonction
lastMod() dans chaque page. Quand vous l'appelez, vérifiez d’abord s'il existe :
if (self.lastMod) document.write(lastMod())
Une autre méthode serait
<script>
function lastmod() {}
</script>
<script src="js.js"></script>
Définissez d'abord une fonction vide lastMod(), si les includes sont supportés, ils seront recopié par la fonction réelle. Ainsi la fonction existe toujours, même si elle ne fait rien dans les anciens navigateurs.
<noscript> n'est pas pris en charge par Netscape 2.
Dans la balise <noscript> vous pouvez mettre du HTML qui sera seulement montré quand le navigateur de vos utilisateurs ne prend pas en charge le Javascript ou que le Javascript a été désactivé. Il est de temps en temps utile de dire désolé aux non utilisateurs de Javascript ou de leur présenter une alternative.
La balise fonctionne comme suit: les navigateurs qui ne lisent pas les scripts ne la connaissent pas, ainsi ils l'ignorent et lisent ce qui se trouve entre les 2 balises. Les navigateurs qui lisent les scripts la connaissent et ne lisent pas ce qui se trouve à l’intérieur des balises, du moins si le Javascript est activé.
Malheureusement Netscape 2 ne soutient pas cette balise utile, de sorte que les utilisateurs de Netscape 2 voient le script et la version de noscript. Il n'y a rien à faire contre cela. Heureusement Netscape 2 n'est plus très répandu.
N'employez pas les direct JavaScripts. Cette section est seulement maintenue pour des raisons historiques.
La méthode la plus simple est de placer vos scripts directement dans la page.
<script language="javascript" type="text/javascript"> <!-- Le script se place ici // --> </script>
D'abord, vous dites au navigateur qu'un script arrive, que c'est un Javascript et que le type MIME est "text/javascript". La plupart des validateurs protestent contre le fait de laisser le TYPE en dehors, mais les navigateurs exécutent le code de toute façon.
<script language="javascript" type="text/javascript">
Puis vous ouvrez un commentaire HTML. Ceci pour protéger les très vieux navigateurs qui n'identifient pas la balise <SCRIPT>. Ils ignoreront les balises elles-mêmes, mais ils lisent tout ce qui se trouve entre celles-ci. Puisque c'est incompréhensible pour la plupart des utilisateurs et n'a rien à voir avec le contenu de la page, il est nécessaire de commenter le script en dehors.
<!--
Vient alors le script lui-même. Ensuite il est nécessaire de fermer le commentaire HTML. Cependant, si vous écrivez juste
-->
les navigateurs qui comprennent le JavaScript essayeront d'interpréter ceci comme une commande de JavaScript. Naturellement, ce n’en est pas une, ainsi cela donnera des alertes de message d'erreur de JavaScript.
Par conséquent, il est nécessaire de mettre une fin de commentaire HTML après un commentaire de JavaScript (//).
// -->
En conclusion, finissez le script et revenez au HTML normal.
</script>
D'une façon générale vous placez le Javascript dans le <head> d'une page. Seulement quand vous voulez écrire un message dans la page, vous devrez placer le script à l'endroit correct dans le HTML.
Placer des scripts dans <head> permet de s’assurer que toutes les fonctions sont chargées avant que les boutons, liens ou d'autres choses qui les appellent soient chargés. Si vous mettez vos scripts à la fin d'une page, il est possible qu'un utilisateur voie déjà une partie de la page comprenant un bouton avec un appel à une fonction Javascript, alors que le reste de la page n'a pas encore été chargée. Résultat: l’utilisateur clique sur le bouton et obtient des alertes de message d'erreur de Javascript, parce que le navigateur ne peut pas trouver le script (pas encore).
À moins qu'il y ait une bonne raison de faire autrement, placez vos scripts dans <head>
Seulement sur Internet Explorer 4+ sur Windows l'attribut defer
reporte l’exécution du script jusqu'à ce que le document ait été analysé complètement.
Les spécifications pour le HTML 4.0 de W3C spécifient l’attribut defer
pour des balises de script :
<script language="javascript" type="text/javascript" defer>
À l'origine, ce n'est rien d’autre qu'une information donné au navigateur qui dit que le script à l'intérieur des balises ne modifie pas la teneur de la page Web (en faisant un document.write
par exemple). Par conséquent le navigateur n'a pas besoin d'attendre l’analyse et l’évaluation du script entier, il peut immédiatement continuer à analyser le HTML. Sur des systèmes plus anciens ceci pourrait faire gagner du temps d’analyse.
Cependant, l'Explorer 4+ de Windows a légèrement changé la signification de defer. Tout le code reporté par les balises de script sont seulement exécutées quand la page a été analysée entièrement. Par exemple :
<body> <script language="javascript" type="text/javascript" defer> <!-- alert(document.forms[0].elements.length); // --> </script> <form> <input value="Bla"> </form> </body>
Normalement alert donnerait une erreur: le document ne contient (encore) aucun formulaire au moment où il est exécuté. En ajoutant defer
à la balise du script, cependant, l'alerte est reportée jusqu’à la fin de l’analyse mais aussi jusqu’à avoir donné la valeur 1 comme taille du formulaire.