[FAQ] fr.comp.infosystemes.www.auteurs : JavaScript

voir@replyto.fr.invalid (Christophe Raverdy)

Archive-Name: fr/www/faq-JavaScript

   Nota : Cette FAQ est en cours de réécriture.

   Sommaire

     * 1 Présentation
     * 2 1. Généralités
     * 3 2. Le langage
     * 4 3. Quelques scripts pratiques
     * 5 4. Versions, compatibilité
     * 6 5. Sécurité
     * 7 6. JavaScript et...
     * 8 7. Ressources hypertextes
     * 9 A titre de conclusion

Présentation

   La charte de fr.comp.lang.javascript spécifie que ce forum permet
   de discuter d'ECMAScript (cf
   http://fr.wikipedia.org/wiki/ECMAScript) qui est une
   spécification de langage script pour le web. Javascript n'est
   qu'une des implémentations de ce langage.

   ECMAScript permet de dynamiser des pages web depuis le navigateur
   internet (php fait la même chose depuis le serveur qui envoie ces
   pages web). L'implémentation variera avec le navigateur
   utilisé :

     * Internet Explorer (versions 6 et 7) repose sur le moteur
       Active Scripting propose JScript (javascript V1.5);
     * Mozilla et Firefox (entre autres) reposent sur le moteur Gecko
       et proposent Javascript (V1.7).

   fr.comp.lang.javascript pourrait également vous être utile si
   vous vous intéressez à Ajax (cf
   http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_And_XML)

   Certaines de vos questions trouveront peut-être des réponses
   ailleurs à savoir :

     * fr.comp.infosystemes.www.auteurs
     * fr.comp.algorithmes
     * fr.comp.lang.general
     * fr.comp.developpement
     * fr.comp.lang.java
     * fr.comp.lang.php

   Voire sur le BIG8 :

     * comp.lang.javascript

   Ou sur des hiérarchies "propriétaires" chez MicroSoft ou
   Mozilla.

   Les anglophones consulteront avec profit une vraie FAQ en
   http://www.jibbering.com/faq

   Vous trouverez en
   http://gnouf.info/mediawiki/index.php?title=FAQ_fr.comp.lang.javascript
   la version hypertexte intégrale de ce document.

