JavaScript

Chapitre 2 : instructions de base
MAS‐RAD –
Master of Advanced Studies, Rapid Application Development
Stéphane GOBRON
HE‐Arc – hes.so

2016
JavaScript
6 chapitres

http://commons.wikimedia.org/wiki/File:Javascript.svg
 Description du cours
 Fondamentaux
 Instructions de base
 Structure objet 
 Instructions avancées 
 Encore plus loin

Des variables, des tableaux, des 
fonctions, des objets…
JavaScript
Ch3. Instructions de 
base

Sections du chapitre 3

3.1 Sémantique
3.2 Opérateurs
3.3 Fonction
3.4 Evénements
3.5 Tableaux
3.6 Décision / condition
3.7 Itérations
3.8 Exemples série 2

Tout montage implique des éléments et des fonctions 
 Variables
 Mots réservés
 Propriétés et méthodes
 Identifiants possibles

Elles sont cachées derrière de jolies pages Web
Sémantique

Variables
 Mots clés var et let

(a) « var »
 Variable globale
var a = 7;
 Variable locale console.log("a is " + a + ".");
 Déclarée au sein d’une 
fonction –voir section 
suivante
Sémantique

Variable
 Mots clés var et let

(b) « let »

 Variable local let a = 7;
console.log("a is " + a + ".");
Sémantique

Variables
 Les constantes const varname1 = value1 [, varname2 = value2 [, varname3 =
value3 [, ... [, varnameN = valueN]]]];
 Cas spécial, ne varie pas!

const a = 7;
console.log("a is " + a + ".");

Constante Description
Not a Number, indique que l'élément concerné 
NaN
n'est pas un nombre valide
Infini, indique que l'élément concerné est hors 
Infinite
des plages de valeurs définies pour un nombre
Undefined Indéfini, l'élément ne correspond à aucun type 
reconnu
Sémantique

Mots réservés

for (var in = 0; in<=3 ; in++) { for (let i = 0; ; i++) {

console.log(it); console.log(i);
if (i > 3) break if (i > 3) break;
} }
Sémantique

Identifiants possibles

 Attention ! Les 
majuscules et les 
minuscules sont 
différenciées en JS

 On peut même utiliser 
les caractères 
généralement interdit 
dans les autres 
langages!
 De calcul
 De comparaison
 Associatifs
 Logiques
 D’incrémentation
Opérateurs

De calcul

 Pour les calculs avec 
ces variables de  Signe Nom Signification Exemple Résultat
valeurs : + plus addition x+3 14
‐ moins soustraction x‐3 8
 Entières ou * multiplié par multiplication x*2 22
 ‘Flottantes’, i.e. / divisé par division x/2 5.5
approximation des  reste de la 
réels % modulo x%5 1
division par
= a la valeur affectation x=5 5
 Similaire au C
Opérateurs de calcul, hypothèse : x=11
Opérateurs

De comparaison
Signe Nom Exemple Résultat
==  égal  x == 11  true
 Pour les calculs avec  <  inférieur  x < 11  false
ces variables de  <=  inférieur ou égal  x <= 11  true
valeurs : >  supérieur  x > 11  false
>=  supérieur ou égal  x >= 11  true
 Entières ou !=  différent  x != 11  false
 ‘Flottantes’, i.e.
approximation des  Opérateurs de comparaison toujours avec x = 11
réels
<p>
Assign 5 to x, and display the value of the comparison (x === 5):
 Similaire au C </p>
<p id="demo"></p>
Mais comment certifier que le type est le bon?
<script>
let x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
Opérateurs

Typage du égal!

Signe Nom Exemple Résultat

 Le JS étant faiblement 
x===11 true
typé, comparer deux 
=== égal 
objets ayant une 
x!=="11"  false
valeur identique mais 
x!==11   false
ayant une nature, un 
!== égal
type différent peut 
x!=="11" true
être une source 
d'erreur Toujours avec x=11… en JS tout est objet, mais le 
typage peut toutefois être vérifié!
 "===" permet de 
