03A JavaScript Introduction

Introduction à JavaScript
TECH20711
Développement d’applications d’affaires
Mehdi Lahlou © 2019

Lectures
• Documentation de la MDN • … suite

• Introduction • Contrôle du flux d'instructions et gestion des erreurs
• Types et grammaire Lire uniquement la section intitulée : Les blocs
Lire les sections • Expressions et opérateurs
• Les bases du langage Lire les sections
• Commentaires • Opérateurs
• Déclarations Lire uniquement les sous-sections
Lire uniquement les sous-sections • Opérateurs d'affectation
• Variables, • Opérateurs arithmétiques
• Déclaration de variables, • Opérateurs de chaînes de caractères
• Évaluation de variables, • Opérateurs unaires (typeof)
• Les variables globales • Opérateurs relationnels (instanceof)
• Constantes (seulement son introduction) • Précédence des opérateurs
• Structures de données et types • Expressions
• Littéraux Lire uniquement l’introduction.
Lire uniquement les sous-sections • Nombres et dates
• Les littéraux booléens • Formatage de texte
• Les littéraux numériques • Lire la section « Les chaînes de caractères »
• Les littéraux de nombres décimaux
• Les littéraux de chaînes de caractères
TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 2

Qu’est-ce que JavaScript ?
JavaScript est à la fois un langage très simple et très

compliqué qui prend quelques minutes à apprendre
mais des années à maîtriser.

• Originalement créé en 1995 par Brendan Eich alors qu’il travaillait pour la Netscape Communication Corporation.
• Originalement, l’objectif principal du langage était de gérer une partie de la validation d'entrées (données de
formulaires) qui avait été précédemment laissée aux langages côté serveur afin d’éviter des aller-retour vers le
serveur pour déterminer si un champ obligatoire avait été laissé vide ou si une valeur entrée n'était pas valide.
• JavaScript interagit désormais avec presque tous les aspects de la fenêtre du navigateur et de son contenu.
• JavaScript ≠ Java (La syntaxe de base est volontairement similaire à Java et à C++).
• Souvent abrégé en « JS ».
• Langage de script léger (famille de langages de programmation).
• Code interprété = compilé à la volée « JIT Compilation »
• Permet de programmer suivant plusieurs paradigmes de programmation : Impérative, fonctionnelle et OO.
• Langage faiblement typé.
• Langage sensible à la casse (Tout est sensible à la casse : identificateurs, mot clés, mots réservés, opérateurs … )
• Dans le cadre du cours, sera principalement utilisé pour rendre notre page web interactive avec du contenu
dynamique coté client.

JavaScript
ECMAScript DOM BOM

Le noyau (the Core) Document Object Model Browser Object Model
• Bien que JavaScript et ECMAScript soient souvent utilisés comme synonymes, JavaScript est bien plus que
la définition de la norme ECMA-262.
• JavaScript est une implémentation complète et est composée des trois parties distinctes :
• Le noyau (ECMAScript)
• Le modèle Objet du document (Document Object Model – DOM)
• Le modèle Objet du navigateur (Browser Object Model – BOM)

JavaScript
ECMAScript DOM BOM

• ECMAScript (La norme ECMA-262), n'est pas liée aux navigateurs Web (aucune méthode d'entrée/sortie).
• Une base sur laquelle des langages de script plus robustes peuvent être construits (ici JavaScript).
• Les navigateurs Web ne sont qu'un environnement hôte dans lequel une implémentation ECMAScript peut
exister.
• Elle décrit, à un niveau basique les éléments suivants du langage qui l’implémente:
La syntaxe, les types de données, les mots clés et mots réservés, les opérateurs, …

JavaScript
ECMAScript DOM BOM

• Le Document Object Model (DOM) est une interface de programmation d'application (API) pour XML
(étendue pour une utilisation en HTML).
• Le DOM consiste en une représentation sous la forme d'une hiérarchie de nœuds (arborescence)
représentant la structure HTML d’un document web.
• Le DOM permet ainsi aux développeurs un niveau de contrôle sur le contenu et la structure d’un document
HTML.
• Les nœuds peuvent être supprimés, ajoutés, remplacés et modifiés facilement à l'aide de l'API DOM.

JavaScript
ECMAScript DOM BOM

<html> Titre de la
title
<head> page
<meta charset="utf-8"> head
<title>Titre de la page</title> meta
</head>
<body> html
<h1>Titre de niveau 1</h1>
Titre de
h1
<p>Contenu du paragraphe</p> niveau 1
</body>
body
Contenu du
</html> p
paragraphe

JavaScript
ECMAScript DOM BOM

Le BOM offre des méthodes et interfaces permettant d’interagir avec la fenêtre et les cadres du navigateur :
• Faire apparaître de nouvelles fenêtres de navigateur.
• Déplacer, redimensionner et fermer les fenêtres du navigateur.
• Fournir des informations détaillées sur le navigateur du client à l’aide de l'objet navigator.
• Donner des informations détaillées sur la page chargée dans le navigateur à l’aide de l’objet location.
• Donner des informations détaillées sur la résolution d'écran de l'utilisateur à l’aide de l’objet window.
• Fournir des informations détaillées sur la consommation de mémoire du navigateur et le comportement de
navigation à l’aide de l'objet performance.
• Prendre en charge les cookies
• Donner accès à certains objets tels que XMLHttpRequest et ActiveXObject d'Internet Explorer

