SELFHTML/Aides à la navigation JavaScript/DOM | SELFHTML/Aides à la navigation JavaScript/DOM |
JavaScript n'est pas directement une partie qui constitue HTML, mais un langage de programmation distinct. Ce langage a pourtant été créé spécialement pour mettre à la disposition des auteurs un outil grâce auquel les pages WWW se laissent optimiser.
Les programmes en JavaScript sont notés directement dans le fichier HTML ou dans des fichiers séparés. ils sont interprétés en temps réel par le navigateur Web. Les navigateurs Web modernes possèdent à cet effet le logiciel d'interprétation correspondant.
Quelques exemples pratiques pour l'application de JavaScript sont à votre disposition dans ce document pour être essayés et pour s'habituer à JavaScript. C'est le cas par exemple des 
Petits assistants comme de la 
Quickbar et de la recherche SELFHTML. Cette dernière est en fait une application assez performante qui dépasse déjà de loin le cadre dans lequel JavaScript est employé d'ordinaire.
Dans un langage de programmation comme JavaScript il y a beaucoup d'éléments prêtant à confusion pour les débutants; ce sont les caractères spéciaux, les variables, les commandes si-alors, les boucles les fonctions, les méthodes, les paramètres, les objets, les propriétés et plus encore. Pour pouvoir manier facilement ces éléments vous devez apprendre à vous représenter ce qui se passe dans l'ordinateur quand le code du programme est exécuté. C'est un apprentissage pénible que des débutants ne maîtriseront que par des exercices répétés. Pour cela, JavaScript est très bien approprié parce qu'il est un langage de programmation relativement simple, dans lequel manquent beaucoup de tâches d'un "grand" langage de programmation - comme par exemple la gestion de la mémoire ou le maniement de fichiers. En outre, JavaScript est employé dans un environnement déterminé, à savoir la page WWW affichée ou à afficher.
JavaScript tourne avec ce qu'on pourrait appeler un "carcan". C'est une espèce de cage de sécurité dans laquelle le langage de programmation est enfermé. Cela lui ôte les possibilités typiques d'autres langages de programmation, surtout la possibilité de lire comme il veut les données d'autres fichiers ou celle d'écrire dans les fichiers. Ceci doit empêcher que des programmeurs JavaScript fassent n'importe quoi sur l'ordinateur d'un utilisateur qui appelle une page Web avec du JavaScript. Après quelques problèmes de jeunesse du passé, cela fonctionne aussi assez bien. Celui donc qui désactive JavaScript sur son navigateur par crainte qu'il puisse formater son disque dur, devrait plutôt éviter complètement Internet car déjà à l'appel de ses courriels, les dangers guettent, qui sont considérablement plus grands que ceux encourus avec JavaScript. Cependant, il y a malheureusement d'autres bonnes raisons qui poussent les utilisateurs à désactiver JavaScript sur leur navigateur. Ce sont avant tout les agaceries de certains "cadors" de la programmation qui pensent que plus la page Web tient l'utilisateur en laisse, mieux elle est. Là par exemple, la touche droite de la souris est alors neutralisée grâce à JavaScript, l'utilisateur ne peut plus quitter la page et encore bien d'autres choses. De telles trouvailles de programmeurs avides de contrôle sont le malaise proprement-dit et la raison pour laquelle JavaScript n'est pas apprécié par tous les utilisateurs. Celui qui met JavaScript en place ne doit pas perdre de vue et utiliser ses possibilités de façon à ce que l'utilisateur en tire un avantage et non pas de façon à ce que quelque chose lui soit pris.
Avant que vous ne plongiez dans les abysses de JavaScript, il faut aussi que vous ayez conscience que JavaScript n'a été conçu que pour compléter le HTML normal mais pas pour le remplacer. Il est certes tout à fait possible de programmer des pages Web exclusivement en JavaScript, de façon à ce qu'il ne soit pour ainsi dire plus possible de dire que JavaScript a été incorporé en HTML mais plutôt que le code HTML de la page a été créé de façon dynamique à l'aide de JavaScript. Pourtant ces pages ne fonctionnent que là où JavaScript est activé dans le navigateur et où ce dernier comprend tout ce que vous avez programmé (sinon la tentative d'afficher la page est vite avortée par un sobre message d'erreur). Pour les pages Web dans lesquelles l'information occupe le premier plan et également qui doivent être comprises par les moteurs de recherche et par des groupes d'utilisateurs minoritaires comme les non-voyants, il vous faut faire attention à n'utiliser JavaScript que de façon à ce qu'elles puissent être affichées correctement même si JavaScript est désactivé, et à ce que la navigation entre les pages fonctionne également sans l'aide de JavaScript.
 
