GOWAP - Programmation : le langage de base du javascript.

Javascript

Ce cours ne nécessite aucune connaissance informatique préalable, excepté celle du HTML. Le Javascript est un langage de programmation appliqué aux objets d'un document HTML.

Le langage de base du Javascript - terme et syntaxe

Commentaire

<html><body>
<script><!--

// ligne de commentaire
/* mise en commentaire
alert('coucou');
du code */

//--></script>
</body></html>

Comme dans tous les langages, les commentaires sont indispensable pour pouvoir relire un (vieux) code.

En Javascript, vous pouvez mettre du texte (ou du code) en commentaire en l'encadrant de l'élément ouvrant « /* » et fermant « */ ». Vous pouvez aussi utiliser « // » pour mettre en commentaire l'ensemble des caractères placés à sa droite.

Opérateurs unaire

Nous appelons opérateur unaire, un opérateur qui travaille sur une seule opérande. L'opérande, est la valeur numérique utilisé pour effectuer l'opération.

Signe		Effet
+		Signature positive d'un nombre (vraiment inutile)
-		Opposé : retourne l'opposé de l'opérande
++		Incrémentation : ajout « 1 » à l'opérande
--		Décrémentation : soustrait « 1 » à l'opérande
~		Complémentation binaire ; inversion bit à bit (NOT)

Les opérateurs d'incrémentation « ++ » et de décrémentation « -- » ont une spécificité remarquable. Suivant qu'ils sont placé avant ou après leurs opérandes (objet d'appartenance et d'application), ils ont une priorité différente dans l'évaluation de l'expression.
Ainsi sur la variable « a », l'incrémentation « ++a » sera effectué avant la lecture de la variable, tandis que « a++ » sera effectué après. Prenons par exemple « a=10 » ; appliquons l'affectation incrémenté de « a » aux variables « b » et « c » successivement : « b = ++a » et « c = a++ ». Ce qui nous donne pour les variables « a », « b » et « c » respectivement « 12 », « 11 » et « 11 ».

Opérateurs mathématique

Ce sont les opérateurs habituels.

Signe		Effet
+		Addition
-		Soustraction
*		Multiplication
/		Division
%		Modulo (reste de la division)

L'opérateur modulo (%) retourne le reste de la division entière. Prenons par exemple : « a=8.4 » et « b=1.5 ». Alors, « a/b=1.5 », et « a%b=0.9 ». Comme la valeur entière (parseInt) de « a/b » est « 5 », on a « 5*b+a%b = 8.4 ». On a donc bien « parseInt(a/b)*b+(a%b) = a ».
L'opérateur division (/) généré une erreur si le deuxième opérande est nul.

Opérateur d'affectation

Signe		Effet
=		Affectation

Cet opérateur d'affectation peut être utilisé pour affecter plusieurs variables en même temps :

a = 7, b = 7;
a = b = 7;

Opérateurs associés

Nous désignons par ce terme, l'opération associé à l'objet numérique sur lui-même.

Signe	Effet	Exemple	Équivalence
+=	Incrémentation de la valeur de l'opérande	x += y	x = x + y
-=	Décrémentation de la valeur de l'opérande	x -= y	x = x - y
*=	Multiplication par l'opérande	x *= y	x = x * y
/=	Divisé par l'opérande	x /= y	x = x / y
%=	Module par l'opérande	x %= y	x = x % y

Opérateurs relationnel

Ces opérateurs retournent une valeur booléenne vrai (true) ou fausse (false).

Signe		Effet
==		équivalent
<		inférieur
<=		inférieur ou égale
>		supérieur
>=		supérieur ou égale
!=		différent

Opérateurs logiques

Signe		Effet
&&		« et logique » booléen ; équivalent à une multiplication booléenne
\|\|		« ou logique » booléen ; équivalent à une addition booléenne
!		« négation logique » booléen ; équivalent à l'opposé booléenne
&		« et binaire » ; équivalent à une multiplication bit à bit
^		« ou exclusive binaire » ; addition bit à bit tronqué
\|		« ou binaire » ; équivalent à une addition bit à bit maximisé

Opérateurs de décalage binaire