1. Ajout d’un script JavaScript à une page web
2. Fichiers JS externes vs code JS inline
3. Les commentaires
4. Les identificateurs
5. Les mots-clés et mots réservés
6. Les variables et constantes
7. Le point-virgule « ; » JavaScript
8. Les types de données
9. Instructions d’entrées/sorties Les éléments du langage
10. Transtypage de données
TECH20711 – Développement d’applications d’affaires 10

Éléments du langage
1. Ajout d’un script JavaScript à une page web : la balise <script>
01 <!DOCTYPE html> 00_UtilisationJS.html 01 //Affichage d'un message d'alerte 00_premierScript.js
02 <html> 02 window.alert("Message de bienvenue !");

03 <head> 03
04 <title>Exemple 00 - Utilisation de JavaScript</title> 04
05 <meta charset="utf-8"> 05
06  08
09 <script src="./mesScripts/00_premierScript.js"></script> 09
10 <script type="text/javascript"> 10
11 //Ajout d’un script « inline » 11
12 /* 12
13 Le code JavaScript contenu dans un élément 13
14 <script> est interprété de haut en bas. 14
15 Le reste du contenu de la page n'est pas chargé 15
16 et / ou affiché jusqu'à ce que tout le code à 16
17 l'intérieur de l'élément <script> ait été évalué. 17
18 */ 18
19 </script> 19
20 </head> 20
21 <body>
22 <script type="text/javascript">
23 //Ajout d’un autre script « inline »
24 </script>
25 </body>
26 </html>
27 
JavaScript – Les éléments du langage Mehdi Lahlou © 2019 11

1. Ajout d’un script JavaScript à une page web : la balise <script>
01 <!DOCTYPE html> 01_balisesScript
02 <html>
• L’élément script peut être placé à n’importe quel 03 <head>
endroit dans la page HTML où l’utilisation d’une balise 04 <meta charset="utf-8">
05 <title>Exemple - Balises script</title>
est tolérée, que ce soit dans la section head ou body du 06 </head>
document. 07 <body>
08
• Aucune restriction sur le nombre d’éléments script 09
utilisés au sein de la page. 10
11
Le code du premier élément <script> est complètement 12 
interprété avant que le deuxième élément <script> ne 13
commence l'interprétation, le second est terminé avant le 14
troisième, et ainsi de suite. 15
16
• Le téléchargement, l’analyse et l’interprétation d’un 17
18 <script src="./mesScripts/script1.js"></script>
code JavaScript débute lorsque la balise script est 19 <script src="./mesScripts/script2.js"></script>
rencontrée. 20 </body>
21 </html>
• Le rendu « rendering » de la page ne se poursuit que 22
lorsque l’interprétation du script en question est terminée. 23
24
• Pour cette raison, il est d’usage que tous les scripts
25
incorporés à la page soient dans l'élément <body>, après le 26
contenu de la page (à la fin du body). 27
28

2. Fichiers JS externes vs code JS inline
Inclure du code JavaScript à l'aide de fichiers externes est

généralement considéré une meilleure pratique comparé à
l’incorporation inline de code.
Parmi les avantages que procure l’utilisation de fichiers JS externes :

• Faciliter la maintenance – Séparation du code JS de la structure HTML :
• Le code JavaScript est indépendant du balisage HTML dans lequel il est utilisé.
• Le code JavaScript peut être réutilisé dans plusieurs pages web / plusieurs projets.
• Exploiter la mise en cache – Temps de chargement de pages plus rapide :
• Les navigateurs mettent en cache tous les fichiers JavaScript liés en externe, ce qui signifie que si deux pages utilisent le
même fichier, le fichier n'est téléchargé qu'une seule fois.

3. Les commentaires
01 <!DOCTYPE html> 02_commentaires
02 <html>
03 <head>
• Le programmeur a tendance à sous-estimer les 04 <title>Exemple - Les commentaires</title>
avantages que procure les commentaires au code : 05 <meta charset="utf-8">
06 </head>
• Pourquoi ? 07 <body>
• Maintenances perfective et évolutive : Les besoins d’affaires 08 
09 <script type="text/javascript">
évoluent et les programmes doivent s’adapter (être maintenus).
10 //Un commentaire sur une seule ligne
• Maintenance corrective : Le programme doit être déverminé 11
« Débogué » lorsqu’une erreur se manifeste ou qu’une 12 x++; //Un commentaire sur le reste de la ligne
défaillance se produit. 13
14 /*
• Pour qui ? 15 Un
• À la lecture du code par soi-même ou par un autre programmeur 16 commentaire
dans le but de le maintenir, le tester ou d’en contrôler la qualité. 17 multi ligne
18 */
• JavaScript propose deux types de commentaires : 19 </script>
20 </body>
• les commentaires sur une seule ligne et les commentaires 21 </html>
sur plusieurs lignes. 22
• Les commentaires sur une seule ligne commencent par // et se 23
terminent par la fin de la ligne 24
25
• Les commentaires multi-lignes sont délimités par /* et */ 26
27
28

