|
II.
Les structures de données en JavaScript
1. 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).
2.
Manipulation des chaînes 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 ê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 chaînes, 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>
|
|
Exécution :
Voici la valeur approchée à 0.001 près de la constante e
: 2.718
Mon lycée est situé en Seine-Saint-Denis dans la ville d'Épinay-sur-Seine
|
(Attention ! le symbole " exposant " E doit être collé
au dernier chiffre)
3. Déclaration
des variables
a) 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
b) Déclaration
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 :
|
Voici la valeur de x : x =
undefined
et son type : typeof(x) = undefined
|
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
nomEcole = "Mhexa4 " ; TauxTva = 20.6 ;
Éviter 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 :
|
Ici x est une variable " réelle
" : x = 12.5
Maintenant x est une chaine de caractères : x = Bonjour ! |
4.
Affectation de variables
a) 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 :
|
a = 10 ; b = 15
a = 25 ; b = 15
a = 25 ; b = 40 |
b) 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>
v ar lycee= "J-Feyder " ;
v ar ville = "Epinay-sur-Seine" ;
document.write(" Mon lycée est situé dans la ville
d\"' +ville + "< BR> ") ;
v ar 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 :
|
Mon lycée est situé dans la
ville d'Epinay-sur-Seine
Il porte le nom du cinéaste J-Feyder
Nous sommes au mois N° 12 |
5.
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
o les 4
opérations usuelles : + , - , * , /)
o ++
(incrément), -- (décrément)
o %
(modulo ou reste par une division entière)
· expressions d'affectation (ou attribution)
o l'opérateur
d'affectation : variable = expression
o
autres opérateurs d'attribution : +=, -=, *=, %=, ++, --
o x +=
4 équivaut à x = x + 4
x ++équivaut à x = x + 1
· expressions chaînes de caractères
o + opérateur
de concaténation (mise bout à bout) de deux chaînes
o var
aujourd'hui = " Lundi " + 3 + " novembre " +
1997 ;
o
document.write(aujourd'hui, "<BR> " ) ;
o +=
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
o opérateurs
de comparaison : == (égal, même valeur), != (différent),
>,>+ =,
< , <=
o opérateurs
logiques : && (ET), ||(OU), ! (NON), utilisés surtout dans
les instructions conditionnelles.
o Les
expressions conditionnelles
(condition) ? vall : val2 : évalue la condition et exécute vall si
vrai, ou val2
si faux.
Exemple : message=( fin = true ) ? " bonjour ":"au
revoir".
6.
Tableaux JS
Un tableau est un ensemble de données, en général de même type
(chaîne 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.
a) 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é Mon Tableau, de taille 8 éléments.
· var les 4saisons = 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) ;
b) 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 les 4saisons=new Array (''
Printemps'',''été'',''automne'',''hiver'') ;
Document, write (''voici les 4 saisons :<UL>'')
for (i=0 ;i<4 ;i++) {
document. write (''</LI>'',les 4saisons [i] )
}
document.write (" </UL> ") ; |
En voici l'exécution :
|
Voici les saisons :
* printemps
* été
* automne
* hiver |
c) Tableaux à plusieurs dimensions
Il faut les gérer comme des tableaux de tableaux (à une dimension)
Exemple
|
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("<br>"); |
Exécution
Propriétés :
· Lengt 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 = newArray() 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 :
|
Un électron porte une charge négative
égale à 1.6e-19 C |
· 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 :
|
Voici les 4 saisons :
Printemps été automne hiver |
|