vérifier aussi que le 
type est le même!
Opérateurs

Associatifs

 Pour les calculs avec 
ces variables de  Signe Description Exemple Signification Résultat
valeurs :
+= plus égal x+=y x  x + y 16
 Entières ou ‐= moins égal x‐=y x  x ‐ y 6
 ‘Flottantes’, i.e. *= multiplié égal x*=y x  x * y 55
approximation des  /= divisé égal x/=y x  x / y 2.2
réels Opérateurs associatifs si x=11 et y=5
Opérateurs
Signe Description Exemple Signification Résultat
Logiques && et (c1)&&(c2) c1 et c2 Faux
|| ou (c1)||(c2) c1 ou c2 ou  Vrai
 Pour les calculs avec  les deux
ces variables de  Opérateurs logiques avec deux conditions c1 et c2. 
valeurs : Hypothèse : c1 est fausse et c2 est vraie
 Entières ou
 ‘Flottantes’, i.e.
approximation des 
réels
Opérateurs

Opérateurs incrémentaux

 Pour les calculs avec 
ces variables de 
valeurs :
Signe Description Exemple Signification Résultat
 Entières ou aa ++ inc b=++aa b reçois aa++ b=aa=7
 ‘Flottantes’, i.e.
ou
approximation des 
réels ++ aa Opérateurs d’incrémentation. Hypothèse : aa=6
aa ‐‐ déc b=aa‐‐ b reçois aa‐‐ b=6;aa=5
ou 
‐‐ aa
 Paramétrage
 Deux types
 La suite dans le DOM
Functions

Paramétrage

function add(firstNb, secondNb)

{
let total = firstNb + secondNb;
console.log( total );
}

add(3, 4);
Functions

Deux types

 Fonction propres JS <script >

var nombre =2;
 Fonction utilisateur result = cube( nombre );
</ script >

function cube( nombre )

{
var cube = nombre*nombre*nombre;
return cube; // retourne 8
}
Functions

La suite dans le DOM

 Voir chapitre 3

La suite dans le DOM
 Charge et décharge
 Souris
 Notion de « focus »
Les événements

Description Evénement 
Souris L'utilisateur clique sur un bouton, un lien ou tout 
autre élément onclick
L'utilisateur place le pointeur de la souris sur un lien 
ou tout élément  mouseover
Le pointeur de la souris quitte un lien ou tout autre 
élément mouseout

<p id="demo" onclick="myFunction()">

Click me to change my text color.
</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Les événements

Notion de « focus »
Description Evénement 
Un élément de formulaire devient la zone d'entrée 
active (« focus ») focus 
Un élément de formulaire perd le focus c'est‐à‐dire 
que l'utilisateur clique hors du champ et que la zone 
d'entrée n'est plus active blur
La valeur d'un champ de formulaire est modifiée et 
que le champ perd le focus change 
L'utilisateur sélectionne un champ dans un élément 
de formulaire select 
L'utilisateur clique sur le bouton Submit pour envoyer 
un formulaire submit

<Voir exemple ci‐après>
Les événements

Notion de « focus »
<form id="myForm">
 Exemple <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
 Déclaration et utilisation
 Enumération
 Objets
 Cas avancé des tableaux
var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];

Tableaux

Déclaration 
Indice 0 1 2 3
Donnée donnée 1 donnée 2 donnée 3 donnée 4

var MonTableau = ["donnée1", "donnée2", "donnée3", "donnée4"];

var MonTableau = new Array();

MonTableau[0] = " donnée1";
MonTableau[1] = " donnée2";
MonTableau[2] = " donnée3";
MonTableau[3] = " donnée4";
Méthode rigoureuse

document.write( "Le 4ième élément du tableau est "

+MonTableau[3] );
Utilisation
 SMALL : {value: 0, name: "Small", code: "S"},