4. Les identificateurs
01 //Identificateurs de variables Identificateurs JS
02 //Exemples
03
04 montantTaxe
• Un identificateur est le nom d'une variable, d'une 05 motPasseUsager1
fonction, d'une propriété ou d'un paramètre formel 06 provinceAchat
d’une fonction. 07 totalFacture
08 estTaxable
• Un identificateur doit respecter les règles de 09
10 //Identificateurs de fonctions
nomenclature ci-dessous : 11 //Exemples
• Le premier caractère doit être une lettre, un souligné « _ » 12
13 calculerTaxes
ou un signe dollar « $ ». 14 afficherFacture
• Les caractères qui suivent peuvent être des lettres, des 15
« _ » , des « $ » ou des chiffres.
• Les lettres d'un identificateur peuvent inclure des
caractères de lettres ASCII ou Unicode étendus tels que
« à » et « π », bien que cela ne soit pas recommandé. Le langage JavaScript est sensible à la casse.
• Un identificateur ne peut être un mot clé ou mot
réservé du langage. ! Les identificateurs « montantTaxe » et « montanttaxe »
sont différents, faisant référence à deux éléments
distincts !

5. Les mots-clés et mots réservés
01 // La liste complète des mots-clés Mots-clés en JS
02 // est la suivante:
03
04 break do in typeof
05 case else instanceof var
06 catch export new void
07 class extends return while
08 const finally super with
09 continue for switch yield
10 debugger function this
11 default if throw
• ECMA-262 décrit un ensemble de mots-clés réservés qui 12
13
delete import try
servent à des utilisations spécifiques 14 await enum

15 implements package public
• Ces mots clés sont réservés et ne peuvent être utilisés 16 interface protected static
comme identificateurs ou noms de propriétés. 17 let private
18
19
20
21
22
23
24
25
26
27
28

6. Les variables et constantes
• Un programme informatique opère sur des données. Ces données se distinguent premièrement par leur faculté à
évoluer dans le temps « variables », ou données statiques qui ne changeront pas pendant l’exécution du
programme « constantes ».
• Lors de la conception d’un programme, pour chacune des données utilisée, une réflexion est donc portée sur un
ensemble d’éléments :
• La donnée est-elle fournie en entrée ou est produite par un calcul ou traitement quelconque (intrants vs extrants) ?
• Son type (un nombre entier, un nombre réel, un caractère quelconque, une chaine de caractères, un booléen …) et
particulièrement l’espace mémoire nécessaire afin de l’emmagasiner ?
• Sa faculté à évoluer dans le temps ?
• Trois mots clés peuvent être utilisés pour déclarer une variable / constante:
• var – disponible dans toutes les versions d'ECMAScript
• const et let – introduits dans ECMAScript 6.

6. Les variables
01 <!DOCTYPE html> 03_let
02 <html>
03 <head>
04 <title>Exemple - let</title>
• JavaScript est un langage faiblement typé (Typage 05 <meta charset="utf-8">
dynamique). 06 </head>
07 <body>
• Une variable en JavaScript est donc réduite à un espace 08 <script type="text/javascript">
réservé et nommé pouvant contenir une valeur peu 09 console.log(montant);
importe son type. 10
11 //Déclaration de la variable montant
• Le type est associé à la valeur et non à la variable. 12 let montant;
13 console.log(montant);
• Dans le cadre du cours, nous utiliserons le mot clé let 14 //Initialisation de la variable
pour la déclaration de variables. 15 montant = 100;
16 console.log(montant);
• En JavaScript, la convention veut que l’identificateur 17 //Modification de la valeur
18 montant = 99.99;
d’une variable : 19 console.log(montant);
• Utilise le camelCase, ce qui signifie que la première lettre 20 //La valeur affectée peut être le résultat
est en minuscule et chaque mot supplémentaire débute par 21 //de l'évaluation d'une expression
22 montant = 99.99 * 1.1497;
une majuscule. 23 console.log(montant);
24
25 let montant;
26 </script>
27 </body>
28 </html>

6. Les constantes symboliques
01 04_const
02 //Déclaration de la constante TAUX_TPS sans initialisation

03
04 const TAUX_TPS;
• Les valeurs qui ne changent pas lors de l’exécution d’un 05
programme se déclarent comme des constantes 06 //Déclaration et initialisation de la constante TAUX_TPS
07 const TAUX_TPS = 0.05;
symboliques. 08
09 //Déclaration et initialisation de la constante TAUX_TVQ
• Elles améliorent la lisibilité et facilitent la maintenance 10 const TAUX_TVQ = 0.09975;
du programme (il suffit de modifier leur valeur dans la 11
déclaration de la constante). 12 let montantAvantTaxes = 100, montantTaxes, montantTTC;
13
• En comparaison avec l’utilisation ponctuelle de constantes 14
littérales (valeurs directement utilisées dans le code). 15 //Calcul du montant des taxes Quelle technique est
16 //sans utilisation des constantes meilleure selon vous ?
• Elles sont déclarées à l’aide du mot clé « const » 17 montantTaxes = montantAvantTaxes * 0.14975;
18 //avec utilisation des constantes
• En JavaScript, la convention veut que l’identificateur 19 montantTaxes = montantAvantTaxes * (TAUX_TPS+TAUX_TVQ);
20
d’une constante : 21 //Calcul du montant toutes taxes comprises
• Soit écrit en majuscules. 22 montantTTC = montantAvantTaxes + montantTaxes;
23 //Affichage
• Lorsque composé de plusieurs mots, ces derniers sont 24 console.log(montantAvantTaxes +
séparés par le caractère souligné « _ » 25 "$ + Taxes(" +
26 montantTaxes + "$) = " +
27 montantTTC + "$");
28