|
JavaScript Le JavaScript est un langage introduit par Netscape en 1995, qui en détient les droits. C'était donc une affaire spécifique et propre à la firme et c'est Netscape qui dictait en quoi consistait le JavaScript "officiel". Entre-temps la situation est devenue plus claire pour des raisons diverses - mais il y a toujours comme avant JavaScript qui jouit d'une grande popularité chez les concepteurs de pages Web.
Netscape essayait déjà assez tôt de ne pas laisser JavaScript en tant que développement personnel mais de lui donner le caractère d'un standard. Pour cela on fixa l'organisation 
EMCA (European Computer Manufacturers Association). Sous le nom d'ECMAScript Netscape fit déclarer JavaScript comme standard industriel. Ce standard a été fixé dans la spécification "ECMA-262".
Microsoft contrait à sa façon. L'Explorer Internet MS interprète certes JavaScript mais aussi à côté de cela la variante de langage propre à Microsoft JScript. Microsoft implémenta ce langage finalement pour se libérer des contraintes de licence de Netscape et pour pouvoir élargir lui-même ce qui tournait chez Netscape sous le nom de JavaScript. JScript recouvre toute la palette de JavaScript avec cependant encore en plus une quantité de commandes spéciales pour l'accès au système de fichiers et au système d'exploitation de Windows (Microsoft désignait le tout comme "Windows Scripting Host" -Centre serveur de script Windows-). JScript est donc en fin de compte beaucoup plus puissant que JavaScript, pourtant il est également conçu pour d'autres missions. Il a une politique de versions spécifique qui n'a rien à voir avec celle de JavaScript. Les versions de JavaScript sont aujourd'hui comme hier plus connues que celles de JScript et si vous utilisez JavaScript, mentionnez aussi comme langage en règle générale "JavaScript" et non pas "JScript". L'Explorer Internet y arrive.
Netscape 2.0 interprète le standard de programmation 1.0 JavaScript introduit à cette époque. L'Explorer Internet MS comprend ce langage amplement depuis la version 3.0 (1996).
Netscape interprète le standard de programmation 1.1 (également 1996)JavaScript depuis sa version 3.0. L'Explorer Internet MS comprend ce langage amplement depuis la version 4.0 (1997).
Netscape interprète le standard de programmation 1.2 (1997) JavaScript depuis sa version 4.0. Certaines commandes de cette version sont également interprétées par l'Explorer Internet MS 4.0.
La version JavaScript 1.3 est implémentée (1998-2001) dans la plupart des versions 4.06 bis 4.7 de Netscape répandues à ce jour . L'Explorer Internet MS comprend cette version du langage amplement depuis sa version 5.0.
Dans la toute récente version 6.0 de Netscape, complètement reprogrammée, une version 1.5 de JavaScript a été intégrée (2000-2001); outre quelque petites nouveautés propres à JavaScript, elle transcrit avant tout le modèle DOM (Document Object Model - DOM) - de plus amples détails à ce sujet plus bas.
Pour l'Explorer Internet il y a quelques différences qui, pour partie ne sont pas tout à fait insignifiantes en ce qui concerne les éditions pour les différentes plates-formes. Ainsi il est tout à fait possible que la version Windows d'un Explorer Internet 5.5 comprenne des commandes JavaScript que la version
Macintosh du même produit ne comprend pas. À cela s'ajoutent d'autres navigateurs ayant également implémenté JavaScript comme par exemple Opera, pour lesquels chaque version du produit interprète un peu plus de JavaScript que la version précédente. Dans la pratique on ne peut plus vraiment retracer à vrai dire quel navigateur peut faire exactement quoi. Il est conseillé pour cette raison de tester particulièrement soigneusement les éléments du langage utilisés des versions JavaScript postérieures à la version 1.2.
La concurrence entre Netscape et Microsoft pour offrir le meilleur soutien JavaScript fut en tout cas à l'origine d'une grande frustration chez les programmeurs Web et les utilisateurs. Beaucoup de choses devaient et doivent encore toujours être programmées de façon assez compliquée parce que les performances et particularités des différents interpréteurs JavaScript des différents navigateurs et versions de navigateurs exigent quantité de si et de mais qui alourdissent le code source de JavaScript. Avant tout pour des applications JavaScript plus complexes, par exemple pour HTML dynamique, cette "double programmation" est devenue une corvée pénible.
Pour remédier durablement à cette situation inconfortable, le consortium W3 a été contacté pour qu'une norme générale du langage voie le jour. Le consortium W3 ne travailla cependant pas sur un standard JavaScript concret mais sur un modèle général pour les objets d'un document. Ce modèle doit complètement transposer un langage script qui s'entend comme langage de complément à des langages de marquage comme HTML. Le modèle a reçu du W3 la désignation Document Object Model (DOM). Le 1er octobre 1998 le DOM fut l'objet d'une recommandation officielle du W3C (recommendation) dans la version 1.0, qui est disponible depuis le 29 septembre 2000 dans une deuxième sortie. Depuis le 13 novembre 2000 la version 2.0 do DOM fait l'objet d'une recommandation officielle du W3. Le document correspondant est pourtant réparti dans plusieurs documents distincts. La version 3.0 est en cours d'élaboration.
L'Explorer Internet MS 5.0 soutient une partie de DOM 1.0, la version 5.5 un peu plus, exactement comme Netscape 6.x. La version JavaScript que le modèle DOM transcrit est la version 1.5.
Un aspect important du modèle DOM est qu'il n'est pas seulement conçu pour les langages de script de complément à HTML mais aussi pour des langages de script qui doivent élargir tout langage de marquage conforme à XML. C'est pourquoi le modèle DOM ne s'oriente plus pour l'essentiel à certains éléments HTML. Au lieu de cela il part de façon abstraite d'un "document" (qui peut être écrit en XHTML, mais aussi dans d'autres langages basés sur XML). Il définit comment il est possible d'accéder aux différents éléments de ce document et quelles manipulations sont possibles. Étant donné que l'on voulait prendre aussi en considération pour le développement du modèle DOM les particularités et la large diffusion de HTML et de JavaScript, on a ajouté au "noyau du modèle DOM" un "modèle DOM d'application HTML". Enfin on a essayé de sanctionner des parties "bien rodées" de JavaScript et de MS-JScript en y intégrant des parties constitutives du "noyau du modèle DOM".
DOM 1.0 limite cependant encore quelques aspects importants comme par exemple la gestion d'événements (traitement d'événements-utilisateur comme les cliquements de souris, les entrées au clavier etc...) ou l'intégration de feuilles de style dans ce que les programmeurs peuvent changer de façon dynamique. Dans les versions 2.0 et 3.0 le modèle DOM traite également ces aspects.
Sur la page d'accueil du W3 au modèle DOM vous pouvez suivre les développements récents du modèle DOM au consortium W3.
Depuis que le modèle DOM existe, les fournisseurs de navigateurs rivalisent de promesses pour transcrire les prescriptions du modèle DOM en JavaScript. Mis à part le fait qu'il y a encore toujours un manque d'uniformité pour la transcription, un peu comme pour HTML et pour les CSS, les programmeurs en JavaScript ont maintenant un problème supplémentaire: Là où une double solution était souvent nécessaire pour les deux types de navigateurs les plus répandus, ils doivent maintenant quelquefois programmer jusqu'à trois solutions s'ils prennent en considération les versions 4.x de Netscape et de l'Explorer Internet tout en voulant programmer également conformément au modèle DOM.
Dans la pratique de JavaScript sur des pages Web basées sur HTML, il en va toutefois ainsi que la plupart du temps il est travaillé encore avec les objets JavaScript traditionnels introduits par Netscape. Il faut espérer qu'à l'avenir, la programmation JavaScript conforme au modèle DOM supplantera la programmation en JavaScript classique.
Pour reconnaître les versions de langages JavaScript et DOM, les symboles suivants sont utilisés dans la présente documentation:
|
|
|
Avant de commencer à programmer votre propre code JavaScript tout neuf, il faut que vous sachiez exactement quel problème vous voulez résoudre avec JavaScript. Pour cela il vous faut déjà savoir tout ce que vous pouvez faire avec HTML proprement-dit et où sont les limites de JavaScript. Il vous faut ensuite en savoir assez sur JavaScript pour pouvoir décider si le problème peut être résolu avec JavaScript. Avec JavaScript par exemple, vous ne pouvez pas remplir les tâches typiques dévolues à CGI! Les scripts JavaScript sont exécutés dans le navigateur de l'utilisateur et non pas sur le serveur où les pages Web se trouvent. Ce qui veut dire que JavaScript ne peut être exécuté par le navigateur que lorsqu'il est en train de lire une page ou bien après qu'il l'ait lue - déclenché alors par exemple par des événements utilisateurs comme des cliquements de souris etc...
Il vous est impossible pour cette raison de programmer des livres de visites ou des forums Web avec JavaScript. Car ces applications doivent sauvegarder, centralisées sur le serveur, les données de tous les utilisateurs qui participent. Il est cependant bien possible de se servir de JavaScript pour soutenir de telles applications. Ainsi par exemple, il est tout indiqué de vérifier les entrées d'un utilisateur dans un formulaire avant son envoi à l'aide de JavaScript plutôt que de confier ce surcroît de travail à l'ordinateur serveur.
Quand vous désirez résoudre quelque chose avec JavaScript, il est tout à fait rentable d'aller voir sur la toile s'il n'existe pas déjà des exemple de JavaScript disponibles gratuits qui résoudraient exactement votre problème. Car il est toujours préférable de prendre du code qui a déjà fait ses preuves à l'emploi, que de créer du nouveau code dont les "vices cachés" ne sont pas encore connus. Dans de nombreux cas, il suffit d'adapter des scripts JavaScript déjà existants à ses propres exigences. Pour ces JavaScripts disponibles sur le WWW, vous devrez cependant comprendre ce langage suffisamment, afin de savoir exactement quelles variables ou quelles constantes il vous faudra changer ou quelle fonction vous voudrez compléter.
Dans l'index des liens de l'offre en ligne de SELFHTML actuel, vous trouverez des liens à des fournisseurs de JavaScripts disponibles:
Index des liens: JavaScript/DOM
Quand vous voulez utiliser JavaScript sur vos propres pages Web, vous devez impérativement mettre en place plusieurs navigateurs pour effectuer les tests. Car malheureusement les interpréteurs de JavaScript des navigateurs supportant ce langage, ont comme il a déjà été dit, des performances très différentes.
Ne mettez pas sur le WWW de pages Web contenant un code JavaScript non vérifié. Pour un utilisateur, il est très ennuyeux de recevoir à l'écran des messages d'erreur de l'interpréteur JavaScript et, dans des cas plus graves, d'être victime d'un "plantage" du programme de navigation WWW ou même d'un "plantage-système", ceci étant particulièrement désagréable lors d'un travail en connexion. Ces utilisateurs ne reviendront certainement pas de sitôt sur vos pages.
|
|
Définir des passages de JavaScript en HTMLVous pouvez définir des passages de programme JavaScript en HTML.
<html>
<head><title>Test</title>
<script type="text/javascript">
<!--
alert("Hello monde!");
//-->
</script>
</head>
<body>
</body>
</html>
|
Avec <script type="text/javascript"> vous introduisez un passage pour JavaScript dans un fichier HTML (script = texte source, type = type Mime). La mention du type Mime est obligatoire depuis HTML 4.0. Avec type="text/javascript" vous stipulez le type Mime typique pour les fichiers JavaScript.
En plus, vous pouvez utiliser l'attribut language pour désigner la version du langage JavaScript (par exemple language="JavaScript" ou bien language="JavaScript1.2"). Pourtant cet attribut fait partie des attributs réprouvés et n'est pas non plus interprété correctement par tous les navigateurs.
À la suite - le mieux est à la ligne suivante - vous devez introduire avec <!-- un commentaire HTML. Ainsi les navigateurs WWW plus anciens qui ne connaissent pas JavaScript ignorent le code JavaScript qui suit et ne l'interprètent pas par erreur comme du texte faisant partie du fichier HTML.
Dans l'exemple ci-dessus, grâce à JavaScript, une fenêtre d'annonce apparaît à l'écran avec le texte "Hello monde!".
Vous fermez le passage JavaScript avec un commentaire JavaScript // d'une ligne, suivi par la fermeture du commentaire HTML --> et de </script>. Le commentaire JavaScript est indispensable pour éviter les messages d'erreurs dans les navigateurs supportant les scripts. Tenez compte du fait qu'avant et après le commentaire HTML, un passage à la ligne est absolument indispensable.
Il n'y a pas de règle précise qui stipule à quel endroit d'un fichier HTML un passage pour JavaScript doit être défini. Mais il est usuel pour les programmeurs en JavaScript de définir un tel passage dans l'entête du fichier HTML, donc entre <head> et </head>. Ainsi on s'assure au plus vite que le code soit déjà lu par le navigateur WWW et disponible au moment où il doit être exécuté.
.
Le code JavaScript peut être exécuté automatiquement lors de la lecture du fichier HTML. C'est le cas quand des commandes JavaScript se trouvent dans un passage JavaScript, mais hors de toute fonction définie soi-même comme dans l'exemple ci-dessus. Dans de tels cas il est quelquefois aussi nécessaire de noter le passage en Script dans le corps du fichier à savoir entre <body>...</body>. Par exemple lorsque vous voulez inscrire avec JavaScript de façon dynamique à la fin du fichier la date et l'heure de la dernière modification du fichier.
|
|
Éléments de JavaScript dans des repères HTMLJavaScript peut aussi figurer dans des repères HTML courants. Ce n'est pas dans ce cas un code programme compliqué mais en règle générale seulement l'appel à des méthodes, fonctions, objets, caractéristiques déterminés. Il existe pour ceci ce que l'on appelle des gestionnaires d'événements. Ce sont des attributs dans des repères HTML par lesquels des JavaScripts peuvent être activés. Il est établi pour chacun des gestionnaires d'événements possibles dans quels repères HTML il peut être placé.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function carre() {
var resultat = document.formulaire.saisie.value * document.formulaire.saisie.value;
alert("Le carré de " + document.formulaire.saisie.value + " = " + resultat);
}
//-->
</script>
</head>
<body>
<form name="formulaire" action="">
<input type="text" name="saisie" size="3">
<input type="button" value="Calculer le carré" onClick="carre()">
</form>
</body>
</html>
|
L'exemple ci-dessus montre un fichier HTML complet Dans l'entête est défini une fonction définie soi-même, la fonction nommée carre(). La fonction calcule le carré d'un nombre que l'utilisateur entre dans le champ de saisie nommé saisie du formulaire noté plus bas. Ce code JavaScript n'est cependant exécuté que quand la fonction est appelée explicitement. Dans l'exemple ci-dessus, l'appel se fait à l'aide d'un bouton pouvant être cliqué. Quand l'utilisateur clique sur le bouton, le carré du nombre entré est sorti. Pour cela est noté dans le repère HTML du bouton pouvant être cliqué l'attribut onClick= - un gestionnaire d'événement qui signifie "lors d'un cliquement".
Dans la partie sur les gestionnaires d'événements sont décrits les gestionnaires d'événements existants à part onClick= et dans quels repères HTML ils peuvent être placés.
|
|
JavaScript dans des fichiers distinctsDepuis la version 1.1 de JavaScript (et aussi à partir de HTML 4.0), il est possible de noter du code JavaScript dans des fichiers séparés. C'est très utile si vous voulez utiliser les mêmes fonctions JavaScript dans plusieurs fichiers HTML. Car ainsi, vous n'avez besoin de noter le code qu'une seule fois et pouvez le référencer dans plusieurs fichiers HTML.
function carre() {
var resultat = document.formulaire.saisie.value * document.formulaire.saisie.value;
alert("Le carré de " + document.formulaire.saisie.value + " = " + resultat);
}
|
<html> <head> <title>Test JavaScript</title> <script src="carre.js" type="text/javascript"> </script> </head> <body> <form name="formulaire" action=""> <input type="text" name="saisie" size="3"> <input type="button" value="Calculer le carré" onClick="carre()"> </form> </body> </html> |
Il s'agit ici du même exemple que dans la paragraphe précédent. La différence réside finalement en ce que le code JavaScript figure dans un fichier séparé. Pour cela, notez dans le repère d'ouverture <script> la mention src= (src = source = source). Comme valeur, attribuez l'URI d'un fichier séparé contenant le code source. Ici s'appliquent les règles pour référencer en HTML référencer en HTML.
Le fichier avec le code source doit être un pur fichier ASCII et avoir l'extension .js. Le fichier ne doit contenir rien d'autre que du code JavaScript.
Il se peut qu'un code JavaScript noté dans un fichier distinct fonctionne très bien localement mais ne fonctionne plus après avoir transféré les fichiers sur un serveur WWW. Demandez alors à votre fournisseur d'accès ou à l'administrateur Web du serveur d'ajouter le type Mime text/javascript pour les fichiers avec extension .js dans la configuration du serveur Web. Autrement vous pouvez aussi essayer en notant dans le repère d'ouverture <script> pour l'attribut type le type Mime application/x-javascript au lieu de text/javascript. Cela fonctionne alors pour quelques serveurs.
|
| |
 |
Règles générales pour JavaScript
|
 |
Fonctions XPath
|
| SELFHTML/Aides à la navigation JavaScript/DOM |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
