TROISIEME PARTIE

Le Java Script

XX. Généralités

1. Introduction

Java Script a d’abord été inventé par Brendan Eich 1995 pour le navigateur Netscape, et s’appelait alors Livescript. Le concept a ensuite été repris pour Internet Explorer sous le nom de JScript. Afin de rendre les deux compatibles, l’organisation ECMA a publié trois version successives du standard entre 1997 et 1999, qui porte dorénavant la référence ECMA 262 ou ISO/IEC 16262. Le nom exact du langage est ECMAScript, mais il est appelé partout Java Script quand il est implémenté dans un navigateur Web. Ce nom a été choisi par Netscape pour profiter du succès de Java, mais ce sont deux choses strictement différentes même s’il y a des syntaxes qui se ressemblent.

Java Script, sans équivoque, est un langage de script. Il ne reste donc plus qu’à expliquer ce qu’est un langage, ce qu’est un script, et enfin à quoi ça sert.

Un langage est un moyen de décrire les opérations qu’une machine doit réaliser. Pour cela, les langages modernes utilisent quatre sortes de principes : les instructions, les variables, les fonctions et les expressions. Actuellement, la distinction entre instruction et fonction (et même entre instruction et expression) n’est plus utile, sauf dans un but pédagogique. De même, les fonctions et les variables sont regroupés dans une entité unique.

Les instructions indiquent une action à effectuer. Elles sont représentées par un mot clé, auquel sont adjoints des paramètres. Par exemple, pour afficher un texte à l’écran, l’instruction est print, et les paramètres sont le texte à afficher, et éventuellement la position. Un cas particulier important est constitué par les instructions de flot, qui permettent de déterminer quelle section d’un programme doit être exécuté, selon une condition ou pas.

Les variables contiennent les données, avec des types parfois très hétéroclites : chaînes de caractères, nombres, tableaux, structures de toutes formes et de tous genres. Il faut bien comprendre ce que cela signifie : Une variable est représentée par un identificateur noté par une chaîne de caractère, mais sa valeur change au cours du déroulement du programme. Ce n’est pas comme en mathématiques où la valeur peut être inconnue, mais est fixe. L’identificateur est donc un peu comme l’étiquette sur un tiroir, qui lui est la variable. Sa valeur est le contenu de ce tiroir, susceptible de changer au cours du temps.

Une fonction est presque identique à une instruction, mais outre ses actions, elle retourne une valeur, c’est-à-dire que le résultat de son exécution est une valeur qui peut être utilisée par la suite. Une fonction est souvent définie dans le programme lui-même, afin de ne pas réécrire à chaque fois la même suite d’instructions. C’est aussi et surtout un moyen d’organiser un programme autour de certaines fonctionnalités importantes. On dispose alors d’un ensemble d’outils prédéfinis, qu’il reste ensuite à combiner pour atteindre le but fixé.

Une expression est une partie d’un programme qui contient des constantes, des identificateurs de variable, des opérateurs et des appels de fonction, et dont l’évaluation à pour résultat une valeur d’un type donné. Le résultat de l’expression est dans la plupart des cas affecté à une variable, c’est-à-dire que la valeur de celle-ci change pour prendre celle du résultat. Les deux opérations évaluation et affectation sont bien séparées dans le temps, de sorte que si la variable devant être affectée se trouve aussi dans l’expression, c’est sa valeur avant l’évaluation qui est prise en compte dans le calcul.

Mais que permet de faire Java Script ? Comme il est utilisé dans un document HTML, son rôle principal est bien sûr de manipuler et de modifier celui-ci, qui est alors affiché comme s’il avait toujours été écrit ainsi. Un langage de script tel Java Script permet donc de recueillir des informations : version du navigateur, actions de l’utilisateur, événements divers, pour y réagir et adapter le contenu du document ou produire divers effets, en un mot, rendre la page interactive. Etant donné qu’il est intégré à un environnement possédant ses propres objets, et qu’il ne peut pas être exécuté en dehors de celui-ci, ses programmes ou applications sont affublés du terme diminutif de script, rappelant que c’est une simple écriture.

Java Script est un langage orienté objet, un concept qui est apparu il y a environ vingt ans, et qui est devenu depuis la tarte à la crème de la programmation. En fait, il n’est pas vraiment nouveau, mais a été généralisé et mis au premier plan. Java Script ne traite pas les objets exactement comme les langages C++ ou Java. L’explication qui suit se concentrera donc sur le concept d’objet à la Java Script.

L’exemple le plus simple est un nombre. C’est un objet définit par un ensemble de propriétés, dans notre cas une valeur décimale, et un ensemble de méthodes qui ne sont rien d’autre que des fonctions, dans notre cas les opérations courantes comme l’addition et la multiplication. Un objet peut être rangée dans une variable.

Dans le langage des objets, si x et y sont deux objets nombre, une addition serait notée :

resultat = x.plus(y),

où plus est le nom de la fonction. Le résultat de la somme est la valeur retournée par la fonction, égale à x.valeur + y.valeur, où valeur est la propriété contenant la valeur décimale. Le point sert à noter que la fonction plus appartient à l’objet x. La même notation est utilisée pour les propriétés, comme par exemple x.valeur représenterait la valeur actuelle représentée par l’objet x. Cette notation compliquée n’est bien sûr pas utilisée pour un exemple aussi simple, mais celle qui l’est réellement n’est qu’une écriture condensée, qui conserve l’idée de départ. En effet, l’addition pour des valeurs qui ne sont pas des nombres, comme des chaînes de caractères, est une fonction totalement différente, et il doit exister une fonction plus() idoine, appartenant à l’objet dont on veut définir l’addition.