7. Le point-virgule « ; »
01 <script type="text/javascript"> Le point-virgule « ; »
02
03 // Valide même sans ; - non recommandé
04 let somme = 8 + 2
05
06
07 // Valide et recommandé
08 let diff = 8 - 2 ;
• Un programme JavaScript est une suite finie 09
10 </script>
d’instructions. 11
12
• Malgré que ce ne soit pas requis, il est fortement 13
conseillé de terminer chacune des instructions 14
15
ECMAScript par un point-virgule « ; ».
• Lorsqu’omis, l’analyseur syntaxique tente de deviner
l’endroit le plus vraisemblable où l’instruction est
supposée se terminer.
! Afin d’éviter toute ambiguïté, nous terminerons

toujours nos instructions par un « ; »

8. Types de données en JavaScript
01 let sigle = 20711; //Type : number 05_types
Il existe deux catégories de types de données en 02 console.log("Sigle du cours = " + sigle +
JavaScript : 03 " / Type : " + typeof(sigle));
04 console.log(`Sigle du cours = ${sigle} / Type :
• Les types primitifs : 05 ${typeof(sigle)}`);
• Simples données atomiques. 06
07
• Accessibilité par valeur – la donnée est stockée 08 let titre = "DAA"; //Type : string
directement dans l’espace mémoire. 09 console.log(`Titre du cours = ${titre} / Type :
10 ${typeof(titre)}`);
• String, Number, Boolean, null, undefined, Symbols (ES6) 11
12 let nbEtudiants; //Type : undefined
• Le type référence : 13 console.log(`Nombre d'étudiants = ${nbEtudiants} / Type :
• Objets qui peuvent être constitués de plusieurs valeurs. 14 ${typeof(nbEtudiants)}`);
15
• Accessibilité par référence – La donnée est stockée dans un 16 let estObligatoire = false; //Type : boolean
espace mémoire référencé par un pointeur. 17 console.log(`Ce cours est obligatoire = ${estObligatoire}
18 / Type : ${typeof(estObligatoire)}`);
• Array, Litteral Object, Function, Date, et tout le reste ! 19
20 let prof = { //Type : Objet littéral
21 nom : "Lahlou",
22 prenom : "Mehdi"
23 };
24 console.log(`L'enseignant du cours = ${prof.nom}
25 ${prof.prenom} / Type : ${typeof(prof)}`);
26
27
28

Opérateurs
9. Entrées / sorties
01 06_io
02 //Lecture de données au clavier
03 let titreCours = window.prompt("Entrer le titre du cours", "DAA");
04 let estEtudiant = window.confirm("Êtes-vous étudiant ?");
05
06 //Affichage d'une alerte
07 window.alert(`Titre du cours : ${titreCours}`);
08
09
10 //Injection de code HTML dans la page
11 document.write(`<span>Vous êtes étudiant : ${estEtudiant}</span>`);
12
13
14 //Lecture du nombre d'étudiants
15 let nbEtudiants = window.prompt("Entrer le nombre d'étudiants", 25); Valeur par défaut (paramètre facultatif)
16
Message d’invite
17 //Entier représentant le nombre de nouveaux inscrits
18 let nouveauxInscrits = 2; Retourne la valeur saisie par l’utilisateur
19 (toujours un string)
20 //Mise à jour du nombre d'étudiants
21 nbEtudiants = nbEtudiants + nouveauxInscrits;
22
23 //Injection du nombre d'étudiants dans la page
24 document.write(`<br><span>Nombre d'étudiants : ${nbEtudiants}</span>`);
25
26
27
28

Opérateurs
01 06_io
05
08
09
12
13
15 let nbEtudiants = window.prompt("Entrer le nombre d'étudiants", 25);
16
18 let nouveauxInscrits = 2; Message d’invite (Généralement une question)
19 Retourne une valeur booléenne
20 //Mise à jour du nombre d'étudiants • OK > true
21 nbEtudiants = nbEtudiants + nouveauxInscrits; • Annuler > false
22
25
26
27
28

Opérateurs
01 06_io
05
08
09
12
13
16
18 let nouveauxInscrits = 2;
19
22
25
26
27
28

Opérateurs
01 06_io
05
08
09 Code HTML généré
12 Résultat affiché dans le corps du document
13
16
19
22
25
26
27
28

Opérateurs
01 06_io
05
08
09
12
13
16
19
22
25
26
27
28

Opérateurs
01 06_io
05
08
09
12
13
16
19
21 nbEtudiants = nbEtudiants + nouveauxInscrits; Code HTML généré
22
25
Résultat affiché dans le corps du document
26
27
28 ?

Opérateurs
01 07_transtypage
03 console.log(`nbEtudiants = ${nbEtudiants}`);
04 console.log(` >> Type : ${typeof nbEtudiants}`);
05
06 nbEtudiants = window.parseInt(nbEtudiants);
07 console.log(`parseInt(nbEtudiants) = ${nbEtudiants}`);
09
10 let nbHeuresCours = window.parseInt(window.prompt("Le nombre d'heures", 3));
11 console.log(`nbHeuresCours = parseInt(prompt("...")) = ${nbHeuresCours}`);
12 console.log(` >> Type : ${typeof nbHeuresCours}`);
13
14
15 let moyenneGroupe = parseFloat(window.prompt("Entrer la moyenne du groupe",
16 70.5));
17 console.log(`moyenneGroupe = parseFloat(prompt("...")) = ${moyenneGroupe}`);
18 console.log(` >> Type : ${typeof moyenneGroupe}`);
19
20 let prenom = window.prompt("Entrer votre prénom", "Leyla");
21 console.log(`prenom = ${prenom}`);
22 console.log(` >> Type : ${typeof prenom}`);
23
24 prenom = parseInt(prenom);
25
26 console.log(`parseInt(prenom) = ${prenom}`);
28 console.log(` >> isNaN(prenom) = ${isNaN(prenom)}`);

