Y. Delmas > Documents > Programmation côté client avec JavaScript

Programmation côté client avec JavaScript

Yannis Delmas
29 octobre 2010

Avant-propos#

Ce document contient des notes d'un cours d'initiation à la programmation Javascript pour le web destiné aux étudiants du Master web éditorial.

© 2003-2010 Yannis Delmas — CC-byncsa certains droits réservés

Pour lire ce document et pratiquer ses exercices nous conseillons d'utiliser un navigateur Firefox récent, installé avec l'inspecteur DOM et muni de l'extension Firebug. Un navigateur Google Chrome pourra également être utile.

1. Principes et intérêt de la programmation côté client#

Les techniques web permettent d'effectuer des traitement de l'information de trois grandes manières : la programmation côté serveur, la programmation côté client et les feuilles de style CSS. Cette dernière méthode ne permet de réaliser que des effects de réaction très simples, à cette date (toutefois la future recommandation CSS3 permettra des effets plus avancés). Pour améliorer la fluidité de la navigation il est recommandé de limiter, autant qu'il est possible, le recours à des programmes côté serveur. En effet, chaque l'appel d'un programme côté serveur nécessite un envoi d'informations du client vers le serveur, puis l'attente puis l'affichage d'une page reçue du serveur. Cette méthode serait particulièrement laborieuse pour tous les petits traitements qui ne nécessitent l'usage d'aucune information extérieure à la page. Cette méthode n'est pas applicable quand on a besoin de réactivité. À la programmation côté client revient donc principalement la gestion de l'interactivité et les effets visuels qui ne peuvent être réalisés à l'aide des seules feuilles de style CSS. Dans certains cas, il est possible également d'utiliser à la fois un programme côté client et un programme côté serveur (technologie dite AJAX) : le programme côté client gère l'interactivité et fait en sorte d'échanger des données avec un programme côté serveur de façon non invasive.

N'oublions pas, par ailleurs, que les technologies web peuvent également être employées hors ligne, par exemple sur un CD/DVD ou une clé USB. Dans ce cas les seuls outils disponibles sont, le plus souvent, le HTML+CSS et la programmation côté client. Certaines techniques permettent toutefois de simuler un serveur en restant hors ligne (XUL, mini-serveur local).

La programmation côté client peut se mettre en œuvre à l'aide de nombreux langages de programmation. Toutefois, seul le Javascript (JS) est réellement standardisé, répandu et disponible sur (presque) toutes les plateformes. Javascript est une adaptation très simplifiée du langage Java. Bien qu'initialement développé par Netscape (et Sun, en 1995), il a été validé par la European Computer Manufacturer Association (ECMA) et l'International Standardization Organization (ISO) sous le nom ECMAscript (dans une version légèrement amendée du JS 1.5). Par soucis d'interopérabilité on évitera donc les autres langages de programmation côté client.

Dans ce document le code HTML sera indiqué sur fond rouge (<balise attribut="...">), le code CSS sur fond orangé (sélecteur { propriété: valeur; }) et le code JavaScript (JS) en vert (document.formulaire.a = ...;).

2. Langage JavaScript et documents HTML#

