Chapitre 2: JavaScript

UP Web

AU: 2021/2022
Plan
Introduction

HTML & JavaScript

Syntaxe

Objets

Tableaux

Fonctions

2
Objectifs

• Manipuler le DOM.
• Différencier entre les événements.
• Ecrire un script en utilisant les fonctions prédéfinis,
événement…

Prérequis
• HTML

3
Introduction
• Javascript permet de rendre interactif un site internet développé en
HTML.

• Javascript est standardisé par un comité spécialisé, l'ECMA (European

Computer Manufactures Association).

• JavaScript est un langage de programmation:

– scripté (interprété́) - pas de compilateur à proprement parler.
– côté client - s’exécute dans un navigateur en général (il existe des environnements
côté serveur : NodeJS).
– asynchrone - plusieurs « morceaux » peuvent s’exécuter en parallèle.
4
Introduction

• JavaScript, permet :
– de spécifier des changements sur le document :
• sur le contenu: la structure, le style…
• en interceptant des évènements: souris, clavier, …

– échanger avec un serveur (AJAX)

– dessiner (canvas - bitmap - ou svg - vectoriel)

– se géolocaliser

– enregistrer localement du contenu

– jouer des fichiers audio ou vidéo

5
Introduction
• Utilitaires JavaScript

• On peut créer une base logicielle entièrement codée en JavaScript qui peut tourner sur
MEAN  MongoDB, Express.js, Angular.js, et Node.js au lieu de LAMP  Linux,
Apache, MySQL, PHP.

6
Introduction

ES 1 ES 3 ES 5.1 ES 7
1997 1999 2011 2016

1998 2009 2015 …

ES 2 ES 5 ES 6
A partir de 2015, la mise à
jour est annuelle.
 ES6 est le standard supporté par la plupart des nouvelles versions de navigateurs.
https://kangax.github.io/compat-table/es6/
7
HTML & JavaScript
Console • Firefox: Ctrl+Shift+K
développeur • Chrome / Edge: Ctrl+Shift+I

• <a href="#" onclick="alert('Vous avez cliqué !'); return

Balise HTML false;">Cliquez-moi !</a>

Code HTML
• <script> … </script>
(interne)

Fichier séparé
• <script src="script.js"></script>
(externe)
8
Exemple

• Tester le code suivant:

9
Exemple

• Résultat:

10
Syntaxe
Les commentaires
• Par ligne:

• Par Bloc:

• Remarque:

11
Syntaxe
Les boîtes de dialogue

12
Syntaxe
Les boîtes de dialogue

confirm: renvoie
true ou false

13
Syntaxe
Les boîtes de dialogue

prompt: renvoie la
valeur saisie ou Null

14
Syntaxe
Variable
• JavaScript est un langage pauvrement typé, il n’est pas indispensable de
déclarer préalablement le type de variable.

• Il existe trois types de déclarations de variable en JavaScript.

– var: déclare une variable, en initialisant sa valeur éventuellement.
– let: déclare une variable dont la portée se limite au bloc courant.
– const: déclare une constante, dont la portée se limite au bloc courant et accessible
en lecture seule.

15
Syntaxe
Variable
• Le nom d’une variable doit commencer par:
– Lettre
– Tiret bas (_)
– Symbole dollar ($)
• Les caractères qui suivent peuvent inclure les lettres minuscules et/ou majuscules et
les chiffres.
• Par convention:
– Noms de variables et fonctions écrits en CamelCase
– Noms de constantes écrits en majuscule
• Remarque:
– JavaScript est sensible à la casse: maVariable est différente de MaVariable.

16
Syntaxe
Variable
• Typage dynamique

• Types de données
– Primitifs: – Objet
• Booléen

• Null

• Undefined

• Nombre

• String
17
Syntaxe
Variable
• Evaluation

18
Syntaxe
Variable
• Portée

19
Syntaxe
Variable
• L’opérateur
typeof renvoie
le type d’une
variable.