Opérateurs
01 07_transtypage
05
09
13
14
16 70.5));
19
23
25

Opérateurs
01 07_transtypage
05
09
13
14
16 70.5));
19
23
25

Opérateurs
01 07_transtypage
05
09
13
14
16 70.5));
19
23
25

Opérateurs
01 07_transtypage
05
09
13
14
16 70.5));
19
23
25

Opérateurs
01 07_transtypage
05
09
13
14
16 70.5));
19
23
25

JavaScript
1. Opérateurs arithmétiques
2. Opérateurs d’incrémentation et de décrémentation Les opérateurs arithmétiques et autres
opérateurs sur les nombres
3. Opérateurs d’affectation combinée

Opérateurs
1. Opérateurs arithmétiques
08 08_opArithmétiques
09 // Addition (+) ////////////////////////////
10 console.log(`1 + 2 = ${1+2}`); Lorsqu’au moins l’un des deux
11
12
13
14
15
console.log(`1 + true
console.log(`1 + "1"
= ${1+true}`);
console.log(`false + true = ${false+true}`);
= ${1+"1"}`); ! opérandes est une chaine, l’opérateur
« + » concatène les deux opérandes et
le résultat est une chaine de caractères.
// Soustraction (-) ////////////////////////

16 console.log(`1 - 1 = ${1-1}`);
17 console.log(`"2" - 1 = ${"2"-1}`);
18 console.log(`2 - "1" = ${2-"1"}`); 1. Les opérateurs « - », « * », « / », « % »,
19 console.log(`"1a" - 1 = ${"1a"-1}`); « ** » et « + et – unaires » tentent de
20 convertir leurs opérandes de n’importe
21 // Multiplication (*) ////////////////////// quel type en nombres avant de
22 console.log(`5 * 4 = ${5*4}`); procéder à l’opération arithmétique.
23 console.log(`true * 4 = ${true*4}`);
24
25
26
27
console.log(`"3" * 4
console.log(`"a" * 4
= ${"3"*4}`);
= ${"a"*4}`);
// Multiplication (/) //////////////////////

!
2. Un valeur qui ne peut être convertie en
nombre vaudra NaN (Not A Number) et
toute opération arithmétique sur un
NaN résulte en un NaN.
28 console.log(`5 / 4 = ${5/4}`);
29 console.log(`5 / 0 = ${5/0}`); 3. En JavaScript la division par zéro n’est
30 console.log(`true / 4 = ${true/4}`); pas interdite. Son résultat est
31 console.log(`"3" / 4 = ${"3"/4}`); « Infinity ».
32 console.log(`"a" / 4 = ${"a"/4}`);
33
34
35

Opérateurs
1. Opérateurs arithmétiques (suite)
// Modulo (%) //////////////////////////////
35 console.log(`5 % 4 = ${5%4}`);
36 console.log(`5 % 0 = ${5%0}`);
37 console.log(`3 % 8 = ${3%8}`);
38 console.log(`-3 % 8 = ${-3%8}`);
39 console.log(`0 % 9 = ${0%9}`);
40 console.log(`"3" % 4 = ${"3"%4}`);
41 console.log(`"3" % "4" = ${"3"%"4"}`);
42 console.log(`"a" % 4 = ${"a"%4}`);
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

Opérateurs
// Modulo (%) //////////////////////////////
35 console.log(`5 % 4 = ${5%4}`);
36 console.log(`5 % 0 = ${5%0}`);
37 console.log(`3 % 8 = ${3%8}`);
38 console.log(`-3 % 8 = ${-3%8}`);
39 console.log(`0 % 9 = ${0%9}`);
40 console.log(`"3" % 4 = ${"3"%4}`);
41 console.log(`"3" % "4" = ${"3"%"4"}`);
42 console.log(`"a" % 4 = ${"a"%4}`);
43
44 // Exponentiation (**) /////////////////////
45 console.log(`-2 ** 3 = ${-2**3}`);
46 console.log(`"2" ** 3 = ${"2"**3}`);
47 console.log(`(-2) ** 3 = ${(-2)**3}`);
48 console.log(`-(2 ** 3) = ${-(2**3)}`);
49 console.log(`2 ** 3 ** 2 = ${2 ** 3 ** 2}`);
50 console.log(`2 ** (3 ** 2)= ${2 ** (3 ** 2)}`);
51 console.log(`(2 ** 3) ** 2= ${(2 ** 3) ** 2}`);
52 console.log(`27 ** 1/3 = ${27**1/3}`);
53 console.log(`27 ** (1/3) = ${27**(1/3)}`);
54
55
56
57
58
59
60
61

