II Les éléments de base du langage JavaScript

Comme dans tous les langages de programmation, il est important de pouvoir stocker des valeurs, díeffectuer des opérations, des tests, des boucles Ö Le Javascript ne déroge pas à cette règle et propose ces éléments habituels que líon retrouve dans tous les langages de programmation un peu évolués.

II.1 Les constantes et les variables

Sans ces éléments, vous ne pouvez stocker díinformations. Javascript les utilise aussi.

a. Les constantes

Les constantes permettent une persistance de la valeur au cours de líexécution du programme et permettent de rendre le code plus lisible.

Elles peuvent contenir des valeurs numériques ou caractères.

Pour une constante il níy a pas de déclaration ou de typage à effectuer, il suffit díutiliser un nom de constante et de lui affecter une valeur au moyen de líopérateur díaffectation =.

Exemple

Pi = 3.14 ;

Remarque

Vous pouvez malgré tout utiliser le type const devant le nom de la constante que vous désirez utiliser.

Attention

Lors de la définition díune constante, le fait díutiliser des guillemets autour de la valeur est très important. Dans ce cas, il définit un élément chaîne de caractère et non un élément numérique.

Exemple

const five = 5 ;

document.write(five + 1) ;

</script>

const five = "5" ;

document.write(five + 1) ;

</script>

Résultat : 6

Résultat : 51

Il existe des constantes prédéfinies tels :

Constante	Explication
undefined	La variable qui prend cette valeur a été déclarée mais nía pas été initialisée. variable = ;
null	La variable níexiste pas.
infinity	Cette constante représente líinfini positif. Cela permet notamment de vérifier si il y a une division par zéro.
NaN	Equivaut à la définition de líIEEE de ´ Not a Number Ş.

b. Les variables

Le javascript níest pas a proprement dit un langage typé comme peut líêtre le langage C par exemple. Vous pouvez donc déclarer vos variables sans indiquer leur type voir même utiliser des variables sans les déclarer.

1. Les types simples

Il en existe trois.

Ø String pour les chaînes de caractères

Ø Boolean pour les booléens (true et false)

Ø Number pour les numériques (entier ou flottant)

La déclaration se fait de la façon suivante :

nom_variable = new type (valeur) ;

nom_variable est le nom que vous donnez à votre variable.

new est líopérateur qui permet de réserver la place en mémoire.

type est le type de la variable (String, Boolean ou Number).

valeur est la valeur díinitialisation de la variable.

Attention

Níoubliez pas la majuscule en première lettre du type.

Remarque

Si vous omettez la partie valeur lors de la déclaration, automatiquement il est affecté à la variable les valeurs :

… 0 si cíest un type Number

… false si cíest un type Boolean

… vide si cíest un type String. Dans ce dernier cas, la variable est définie et non nulle.

Exemples

tva = new Number(18.6) ;

vide = new String ;

Faux = new Boolean(false) ;

</script>

2. Les types composés simples : les listes

Ces types permettent de stocker plusieurs valeurs dans un seul conteneur (variable). Ces valeurs peuvent être de types différents. En effet, cíest líutilisation que vous en faites qui est importante.

Ø Les listes simples

A une variable on associe plusieurs valeurs. Pour bien comprendre ce que cela représente, il suffit de vous représenter cela comme une commode où chaque tiroir est numéroté de 0 à n (n est un entier positif et représente líindice). Dans chaque tiroir se trouve ranger un objet (cíest la valeur).

La déclaration et líinitialisation peuvent se faire en utilisant trois méthodes.

… Liste = new Array("valeur1","valeur2","valeur3");

Le conteneur ou variable se nomme Liste. Trois valeurs sont rangées en même temps que la variable Liste est déclarée.

La première valeur (valeur1) est rangée à líindice 0 (tiroir 0) tandis que la deuxième valeur (valeur2) est rangée à líindice 1 (tiroir 1) et ainsi de suite.