Ces opérateurs effectuent un décalage (à gauche ou à droite) bit à bit sur le premier opérande. Le nombre de décalage est précisé dans la deuxième opérande. Les bits sortant sont perdu, et le/les bits entrés pour le décalage sont mis à zéro, sauf pour « >> » qui dépend du signe de la première opérande.

Signe	Effet	Exemple
<<	Décalage vers la gauche	t=t<<1;
>>	Décalage vers la droite signé	t=t>>2;
>>>	Décalage vers la droite non signé	t=t>>>2;

Attention : la deuxième opérande doit être une valeur de l'intervalle [0..31]. Dans tous les cas, le décalage est effectué avec le module de la deuxième opérande par 32 : « a<<(b%32) » ; cela signifie que l'opération de décalage par la valeur 32 est inutile.

Opérateurs associés binaire

Nous désignons par ce terme, l'opération associé à l'objet numérique sur lui-même.

Signe	Effet	Exemple	Équivalence
&=	« et » binaire	x &= y	x = x & y
^=	« ou exclusive » binaire	x ^= y	x = x ^ y
\|=	« ou » binaire	x \|= y	x = x \| y
<<=	« décalage gauche » binaire	x <<= y	x = x << y
>>=	« décalage droite signé » binaire	x >>= y	x = x >> y
>>>=	« décalage droite non signé » binaire	x >>>= y	x = x >>>y

Opérateur conditionnel

Cet opérateur devrait s'appeler « expression conditionnel » ; il peut s'appliquer pour l'affectation de valeur, mais peut aussi être utilisé pour l'exécution de bloc suivant la valeur d'une condition. En fait, deux bloc défini seront exécuté selon la valeur d'une expression :

(expression)?bloc1:bloc2;

En appliquant cet opérateur au valeur numérique, nous pouvons affecter une variable comme suite : « a = (b<c)b:c; ». Dans ce cas, si « b<c » est vérifié, alors « a=b », sinon « a=c ».

Priorité des opérateurs

Opérateurs	Priorité	Catégorie
. [] ( )	1 (haute)	Objet, Bloc
++, --, -, ~, !	2	Unaires
*, /, %	3	Multiplication
+, -	4	Addition
<< >> >>>	5	Décalage binaire
<, <=, >, >=	6	Relationnels
==, !=	7	Comparaison
&, ^, \|	8	Logique binaire
&& \|\|	9	Logique booléenne
?:	10	Conditionnel
= *= /= %= += -= <<= >>= >>>= &= ^= \|=	11 (basse)	Affectation

Règles de priorité : les expressions entre parenthèses sont prioritaires. L’opérateur de plus haute priorité est le premier calculé : une opérande entre deux opérateurs de priorité différente est lié à l'opérateur de plus haute priorité. Pour les mêmes priorités, le calcule est effectué dans l’ordre de lecture : une opérande entre deux opérateurs de même priorité est lié à celui de gauche.

Variables

Les quelques exemples utilisés pour agrémenter les opérateurs ont fait appel à des notions de variables qui, bien que pas encore expliquées, ne semble pas être déroutantes.

En Javascript, nous aurons besoin des variables ; elles nous permettent de mémoriser des valeurs et même des objets. Nous parlerons d'une variable globale, lorsqu'elle est accessible dans tous le document (voir même par un autre document), et d'une variable locale, lorsqu'elle est accessible seulement dans le sous-programme l'ayant défini.

Pour déclarer une variable, nous disposons du mot « var » avec la syntaxe suivante :

var identifiant [=affectation][, identifiant [= affectation] [, ...]];

Où « identifiant » est le nom de la variable et « affectation » une valeur, une expression ou même un objet. Notez que l'affectation est facultative, et que plusieurs variables peuvent être définir en même temps.

Attention, une erreur sera générée, si vous accédez à une variable inexistante. Il est aussi possible de définir une variable simplement en effectuant une affectation à un nouvel identifiant (/*2*/ et /*4*/) ; dans ce cas elle est globale.

Pour définir une variable globale (accessible dans tous le document), nous la déclarerons dans le bloc principale (/*3*/ et /*4*/) ou nous effectuons une affectation directe (/*2*/ et /*4*/).