Opérateurs
// Modulo (%) //////////////////////////////
35 console.log(`5 % 4 = ${5%4}`);
36 console.log(`5 % 0 = ${5%0}`);
37 console.log(`3 % 8 = ${3%8}`);
38 console.log(`-3 % 8 = ${-3%8}`);
39 console.log(`0 % 9 = ${0%9}`);
40 console.log(`"3" % 4 = ${"3"%4}`);
41 console.log(`"3" % "4" = ${"3"%"4"}`);
42 console.log(`"a" % 4 = ${"a"%4}`);
43
44 // Exponentiation (**) /////////////////////
45 console.log(`-2 ** 3 = ${-2**3}`);
46 console.log(`"2" ** 3 = ${"2"**3}`);
47 console.log(`(-2) ** 3 = ${(-2)**3}`);
48 console.log(`-(2 ** 3) = ${-(2**3)}`);
49 console.log(`2 ** 3 ** 2 = ${2 ** 3 ** 2}`);
50 console.log(`2 ** (3 ** 2)= ${2 ** (3 ** 2)}`);
51 console.log(`(2 ** 3) ** 2= ${(2 ** 3) ** 2}`);
52 console.log(`27 ** 1/3 = ${27**1/3}`);
53 console.log(`27 ** (1/3) = ${27**(1/3)}`);
54
55 // Négation unaire (-) /////////////////////
56 console.log(`-"2" = ${-"2"}`);
57 console.log(`-true = ${-true}`);
58 console.log(`-"deux" = ${-"deux"}`);
59 // Plus unaire (+) /////////////////////////
60 console.log(`+"0" = ${+"0"}`);
61 console.log(`+false = ${+false}`);