MEDIUM:
var Mode = {value: 1, name:
{ "NONE": "Medium",
0, "PAUSED": 1, code: "M"},2, "REST": 3, "HIGH": 4, "LOW": 5, "LOW": 6 };
"WORK":
LARGE : {value: 2, name: "Large", code: "L"}
};

Tableaux

Énumération  // déclaration
var Mode = { "NONE": 0,
"PAUSED": 1,
 Cas spécial
"WORK": 2,
"REST": 3,
 Sorte de tableau  "HIGH": 4,
constant "LOW": 5,
"LOW": 6 };

// utilisation
var TimerState = Mode.NONE;

Modèle classique : une collection associée à une valeur

var SIZE = {
SMALL : {value: 0, name: "Small", code: "S"},
MEDIUM: {value: 1, name: "Medium", code: "M"},
LARGE : {value: 2, name: "Large", code: "L"}
};

Modèle avancé : une collection de collection
Tableaux

Objet
var Calcul =
{
add : function(a, b) { return a + b; },
sub : function(a, b) { return a - b; },
mul : function(a, b) { return a * b; },
div : function(a, b) { return a / b; }
};

// avec une utilisation objet :

Calcul.add(3, 2); // retourne 5
Calcul.mul(3, 2); // retourne 6

// avec une utilisation tableau :

Calcul['sub'](3, 2); // retourne 1
Calcul['div'](3, 2); // retourne 1.5
Tableaux

var Calcul = [
Cas avancé des tableaux function(a, b) { return a + b; },
function(a, b) { return a - b; },
function(a, b) { return a * b; },
function(a, b) { return a / b; }
];
Calcul[0](3, 2); // Affiche 5

Tout comme les objets, sauf que… 

var monTableau = [];

Sauf que c'est un  monTableau.length; // Affiche 0

objet natif de JS, donc  monTableau.push("Toto est présent!");
il a des fonctionnalités  monTableau.length; // Affiche 1
en plus! monTableau[100] = "Tarte au centième";
monTableau.length; // Affiche 101 !!!
Tableaux

Exercice pratique

 Développez un code JS 
permettant de définir 
un objet tableau de 
fonctions affichant le 
carré et la racine 
carrée des éléments 
d'un tableau 
contenant les champs 
des 5 premiers 
nombres premiers 
<!DOCTYPE html>
<html lang="fr">
<head> <meta charset="UTF-8"> <title>Document</title></head>
<body>
<p id="results"></p>
<script>
var Calculs = [
function(a) {return Math.pow(a, 2)},
function(a) {return Math.sqrt(a)}
];
var Valeur = [2,3,5,7,11];
for (i = 0; i < Valeur.length; ++i) {
for (j = 0; j < 2; ++j) {
document.getElementById( "results" ).innerHTML += Calculs[j](Valeur[i])+" <br>";
}
}
</script>
</body></html>
 if… else if… else
 Opérateur ternaire
 Saut inconditionnel
 Arrêt inconditionnel
 Insctruction par cas
Décision / condition

if… else if… else
var X = 4
 Principe : if (X == 1)
document.write ("Un")
if( condition1 ) else if (X == 2)
{ {
instructions_1 document.write ("Deux")
} document.write ("le premier nombre premier pair")
}
else if( condition2 ) else if (X == 3)
{ document.write ("Trois")
instructions_2 else
} {
else if … document.write ("Quel grand")
{ … document.write ("Chiffre !")
}
}
else // default case
{
instrutions_n
}
Décision / condition

Opérateur ternaire

 Principe : <script>

(condition) ? instruction si  var X = 2;

vrai : instruction si faux
(X == 1) ?
Remarques: 
document.write ("Un")
 la condition doit être 
entre des parenthèses  : document.write ("two");
 Lorsque la condition 
est vraie, l'instruction  </script>
de gauche est 
exécutée 
 Lorsque la condition 