Pour définir une variable locale (accessible seulement dans le sous-programme de définition), nous utiliserons une déclaration avec « var » (/*1*/).

Si vous exécutez le programme ci-contre, une erreur se produira sur le deuxième « alert ». En effet, la variable locale « c » n'existe que dans le sous-programme « toto ».

<HTML><body><script><!--

function toto()
{
var c = 3; /*1*/
d = 4; /*2*/

alert("toto: a "+a+" b "
+b+" c "+c+" d "+d);
}

{ // bloc principale

var a = 1; /*3*/
b = 2; /*4*/
toto();

alert("init: a "+a+" b "
+b+" c "+c+" d "+d);

}
//--></script></body></HTML>

Ecriture des nombres

Décimal : un nombre est décimal s'il commence par un chiffre excepté le zero.
Octal : un nombre octal commence toujours par un zéro et contient que des chiffres de 0 à 7.
Hexadécimal : il commence par le préfixe « 0x ».

Tableaux : l'objet

Un tableau est un identificateur regroupent un ensemble d'élément indexable. Nous pouvons définir un tableau qu'à partir de la version 1.1 du Javascript.

Syntaxe : [var] identificateur = [new] Array([max]);

où « identificateur » est le nom du tableau, et « max » l'index du dernier élément. Le tableau a une taille de « max+1 » éléments ; sa taille est lisible avec sa propriété « length ». La valeur « max » est facultative, car il suffi d'affecter un élément pour qu'il existe ; dans ce cas, l'ensemble des éléments d'index inférieur sont créer s'ils n'existent pas. Le terme « new » peut être omis en Javascript.

Dans notre exemple, nous déclarons notre tableau "T1" en /*A*/. Il existe, mais sans valeur.
Nous affectons l'ensemble de ses éléments un à un en /*B*/, /*C*/ et /*D*/.
En /*E*/ nous affichons la taille du tableau, puis le tableau entier en /*F*/.

En /*G*/ nous définissons et affectons le tableau "T2" avec deux éléments.
En /*H*/ et /*I*/ nous affichons la taille et le contenu du tableau "T2".
Pour ajouter un nouvel élément à notre tableau "T2", il nous suffi d'affecter sur un élément d'index en dehors de la taille du tableau. Dans un autre langage, nous aurions une erreur de débordement de tableau.
Puis, nous terminons en affichant la taille (/*K*/) et le contenu du tableau "T2" (/*L*/).

<HTML><body><script><!--

{ // bloc principale

var T1 = new Array(2)/*A*/

T1[0] = 1;           /*B*/
T1[1] = 2;           /*C*/
T1[2] = 3;           /*D*/
alert(T1.length);    /*E*/
alert(T1);           /*F*/

T2=Array(4,5);       /*G*/
alert(T2.length);    /*H*/
alert(T2);           /*I*/

T2[2]=6;             /*J*/
alert(T2.length);    /*K*/
alert(T2);           /*L*/

}
//--></script></body></HTML>

Caractères spéciaux - séquence d'échappement

Certaines caractères ne sont pas intégrable simplement dans une chaîne de caractère, car il sont générateur d'action ; tel que le « \ » et le « retour chariot » (à la ligne) ...
Pour palier ce problème, nous avons accès aux séquences d'échappement suivantes :

Code	Spécificité	Exemple
\n	Retour à la ligne	alert("a\nb");
\r	Retour chariot	alert("a\rb");
\t	tabulation	alert("a\tb");
\"	Caractère guillemet	alert("a ' \" b");
\'	Caractère apostrophe	alert('a \' " b');
\\	Caractère anti-divisé : \	alert("a \\ b");
\/	Caractère divisé : /	alert("<\/script>");
\0	Caractère nul (fin de chaîne)	alert("a\0b");
\NumASCII	où NumASCII est le numéro de caractère