En plus des objets natifs prédéfinis par le langage Java Script, le navigateur (ou toute application faisant appel à Java Script) fournit des objets dont la définition est imposée par une norme du W3C, et qui permettent de manipuler toutes les données liés à l’environnement, comme le document lui-même ou les éléments du document. Il est possible de construire d’autres objets à partir de ceux-ci ou à partir de zéro.

2. Incorporation

Le code Java Script peut être incorporé à un document HTML en trois endroits différents : dans l’en-tête, dans le corps, ou dans un fichier externe, et en autant de parties que nécessaire. S’il l’est dans le corps, il est exécuté quand le document est affiché. S’il l’est dans l’en-tête, il sera seulement chargé, et cela garantit qu’il le sera avant d’être appelé.

Une balise supplémentaire est utilisée : <script>, de la manière suivante :

<script type="text/javascript">
 code
</script>

La balise <noscript> </noscript> est disponible pour afficher un contenu en remplacement d’un script qui ne peut pas être exécuté, soit parce qu’un élément <script> précédent fait référence à un langage non pris en charge par le navigateur, soit parce que l’exécution de script est interdite par mesure de sécurité.

Dans le cas d’un fichier externe, le code sans les balises est enregistré dans un fichier avec l’extension .js, lequel est incorporé dans l’en-tête ou dans le corps de la façon suivante :

<script src="url du fichier"></script>

Avec le même effet que s’il l’était directement.

Pour donner un avant-goût de Java Script, voici l’exemple traditionnel :

<script type="text/javascript">
 document.write("<p>Bonjour monde !</p>");
</script>

documentest l’objet fourni par le navigateur et représentant le document affiché, write() est une fonction qui permet d’insérer une chaîne de caractère. Le résultat est le même que si le paragraphe avait été inséré directement dans le document à la place de l’élément <script>.

Toute la puissance de Java Script se révèle lors de l’utilisation des événements, c’est ce qui rend une page vraiment interactive. Un événement se produit par exemple quand le pointeur de la souris survole un élément, une touche est appuyée, un clic est réalisé, une page est chargée ou un document est fermé. Il peut déclencher l’exécution de code en utilisant de nouveaux attributs. La syntaxe utilisée est la suivante :

<balise onévénement = "code">

code est écrit en Java Script, c’est la plupart du temps un appel de fonction. Mais pour que le navigateur l’interprète comme tel, il faut obligatoirement désigner le langage de script par défaut dans le header, avec la ligne suivante :

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

Voici l’ensemble des événements disponibles :

Les trois classes d’événement se différencient par les types d’éléments auxquels ils s’appliquent. La première s’utilise dans tous les éléments de contenu. La deuxième ne peut être utilisée que dans les éléments <body>, alors que la troisième est destinée aux éléments des formulaires. Les événements onsubmit et onreset ne sont utilisables que dans les éléments <form>, onblur et onfocus s’appliquent aussi aux éléments <a>.

Similairement à l’événement onclick, Java Script se déclenche aussi avec l’attribut href de l’élément <a>, de la façon suivante :

<a href="javascript:code">contenu</a>

La seule différence est que contenu est affiché comme un lien.

XXI. Le Langage Java Script

1. Types de valeur

En Java Script, les types de valeur sont simples et peu nombreux. Pour chaque type existe une classe d’objet définie par le langage, et qui ajoute quelques fonctionnalités utiles, mais non directement liées à la nature du type, comme par exemple la conversion d’un nombre en sa représentation écrite.

Notons que, contrairement à la plupart des langages, le type est associé à une valeur, et non à une variable qui peut donc contenir des valeurs changeant de type au cours de l’exécution.

1.1. Le type undefined, ou indéfini, représente une valeur indéfinie, qui ne peut donc prendre que la valeur undefined.

1.2. Similairement, le type null, ou nul, représente une valeur nulle, et ne peut prendre que la valeur null. Ces deux premiers types permettent de prendre en compte simplement certaines situations inhabituelles ou marginales.

1.3. Le type number, ou nombre, représente un nombre décimal en double précision, c’est-à-dire avec environ 15 chiffres significatifs. En plus, il y a certaines valeurs spéciales : -0 est l’opposé de +0 ou 0. Il numériquement égal, mais est codé différemment et est distinguable par le langage. +∞ et -∞ sont les infinis positif et négatif. Ils sont le résultat de certaines opérations ou fonctions, notamment là où d’autres langages donneraient une erreur, mais ne sont pas prévus pour faire des calculs avec. Enfin NaN représente toute autre valeur qui n’est pas un nombre (Not a Number.) Il est souvent l’indice d’une erreur.

La représentation littérale d’un nombre est sous la forme décimale ou hexadécimal entier.
Si elle commence par le signe "+" ou "-" un chiffre de 0 à 9 ou par un ".", c’est le format décimal. Une partie exponentielle peut lui être adjointe, commençant par "e" ou "E", suivi du signe "+" ou "-", puis de l’exposant. Par exemple .10e+2 est égal à 10.
Le format hexadécimal entier commence toujours par 0x ou 0X, suivi d’un nombre quelconque de chiffres hexadécimaux. Par exemple 0xFF est égal à 255. Nous avons déjà vu cette notation hexadécimale pour représenter les couleurs dans la partie consacrée aux feuilles de style.

1.4. Le type boolean, ou booléen, représente une valeur booléenne, c’est-à-dire qui ne peut prendre que les valeurs vrai (true) ou faux (false.) Il est utilisé chaque fois qu’une décision est prise en fonction d’une condition, mais il est également possible de faire des calculs avec.

1.5. Le type string, ou chaîne de caractère, représente une suite de caractères quelconques, avec un ordre et une longueur fixe. Précisément, les caractères sont codés en UNICODE sur deux octets, et non sur un seul comme en ASCII. Mais cela ne fait le plus souvent pas de différence dans la pratique.

