JavaScript (PDFDrive)
JavaScript (PDFDrive)
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
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!
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
add(3, 4);
Functions
Deux types
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
<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
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; }
};
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…
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>
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 />";
</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"];
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