En Javascript, vous pouvez utiliser indifféremment l'apostrophe ou le guillemet pour définir une chaîne de caractère. Dans cette chaîne, vous ne pouvez pas réutiliser ce caractère de définition, car cela marquerai la fin de la chaîne. Vous ne pouvez pas non plus terminer la chaîne avec un caractère différent de celui qui commence. Ainsi "coucou", 'coucou', "l'eau" et 'l\'eau' sont des chaînes de caractère. Si vous écrivez "coucou', la chaîne n'est pas fermée, et une erreur sera générée. Sachez toutefois, que le guillemet est le caractère de chaîne utilisé en C/C++, et que l'apostrophe et utilisé en PASCAL et en ASSEMBLEUR.

La méthode alert

Cette méthode nous permet d'afficher une fenêtre contenant un texte données en paramètre. Elle nous permettra de suivre nos programmes afin de les mettre au point.

Syntaxe : [window.]alert(paramètre);

Le paramètre passé à la méthode « alert » peut être une chaîne de caractère (/*1*/ et /*2*/), un objet (/*3*/), ou une variable même indéfini (/*2*/ et /*4*/).

Attention, « b » est déclaré ; sinon un message d'erreur sera généré. Ici, la variable « b » n'a pas de valeur, mais elle existe (/*4*/).

<HTML><body><script><!--

{ // bloc principale

var a = 10;
var b;
alert("a = "+a); /*1*/
alert(a);         /*2*/
alert(window);    /*3*/
alert(b);         /*4*/

}
//--></script></body></HTML>

Sous-programmes : les fonctions

Vous remarquerez rapidement que vous utiliserez souvent le même code (Javascript) pour rendre vos pages plus interactive. Dans cette idée, il sera plus intéressant de créer un sous-programme qui pourra être appelé et ainsi éviter les redondances.

En Javascript (comme en C), les sous-programmes sont définit sous le terme de fonction. Une fonction est un bloc de code, pouvant, facultativement, recevoir (arguments/paramètres) et retourner des données. Le nombre de paramètres de la fonction peut être défini (déclarer) ou indéfini. Dans ce dernier cas, vous devrez gérer vous même les paramètres.

Une fonction doit être déclarer à l'intérieur du conteneur « script », et doit être charger avant d'être appelée ; cela signifie, que lors du chargement du document, une erreur sera produite si un appelle est fait sans que la fonction ne soit encore chargée. Pour éviter ce style de problème, vous pouvez déclarer vos fonctions en amont de vos appels. Vous pouvez aussi placer l'ensemble de vos fonctions dans le bloc d'entête « head » du document ; ainsi, vos fonctions seront forcément chargées avant tous appelles du document.

Syntaxe d'une fonction :

function identificateur ( liste des paramètres )
{ bloc de code;
[return valeur]
};

où « identificateur » représente le nom de la fonction ; la « liste des paramètres » est facultative ainsi de que le code. Pour que notre fonction retourne une donnée, nous utiliserons le mot réservé "return ».

Regardons quelques exemples :

La fonction « rien » ne déclare pas de paramètre, et ne retourne pas de donnée.
La fonction « max » reçoit « a » et « b » en paramètre, et retourne la valeur maximale entre les deux.

<HTML><body><script><!--

function rien() {};

function max(a,b)
{return (a>b)?a:b;};

//--></script></body></HTML>

Attention : bien que vous déclariez deux paramètre, vous pouvez en recevoir moin, comme plus. Regardons l'exemple de la fonction « Aff_par() » :

Notre fonction déclare recevoir deux paramètres nommé « a » et « b ». Cependant, nous pouvons très bien appeler la fonction avec un seul paramètre sans générer d'erreur. Dans ce cas, « b » aura la valeur « undefined ».

L'élément arguments est un tableau contenant l'ensemble des argument passé à notre fonction. Il est donc facile de connaître le nombre de paramètre en lisant la propriété « length » du tableau, et d'accéder au paramètre en les indexant.

<HTML><body><script><!--

function Aff_Par(a,b)
{
document.write("a = ",a,", ");
document.write("b = ",b,"br");

l = arguments.length;
document.write("Nb arg = ",l,"br");
for (i=0;i<l;i++)
document.write("arg[",i,"] = ",
arguments[i],"br");
};

Aff_Par('GOWAP');

//--></script></body></HTML>

Un paramètres numérique ou booléen est passé par valeur, et un objet (tableau, chaîne, fonction, objet) par référent.