Insistons que le champ d'application d'une programmation côté client est la page web qui le “contient” (et éventuellement d'autres fenêtres du même navigateur). Un tel programme n'a donc accès que aux données qu'elle contient, plus quelques données générales comme la date ou l'heure.

JavaScript est :

Le JavaScript n'étant pas le seul langage de script, il peut s'avérer utile d'indiquer au navigateur le langage des scripts contenus dans un document. Cela peut se faire soit à l'aide d'une balise <meta>, soit en le précisant pour chaque script. Le type MIME d'un script JavaScript étant text/javascript, cela donnera pour la balise <meta> :

<meta http-equiv="Content-Script-Type" content="text/javascript" />

et, pour les déclarations individuelles :

<script type="text/javascript">
<!--
    ici le script proprement dit
//-->
</script>

En pratique il n'existe pratiquement plus de scripts qu'en JavaScript. On pourra donc se contenter de balises <script> sans attribut type ni balise <meta>.

Actuellement (2010) JavaScript est dans sa version 1.8 (1.8.5 précisément), mais en pratique il est très fortement conseillé de s'en tenir à sa version 1.5 (2000), qui a été normalisée par l'ECMA sous le nom ECMAscript, version 3, et reconnue par l'ISO. JavaScript 1.5 est reconnu par l'ensemble des principaux navigateurs.

3. Événements et comportements#

Les programmes JavaScript sont constitués, grosso modo, de suites d'ordres donnés au navigateur. Ces ordres peuvent être exécutés de quatre façons différentes :

L'exécution synchrone est à préférer pour la définition des programmes (les fonctions) utilisés dans la page. Pour tout le reste, il est généralement préférable de travailler de façon interactive, c'est à dire en exécutant du code à la survenue d'événements déclenchés par l'utilisateur et le navigateur.

Pour chaque élément activable d'un document peut survenir une certaine liste d'événements. Les principaux sont les suivants (il en existe de nombreux autres). Notons que l'événement double clic existe aussi mais est déconseillé pour des questions d'ergonomie et de prise en charge.

Testez ces événements dans le tableau ci-dessous.

élément test attribut événements
zone active
(lien, ligne de tableau)
bouton
onmouseover début de survol par le pointeur
onmousemove survol avec déplacement
onmouseout fin du survol
onmousedown bouton du pointeur enfoncé
onmouseup bouton du pointeur relâché
onclick clic
zone de saisie ou lien onfocus l'élément devient la cible du focus
(l'entrée au clavier lui est envoyée)
onblur perte du focus
case de texte onchange changement du contenu
(et perte du focus)
onkeypress saisie au clavier
liste ou menu onchange sélection d'un des éléments
formulaire
onsubmit données du formulaire
sur le point d'être envoyées
onreset données sur le point d'être remises à zéro
document   onload vient d'être chargé
onunload s'apprête à être déchargé
(suivi de lien ou fermeture de la fenêtre)

Les besoins des concepteurs de sites étant souvent fort proches, il est souvent possible de reprendre ses scripts à partir de banques de programmes en ligne, ou en les extrayant de pages existantes (en veillant aux droits de l'auteur). Il est également possibled'utiliser des banques ou des assistants inclus dans les logiciels de création de pages. Dans Dreamweaver il est possible d'associer des de tels scripts, appelés comportements, à des événements à l'aide de la palette Comportements (ou Inspecteur de balises > Comportements). Dans la mesure où cet outil ne présente pas de difficulté particulière, nous ne nous étendrons pas sur ce sujet. Nous vous invitons, toutefois, à expérimenter systématiquement cette fonctionnalité afin de percevoir l'étendue de ses possibilités.

4. Un premier script élémentaire en Javascript#

La suite de ce cours comporte des scripts ou des portions de scripts, à titre d'exemple. Nous vous invitons à les reproduire, les adapter et les tester sur les principaux navigateurs. Pour développer vos scripts, nous vous conseillons d'utiliser le navigateur Chrome ou Firefox en ouvrant sa console Javascript. Cet outil vous signalera les erreurs que pourront rencontrer vos scripts.

Voici un exemple de script permettant d'additionner deux cases d'un formulaire. Nous allons l'analyser en détail. Observez d'abord son fonctionnement.

<script>
function calculer() {
    // cette fonction calcule A + B
    // et met le résultat dans S
    document.f.S.value = Number(document.f.A.value) + Number(document.f.B.value);
}
</script>
<form id="f" name="f">
  A =<br>
  <input type="text" name="A" size="8"><br>
  B =<br>
  <input type="text" name="B" size="8"><br>
  S =<br>
  <input type="text" name="S" size="8"><br>
  <input type="button" value="S = A + B" onClick="calculer()">
</form>
A =

B =

S =

Dans cet exemple on distingue deux types de codes : le HTML, constitué de simple texte et de balises (colorisées), et le Javascript. Le Javascript apparaît à deux endroits : dans la balise <script> (lignes 2 à 6) et dans l'attribut d'événement onClick (ligne 15). Nous verrons comment interprêter les lignes 2 à 6 ; retenons pour l'instant que ces lignes définissent une succession d'ordres, ce que nous appellerons une fonction (en anglais, function), ici la fonction calculer. On fait ensuite appel à cette fonction à la survenue de l'événement clic (attribut onClick, ligne 15).

Une fonction utilisée de cette façon se comporte comme s'il s'agissait d'un seul ordre, alors qu'elle peut contenir une succession d'ordres longue et complexe. Dans cet exemple la fonction calculer ne comporte qu'une seule opération : une addition. Dans tous les cas, on s'astreint le plus souvent à ce schéma : une ou plusieurs fonctions définies dans une (ou plusieurs) balise <script> appelées, par la suite, dans des attributs d'événements.

Observons maintenant les lignes 3 et 4. Il ne s'agit pas à proprement parler de code Javascript (elles sont rédigées en français) mais de ce qu'on appelle des commentaires. Les commentaires sont destinés à être lus par les concepteurs de scripts. Ils servent à se retrouver dans un programme, à indiquer ce que fait une fonction ou comment on l'emploie. Les commentaires s'écrivent de deux façon : soit tout ce qu'il y a entre /* et */, soit tout ce qu'il y a entre // et la fin de ligne (ex.: lignes 3 et 4 ci-dessus).

Testez l'exemple ci-dessus et tentez quelques variations sur le même thème. Dans la console Javascript de Chrome entrez l'ordre calculer(); et constatez le résultat.

5. Constantes et fonctions en Javascript#

Une fonction Javascript, est une suite d'une ou plusieurs “instructions” ou “commandes” (nous y reviendrons). Chacune de ces opérations est soit définie par un script soit prédéfinie par le langage de programmation lui-même. Ainsi, dans l'exemple précédent, la fonction Number (ligne 5) a-t-elle pour effet de recevoir une valeur, ici une suite de caractères (le contenu d'une case de texte), et de retourner le nombre qu'elle contient, s'il y en a un, 0 sinon. Voici un autre exemple de fonction :

function moyenne(a, b) {
  /* calcule la moyenne de ses arguments */
  return( (a+b)/2 );
}

Remarquons d'abord que toute fonction est désignée par un nom ou identificateur, ici moyenne. Quand on définit une fonction, ce nom suit le mot réservé function. Les identificateurs sont composés de suites de lettres et de chiffres commençant toujours par une lettre. On peut mélanger minuscules et majuscules mais, attention, il ne faut pas les confondre : Javascript est sensible à la casse.

Tout comme la fonction Number, la fonction moyenne reçoit et donne des valeurs. Les valeurs dont a besoin une fonction pour s'exécuter sont appelées ses arguments. La valeur que rend une fonction est appelée sa valeur de retour (en anglais : return value) ou encore son résultat. Dans la définition d'une fonction, les arguments sont désignés par des identificateurs placés entre parenthèse derrière le nom de la fonction, ils sont séparés par des virgules. Ces identificateurs sont dits muets parce que leur nom est indifférent. Ainsi on aurait pu tout aussi bien définir la fonction moyenne en utilisant les identificateurs x et y plutôt que a et b, à condition que x et y ne soient pas déjà utilisés pour désigner d'autres choses. La valeur de retour, le résultat, d'une fonction est définie en utilisant la fonction particulière return qui a pour effet de terminer la fonction en cours et d'indiquer que son résultat est l'argument de return.

Une fonction peut très bien n'avoir pas d'arguments ; on laisse alors ses parenthèses vides, comme dans le cas de la fonction calculer vue précédemment. De même une fonction peut ne pas renvoyer de résultat ; on laisse alors les parenthèses de son ou ses return vides. Dans ce cas la valeur de retour est une valeur particulière appelée undefined.

Revenons à notre exemple, si l'on fait appel à moyenne(3,6), a vaudra 3, b vaudra 6 et on calculera (a+b)/2 soit (3+6)/2, soit 4.5, valeur que return désignera comme résultat de la fonction.

Placez cet exemple dans un nouveau document et effectuez quelques calculs de moyenne à l'aide de la console Javascript du navigateur Chrome. Combinez cet exemple et l'exemple précédent de façon à calculer la moyenne de deux nombres entrés dans deux cases de texte.

Ceci nous amène à la question de l'écriture des nombres. Celle-ci se fait à l'anglaise (avec un point), directement dans code du script. Les nombres ainsi écrits sont appelés des constantes.

Il existe d'autres types de constantes. Un cas courant est la chaîne de caractères, on dit aussi chaîne (tout court). En Javascript les constantes de chaînes s'écrivent encadrées d'apostrophes ou de guillemets (droits), indifféremment. Voici un exemple :

<input type="button" value="bonjour"
       onclick="alert('bonjour');" />
<input type='button' value='au revoir'
       onclick='alert("au revoir");' />

Nous reviendrons sur la fonction alert plus tard. Constatez simplement son fonctionnement pour l'instant. Reproduisez et adaptez ce code.

Notons que, dans le premier cas, nous n'avons pas pu utiliser de guillemet, puisque ceux-ci servent à délimiter la valeur de l'attribut onClick. Dans le second cas, comme on a utilisé des apostrophes pour délimiter l'attribut, on peut utiliser des guillemets dans le Javascript. Quand on emploie une balise <script>, ce problème ne se pose pas : on utilise ce que l'on veut.

Ajoutons que l'on a parfois besoin de rendre actif une partie de texte ou une image qui ne constitue pas un hyperlien. Dans ce cas, la pratique la plus générale est de créer un "faux" lien avec # comme destination. C'est ce que font généralement les logiciels de composition de page. Le problème est que # est interprêté de manière variable soit pour désigner la position actuelle soit pour désigner le haut du document actuel, ce qui peut poser des problèmes d'affichage. On peut faire un lien neutre (vraiment neutre) en mettant comme destination javascript:void(0); (void est une fonction Javascript qui ne fait rien).

6. L'usage le plus courant du HTML dynamique#

Ce que nous venons d'apprendre nous permet de nous retrouver a minima dans un code produit par un logiciel de composition de page, Dreamweaver ou autre.

Demandez l'affichage du code de pages à l'aide de votre navigateur (Firefox ou Chrome, idéalement) et étudiez cela. Vous produirez des pages testant les différents comportements possibles et leur traduction en Javascript. Vous constaterez que Dreamweaver ajoute et retranche automatiquement les définitions des fonctions nécessaires aux comportements que vous insèrerez dans vos pages.

Au cours de ces analyses vous aurez pu remarquer que Dreamweaver place systématiquement les scripts dans l'en-tête du document. Cela fonctionne également pour les pages dépendant de modèles.

Ces comportements permettent de faire beaucoup de choses, des plus ergonomiques aux plus superflues et encombrantes. Comme souvent en matière d'usabilité, la règle est d'éviter d'en faire trop. Par ailleurs, s'il est possible d'obtenir un effet à l'aide d'une feuille de style CSS, il est préférable de l'adopter de préférence à un script Javascript.

Il est important, par ailleurs, de ne pas oublier que certains internautes, ainsi que les moteurs de recherche, n'ont pas Javascript ou l'ont désactivé de leur navigateur. Si certaines fonctionnalités de vos scripts sont essentielles dans une page, il est donc impératif de fournir une alternative à tout ceux qui ne disposent pas de Javascript, pour une raison ou une autre. Pour cela, le HTML contient une balise spéciale <noscript>. Son contenu est ignoré par les navigateurs pour lesquels Javascript est actif ; il est seulement affiché par les autres. Voyez l'exemple ci-dessous. Nous reviendrons plus tard sur la fonction document.write(), retenons simplement pour l'instant qu'elle permet d'insérer du code HTML là où est positionné le script. Observez ce mécanisme en reprenant le code ci-dessous et en activant et désactivant Javascript dans votre navigateur (on pourra utiliser l'extension Webdeveloper de Firefox).

<script>
    document.write("Javascript est activé.");
</script>
<noscript>
    Javascript <span style="color: #F00;">n'est pas</span> activé.
</noscript>

Javascript est activé.
/
Javascript n'est pas activé.

Pour en finir avec les modes d'apparition usuels des scripts, mentionons encore que quand un même script revient sur plusieurs pages, il est bon (en terme de temps de téléchargement) de placer ce script dans un fichier à part qui sera appelé par les documents qui en ont besoin. Ceci se fait en utilisant une construction du type suivant :

<script type="text/javascript" src="../communs/ins-date.js"></script>

Notez l'extension .js pour les fichiers Javascript.

Vous avez maintenant les éléments nécessaires pour vous repérer dans la quasi totalité des scripts présents sur le web et, le cas échéant, les réutiliser sur votre site. Attention, toutefois : il faut respecter la propriété intellectuelle des auteurs de scripts. Quand un programme est signé, on n'a pas le droit de le reprendre sans permission de l'auteur. Quand cette permission est acquise, il reste interdit d'enlever la signature de l'auteur. Nous vous invitons à tester abondamment la récupération de scripts en repérant des effets intéressant sur tel ou tel site ou en vous reportant à des banques de scripts.

7. Un premier programme : les instructions#

Nous allons maintenant aborder sommairement la programmation en Javascript. Pour ceux qui souhaitent dépasser le simple "repiquage".

Un script ou une fonction sont, en général, composés d'une succession d'étapes appelées instructions. Nous verrons différents types d'instructions. Revenons d'abord sur le type le plus simple d'instruction : l'appel de fonction. Il s'écrit de la façon suivante :

nom_de_la_fonction ( liste, de, valeurs );

On fera attention au point-virgule, qui termine les instructions. Le saut de ligne les termine également. On sera donc très vigilant à l'indentation.

Voici un premier exemple, que vous pourrez adapter, notamment en y introduisant des erreurs, pour voir ce qui se passe dans le navigateur et dans la console Javascript.

<script>
    document.write("Bonjour tout le monde !");
</script>

Bonjour tout le monde !

Les fonctions auquelles on fait appel sont soit pré-définies (comme document.write, ci-dessus) soit définies dans le script, comme dans l'exemple suivant :

<script>
  function moyenne(a, b) {
    return( (a+b)/2 );
  }
  document.write("La moyenne de 34 et 55 est ", moyenne(34, 55), ".");
  document.write(" Celle de 20 et 90 est ", moyenne(20, 90), ".");
</script>

La moyenne de 34 et 55 est 44.5. Celle de 20 et 90 est 55.

Cet exemple nous montre, par ailleurs, que l'on peut utiliser le résultat d'une fonction comme argument d'une autre, en l'occurrence le résultat de la fonction moyenne sur les arguments 34 et 55 est employé ligne 5 comme argument de la fonction document.write. Testez cela.

8. Identificateurs, variables et expressions#

Jusqu'à présent, nous avons vu deux manières de manipuler des valeurs. La plus simple est, évidemment, d'employer directement des constantes. Cette méthode est très limitée : elle ne peut s'appliquer à des objets plus complexes, tels que des fenêtres, des éléments HTML ou des contrôles de formulaires. Seconde limitation : on ne connait pas toujours la valeur sur laquelle on travaille. Ainsi, pour la fonction moyenne de l'exemple précédent, on a choisi de donner un nom au premier et au second argument, respectivement a et b. Un identificateur permettant de désigner une valeur s'appelle, comme en mathématiques, une variable.

Pour indiquer que telle variable doit désigner telle valeur, on utilise l'écriture suivante. C'est un type d'instructions appelé affectation :

nom_de_la_variable = valeur ;

Première remarque : cette instruction se termine, elle aussi, par un point-virgule. Seconde remarque, attention : il ne faut pas confondre l'instruction d'affectation et l'égalité. Par exemple l'écriture n=n+1; est correcte : elle dit que la variable n vaut désormais l'ancienne valeur de n plus un, autrement dit, on ajoute 1 à la valeur de n. Voici un nouvel exemple (où l'on ne cite que la partie JS, pas le HTML qui l'englobe) :

a = 14; // entier
b = 137.6; // nombre à virgule flottante
maVariable = "Bonjour tout le monde !"; // chaîne de caractère
test = false; // booléen
moyenne = function(a1, a2) { return( (a1+a2)/2 ); } // fonction
x = ( a * 3 ) / 2 + b; // la valeur de x provient d'un calcul
document.write("x vaut ", x);
document.write("<br>la moyenne de a et b vaut ", moyenne(a,b) );

Les quatre premières lignes de cet exemple montrent les types les plus simples de variables. On y découvre un nouveau type de valeurs appelée booléen (ligne 4). Un booléen vaut ou bien true, c'est-à-dire vrai, ou bien false, c'est-à-dire faux. On y voit que la valeur affectée peut être calculée à l'aide d'une formule utilisant les opérateurs usuels (ligne 6). On aurait pu également utiliser des fonctions, prédéfinies ou définies par script (comme en ligne 8). La ligne 5 montre une nouvelle façon de définir les fonctions (uniquement pour les étudiants les plus à l'aise). Elle nous apprend également que les fonctions constituent également un type de valeurs que l'on peut affecter aux variables. Vous ferez plusieurs essais de ce type. Vous essaierez également la fonction moyenne introduite plus haut, et quelques autres similaires.

Contrairement à HTML, il est important de noter que la casse des lettres importe : date, Date et DATE sont trois identificateurs différents. Vous ferez quelques tests pour voir si les principaux navigateurs l'entendent bien ainsi.

Les principaux opérateurs sont les suivants :

+ pour les chaînes, concaténation (ex.: 'a'+'b' donne 'ab')
+, -, *, / pour les nombres : addition, soustraction, multiplication, division
% (se lit modulo) reste de la division d'entiers (ex.: 7%3 donne 1)
&&, ||, ! opérateurs booléens : et, ou, non
&, |, ^, ~ opérateurs binaires bit à bit : et, ou, ou exclusif, non

On trouve parfois des opérateurs combinés à des affectations ou des opérateurs complexes. Voici une table de "traduction":

a++ ajouter 1 à a, équivaut à a=a+1
a-- retrancher 1 à a, équivaut à a=a-1
a+=b, a-=b, a*=b etc. a=a+b, a=a-b, a=a*b etc.
test?b:c vaut b si test est vrai, et c sinon

Notons, pour finir sur les variables, qu'il est de bon usage de déclarer que tel ou tel identificateur désigne une variable, éventuellement-même avant de lui affecter une valeur. On le fait de la manière suivante : var i; indique simplement que i est une variable. Si l'on veut, on peut simultanément affecter une valeur : var i=12;.

9. Un langage orienté objet#

9.1. Objets, propriétés, méthodes

JavaScript est un langage à objets. On peut se représenter les objets comme des sortes de valeurs complexes ayant plusieurs "attributs", de la même façon que les éléments HTML ont des attributs. Ces "attributs" se rangent en deux catégories :

Sans le dire, nous avons déjà rencontré un tel objet : document. Ce nom désigne le document qui exécute (et, généralement, contient) le script en cours. Autrement dit, dans deux fenêtres différentes ce nom désigne deux objets différents. Nous avons également rencontré l'objet window, qui désigne la fenêtre (ou le panneau) qui contient le document en question.

Les propriétés et méthodes sont désignées à l'aide du nom de l'objet suivi d'un point puis du nom de la propriété ou méthode. Prenons un exemple vu ci-dessus : document.f. Nous pouvons maintenant interprêter cette écriture comme la propriété f de l'objet document, en l'occurrence il s'agit de son formulaire nommé f. Nous avons également rencontré document.write. Nous savons maintenant qu'il s'agit de la méthode write de l'objet document, qui, en l'occurrence, insère du code HTML là où est le script. Pour connaître les propriétés et méthodes des différentes classes d'objets, on se reportera à la documentation de Javascript pour les objets du langage et aux recommandations DOM pour les objets du HTML. On pourra aussi utiliser l'inspecteur DOM des navigateurs Chrome et Firefox, ou l'extension Firebug.

L'usage le plus fréquent de ces écritures est de désigner les différents éléments qui composent une page. Voici un exemple d'interprétation d'une expression issue d'un exemple ci-dessus, document.f.A.value :

9.2. Principaux objets globaux

Nous ne rentrerons pas ici dans le détail des principaux types d'objets. Nous nous contenterons d'exemples visant seulement à illustrer les principaux mécanismes du langage. Pour plus d'informations on se reportera à la documentation de Javascript.

L'exemple suivant fait appel à diverses méthodes des objets de classe Date.

<script>
  var maintenant = new Date();
  document.write("<p>Poitiers, le ",
    maintenant.getDate(), "/",
    maintenant.getMonth()+1, "/",
    maintenant.getYear()+1900, ".<\/p>");
</script>

On remarquera que, dans cet exemple, nous n'avons pas écrit "</p>" mais "<\/p>". Ceci vient de ce que la première balise fermante est réputée clore le script. On doit donc employer un stratagème de contournement : la combinaison \/ sera remplacée par un / au moment de l'interprétation du script. Cette construction n'est plus guère nécessaire, mais on la trouve encore.

Nous relèverons enfin la ligne var maintenant = new Date(); qui dit : désormais l'identificateur maintenant désigne une variable et celle-ci contient un nouvel objet de classe Date (lequel, par défaut, représente la date courante). Ceci nous permet ensuite d'appliquer des méthodes de cette classe à ce nouvel objet.

Quand on programme souvent, il est utile de connaître les principales propriétés et méthodes des objets usuels. Voici, par exemple, celles des objets chaînes de caractère :

Ajoutons, pour finir, que la longueur d'un tableau d'objets ou de valeurs (classe Array) est sa propriété length.

9.3. Les objets du navigateur

Le navigateur fournit d'emblée quelques objets utiles.

L'objet principal est l'objet window. En réalité, dans les exemples précédents, quand nous avons défini des variables a, b, x etc. celles ci étaient créées comme des propriétés de l'objet window. Il s'agissait en réalité de window.a, window.b, window.x etc. Observez-le à l'aide de l'inspecteur DOM de Firebug. De la même façon l'objet document est en réalité l'objet window.document. La référence à l'objet window est le plus souvent implicite.

Voici quelques propriétés intéressantes de cet objet:

Observez et testez ces différentes propriétés. Exercice : affichez les dimensions de l'écran, la position de la fenêtre et ses dimensions (si vous êtes rapide, affichez ça graphiquement à l'échelle 1/2). Observez qu'il est possible de modifier ces paramètres.

Outre ces propriétés, l'objet window possède des méthodes qui peuvent s'avérer utiles. Comme il y a peu de risques d'ambiguité, nous omettrons souvent le préfixe window.. Voici ces méthode, suivies d'une démonstration :

alert('Erreur de saisie de l\'e-mail.');
ok = confirm('Voulez-vous vraiment effacer cette fiche ?');
prompt('Quel est votre nom ?', '');
var fenetreDemo = open('truc.html', 'PrWtest', 'width=300,height=100,status');
fenetreDemo.close();




>>  

Mentionnons enfin la méthode setTimeOut(code, delai), qui permet d'exécuter un certain code Javascript au delà d'un certain temps (en millisecondes). Nous ne détaillerons pas son comportement, qui recèle quelques pièges.

10. Jouer avec les objets du navigateur#

10.a. Le DHTML et le DOM

La modification de l'aspect d'un document et/ou la réaction à des événements déclenchés par l'utilisateur sont classés sous l'appellation Dynamic HTML ou DHTML. Ce système, introduit par Netscape dans ses navigateurs, n'a cessé de se développer. Malheureusement, Microsoft fit alors des choix différents de ceux de Netscape, ce qui induisit une certaine incompatibilité des scripts assurant le DHTML.

En 1998, le W3C a fait un grand pas vers l'unification de l'interface entre les langages de script, dont Javascript, et les documents HTML en définissant un standard de désignation des objets d'un document, le DOM (Document Object Model). Les recommandations définissant le DOM sont émises par le W3C. Le "DOM niveau 0", informel, correspond sensiblement aux facultés des navigateurs Netscape 3.0 et Internet Explorer 3.0. Le DOM niveau 1 nomme les éléments du HTML et du XML, en général. Il ne donne pas accès aux événements. Le DOM niveau 2 le surclasse (de façon incompatible). Elle est actuellement en vigueur pour ce qui concerne le HTML, elle est implémentée dans les navigateurs de génération 6 (IE 6, NS 7, FF 1). Cette norme est complétée par un DOM de niveau 3, concernant la structure de base, l'arborescence des éléments et des attributs eux-mêmes. La recommandation HTML5, en préparation, inclut désormais une description des fonctionnalités DOM.

Désormais tout script qui modifie le contenu d'un document HTML ou son rendu visuel doit utiliser les méthodes DOM (ou un des grands frameworks Javascript).

Dans ces spécifications les identifiants de propriétés et méthodes sont souvent composés de plusieurs mots écrits les uns à la suite des autres (sans espace). Le premier est en minuscules et les suivants prennent la majuscule à l'initiale. Par exemple : fileDateCreated. On prendra donc bien garde à respecter la casse.

10.b. Cas simples d'interactivité

Les usages les plus courants de DHTML consiste en l'apparition ou la disparition de calques, la modification d'images en cas de survol et le signalement de la position dans un site (rubrique actuelle, par exemple).

Les calques, aussi appelés couches, sont des blocs nommés, généralement des <div>isions, qui sont positionnés de façon fixe dans la fenêtre ou la page, ou parfois relative par rapport au flot, et qui sont rendues visibles ou invisibles à l'aide de la propriété CSS visibility (qui vaut visible ou hidden). Ils servent le plus souvent à réaliser des onglets, des popups ou menus. Dreamveaver inclut un comportement JS afficher-masquer éléments qui permet de réaliser ça facilement. L'observer rapidement.

+ afficher calque | + masquer calque

La modification d'une image au survol peut également être réalisée à l'aide d'un comportement JS (quand il n'est pas possible de le réaliser à l'aide de règles CSS). On prendra garde, dans un cas comme dans l'autre, à ses dimensions. L'observer rapidement.

Cas d'une image dimensionnée : / Cas d'une image non dimensionnée :

Dans ces deux exemples, nous nous contentons de modifier des propriétés uniques relativement simples. En réalité toutes les propriétés de tous les éléments, tant en terme de contenu que d'aspect, sont modifiables par programme. En voici une illustration (attention : le signe ► indique que la ligne se prolonge). L'observer rapidement.

function exAppliqueStyle() {
  var e = document.getElementById('txtTstSty');
  e.style.color = '#' + document.testStyle.coulTxt.value;
  e.style.backgroundColor = '#' + document.testStyle.coulFond.value;
  e.style.fontSize = document.testStyle.taille.options[ ►
       ► document.testStyle.taille.selectedIndex].text;
  e.style.fontWeight = document.testStyle.graisse.options[ ►
       ► document.testStyle.graisse.selectedIndex].text;
  e.style.fontStyle = document.testStyle.selSty.options[ ►
       ► document.testStyle.selSty.selectedIndex].text;
}
texte d'exemple
taille :
style :
graisse :
c. fond : #
couleur : #

On voit dans ce script un appel à la fonction document.getElementById qui permet d'obtenir un élément à partir de son identifiant id. On découvre également la propriété style, qui donne accès au style CSS de son propriétaire à l'aide d'un certain nombre de sous-propriétés (que l'on peut connaître à l'aide de Firebug ou des inspecteurs DOM). Ces propriétés peuvent être utilisées ponctuellement, mais il est normalement préférable d'utiliser une autre méthode que nous allons voir maintenant.

10.c. Les modifications d'aspect

Les modifications d'aspect sont généralement des modifications de couleur, fonte, dimension ou fond d'une portion de texte ou d'un élément graphique. Nous avons déjà déconseillé de désigner cet aspect autrement qu'à l'aide de feuilles de style (voir le cours Documents structurés pour le web). Pour exactement les mêmes raisons, nous conseillons ici d'utiliser des indications de style plutôt que des ordres directs, que nous n'expliciterons pas. Toutefois, notons que l'emploi de cette méthode nécessite que le navigateur supporte la norme DOM.

La méthode la plus simple, la plus robuste, mais aussi la plus élégante pour changer l'aspect d'une partie de document est de lui appliquer une classe initiale et de lui faire changer de classe en tant que de besoin. Observez ceci sur l'exemple suivant, que vous reproduirez et adapterez.

<style> /* extrait */
#tstChgCls div {
	display: none;
}
.ex1 {
    background-color: #0AF; color: #A80;
    font-style: italic;
}
.ex2 {
    background-color: #FC0; color: #046;
    font-variant: small-caps;
}
#tstChgCls.ex2 div {
	display: block;
}
</style>
<script>
function defClasse(nom, classe) {
    var element = document.getElementById(nom);
    element.className = classe;
    // on aurait pu aussi écrire directement :
    // document.getElementById(nom).className = classe;
}
</script>



Texte d'exemple
...Section cachée dans l'exemple... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

11. Structures de contrôle# du Javascript

Pour l'instant les programmes Javascript que nous avons eu l'occasion de voir sont tous linéaires. Comme des cartons d'orgue de barbarie, la suite de leurs ordre se déroulent toujours identiques et toujours dans le même ordre. Pour pouvoir réellement parler de programmation il faut ajouter quelques ingrédients qui permettent de s'adapter à la situation.

Pour l'instant les programmes que nous avons vu se contentaient de transférer des valeurs de variables ou objets vers d'autres variables ou objets. Or les programmes peuvent aller plus loin en se fondant sur des choix, des alternatives. Le mécanisme le plus simple de choix, en programmation impérative, est le conditionnel. Il a l'une des formes suivantes :

if ( test ) {
    // actions si vrai
}

ou :

if ( test ) {
    // actions si vrai
} else {
    // actions si faux
}

Le test est simplement une valeur. Si cette valeur, booléenne, est vraie (true), alors la première série d'action est conduite et la seconde ignorée. Si elle est fausse (false), c'est la seconde qui est exécutée et la première ignorée. Une valeur numérique nulle équivaut à faux et non-nulle à vrai. Une chaîne vide équivaut à faux et non-vide à vrai. Un objet nul ou indéfini équivaut à faux et un objet bien défini et non-nul à vrai. Par extension, on parle parfois de test pour désigner le conditionnel entier.

La première utilisation des conditionnels devrait être de tester la disponibilité de telle ou telle fonction ou de tel ou tel objet. Voici, ainsi, une réécriture d'une fonction observée ci-dessus. Elle permettait de changer la classe CSS d'un objet donné en argument. La version amendée ci-dessous commence par tester l'existence de la méthode qui permet de trouver un objet (et ne fait rien sinon), getElementById, puis teste que l'objet demandé a bien été trouvé.

function defClasse(nom, classe) {
    if ( document.getElementById ) { // navigateur DOM ?
        var element = document.getElementById(nom);
        if ( element ) { // un objet de ce nom existe-il ?
			element.className = classe;
		}
	}
}

Il est possible, avec un même conditionnel de tester plusieurs conditions simultanément en utilisant les opérations booléenne et (&&) et ou (||). Ainsi, pour tester le test correspondant à la satisfaction simultanée de deux conditions s'écrit-il : cond1&&cond2. De même pour tester si l'une au moins de deux conditions est satisfaite : cond1||cond2 . Pour indiquer qu'une certaine condition n'est pas satisfaite, on écrira : ! cond. Le test le plus courant qui soit est le test d'égalité : a==b. Attention, on prendra grand soin de ne pas le confondre avec l'ordre d'affectation (qui comporte un seul signe égal). Cette confusion est une erreur extrêmement fréquente.

Outre le conditionnel, le Javascript comporte d'autres structures de contrôle. Si vous ne programmez pas régulièrement, il n'est pas utile d'en maîtriser l'usage. En revanche, il est impératif de connaître leur existence et leur nom, de façon à pouvoir se reporter à la documentation en cas de besoin.