2 Les structures de données en JavaScript

Les données constantes

JS fournit les constantes suivantes, directement disponibles :

les constantes numériques : entiers, "réels" écrits en notation décimale, ou flottante (c-à-d en notation scientifique, par ex : 2718E-3)
les 2 constantes booléennes : true ou false
les chaînes de caractères, entourées indifféremment de guillemets " " ou d'apostrophes ' ' (à privilégier).
la constante spéciale null signifie "rien", "absence de valeur". Cette "valeur" est attribuée à toute variable utilisée sans être définie (par exemple prompt() retourne null si on sélectionne le bouton Annuler)

Manipulation des chaines de caractères

JavaScript facilite beaucoup l'affichage des résultats en convertissant automatiquement les entiers en chaînes de caractères, ce qui permet de concaténer des nombres avec des chaînes de caractères (transtypage automatique).
Dans l'instruction d'écriture dans le document courant, document.write( ), les données à afficher peuvent être séparées par des virgules ou des +.(la concaténation par l'opérateur + est recommandée)
Des caractères spéciaux peuvent aussi être insérés dans les chaînes : \b (retour arrière), \f (saut de page) , \n (nouvelle ligne) , \r (Entrée), & (tabulation); \' pour une apostrophe
On peut insérer des codes HTML sous forme de chaines, qui seront bien interprétées à l'exécution comme de véritables balise, et non par affichées telles quelles.

Exemple

<script>
document.write("Voici la valeur approchée à ", 1E-3, 
	" près de la constante e : ", 2718E-3);
document.write("<P>");
document.write("Mon <i>lycée</i> est situé en 
<u>Seine-Saint-Denis</u> dans la ville d\'Epinay-sur-Seine");
</script>

(Attention ! le symbole "exposant" E doit être collé au dernier chiffre.)

Déclaration et affectation de variables

Types de variables
On distingue 5 types de variables en JS.
Les nombres : number, les chaines : string, les booléens : boolean, les objets : object et les fonctions : function
La fonction typeof() appliquée à une variable retourne son type.
var chaine = 'bonjour'; document.write(typeof(chaine));
En voici l'exécution :
Notation : var nom = valeur
Déclaration de la variable nom initialisée avec la valeur valeur; son type est alors celui de la valeur.
- Le mot var est facultatif, mais recommandé.
- Les variables doivent commencer par une lettre ou par _
- JS distingue minuscules et majuscules.
  Les variables suivantes mavariable, maVariable, Mavariable, MaVariable sont toutes distinctes.
- Le symbole = est réservé à l'affectation; le symbole de comparaison (égalité) se note == ( 2 symboles = collés).
- JS attribue automatiquement à la variable le type de la valeur affectée.
  Sinon JS lui attribue une valeur et un type indéterminés "undefined"
var x ; document.write('Voici la valeur de x : x = '+ x+ "<BR>" ); document.write("et son type : typeof(x) = " + typeof(x) );
En voici l'exécution :
Attention
L'attribution implicite de type, à première vue pratique, risque d'engendrer confusion et absence de rigueur.
Il faut s'habituer à déclarer les variables et à les initialiser (c'est-à-dire leur donner une valeur initiale au moment de leur déclaration, ce qui fixe leur type.
Par exemple
nomLycee = "J. Feyder" ; TauxTva = 20.6 ;
Eviter absolument ce qui suit (c'est compris par JS, mais peu recommandable !)
var x = 12.5; document.write('Ici x est une variable "réelle" : x = '+ x+ "<BR>" ); x = "Bonjour !" ; document.write("Maintenant x est une chaîne de caractères : x = " + x );
En voici l'exécution :
Affectation de variables

Mécanisme de l'affectation
variable = valeur (de l'expression, de même type)
Exemple à étudier :

var  a=10 ; b= 15;
document.write( " a= "+a + " ;  b= "+b+"<BR>");
a = 2 * b - 5 ;   // valeur de a = 2 fois la valeur de b - 5
document.write( " a= "+a + " ;  b= "+b+"<BR>");
b = a + b ;      // nouvelle valeur de b = précédente valeur de b + valeur de a
document.write( " a= "+a + " ;  b= "+b);

En voici l'exécution :

Faire l'exercice 1 sur l'affectation

Portée des variables

Portée d'une variable
La portée d'une variable est le domaine où cette variable est connue et utilisable.

De façon générale les variables définies directement dans une séquence de script (entre <script> ....</script>) ont une portée globale sur toutes les parties de script.
Exemple :

<HEAD> <script> var lycee="J-Feyder"; var ville="Epinay-sur-Seine"; document.write("Mon lycée est situé dans la ville d\'"+ville+"<BR>"); var date = new Date(); </script> </HEAD> </BODY> <script> document.write("Il porte le nom du cinéaste "+lycee+"<BR>"); document.write("Nous sommes au mois N°",date.getMonth() + 1,"<BR>"); </script> </BODY>

En voici l'exécution :

Construction des expressions

On peut distinguer plusieurs types d'expressions :

expressions arithmétiques : construites par opérations sur les entiers et les réels. Principales opérations
- les 4 opérations usuelles : + , - , * , / )
- ++ (incrément) , -- (décrément)
- % (modulo ou reste par une division entière)
expressions d'affectation (ou attribution)
- l'opérateur d'affectation : variable = expression
- autres opérateurs d'attribution : += , -= , *= , /= , %= , ++ , --
- x += 4 équivaut à x = x + 4
  x ++ équivaut à x = x + 1
expressions chaînes de caractères
- + opérateur de concaténation (mise bout à bout) de deux chaînes
```
var aujourdhui = " Lundi " + 3 + " novembre" + 1997; 
document.write(aujourdhui, "<BR>" );
```
- += ajoute la chaîne de droite à la chaîne de gauche
  var message = "Bonjour "; message += "tout le monde !" ; document.write(message );
  En voici l'exécution :
expressions booléennes ou logiques
- opérateurs de comparaison : == (égal, même valeur) , != (différent) , > , >= , < , <=
- opérateurs logiques : && (ET) , || (OU ) , ! (NON) , utilisés surtout dans les instructions conditionnelles.
- Les expressions conditionnelles
  (condition) ? val1 : val2 : évalue la condition et exécute val1 si vrai, ou val2 si faux.
  Exemple : message = ( fin = true ) ? "bonjour" : "au revoir"

Tableaux JS

Un tableau dans un langage de programmation n'a rien à voir avec un tableau HTML ou Word !
C'est un ensemble de données, en général de même type (chaine de caractères, nombres ..), rangées sous un même nom et distingués par un numéro.
Ce numéro, l'indice, est placé entre [ ], et caractérise un élément du tableau.

Déclaration

var nom_tableau = new Array(dimension) ;
Le mot new commande la construction d'un objet de type Array, c'est-à-dire, tableau.
Le paramètre dimension, s'il est présent, est le nombre d'éléments.

Exemples

var MonTableau = new Array(8)
construit un tableau nommé MonTableau, de taille 8 éléments.
var Les4saisons = new Array("printemps", "été", "automne", "hiver");
construit un tableau en initialisant 4 éléments, c'est-à-dire en leur affectant une valeur initiale (qui pourra ensuite être modifiée).
var mois= new Array(12);

Utilisation

Les éléments d'un tableau de taille dim, sont indicés à partir de 0 jusqu'à dim - 1.
Exemples à étudier :

var MonTableau = new Array(8)
Ces 8 éléments sont nommés MonTableau[0] , .... MonTableau[7]
var mois= new Array(12); mois[0]="Janvier"; ...mois[11]="Décembre";

var Les4saisons = new Array("printemps", "été", "automne", "hiver"); document.write("Voici les 4 saisons : <UL>") for (i=0 ; i<4 ; i++) { document.write("<LI>", Les4saisons[i] ) } document.write("</UL>");
En voici l'exécution :

Tableaux à plusieurs dimensions

Il faut les gérer comme des tableaux de tableaux (à une dimension).
Exemple et exécution :

tab=new Array(3);
tab[0]= new Array(1,2,3);
tab[1]= new Array(4,5,6);
tab[2]= new Array(7,8,9);
for (i=0;i<3;i++)  {
  for (j=0;j<3;j++)
     document.write(tab[i][j],"  " );
  document.write("<br> " );	
}

Propriétés

length donne le nombre d'éléments.
var mois= new Array(12);
document.write("Il y a ", mois.length, "mois dans l'année");
var NbMois = mois.length ; document.write(" partagés en ", NbMois / 3, " trimestres");

Méthodes

reverse() change l'ordre des éléments
sort() trie suivant l'ordre croissant, ou suivant le modèle indiqué en paramètre

Particularités et bizarreries ..

var tab = new Array() crée un objet vide, de type tableau, sans fixer sa dimension
var tab= new Array("bonjour", charge_e, 1.6E-19, "C") est accepté et crée un tableau hétéroclite de 4 éléments
var unLepton="un électron"; var tab= new Array(unLepton, " porte une charge négative égale à ", 1.6E-19," C"); for( i=0; i<tab.length; i++) document.write(tab[i] );
En voici l'exécution :

On peut aussi créer un tableau directement "en extension", sans faire appel au constructeur Array(). On liste les valeurs des éléments dans [ ... ].
Exemple : les 2 définitions suivantes sont équivalentes

var Les4saisons = new Array("printemps", "été", "automne", "hiver"); var Les4saisonsbis = ["printemps", "été", "automne", "hiver"]; document.write("Voici les 4 saisons : <br>") for (i=0 ; i<Les4saisonsbis.length ; i++) document.write(Les4saisonsbis[i], " " )
En voici l'exécution :