Lorsque l'on passe des paramètres par valeur, c'est une copie qui est passé à la fonction. Ainsi aucune modification effectué dans la fonction ne sera retourné.

Lorsque l'on passe des paramètres par référent, c'est un pointeur qui est passé à la fonction. Ainsi, tous modification effectué dans la fonction modifie réellement l'élément passé en paramètre.

<HTML><body><script><!--

function v_add(a,b) {a+=b};
function t_add(a,b) {a[0]+=b[0]};

var a=0;
var b=1;
var c = Array(); c[0]=0;
var d = Array(); d[0]=1;

v_add(a,b); t_add(c,d);

with (document)
{
write(a,', ',b,'<br>');
write(c,', ',d);
}

//--></script></body></HTML>

Instruction conditionnel - IF

Nous avons déjà vu qu'il existe un opérateur conditionnel : « (condition)?exp:exp; ». Avec cette opérateur, nous pouvons effectuer un traitement suivant l'état de la condition. Cette opération retourne toujours une valeur, qui n'a pas l'obligation d'être utilisée (récupérée).

En Javascript, nous disposons aussi d'une instruction conditionnelle qui ne retourne pas de valeur, provenant du C.

Les boucles

Dans plusieurs des nos exemples précédent, j'ai utilisé l'instruction de boucle for, sans vous l'avoir définir. Les exemples étant très parlant, je pense que vous avez déjà une petite notions sur cette instruction ; mais regardons tous cela plus en détaille.

Boucle - For, numérique

Cette instruction nous permet d'exécuter du code un nombre de fois définir (dans la plupart des cas) ; en fait, tant qu'une condition est vrai. De ce fait, le code peut ne pas être exécuté si la condition est fausse au départ.

Syntaxe : for (lst init; [condition]; lst action) code;

Où « init » est une affectation d'une valeur initiale à une variable, condition représente un teste booléen terminant la boucle, « action » une action d'incrémentation (ou de décrémentation) sur la variable, et « lst » informe qu'une liste de terme peut être écrire en les séparant par une virgule.

Dans cette exemple, nous affichons les chiffres, et les 10 premières valeurs factoriel.

<HTML><body><script><!--

for (t=0;t<10;t++)
document.write(t);

document.write('<br>');

for (n=0,v=1;n<10;n++,v*=n)
document.write(v,' ');

//--></script></body></HTML>

Attention : vous risquez de bloquer le navigateur si votre condition reste toujours vrai. Vérifiez toujours avant d'exécuter votre code qu'il existe une issue de sortie de la boucle for.
L'instruction break et continue peuvent être utilisés dans cette boucle.

Boucle - For, objet

Boucle - While

Cette instruction nous permet d'exécuter du code (ou un bloc de code) tant qu'une condition est vrai. Le code peu ne pas être exécuté si la condition est fausse au départ.

Syntaxe : while (condition) code;

Dans cette exemple, nous affichons les chiffres.

La deuxième boucle utilise une simplification du code en intégrant l'incrémentation de t dans l'affichage.

Dans la troisième, nous effectuons l'incrémentation dans la condition de while. Une décrémentation a été placée juste avant, afin de pouvoir afficher le chiffre 8.

Je vous rappelle que « ++t » effectue l'incrémentation avant la lecture de la valeur de « t », et « t++ » après.

<HTML><body><script><!--

var t=0;

while (t<4)
{
document.write(t);
t++;
}

while (t<8)
document.write(t++);

t--;

while (++t<10)
document.write(t);

//--></script></body></HTML>

Attention : vous risquez de bloquer le navigateur si votre condition reste toujours vrai. Vérifiez toujours avant d'exécuter votre code qu'il existe une issue de sortie de la boucle « while ».
L'instruction « break » et « continue » peuvent être utilisés dans cette boucle.

Boucle - instruction break

Boucle - instruction continue

with

Cette instruction nous permet de sous entendre le chemin d'accès à une propriété d'un objet.

Syntaxe : with ( objet ) code;

Où « objet » est le nom (avec chemin) d'un objet, et « code » du code ou un bloc de code.

parseInt(), parseFloat(), isNaN()
eval(), switch...

Dernière mise à jour : dimanche 06 janvier 2008