20
Syntaxe
Opérateurs
Opérateur Explication Symbole
Addition • Additionner des nombres (1+5;) +
• Concaténer des chaînes (“Hello ” + “World! “;)

Arithmétique • Les opérateurs mathématiques de base: soustraction, division et multiplication -, /, *

• Opérateur de puissance (**)
• Reste de la division (%) **
%

Assignation • Affecte une valeur à une variable =

• Affectation après addition, soustraction, division, multiplication +=, -=, /=, *=
• Affectation du reste (x %= y  x = x % y)
%=

Négation • Non Logique: Renvoie la valeur opposé (false devient true) !

• Non Unaire: Renvoie l’opposé de l’opérande -
• Non binaire: Inverse les bits de l’opérande (~1  0) ~

21
Syntaxe
Opérateurs
Opérateur Explication Symbole
Incrémentation Ajoute / soustrait une unité à son opérande
Décrémentation • Suffixe: renvoie la valeur avant l’incrémentation / décrémentation X++, X--
• Préfixe: renvoie la valeur après l’incrémentation / décrémentation
++X, --X

Relationnel • Permet de comparer deux opérandes et de renvoyer une valeur booléenne <, >,
<=, >=

Binaire • ET binaire (AND) &

• OU binaire (OR) |

Logique • ET logique (AND) &&

• OU logique (OR) ||

Egalité • (in)égalité faible !==, ===

• (in)égalité stricte !=, ==

22
Syntaxe
Structure Conditionnelle
• if ( condition) {
// instructions
}
else {
// instructions
}

23
Syntaxe
Structure Itérative
• for ([exp. Initiale]; [Condition]; [incrément]) {
// instructions
}

• do {
// instructions
} while (condition);

• while (condition) {
// instructions
}

24
Objets
Définition

• Un objet est une entité à part entière qui possède des

propriétés.
• Une propriété est une association entre un nom (clé) et une
valeur.
• On accède à une propriété en utilisant les notations suivantes:
nom_Objet.nom_Propriété
nom_Objet[nom_Propriété]

25
Objets
Définition

• La création d’un objet peut se faire :

var nom_Objet = new Object();
var nom_Objet = { prop_1: valeur_1,
‘prop_2’: valeur_2,
prop_3: function() { …},
…,
10: valeur_10
};
Object.create(nom_Objet);
26
Objets
Exemple 1

27
Objets
Exemple 2

28
Tableau
• JavaScript ne possède pas de type particulier pour représenter
un tableau de données.
• Utiliser l'objet natif Array ainsi que ses méthodes pour manipuler
des tableaux.
• Pour créer un tableau:
– var arr = new Array(élément0, élément1, ..., élémentN);
– var arr = Array(élément0, élément1, ..., élémentN);
– var arr = [élément0, élément1, ..., élémentN];

29
Tableau
• Pour créer un tableau sans aucun élément initial et de longueur
non nulle (l):
– var arr = new Array (l);
– var arr = Array (l);
– var arr = [];
arr.length = l;
Rq: l doit être un nombre

30
Tableau
Exercice 1
• Tester les instructions suivantes:

31
Tableau
Exercice 2
• Tester les instructions suivantes:

33
Tableau
Exercice 3
• Tester les instructions suivantes:

35
Fonctions
Syntaxe
function nom_fonction () {
// instructions
}

36
Fonctions
Syntaxe
function nom_fonction (arg1, arg2, …) {
// instructions
}

37
Fonctions
Syntaxe
function nom_fonction (arg1 = value, arg2, …) {
// instructions
}

38
Fonctions
Syntaxe: Fonction anonyme
var x = function (arg1, arg2, …) {
// instructions
}

39
Fonctions
Syntaxe: Fonction anonyme
var x = function (arg1, arg2, …) {
// instructions
}

Une fonction anonyme peut être passée en paramètre.

40
Fonctions
Syntaxe: Arrow function
Plusieurs paramètres Un seul paramètre Sans paramètres

(arg1, arg2, …) => { (arg1)=> { // instructions } ()=> { // instructions }

// instructions arg1 => { // instructions }
}

41
Merci de votre attention