Opérateurs
2. Opérateurs d’incrémentation et de décrémentation
01 09_opIncrDecr
02
03 let a = 10, b = 20;
04 console.log(à = ${a} | b = ${b}`); a b
05
06 //Opérateur de pré-incrémentation (++var) 10 20
07 ++b;
08 a = ++b;
09 console.log(++b);
10 console.log(à = ${a} | b = ${b}`);
11 Console
12 //Opérateur de post-incrémentation (var++)
13 b++;
14 a = b++; 04> a = 10 | b = 20
15 console.log(b++);
16 console.log(à = ${a} | b = ${b}`);
17
18 //Opérateur de pré-décrémentation (--var)
19 --b;
20 a = --b;
21 console.log(--b);
22 console.log(à = ${a} | b = ${b}`);
23
24 //Opérateur de post-décrémentation (var--)
25 b--;
26 a = b--;
27 console.log(b--);
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
16 console.log(à = ${a} | b = ${b}`);
17
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
16 console.log(à = ${a} | b = ${b}`);
17
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
16 console.log(à = ${a} | b = ${b}`);
17
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
16 console.log(à = ${a} | b = ${b}`);
17
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b;
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b;
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`);
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
22> a = 24 | b = 23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
22> a = 24 | b = 23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
22> a = 24 | b = 23
25 b--;
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
22> a = 24 | b = 23
25 b--; 27> 21
26 a = b--;
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 09_opIncrDecr
02
03 let a = 10, b = 20;
05
07 ++b;
08 a = ++b;
10 console.log(à = ${a} | b = ${b}`);
11 Console
13 b++;
14 a = b++; 04> a = 10 | b = 20
09> 23
16 console.log(à = ${a} | b = ${b}`);
17 10> a = 22 | b = 23
19 --b; 15> 25
20 a = --b; 16> a = 24 | b = 26
22 console.log(à = ${a} | b = ${b}`); 21> 23
23
22> a = 24 | b = 23
25 b--; 27> 21
26 a = b--;
28> a = 22 | b = 20
28 console.log(à = ${a} | b = ${b}`);

Opérateurs
01 let nb = 10, x = 2; 10_opAffCombinée
02 let ch = "DAA";
03 console.log(`nb = ${nb} | x = ${x} | ch = ${ch}`);
04
05 // +=
06 console.log(`nb += 10 <=> (nb = nb + 10) >> nb = ${nb += 10}`);
07 console.log(`nb += x <=> (nb = nb + x) >> nb = ${nb += x}`); nb x
08 console.log("ch += \" (\" + x + \"ième version)\"\n" +
09 "<=> ch = ch + \" (\" + x + \"ième version)\"\n" +
10 ">> ch = " + (ch += " (" + x + "ième version)")); 10 2
11
12 // -= ch
13 console.log(`nb -= 10 <=> (nb = nb - 10) >> nb = ${nb -= 10}`);
14 console.log(`nb -= x <=> (nb = nb - x) >> nb = ${nb -= x}`);
15 DAA
16 // *=
17 console.log(`nb *= 2 <=> (nb = nb * 2) >> nb = ${nb *= 2}`);
18 console.log(`nb *= nb <=> (nb = nb * nb) >> nb = ${nb *= nb}`);
19
20 // /=
21 console.log(`nb /= 4 <=> (nb = nb / 4) >> nb = ${nb /= 4}`);
22 console.log(`nb /= x <=> (nb = nb / x) >> nb = ${nb /= x}`);
23
24 // %=
25 console.log(`nb %= 2 <=> (nb = nb % 2) >> nb = ${nb %= 2}`);
26
27 // **=
28 console.log(`x **= 10 <=> (x = x ** 10) >> x = ${x **= 10}`);

Opérateurs
01 let nb = 10, x = 2; 10_opAffCombinée nb x ch
02 let ch = "DAA";
03 console.log(`nb = ${nb} | x = ${x} | ch = ${ch}`); 10 2 DAA
04
05 // +=
07 console.log(`nb += x <=> (nb = nb + x) >> nb = ${nb += x}`);
10 ">> ch = " + (ch += " (" + x + "ième version)"));
11
12 // -=
13 console.log(`nb -= 10 <=> (nb = nb - 10) >> nb = ${nb -= 10}`); nb x ch
15 22 2 DAA (2ième version)
16 // *=
19
20 // /=
23
24 // %=
26
27 // **=

Opérateurs
02 let ch = "DAA";
04
05 // +=
06 console.log(`nb += 10 <=> (nb = nb + 10) >> nb = ${nb += 10}`); nb x
22 2
11
12 // -=
15
16 // *=
19
nb x
20 // /=
21 console.log(`nb /= 4 <=> (nb = nb / 4) >> nb = ${nb /= 4}`); 10 2
23
24 // %=
26
27 // **=

Opérateurs
02 let ch = "DAA";
04
05 // +=
11
nb x
12 // -=
13 console.log(`nb -= 10 <=> (nb = nb - 10) >> nb = ${nb -= 10}`); 10 2
15
16 // *=
19
20 // /=
23 nb x
24 // %=
25 console.log(`nb %= 2 <=> (nb = nb % 2) >> nb = ${nb %= 2}`); 400 2
26
27 // **=

Opérateurs
02 let ch = "DAA";
04
05 // +=
11
12 // -=
15 nb x
16 // *=
17 console.log(`nb *= 2 <=> (nb = nb * 2) >> nb = ${nb *= 2}`); 400 2
19
20 // /=
23
24 // %= nb x
26 50 2
27 // **=

Opérateurs
02 let ch = "DAA";
04
05 // +=
11
12 // -=
15
16 // *=
19 nb
20 // /=
nb
22 console.log(`nb /= x <=> (nb = nb / x) >> nb = ${nb /= x}`); 50 0
23
24 // %=
26
27 // **=

Opérateurs
02 let ch = "DAA";
04
05 // +=
11
12 // -=
15
16 // *=
19
20 // /=
22 console.log(`nb /= x <=> (nb = nb / x) >> nb = ${nb /= x}`); x x
23
24 // %=
2 1024
26
27 // **=

JavaScript
1. Opérations mathématiques
2. Générations de nombres aléatoires Quelques opérations communes
3. Opérations sur les chaînes de caractères

Opérations communes
1. Opérations mathématiques
01 11_opérationsNombres
02 //Exponentiation
03 console.log(`Math.pow(2,10) = ${Math.pow(2,10)}`);
04
05 //Valeur arrondie
06 console.log(`Math.round(.5) = ${Math.round(.5)}`);
07 console.log(`Math.round(.49) = ${Math.round(.49)}`);
08
09 //Valeur plafond
10 console.log(`Math.ceil(.001) = ${Math.ceil(.001)}`);
11
12 //Valeur plancher
13 console.log(`Math.floor(.99) = ${Math.floor(.99)}`);
14
15 //Valeur absolue
16 console.log(`Math.abs(-100) = ${Math.abs(-100)}`);
17
18 //Valeur maximale parmi plusieurs (une à plusieurs)
19 console.log(`Math.max(5,7,2) = ${Math.max(5,7,2)}`);
20
21 //Valeur minimale parmi plusieurs (une à plusieurs)
22 console.log(`Math.min(5,7,2) = ${Math.min(5,7,2)}`);
23
24 //Valeur de la racine carrée
25 console.log(`Math.sqrt(16) = ${Math.sqrt(16)}`);
26
27 //Valeur de la racine cubique
28 console.log(`Math.cbrt(27) = ${Math.cbrt(27)}`);
JavaScript – Quelques opérations communes Mehdi Lahlou © 2019 68

2. Génération de nombres aléatoires
01 //Nombre (réel) aléatoire appartenant à l'intervalle [0,1[ 11_opérationsNombres
02 let alea = Math.random();

03 console.log(`Nombre réel aléatoire ∈ [0, 1[ = ${alea}`);
04 console.log(`Fixer l'affichage à deux décimales = ${alea.toFixed(2)}`);
05
06
07 //Nombre entier aléatoire entre 5 et 15 (inclus)
08 alea = window.parseInt(alea * 11) + 5;
09 console.log(`Nombre entier aléatoire ∈ [5, 15] = ${alea}`);

3. Opérations sur les chaînes de caractères
01 let dest = "tous"; 12_opérationsChaines
02 let msg = "Bienvenue à " + dest + " !";

03
04 console.log(`msg = ${msg}\n\
05 ^^^^^^^^^^^^^^^^^^\n\
06 012345678911111111\n\
07 01234567`);
08
09 //Récupérer la longueur d'une chaîne
10 console.log(`msg.length .............. = ${msg.length}`);
11
12 //Extraction d'une sous-chaine
13 console.log(`msg.substring(12) ....... = ${msg.substring(12)}`);
14 console.log(`msg.substring(12,16) .... = ${msg.substring(12, 16)}`);
15
16 console.log(`msg.slice(0,9) .......... = ${msg.slice(0,9)}`);
17 console.log(`msg.slice(9) ............ = ${msg.slice(9)}`);
18 console.log(`msg.slice(-6) ........... = ${msg.slice(-6)}`);
19
20 //Recherche dans une chaine
21 console.log(`msg.indexOf("u") ........ = ${msg.indexOf("u")}`);
22 console.log(`msg.indexOf("u", 8) ..... = ${msg.indexOf("u", 8)}`);
23 console.log(`msg.lastIndexOf("u") .... = ${msg.lastIndexOf("u")}`);
24 // ES6
25 console.log(`msg.startsWith("B") ..... = ${msg.startsWith("B")}`);
26 console.log(`msg.endsWith("!") ....... = ${msg.endsWith("!")}`);
27 console.log(`msg.includes("us") ...... = ${msg.includes("us")}`);
28

3. Opérations sur les chaînes de caractères (suite)
01 12_opérationsChaines
02
03
04
05
06 //Création de versions modifiées
07 console.log(`msg.replace("us", "dos") = ${msg.replace("us", "dos")}`);
08 console.log(`msg.toLowerCase() ....... = ${msg.toLowerCase()}`);
09 console.log(`msg.toUpperCase() ....... = ${msg.toUpperCase()}`);
10
11 //Récupéreation d'un simple caractère
12 console.log(`msg.charAt(0) ........... = ${msg.charAt(0)}`);
13 console.log(`msg.charAt(msg.length-1) = ${msg.charAt(msg.length-1)}`);
14
15 //Remplissage (padding)
16 console.log(`"ab".padStart(4) ........ = ${"ab".padStart(4)}`);
17 console.log(`"ab".padStart(4, "-") ... = ${"ab".padStart(4, "-")}`);
18 console.log(`"ab".padEnd(4, "-") ..... = ${"ab".padEnd(4, "-")}`);
19
20 //Tailler (trimming)
21 console.log(`" ab ".trim()+"|" ... = ${" ab ".trim()}|`);
22 console.log(`" ab ".trimStart()+"|"= ${" ab ".trimStart()}|`);
23 console.log(`" ab ".trimEnd() +"|"= ${" ab ".trimEnd()}|`);
24
25 console.log(`"ab".repeat(4) .......... = ${"ab".repeat(4)}`);
26
27
28

Exemple de synthèse : affichage d’une facture
Les bases – Exemple de synthèse Mehdi Lahlou © 2019 72

Exemple de synthèse : affichage d’une facture (code JS)
01 13_affichageFacture 29 " </caption>" + 13_affichageFacture
02 //Pourcentages établis des taxes provinciale et fédérale 30 " <tr>" +
03 const TAUX_TPS = 5; 31 " <th class=\"\"></th>“ +
04 const TAUX_TVQ = 9.975; 32 " <th class=\"text-center\">Montant</th>" +
05 33 " </tr><tr>" +
06 //Variables servant à emmagasiner les calculs 34 " <th>Montant avant taxes</th>" +
07 intermédiaires 35 " <td class=\"text-right\">" +
08 let montant; 36 montant.toFixed(2) + " $" +
09 let montantTPS; 37 " </td>" +
10 let montantTVQ; 38 " </tr><tr>" +
11 let montantTTC; 39 " <th>TPS (" + TAUX_TPS + "%)</th>" +
12 40 " <td class=\"text-right\">" +
13 //Lecture du montant avant taxes 41 montantTPS.toFixed(2) + " $" +
14 montant = window.parseFloat( 42 " </td>" +
15 window.prompt("Quel est le montant total AT :", 100) 43 " </tr><tr>" +
16 ); 44 " <th>TVQ (" + TAUX_TVQ + "%)</th>" +
17 45 " <td class=\"text-right\">" +
18 //Calcul du montant de la TPS 46 montantTVQ.toFixed(2) + " $" +
19 montantTPS = Math.ceil(montant * TAUX_TPS) / 100; 47 " </td>" +
20 //Calcul du montant de la TVQ 48 " </tr><tr>" +
21 montantTVQ = Math.ceil(montant * TAUX_TVQ) / 100; 49 " <th>Montant TTC</th>" +
22 //Calcul du montant total (toutes taxes incluses) 50 " <td class=\"text-right\">" +
23 montantTTC = montant + montantTPS + montantTVQ; 51 montantTTC.toFixed(2) + " $" +
24 52 " </td>" +
25 let codeHTML = 53 " </tr></table>";
26 "<table class=\"table table-bordered table-dark\">" + 54
27 " <caption class=\"text-center\">" + 55 document.write(codeHTML);
28 " Calcul des taxes" + 56
Les bases – Exemple de synthèse Mehdi Lahlou © 2019 73

03A JavaScript Introduction

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

03A JavaScript Introduction

Transféré par

Droits d'auteur :

Formats disponibles

Introduction à JavaScript

Mehdi Lahlou © 2019

• Documentation de la MDN • … suite

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 2

JavaScript est à la fois un langage très simple et très

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 3

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 4

ECMAScript DOM BOM

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 5

ECMAScript DOM BOM

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 6

ECMAScript DOM BOM

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 7

ECMAScript DOM BOM

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 8

ECMAScript DOM BOM

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 9

TECH20711 – Développement d’applications d’affaires 10

02 <html> 02 window.alert("Message de bienvenue !");

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 11

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 12

Inclure du code JavaScript à l'aide de fichiers externes est

Parmi les avantages que procure l’utilisation de fichiers JS externes :

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 13

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 14

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 15

servent à des utilisations spécifiques 14 await enum

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 16

TECH20711 – Développement d’applications d’affaires Mehdi Lahlou © 2019 17

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 18

02 //Déclaration de la constante TAUX_TPS sans initialisation

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 19

! Afin d’éviter toute ambiguïté, nous terminerons

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 20

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 21

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 22

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 23

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 24

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 25

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 26

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 27

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 28

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 29

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 30

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 31

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 32

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 33

TECH20711 – Développement d’applications d’affaires 34

// Soustraction (-) ////////////////////////

// Multiplication (/) //////////////////////

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 35

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 36

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 37

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 38

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 39

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 40

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 41

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 42

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 43

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 44

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 45

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 46

JavaScript – Les éléments du langage Mehdi Lahlou © 2019 47