La représentation littérale d’une chaîne est une suite pouvant être vide de caractères quelconques, délimitée par une paire de caractères """ ou "'". Il est facile à comprendre qu’une chaîne délimitée par un type de guillemet ne peut pas contenir ce même guillemet, mais peut contenir l’autre, c’est pourquoi il y en a deux. Tout autre caractère qui risque d’être mal interprété est introduit par une séquence d’échappement. Elle commence par le caractère "\",

\"  Guillemet double.
\'  Guillemet simple.
\b  Espace arrière.
\f  Page suivante.
\n  Ligne suivante (sans retour au début.)
\r  Retour chariot (sans changement de ligne.)
\t  Tabulation horizontale.
\v  Tabulation verticale.
\\  Le caractère "\", puisqu’il est maintenant impossible de l’introduire directement.
\<saut de ligne> Annule le saut de ligne.

1.6. Le type object, ou objet. Un objet peut tout aussi bien être affecté à une propriété d’un autre objet, et ainsi de suite. Nous voyons donc que les objets permettent de modéliser des structures de données beaucoup plus complexes. A chaque objet est associé une propriété prototype, qui est l’équivalent Java Script de la classe. Chaque fois qu’un objet est créé en étendant un objet existant, sa propriété prototype prend pour valeur cet objet. Il se forme donc une chaîne de prototypes remontant à celui d’un objet primitif. Cet aspect dynamique des types et des classes ne doit pas être perdu de vue, car c’est l’esprit de Java Script.

1.7. Enfin, les fonctions constituent aussi un certain type, le type function. De la même manière, une fonction peut être une propriété d’un objet, elle prend alors le nom de méthode.

2. Structure d’un programme

Un programme est simplement une suite d’instructions, chacune terminée par un ";", et qui sont exécutées en temps normal dans l’ordre où elles sont écrites. Ces instructions peuvent êtres regroupées dans un bloc d’instructions, mis entre "{" et "}".

Une instruction soit commence par un mot clé suivit éventuellement d’un ou de plusieurs paramètres, soit est une expression. Les espaces, y compris les sauts de ligne, ne sont pas significatifs, sauf bien sûr à l’intérieur de la représentation littérale d’une chaîne, mais ils ne doivent pas couper un mot clé ou un identificateur.

Les fonctions que le programme appellera doivent être définie avant l’appel, avec la syntaxe suivante :

function nom(paramètre1, paramètre2, ... )
{
 ...
 return expression;
 ...
}

Les paramètres sont des identificateurs de variables dont la valeur sera passée de la façon suivante :

nom(expression1, expression2, ... )

L’instruction return interrompt l’exécution de la fonction, qui retourne alors la valeur de expression.

3. Expressions

Il faut remarquer qu’en Java Script, comme dans les langages dérivant du C, l’affectation, représentée par le signe "=", est aussi un opérateur dont le résultat est celui de l’expression qui se trouve à sa droite, comme le montre l’exemple suivant :

variable = expression;

Quand cette instruction est exécutée, l’expression expression est d’abord évaluée, puis la valeur obtenue est affectée à variable, c’est-à-dire que la valeur de variable deviendra le résultat de cette évaluation, et enfin le résultat de l’expression complète sera la valeur de variable. Ainsi dans cet autre exemple :

variable1 = (variable2 = expression);

après exécution, la valeur de variable1 sera égale à celle de l’évaluation d’expression.

Un appel de fonction est noté par l’identificateur de la fonction, suivit entre "(" et ")" d’une liste d’arguments sous la forme d’expressions, séparées par des ",". Son évaluation donne la valeur retournée par la fonction. Si des arguments sont manquants, la valeur undefined est passée à leur place.

Java Script suit la convention habituelle selon laquelle les opérations les plus prioritaires doivent être effectuées en premier, comme par exemple d’abord les multiplications puis les additions. En cas d’égalité, c’est l’opération la plus à gauche qui est effectuée en premier. Afin de modifier ces priorités, on utilise des parenthèses avec la signification usuelle.

Chaque constante ou résultat intermédiaire est automatiquement converti dans le type attendu par l’opérateur dont il est l’argument.

La conversion vers le type boolean s’opère comme suit :
- Un objet donne la valeur true.
- Une chaîne donne true si et seulement si elle n’est pas vide.
- Un nombre donne false si et seulement si il est égal à 0 ou NaN.
- Tout autre type de valeur donne false, sauf évidemment booléen qui reste inchangé.

La conversion vers le type string s’opère comme suit :
- null donne "null".
- undefined donne "undefined".
- Une valeur booléenne donne "true" ou "false".
- Une valeur de type number donne une représentation décimale du nombre.

Enfin, quand il s’agit d’une chaîne de caractères convertie en un nombre, le résultat est le nombre représenté par cette chaîne, ou seulement le début si la suite n’est pas valide. Il est nul si le début de la chaîne ne contient aucune représentation valide ou si elle est vide.

Voici tous les opérateurs définis, par ordre de priorité décroissante, sachant que c’est l’opérateur d’affectation "=" qui a la plus basse de tous.

+ - appliqué à un seul opérande le convertit au type number, puis le change de signe dans le cas de -.

++ -- sont des opérateurs bien pratiques et concis pour noter l’incrémentation ou la décrémentation d’une variable de type nombre, c’est-à-dire l’ajout ou la soustraction de la valeur 1. Il n’est pas utilisable pour une expression quelconque. Il y a deux cas :

variable++ ou variable-- : la valeur de variable est utilisée pour évaluer l’expression, puis variable est respectivement incrémentée ou décrémentée.

++variable ou --variable : variable est d’abord incrémentée ou décrémentée, puis le résultat obtenu est utilisé dans l’expression.

Comme la variable est modifiée, ces opérateurs tiennent donc un peu aussi de l’affectation.

! s’applique à un seul opérande de type booléen, et réalise l’opération de négation, c’est-à-dire que la valeur true donnera la valeur false et inversement.

~ s’applique à un opérande de type quelconque, qui est d’abord converti en un entier sur 32 bits, puis chaque bit est inversé, un 0 devenant 1 et vis versa. C’est ce qui est appelé le complément, ou parfois le complément à 1.

typeof a pour résultat une chaîne décrivant le type de l’opérande, soit les chaînes "undefined", "boolean", "number", "string", "object" ou "function". A noter que le type null donne "object".

Tous les opérateurs vus jusqu’ici ont la même priorité et n’admettent qu’un opérande, mais par exception ils sont évalués de droite à gauche, par exemple dans l’expression suivante :

~-x

c’est la valeur opposée de x qui est complémentée.

* / % symbolisent respectivement la multiplication, la division réelle, et le reste de la division, agissant sur deux nombres.
La division d’un nombre non nul par 0 donne l’infini du signe correspondant, mais la division de 0 par 0 donne NaN.
Le reste de la division est du même signe que la division, et est toujours plus petit en valeur absolue que le diviseur. Si le dividende est égal à 0, le reste le sera aussi.

+ - symbolisent l’addition et la soustraction, agissant sur deux opérandes de type nombre. Pour l’addition seulement, si l’un des deux est de type chaîne de caractère, une concaténation sera effectuée, c’est-à-dire que le résultat sera la chaîne constituée d’abord des caractères de la première chaîne, puis de ceux de la deuxième, après conversion éventuelle.

<< >> >>> sont des opérateurs agissant sur la représentation binaire de l’opérande de gauche converti en un entier sur 32 bits, pour la décaler d’un nombre de bits égal à l’opérande de droite, respectivement à gauche et à droite. Le troisième, qualifié de non signé, met des 0 aux positions laissées libres, alors que le deuxième effectue chaque décalage en recopiant le bit le plus significatif dans le bit précédent afin de conserver le signe du nombre. Le résultat est donc équivalent à une division entière par 2.

< > <= >= sont des opérateurs relationnels, c’est-à-dire qu’une comparaison est effectuée, et le résultat est la valeur booléenne true si l’opérande de gauche est respectivement strictement inférieur, strictement supérieur, inférieur ou égal, ou supérieur ou égal à l’opérande de droite, et false sinon.

Si les deux opérandes sont de type chaîne de caractère (et pas un seul), une comparaison entre chaînes est effectuée à la place, selon l’ordre alphabétique. Comme les codes UNICODE sont utilisés, l’espace est inférieur aux chiffres décimaux, qui sont inférieurs aux lettres majuscules, lesquelles sont à leur tour inférieures aux lettres minuscules. Les caractères """ et "'", dans cet ordre, s’intercalent entre l’espace et les chiffres. Pour les caractères accentués et spéciaux, c’est plus compliqué et il faut consulter leur code.

