Introduction au langage

JavaScript (1 ère partie)

Philippe Genoud
[Link]@[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 4

 • Historique et évolution de JavaScript
• JavaScript côté client et JavaScript côté serveur
- JavaScript dans le navigateur
- JavaScript côté serveur ([Link])
- (WebAssembly)
• Intégration de JavaScript dans une page Web
• Types de bases et variables
- déclaration de variables
- constantes
- type d'une variable
- opérateurs et expression
• Structures de contrôle

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 5

 Motivation
• JavaScript un langage incontournable du développement Web

[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 6

 Motivation
• JavaScript un langage incontournable du développement (web)
[Link] [Link]

[Link]

[Link]

[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD et bien d'autres encore [Link] ….
7
 Quelques idées fausses

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 8

 Quelques idées fausses
• JavaScript est la version script de Java.
• Non ! JavaScript n'a (presque) rien à voir avec Java !
JavaScript Java
• Créé par Netscape (dec. 1995) • Créé par Sun Microsystems (mai 1995)
• Syntaxe dérivée du C/C++ • Syntaxe dérivée du C/C++

• Langage interprété : • Langage compilé :

• Pas de compilation • Compilation vers du ByteCode
• Exécution directe dans un • Exécution nécessite machine
interpréteur virtuelle Java
• Typage dynamique • Type statique
• Plus de souplesse mais moins • Contrôles à la compilation, moins
de contrôles souple mais plus robuste
• Modèle objet à base de Prototypes • Modèle objet à base de Classes
• Un vrai langage fonctionnel • Un langage impératif
[Link] • Les fonctions sont des objets de 1er • lambda expressions introduites dans
/java-vs-javascript ordre (1rst class objects) Java 8 (2014)
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 9
 Quelques idées fausses
• JavaScript est le langage du Web
JavaScript serait donc la seule [Link]
technologie applicative côté
client ?

• JavaScript intégré aux navigateurs Web • Mais avec :

• le développement d'AJAX (Asynchronous JavaScript
and XML)
• la normalisation du langage et un meilleur support par
tous les navigateurs
• l'introduction de HTML5 (et de ses nombreuses API
JavaScript)

• Mais d'autres technologies ont été JavaScript est

développées pour s'exécuter côté client revenu au tout
- Adobe Flash 1er plan
- applets Java
Mais plus tout seul
WebAssembly
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 10
 Quelques idées fausses
• JavaScript est pour les clients Web
• oui… mais pas que. [Link]

• JSON s'impose de plus en

plus comme un format
• Historiquement JavaScript d'échange de données • Depuis 2009/2010 de plus en plus
intégré aux navigateurs présent côté serveur

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 11

 Quelques idées fausses
• JavaScript est un langage simple et facile à apprendre
[Link]
• Cela se discute… JavaScript n'est pas un langage
sans défauts et il peut être parfois délicat à utiliser
[Link]
programming-languages-to-learn

"La plupart des langages contiennent des

bons et des mauvais éléments. … Le
JavaScript est un langage particulièrement
bien loti en ce qui concerne les mauvais
éléments… Mais le JavaScript contient
heureusement un certain nombre d'éléments
exceptionnellement bons…"
Douglas Crockford
JavaScript, les bons éléments
Ed. Pearson France, 2013

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 12

 Historique

succès stagnation l'essor

initial

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 13

 Historique

ECMAScript 4 ECMAScript 6*
JScript début des travaux let, const
(MS IE 3.0) classes et modules
ECMAScript 3 ECMAScript 4 Chrome
ECMAScript 2 abandon moteur ECMAScript 7
Javascript V8 opérateur **
ECMA-262 Ed.1 [Link]
(ECMAScript 1) ECMAScript 5
TC39 commitee mode strict ECMAScript 8
JSON async/wait
(Mai) Brendan Eich Mocha
(Sep.) Mocha LiveScript Node JS ECMAScript 9
(Dec.) LiveScript JavaScript basé sur V8 propriétés rest/spread,
(Netscape Navigator 2.0) de Chrome iteration asynchrone
ECMA: European Computer Manufacturers Association ajouts aux RegExp
ECMA-262: nom officiel du standard *à partir de 2015 les versions de ECMAScript sont numérotées par leur
ECMAScript: nom du langage année de publication ECMAScript 2015, ECMAscript 2016...

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 14

 Support par les différents navigateurs

ES5 ES6 ES7 ES8 ES9

ECMAScript 5 ECMAScript 6 ECMAScript7
Navigateur Version Date Version Date Version Date
Chrome 23 Sept. 2012 68 Avr. 2017 68 Mai 2018
Firefox 21 Avr. 2013 54 Juin 2017
IE 9* Mars 2011 - - - -
Edge 10 Sept. 2012 14 Août 2016
Safari 6 Juil. 2012 10 Sept. 2016
Opera 15 Juil. 2013 55 Août 2017 47 Juil. 2018
*IE 9 ne supporte pas mode strict d'après [Link]

[Link]
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 15

 Environnements d'exécution JavaScript
• analyse et exécution du code JavaScript sont effectué par un moteur Javascript
(JavaScript Engine) qui s'exécute dans un environnement hôte

Navigateur web (browser) Node (programme C++)

JavaScript
Engine

Chrome: V8
Environnement JS Environnement JS
Firefox: SpiderMonkey
Safari: WebKit

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 16

 Environnements d'exécution JavaScript
• dans l'environnement JavaScript on distingue
- core javascript : correspond aux spécifications de la norme ECMAScript
- javascript hébergé: intègre des objets spécifiques à l'environnement
Navigateur web (browser) Node (programme C++)

Core Core
Javascript Javascript

Javascript
ECMAScript Javascript
hébergé hébergé
(Embedded) (Embedded)

Environnement JS Environnement JS
Objets Objets
spécifiques spécifiques
objet global window modules [Link]
objet document (DOM) MongoDB, CouchDB
objets workers… …

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 17

 JavaScript dans un navigateur
• Code JavaScript peut être inclus dans des pages HTML
Et alors ? En quoi JavaScript est-il si
différent d'autres langages comme PHP,
JSP, ASP ?

[Link] [Link]
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Hello world</title> <title>Hello world</title>
</head> </head>
<body> <body>
<h1>Hello</h1> <h1>Hello</h1>
<p> <p>
<script> <?php
for (i=0; i < 5; i++) { for ($i=0; $i < 5; $i++) {
[Link]("Hello World !</br>"); echo "Hello World !</br>";
} }
</script> ?>
</p> </p>
</body> </body>
</html> </html>

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 18

 JavaScript dans le navigateur
• un script PHP s'exécute côté serveur

[Link]

GET [Link]

le moteur PHP exécute le

script PHP et produit le
code HTML qui est renvoyé
au client

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 19

 JavaScript dans le navigateur
• un script JavaScript s'exécute côté client (dans le navigateur)

[Link]

GET [Link]

La page HTML est renvoyée telle

quelle au navigateur.
C'est le moteur JavaScript du
navigateur interprète le script et
modifie le DOM (Document
Object Model) de la page HTML

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 20

 JavaScript dans le navigateur
• La manière dont JavaScript fonctionne*

1 Ecriture 2 Chargement 3 Exécution

Vous créez vos pages HTML et Le navigateur récupère la page et charge la page en Le navigateur affiche la page.
votre code JavaScript que vous analysant (parsing) son contenu de haut en bas. JavaScript continue à s'exécuter, en utilisant
mettez dans un ou plusieurs le DOM pour examiner la page, la modifier,
fichiers Lorsque le navigateur rencontre du code JavaScript il recevoir des événements depuis celle-ci, ou
l'analyse, vérifie sa correction puis l'exécute pour demander au navigateur d'aller
chercher d'autres données sur le serveur
Le navigateur construit un modèle interne de la page
web
HTML : le DOM

*d'après "Head First HTML 5 programming"

Eric Freeman, Elisabeth Robson
Ed. O'Reilly, 2011
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 21
 ( WebAssembly

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 22

 WebAssambly
• JavaScript n'est plus tout seul !

[Link]

• WebAssembly
- Nouveau type de code pouvant être exécuté dans les navigateurs modernes
- Format binaire compact, rapide à charger et à exécuter
 performances proche du code natif
- Conçu pour être un cible de compilation efficace pour des langages source de bas
niveau (C, C++, Rust, …)
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 23
 WebAssembly
Assembleur : représente le langage machine
sous une forme textuelle lisible par un humain

*
Pour être exécutés les programmes écrits WebAssembly : pas un véritable langage
dans un langage de haut niveau doivent être d'assemblage
traduits en langage machine

Chaque type de processeur nécessite Code intermédiaire ne ciblant pas

un code machine (assembleur) spécifique de machine spécifique

Quand le navigateur charge du code

WebAssembly, il peut rapidement le
* traduire en code machine
*
* WebAssembly: How and why - Milica Mihajlija – Août 2018
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 24

 WebAssembly
• Code C, C++, Rust peut être compilé
vers du WebAssembly
(WASM : WebAssembly module)

.wat .wasm *

• Celui-ci peut être chargé dans une

application web et appelé depuis
JavaScript (et inversement)

* WebAssembly: How and why - Milica Mihajlija – Août 2018 *

[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 25

 WebAssembly
• Pour résumer WebAssembly apporte
- Vitesse
- Portabilité
- Flexibilité
• Développeurs web pourront choisir d'autre langages que JavaScript

[Link]
WebAssembly and the Death of JavaScript ?
Colin Eberhardt (Scott Logic)
WebAssembly: How and why - Milica Mihajlija – Août 2018
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 26

 WebAssembly
• Pour en savoir plus

- A Beginner’s guide to WebAssembly – Mars 2020

[Link]
- WebAssembly: How and why - Milica Mihajlija – Août 2018
[Link]
559b7f96cd71/
- WebAssembly
[Link]
- Le site officiel
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 27

 WebAssembly )

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 28

 Intégration de code JavaScript à une page HTML
• la balise <script> délimite code JavaScript fichier HTML

<head>
• peut être insérée soit dans l'entête (<head>) <script>
soit dans le corps (<body>) de la page HTML statement
</script>

• les scripts sont exécutés dans leur ordre <script src="[Link]">

</script>
d'apparition dans la page </head>
Placer les scripts dans l'en tête pour qu'ils soient chargés et <body>
exécutés avant la construction et l'affichage de la page …
code HTML
….
Par défaut, les scripts placés dans le body sont exécutés au fur et à <script>
mesure que celui-ci est chargé et que le DOM est construit. statement
 met en attente le moteur d'analyse HTML/CSS …
</script>
Souvent les scripts sont placés à la fin du corps de la page (juste …
avant </body>)  améliorer la vitesse de chargement de la page. code HTML
….
Images et css en provenance de différents sites peuvent être téléchargées
simultanément (en parallèle) mais une fois que le navigateur a rencontré une balise <script src="[Link]">
script ce n'est plus possible (par défaut)  les scripts bloquent les téléchargements </script>
parallèles
</body>
figure d'après "Head First HTML 5 programming"
Eric Freeman, Elisabeth Robson- Ed. O'Reilly, 2011

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 29

 Intégration de code JavaScript à une page HTML
• deux possibilités pour un élément <script> [Link]
- soit il contient des instructions JavaScript 1 <!DOCTYPE html>
<html>
- soit il pointe vers un fichier de script externe <head>
<title>Hello Good bye</title>
au travers de son attribut src 2 </head>
<body>
• url fichier externe, permet de localiser un fichier <h1>Hello</h1>
texte qui contient le code JavaScript. <p>

• url vers un fichier du site : chemin relatif ./chemin

<script> 1
for (i = 0; i < 5; i++) {
• url vers un fichier d'un site externe: http:// …. [Link]("Hello World !</br>");
}
• fonctionnement équivalent à une intégration directe </script>
du code JavaScript à cet endroit. </p>
<h1>Bye Bye</h1>
<p>
<script src="./js/[Link]"></script> 2
</p>
quand l'attribut src est utilisé il ne faut rien </body>
écrire entre les balises <script src="…"> </html>
chemin relatif
et </script>

[Link]
for (j = 0; j < 5; j++) {
[Link]("Bye Bye World !</br>");
}

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 30

 Intégration de code JavaScript à une page HTML
• Autres attributs de la balise <script>
• type
• ex : <script type="text/javascript"> ... </script>
• utilisé par certains "vieux codes".
• inutile avec les navigateurs modernes et HTML5 : JavaScript est le langage par défaut.
• async
• utilisable que pour des scripts externes (attribut src présent)
• indique si le script peut être évalué de manière asynchrone (chargé en parallèle à l'analyse de la page
(parsing) sans interrompre celle-ci, et évalué dès que son chargement est terminé).
Le deuxième script risque
Ordre des scripts n'est pas préservé. <script src="[Link]" async></script> d'être évalué avant que le
• false par défaut <script src="autre_script_utilisant_jquery.js" async></script> premier ait fini d'être
chargé  erreur
• defer
• utilisable que pour des scripts externes (attribut src présent)
• indique si le script doit être évalué de manière différée (une fois que la page aura été entièrement
analysée (parsée), avant événement DOMContentLoaded ), l'ordre des scripts est préservé
• false par défaut
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 31

 Intégration de code JavaScript à une page HTML
• possibilité de désactiver JavaScript dans le navigateur [Link]
<!DOCTYPE html>
JavaScript activé (par défaut dans les navigateurs) <html>
<head>
<script>
[Link]("<title>Hello world 1</title>");
</script>
JavaScript désactivé </head>
<body>
<h1>Hello</h1>
<p>
<script>
for (i=0; i < 5; i++) {
[Link]("Hello World !</br>");
commentaires HTML : }
masquent code pour </script>
</p>
navigateurs ne <h1>Bye Bye</h1>
supportant pas <p>
désactiver JavaScript dans Firefox JavaScript (on peut <script>
rencontrer cela dans <!--
for (i=0; i < 5; i++) {
du très vieux code) [Link]("Bye Bye World !</br>");
}
// -->
</script>
<noscript>
balise <noscript> Java script pas activé
définit alternative si </noscript>
JavaScript désactivé </p>
</body>
</html>

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 32

 Intégration de code JavaScript à une page HTML
[Link]
Affichage
• Core JavaScript
- [Link](message)
• affiche un message dans la console
• JavasScript dans un navigateur web
- [Link](markupText)
• écrit un flux de texte dans le document ouvert
- [Link](message)
• affiche un dialogue d'alerte contenant le texte spécifié.
- result = [Link](message, default)
• affiche un message et permet la saisie d'une valeur (chaîne de caractères)
- result = [Link](message)
• affiche une alerte avec un message et deux bouton OK (true) ou Cancel (false)
- en modifiant le contenu d'un élément HTML
• [Link]("id1").innerHTML= "Nouveau contenu";
• [Link]("#id1").innerHTML= "Nouveau contenu"; ES6 ECMACScrip2015
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 33
 Variables
• utilisées pour stocker temporairement des données dans la mémoire de l'ordinateur

valeur de la variable
'Hello World'

En JavaScript deux types de valeurs

• valeurs primitives
nom (identifiant)
• notation littérales
de la variable
‐de nombres (14, 3.14159, 3.25e-6)
‐de chaînes de caractères ('Ceci est une chaîne',
"cela c'est aussi une chaîne")
• valeurs natives (built-in) (true, false, undefined,
null, NaN, Infinity)
• objets
• c’est-à-dire des conteneurs (par exemple un tableau),
la valeur de la variable dans ce cas est l'adresse
(référence) du conteneur.

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 34

 Variables : règles de nommage
• une variable doit être désignée avec un nom unique (dans sa portée) : identifiant
• règles similaires à celles de la plupart des langages
- noms ne peuvent contenir d'espace, d'opérateurs arithmétiques (+ , -, /, *) ou de caractère
de ponctuation (. , ; )
- noms peuvent contenir des lettres, chiffres, _ ou $
- noms ne peuvent commencer par un chiffre
- noms sensibles à la casse (case sensitive) maVariable  mavariable
- noms doivent être différents des mots réservés (par ex. var, if, while, function…).

• bonnes pratiques
- choisir des noms descriptifs
• par exemple pour un variable correspondant à une moyenne on préfèrera moyenne à m
- ne pas hésiter à utiliser plusieurs mots pour décrire avec précision le rôle d’un variable
• par exemple pour une pour un variable correspondant à un prix unitaire d'un produit on préfèrera prixUnitaire à pu
- adopter des règles de nommage cohérentes dans tout le code
• Définir un glossaire, réutiliser les mêmes termes partout • Conserver les mêmes conventions d’écriture
user visitor user user
userName User_name userName userName
camel case

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 35

 Variables : règles de nommage
• Comment regrouper plusieurs mots dans un identifiant
- Ex : variable représentant l’âge du capitaine. ac agec agecap ageducapitaine

• Conventions d’écriture couramment utilisées

Camel case Pascal case Snake case Kebab case
ageDuCapitaine AgeDuCapitaine age_du_capitaine age-du-capitaine
AGE_DU_CAPITAINE

Identifiants de classes de styles CSS

URL

Identifiants de variables ou fonctions Identifiants de Classes Identifiants de Constantes

Images d’après @allison_horst

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 36

 Variables: déclaration
• historiquement déclaration par var nomDeVariable ;
• mais depuis ES6 la bonne pratique et d'utiliser let au lieu de var

var nomDeVariable; let nomDeVariable;

Patient tu dois être.

on peut même utiliser Les différences (subtiles
une variable sans la parfois) plus tard seront
déclarer ! expliquées

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 37

 Variables: déclaration //Déclaration de a, de b et de c.
let a;
[Link](a);
let b,c;
• JavaScript langage avec typage //Affectation de a avec un entier.
dynamique a = 1;
[Link](a);
- type d'une variable défini qu'au // Affectation de a avec une chaîne
moment de l'exécution a = "une chaîne de caractères";
[Link](a);
- possibilité de changer le type d'une
//forme littérale pour une entier
variable à l'exécution let prix = 150;
[Link](prix);
• pas obligation d'initialiser une
//forme littérale pour un réel.
variable à sa déclaration let tva= 19.6;
[Link](tva);
- une variable non initialisée a la valeur
undefined //forme littérale pour un tableau d'entiers
let tab1 = [ 1, 2, 3, 4 ];

• possibilité d'initialiser une variable [Link](tab1);

//forme littérale pour un objet
à sa déclaration à l'aide let etud= {
"nom":"Bolloli",
d'expressions littérales };
"prenom":"Marco"

[Link](etud);

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 38

 Constantes
• parfois il peut être intéressant d'empêcher la modification d'une variable

let tauxTVA = 0.20; // TVA à 20 %

let tauxReduc = 0;
int nbProduitsAchetes = 0;

...
if (nbProduitsAchete >= 5) {
// appliquer un taux de réduction de 25 %
tauxTVA = 0.25;
}
...

va provoquer des résultats d'exécution erronés,

bug peut être difficile à corriger lorsque la taille du code est importante

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 39

 Constante
• possibilité de déclarer des constantes en JavaScript
• utiliser const au lieu de let
const
let tauxTVA
tauxTVA
= =
19.6;
0.2; obligation d'initialiser la variable à sa déclaration
let tauxReduc = 0;
int nbProduitsAchetes = 0;

...
if (nbProduitsAchete >= 5) {
// appliquer un taux de réduction de 25 %
tauxTVA = 0.25; une tentative de modification de la constante va provoquer une
} erreur d'exécution avec un message explicite sur la console
...

utiliser des majuscules pour les noms de constantes

const TAUX_TVA = 0.2;

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 40

 Type d'une variable
--------------------------> undefined

• JavaScript est un langage dynamique :

-----------------------------> number
le type d'une variable peut changer au
cours de l'exécution d'un programme. -----------------------------> string

• opérateur typeof permet de --------------- ---------> boolean

déterminer le type d'une variable.
--------------------------> number

--------------------------> number

--------------------------> object

--------------------------> object

----------------> object

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 41

 Types de base
• types primitifs : définissent des valeurs primitives (nombres, chaînes de caractères,
booléens) qui sont stockées dans une variable
• number : permet de représenter les nombres (nombre flottants double précision sur 64 bits, format IEEE
754)
• Nombres décimaux compris entre 2-1074 (Number.MIN_VALUE) et 21074 (Number.MAX_VALUE) pour les nombres
positifs et -21074 et -2-1074 pour les nombres négatifs
• Nombres entiers entre –(253 – 1) (Number.MIN_SAFE_VALUE) et 253 – 1 (Number.MAX_SAFE_VALUE)
• Valeurs particulières vers lesquelles sont automatiquement convertiesles valeurs en dehors de 2-1074 et 21074 sont
automatiquement converties vers des valeurs particulières
• +Infinity : valeurs positives > Number.MAX_VALUE
• -Infinity : valeurs négatives < -Number.MAX_VALUE
• +0 : valeurs positives < Number.MIN_VALUE
• -0 : Valeurs négatives > -Number.MIN_VALUE
• NaN (Not a Number)
• valeur rencontrée quand le résultat d’une opération arithmétique
ne peut pas être représentée par un nombre
• C’est la seule valeur en JavaScript qui n’est pas égale à elle même

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 42

 Types de base
• types primitifs (suite) Pas de type char !

• string
• Représente des données textuelles (chaînes de caractères) encodées comme une séquence d’entiers
non signés sur 16 bits (2 octets) représentant une unité de code UTF-16
• Chaque lettre de la chaîne occupe une position définie par une position (index) : 0 pour la première
lettre, 1 pour la deuxième, …
• La longueur de chaîne (length) est le nombre d’unités de codes UTF-16 (mots de 2 octets).
• Ce n’est pas nécessairement le nombre de caractères Unicode (certains caractères exotiques peuvent être
codés sur plus de 2 octets).
• Expressions littérales pour les chaînes délimitées par des guillemets (quotes) : " ou ' ou `(backticks)

let nom = "DUPONT"; let s1 = "Voilà l'automne";

let prenom = 'Marie Louise'; let s2 = 'Il a dit : "Ah bon !"';

let nbHeures = 3; ${ … } permet d’inclure des variables et

let s3 = `durée en secondes : ${nbHeures * 60} s`; expressions dans une chaîne
La valeur de l’expression est évaluée et son résultat
 "durée en secondes : 180 s" devient partie de la chaîne

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 43

 Types de base
• types primitifs (suite et fin)
• boolean
• deux valeurs littérales : true (vrai) et false (faux).
• null
• La valeur spéciale null, n’appartient à aucun des types précédents et forme un type à elle toute
seule
let age = null; age null

• undefined
• possède une unique valeur, undefined affectée à une variable déclarée dont le contenu n'a jamais
été initialisé.
let age; age undefined

• bien que les types number, string et boolean définissent des valeurs primitives directement
stockées dans une variable, ils possèdent néanmoins des propriétés et méthodes (on parle
parfois de pseudo objets) nombre 114
let nombre = 114;
chaine "114"
let chaine = [Link]();
let nbreChiffres = [Link]; nbreChiffres 3
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 44
 Types de base
• Type objet
• object
• variable ne contient plus une valeur mais un référence (adresse) vers un objet complexe (valeur non
primitive)
• un objet est défini par un ensemble de propriétés qui peuvent être soit des valeurs primitives, soit elles
même des objets
• en plus de propriétés, des fonctions spécifiques (méthodes) peuvent être définies pour un objet
• mais de tout cela on reparlera plus tard…
let jedi = {
nom : 'Skywalker',
let nom = 'Skywalker'; prenom: 'Luke';
}

nom 'Skywalker'
nom 'Skywalker' jedi
prénom 'Luke'

variable de type primitif variable de type objet

la variable stocke la valeur la variable stocke la référence (adresse) de l'objet

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 45

 Opérateurs et instructions de contrôle
• JavaScript propose les opérateurs et instructions standards de C++/Java
• opérateurs
• arithmétiques
+, -, *, /, %, ++, --, **
• comparaisons
==, !=, <, >, <=, >=, ===, !==
• logiques
&&, ||, !
• instructions
• conditionnelles
if, if-else, switch
• itératives
for, while, do … while

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 46

 Conversion automatique des types
• JavaScript effectue des conversions automatiques de types
50 * 20 1000

'50' * '20' 1000 les valeurs de type string sont converties en valeurs de type number

l'opérateur + est surchargé quand les opérandes sont de type number c'est l'addition, quand ils
'50' + '20' '5020' sont de type string c'est la concaténation de chaînes
l'un des opérandes est de type string  + est la concaténation de chaînes, la valeur de type
'50' + 20 '5020' number est convertie en valeur type string
l'un des opérandes est de type string  + est la concaténation de chaînes, la valeur de type
50 + '20' '5020'
number est convertie en valeur type string

'50' - 20 30 l'opérateur - est la soustraction, la valeur de type string est convertie en valeur type number

50 + null 50 la valeur null est convertie en la valeur 0 de type number

'50' + null '50null' la valeur null est convertie en la valeur 'null' de type string

50 + undefined NaN
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 47
 Conversion automatique des types
• règles nombreuses et pas toujours intuitives
[Link]

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 48

 Conversion de type et opérateurs d'égalité
• JavaScript possède deux jeux d'opérateurs d'égalité

égalité et différence avec conversion

implicite des valeurs si les opérandes
== === égalité de valeur ET de type

sont de type différent. != !== différence de valeur OU type

let x = 3; let x = 3;
x == 3  true
? x === 3  ?true
x == '3'  true
? x === '3'  ?false

'' == '0'  false

0 == ''  true Règles de conversion
0 == '0'  true compliquées et difficiles utiliser === et !==
false == 'false'  false à mémoriser toujours tu dois !
false == '0'  true
false == undefined  false
false == null  false
null == undefined  true
' \t\r\n' == 0  true
exemple tiré de JavaScript, les bons éléments
Douglas Crockford, Ed. Pearson France, 2013
dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 49
 Truthy
• [Link]
• En JavaScript, on dit en anglais qu'une valeur est truthy lorsqu'elle est
considérée comme vraie (true) quand elle est évaluée dans un contexte
booléen.
• Toutes les valeurs des types autre que booléen sont truthy sauf 0, "", null,
undefined et NaN qui sont évaluées à false dans un contexte booléen.

let a; let a = 'Hello'; let a = parseInt("114z");

if (a) { if (a) { if (a) {
[Link]('Vrai'); [Link]('Vrai'); [Link]('Vrai');
} else { } else { } else {
[Link]('Faux'); [Link]('Faux'); [Link]('Faux');
} } }
 Faux  Vrai  Faux

dernière modification 19/10/2022 © UGA-2022 Philippe GENOUD 50