1. Généralités

   Les informations données ici sont censées vous servir quelle que
   soit votre implémentation d'ECMAScript. Javascript est le support
   principal, si l'utilisation avec JScript devait demander une
   adaptation, des précisions seraient apportées.

   Qu'est-ce-que JavaScript ?

   Javascript un langage de script orienté objet que savent
   interpréter un grand nombre de navigateurs. Lorsque le navigateur
   reçoit un document ce dernier contient :

     * des instructions (x)html destinées à la mise en forme du
       document;
     * des instructions "javascript" qui permettront un traitement
       plus complexe. Ces instructions peuvent aussi bien être le
       coeur du document (on parlera alors d'une application)
       qu'être des accessoires destinés par exemple à encadrer la
       saisie dans un formulaire.

   Au coeur javascript on trouve donc la notion d'objet : à un objet
   on associera deux tableaux :

     * un tableau de propriétés (les différentes valeurs qui
       définissent l'objet);
     * un tableau de fonctions (méthodes) qui permettent de lire ou
       modifier les propriétés.

   Il existe des objets prédéfinis : (window, document, form,...)
   qui permettent d'interagir avec l'utilisateur du document (x)html
   qui contient ces scripts. Il est également possible de définir
   ses propres objets afin de répondre à des besoins précis.

   A quoi cela sert-il ? (entre autres)

     * Effectuer des vérifications dans vos formulaires avant de les
       soumettre au serveur (n'autoriser l'envoi que si les champs
       sont conformes à ce qui est attendu);
     * Améliorer la présentation de vos documents (y compris les
       formulaires) par exemple en changeant la couleur de fond pour
       indiquer le champ actif;
     * Proposer des utilitaires qui par exemple interdisent à des
       robots de récupérer les adresses électroniques,
     * Proposer des jeux comme tétris, sudoku, pendu,...

   Que faut-il pour débuter ?

     * un accès à un tutoriel accessible avec des explications
       claires et des exemples "clés en main" comme en
       http://fr.selfhtml.org/javascript;
     * un navigateur avec l'exécution de scripts activée;
     * un éditeur de texte avec coloration syntaxique comme :

          * notepad++ pour windows (via
            http://www.framasoft.net/article2579.html);
          * vim pour windows ou linux (via
            http://www.framasoft.net/article218.html).

   Existe-t-il des outils/programmes pour faciliter l'écriture de
   scripts ?

   Il existe des environnement de développement (ou "framework") qui
   permettent de gérer html, css et scripts.

   Pour linux, mac et windows :

     * http://www.aptana.com/download_all.php

2. Le langage

   Incorporer des scripts dans ses documents (x)html

   Vous pouvez incorporer vos scripts dans la section
   <HEAD>...</HEAD> de votre document, soit directement soit, de
   préférence, en indiquant l'adresse du ou des fichiers qui
   contien[nen]t les scripts utiles.

   Ceci donnera donc :

   <head>
   <title>...</title>
   <script type="text/javascript">
   <!--
   function nom_de_la_fonction()
   {
   var x = 1;
   var y = "";
   ...
   }
   }
   //-->
   </script>
   </head>

   Il peut y avoir plusieurs fonctions. Si les définitions sont
   placées dans la section <HEAD>, elles ne risquent pas d'être
   interprétées lors de la mise en forme du document. L'ajout de
   commentaires html ("<!--" et "//-->") est une sécurité
   supplémentaire.

   ou

   <html>
   <head>
   <title>...</title>
   <script type="text/javascript" src="nom du script.js">
   </script>
   </head>

   Mais vous pouvez également les inclure dans le corps (entre les
   balises <BODY> et </BODY>, *à condition* de veiller à ce que le
   script définissant les fonctions soit placé avant les appels à
   ces fonctions.

   Invoquer les scripts depuis le document html

   On peut incorporer une section <SCRIPT>...</SCRIPT> dans la
   section <BODY>...</BODY>. On ne peut pas y définir de fonction,
   mais on peut par contre appeler des fonctions javascript ou des
   fonctions définies dans la section <HEAD>...</HEAD> de façon à
   ce que ce soit le résultat de la fonction qui soit affiché par
   le navigateur : Ce qu'affichera le navigateur pourra donc être
   légèrement différent de ce que contient le document. Ainsi, on
   pourrait définir une fonction rot13(paramètre) dans les entêtes
   et placer un lien mailto qui se présenterait ainsi :
   "mailto:<"<script
  
type="text/javascript">document.write(rot13("partiegauchecryptée@partiedroitecryptée.tld"))</script>">
   suite du lien" : un programme qui chercherait à extraire
   automatiquement aurait une information inexploitable, mais le
   navigateur qui peut interpréter javascript aura une adresse
   lisible et exploitable.

   On peut également exploiter les événements : Pour certains
   objets (élément de formulaire, image,fenêtre...) on peut
   détecter des évènements suivants et appeler des scripts en
   fonction de l'événement survenu. Leur intitulé est assez
   explicite, toutefois, pour plus d'informations:
   http://w3c.org/TR/WD-html40/interact/scripts.html (19.1.4
   intrinsic events)

   onchange="x;" onclick="x;" onblur="x;"
   onfocus="x;" ondblclick="x;" onkeydown="x;"
   onkeypress="x;" onkeyup="x;" onmousedown="x;"
   onmousemove="x;" onmouseover="x;" onmouseout="x;"
   onmouseup="x;" onreset="x;" onselect="x;"
   onSubmit="x;" onload="x;" onunload="x;"

   x correspond soit à la suite d'instructions attendue soit au nom
   du script que l'on appelle.

     * Quelles sont les caractéristiques syntaxique de base ?

   La syntaxe s'apparente à celle du Java, et donc du C & C++. On
   retrouve en tous cas des éléments communs à tous langage
   impératif :

   - On peut manipuler des variables scalaires, des tableaux ou des
   objets;
   - On peut faire des tests (if..else if...else, case)
   - On peut faire des boucles (while, for)
   - Il existe des objets particuliers (dates, mathématiques,...)
   qui apportent des fonctions thématiques. - Les commandes sont
   séparées par un point-virgule ;
   - Attention au respect de la casse. Effectivement, document.robert
   est différent de document.ROBERT
   - La structure des fonctions est une structure de block; on
   utilise { en début de fonction et } à la fin
   - Le premier élément d'un tableau déclaré est l'élément 0;
   ie. tab[0]
   - Pour comparer deux élements, on utilise ==
   - Pour affecter une valeur à un élément, on utilise =
   - Les opérateurs logiques: && (AND) ; || (OR) ; ! (NOT)
   - Une chaîne de caractères (string) se met entre ' ou "
   - // début d'un commentaire se terminant à la fin de la ligne
   - Le nom d'une variable doit commencer par une lettre, mais peut
   contenir des chiffres et _
   - Une variable déclarée avec var est une variable locale à la
   fonction dans laquelle elle est déclarée. Par défaut, les
   variables sont globales.

     * Quelle est la structure d'une fonction ?

   function nom (paramètre) { instructions; }

   -La fonction est appelée via nom(paramètre)
   -Si une fonction contient plusieurs paramètres, ils sont
   séparés par une virgule dans la déclaration et dans l'appel de
   la fonction.
   -Si on veut retourner une valeur qui a été "calculée" par cette
   fonction, inscrire return var; Et pour appeler la fonction qui
   donnera une valeur à var: var=nom(paramètre)

     * Comment modifier la valeur d'un objet de la page ?

   La syntaxe est similaire à celle des langages de programmation
   orienté-objet (Delphi,...) Ainsi, soit le formulaire nommé
   formulaire1 et la textarea nommée champtexte dans laquelle vous
   voulez écrire Robert:

   document.formulaire1.champtexte.value='Robert';

3. Quelques scripts pratiques

   Comment détecter le navigateur utilisé ?

   <SCRIPT type="text/javascript">
   <!--
   browserName = navigator.appName;
   browserVer = navigator.appVersion;
   //-->
   </SCRIPT>

   navigator.appName est une chaîne dont la valeur sera "Netscape"
   ou "Microsoft Internet Explorer".

   La chaîne navigator.appVersion donne la version du navigateur
   ainsi que le système d'exploitation. Pour obtenir uniquement la
   version du navigateur : parseFloat(navigator.appVersion)

   Comment détecter la résolution d'écran ?

   <SCRIPT type="text/javascript">
   <!--
   if (navigator.javaEnabled())
   {
   var toolkit= java.awt.Toolkit.getDefaultToolkit();
   var screen_size = toolkit.getScreenSize();
   width = screen_size.width;
   height = screen_size.height;
   }
   //-->
   </SCRIPT>

   Dans le code html on peut utiliser les variables width et height:
   <IMG SRC="image.gif" HEIGHT="500" WIDTH="&{width - 50};"> Ici la
   taille horizontale de l'image est diminuée de 50 pixels par
   rapport à la résolution de l'écran.

   Comment détecter la date, l'heure et le fuseau horaire ?

   <SCRIPT type="text/javascript"> </SCRIPT>

   Comment ouvrir et fermer une fenêtre du navigateur ?

   <SCRIPT type="text/javascript"> </SCRIPT>

   Dans le texte html: <a href="nomdelapage.htm"
   OnClick="wopen('nomdelapage')">

   Dans ce cas, si le browser utilisé par le visiteur ne supporte
   pas le javascript, la page sera affichée dans la fenêtre
   courante. Les valeurs des "attributs" sont 0 (false) et 1 (true);
   height est la hauteur en pixels de la fenêtre, et width la
   largeur.

   <SCRIPT type="text/javascript"> </SCRIPT>

   Dans le texte html de la page de la fenêtre à fermer: <a
   href="javascript:wclose()">

   Comment réaliser un Rollover ? (JavaScript 1.1)

   <SCRIPT type="text/javascript"> </SCRIPT>

   La condition version == "ok" vérifie que le browser supporte les
   objets images. Pour ce faire, il faut faire une détection du
   browser, qui doit être compatible JavaScript1.1 (voir 4.
   Versions, compatibilité).

   Dans le texte de la page html, si l'image1.gif doit être
   remplaçée par l'image2.gif lorsque le curseur passe sur l'image:
   <A HREF="page.htm" OnMouseover="on('image1')"><IMG
   SRC="image1.gif" NAME="image1"></A>

   Comment empêcher l'envoi d'un formulaire si celui-ci n'est pas
   correctement validé ?

   Chaque formulaire possède l'événement onSubmit. Si on lui
   retourne true, le formulaire est envoyé comme d'habitude, par
   contre si on lui retourne false, il annule la demande d'envoi et
   attends une nouvelle validation.

   <FORM onSubmit="return (document.forms[0].txt.value!=)> <INPUT
   TYPE="text NAME="txt"> <INPUT TYPE="submit"> </FORM>

   Comment empêcher un lien d'être activé ?

   Chaque lien possède l'événement onClick. Si on lui retourne
   true, le lien est suivi comme d'habitude, par contre si on lui
   retourne false, il redonne la main sans charger le nouveau
   document.

   <A HREF="page1.htm" onClick="return true">On y va</A>
   <A HREF="page1.htm" onClick="return false">On y va pas</A>

     * Puis-je tout le temps utiliser cette technique ?

   Oui, pour tous les événements existants, le return true est
   considéré par défaut et vous pouvez lui retourné false pour
   qu'il annule la demande d'ordre sauf pour la barre de status et
   onMouseOver où return false ou l'absence de return implique que
   le navigateur fait comme d'habitude et return true implique que le
   navigateur ignore la barre de status et laisse mettre le texte.

4. Versions, compatibilité

     * Quels sont les navigateurs qui interprètent le JavaScript ?

   Cette liste est à metre à jour en fonction des navigateurs
   actuellement utilisés.

   Il est important de ne pas générer vos pages *exclusivement* en
   JavaScript dans la mesure où un certain nombre de visiteurs ne
   pourront pas voir correctement votre page. Par exemple, les
   utilisateurs de Lynx ou NCSA Mosaic ou UdiWWW; ainsi que ceux qui
   ont désactivé le JavaScript. (paragraphe à actualiser)

     * Comment éviter les redondances avec les navigateurs
       non-JavaScript ?

   Les navigateurs qui ne reconnaissent pas le JavaScript
   considèrent vos scripts comme du simple texte et l'affichent donc
   sur la page sans l'exécuter. Pour éviter cela, rajoutez au
   début et à la fin de votre script les balises de remarque:

   <SCRIPT type="text/javascript"> </SCRIPT>

     * Comment éviter des erreurs de compatibilité ?

   - Une solution consiste à détecter le navigateur qu'utilise le
   visiteur et exécuter/ne pas exécuter les commandes qui
   poseraient problème à l'aide de commandes de test (if).

   - Il est également possible d'empêcher l'ouverture des boites de
   dialogues d'erreur JavaScript en écrivant ceci dans votre page
   html entre </title> et </head>:

   <SCRIPT type="text/javascript"> </SCRIPT>

   -Vous pouvez aussi détecter les objets que vous pourriez utiliser
   et effectuer des opérations avec/sur ceux-ci uniquement si ils
   existent: if (document.images) {xxx} if (document.layers) {xxx}

5. Sécurité

     * Un site peut-il voler le numéro de carte bancaire du visiteur
       à son insu, sans que celui-ci l'ait tapé dans un formulaire
       de ce site ?

   C'est peu probable, mais des trous de sécurité dans
   l'implémentation du Javascript et de la mémorisation dans le
   cache d'un numéro de carte bancaire (tapé lors de la visite d'un
   autre site) ont existé. Lorsqu'un trou de sécurité est
   découvert, il est rapidement corrigé et une nouvelle version du
   navigateur est distribuée. Il est donc conseillé d'utiliser les
   dernières versions des navigateurs, ou du moins la dernière
   version d'une génération.

     * Que NE peut-on PAS faire via JavaScript ?

   En théorie:
   - Accéder (lire, écrire, exécuter) aux fichiers du disque dur
   du visiteur ou du serveur.
   - Accéder (lire, modifier) aux informations personnelles du
   visiteur (paramètres de configuration, adresse e-mail, adresse
   ip)

6. JavaScript et...

   AJAX (il faudra faire une synthèse et proposer des références
   francophones)

   AJAX est un acronyme pour "Asynchronous Javascript And XML". Cette
   technologie repose sur l'objet XMLHttpRequest. 2galement connu
   sous le nom "Web 2.0", il permet l'envoi et la récupération de
   données depuis un serveur sans avoir à recharger la page
   courante

     * Documentation Mozilla :

          * http://developer.mozilla.org/en/docs/XMLHttpRequest

     * Documention MSDN :

         
*http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_xmlhttprequest.asp
          *
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/63409298-0516-437d-b5af-68368157eae3.asp

     * Bibliothèques AJAX et tutoriels :

          * http://jibbering.com/2002/4/httprequest.html
          * http://www.ajaxtoolbox.com

   Remote Scripting, une alternative à l'objet XMLHttpRequest :
   http://www.ashleyit.com/rs/main.htm

   JScript (à actualiser)

   Microsoft essaye de rendre son browser compatible avec le
   JavaScript de Netscape. Le langage est renommé JScript et
   contient quelques fonctionnalités supplémentaires, tout en
   étant pas 100% compatible avec le JavaScript. Plus d'infos:
   http://microsoft.com/france/jscript/techinfo/jsdocs.htm

   JAVA

   Javascript peut opérer avec le JAVA, mais ils sont différents;
   de par leur syntaxe et leur domaine d'application. Il est possible
   d'utiliser des données Java dans vos scripts; par exemple pour
   détecter la résolution d'écran du visiteur (via l'AWT) et
   afficher tel ou tel image en conséquence. Java est une langage de
   programmation, JavaScript un langage de scripts. Reportez-vous à
   la FAQ Java du groupe fr.comp.lang.java : FTP-Archive-Name:
   ftp://ftp.asynchrone.net/pub/faq/by-name/fr/faq-java

   VBScript (toujours d'actualité ?)

   Microsoft développe un autre langage de scripts: VBScript. C'est
   une sorte de langage d'extension (macro) à l'instar du VBA
   (Visual Basic). Il y a quelques ressemblances avec le JavaScript,
   notamment au niveau de la syntaxe. Ce langage est opérationnel
   uniquement sous Internet Explorer versions Windows.

7. Ressources hypertextes

   Vous trouverez une présentation à jour sur
   http://fr.wikipedia.org/wiki/JavaScript

   Où trouver des tutoriels, didacticiels JavaScript en français ?

     * une présentation en français sur selfhtml :
       http://fr.selfhtml.org/javascript/index.htm
     * une FAQ qui parle d'Ajax, de DOM, de feuilles de style, de
       formulaires,... : http://javascript.developpez.com/faq/

   Existe-t-il des banques de données et exemples de JavaScripts ?
   (à revoir là encore en mettant en avant les sites francophones)

     * http://www.toutjavascript.com/
     * http://webreference.com/js/
     * http://www.javascripts.com/

   Quelles sont les nouveautés offertes par JavaScript versions 1.5
   à 1.7 ?

     * http://developer.mozilla.org/fr/docs/JavaScript

A titre de conclusion

   Cette FAQ a longtemps été maintenue par Raphael Maree, elle
   l'est actuellement par Christophe Raverdy.
   Sa dernière mise à jour remonte au 2 février 2007.

   Si vous connaissez le principe de fonctionnement des wikis, vous
   pouvez vous aussi participer à la maintenance de cette FAQ en
   http://urlx.org/gnouf.info/e4cf2.

   Il vous est également possible de participer à la relecture des
   documents publiés par fr.usenet.reponses en passant par la
   plate-forme de travail sur http://gnouf.info/mediawiki.

   Pour finir, vous pouvez toujours envoyer un courrier électronique
   au gestionnaire de cette FAQ si certaines informations vous
   semblent devoir être mises à jour.

[Retour au sommaire]