== != fonctionnent comme les opérateurs précédent, mais pour l’égalité et l’inégalité. Pour que deux chaînes de caractères soit égales, il faut qu’elles aient la même longueur.

=== !== même opérateurs, mais de comparaison stricte. Les valeurs doivent en plus avoir le même type pour être égales. Elles sont inégales dès qu’une d’elle est égale à NaN.

& symbolise le et binaire, qui agit bit par bit sur la représentation binaire de deux nombres. Ceux-ci sont d’abord convertis en entiers sur 32 bits, y compris pour les chaînes et les valeurs booléennes, puis les bits qui ont la même position sont combinés deux par deux, et donnent le bit de la position correspondante du résultat, égal à 1 si et seulement si les deux bits sont à 1 :

0011 & 0101 = 0001

^ symbolise le ou exclusif binaire. Même principe que pour l’opérateur précédent, sauf que le résultat est 1 si et seulement si les deux bits sont différents :

0011 ^ 0101 = 0110

| symbolise le ou binaire. Même principe que pour les deux opérateurs précédents, sauf que le résultat est 0 si et seulement si les deux bits sont à 0 :

0011 | 0101 = 0111

&& symbolise le et logique. Il s’applique à deux valeurs booléenne, et donne une valeur booléenne égale à true si et seulement si les deux opérandes sont égaux à true.

|| symbolise le ou logique. Même principe que pour l’opérateur précédent, mais le résultat est false si et seulement si les deux opérandes sont égaux à false.

?: est un opérateur conditionnel qui requiert trois opérandes. Le premier correspond à une valeur booléenne, et le résultat est égal au premier opérande si elle est égale à true, ou au deuxième si elle est égale à false. Cet opérateur permet donc de faire un choix entre deux valeurs selon une condition représentée par le premier opérande. Par exemple l’expression :

a<b ? a : b

est égale à a si a<b est égal à true, ou à b sinon.

= l’opérateur de plus basse priorité est celui d’affectation, avec les opérateurs d’affectation contractés qui sont *=, /=, %=, +=, -=, <<=, >>=, >>>=, &=, ^= et |=. Ce sont des raccourcis d’écriture très souvent utilisés. La variable à gauche est combinée avec l’expression à droite selon l’opérateur représenté, puis ce résultat est affecté à la variable. Ce qui permet par exemple d’ajouter un nombre à une variable sans la faire figurer deux fois, comme par exemple :

var = var + 1;

est équivalent à :

var += 1;

ou encore mieux :

var++;

Voici une récapitulation de tous ces opérateurs, classés par catégorie :

Enfin, la valeur d’une propriété d’un objet est représentée par l’expression objet.propriété, mais aussi par objet[expression], où l’évaluation de expression donne la chaîne "propriété".

De la même façon, une méthode d’un objet est appelée avec l’expression objet.méthode(arg1, arg2, ...). A l’intérieur de la fonction, la variable spéciale this est égale à objet.

4. Objets natifs

4.1. L’objet natif Number encapsule un nombre.