La ligne suivante affichera la valeur valeur1.

document.write(Liste[0]);

… Liste = new Array(6);

La variable Liste est déclarée afin quíelle puisse posséder 6 valeurs. Les indices vont alors de 0 à 5 mais aucune valeur níest attribuée à ces indices. La valeur undefined leur est alors affectée.

La ligne suivante affichera la ´ valeur Ş undefined.

document.write(Liste[0]);

Remarque

Malgré la déclaration, rien ne vous empêche de stocker plus de 6 valeurs dans cette liste. Vous pouvez aussi omettre le nombre díindices Liste = new Array();

… Liste[0] = "valeur1";

Les valeurs sont explicitement associées à leur indice.

Remarque

La dernière méthode peut être combinée avec les deux précédentes.

Remarque

Il est possible díutiliser les raccourcis de déclaration suivants :

Liste[]="valeur1"; (valeur1 est associé au premier indice disponible)

Liste=["valeur1","valeur2", "valeur3"]; (identique à la première méthode)

Attention

Ne vous trompez pas entre les parenthèses () et les crochets [] car le résultat níest pas du tout identique.

Liste=["toto","tutu"]; document.write(Liste[1]);

</script>

Syntaxe correcte.

Le résultat est tutu

Liste=("toto","tutu"); document.write(Liste[1]);

</script>

Syntaxe incorrecte.

Le résultat est u

On a rangé toto puis tutu dans la variable simple Liste et on demande díafficher la 2^ème lettre du mot.

Important

Une propriété très utile est celle qui compte le nombre díéléments dans une liste. Son utilisation est la suivante :

Liste=["toto","tutu"]; document.write(Liste[1]);

document.write("<BR>"+Liste.length) ;

</script>

Le résultat est

tutu

Ø Les listes associatives

A la différence de la liste simple, dans les listes associatives possède au moins un de leurs indices qui est une chaîne de caractère (élément non numérique).

La déclaration et initialisation síeffectuent de la façon suivante :

Listeasso=new Array();

Listeasso["jacquenod"]="frédéric" ;

Après a délacration de la liste, on lui affecte une valeur frédéric à líindice jacquenod.

Listeasso=new Array();

Listeasso["jacquenod"]="frédéric" ;

Listeasso["martin"]="jean" ;

document.write(Listeasso["jacquenod"]) ;

</script>

Le résultat est

frédéric

3. Les types composés multidimensions : les tableaux

Le tableau est simplement une liste de liste. Dans un tiroir de la commode, pour reprendre líexemple précédent, vous trouverez une autre Ö commode et ainsi de suite selon la profondeur de votre tableau.

Remarque

Chaque ´ tiroir Ş nía pas forcément le même nombre de commode à líintérieur. En clair, la profondeur peut être différente selon les indices dans un même tableau.

Il existe deux types de tableaux :

ß Les tableaux à indices numériques

ß Les tableaux à indices chaînes de caractères aussi appelés tableaux associatifs.

Ø Les tableaux à indices numériques

Le premier niveau de cette structure est un indice numérique.

Le plus simple est de prendre un exemple.

Exemple

Le fichier shadow password (/etc/passwd) sur un système Unix contient un ensemble de login et chacun de ces logins possèdent un ensemble de valeurs qui lui sont associées (uid, gid, gecos, homedir, shell). Nous nous bornerons à líutilisation des trois premières (uid, gid, gecos).

Pour stocker ces logins dans une structure de liste simple, vous seriez obligés de créer autant de listes que vous possédez de logins dans ce fichier.

Avec un tableau plus de problème, vous possédez une seule structure qui va permettre de tout stocker.

La déclaration et líinitialisation se font de la manière suivante :

tabpasswd=new Array();

tabpasswd[0]=new Array("jacqueno",250,280,"FJ,762");

tabpasswd[1]=new Array("martin",251,280,"JM,763");

document.write(tabpasswd[0][0]+"<br>");

