Archive-Name: fr/www/faq-JavaScript
________________________________________
| [FAQ]
JavaScript |
|____fr.comp.infosystemes.www.auteurs____|
Il est préférable de
consulter ce document avant de poser une question
au sujet du JavaScript dans
le groupe fr.comp.infosystemes.www.auteurs
Ce document se voulant être
utile et pratique, vos remarques,
critiques et propositions de modifications
et d'ajouts sont attendues
à cette adresse: Raphael.Maree@student.ULg.ac.be
Version
HTML de ce document:
http://usenet-fr.news.eu.org/fr.usenet.reponses/www/faq-JavaScript.html
_____________________________________________________________________
Appel
à contribution:
Si des questions *et leurs réponses* vous semblent utiles à
ajouter à
la FAQ et que vous pouvez les écrire, communiquez-les moi (avec
une
longueur de lignes ~70), je les copie-collerai dans la FAQ ainsi
que
vos
coordonnées.
_____________________________________________________________________
AJOUTS
& MISES à JOUR:
12 mars 2000:
- Où dois-je insérer mes JavaScripts
?
- 5.
sécurité
_____________________________________________________________________
_____________________________________________________________________
SOMMAIRE
========
1. Généralités
2. Le langage
3. Quelques scripts
pratiques
4. Versions, compatibilité,...
5. Sécurité
6. JavaScript
et...
7. Ressources:
url's
_____________________________________________________________________
1.
Généralités
* Qu'est-ce-que JavaScript ?
--------------------------
C'est un langage de scripts orienté-objet qui
permet d'écrire des
scripts au sein de vos pages html. Un script "vit" dans
un document
html. L'interaction html<->JavaScript se fait via une série
d'objets:
documents, formes, champs d'édition, boutons,... Ces objets
sont
organisés en hiérarchie et on leur attribue une liste de
propriétés,
méthodes & évènements.
Le JavaScript est développé par
Netscape Communications Corp.
* Que faut-il pour débuter ?
--------------------------
Rien de plus que votre browser compatible
(confer 4.) et un éditeur
texte (le même que celui que vous utilisez pour
écrire vos pages
html). En effet, les JavaScripts s'exécutent au sein de la
fenêtre de
votre navigateur web.
Il n'est donc pas possible de développer,
comme cela est possible en
java, des applications indépendantes.
*
Existe-t'il des outils/programmes pour écrire des JavaScripts ?
---------------------------------------------------------------
Bien que
cela ne soit pas indispensable, il existe des outils
permettant d'écrire des
scripts qui seront intégrés à vos pages; par
exemple Netscape Visual
JavaScript 1.0.
WebExpert, éditeur de pages html en français, intègre une
série de
JavaScripts
"prêts-à-l'emploi".
_____________________________________________________________________
2.
Le langage
* Où dois-je insérer mes JavaScripts ?
------------------------------------
(rédigé par "ThM" <thm@intercab.fr>)
Ils peuvent être
inclus au sein de votre page html ou
stockés dans un fichier texte séparé
(extension .js en général).
Il existe 2 moyens pour insérer vos scripts
dans la page HTML :
1- les balises <SCRIPT></SCRIPT>
2- les
événements
On place généralement les balises <SCRIPT> dans
l'en-tête de la page
HTML, comme ceci
:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT
type="text/javascript">...</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
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.
Pour placer un Javascript dans un fichier stocké sur
le
serveur, placez les balises :
<SCRIPT language="JavaScript"
src="fichier.js"></SCRIPT>
dans l'en-tête de la page
HTML.
L'utilisation des événements est traitée un peu plus
loin.
* Quelles sont les caractéristiques syntaxique de base ?
-------------------------------------------------------
La syntaxe
s'apparente à celle du Java, et donc du C & C++.
Le JavaScript intègre
les instructions de répétitions: while, for ;
les instructions de choix: if,
else.
On dispose des fonctions mathématiques, de chaînes de caractères et
de manipulation de dates. Il est possible de construire ses
propres
fonctions.
- 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)
* Quelles sont les
instructions de choix & de répétitions
?
-----------------------------------------------------------
-instruction
de choix:
if (expression1) {instructions1;}
else
{instructions2;}
"Si l'expression1 est vérifiée effectuer instructions1,
sinon
effectuer instructions2"
-instructions de répétition:
while
(expression1) {instructions;}
"Tant que l'expression1 est vraie effectuer
instructions"
for (expression1;expression2;expression3)
{instructions;}
"Pour l'expression1 initialisée, mise à jour à chaque
itération par
l'expression3 et vérifiant l'expression2 effectuer
instructions"
-interruption & saut d'itération
break "Interrompt
la boucle"
continue "Passe à l'itération suivante de la
boucle"
* Quels sont les évènements JavaScript ?
--------------------------------------
On peut attribuer à un objet
(élément de formulaire, image,
fenêtre...) les évènements suivants.
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;"
où x est un code JavaScript ou un appel à une fonction
JavaScript.
* 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 browser 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 de browser ainsi que
le système
d'exploitation. Pour obtenir la version du browser
uniquement:
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">
<!--
today = new Date(); /* date
heure fuseau horaire */
var heure = today.getHours();
var minute =
today.getMinutes();
var seconde = today.getSeconds();
var mois =
today.getMonth(); /* janvier=0 ,... décembre=11 */
var journum =
today.getDate();
var jour = today.getDay(); /* dim=0 , lun=1, mar=2,
mer=3,
jeu=4,ven=5,sam=6 */
//-->
</SCRIPT>
*
Comment ouvrir et fermer une fenêtre du browser ?
-----------------------------------------------
<SCRIPT
type="text/javascript">
<!--
function
wopen(page)
{
window.open(page+'.htm','nom','scrollbars=1,location=1,toolbar=1,directories=1,menubar=1,status=1,scrollbars=1,resizable=1,width=800,height=600');
}
//-->
</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">
<!--
function
wclose()
{
window.close();
}
//-->
</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">
<!--
if (version == "ok")
{
image1on
= new Image;
image1on.src = "image2.gif";
function
on(imgName)
{
if (version == "ok")
{
imgOn = eval(imgName + "on.src");
document
[imgName].src = imgOn;
}
}
}
//-->
</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é ? (rédigé par "lolo" <sdevil@club-internet.fr>)
-------------------
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é ?
--------------------------------------
(rédigé par "lolo" <sdevil@club-internet.fr>)
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 ?
----------------------------------------------
(rédigé par "lolo" <sdevil@club-internet.fr>)
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 browser fait comme
d'habitude et return true implique que le
browser ignore la barre de
status et laisse mettre le
texte.
_____________________________________________________________________
4.
Versions, compatibilité
* Quels sont les browsers qui interprètent le
JavaScript ?
--------------------------------------------------------
- JavaScript
1.0: Navigator 2.x, Internet explorer 3.x
- JavaScript 1.1: Navigator 3.x,
Internet explorer 4.x et 5.x,
Internet Explorer 3.01 MacOs, Opera 3.x,
- JavaScript 1.2: Navigator [4.0,4.05]
- Javascript
1.3: Navigator 4.06 et ulterieur
- Support partiel: KFM (Unix)
Il est
important de ne pas générer vos pages *exclusivement* en
JavaScript dans la
mesure ou 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.
Pour plus de détails
concernant le support des fonctionalités
JavaScript par les browsers IE et
Navigator et des bugs
d'implémentation: http://webcoder.com/reference/2/index.html
*
Comment éviter les redondances avec les browsers non-JavaScript ?
-----------------------------------------------------------------
Les
browsers qui ne reconnaissent pas le JavaScript considèrent vos
scripts comme
du simple texte et l'affiche donc sur la page sans
l'exécuter.
Pour
éviter cela, rajouter au début et à la fin de votre script les
"sigles" de
remarque:
<SCRIPT
type="text/javascript">
<!--
//-->
</SCRIPT>
* Comment éviter des erreurs de compatibilité ?
---------------------------------------------
-Une solution consiste à
détecter le browser qu'utilise le visiteur
(confer 3.) et exécuter/ne pas
exécuter les commandes qui poseraient
problème à l'aide de commandes de choix
(if).
-Également, il est 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">
<!--
function stopError() {return
true;}
window.onerror =
stopError;
//-->
</SCRIPT>
-Il est possible de
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)
En
pratique: des trous de sécurité permettent d'y accéder.
Par exemple:
- Le
"<TITLE> security bug" permettait à un site d'accéder aux
informations contenues dans about:config et about:cache.
Démonstration: http://www.nat.bg/~joro/titlecache.html
(Netscape Communicator 4.6 Win95, 4.07 Linux)
- Le "Window spoofing security
bug" permettait de faire croire
à l'utilisateur qu'il visitait un site
digne de confiance alors que la
page affichée était générée par le site
malintentionné précédemment
visité. Démonstration: http://www.nat.bg/~joro/b14.html
(Netscape Communicator 3.04, 4.06, 4.5 Win95 et 4.08 WinNT)
- L'envoi d'un
fichier se trouvant sur votre disque dur au
serveur peut être réalisé.
Démonstration: http://www.nat.bg/~joro/jsredir1-desc.html
(Microsoft Internet Explorer 5.0)
- L'exécution d'un programme se trouvant
sur votre disque dur
à votre insu.
Démonstration: http://www.nat.bg/~joro/chm-desc.html
(Microsoft Internet Explorer 5.0 & Microsoft Networking)
D'autres bugs:
http://www.nat.bg/~joro/netscape.html
,
http://www.nat.bg/~joro/browsers.html
_____________________________________________________________________
6.
JavaScript et...
* JavaScript et 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
*
JavaScript et JScript
---------------------
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
*
JavaScript et VBScript
----------------------
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.
*
JavaScript et EcmaScript
------------------------
L'EcmaScript est
un standard de langage de scripts principalement
dédié au web et influencé
par le JavaScript (et le JScript).
Pour en savoir plus sur ce langage, le
standard:
http://www.ecma.ch/stand/ecma-262.htm
____________________________________________________________________
7.
Ressources: url's
* Où trouver des tutorials, didacticiels JavaScript
en français ?
---------------------------------------------------------------
http://www.mygale.org/02/dliard/Sciences/Informatique/Langages/Scripts/Javascript/javascript.html
http://www.imaginet.fr/ime/javascri.htm
http://www.ac-grenoble.fr/jmoulin/WWildW/ENCYCLO/JSCRIPT/DIDACT/fscript.htm
* Et en anglais ?
---------------
http://sunset.usc.edu:80/~horowitz/Homework/sanhoyinX/hw2.html
http://www.geocities.com/SiliconValley/9000/
http://www.geocities.com/SiliconValley/Park/3091/main.htm
*
Existe-t-il des banques de données et exemples de JavaScripts ?
---------------------------------------------------------------
http://javascript.developer.com/
http://webreference.com/js/
http://webcoder.com/scriptorium/index.html
http://www.javascriptsource.com/main.html
http://www.infohiway.com/javascript/indexf.htm
http://www.serve.com/hotsyte/
http://www.javascripts.com/
http://www.xhtml.net/javascript/javascript.shtml
http://java.scripts-france.net
* Un test de rapidité d'opérations en JavaScript ?
------------------------------------------------
http://mercury.hypersurf.com/~pcheung/jsbench.htm
*
Qu'est-ce qui différencie le JavaScript du Java ?
-------------------------------------------------
http://www.dannyg.com/javascript/javavsjavascript.html
*
Quelles sont les nouveautés offertes par le JavaScript 1.2 et 1.3 ?
-----------------------------------------------------------------
http://devedge.netscape.com/docs/manuals/communicator/jsguide/js1_2.htm
http://devedge.netscape.com/docs/manuals/communicator/jsref/js13.html
_____________________________________________________________________
_____________________________________________________________________