Comme pour tous les objets, Number(valeur) est une fonction qui convertit valeur en une valeur number. Si l’argument est absent, la valeur retournée est +0.

Par contre, l’expression new Number(valeur) donne un nouvel objet Number avec la valeur valeur convertie au type number. Dans ce cas, Number est appelé un constructeur, il construit et initialise un nouvel objet.

L’objet Number possède les propriétés suivantes :

valueOf() : fonction qui retourne la valeur du nombre.

toString(base) : fonction qui retourne une chaîne contenant la représentation littérale du nombre dans la base de numérotation base.

toLocaleString() : fonction qui retourne une chaîne contenant la représentation littérale du nombre en base 10 respectant les conventions locales.

toFixed(décimales) : fonction qui retourne une chaîne contenant la représentation littérale du nombre dans un format fixe, c’est-à-dire avec décimales chiffres après la virgule.
Exemple : 3.1416

toExponential(précision) : fonction qui retourne une chaîne contenant la représentation littérale du nombre dans le format scientifique, avec un chiffre avant la virgule, précision chiffres après la virgules (soit précision + 1 chiffres significatifs), et l’exposant.
Exemple : 1.6021892e-19

Il n’y a pas de propriété ou de méthode permettant de modifier la valeur du nombre, ce qui évite des modifications intempestives dans un programme mal écrit. La seule possibilité est d’affecter à l’objet un autre objet Number avec la valeur désirée.

4.2. L’objet natif Boolean encapsule une valeur logique.

La fonction Boolean(valeur) convertit valeur en une valeur boolean comme expliqué dans la section sur les expressions.

L’expression new Boolean(valeur) donne un nouvel objet Boolean avec la valeur valeur convertie au type boolean.

Ses propriétés sont les suivantes :

valueOf() : fonction qui retourne la valeur booléenne.

toString() : fonction qui retourne les chaînes "true" ou "false" selon la valeur.

Il n’y a également pas de méthode permettant de modifier la valeur.

4.3. L’objet natif String encapsule une chaîne de caractères.

String(valeur) est une fonction qui convertit valeur en une valeur chaîne de caractères, comme décrit dans la section sur les expressions. Si l’argument est absent, la valeur retournée est la chaîne vide "".

L’expression new String(valeur) donne un nouvel objet String avec la valeur valeur convertie au type string.

Il possède les propriétés suivantes :

valueOf() : fonction qui retourne la même valeur que toString().

toString() : fonction qui retourne la chaîne, sans conversion.

length : nombre représentant la longueur de la chaîne.

charAt(indice) : fonction qui retourne une chaîne contenant le caractère figurant à la position indice (le premier caractère correspondant à 0) dans la chaîne encapsulée, ou la chaîne vide si indice est négatif ou trop grand.

concat(str1, str2, ... ) : fonction qui retourne une chaîne constituée de la chaîne encapsulée à laquelle sont concaténés les chaînes str1, str2, ... dans cet ordre.

indexOf(chaîne, indice) : fonction qui cherche la chaîne chaîne dans la chaîne encapsulée à partir de la position indice, et qui retourne un nombre contenant la position à laquelle elle est trouvée la première fois, sinon -1.

lastIndexOf(chaîne, indice) : même fonction que indexOf(), mais qui cherche de la fin au début à partir de la position indice.

substring(début, fin) : fonction qui retourne la sous chaîne de la chaîne comprise entre les positions début incluse et fin exclue, ou jusqu’à la fin si fin est égal à undefined.

slice(début, fin) : même fonction que substring(), sauf qu’un argument à valeur négative signifie la position en partant de la fin de la chaîne.

toLowerCase() : fonction qui retourne la chaîne convertie en minuscules caractère par caractère.

toUpperCase() : fonction qui retourne la chaîne convertie en majuscules caractère par caractère.

Il n’y a pas de méthode permettant de modifier la valeur de la chaîne.

4.4. L’objet natif Object est la base de tous les objets.

Object(valeur) est une fonction qui convertit valeur en un objet Number, Boolean, ou String selon son type. Si c’est un objet, il n’y a pas de conversion. Si valeur est égale à null, undefined, ou si elle est absente, un nouvel objet Object est créé.

L’expression new Object(valeur) donne un nouvel objet Object qui a pour valeur Object(valeur).

Une fois qu’un objet quelconque est créé, une propriété peut lui être ajoutée simplement de la façon suivante :

objet.propriété = expression;

En particulier, s’il s’agit d’une fonction, la syntaxe est la suivante :

objet.méthode = function(arg1, arg2, ...) { code }

4.5. L’objet natif Date encapsule une date en millisecondes à partir du (ou jusqu’au pour une valeur négative) jeudi 1^er janvier 1970 à 0 h Temps Universel.

Date() est une fonction qui retourne une chaîne représentant la date et l’heure actuelles, telles qu’elles sont lues sur la machine locale.

L’expression new Date(année, mois, jour, heure, minutes, secondes, ms), ou les cinq derniers arguments sont optionnels, donne un nouvel objet Date avec la date correspondante. La valeur de mois doit être entre 0 et 11, et celle de jour entre 1 et 31.

L’expression new Date(valeur) donne un nouvel objet Date avec la date valeur.

L’expression new Date() donne un nouvel objet Date avec la date actuelle.

Il possède les méthodes suivantes :

valueOf() : fonction qui retourne un nombre égal à la valeur de la date.

toDateString() : fonction qui retourne une chaîne représentant la date locale.

toTimeString() : fonction qui retourne une chaîne représentant l’heure locale.

toString() : fonction qui retourne une chaîne représentant la date locale complète.

Ces trois dernières fonctions existent aussi sous la forme par exemple toDateLocaleString(), où la chaîne respecte les conventions locales d’écriture.

getFullYear() : fonction qui retourne un nombre égal à l’année locale.

getMonth() : fonction qui retourne un nombre égal au mois local (de 0 à 11.)