document.write(tabpasswd[0][1]+"<br>");

document.write(tabpasswd[1][0]);

</script>

Le résultat est

jacqueno

250

martin

Líexemple précédent propose un tableau à deux dimensions mais rien níempêche de faire plus.

tab3d=new Array();

tab3d[0]=new Array();

tab3d[0][0]=new Array("jacqueno",250,280,"FJ,762");

document.write(tab3d[0][0][3]);

</script>

Le résultat est

FJ,762

Líinitialisation peut être faite de manière automatique en utilisant une boucle par exemple.

Ø Les tableaux associatifs

Le principe est identique à celui vu ci-dessus à ceci prêt que au moins un des indices du tableau níest pas numérique mais est une chaîne de caractères (String).

En reprenant líexemple précédent on remarque tout de suite que le tableau associatif est plus adapté et plus facilement utilisable par la suite si, au lieu díinsérer des indices numériques en premier niveau, on insère des indices chaînes de caractères représentant le login de líutilisateur.

En effet dans notre cas précédent, pour retrouver un login il fallait parcourir toute la structure car líindice était non explicite. Il fallait ouvrir tous les tiroirs jusquíà ce que le contenu soit le bon mais à priori on ne savait pas où il se situait dans la structure. Líindice était neutre.

La structure suivante permet díavoir un indice explicite ce qui facilite grandement les recherches ensuite.

tabpasswd=new Array();

tabpasswd["jacqueno"]=new Array(250,280,"FJ,762");

tabpasswd["martin"]=new Array(251,280,"JM,763");

document.write(tabpasswd[login][0]+"<br>");

document.write(tabpasswd[login][1]+"<br>");

</script>

Le résultat est

250

280

Si on connaît le login (indice dans notre cas) il est très simple díobtenir les informations en rapport, ce qui níétait pas le cas précédemment.

4. Autres méthodes de stockage des valeurs

Javascript est un langage ´ objet Ş ; Pour le moment rien dans líutilisation proposée ne le montre.

Mettons donc à contribution cette caractéristique.

Il existe deux méthodes.

Ø Les classes

Nous allons créer une classe (fonction) qui va síappliquer à notre objet : le tableau.

Remarque

Une fonction est aussi appelée classe ou méthode.

Reprenons líexemple précédent. Je vais créer une classe qui contient les informations en rapport avec le login (uid, gid et gecos).

function Info(uid,gid,gecos)

{

this.uid=uid ;

this.gid=gid ;

this.gecos=gecos ;

}

Rappel

this est un opérateur qui fait référence à líobjet courant. Cet opérateur níest utilisable quíà líintérieur díune classe. Il référence alors le parent de líobjet. Ici this représente le parent Info auquel appartient les éléments uid, gid et gecos.

Une fois la classe (ou fonction) créée, il faut déclarer le tableau associatif qui est la variable (plus précisément líobjet). Líobjet tableau est un type complexe dont les éléments se réclament de la classe Info.

La déclaration et líinitialisation sont alors :

tabasso=new Array() ;

tabasso["jacqueno"]=new Info(250,280, "FJ,762") ;

tabasso["martin"]=new Info(251,280,"JM,763") ;

Líutilisation se fait de la façon suivante :

document.write(tabasso["jacqueno"].uid) ;

document.write(tabasso["martin"].gecos) ;

Ces termes de classe, objets, méthodes seront revus en détail plus loin.

Exemple

Nous voulons à partir díun objet tabasso afficher les informations dans les cases text díun formulaire dans le cas où le login demandé existe ou alors afficher un message díalerte qui indique une erreur.

… Le programme

<HTML>

<HEAD>

<TITLE>Les tableaux associatifs</TITLE>

// Creation d'une classe Info contenant 3 proprietes

function Info(uid,gid,gecos)

{

this.uid = uid

this.gid = gid

this.gecos = gecos

}

