Ressources JavaScript



Documents de référence

ECMAScript

JavaScript / Documentation Netscape

Centre de ressources Netscape : http://developer.netscape.com/library/documentation/javascript.html

JavaScript 1.3 Coté-client

These books replace the following documentation:

JavaScript 1.4 Coté-serveur

JavaScript 1.2 Coté-serveur

These books replace the following documentation:

Fondements JavaScript 1.4

The core language includes a basic set of objects, such as Array, Date, and Math, and a basic set of language elements, such as operators, control structures, and statements. You can extend core JavaScript for a variety of purposes by supplementing it with additional objects.

Informations générales

Outils JavaScript

Dynamic HTML et Netcaster

LiveConnect et Plug-Ins

Notes techniques

JScript / Documentation Microsoft

Ressources Microsoft : http://microsoft.com/france/jscript/techinfo/jsdocs.htm

Sites Web

Forums de discussions

fr.comp.infosystemes.www.auteurs
Objet: [FAQ] JavaScript
Date: Fri, 16 Apr 1999 20:42:50 GMT
De: Raphael.Maree@student.Ulg.ac.be (Raphael Maree)
Forums: fr.comp.infosystemes.www.auteurs,fr.usenet.reponses
Suivi-A: poster

Archive-Name: fr/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

AJOUTS & MISES à JOUR:
28 septembre 1998:
  - 4. Versions.
  - 7. Actualisation des liens.

13 Mai 1998:
  - 6. JavaScript et EcmaScript.

_____________________________________________________________________
_____________________________________________________________________

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 ?
  ------------------------------------

Ils doivent être inclus au sein de votre page html. Ils sont entourés
des balises <SCRIPT></SCRIPT>
En général on les place à cet endroit:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT type="text/javascript">
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Vous pouvez aussi écrire un Javascript dans un fichier stocké sur sur
le serveur; pour y faire appel:
<SCRIPT language="JavaScript" src="fichier.js"></SCRIPT>

* 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>

_____________________________________________________________________

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 webmaster peut-il me voler mon numéro de carte bancaire ?
  ------------------------------------------------------------

C'est peu probable.
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.

Les problèmes connus liés au JavaScript sont répertoriés ici:
http://developer.netscape.com/library/javascript/faqs/buglist/js-known-bugs.html

* Que NE peut-on PAS faire via JavaScript ?
  -----------------------------------------

- 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...

* 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.univ-lyon1.fr/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


* 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

_____________________________________________________________________
_____________________________________________________________________

Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
14 décembre 1999