getDate() : fonction qui retourne un nombre égal au jour du mois local (de 1 à 31.)

getDay() : fonction qui retourne un nombre égal au jour de la semaine local (de 0 à 6, 0 représentant le dimanche.)

getHours() : fonction qui retourne un nombre égal à l’heure locale.

getMinutes() : fonction qui retourne un nombre égal aux minutes locales.

getSeconds() : fonction qui retourne un nombre égal aux secondes locales.

getMilliseconds() : fonction qui retourne un nombre égal aux millisecondes locales.

Ces fonctions existent aussi sous la forme par exemple getUTCHours(), où la valeur retournée correspond au Temps Universel.

setFullYear(année, mois, jour) : fonction qui fixe la valeur locale de l’année, du mois et du jour du mois. Si jour, ou mois et jour sont absents, la valeur correspondante n’est pas modifiée.

setMonth(mois, jour) : fonction qui fixe la valeur locale du mois et du jour du mois. Si jour est absent, le jour n’est pas modifié.

setDate(jour) : fonction qui fixe la valeur locale du jour du mois.

setHours(heure, minutes, secondes, ms) : fonction qui fixe la valeur locale de l’heure, des minutes, des secondes et des millisecondes. Si des arguments sont absents, la valeur correspondante n’est pas modifiée.

setMinutes(minutes, secondes, ms) : fonction qui fixe la valeur locale des minutes, des secondes et des millisecondes. Si ms, ou secondes et ms sont absents, la valeur correspondante n’est pas modifiée.

setSeconds(secondes, ms) : fonction qui fixe la valeur locale des secondes et des millisecondes. Si ms est absent, les millisecondes ne sont pas modifiées.

setMilliseconds(ms) : fonction qui fixe la valeur locale des millisecondes.

Ces fonction existent aussi sous la forme par exemple setUTCDate(), où c’est la valeur du Temps Universel qui est fixé.

setTime(date) : fonction qui fixe la valeur de la date.

4.6. L’objet natif Array est un objet ordinaire, mais avec certaines propriétés ayant des noms de la forme 0, 1, 2, 3 ..., représentant l’indice dans un tableau, et qui ont un traitement spécial.

L’expression new Array(el0, el1, ... ) donne un nouvel objet Array avec les éléments el0, el1, ... affectés respectivement aux propriétés 0, 1, ...

L’expression new Array(long) donne un nouvel objet Array avec long éléments, si long est un entier.

Comme tout objet, un tableau Array peut contenir des propriétés et des méthodes supplémentaires, dont celles prédéfinies suivantes :

length : nombre représentant la longueur du tableau, c’est-à-dire la valeur numérique de l’indice le plus élevé +1, les indices intermédiaires pouvant manquer. Si une propriété d’indice plus grand que length est ajoutée, sa valeur est modifiée en conséquence. Inversement, si length est modifié en une valeur plus petite, les propriétés d’indice trop grand sont supprimées.

toString() : fonction qui retourne une chaîne obtenue par la concaténation de tous les éléments du tableau convertis au type chaîne, et séparés par une virgule.

join(séparateur) : fonction qui retourne une chaîne obtenue par la concaténation de tous les éléments du tableau convertis au type chaîne, et séparés par la chaîne séparateur. Si celle-ci est absente, le séparateur par défaut est la virgule.

concat(el1, el2, ... ) : fonction qui retourne le tableau avec les éléments el1, el2, ... ajoutés à la suite, dans cet ordre. Tous les arguments sont facultatifs. Le tableau lui-même n’est pas modifié.

push(el1, el2, ... ) : fonction qui ajoute les éléments el1, el2, ..., dans cet ordre, à la fin du tableau, et qui retourne un nombre égal à sa nouvelle longueur.

pop() : fonction qui retire le dernier élément du tableau et qui le retourne. C’est un peu la fonction inverse de push().

unshift(el1, el2, ... ) : fonction qui ajoute les éléments el1, el2, ..., dans cet ordre, au début du tableau, et qui retourne un nombre égal à sa nouvelle longueur. Les éléments suivant sont renumérotés.

shift() : fonction qui retire le premier élément du tableau, et qui le retourne. Les éléments suivants sont renumérotés. C’est un peu la fonction inverse de unshift().

reverse() : fonction qui inverse l’ordre des éléments du tableau, puis le retourne.

sort(fonction) : fonction qui trie les éléments du tableau selon l’ordre définit par la fonction fonction, et qui le retourne. fonction(el1, el2) est appelée plusieurs fois par la fonction sort() avec deux éléments du tableau, et doit retourner un nombre négatif si el1 est avant el2, un nombre positif si el1 est après el2, et 0 si l’ordre est indifférent, comme par exemple s’ils sont égaux.

slice(début, fin) : fonction qui retourne le sous tableau du tableau compris entre les indices début inclus et fin exclu, ou jusqu’à la fin si fin est égal à undefined. Un argument à valeur négative signifie l’indice en partant de la fin du tableau.

splice(début, nombre, el1, el2, ... ) : fonction qui remplace les nombre éléments du tableau commençant à l’indice début par el1, el2, ...

4.7. L’objet natif Math contient des constantes et des fonctions mathématiques. Comme elles sont nombreuses, nous ne décrirons que les plus typiques.

SQRT2 : √2.

E : base du logarithme naturel e.

LN10 : logarithme naturel de 10.

PI : nombre π.

max(x1, x2, ... ) : la plus grande des valeurs en argument.

ceil(x) : plus petit nombre entier supérieur à x.

floor(x) : plus grand nombre entier inférieur à x.

round(x) : nombre entier le plus proche de x.

abs(x) : valeur absolue de x.

pow(x, y) : x à la puissance y.

sqrt(x) : racine carrée de x.

exp(x) : exponentielle de x.