// Declaration et initialisation de l'objet tabasso

tabasso= new Array()

tabasso["jacqueno"] = new Info(250,280,"FJ,762")

tabasso["lambda"] = new Info(56,50,"User LAMBDA")

// Creation d'une methode

function recherche(login)

{

// Le login demandez n'existe pas

if(typeof tabasso[login] == "undefined")

{

login2 = login + ":"

if(login2 == ":")

{

// Champ de saisi du login vide

alert("Vous n'avez rien saisi !")

}

else

{

// Champ de saisi du login rempli mais non trouvé dans l'objet tabasso

alert("L'utilisateur -->" + login + "<-- est inconnu !")

}

else

{

// Champ de saisi du login rempli et trouvé dans l'objet tabasso

// Mise a jour champ login (minuscule) 1er champ donc indice 0

document.forms[0].elements[0].value = login

// Mise a jour du champ uid 3eme champ donc indice 2

document.forms[0].elements[2].value = tabasso[login].uid

// Mise a jour du champ uid 4eme champ donc indice 3

document.forms[0].elements[3].value = tabasso[login].gid

// Mise a jour du champ gecos 5eme champ donc indice 4

document.forms[0].elements[4].value = tabasso[login].gecos

}

</script>

</HEAD>

<B>

<FORM>

<U>Donnez le login recherché</U><BR><BR>

<HR>

<BR>

<U>Affichage des informations trouvées</U>

uid = <INPUT TYPE=text><BR>

gid = <INPUT TYPE=text><BR>

gecos = <INPUT TYPE=text SIZE=30><BR>

</FORM>

</B>

</BODY>

</HTML>

… Les copies díécran

Formulaire vide (premier chargement)

Líutilisateur a entré le login lambda et cliquez sur le bouton afficher

Líutilisateur a entré un login qui níexiste pas

Líutilisateur a cliqué sur le bouton afficher sans saisir de login

Ø Les méthodes

Le stockage est se fait en utilisant les propriétés díun objet. La déclaration et líutilisation sont spécifiques à ce mécanisme.

Vous pouvez avoir des propriétés avec des indices numériques ou des indices chaînes de caractères. Líutilisation est alors différente.

Ø Les indices numériques

Déclaration

logins = {

jacqueno:{0:"250",1:"280",2:"FJ,762"},

lambda:{0:"56",1:"50",2:"LAMBDA"}

}

Utilisation

document.write(logins.jacqueno[0]) ; // renvoie la valeur 250

Ø Les indices chaînes de caractères

Déclaration

logins = {

jacqueno:{uid:"250",gid:"280",gecos:"FJ,762"},

lambda:{uid:"56",gid:"50",gecos:"LAMBDA"}

}

Utilisation

document.write(logins.jacqueno.uid) ; // renvoie la valeur 250

II.2 Les opérateurs

Une fois les éléments de stockage mis en place, certaines opérations vont devoir être réalisées, test, ajout, Ö

Il est alors nécessaire díutiliser des opérateurs.

a. Les opérateurs arithmétiques

Ces opérateurs níont díintérêt que pour des opérations entre éléments dont la valeur est de type numérique.

Le tableau suivant présente les opérateurs existants, leur signification ainsi quíun exemple díutilisation.

Rappel

Dans une opération arithmétique, les éléments de part et díautre de líopérateur se nomment les opérandes.

Pour les exemples prenons deux opérandes a qui possède la valeur numérique 7 et b qui possède la valeur numérique 2.

Opérateur	Signification	Exemple
+	Addition	a + b renvoie 9
-	Soustraction	a ń b renvoie 5
*	Multiplication	a * b renvoie 14
/	Division	a / b renvoie 3.5
%	Modulo (reste de la division)	a % b renvoie 1
=	Affectation	res = a + b; res renvoie 9
++	Incrémentation	a++ renvoie 8
--	Décrémentation	a-- renvoie 6

Rappel

Si une division est faite avec un diviseur égal à 0 cela provoque une erreur dans la plupart des langages. En javascript, le résultat est Infinity. Il vous est donc possible de tester cette éventualité pour éviter cette erreur.

a = 7 ; b = 0 ;

res = a / b ;

if(res == Infinity){

document.write("erreur le diviseur vaut 0" + res) ;

}

else{

document.write(a + "/" + b + " vaut " + res) ;

}

</script>

Attention

Si vous utilisez un opérateur arithmétique et que líun des opérandes níest pas numérique, la réponse à líaffichage sera NaN sauf dans le cas de líaddition où líopérateur + se transforme alors en opérateur ´ chaîne de caractère Ş de concaténation.

a = "FJ" ; b = 3 ;

document.write(a + b) ; // renvoie FJ3

document.write(a ń b) ; // renvoie NaN

</script>

Remarque

Le modulo (%) qui renvoie le reste de la division níest pas forcément un entier.

a =7 ; b = 3 ;

document.write(a % b) ; // renvoie 2.3333333333333335

</script>

il existe pour les opérateurs unaires ++ et -- deux utilisations.

Une est à priori et líautre à posteriori. Le résultat níest pas le même.

Prenons líexemple où a vaut 7.

Ø A priori

document.write(--a) ; renvoie la valeur 6

La décrémentation síeffectue avant líaffichage de la valeur de a.

Ø A posteriori

document.write(a--) ; renvoie la valeur 7

La décrémentation síeffectue après líaffichage de la valeur de a.

Exemple

c = 1;

liste = new Array(4,7,9) ;

document.write(liste[c++]) ; // renvoie 7

document.write(liste[c]) ; // renvoie 9

document.write(liste[c--]) ; // renvoie 9

</script>

b. Les opérateurs de comparaison

Ces opérateurs se retrouvent dans des tests permettant ainsi de comparer les valeurs des expressions.

Le résultat fourni par ces opérateurs est true (vrai) ou false (faux).

Le tableau suivant les récapitule.

Pour les exemples reprenons les deux variables a qui possède la valeur numérique 7 et b qui possède la valeur numérique 2.

Pour les deux derniers opérateurs (=== et !==) a vaut 7 et b vaut "7".

Opérateur	Signification	Exemple
<	Strictement plus petit	a < b renvoie false
>	Strictement plus grand	a > b renvoie true
<=	Plus petit ou égal	a <= b renvoie false
>=	Plus grand ou égal	a >= b renvoie true
==	Egalité des contenus	a == b renvoie false
!=	Différence des contenus	a != b renvoie true
===	Egalité des contenus et du type	a===b renvoie false
!==	Différence des contenus et du type	a!==b renvoie true

Attention

Une erreur très fréquente est díutiliser líopérateur = (affectation) lors un test en place et lieu de == (égalité des contenus). Ceci a pour fâcheux résultat díavoir un test qui renverra toujours true sauf dans le cas ou l ëopérande de droite possède la valeur 0. En effet 0 est considéré comme false (if(0) renvoie false).

a = 3 ;b=4 ;

//erreur on affecte a la variable a la valeur de b

// On passe toujours dans le alors alert("Pareil") ;

if(a = b){

II Les éléments de base du langage JavaScript

II.1 Les constantes et les variables

Exemple

Remarque

Attention

Exemple

Attention

Remarque

Exemples

Remarque

Remarque

Remarque

Attention

Important

Remarque

Remarque

Rappel

Exemple

logins = {

jacqueno:{0:"250",1:"280",2:"FJ,762"},

lambda:{0:"56",1:"50",2:"LAMBDA"}

logins = {

jacqueno:{uid:"250",gid:"280",gecos:"FJ,762"},

lambda:{uid:"56",gid:"50",gecos:"LAMBDA"}

II.2 Les opérateurs

Rappel

Rappel

Attention

Remarque

Exemple

Opérateur

Attention