COMMENT INTEGRER LE MARKETING MOBILE DANS UNE STRATEGIE MARKETING GLOBALE
JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´...
Transcript of JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´...
![Page 1: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/1.jpg)
JavaScript : les fondamentaux
Achref El Mouelhi
Docteur de l’universite d’Aix-MarseilleChercheur en programmation par contrainte (IA)
Ingenieur en genie logiciel
H & H: Research and Training 1 / 143
![Page 2: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/2.jpg)
Plan
1 Introduction
2 Integrer JavaScript dans HTML
3 Console
4 Commentaires
5 Variables
6 Quelques operations sur les variables
7 Methodes utiles pour les chaınes de caracteres
H & H: Research and Training 2 / 143
![Page 3: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/3.jpg)
Plan
8 Conditions et bouclesifif ... elseelse ifswitchExpression ternairewhiledo ... whilefor
9 Tableaux
10 FonctionsFonction de retour (callback)Quelques fonctions connues utilisant le callbackClosure d’une fonction
H & H: Research and Training 3 / 143
![Page 4: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/4.jpg)
Plan
11 ObjetsAttributsMethodesConstructeursPrototypes
12 Objets et methodes predefinis
13 OperateursL’operateur inL’operateur deleteL’operateur instanceof
H & H: Research and Training 4 / 143
![Page 5: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/5.jpg)
Plan
14 Constantes
15 Exceptions
16 Hoisting
17 Expressions regulieres
18 Quelques erreurs JavaScript
19 Conventions et bonnes pratiques
H & H: Research and Training 5 / 143
![Page 6: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/6.jpg)
© Achref EL MOUELHI ©
Introduction
JavaScript
Definition, histoire et role
est un langage de programmation de scripts oriente objet (aprototype)
cree par Brendan Eich
presente par Netscape et Sun Microsystems en decembre 1995
standardise par ECMAScript en juin 1997 pour
permettant de
completer l’aspect algorithmique manquant a HTML (et CSS)
rendre plus vivant le site web avec notamment des animations,effets et de l’interaction avec l’internaute (le visiteur, le client...).
H & H: Research and Training 6 / 143
![Page 7: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/7.jpg)
© Achref EL MOUELHI ©
Introduction
JavaScript
Specificites du JavaScript
langage faiblement type
syntaxe assez proche de celle de Java, C++, C...
possibilite d’ecrire plusieurs instructions sur une seule ligne acondition de les separer par ;
terminer une instruction par ; est fortement recommandee memesi cette derniere est la seule sur la ligne
H & H: Research and Training 7 / 143
![Page 8: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/8.jpg)
© Achref EL MOUELHI ©
Introduction
JavaScript
Autres langages de programmation de scripts
AppleScript
JScript, VBScript et TypeScript (Microsoft)
LiveScript (Netscape) puis JavaScript
ActionScript (MacroMedia)
CoffeeScript (Open-source)
...
H & H: Research and Training 8 / 143
![Page 9: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/9.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScript
Integrer JavaScript dans HTML
Trois facons pour definir des scripts JavaScript
comme valeur d’attribut de n’importe quelle balise HTML
dans une balise <script> de la section <head> d’une pageHTML
dans un fichier d’extension .js reference dans une page HTMLpar la balise <script>
H & H: Research and Training 9 / 143
![Page 10: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/10.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScript
Premiere methode
<button onclick="alert(’Hello World’);"> Cliquer ici</button>
H & H: Research and Training 10 / 143
![Page 11: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/11.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScriptDeuxieme methode
<!DOCTYPE html><html><head><title>First JS Page</title><script type="text/javascript">function maFonction() {
alert("Hello World !");}
</script></head><body><button onclick="maFonction()">
Cliquer ici</button>
</body></html>
L’attribut type="text/javascript" n’est plus necessaire depuis HTML 5.
H & H: Research and Training 11 / 143
![Page 12: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/12.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScriptDeuxieme methode
<!DOCTYPE html><html><head><title>First JS Page</title><script type="text/javascript">function maFonction() {
alert("Hello World !");}
</script></head><body><button onclick="maFonction()">
Cliquer ici</button>
</body></html>
L’attribut type="text/javascript" n’est plus necessaire depuis HTML 5.H & H: Research and Training 11 / 143
![Page 13: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/13.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScriptTroisieme methode
<!DOCTYPE html><html><head><title>First JS Page</title><script src="script.js"></script>
</head><body><button onclick="maFonction()"> Cliquer ici</button>
</body></html>
Contenu du script.js
function maFonction() {alert("Hello World !");
}
H & H: Research and Training 12 / 143
![Page 14: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/14.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScriptTroisieme methode
<!DOCTYPE html><html><head><title>First JS Page</title><script src="script.js"></script>
</head><body><button onclick="maFonction()"> Cliquer ici</button>
</body></html>
Contenu du script.js
function maFonction() {alert("Hello World !");
}
H & H: Research and Training 12 / 143
![Page 15: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/15.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScript
Pour une box d’affichage avec confirmation
var bin = confirm("Press a button!");alert(bin);
Pour une box d’affichage avec une zone de saisie
var str = prompt("Votre nom", "John Wick");alert(str);
H & H: Research and Training 13 / 143
![Page 16: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/16.jpg)
© Achref EL MOUELHI ©
Integrer JavaScript dans HTML
JavaScript
Pour une box d’affichage avec confirmation
var bin = confirm("Press a button!");alert(bin);
Pour une box d’affichage avec une zone de saisie
var str = prompt("Votre nom", "John Wick");alert(str);
H & H: Research and Training 13 / 143
![Page 17: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/17.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
La console, pourquoi ?
permet de controler l’avancement de l’execution d’un programme
en affichant le contenu de variables (deboguer)
en verifiant les blocs du code visites (tracer)
Modifions le contenu du script.js
function maFonction(){console.log("Hello World !");
}
H & H: Research and Training 14 / 143
![Page 18: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/18.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
La console, pourquoi ?
permet de controler l’avancement de l’execution d’un programme
en affichant le contenu de variables (deboguer)
en verifiant les blocs du code visites (tracer)
Modifions le contenu du script.js
function maFonction(){console.log("Hello World !");
}
H & H: Research and Training 14 / 143
![Page 19: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/19.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
Ou trouve t-on le message?
Pour les navigateurs suivants
Google chrome
Mozilla firefox
Internet explorer
Cliquer sur F12
H & H: Research and Training 15 / 143
![Page 20: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/20.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
Existe t-il un autre moyen de tester un programme JS sans passer parun navigateur?
Oui, en utilisant NodeJS (pour telechargerhttps://nodejs.org/en/)
Pour tester, utiliser une console telle que
Invite de commandes
Windows PowerShell
Cmder
Lancer la commande node nomFichier.js
H & H: Research and Training 16 / 143
![Page 21: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/21.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
Modifions le contenu du script.js
function maFonction(){console.log("Hello World !");
}maFonction();
Lancer la commande node script.js
H & H: Research and Training 17 / 143
![Page 22: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/22.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
Modifions le contenu du script.js
function maFonction(){console.log("Hello World !");
}maFonction();
Lancer la commande node script.js
H & H: Research and Training 17 / 143
![Page 23: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/23.jpg)
© Achref EL MOUELHI ©
Console
JavaScript
Il est aussi possible de definir un raccourci de console.log
var cl = console.log;cl("Hello World !");
H & H: Research and Training 18 / 143
![Page 24: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/24.jpg)
© Achref EL MOUELHI ©
Commentaires
JavaScriptCommentaire sur une seule ligne
// commentaire
Commentaire sur plusieurs lignes
/* le commentairela suiteet encore la suite
*/
Commentaire pour la documentation
/** un commentairepourla documentation
*/
H & H: Research and Training 19 / 143
![Page 25: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/25.jpg)
© Achref EL MOUELHI ©
Commentaires
JavaScriptCommentaire sur une seule ligne
// commentaire
Commentaire sur plusieurs lignes
/* le commentairela suiteet encore la suite
*/
Commentaire pour la documentation
/** un commentairepourla documentation
*/
H & H: Research and Training 19 / 143
![Page 26: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/26.jpg)
© Achref EL MOUELHI ©
Commentaires
JavaScriptCommentaire sur une seule ligne
// commentaire
Commentaire sur plusieurs lignes
/* le commentairela suiteet encore la suite
*/
Commentaire pour la documentation
/** un commentairepourla documentation
*/H & H: Research and Training 19 / 143
![Page 27: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/27.jpg)
© Achref EL MOUELHI ©
Variables
JavaScriptDeclaration d’une variable avec le mot cle var
var x;
Initialisation
x = 0;
Declaration + initialisation
var y = 5;
Il est possible de declarer simultanement plusieurs variables
var x = 0, y = 5;
H & H: Research and Training 20 / 143
![Page 28: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/28.jpg)
© Achref EL MOUELHI ©
Variables
JavaScriptDeclaration d’une variable avec le mot cle var
var x;
Initialisation
x = 0;
Declaration + initialisation
var y = 5;
Il est possible de declarer simultanement plusieurs variables
var x = 0, y = 5;
H & H: Research and Training 20 / 143
![Page 29: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/29.jpg)
© Achref EL MOUELHI ©
Variables
JavaScriptDeclaration d’une variable avec le mot cle var
var x;
Initialisation
x = 0;
Declaration + initialisation
var y = 5;
Il est possible de declarer simultanement plusieurs variables
var x = 0, y = 5;
H & H: Research and Training 20 / 143
![Page 30: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/30.jpg)
© Achref EL MOUELHI ©
Variables
JavaScriptDeclaration d’une variable avec le mot cle var
var x;
Initialisation
x = 0;
Declaration + initialisation
var y = 5;
Il est possible de declarer simultanement plusieurs variables
var x = 0, y = 5;
H & H: Research and Training 20 / 143
![Page 31: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/31.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Initialisation d’une variable non-declaree⇒ declaration
z = 5;
Affectation d’une variable non-declaree
t = x + y;
H & H: Research and Training 21 / 143
![Page 32: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/32.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Initialisation d’une variable non-declaree⇒ declaration
z = 5;
Affectation d’une variable non-declaree
t = x + y;
H & H: Research and Training 21 / 143
![Page 33: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/33.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Utiliser une variable non-declaree et non-initialisee⇒ReferenceError
alert (v);
Une variable declaree mais non-initialisee a par defaut la valeurundefined
var w;alert (w);
NaN : not a number
var x = "bonjour";n = x * 2;console.log(n);
H & H: Research and Training 22 / 143
![Page 34: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/34.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Utiliser une variable non-declaree et non-initialisee⇒ReferenceError
alert (v);
Une variable declaree mais non-initialisee a par defaut la valeurundefined
var w;alert (w);
NaN : not a number
var x = "bonjour";n = x * 2;console.log(n);
H & H: Research and Training 22 / 143
![Page 35: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/35.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Utiliser une variable non-declaree et non-initialisee⇒ReferenceError
alert (v);
Une variable declaree mais non-initialisee a par defaut la valeurundefined
var w;alert (w);
NaN : not a number
var x = "bonjour";n = x * 2;console.log(n);
H & H: Research and Training 22 / 143
![Page 36: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/36.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Quelques types de variable selon la valeur affectee
number
string
boolean
object
undefined
H & H: Research and Training 23 / 143
![Page 37: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/37.jpg)
© Achref EL MOUELHI ©
Variables
JavaScriptPour recuperer le type de valeur affectee a une variable
console.log(typeof 5);// affiche number
console.log(typeof true);// affiche boolean
console.log(typeof 5.2);// affiche number
console.log(typeof "bonjour");// affiche string
console.log(typeof ’c’);// affiche string
var x;console.log(typeof x);// affiche undefined
H & H: Research and Training 24 / 143
![Page 38: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/38.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Une variable declaree avec le mot-cle var a une visibilite globale
{var x = 1;
}console.log(x);// affiche 1
Remarque
Une variable declaree dans un bloc { ... } autre que fonction (if,for...) a une portee globale.
H & H: Research and Training 25 / 143
![Page 39: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/39.jpg)
© Achref EL MOUELHI ©
Variables
JavaScript
Une variable declaree avec le mot-cle var a une visibilite globale
{var x = 1;
}console.log(x);// affiche 1
Remarque
Une variable declaree dans un bloc { ... } autre que fonction (if,for...) a une portee globale.
H & H: Research and Training 25 / 143
![Page 40: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/40.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScriptAddition (qui peut se transformer en concatenation) et conversion
var x = 1;var y = 3;var z = ’8’;var t = "2";var u = "bonjour";var v = "3bonjour";var m;var n = 2.5;console.log(x + y); // 4console.log(x + z); // 18console.log(x + parseInt(z)); // 9console.log(x + t); // 12console.log(x + y + z); // 48console.log(z + y + x); // 831console.log(x + u); // 1bonjourconsole.log(x + parseInt(u)); // NaNconsole.log(x + v); // 13bonjourconsole.log(x + parseInt(v)); // 4console.log(u + v); // bonjour3bonjourconsole.log(x + m); // NaNconsole.log(x + n); // 3.5
H & H: Research and Training 26 / 143
![Page 41: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/41.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Autres operateurs arithmetiques
* : multiplication
- : soustraction
/ : division
% : reste de la division
** : exponentiel
H & H: Research and Training 27 / 143
![Page 42: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/42.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScriptAttention, l’operateur + pour les chaınes de caracteres est different de tous lesautres operateurs arithmetiques
var a = "2";var b = ’3’;var resultat = a * b;console.log(resultat);// affiche 6
Cependant ce code genere un NaN
var a = "bon";var b = ’jour’;var resultat = a * b;console.log(resultat);// affiche NaNconsole.log(b + parseInt(a));// affiche jourNaN
H & H: Research and Training 28 / 143
![Page 43: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/43.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScriptAttention, l’operateur + pour les chaınes de caracteres est different de tous lesautres operateurs arithmetiques
var a = "2";var b = ’3’;var resultat = a * b;console.log(resultat);// affiche 6
Cependant ce code genere un NaN
var a = "bon";var b = ’jour’;var resultat = a * b;console.log(resultat);// affiche NaNconsole.log(b + parseInt(a));// affiche jourNaN
H & H: Research and Training 28 / 143
![Page 44: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/44.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
En JavaScript, une division par 0 ne genere pas d’erreur
a = 2;b = 0;console.log(a / b);
Pour convertir une chaıne en entier
var a = ’4’;b = 2;console.log(b + parseInt(a));
H & H: Research and Training 29 / 143
![Page 45: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/45.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
En JavaScript, une division par 0 ne genere pas d’erreur
a = 2;b = 0;console.log(a / b);
Pour convertir une chaıne en entier
var a = ’4’;b = 2;console.log(b + parseInt(a));
H & H: Research and Training 29 / 143
![Page 46: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/46.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Quelques raccourcis
i++; ≡ i = i + 1;
i--; ≡ i = i - 1;
i += 2; ≡ i = i + 2;
i -= 3; ≡ i = i - 3;
i *= 2; ≡ i = i * 2;
i /= 3; ≡ i = i / 3;
i %= 5; ≡ i = i % 5;
H & H: Research and Training 30 / 143
![Page 47: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/47.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Exemple de post-incrementation
var i = 2;var j = i++;console.log(i); // affiche 3console.log(j); // affiche 2
Exemple de pre-incrementation
var i = 2;var j = ++i;console.log(i); // affiche 3console.log(j); // affiche 3
H & H: Research and Training 31 / 143
![Page 48: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/48.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Exemple de post-incrementation
var i = 2;var j = i++;console.log(i); // affiche 3console.log(j); // affiche 2
Exemple de pre-incrementation
var i = 2;var j = ++i;console.log(i); // affiche 3console.log(j); // affiche 3
H & H: Research and Training 31 / 143
![Page 49: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/49.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Pour permuter le contenu de deux variables, on peut utiliser ladecomposition
a = 2;b = 0;[a, b] = [b, a];
Pour evaluer une expression arithmetique exprimee sous formede chaıne de caracteres (EvalError si l’expression est malformulee)
var str = "2 + 5 * 3";console.log(eval(str));// affiche 17
H & H: Research and Training 32 / 143
![Page 50: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/50.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScript
Pour permuter le contenu de deux variables, on peut utiliser ladecomposition
a = 2;b = 0;[a, b] = [b, a];
Pour evaluer une expression arithmetique exprimee sous formede chaıne de caracteres (EvalError si l’expression est malformulee)
var str = "2 + 5 * 3";console.log(eval(str));// affiche 17
H & H: Research and Training 32 / 143
![Page 51: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/51.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScriptL’operateur unaire + peut etre utilise pour convertir en nombre
console.log(typeof (+"3"));// affiche number
console.log(+true);// affiche 1
L’operateur unaire - peut etre utilise pour la negation ou la conversion ennombre
console.log(typeof (-"-3"));// affiche nombre
console.log(-"-3");// affiche 3
console.log(-true);// affiche -1
H & H: Research and Training 33 / 143
![Page 52: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/52.jpg)
© Achref EL MOUELHI ©
Quelques operations sur les variables
JavaScriptL’operateur unaire + peut etre utilise pour convertir en nombre
console.log(typeof (+"3"));// affiche number
console.log(+true);// affiche 1
L’operateur unaire - peut etre utilise pour la negation ou la conversion ennombre
console.log(typeof (-"-3"));// affiche nombre
console.log(-"-3");// affiche 3
console.log(-true);// affiche -1
H & H: Research and Training 33 / 143
![Page 53: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/53.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Methodes utiles pour les chaınes de caracteres
length : la longueur de la chaıne
toUpperCase() : pour convertir une chaıne de caracteres enmajuscule
toLowerCase() : pour convertir une chaıne de caracteres enminuscule
trim() : pour supprimer les espaces au debut et a la fin
substr() : pour extraire une sous-chaıne de caracteres
indexOf() : pour retourner la position d’une sous-chaıne dansune chaıne, -1 sinon.
...
H & H: Research and Training 34 / 143
![Page 54: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/54.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Pour connaıtre la longueur d’une chaıne
var str = "bonjour";console.log(str.length);// affiche 7
Pour supprimer les espaces au debut et a la fin de la chaıne
var str = " bon jour ";console.log(str.length);// affiche 12
var sansEspace = str.trim();console.log(sansEspace.length);// affiche 8
H & H: Research and Training 35 / 143
![Page 55: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/55.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Pour connaıtre la longueur d’une chaıne
var str = "bonjour";console.log(str.length);// affiche 7
Pour supprimer les espaces au debut et a la fin de la chaıne
var str = " bon jour ";console.log(str.length);// affiche 12
var sansEspace = str.trim();console.log(sansEspace.length);// affiche 8
H & H: Research and Training 35 / 143
![Page 56: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/56.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScriptPour extraire une sous-chaıne a partir de l’indice 3 jusqu’a la fin
var str = "bonjour";console.log(str.substr(3));// affiche jour
On peut aussi preciser le nombre de caractere a extraire
var str = "bonjour";console.log(str.substr(3,2));// affiche jo
Pour extraire les trois derniers caracteres, on utilise une valeur negative
var str = "bonjour";console.log(str.substr(-3)); //eq substr(4) avec 4 = length - 3// affiche our
H & H: Research and Training 36 / 143
![Page 57: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/57.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScriptPour extraire une sous-chaıne a partir de l’indice 3 jusqu’a la fin
var str = "bonjour";console.log(str.substr(3));// affiche jour
On peut aussi preciser le nombre de caractere a extraire
var str = "bonjour";console.log(str.substr(3,2));// affiche jo
Pour extraire les trois derniers caracteres, on utilise une valeur negative
var str = "bonjour";console.log(str.substr(-3)); //eq substr(4) avec 4 = length - 3// affiche our
H & H: Research and Training 36 / 143
![Page 58: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/58.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScriptPour extraire une sous-chaıne a partir de l’indice 3 jusqu’a la fin
var str = "bonjour";console.log(str.substr(3));// affiche jour
On peut aussi preciser le nombre de caractere a extraire
var str = "bonjour";console.log(str.substr(3,2));// affiche jo
Pour extraire les trois derniers caracteres, on utilise une valeur negative
var str = "bonjour";console.log(str.substr(-3)); //eq substr(4) avec 4 = length - 3// affiche our
H & H: Research and Training 36 / 143
![Page 59: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/59.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Ne pas confondre substr() avec substring() qui elle prendcomme parametre l’indice de debut et l’indice de fin (non-inclus)
var str = "bonjour";console.log(str.substring(1,3));// affiche on
H & H: Research and Training 37 / 143
![Page 60: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/60.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Pour determiner l’indice d’une sous chaıne dans une chaıne decaractere
var str = "bonjour";console.log(str.indexOf("jour"));// affiche 3
S’il n’y a aucune occurrence, elle retourne -1
var str = "bonjour";console.log(str.indexOf("soir"));// affiche -1
H & H: Research and Training 38 / 143
![Page 61: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/61.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Pour determiner l’indice d’une sous chaıne dans une chaıne decaractere
var str = "bonjour";console.log(str.indexOf("jour"));// affiche 3
S’il n’y a aucune occurrence, elle retourne -1
var str = "bonjour";console.log(str.indexOf("soir"));// affiche -1
H & H: Research and Training 38 / 143
![Page 62: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/62.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Pour acceder a un caractere d’indice i dans une chaıne decaracteres
// soit directement via l’indiceconsole.log(str[i]);
// soit en faisant l’extraction d’une sous chaine decaractere
console.log(str.substr(i,1));
// soit avec la methode d’extraction de caractereconsole.log(str.charAt(i));
H & H: Research and Training 39 / 143
![Page 63: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/63.jpg)
© Achref EL MOUELHI ©
Methodes utiles pour les chaınes de caracteres
JavaScript
Remarque
Appeler une de ces methodes a partir d’une variable ayant la valeurundefined genere une erreur nommee TypeError.
H & H: Research and Training 40 / 143
![Page 64: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/64.jpg)
© Achref EL MOUELHI ©
Conditions et boucles if
JavaScript
Executer si une condition est vraie
if (condition){
...}
Exemple
var x = 3;if (x > 0){
console.log(x + " est strictement positif");}
H & H: Research and Training 41 / 143
![Page 65: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/65.jpg)
© Achref EL MOUELHI ©
Conditions et boucles if
JavaScript
Executer si une condition est vraie
if (condition){
...}
Exemple
var x = 3;if (x > 0){
console.log(x + " est strictement positif");}
H & H: Research and Training 41 / 143
![Page 66: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/66.jpg)
© Achref EL MOUELHI ©
Conditions et boucles if ... else
JavaScriptExecuter un premier bloc si une condition est vraie, un deuxieme sinon (le bloc else
if (condition1) {...
}else {...
}
Exemple
var x = 3;if (x > 0){
console.log(x + " est strictement positif");}else{console.log(x + " est negatif ou nul");
}
H & H: Research and Training 42 / 143
![Page 67: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/67.jpg)
© Achref EL MOUELHI ©
Conditions et boucles if ... else
JavaScriptExecuter un premier bloc si une condition est vraie, un deuxieme sinon (le bloc else
if (condition1) {...
}else {...
}
Exemple
var x = 3;if (x > 0){
console.log(x + " est strictement positif");}else{console.log(x + " est negatif ou nul");
}
H & H: Research and Training 42 / 143
![Page 68: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/68.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
On peut enchaıner les conditions avec else if (et avoir untroisieme bloc voire ... un nieme)
if (condition1){
...}else if (condition2){
...}...else{
...}
H & H: Research and Training 43 / 143
![Page 69: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/69.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
Exemple
var x = -3;if (x > 0){console.log(x + " est strictement positif");
}else if (x < 0){console.log(x + " est strictement negatif");
}else{console.log(x + " est nul");
}
H & H: Research and Training 44 / 143
![Page 70: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/70.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
Operateurs logiques
&& : ET
|| : OU
! : NON
ˆ : XOR
Tester plusieurs conditions (en utilisant des operateurs logiques)
if (condition1 && !condition2 || condition3) {...}
Pour les conditions, on utilise les operateurs de comparaison.
H & H: Research and Training 45 / 143
![Page 71: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/71.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
Operateurs logiques
&& : ET
|| : OU
! : NON
ˆ : XOR
Tester plusieurs conditions (en utilisant des operateurs logiques)
if (condition1 && !condition2 || condition3) {...}
Pour les conditions, on utilise les operateurs de comparaison.
H & H: Research and Training 45 / 143
![Page 72: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/72.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
Operateurs logiques
&& : ET
|| : OU
! : NON
ˆ : XOR
Tester plusieurs conditions (en utilisant des operateurs logiques)
if (condition1 && !condition2 || condition3) {...}
Pour les conditions, on utilise les operateurs de comparaison.
H & H: Research and Training 45 / 143
![Page 73: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/73.jpg)
© Achref EL MOUELHI ©
Conditions et boucles else if
JavaScript
Operateurs de comparaison
== : pour tester l’egalite des valeurs
!= : pour tester l’inegalite des valeurs
=== : pour tester l’egalite des valeurs et des types
!== : pour tester l’inegalite des valeurs ou des types
> : superieur a
< : inferieur a
>= : superieur ou egal a
<= : inferieur ou egal a
H & H: Research and Training 46 / 143
![Page 74: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/74.jpg)
© Achref EL MOUELHI ©
Conditions et boucles switch
JavaScriptStructure conditionnelle switch : syntaxe
switch (nomVariable) {case constante-1:groupe-instructions-1;break;
case constante-2:groupe-instructions-2;break;
...case constante-N:groupe-instructions-N;break;
default:groupe-instructions-par-defaut;
}
H & H: Research and Training 47 / 143
![Page 75: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/75.jpg)
© Achref EL MOUELHI ©
Conditions et boucles switch
JavaScript
Remarques
Le switch permet seulement de tester l’egalite
Le break permet de quitter le switch une fois le bloc de caseest verifier
Il est possible de regrouper plusieurs case
Le bloc default est facultatif, il sera executer si la valeur de lavariable ne correspond a aucune constante de case
H & H: Research and Training 48 / 143
![Page 76: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/76.jpg)
© Achref EL MOUELHI ©
Conditions et boucles switch
JavaScript
Structure conditionnelle avec switch
var x = 5;switch (x) {case 1:alert(’un’);break;
case 2:alert(’deux’);break;
case 3:alert(’trois’);break;
default:alert("autre");
}
H & H: Research and Training 49 / 143
![Page 77: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/77.jpg)
© Achref EL MOUELHI ©
Conditions et boucles switch
JavaScriptUn multi-case pour un seul traitement
var x = 5;switch (x) {case 1:case 2:
alert(’un ou deux’);break;
case 3:alert(’trois’);break;
case 4:case 5:
alert(’quatre ou cinq’);break;
default:alert("autre");
}
H & H: Research and Training 50 / 143
![Page 78: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/78.jpg)
© Achref EL MOUELHI ©
Conditions et boucles switch
JavaScript
La variable dans switch peut etre
un nombre
un caractere
une chaıne de caractere (contrairement aux C++, C...)
H & H: Research and Training 51 / 143
![Page 79: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/79.jpg)
© Achref EL MOUELHI ©
Conditions et boucles Expression ternaire
JavaScriptConsiderons l’exemple suivant
var nbr = prompt(’Saisir un nombre’);if (nbr % 2 == 0) {alert ("pair);
}else {alert ("imapir");
}
Simplifions l’ecriture avec l’expression ternaire
var nbr = prompt(’Saisir un nombre’);nbr % 2 == 0 ? alert("pair") : alert(’impair’);
Ou
alert(nbr % 2 == 0 ? "pair" : ’impair’);
H & H: Research and Training 52 / 143
![Page 80: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/80.jpg)
© Achref EL MOUELHI ©
Conditions et boucles Expression ternaire
JavaScriptConsiderons l’exemple suivant
var nbr = prompt(’Saisir un nombre’);if (nbr % 2 == 0) {alert ("pair);
}else {alert ("imapir");
}
Simplifions l’ecriture avec l’expression ternaire
var nbr = prompt(’Saisir un nombre’);nbr % 2 == 0 ? alert("pair") : alert(’impair’);
Ou
alert(nbr % 2 == 0 ? "pair" : ’impair’);
H & H: Research and Training 52 / 143
![Page 81: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/81.jpg)
© Achref EL MOUELHI ©
Conditions et boucles Expression ternaire
JavaScriptConsiderons l’exemple suivant
var nbr = prompt(’Saisir un nombre’);if (nbr % 2 == 0) {alert ("pair);
}else {alert ("imapir");
}
Simplifions l’ecriture avec l’expression ternaire
var nbr = prompt(’Saisir un nombre’);nbr % 2 == 0 ? alert("pair") : alert(’impair’);
Ou
alert(nbr % 2 == 0 ? "pair" : ’impair’);
H & H: Research and Training 52 / 143
![Page 82: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/82.jpg)
© Achref EL MOUELHI ©
Conditions et boucles while
JavaScript
Boucle while : a chaque iteration on teste si la condition estvraie avant d’acceder aux traitements
while (condition[s]) {...
}
Attention aux boucles infinies, verifier que la condition d’arret sera bienatteinte apres un certain nombre d’iterations.
H & H: Research and Training 53 / 143
![Page 83: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/83.jpg)
© Achref EL MOUELHI ©
Conditions et boucles while
JavaScript
Boucle while : a chaque iteration on teste si la condition estvraie avant d’acceder aux traitements
while (condition[s]) {...
}
Attention aux boucles infinies, verifier que la condition d’arret sera bienatteinte apres un certain nombre d’iterations.
H & H: Research and Training 53 / 143
![Page 84: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/84.jpg)
© Achref EL MOUELHI ©
Conditions et boucles while
JavaScript
Exemple
var i = 0;while (i < 5) {console.log(i);i++;
}
Le resultat est
01234
H & H: Research and Training 54 / 143
![Page 85: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/85.jpg)
© Achref EL MOUELHI ©
Conditions et boucles while
JavaScript
Exemple
var i = 0;while (i < 5) {console.log(i);i++;
}
Le resultat est
01234
H & H: Research and Training 54 / 143
![Page 86: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/86.jpg)
© Achref EL MOUELHI ©
Conditions et boucles do ... while
JavaScript
La Boucle do ... while execute le bloc au moins une fois ensuiteelle verifie la condition
do {...
}while (condition[s]);
Attention aux boucles infinies, verifier que la condition d’arret sera bienatteinte apres un certain nombre d’iterations.
H & H: Research and Training 55 / 143
![Page 87: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/87.jpg)
© Achref EL MOUELHI ©
Conditions et boucles do ... while
JavaScript
La Boucle do ... while execute le bloc au moins une fois ensuiteelle verifie la condition
do {...
}while (condition[s]);
Attention aux boucles infinies, verifier que la condition d’arret sera bienatteinte apres un certain nombre d’iterations.
H & H: Research and Training 55 / 143
![Page 88: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/88.jpg)
© Achref EL MOUELHI ©
Conditions et boucles do ... while
JavaScript
Exemple
var i = 0;do {console.log(i);i++;
} while (i < 5);
Le resultat est
01234
H & H: Research and Training 56 / 143
![Page 89: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/89.jpg)
© Achref EL MOUELHI ©
Conditions et boucles do ... while
JavaScript
Exemple
var i = 0;do {console.log(i);i++;
} while (i < 5);
Le resultat est
01234
H & H: Research and Training 56 / 143
![Page 90: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/90.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Boucle for
for (initialisation; condition[s]; incrementation) {...
}
Attention aux boucles infinies si vous modifiez la valeur du compteur al’interieur de la boucle.
H & H: Research and Training 57 / 143
![Page 91: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/91.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Boucle for
for (initialisation; condition[s]; incrementation) {...
}
Attention aux boucles infinies si vous modifiez la valeur du compteur al’interieur de la boucle.
H & H: Research and Training 57 / 143
![Page 92: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/92.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Exemple
for (var i = 0; i < 5; i++) {console.log(i);
}
Le resultat est
01234
H & H: Research and Training 58 / 143
![Page 93: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/93.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Exemple
for (var i = 0; i < 5; i++) {console.log(i);
}
Le resultat est
01234
H & H: Research and Training 58 / 143
![Page 94: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/94.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Exercice
Ecrire un code JavaScript qui permet d’afficher les nombres pairs compris entre 0 et 10.
Premiere solution
for (var i = 0; i < 10; i++) {if (i % 2 == 0) {
console.log(i);}
}
Deuxieme solution
for (var i = 0; i < 10; i += 2) {console.log(i);
}
H & H: Research and Training 59 / 143
![Page 95: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/95.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Exercice
Ecrire un code JavaScript qui permet d’afficher les nombres pairs compris entre 0 et 10.
Premiere solution
for (var i = 0; i < 10; i++) {if (i % 2 == 0) {
console.log(i);}
}
Deuxieme solution
for (var i = 0; i < 10; i += 2) {console.log(i);
}
H & H: Research and Training 59 / 143
![Page 96: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/96.jpg)
© Achref EL MOUELHI ©
Conditions et boucles for
JavaScript
Exercice
Ecrire un code JavaScript qui permet d’afficher les nombres pairs compris entre 0 et 10.
Premiere solution
for (var i = 0; i < 10; i++) {if (i % 2 == 0) {
console.log(i);}
}
Deuxieme solution
for (var i = 0; i < 10; i += 2) {console.log(i);
}
H & H: Research and Training 59 / 143
![Page 97: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/97.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Tableau (array)
une variable pouvant avoir simultanement plusieurs valeurs
l’acces a chaque valeur s’effectue via son indice et avecl’operateur [] : [ indice ]
la premiere valeur (on dit aussi element) du tableau est d’indice 0.
les valeurs peuvent avoir plusieurs types differents
H & H: Research and Training 60 / 143
![Page 98: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/98.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Declaration
var tab = new Array(value1, value2,... valueN);
Le raccourci
var tab = [value1, value2,... valueN];
Acces a l’element du tableau d’indice i
tab[i]
H & H: Research and Training 61 / 143
![Page 99: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/99.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Declaration
var tab = new Array(value1, value2,... valueN);
Le raccourci
var tab = [value1, value2,... valueN];
Acces a l’element du tableau d’indice i
tab[i]
H & H: Research and Training 61 / 143
![Page 100: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/100.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Declaration
var tab = new Array(value1, value2,... valueN);
Le raccourci
var tab = [value1, value2,... valueN];
Acces a l’element du tableau d’indice i
tab[i]
H & H: Research and Training 61 / 143
![Page 101: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/101.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScriptExemple
var tab = [2, 3, 5];
Pour connaıtre la taille du tableau (nombre d’element)
console.log(tab.length);
Pour afficher le premier element du tableau
tab[0]
Pour afficher le dernier element du tableau
tab[tab.length - 1]
H & H: Research and Training 62 / 143
![Page 102: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/102.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScriptExemple
var tab = [2, 3, 5];
Pour connaıtre la taille du tableau (nombre d’element)
console.log(tab.length);
Pour afficher le premier element du tableau
tab[0]
Pour afficher le dernier element du tableau
tab[tab.length - 1]
H & H: Research and Training 62 / 143
![Page 103: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/103.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScriptExemple
var tab = [2, 3, 5];
Pour connaıtre la taille du tableau (nombre d’element)
console.log(tab.length);
Pour afficher le premier element du tableau
tab[0]
Pour afficher le dernier element du tableau
tab[tab.length - 1]
H & H: Research and Training 62 / 143
![Page 104: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/104.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScriptExemple
var tab = [2, 3, 5];
Pour connaıtre la taille du tableau (nombre d’element)
console.log(tab.length);
Pour afficher le premier element du tableau
tab[0]
Pour afficher le dernier element du tableau
tab[tab.length - 1]
H & H: Research and Training 62 / 143
![Page 105: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/105.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Pour ajouter une nouvelle valeur (par exemple 7) au tableau
tab[tab.length] = 7;
Ou tout simplement
tab.push(7);
H & H: Research and Training 63 / 143
![Page 106: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/106.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Pour ajouter une nouvelle valeur (par exemple 7) au tableau
tab[tab.length] = 7;
Ou tout simplement
tab.push(7);
H & H: Research and Training 63 / 143
![Page 107: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/107.jpg)
© Achref EL MOUELHI ©
Tableaux
Pour afficher un tableau
console.log(tab);
Pour parcourir et afficher un tableau
for (var i = 0; i < tab.length; i++) {console.log(tab[i]);
}
On peut aussi utiliser la version simplifiee de for
for(var elt of tab) {console.log(elt);
}
Et pour recuperer l’indice
for (const [index, value] of tab.entries()) {console.log(index, value);
}
H & H: Research and Training 64 / 143
![Page 108: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/108.jpg)
© Achref EL MOUELHI ©
Tableaux
Pour afficher un tableau
console.log(tab);
Pour parcourir et afficher un tableau
for (var i = 0; i < tab.length; i++) {console.log(tab[i]);
}
On peut aussi utiliser la version simplifiee de for
for(var elt of tab) {console.log(elt);
}
Et pour recuperer l’indice
for (const [index, value] of tab.entries()) {console.log(index, value);
}
H & H: Research and Training 64 / 143
![Page 109: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/109.jpg)
© Achref EL MOUELHI ©
Tableaux
Pour afficher un tableau
console.log(tab);
Pour parcourir et afficher un tableau
for (var i = 0; i < tab.length; i++) {console.log(tab[i]);
}
On peut aussi utiliser la version simplifiee de for
for(var elt of tab) {console.log(elt);
}
Et pour recuperer l’indice
for (const [index, value] of tab.entries()) {console.log(index, value);
}
H & H: Research and Training 64 / 143
![Page 110: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/110.jpg)
© Achref EL MOUELHI ©
Tableaux
Pour afficher un tableau
console.log(tab);
Pour parcourir et afficher un tableau
for (var i = 0; i < tab.length; i++) {console.log(tab[i]);
}
On peut aussi utiliser la version simplifiee de for
for(var elt of tab) {console.log(elt);
}
Et pour recuperer l’indice
for (const [index, value] of tab.entries()) {console.log(index, value);
}
H & H: Research and Training 64 / 143
![Page 111: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/111.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Operations sur les tableaux
push() : ajoute un element passe en parametre au tableau
pop() : supprime le dernier element du tableau
shift() : supprime le premier element du tableau
indexOf() : retourne la position de l’element, passe en parametre, dans le tableau, -1sinon.
reverse() : inverse l’ordre des elements du tableau
sort() : trie un tableau
splice() : permet d’extraire, ajouter ou supprimer un ou plusieurs elements (selon lesparametres, voir slide suivante)
includes() : retourne true si la valeur passee en parametre est dans un tableau,false sinon.
...
H & H: Research and Training 65 / 143
![Page 112: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/112.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Utilisons splice pour supprimer un seul element a partir de la position2
var sports = [ "foot", "tennis", "basket", "volley" ];tab = sports.splice(2, 1);
for (var elt of sports) {console.log(elt);
}// affiche foot, tennis, volley
console.log(tab);// affiche basket
H & H: Research and Training 66 / 143
![Page 113: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/113.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Utilisons splice pour ajouter les deux sports rugby et natation a laposition 2
var sports = [ "foot", "tennis", "basket", "volley" ];tab = sports.splice(2, 0, "rugby", "natation");
for (var elt of sports) {console.log(elt);
}// affiche foot, tennis, rugby, natation, basket, volley
console.log(tab);// n’affiche rien
Aucun element supprime car le deuxieme parametre = 0
H & H: Research and Training 67 / 143
![Page 114: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/114.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Utilisons splice pour ajouter les deux sports rugby et natation a laposition 2
var sports = [ "foot", "tennis", "basket", "volley" ];tab = sports.splice(2, 0, "rugby", "natation");
for (var elt of sports) {console.log(elt);
}// affiche foot, tennis, rugby, natation, basket, volley
console.log(tab);// n’affiche rien
Aucun element supprime car le deuxieme parametre = 0
H & H: Research and Training 67 / 143
![Page 115: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/115.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
splice peut etre utilisee pour ajouter et supprimer a la fois
var sports = [ "foot", "tennis", "basket", "volley" ];tab = sports.splice(2, 1, "rugby", "natation");
for (var elt of sports) {console.log(elt);
}// affiche foot, tennis, rugby, natation, volley
console.log(tab);// affiche basket
Un seul element supprime car le deuxieme parametre = 1.
H & H: Research and Training 68 / 143
![Page 116: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/116.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
splice peut etre utilisee pour ajouter et supprimer a la fois
var sports = [ "foot", "tennis", "basket", "volley" ];tab = sports.splice(2, 1, "rugby", "natation");
for (var elt of sports) {console.log(elt);
}// affiche foot, tennis, rugby, natation, volley
console.log(tab);// affiche basket
Un seul element supprime car le deuxieme parametre = 1.
H & H: Research and Training 68 / 143
![Page 117: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/117.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
A ne pas confondre avec slice qui permet d’extraire unsous-tableau sans modifier le tableau d’origine
var sports = [ "foot", "tennis", "basket", "volley"];
tab = sports.slice(1, 3);
for(var elt of sports) {console.log(elt);
}// affiche foot, tennis, basket, volley
console.log(tab);// affiche tennis, basket
H & H: Research and Training 69 / 143
![Page 118: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/118.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Exercice
Ecrire un code JavaScript qui
1 permet a l’utilisateur de saisir un sport
2 supprime le sport saisi s’il est deja dans le tableau sports
3 ajoute le sport saisi s’il n’est pas dans le tableau sports
H & H: Research and Training 70 / 143
![Page 119: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/119.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Il est possible de preciser la taille d’un tableau et d’initialiser sesvaleurs avec la methode fill
var tab = new Array(3).fill(0);console.log(tab);// affiche [ 0, 0, 0 ]
On peut aussi utiliser fill pour modifier les valeurs d’une partiedu tableau
var tab = [0, 1, 2, 3, 4, 5, 6, 7, 8];tab.fill(9, 2, 5);console.log(tab);// affiche [ 0, 1, 9, 9, 9, 5, 6, 7, 8 ]
H & H: Research and Training 71 / 143
![Page 120: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/120.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Il est possible de preciser la taille d’un tableau et d’initialiser sesvaleurs avec la methode fill
var tab = new Array(3).fill(0);console.log(tab);// affiche [ 0, 0, 0 ]
On peut aussi utiliser fill pour modifier les valeurs d’une partiedu tableau
var tab = [0, 1, 2, 3, 4, 5, 6, 7, 8];tab.fill(9, 2, 5);console.log(tab);// affiche [ 0, 1, 9, 9, 9, 5, 6, 7, 8 ]
H & H: Research and Training 71 / 143
![Page 121: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/121.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Autres operations sur les tableaux (ES5)
forEach() : pour parcourir un tableau
map() : pour appliquer une fonction sur les elements d’un tableau
filter() : pour filtrer les elements d’un tableau selon un criteredefini sous forme d’une fonction anonyme ou flechee
reduce() : pour reduire tous les elements d’un tableau en unseul selon une regle definie dans une fonction anonyme ouflechee
...
H & H: Research and Training 72 / 143
![Page 122: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/122.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Exemple avec map, filter, forEach
var tab = [2, 3, 5];tab.map(x => x + 3)
.filter(x => x > 5)
.forEach(function(a,b){
console.log(a-3);}
);// affiche 3 et 5
On peut permuter map et filter selon le besoin.On peut aussi remplacer les fonctions flechee par des fonctionsanonymes
H & H: Research and Training 73 / 143
![Page 123: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/123.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Exemple avec map, filter, forEach
var tab = [2, 3, 5];tab.map(x => x + 3)
.filter(x => x > 5)
.forEach(function(a,b){
console.log(a-3);}
);// affiche 3 et 5
On peut permuter map et filter selon le besoin.
On peut aussi remplacer les fonctions flechee par des fonctionsanonymes
H & H: Research and Training 73 / 143
![Page 124: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/124.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Exemple avec map, filter, forEach
var tab = [2, 3, 5];tab.map(x => x + 3)
.filter(x => x > 5)
.forEach(function(a,b){
console.log(a-3);}
);// affiche 3 et 5
On peut permuter map et filter selon le besoin.On peut aussi remplacer les fonctions flechee par des fonctionsanonymes
H & H: Research and Training 73 / 143
![Page 125: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/125.jpg)
© Achref EL MOUELHI ©
Tableaux
JavaScript
Exemple avec reduce : permet de reduire les elements d’untableau en une seule valeur
var tab =[2, 3, 5];var somme = tab.map(x => x + 3)
.filter(x => x > 5)
.reduce(function(sum, elem){return sum + elem;
});
console.log(somme);// affiche 14
H & H: Research and Training 74 / 143
![Page 126: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/126.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction
function nomFonction ([les arguments]){les instructions de la fonction
}
Exemple
function somme (a, b) {return a + b;
}
Appeler une fonction
var resultat = somme (1, 3);
H & H: Research and Training 75 / 143
![Page 127: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/127.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction
function nomFonction ([les arguments]){les instructions de la fonction
}
Exemple
function somme (a, b) {return a + b;
}
Appeler une fonction
var resultat = somme (1, 3);
H & H: Research and Training 75 / 143
![Page 128: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/128.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction
function nomFonction ([les arguments]){les instructions de la fonction
}
Exemple
function somme (a, b) {return a + b;
}
Appeler une fonction
var resultat = somme (1, 3);
H & H: Research and Training 75 / 143
![Page 129: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/129.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction anonyme et l’affecter a‘ une variable
var nomVariable = function ([les arguments]) {les instructions de la fonction
}
Exemple
var somme2 = function (a, b){return a + b;
}
Appeler une fonction anonyme
var resultat2 = somme2 (1, 3);
H & H: Research and Training 76 / 143
![Page 130: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/130.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction anonyme et l’affecter a‘ une variable
var nomVariable = function ([les arguments]) {les instructions de la fonction
}
Exemple
var somme2 = function (a, b){return a + b;
}
Appeler une fonction anonyme
var resultat2 = somme2 (1, 3);
H & H: Research and Training 76 / 143
![Page 131: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/131.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction anonyme et l’affecter a‘ une variable
var nomVariable = function ([les arguments]) {les instructions de la fonction
}
Exemple
var somme2 = function (a, b){return a + b;
}
Appeler une fonction anonyme
var resultat2 = somme2 (1, 3);
H & H: Research and Training 76 / 143
![Page 132: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/132.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction en utilisant un constructeur de fonction
var nomFunction = new Function (["param1", ... , "paramN",] "instructions");
Exemple
var somme4 = new Function ("a", "b", "return a + b");
Appeler une fonction anonyme
var resultat4 = somme4 (1, 3);
H & H: Research and Training 77 / 143
![Page 133: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/133.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction en utilisant un constructeur de fonction
var nomFunction = new Function (["param1", ... , "paramN",] "instructions");
Exemple
var somme4 = new Function ("a", "b", "return a + b");
Appeler une fonction anonyme
var resultat4 = somme4 (1, 3);
H & H: Research and Training 77 / 143
![Page 134: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/134.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Declarer une fonction en utilisant un constructeur de fonction
var nomFunction = new Function (["param1", ... , "paramN",] "instructions");
Exemple
var somme4 = new Function ("a", "b", "return a + b");
Appeler une fonction anonyme
var resultat4 = somme4 (1, 3);
H & H: Research and Training 77 / 143
![Page 135: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/135.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Et si on appelle la fonction somme sans passer de parametres
console.log(somme());
Le resultat
NaN
On peut affecter une valeur par defaut aux parametres
function somme (a=0, b=0) {return a + b;
}
H & H: Research and Training 78 / 143
![Page 136: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/136.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Et si on appelle la fonction somme sans passer de parametres
console.log(somme());
Le resultat
NaN
On peut affecter une valeur par defaut aux parametres
function somme (a=0, b=0) {return a + b;
}
H & H: Research and Training 78 / 143
![Page 137: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/137.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScript
Et si on appelle la fonction somme sans passer de parametres
console.log(somme());
Le resultat
NaN
On peut affecter une valeur par defaut aux parametres
function somme (a=0, b=0) {return a + b;
}
H & H: Research and Training 78 / 143
![Page 138: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/138.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScriptEt si on veut que la fonction somme retourne la somme quel quesoit le nombre de parametres
function somme () {result = 0;for (var i = 0; i < arguments.length ; i++) {result += arguments[i];
}return result;
}
Tous ces appels sont corrects
console.log(somme(2, 3, 5));console.log(somme(2, 3));console.log(somme(2, 3, 5, 7));console.log(somme(2));
H & H: Research and Training 79 / 143
![Page 139: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/139.jpg)
© Achref EL MOUELHI ©
Fonctions
JavaScriptEt si on veut que la fonction somme retourne la somme quel quesoit le nombre de parametres
function somme () {result = 0;for (var i = 0; i < arguments.length ; i++) {result += arguments[i];
}return result;
}
Tous ces appels sont corrects
console.log(somme(2, 3, 5));console.log(somme(2, 3));console.log(somme(2, 3, 5, 7));console.log(somme(2));
H & H: Research and Training 79 / 143
![Page 140: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/140.jpg)
© Achref EL MOUELHI ©
Fonctions Fonction de retour (callback)
JavaScript
Fonction de retour (callback)
fonction appelee comme un parametre d’une deuxieme fonction
tres utilisee en JavaScript (jQuery et nodeJS) avec les fonctionsasynchrones
Considerons les deux fonctions suivantes
function somme(a, b) {return a + b;
}function produit(a, b) {return a * b;
}
H & H: Research and Training 80 / 143
![Page 141: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/141.jpg)
© Achref EL MOUELHI ©
Fonctions Fonction de retour (callback)
JavaScript
Fonction de retour (callback)
fonction appelee comme un parametre d’une deuxieme fonction
tres utilisee en JavaScript (jQuery et nodeJS) avec les fonctionsasynchrones
Considerons les deux fonctions suivantes
function somme(a, b) {return a + b;
}function produit(a, b) {return a * b;
}
H & H: Research and Training 80 / 143
![Page 142: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/142.jpg)
© Achref EL MOUELHI ©
Fonctions Fonction de retour (callback)
JavaScript
Utilisons les fonctions precedentes comme callback d’unefonction operation()
function operation(a, b, fonction) {console.log (fonction(a, b));
}
// appeler la fonction operationoperation (3, 5, somme);// affiche 8
H & H: Research and Training 81 / 143
![Page 143: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/143.jpg)
© Achref EL MOUELHI ©
Fonctions Fonction de retour (callback)
JavaScript
Exercice
Modifier la fonction operation pour qu’elle puisse accepter deuxfonctions callback ensuite retourner le resultat de la compositiondes deux.
Par exemple :operation (2, 3 , 6, somme, produit) retourne 30 = (2+ 3) * 6
H & H: Research and Training 82 / 143
![Page 144: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/144.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScriptLa fonction setTimeout accepte deux parametres
le premier : une fonction callback
le deuxieme : une duree (en millisecondes) qui precede l’execution de la fonction callback
Declarons une fonction qui affiche bonjour
function direBonjour() {alert("Bonjour");
}
Utilisons cette fonction comme callback dans setTimeout
function direBonjourApresXSecondes(x) {setTimeout(direBonjour, x * 1000);
}
Appelons direBonjourApresXSecondes et bonjour sera affiche apres
direBonjourApresXSecondes(5);
H & H: Research and Training 83 / 143
![Page 145: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/145.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScriptLa fonction setTimeout accepte deux parametres
le premier : une fonction callback
le deuxieme : une duree (en millisecondes) qui precede l’execution de la fonction callback
Declarons une fonction qui affiche bonjour
function direBonjour() {alert("Bonjour");
}
Utilisons cette fonction comme callback dans setTimeout
function direBonjourApresXSecondes(x) {setTimeout(direBonjour, x * 1000);
}
Appelons direBonjourApresXSecondes et bonjour sera affiche apres
direBonjourApresXSecondes(5);
H & H: Research and Training 83 / 143
![Page 146: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/146.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScriptLa fonction setTimeout accepte deux parametres
le premier : une fonction callback
le deuxieme : une duree (en millisecondes) qui precede l’execution de la fonction callback
Declarons une fonction qui affiche bonjour
function direBonjour() {alert("Bonjour");
}
Utilisons cette fonction comme callback dans setTimeout
function direBonjourApresXSecondes(x) {setTimeout(direBonjour, x * 1000);
}
Appelons direBonjourApresXSecondes et bonjour sera affiche apres
direBonjourApresXSecondes(5);
H & H: Research and Training 83 / 143
![Page 147: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/147.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScriptLa fonction setTimeout accepte deux parametres
le premier : une fonction callback
le deuxieme : une duree (en millisecondes) qui precede l’execution de la fonction callback
Declarons une fonction qui affiche bonjour
function direBonjour() {alert("Bonjour");
}
Utilisons cette fonction comme callback dans setTimeout
function direBonjourApresXSecondes(x) {setTimeout(direBonjour, x * 1000);
}
Appelons direBonjourApresXSecondes et bonjour sera affiche apres
direBonjourApresXSecondes(5);
H & H: Research and Training 83 / 143
![Page 148: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/148.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Il est aussi possible d’utiliser une fonction anonyme
function direBonjourApresXSecondes(x) {setTimeout(function() {alert("Bonjour");
},x * 1000);
}direBonjourApresXSecondes(5);
La fonction setTimeout() ne permet pas de repeter l’affichagetoutes les x secondes.
H & H: Research and Training 84 / 143
![Page 149: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/149.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Il est aussi possible d’utiliser une fonction anonyme
function direBonjourApresXSecondes(x) {setTimeout(function() {alert("Bonjour");
},x * 1000);
}direBonjourApresXSecondes(5);
La fonction setTimeout() ne permet pas de repeter l’affichagetoutes les x secondes.
H & H: Research and Training 84 / 143
![Page 150: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/150.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Il est aussi d’annuler l’execution de la fonction callback desetTimeout avec clearTimeout si cette derniere est appeleeavant la fin de la duree de setTimeout
var timeout;function direBonjourApresXSecondes(x) {timeout = setTimeout(function(){alert("Bonjour");
},x * 1000);
}
direBonjourApresXSecondes(5);
clearTimeout(timeout);// Bonjour ne sera jamais affiche
H & H: Research and Training 85 / 143
![Page 151: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/151.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Pour afficher un message toutes les X secondes, on peut utilisersetInterval qui a la meme signature que setTimeout
function direBonjourToutesXSecondes(x) {setInterval(direBonjour, x * 1000);
}
function direBonjour() {alert("Bonjour");
}
direBonjourToutesXSecondes(5);
Comme clearTimeout(), il existe une fonction clearInterval().
H & H: Research and Training 86 / 143
![Page 152: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/152.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Pour afficher un message toutes les X secondes, on peut utilisersetInterval qui a la meme signature que setTimeout
function direBonjourToutesXSecondes(x) {setInterval(direBonjour, x * 1000);
}
function direBonjour() {alert("Bonjour");
}
direBonjourToutesXSecondes(5);
Comme clearTimeout(), il existe une fonction clearInterval().
H & H: Research and Training 86 / 143
![Page 153: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/153.jpg)
© Achref EL MOUELHI ©
Fonctions Quelques fonctions connues utilisant le callback
JavaScript
Remarque
Si la fonction callback necessite de parametres, alors il est possible deles preciser apres la duree dans setInterval et setTimeout.
H & H: Research and Training 87 / 143
![Page 154: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/154.jpg)
© Achref EL MOUELHI ©
Fonctions Closure d’une fonction
JavaScriptConsiderons les deux fonctions suivantes
var i = 0;function f() {i++;
}f();console.log(i); // affiche 1function g() {var j = 5;
}g();console.log(j); // genere une erreur
Remarque
Une variable declaree dans une fonction avec le mot-cle var n’a pasune portee globale. Donc, elle est locale.
H & H: Research and Training 88 / 143
![Page 155: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/155.jpg)
© Achref EL MOUELHI ©
Fonctions Closure d’une fonction
JavaScriptConsiderons les deux fonctions suivantes
var i = 0;function f() {i++;
}f();console.log(i); // affiche 1function g() {var j = 5;
}g();console.log(j); // genere une erreur
Remarque
Une variable declaree dans une fonction avec le mot-cle var n’a pasune portee globale. Donc, elle est locale.
H & H: Research and Training 88 / 143
![Page 156: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/156.jpg)
© Achref EL MOUELHI ©
Fonctions Closure d’une fonction
JavaScriptLa closure : declarer une variable locale dans une fonction quiexiste en globale
var i = 0;function f() {var i = 5;i++;console.log(i);}f(); // affiche 6console.log(i); // affiche 0
Remarque
La variable i affichee a la derniere instruction est la variable declareea la premiere ligne.
H & H: Research and Training 89 / 143
![Page 157: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/157.jpg)
© Achref EL MOUELHI ©
Fonctions Closure d’une fonction
JavaScriptLa closure : declarer une variable locale dans une fonction quiexiste en globale
var i = 0;function f() {var i = 5;i++;console.log(i);}f(); // affiche 6console.log(i); // affiche 0
Remarque
La variable i affichee a la derniere instruction est la variable declareea la premiere ligne.
H & H: Research and Training 89 / 143
![Page 158: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/158.jpg)
© Achref EL MOUELHI ©
Objets
JavaScript
Comment sauvegarder toutes ces donnees dans une seule variable?
nom wickprenom john
......
Comment faire?
Les tableaux indexes ne le permettent pas
Les tableaux associatifs ou les objets
H & H: Research and Training 90 / 143
![Page 159: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/159.jpg)
© Achref EL MOUELHI ©
Objets
JavaScript
Comment sauvegarder toutes ces donnees dans une seule variable?
nom wickprenom john
......
Comment faire ?
Les tableaux indexes ne le permettent pas
Les tableaux associatifs ou les objets
H & H: Research and Training 90 / 143
![Page 160: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/160.jpg)
© Achref EL MOUELHI ©
Objets
JavaScript
Objet?
un ensemble de
attributs (variables, champs) : cle + valeur[s]
methodes : fonctions
H & H: Research and Training 91 / 143
![Page 161: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/161.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Creation d’un objet
var obj = {nom: "wick",prenom: "john"
};
Acces a un attribut de l’objet
console.log(obj.nom);console.log(obj["prenom"]);
H & H: Research and Training 92 / 143
![Page 162: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/162.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Creation d’un objet
var obj = {nom: "wick",prenom: "john"
};
Acces a un attribut de l’objet
console.log(obj.nom);console.log(obj["prenom"]);
H & H: Research and Training 92 / 143
![Page 163: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/163.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Un objet est non-iterable avec for ... of
for(var elt of obj)console.log(elt);
Il est iterable avec for ... in
for(var key in obj)console.log(key + " : " + obj[key]);
Un objet peut aussi etre cree ainsi
var obj = new Object();obj.nom = "wick";obj.prenom = "john";
H & H: Research and Training 93 / 143
![Page 164: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/164.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Un objet est non-iterable avec for ... of
for(var elt of obj)console.log(elt);
Il est iterable avec for ... in
for(var key in obj)console.log(key + " : " + obj[key]);
Un objet peut aussi etre cree ainsi
var obj = new Object();obj.nom = "wick";obj.prenom = "john";
H & H: Research and Training 93 / 143
![Page 165: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/165.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Un objet est non-iterable avec for ... of
for(var elt of obj)console.log(elt);
Il est iterable avec for ... in
for(var key in obj)console.log(key + " : " + obj[key]);
Un objet peut aussi etre cree ainsi
var obj = new Object();obj.nom = "wick";obj.prenom = "john";
H & H: Research and Training 93 / 143
![Page 166: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/166.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
Modifier un⇒ modifier l’autre
obj2.nom = "travolta";console.log(obj.nom);// affiche travolta
Ajouter un nouvel attribut a un objet existant
obj2.age = 35;
H & H: Research and Training 94 / 143
![Page 167: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/167.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
Modifier un⇒ modifier l’autre
obj2.nom = "travolta";console.log(obj.nom);// affiche travolta
Ajouter un nouvel attribut a un objet existant
obj2.age = 35;
H & H: Research and Training 94 / 143
![Page 168: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/168.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Copier un objet
var obj2 = obj;
Modifier un⇒ modifier l’autre
obj2.nom = "travolta";console.log(obj.nom);// affiche travolta
Ajouter un nouvel attribut a un objet existant
obj2.age = 35;
H & H: Research and Training 94 / 143
![Page 169: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/169.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScriptPour cloner un objet
function clone(obj){var obj2 = {};for (key in obj)
obj2[key] = obj[key];return obj2;
}
var obj = {nom: "wick", prenom: "john"};var obj2 = clone(obj);obj2.nom = "abruzzi";
console.log(obj);// affiche wick
console.log(obj2);// affiche abruzzi
H & H: Research and Training 95 / 143
![Page 170: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/170.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Ou tout simplement
var obj2 = Object.assign({}, obj);console.log(obj);console.log(obj2);
La methode Object.create() permet de copier un objet.
H & H: Research and Training 96 / 143
![Page 171: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/171.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Ou tout simplement
var obj2 = Object.assign({}, obj);console.log(obj);console.log(obj2);
La methode Object.create() permet de copier un objet.
H & H: Research and Training 96 / 143
![Page 172: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/172.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Pour recuperer l’ensemble des valeurs d’un objet dans un tableau
var obj = {nom: "wick", prenom: "john"};var values = Object.values(obj);
for (value of values)console.log(value);
// affiche wick ensuite john
H & H: Research and Training 97 / 143
![Page 173: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/173.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Pour recuperer l’ensemble des cles d’un objet dans un tableau
var keys = Object.keys(obj);
for (key of keys)console.log(key + " : " + obj[key]);
// affiche nom : wick// prenom : john
H & H: Research and Training 98 / 143
![Page 174: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/174.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScriptConsiderons toujours l’objet obj
const obj = { nom: ’wick’, prenom: ’john’ };
Declarons une variable name qui recoit sa valeur d’un attribut d’obj
var name = obj.nom;
Modifions la valeur d’un n’affecte pas l’autre
name = "travolta";console.log(obj.nom);// affiche wick
obj.nom = "abruzzi";console.log(name);// affiche travolta
H & H: Research and Training 99 / 143
![Page 175: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/175.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScriptConsiderons toujours l’objet obj
const obj = { nom: ’wick’, prenom: ’john’ };
Declarons une variable name qui recoit sa valeur d’un attribut d’obj
var name = obj.nom;
Modifions la valeur d’un n’affecte pas l’autre
name = "travolta";console.log(obj.nom);// affiche wick
obj.nom = "abruzzi";console.log(name);// affiche travolta
H & H: Research and Training 99 / 143
![Page 176: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/176.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScriptConsiderons toujours l’objet obj
const obj = { nom: ’wick’, prenom: ’john’ };
Declarons une variable name qui recoit sa valeur d’un attribut d’obj
var name = obj.nom;
Modifions la valeur d’un n’affecte pas l’autre
name = "travolta";console.log(obj.nom);// affiche wick
obj.nom = "abruzzi";console.log(name);// affiche travolta
H & H: Research and Training 99 / 143
![Page 177: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/177.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Pour transformer un objet en chaıne de caractere
var perso = { nom: ’wick’, prenom: ’john’ };var str = JSON.stringify(perso);console.log(str);// affiche {"nom":"wick","prenom":"john"}
Pour transformer une chaıne de caractere en objet
var p = JSON.parse(str);console.log(p.nom + " " + p.prenom);// affiche wick john
H & H: Research and Training 100 / 143
![Page 178: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/178.jpg)
© Achref EL MOUELHI ©
Objets Attributs
JavaScript
Pour transformer un objet en chaıne de caractere
var perso = { nom: ’wick’, prenom: ’john’ };var str = JSON.stringify(perso);console.log(str);// affiche {"nom":"wick","prenom":"john"}
Pour transformer une chaıne de caractere en objet
var p = JSON.parse(str);console.log(p.nom + " " + p.prenom);// affiche wick john
H & H: Research and Training 100 / 143
![Page 179: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/179.jpg)
© Achref EL MOUELHI ©
Objets Methodes
JavaScript
Un objet avec attributs et methodes
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour");
}};
Pour appeler la methode direBonjour
obj.direBonjour();
Comment afficher le nom dans la methode?
H & H: Research and Training 101 / 143
![Page 180: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/180.jpg)
© Achref EL MOUELHI ©
Objets Methodes
JavaScript
Un objet avec attributs et methodes
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour");
}};
Pour appeler la methode direBonjour
obj.direBonjour();
Comment afficher le nom dans la methode?
H & H: Research and Training 101 / 143
![Page 181: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/181.jpg)
© Achref EL MOUELHI ©
Objets Methodes
JavaScript
Un objet avec attributs et methodes
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour");
}};
Pour appeler la methode direBonjour
obj.direBonjour();
Comment afficher le nom dans la methode?
H & H: Research and Training 101 / 143
![Page 182: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/182.jpg)
© Achref EL MOUELHI ©
Objets Methodes
JavaScriptCeci genere une erreur
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour " + nom);
}};obj.direBonjour();
Il faut utiliser l’operateur this
var obj = {nom: "wick",prenom: "john",direBonjour: function (){
console.log("bonjour " + this.nom);}
};obj.direBonjour();
H & H: Research and Training 102 / 143
![Page 183: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/183.jpg)
© Achref EL MOUELHI ©
Objets Methodes
JavaScriptCeci genere une erreur
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour " + nom);
}};obj.direBonjour();
Il faut utiliser l’operateur this
var obj = {nom: "wick",prenom: "john",direBonjour: function (){console.log("bonjour " + this.nom);
}};obj.direBonjour();
H & H: Research and Training 102 / 143
![Page 184: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/184.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Constructeurs ?
Besoin d’un moule pour creer des objets (comme les classes enJava, C#, PHP...)
Tous les objets JS sont de type Object
Il est possible de creer ou de cloner un objet a‘ partir d’un autre enutilisant des methodes d’Object
Et si on veut creer un modele d’objet (comme la classe), on peututiliser les constructeurs
H & H: Research and Training 103 / 143
![Page 185: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/185.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScriptDeclarer un constructeur d’objet
var Personne = function(nom,prenom){this.nom = nom;this.prenom = prenom;
}
Explication
Un constructeur d’objet permettant d’initialiser la valeur de deuxattributs nom et prenom
L’appel de ce constructeur avec l’operateur new permet de creerplusieurs objets ayant tous les attributs nom et prenom
C’est comme une classe dans un LOO a classes
H & H: Research and Training 104 / 143
![Page 186: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/186.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScriptDeclarer un constructeur d’objet
var Personne = function(nom,prenom){this.nom = nom;this.prenom = prenom;
}
Explication
Un constructeur d’objet permettant d’initialiser la valeur de deuxattributs nom et prenom
L’appel de ce constructeur avec l’operateur new permet de creerplusieurs objets ayant tous les attributs nom et prenom
C’est comme une classe dans un LOO a classes
H & H: Research and Training 104 / 143
![Page 187: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/187.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Creer un objet en utilisant l’operateur new
perso = new Personne("wick","john");
Afficher les valeurs d’un objet
console.log(perso);
Pour verifier qu’il s’agit bien d’un objet
console.log(typeof perso);
H & H: Research and Training 105 / 143
![Page 188: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/188.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Creer un objet en utilisant l’operateur new
perso = new Personne("wick","john");
Afficher les valeurs d’un objet
console.log(perso);
Pour verifier qu’il s’agit bien d’un objet
console.log(typeof perso);
H & H: Research and Training 105 / 143
![Page 189: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/189.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Creer un objet en utilisant l’operateur new
perso = new Personne("wick","john");
Afficher les valeurs d’un objet
console.log(perso);
Pour verifier qu’il s’agit bien d’un objet
console.log(typeof perso);
H & H: Research and Training 105 / 143
![Page 190: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/190.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Declarer un constructeur contenant une methode
var Personne = function(nom,prenom){this.nom = nom;this.prenom = prenom;this.direBonjour = function (){console.log("bonjour " + this.nom);
}}
Pour appeler cette methode
var perso = new Personne("wick","john");perso.direBonjour();
H & H: Research and Training 106 / 143
![Page 191: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/191.jpg)
© Achref EL MOUELHI ©
Objets Constructeurs
JavaScript
Declarer un constructeur contenant une methode
var Personne = function(nom,prenom){this.nom = nom;this.prenom = prenom;this.direBonjour = function (){console.log("bonjour " + this.nom);
}}
Pour appeler cette methode
var perso = new Personne("wick","john");perso.direBonjour();
H & H: Research and Training 106 / 143
![Page 192: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/192.jpg)
© Achref EL MOUELHI ©
Objets Prototypes
JavaScript
Une fois le constructeur declare, impossible de lui ajouter denouvel attribut de cette maniere
Personne.age = 0;
Pour cela, il faut utiliser le prototype
Personne.prototype.age = 0;
H & H: Research and Training 107 / 143
![Page 193: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/193.jpg)
© Achref EL MOUELHI ©
Objets Prototypes
JavaScript
Une fois le constructeur declare, impossible de lui ajouter denouvel attribut de cette maniere
Personne.age = 0;
Pour cela, il faut utiliser le prototype
Personne.prototype.age = 0;
H & H: Research and Training 107 / 143
![Page 194: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/194.jpg)
© Achref EL MOUELHI ©
Objets Prototypes
JavaScript
Pareillement pour les methodes
Personne.prototype.getAge = function(){return this.age;
}
Personne.prototype.setAge = function(age){this.age = age;
}
Appeler les methodes ajoutees
perso.setAge(45);console.log(perso.getAge());
Remarque
Ne jamais modifier le prototype d’un objet predefini.
H & H: Research and Training 108 / 143
![Page 195: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/195.jpg)
© Achref EL MOUELHI ©
Objets Prototypes
JavaScript
Pareillement pour les methodes
Personne.prototype.getAge = function(){return this.age;
}
Personne.prototype.setAge = function(age){this.age = age;
}
Appeler les methodes ajoutees
perso.setAge(45);console.log(perso.getAge());
Remarque
Ne jamais modifier le prototype d’un objet predefini.
H & H: Research and Training 108 / 143
![Page 196: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/196.jpg)
© Achref EL MOUELHI ©
Objets Prototypes
JavaScript
Pareillement pour les methodes
Personne.prototype.getAge = function(){return this.age;
}
Personne.prototype.setAge = function(age){this.age = age;
}
Appeler les methodes ajoutees
perso.setAge(45);console.log(perso.getAge());
Remarque
Ne jamais modifier le prototype d’un objet predefini.
H & H: Research and Training 108 / 143
![Page 197: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/197.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScript
Objets predefinis
Math : contenant de methodes permettant de realiser desoperations mathematiques sur les nombres
Date : permet de manipuler des dates
...
H & H: Research and Training 109 / 143
![Page 198: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/198.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScript
Exemple de methodes de l’objet Math
Math.round(2.1); // retourne 2Math.round(2.9); // retourne 3Math.pow(2, 3); // retourne 8Math.sqrt(4); // retourne 2Math.abs(-2); // retourne 2Math.min(0, 1, 4, 2, -4, -5); // retourne -5Math.max(0, 1, 4, 2, -4, -5); // retourne 4Math.random(); // retourne un nombre aleatoireMath.floor(Math.random() * 10);// retourne un entier compris entre 0 et 9
H & H: Research and Training 110 / 143
![Page 199: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/199.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScriptCreer et afficher un objet date
var date = new Date();console.log(date);// affiche la date complete du jour
Creer une date a partir de valeurs passees en parametre (les mois sontcodes de 0 a 11)
var date = new Date(1985,7,30,5,50,0,0);console.log(date);// affiche Fri Aug 30 1985 05:50:00 GMT+0200
Creer une date a partir d’un nombre de millisecondes
var date = new Date(100000000000);console.log(date);// affiche Sat Mar 03 1973 10:46:40 GMT+0100
H & H: Research and Training 111 / 143
![Page 200: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/200.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScriptCreer et afficher un objet date
var date = new Date();console.log(date);// affiche la date complete du jour
Creer une date a partir de valeurs passees en parametre (les mois sontcodes de 0 a 11)
var date = new Date(1985,7,30,5,50,0,0);console.log(date);// affiche Fri Aug 30 1985 05:50:00 GMT+0200
Creer une date a partir d’un nombre de millisecondes
var date = new Date(100000000000);console.log(date);// affiche Sat Mar 03 1973 10:46:40 GMT+0100
H & H: Research and Training 111 / 143
![Page 201: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/201.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScriptCreer et afficher un objet date
var date = new Date();console.log(date);// affiche la date complete du jour
Creer une date a partir de valeurs passees en parametre (les mois sontcodes de 0 a 11)
var date = new Date(1985,7,30,5,50,0,0);console.log(date);// affiche Fri Aug 30 1985 05:50:00 GMT+0200
Creer une date a partir d’un nombre de millisecondes
var date = new Date(100000000000);console.log(date);// affiche Sat Mar 03 1973 10:46:40 GMT+0100
H & H: Research and Training 111 / 143
![Page 202: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/202.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScript
Exemple de methodes pour les dates
getFullYear() : retourne l’annee
getMonth() : retourne le mois [0-11]
getDate() : retourne le jour [1-31]
getHours() : retourne l’heure [0-23]
getMinutes() : retourne les minutes [0-59]
getSeconds() : retourne les secondes [0-59]
getMilliseconds() : retourne les millisecondes [0-999]
getTime() : retourne le nombre de millisecondes depuis le 1 Janvier 1970(Avec ES5, on peut utiliser Date.now())
On peut aussi modifier les attributs de l’objet Date en utilisant les set.
H & H: Research and Training 112 / 143
![Page 203: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/203.jpg)
© Achref EL MOUELHI ©
Objets et methodes predefinis
JavaScript
Exemple de methodes pour les dates
getFullYear() : retourne l’annee
getMonth() : retourne le mois [0-11]
getDate() : retourne le jour [1-31]
getHours() : retourne l’heure [0-23]
getMinutes() : retourne les minutes [0-59]
getSeconds() : retourne les secondes [0-59]
getMilliseconds() : retourne les millisecondes [0-999]
getTime() : retourne le nombre de millisecondes depuis le 1 Janvier 1970(Avec ES5, on peut utiliser Date.now())
On peut aussi modifier les attributs de l’objet Date en utilisant les set.H & H: Research and Training 112 / 143
![Page 204: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/204.jpg)
© Achref EL MOUELHI ©
Operateurs
JavaScript
Quelques operateurs
typeof : pour obtenir le type d’une variable
new : pour creer un objet en utilisant un constructeur
this : pour designer l’objet courant
Autres operateurs
in
delete
instanceof
...
H & H: Research and Training 113 / 143
![Page 205: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/205.jpg)
© Achref EL MOUELHI ©
Operateurs
JavaScript
Quelques operateurs
typeof : pour obtenir le type d’une variable
new : pour creer un objet en utilisant un constructeur
this : pour designer l’objet courant
Autres operateurs
in
delete
instanceof
...
H & H: Research and Training 113 / 143
![Page 206: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/206.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur in
JavaScript
L’operateur in
Il permet de tester si
un indice est dans le tableau (inferieur a la taille de ce dernier)
une methode appartient a un objet
...
H & H: Research and Training 114 / 143
![Page 207: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/207.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur in
JavaScriptExemple avec un tableau
var tab = [2,3,5];if (2 in tab)console.log("oui");
// affiche oui
Exemple avec un objet de type chaıne de caractere
var str = new String("bonjour");if ("length" in str)console.log("oui");
// affiche oui
Exemple avec un autre type d’objet
var perso = { nom: ’wick’, prenom: ’john’ };if ("nom" in perso)console.log("oui");
// affiche oui
H & H: Research and Training 115 / 143
![Page 208: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/208.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur in
JavaScriptExemple avec un tableau
var tab = [2,3,5];if (2 in tab)console.log("oui");
// affiche oui
Exemple avec un objet de type chaıne de caractere
var str = new String("bonjour");if ("length" in str)console.log("oui");
// affiche oui
Exemple avec un autre type d’objet
var perso = { nom: ’wick’, prenom: ’john’ };if ("nom" in perso)console.log("oui");
// affiche oui
H & H: Research and Training 115 / 143
![Page 209: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/209.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur in
JavaScriptExemple avec un tableau
var tab = [2,3,5];if (2 in tab)console.log("oui");
// affiche oui
Exemple avec un objet de type chaıne de caractere
var str = new String("bonjour");if ("length" in str)console.log("oui");
// affiche oui
Exemple avec un autre type d’objet
var perso = { nom: ’wick’, prenom: ’john’ };if ("nom" in perso)console.log("oui");
// affiche oui
H & H: Research and Training 115 / 143
![Page 210: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/210.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur delete
JavaScript
L’operateur delete
Il permet de supprimer
une variables non declaree explicitement (avec var)
un attribut d’objet
un element de tableau
retourne true si la suppression se termine correctement, falsesinon.
H & H: Research and Training 116 / 143
![Page 211: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/211.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur delete
JavaScriptExemple avec une variable de type object
perso = { nom: ’wick’, prenom: ’john’ };console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
delete perso.prenom ;console.log(perso);// affiche { nom: ’wick’ }
Ceci genere une erreur car l’objet a ete supprime
perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);
Une variable declaree avec var ne sera pas supprimee
var perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
H & H: Research and Training 117 / 143
![Page 212: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/212.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur delete
JavaScriptExemple avec une variable de type object
perso = { nom: ’wick’, prenom: ’john’ };console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
delete perso.prenom ;console.log(perso);// affiche { nom: ’wick’ }
Ceci genere une erreur car l’objet a ete supprime
perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);
Une variable declaree avec var ne sera pas supprimee
var perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
H & H: Research and Training 117 / 143
![Page 213: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/213.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur delete
JavaScriptExemple avec une variable de type object
perso = { nom: ’wick’, prenom: ’john’ };console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
delete perso.prenom ;console.log(perso);// affiche { nom: ’wick’ }
Ceci genere une erreur car l’objet a ete supprime
perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);
Une variable declaree avec var ne sera pas supprimee
var perso = { nom: ’wick’, prenom: ’john’ };delete perso;console.log(perso);// affiche { nom: ’wick’, prenom: ’john’ }
H & H: Research and Training 117 / 143
![Page 214: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/214.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur instanceof
JavaScript
L’operateur instanceof
retourne true si l’objet donne est du type specifie, false sinon.
Exemple
var jour = new Date(2019, 06, 06);if (jour instanceof Date) {console.log("oui");
}// affiche oui
H & H: Research and Training 118 / 143
![Page 215: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/215.jpg)
© Achref EL MOUELHI ©
Operateurs L’operateur instanceof
JavaScript
L’operateur instanceof
retourne true si l’objet donne est du type specifie, false sinon.
Exemple
var jour = new Date(2019, 06, 06);if (jour instanceof Date) {console.log("oui");
}// affiche oui
H & H: Research and Training 118 / 143
![Page 216: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/216.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScript
Une constante
un element qui ne peut changer de valeur
Pour declarer une constante
il faut utiliser le mot-cle const
Declaration d’une constante
const PI = 3.1415;
L’instruction suivante leve une exception (Uncaught TypeError: Assignmentto constant variable)
PI = 5;
H & H: Research and Training 119 / 143
![Page 217: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/217.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScript
Une constante
un element qui ne peut changer de valeur
Pour declarer une constante
il faut utiliser le mot-cle const
Declaration d’une constante
const PI = 3.1415;
L’instruction suivante leve une exception (Uncaught TypeError: Assignmentto constant variable)
PI = 5;
H & H: Research and Training 119 / 143
![Page 218: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/218.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScript
Une constante
un element qui ne peut changer de valeur
Pour declarer une constante
il faut utiliser le mot-cle const
Declaration d’une constante
const PI = 3.1415;
L’instruction suivante leve une exception (Uncaught TypeError: Assignmentto constant variable)
PI = 5;
H & H: Research and Training 119 / 143
![Page 219: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/219.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScript
Une constante
un element qui ne peut changer de valeur
Pour declarer une constante
il faut utiliser le mot-cle const
Declaration d’une constante
const PI = 3.1415;
L’instruction suivante leve une exception (Uncaught TypeError: Assignmentto constant variable)
PI = 5;
H & H: Research and Training 119 / 143
![Page 220: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/220.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptConsiderons l’objet suivant declare avec le mot-cle const
const obj = {nom: "wick",prenom: "john"
};
L’instruction suivante leve une exception (Uncaught TypeError: Assignment toconstant variable)
obj = {};
Cependant, l’instruction suivante est correcte et ne leve donc pas d’exception
obj.nom ="travolta";obj[’prenom’] = "denzel";obj.age = 50;
console.log(obj);// affiche {nom: "travolta", prenom: "denzel", age: 50}
H & H: Research and Training 120 / 143
![Page 221: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/221.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptConsiderons l’objet suivant declare avec le mot-cle const
const obj = {nom: "wick",prenom: "john"
};
L’instruction suivante leve une exception (Uncaught TypeError: Assignment toconstant variable)
obj = {};
Cependant, l’instruction suivante est correcte et ne leve donc pas d’exception
obj.nom ="travolta";obj[’prenom’] = "denzel";obj.age = 50;
console.log(obj);// affiche {nom: "travolta", prenom: "denzel", age: 50}
H & H: Research and Training 120 / 143
![Page 222: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/222.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptConsiderons l’objet suivant declare avec le mot-cle const
const obj = {nom: "wick",prenom: "john"
};
L’instruction suivante leve une exception (Uncaught TypeError: Assignment toconstant variable)
obj = {};
Cependant, l’instruction suivante est correcte et ne leve donc pas d’exception
obj.nom ="travolta";obj[’prenom’] = "denzel";obj.age = 50;
console.log(obj);// affiche {nom: "travolta", prenom: "denzel", age: 50}
H & H: Research and Training 120 / 143
![Page 223: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/223.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptIdem pour les tableaux
const tableau = [2, 3, 8];
L’instruction suivante leve une exception (UncaughtTypeError: Assignment to constant variable)
tableau = [];
Cependant, l’instruction suivante est correcte et ne leve donc pasd’exception
tableau[2] = 1;tableau[0] = 9;
console.log(tableau);// affiche [9, 3, 1]
H & H: Research and Training 121 / 143
![Page 224: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/224.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptIdem pour les tableaux
const tableau = [2, 3, 8];
L’instruction suivante leve une exception (UncaughtTypeError: Assignment to constant variable)
tableau = [];
Cependant, l’instruction suivante est correcte et ne leve donc pasd’exception
tableau[2] = 1;tableau[0] = 9;
console.log(tableau);// affiche [9, 3, 1]
H & H: Research and Training 121 / 143
![Page 225: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/225.jpg)
© Achref EL MOUELHI ©
Constantes
JavaScriptIdem pour les tableaux
const tableau = [2, 3, 8];
L’instruction suivante leve une exception (UncaughtTypeError: Assignment to constant variable)
tableau = [];
Cependant, l’instruction suivante est correcte et ne leve donc pasd’exception
tableau[2] = 1;tableau[0] = 9;
console.log(tableau);// affiche [9, 3, 1]
H & H: Research and Training 121 / 143
![Page 226: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/226.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScriptConsiderons la fonction suivante
function produit (a, b) {return a * b;
}
Appeler la fonction avec des nombres donne le resultat suivant
console.log(produit (2, 3));// affiche 6
Appeler la fonction avec un nombre et une chaıne de caracteredonne le resultat suivant
console.log(produit (2, "a"));// affiche NaN
H & H: Research and Training 122 / 143
![Page 227: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/227.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScriptConsiderons la fonction suivante
function produit (a, b) {return a * b;
}
Appeler la fonction avec des nombres donne le resultat suivant
console.log(produit (2, 3));// affiche 6
Appeler la fonction avec un nombre et une chaıne de caracteredonne le resultat suivant
console.log(produit (2, "a"));// affiche NaN
H & H: Research and Training 122 / 143
![Page 228: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/228.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScriptConsiderons la fonction suivante
function produit (a, b) {return a * b;
}
Appeler la fonction avec des nombres donne le resultat suivant
console.log(produit (2, 3));// affiche 6
Appeler la fonction avec un nombre et une chaıne de caracteredonne le resultat suivant
console.log(produit (2, "a"));// affiche NaN
H & H: Research and Training 122 / 143
![Page 229: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/229.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScriptOn peut lancer une exception si un des parametres n’est pas de type number
function produit (a, b) {if (isNaN (a) || isNaN (b))throw "Les parametres doivent etre de type number";
return a * b;}
L’appel de la fonction doit etre entoure par un bloc try ... catch pourcapturer et traiter l’eventuelle exception lancee
try {console.log(produit (2, "a"));
}catch(e) {console.error(e);
}
console.error() permet d’afficher dans la console une erreur en rouge.
H & H: Research and Training 123 / 143
![Page 230: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/230.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScriptOn peut lancer une exception si un des parametres n’est pas de type number
function produit (a, b) {if (isNaN (a) || isNaN (b))throw "Les parametres doivent etre de type number";
return a * b;}
L’appel de la fonction doit etre entoure par un bloc try ... catch pourcapturer et traiter l’eventuelle exception lancee
try {console.log(produit (2, "a"));
}catch(e) {console.error(e);
}
console.error() permet d’afficher dans la console une erreur en rouge.H & H: Research and Training 123 / 143
![Page 231: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/231.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScript
En executant le code precedent, le resultat est
Les parametres doivent etre de type number
Remarque
On peut lancer une exception de type string, number, boolean...
H & H: Research and Training 124 / 143
![Page 232: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/232.jpg)
© Achref EL MOUELHI ©
Exceptions
JavaScript
En executant le code precedent, le resultat est
Les parametres doivent etre de type number
Remarque
On peut lancer une exception de type string, number, boolean...
H & H: Research and Training 124 / 143
![Page 233: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/233.jpg)
© Achref EL MOUELHI ©
Hoisting
JavaScript
Hoisting (la remontee)
Possibilite d’utiliser une variable avant de la declarer
Le compilateur commence par lire toutes les declarations, ensuite il traite lereste du code
Les constantes et les variables declarees avec let ne supporte pas le hoisting
Malgre l’utilisation du mode strict, l’affichage d’une variable non-declaree negenere pas d’erreur grace a la remontee
"use strict";x = 7;console.log(x);var x;
H & H: Research and Training 125 / 143
![Page 234: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/234.jpg)
© Achref EL MOUELHI ©
Hoisting
JavaScript
Hoisting (la remontee)
Possibilite d’utiliser une variable avant de la declarer
Le compilateur commence par lire toutes les declarations, ensuite il traite lereste du code
Les constantes et les variables declarees avec let ne supporte pas le hoisting
Malgre l’utilisation du mode strict, l’affichage d’une variable non-declaree negenere pas d’erreur grace a la remontee
"use strict";x = 7;console.log(x);var x;
H & H: Research and Training 125 / 143
![Page 235: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/235.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Expressions regulieres
outil de recherche puissant adopte par la plupart des langages deprogrammation
facilitant la recherche dans les chaınes de caracteres (et donc leremplacement, le calcul de nombre d’occurrences...)
permettent de verifier si des chaınes de caracteres respectentcertains formats (email, numero de telephone...)
syntaxe plus ou moins proche pour tous les langages deprogrammation
H & H: Research and Training 126 / 143
![Page 236: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/236.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Plusieurs methodes de recherche disponibles
chaine1.search(chaine2) : permet de chercher et retourner la position dela premiere occurrence de chaine2 dans chaine1
chaine1.test(chaine2) : permet de chercher et retourner true sichaine2 contient chaine1, false sinon.
chaine1.replace(chaine2, chaine3) : permet de remplacer la premiereoccurrence de chaine2 dans chaine1 par chaine3
chaine1.exec(chaine2) : permet de chercher chaine1 dans chaine2 etretourner un objet contenant plusieurs donnees sur la recherche (position de lapremiere occurrence, chaıne recherchee...).
chaine1.match(chaine2) : permet de chercher chaine1 dans chaine2 etretourner un tableau contenant toutes les occurrences.
H & H: Research and Training 127 / 143
![Page 237: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/237.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptRecherche d’une sous-chaıne dans une chaıne de caractere
var str = "Bonjour tout le monde";var pos = str.search("tout");console.log(pos); // affiche 8
Recherche avec une expression reguliere insensible a la casse
var str = "Bonjour tout le monde";var pos = str.search(/Tout/i);console.log(pos); // affiche 8
Retourne -1 si la sous-chaıne n’existe pas
var str = "Bonjour tout le monde";var pos = str.search(/c/i);console.log(pos); // affiche -1
H & H: Research and Training 128 / 143
![Page 238: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/238.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptRecherche d’une sous-chaıne dans une chaıne de caractere
var str = "Bonjour tout le monde";var pos = str.search("tout");console.log(pos); // affiche 8
Recherche avec une expression reguliere insensible a la casse
var str = "Bonjour tout le monde";var pos = str.search(/Tout/i);console.log(pos); // affiche 8
Retourne -1 si la sous-chaıne n’existe pas
var str = "Bonjour tout le monde";var pos = str.search(/c/i);console.log(pos); // affiche -1
H & H: Research and Training 128 / 143
![Page 239: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/239.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptRecherche d’une sous-chaıne dans une chaıne de caractere
var str = "Bonjour tout le monde";var pos = str.search("tout");console.log(pos); // affiche 8
Recherche avec une expression reguliere insensible a la casse
var str = "Bonjour tout le monde";var pos = str.search(/Tout/i);console.log(pos); // affiche 8
Retourne -1 si la sous-chaıne n’existe pas
var str = "Bonjour tout le monde";var pos = str.search(/c/i);console.log(pos); // affiche -1
H & H: Research and Training 128 / 143
![Page 240: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/240.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
On peut aussi utiliser la fonction de recherche test qui retournetrue si la sous-chaine existe, false sinon.
var str = /AB/i;var result = str.test("ababaabbaaab");console.log(result); // affiche true
H & H: Research and Training 129 / 143
![Page 241: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/241.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Remplacer la premiere occurrence d’une sous-chaıne
var chaine = "ababaabbaaab";var txt = chaine.replace(/ab/,"c");console.log(txt);// affiche cabaabbaaab
Remplacer toutes les occurrences d’une sous-chaıne
var chaine = "ababaabbaaab";var txt = chaine.replace(/ab/g,"c");console.log(txt);// affiche ccacbaac
H & H: Research and Training 130 / 143
![Page 242: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/242.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Remplacer la premiere occurrence d’une sous-chaıne
var chaine = "ababaabbaaab";var txt = chaine.replace(/ab/,"c");console.log(txt);// affiche cabaabbaaab
Remplacer toutes les occurrences d’une sous-chaıne
var chaine = "ababaabbaaab";var txt = chaine.replace(/ab/g,"c");console.log(txt);// affiche ccacbaac
H & H: Research and Training 130 / 143
![Page 243: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/243.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Utiliser exec pour avoir un resultat sous forme d’un objet
var chaine = "ababaabbaaab";var str = /AA/i;var resultat = str.exec(chaine);
console.log("chaıne trouvee : " + resultat[0]);// affiche chaıne trouvee : aa
console.log("indice de la premiere occurrence : " +resultat.index);
// affiche indice de la premiere occurrence : 4
console.log("texte complet : " + resultat.input);// affiche texte complet : ababaabbaaab
H & H: Research and Training 131 / 143
![Page 244: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/244.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Pour trouver toutes les occurrences avec exec, il faut utiliser uneboucle et ajouter le parametre g
var chaine = "ababaabbaaab";var str = /AA/gi;var resultat;while (resultat = str.exec(chaine)) {
console.log("motif recherche : " + resultat[0]);
console.log("indice de la premiereoccurrence : " + resultat.index);
console.log("texte complet : " + resultat.input);
}
H & H: Research and Training 132 / 143
![Page 245: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/245.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
On peut aussi utiliser match qui retourne un tableau contenanttoutes occurrences sans utiliser de boucles
var chaine = "ababaabbaaab";var str = /AA/gi;var resultat;console.log(chaine.match(str));// affiche (2) ["aa", "aa"]
H & H: Research and Training 133 / 143
![Page 246: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/246.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptContraintes exprimees avec les expressions regulieres
a+ : 1 ou plusieurs a
a* : 0 ou plusieurs a
a? : 0 ou 1 a
a{n, m} : minimum n occurrences de a consecutives, maximum m occurrences de aconsecutives
a{n} : exactement n occurrences de a consecutives
a{n, } : minimum n occurrences de a consecutives
var str = /ba?c/i;console.log(str.test("bac")); // true
var str = /ba?c/i;console.log(str.test("baac")); // false
H & H: Research and Training 134 / 143
![Page 247: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/247.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptContraintes exprimees avec les expressions regulieres
a+ : 1 ou plusieurs a
a* : 0 ou plusieurs a
a? : 0 ou 1 a
a{n, m} : minimum n occurrences de a consecutives, maximum m occurrences de aconsecutives
a{n} : exactement n occurrences de a consecutives
a{n, } : minimum n occurrences de a consecutives
var str = /ba?c/i;console.log(str.test("bac")); // true
var str = /ba?c/i;console.log(str.test("baac")); // false
H & H: Research and Training 134 / 143
![Page 248: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/248.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScriptContraintes exprimees avec les expressions regulieres
a+ : 1 ou plusieurs a
a* : 0 ou plusieurs a
a? : 0 ou 1 a
a{n, m} : minimum n occurrences de a consecutives, maximum m occurrences de aconsecutives
a{n} : exactement n occurrences de a consecutives
a{n, } : minimum n occurrences de a consecutives
var str = /ba?c/i;console.log(str.test("bac")); // true
var str = /ba?c/i;console.log(str.test("baac")); // false
H & H: Research and Training 134 / 143
![Page 249: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/249.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Contraintes exprimees avec les expressions regulieres
a | b : a ou b
ˆ : commence par
$ : se termine par
() : le groupe
a(?!b) : a non suivi de b
a(?=b) : a suivi de b
(?<!a)b : b non precede par a
H & H: Research and Training 135 / 143
![Page 250: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/250.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Contraintes exprimees avec les expressions regulieres
. : n’importe quel caractere
\d : un chiffre
\D : tout sauf un chiffre
\w : un caractere alphanumerique
\W : tout sauf un caractere alphanumerique
\t : un caractere de tabulation
\n : un caractere de retour a la ligne
\s : un espace
...
H & H: Research and Training 136 / 143
![Page 251: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/251.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Contraintes exprimees avec les expressions regulieres
[a-z] : toutes les lettres entre a et z
[abcd] : a, b, c, ou d
[A-Za-z] : une lettre en majuscule ou en minuscule
[ˆa-d] : tout sauf a, b, c, et d
...
Pour utiliser un caractere reserve (ˆ, $...) dans une expressionreguliere, il faut le preceder par \
H & H: Research and Training 137 / 143
![Page 252: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/252.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Contraintes exprimees avec les expressions regulieres
[a-z] : toutes les lettres entre a et z
[abcd] : a, b, c, ou d
[A-Za-z] : une lettre en majuscule ou en minuscule
[ˆa-d] : tout sauf a, b, c, et d
...
Pour utiliser un caractere reserve (ˆ, $...) dans une expressionreguliere, il faut le preceder par \
H & H: Research and Training 137 / 143
![Page 253: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/253.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Exercice 1
Trouver une expression reguliere qui permet de determiner si unechaıne de caractere contient 3 occurrences (pas forcementconsecutives) de la sous-chaıne ab.
true pour abacccababcc
true pour abababccccab
false pour baaaaabaccccba
H & H: Research and Training 138 / 143
![Page 254: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/254.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Exercice 2
Trouver une expression reguliere qui permet de determiner si unechaıne commence par la lettre a, se termine par la lettre b et pourchaque x suivi de y (pas forcement consecutives), il existe un z situeentre x et y.
true pour ab
true pour abxyb
true pour abxazyb
false pour abxuyb
false pour abxazyxyb
H & H: Research and Training 139 / 143
![Page 255: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/255.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Exercice 3
Trouver une expression reguliere qui permet de determiner si unechaıne de caractere correspond a une adresse e-mail.
Exercice 4
Trouver une expression reguliere qui permet de determiner si unechaıne de caractere correspond a un numero de telephone francais.
H & H: Research and Training 140 / 143
![Page 256: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/256.jpg)
© Achref EL MOUELHI ©
Expressions regulieres
JavaScript
Exercice 3
Trouver une expression reguliere qui permet de determiner si unechaıne de caractere correspond a une adresse e-mail.
Exercice 4
Trouver une expression reguliere qui permet de determiner si unechaıne de caractere correspond a un numero de telephone francais.
H & H: Research and Training 140 / 143
![Page 257: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/257.jpg)
© Achref EL MOUELHI ©
Quelques erreurs JavaScript
JavaScript
Quelques erreurs JavaScript
TypeError : lorsqu’on appelle une methode sur une variable detype undefined
SyntaxError : lorsqu’on rencontre un symbole inattenduvar x = 2 + 3,;
ReferenceError : lorsqu’on utilise une variable non-declaree etnon-initialisee
EvalError : lorsque l’expression passe a la fonction eval est malformulee
RangeError : lorsqu’une variable de type number recoit unevaleur superieure a sa limite autorisee
...
H & H: Research and Training 141 / 143
![Page 258: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/258.jpg)
© Achref EL MOUELHI ©
Conventions et bonnes pratiques
JavaScript
Conventions et bonnes pratiques
Utilisation du camelCase pour les variables (sauf pour lesconstantes et variables globales) et fonctions
Terminer chaque instruction par ;
Placer un espace avant et apres chaque operateur ou accolade
Bien indenter son code et ne pas utiliser la touche de tabulation
Ne pas depasser 80 caracteres par ligne
H & H: Research and Training 142 / 143
![Page 259: JavaScript : les fondamentaux · 2020. 10. 29. · 1 Introduction 2 Integrer JavaScript dans HTML´ 3 Console 4 Commentaires 5 Variables 6 Quelques operations sur les variables´](https://reader033.fdocuments.in/reader033/viewer/2022052816/60aa8c531de80f3c311678e4/html5/thumbnails/259.jpg)
© Achref EL MOUELHI ©
Conventions et bonnes pratiques
JavaScript
Conventions et bonnes pratiques
Eviter les variables globales
Declarer les variables au tout debut du bloc
Utiliser les types primitifs et eviter les types objets
Eviter l’utilisation de eval() pour la securite de votre programme
Definir un bloc default dans le switch
Utiliser \ pour indiquer le retour a la ligne pour les chaines decaracteres :var str = "Bonjour \tout le monde"
H & H: Research and Training 143 / 143