est fausse, l'instruction 
de droite est exécutée
Décision / condition

Saut inconditionnel
x=0;
while (x<=10)
{
++x;
if ( x == 7 )
{
alert( 'division par 0' );
continue;
}

a = 1/(x-7);
alert( a );
}
Décision / condition

Arrêt inconditionnel
for( x=1; x<=10; x++ )
{
a = x-7;

if (a == 0)
{
alert('division par 0');
break;
}

alert( 1/a );
}
Décision / condition

switch( Variable )
Instruction par cas {
case Valeur1:
 switch...case //…instructions…
break;

case Valeur2:
//…instructions…
break;

case ValeurX:
//…instructions…
break;

default:
//…instructions…
break;
}
 Instruction while
 Instruction do…while
 Instruction for
 Instruction for in
 Fonction forEach
Itérations

Instruction while
<script>
var myCounter = 0;
var linebreak = "<br />";

while( myCounter < 10 )

{
myCounter ++;
document.write( myCounter );
document.write( linebreak );
}

</script>
Instruction while avec un simple compteur de 1 à 10
Itérations

Instruction do while

<script>
var myCounter = 0;
var linebreak = "<br />";

do
{
document.write( myCounter++ );
document.write( linebreak );
} while( myCounter < 10 )

</script>
Instruction do while avec un simple compteur de 0 à 9
Itérations

Instructions for
<script>
 Principe : réaliser une  var myTab = new Array();
boucle avec un index myTab = ["1", "2", "3", "toto"];

 Syntaxe : // Prints array 'one', 'two', 'three' :

var txt="";
for ( compteur; condition;  for( let index=0; index<myTab.length; ++index )
modification du  {
txt = "Index: " + index + ", valeur: " + myTab[index] + "<br />";
compteur )
document.write( txt );
{ }
liste d'instructions <script>
}

Instruction for avec un tableau
Itérations

Tableaux : for .. in

 Similaire au foreach <script>
des langages de la  var myEnum = {one: 1, two: 2, three: 3, four: "toto"};
POO de haut niveau
// Prints myEnum 'one', 'two', 'three' :
 Principe : réaliser une  var txt="";
boucle sur les  for( var element in myEnum )
éléments d'un objet
{
 Syntaxe : txt = "`Index´: " + element + ",valeur : " +
myEnum[element] + "<br />";
for ( compteur élément in document.write( txt );
objet comprenant des  }
éléments ) <script>
{
liste d'instructions
} Instruction for…in avec une énumération
Itérations

Tableaux : forEach
<script>
 Méthode spécifique au 
monTableau = ['one', 'two', 'three'];
tableau
// Prints array elts 'one', 'two', 'three' :
 Attention, n'est pas 
monTableau.forEach(
encore stable avec 
function(entry)
MS‐ie
{
console.log(entry);
}
);

<script>

Fonction des tableaux forEach
Itérations

Exercice pratique

 Développez un code JS 
permettant de 
parcourir un tableau 
contenant les mois de 
l'année avec une 
boucle while sans 
coder "en dur" le 
nombre d'élément du 
tableau
Itérations

Exercice pratique

 Développez un code JS 
permettant de calculer 
le ratio deux à deux de 
la suite de Fibonachi

Nombre d'or…
 eg02‐01.html : modification d'un champs (couleur) équivalent au CSS
 eg02‐02.html : création de fonctions mathématiques
 eg02‐03.html : utilisation de fonctions mathématiques avec variables
 eg02‐04.html : événements, onload et blur
 eg02‐05.html : événements mini‐jeu, onclick et mouseover
 eg02‐06.html : événements entre image et balise
 eg02‐07.html : événements et changement d'état
 eg02‐08.html : les boucles `for´ et `for..in´
Merci! Questions?
Prochain cours :

Chapitre 3 : Structure objet
 DOM
 Formulaire
 Menu déroulant

Représentation d'une arborescence