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/Asynchr...Script_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.ph...ang.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("partiegauchecryp té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/de...ttprequest.asp
*
http://msdn.microsoft.com/library/de...368157eae3.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.