log(x) : logarithme naturel de x.

sin(x) : sinus de x.

asin(x) : arc sinus de x.

atan2(y, x) : angle entre l’axe des x et la droite (0, 0) – (x, y), ou encore inverse tangente de y/x.

random() : nombre pseudo aléatoire distribué uniformément dans [0, 1[.

Et aussi SQRT1_2, LN2, LOG2E, LOG10E, min(x1, x2, ... ), cos(x), tan(x), acos(x) et atan(x).

4.8. L’objet natif Global contient des variables globales, c’est-à-dire accessibles de n’importe quelle section de code dans une même page HTML. Il possède les propriétés et les méthodes suivantes :

NaN : nombre initialement égal à NaN.

Infinity : nombre initialement égal à +∞.

undefined : propriété initialement égale à undefined.

parseInt(chaîne, base) : fonction qui convertit la représentation littérale en base base contenue dans la chaîne chaîne en un nombre entier et le retourne. La base par défaut est 10, sauf si la chaîne commence par "0x" ou "0X", auquel cas elle est de 16. La fin de la chaîne est ignorée dès qu’un caractère non interprétable est rencontré.

parseFloat(chaîne) : fonction qui convertit la représentation littérale contenue dans la chaîne chaîne en un nombre et le retourne. La fin de la chaîne est ignorée dès qu’un caractère non interprétable est rencontré.

isNaN(nombre) : fonction qui retourne true si nombre est égal à NaN, et false sinon.

isFinite(nombre) : fonction qui retourne true si nombre est différent de NaN, +∞, et -∞, et false sinon.

eval(code) : fonction qui exécute la chaîne code comme si elle était incluse dans le programme, et qui en retourne le résultat. Cette fonction est très puissante, mais n’a pas encore beaucoup d’applications. Par exemple l’instruction :

eval("x = " + var + " + 2");

affecte à x la valeur de la variable dont l’identificateur est contenu dans la chaîne var, augmentée de 2, et la retourne.

Comme pour tout autre objet, il est possible d’ajouter des propriétés ou des méthodes à l’objet Global. Elle sont alors accessible de n’importe où dans le document.

Ces deux derniers objets existent déjà et ne peuvent pas être créés. Pour les utiliser, il suffit d’écrire par exemple :

Math.PI

De même, n’importe quelle propriété ou méthode d’un objet natif peut être invoquée de cette façon, sans avoir besoin d’en créer un.

4.9. L’objet natif Error est utilisé notamment quand une erreur se produit pendant l’exécution.

L’expression new Error(message) donne un nouvel objet Error avec pour message la chaîne message. Il possède les propriétés suivantes :

name : Chaîne contenant initialement la valeur "Error".

message : Chaîne contenant initialement un message d’erreur.

Les objets suivants ont la même structure : EvalError, RangeError, SyntaxError, TypeError, avec la propriété name contenant initialement leur nom.

5. Déclarations

En Java Script, une variable peut être utilisée sans être déclarée. Elle est alors crée à sa première apparition. Mais par défaut, c’est une variable globale, c’est-à-dire qu’elle est accessible par toutes les fonctions. Bien que cela ait un intérêt en soi pour échanger de l’information entre elles, il peut y avoir collision avec une variable de même nom. Pour que la variable soit locale, il faut la déclarer, elle cesse alors d’exister dès la sortie de la fonction.

La forme générale d’une déclaration est la suivante :

var var1 = exp1, var2, ... , varn = expn;

Où var1 etc. sont les noms des variables à déclarer, et exp1 etc. sont des expressions optionnelles qui permettent de les initialiser, c’est-à-dire de leur affecter une valeur initiale. Les variables non initialisées contiennent d’abord la valeur undefined.

Si l’expression représente un objet, elle doit être sous la forme :

{prop1: exp1, prop2: exp2, ... , propn: expn}

Où prop1 etc. sont les noms des propriétés, et exp1, exp2 etc. sont les expressions à leur affecter, qui peuvent être des fonctions.

Un cas particulier est l’objet natif Array. L’expression peut alors s’écrire :

[exp0, exp1, ... , expn]

Les valeurs de exp0, exp1 etc. seront affectées aux propriétés 0, 1 etc. Si une expression est omise, il n’y a pas d’affectation mais la propriété length de l’objet et les indices des expressions suivante prennent la même valeur que s’il y en avait une.

6. Contrôle de flot

En utilisant le contrôle de flot, les instructions ne sont plus forcément exécutées dans l’ordre où elles sont écrites, ni même forcément toutes exécutées. Le script est alors capable de réagir différemment en fonction d’une condition. C’est une expression de type booléen, qui est vraie si son évaluation donne la valeur true, un exemple typique est : x > 0

Voici les différentes instructions de contrôle de flot et leur syntaxe :

Les instructions conditionnelles

if (condition) { instructions }

instructions est exécuté seulement si condition est vraie.

if (condition) { instructions }
else           { autres_instructions }

instructions est exécuté si condition est vraie. Sinon autres_instructions est exécuté.

Les instructions de boucle

do {
 instructions
} while (condition)

instructions est exécuté en boucle au moins une fois, tant que condition est vraie. condition peut inclure des résultats de calculs faits dans instructions, il y a donc un test effectué après chaque itération.

while (condition) { instructions }

instructions est exécuté en boucle, mais le test est effectué avant, de sorte qu’il n’y a pas forcément d’exécution.

for (initialisation; condition; incrémentation)
{
 instructions
}

Cette instruction très courante est prévue pour réaliser une boucle sur une variable qui évolue à chaque itération, par exemple pour parcourir un tableau, mais elle est aussi parfois utilisée pour autre chose. Classiquement, initialisation est une instruction qui affecte une valeur initiale à la variable, condition est une condition sur cette variable, et incrémentation est une instruction de modification de la variable. initialisation est d’abord exécuté. Ensuite instructions est exécuté et condition est évaluée. Si elle est fausse, l’exécution est terminée. Sinon incrémentation est exécuté et l’exécution continue avec instructions, et ainsi de suite. L’utilisation typique est la suivante :

for (i = 0; i<10; i++) { x += a[i]; }

for (variable in expression) { instructions }

expression est d’abord évalué sous la forme d’un objet. Ensuite, pour chaque propriété de cet objet, instructions est exécuté avec le nom de cette propriété affectée à variable. L’exemple précédent s’écrirait :

for (b in a) { x += a[b]; }

Sauf qu’il n’est pas nécessaire de connaître la taille du tableau a.

Les instructions de rupture

Dans une boucle, l’instruction continue permet de passer à l’itération suivante, ou à sortir si c’est la dernière, sans exécuter la fin du bloc. L’instruction break permet de sortir immédiatement de la boucle.

Si des boucles sont imbriquées, il est parfois utile de sortir directement de plusieurs niveaux à la fois. On utilise pour cela une étiquette placée devant l’instruction, et dont on indique le nom après continue ou break, comme dans cet exemple :

ici: do {
 while (x<0) {
  x++; y++; 
  if (y>10) break ici;
 }
}

L’instruction switch

switch (expression)
{
 case valeur1:
  instructions1
 case valeur2:
  instructions2
 ...
 default:
  instructions
}

expression est évaluée, puis elle est comparée à chacune des valeurs dans l’ordre d’écriture. Dès qu’il y a égalité, l’exécution recommence juste après, et jusqu’au "}". S’il n’y en a aucune, elle recommence après le mot-clé default, s’il existe. Pour éviter que l’exécution continue au-delà du mot-clé case suivant, il ne faut pas oublier de mettre une instruction break juste avant, mais parfois cela est souhaité.

7. Interception des erreurs

Java Script dispose d’une gestion avancée des conditions d’erreur, ou exceptions, similaire à Java. Une exception est un événement qui perturbe le déroulement normal d’un programme. Elle peut être causée par une erreur d’écriture du programme, ou par le mauvais fonctionnement du disque dur, une donnée qui n’existe pas etc. Quand une erreur se produit dans une section de code, les actions nécessaires pour la prendre en compte, pour la traiter, sont réalisées dans un gestionnaire d’exception. Cela permet de rendre le programme beaucoup plus lisible et concis que s’il devait prévoir tous les cas possibles. Et n’oublions jamais qu’à chaque fois qu’un programme est plus clair, des erreurs d’écriture sont évitées.

Selon le vocabulaire imagé, quand une erreur intervient une exception est lancée [throw], l’exécution normale est alors suspendue, puis l’exception est rattrapée [catch] par un gestionnaire d’exception.

La section de code où une erreur est susceptible d’intervenir doit d’abord être mise dans un bloc try, à la suite duquel le bloc catch est placé, où se trouvera le gestionnaire d’exception. Un dernier bloc finally, contenant les instructions qui devront être exécutées dans tous les cas après le bloc try et le cas échéant après le block catch, ferme la marche. Il est facultatif. Le programme ressemble alors à :

try {
  ...
}
catch (identificateur) {
 ...
}
finally {
  ...
}

Dans le bloc catch, la variable identificateur contient l’objet Error qui a été lancé par l’exception.

Enfin l’instruction throw erreur; permet de lancer soi-même une exception, erreur étant un objet Error définit par le programmeur. Cela permet de traiter certaines situations comme s’il s’agissait d’une erreur, ce qui peut être un moyen d’implémenter certains retours de fonction spéciaux.

XXII. Les Objets DOM

Il ne reste plus qu’à définir les objets fournis par le navigateur et représentant le document, ses éléments et ses attributs, ce qui permet d’y accéder, de les modifier, de les effacer et de les créer dynamiquement, c’est-à-dire après que la page ait été chargée. Ces objets obéissent à la norme DOM (Document Object Model [modèle objet de document]) pour HTML, qui est indépendante du langage et du navigateur.

1. L’objet Element

L’objet Element est la base de tous les types d’objet, c’est-à-dire que ces derniers possèdent tous chacune de ses propriétés.

2. L’objet Collection

Un objet Collection contient une liste d’objets.

3. L’objet Document

L’objet Document représente un document entier. C’est à partir de lui qu’on accède à tous les autres éléments. Dans un script, il est contenu dans la variable prédéfinie document.

4. L’objet Body

L’objet Body représente l’élément <body>.

5. L’objet Anchor

L’objet Anchor représente un lien tel que définit par l’élément <a> ou <map>.

6. L’objet Image

L’objet Image représente un élément <img>.

7. L’objet Link

L’objet Link représente un élément <link>.

8. L’objet Form

L’objet Form représente un formulaire <form>.

Il y a également un objet pour chaque type d’élément de formulaire, comme pour chaque type d’élément, dont la structure est semblable aux autres objets.

Tous les éléments du document peuvent être accédés à partir des objets qui ont été décrits, en utilisant par exemple la méthode getElementByName[]() ou la propriété anchors[] de l’objet document. Ou plus simplement, l’objet identifié par document.identificateur représente l’élément dont l’attribut id a la valeur identificateur.

Il existe aussi beaucoup d’autres objets et de fonctions, accessibles directement dans un script, et qui apportent des fonctionnalités utiles. Mais malheureusement, ils ne bénéficient pas d’une normalisation par le W3C. Même s’ils existent sous pratiquement la même forme dans les principaux navigateurs, rien ne garantit que leur utilisation soit fiable, notamment avec de nouveaux navigateurs, ou sous d’autres systèmes que Windows. Pour plus de renseignements, voir les nombreuses ressources sur Internet qui les décrivent.

Tout le Monde Peut Être Webmaster de Cl.Massé & Pierre Equey est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported.