MODULE

PROGRAMMATION JAVASCRIPT

Année scolaire : 2025

Auteur et formateur : Dina Lam
 Sommair
e
• Partie I : Programmation basique
• Partie II : Manipulation de DOM
• Partie III : Evénements en JS
• Partie IV : Javascript Moderne (EscmaScript)
 Partie I :
Programmation de base Javascript
 CHAPITRE 1
INTRODUCTION AU JAVASCRIPT
 Introduction au Javascript

• Javascript est ….
✔ Un langage de programmation : script exécuté par le
navigateur.
✔ Majoritairement utilisé client-side.
✔ Orienté objet.
✔ Qui va nous permettre de manipuler dynamiquement du
HTML et du CSS
 CHAPITRE 2

ENVIRONNEMENT DE TRAVAIL
 Environnement de travail

• Que faut-il pour coder en Javascript?

✔ Utilisation d’un éditeur de texte.

✔ Utilisation de sites d’aperçus en temps réel (jsFiddle,…)
Environnement de travail
 CHAPITRE 3

COMMENTAIRE ET SYNTAXE
 Syntaxe et commentaires

• Objectifs :

✔ Découverte de la syntaxe de base de Javascript

✔ Savoir écrire un commentaire mono-ligne ou multi-ligne en
Javascript.
✔ Un mot sur l’indentation du code.
 Syntaxe et commentaires
• A chaque ligne de code JS, il faut terminer par un
point-virgule ‘;’
• Pour les chaines de caractères, on utilise le double ou simple
quote.
• Pour les chiffres décimaux, on utilise le ‘.’. Ex : alert(4.58).
 Syntaxe et commentaires
• Indentation : le faite de décaler la ligne de code à droite
pour avoir une lisibilité et meilleur compréhension. Avec 4
espaces ou avec la touche TAB.
• Commentaire : aide le développeur à comprendre plus vite
de code. Types : monoligne et multi-ligne.
 Syntaxe et commentaires
• Indentation : le faite de décaler la ligne de code à droite
pour avoir une lisibilité et meilleur compréhension. Avec 4
espaces ou avec la touche TAB.
• Commentaire : aide le développeur à comprendre plus vite
de code. Types : monoligne et multi-ligne.
 CHAPITRE 4

DECOUVERTES DES VARIABLES

 DÉCOUVERTE DES VARIABLES

• Objectifs
✔ Définition d’une variable en Javascript.
✔ Déclaration d’une variable.
✔ Introduction aux types de valeurs.
✔ L’opérateur d’affectation =
 Découverte des variables

• Variable sert à stocker des valeurs dans le temps en

écrasant sa valeur précédent en utilisant le signe ‘=‘
comme signe d’affectation mais pas une égalité.
• Déclaration avec le mot clé var suivi de son nom
unique appelé identifier.
• Règle d’écriture : commence par une lettre et suivi
des lettres non accentués et aussi des signes _ ou $.
Le nom d’une variable est sensible à la casse.
 DÉCOUVERTE DES VARIABLES

• Déclarations:
✔ Déclarer et lui assigné une valeur immédiatement.
✔ Déclarer sans valeur initiale et lui assigné plus tard.
✔ Déclarer plusieurs variables en même temps en
séparant par une virgule.
Découverte des variables
 CHAPITRE 6

TYPES DE VALEUR DES VARIABLES

 Les types de valeurs des variables

• Objectifs

✔ Découverte des principaux types de valeur

pouvant être stockés dans des variables
✔ Tester le type d’une variable avec la fonction
typeof
 Les types de valeurs des variables

• number : englobe tous type de nombre ( entier,

décimal…). On utilise le ‘.’ pour les nombres
décimaux.
 Les types de valeurs des variables

• string : utiliser pour stocker les chaines de caractères.

• Entouré les valeurs par des apostrophes ou guillemets.
 Les types de valeurs des variables

• boolean : stocker de type binaire true ou false.

• Sans guillemets et sans apostrophe.
 Les types de valeurs des variables

• null : non connaissance de la valeur.

• undefined : valeur indéfinie à la variable.
• NaN : not a number.

• La fonction typeof retourne le type de variable en

paramètre.
 CHAPITRE 7

OPERATIONS DES VARIABLES

 Les opérations sur les variables

• Objectifs :
✔ Manipulations de variables
✔ Opérations maths simples sur les variables et
priorités des calculs
✔ Notations condensées pour les opérations.
Les opérations sur les variables
 Les opérations sur les variables

✔ Simplification des écritures maths.

 CHAPITRE 8

CONCATENATION EN JAVASCRIPT
 La concaténation en JS

• Objectifs :
✔ Définition de la concaténation.
✔ Apprendre à concaténer avec l’opérateur « + »
✔ Concaténer un chiffre et une chaine de
caractères.
 La concaténation en JS

• Définition : c’est mettre bout à bout une chaine de

caractère ou additionner, en utilisant l’opérateur + .
La concaténation en JS
 CHAPITRE 9

LES CONDITIONS EN JAVASCRIPT

 Présentation des conditions en JS

• Objectifs :
✔ Définition des conditions
✔ Présentation des opérateurs de comparaison
✔ Comprendre comment le Javascript compare les
valeurs
 Présentation des conditions en JS
• Définition : Effectuer des actions selon différents
paramètres afin de dynamiser le site et avoir une
interactivité avec les visiteurs.
• Opérateurs de comparaison
Présentation des conditions en JS
 Les conditions if, if…else, ….elseif …..else

• Objectifs :
✔ Découverte de la structure conditionnelle if,
✔ Découverte de la structure conditionnelle if….else,
✔ Découverte de la structure conditionnelle if…else
if…else
✔ Condition imbriquées.
 Les conditions if, if…else, ….elseif …..else

• if : (si) exécuter une bloc de code si la condition est

vraie.
 Les conditions if, if…else, ….elseif …..else
• if…else : (si…sinon) exécuter une bloc de code si la
condition est vraie et exécuter une autre bloc de
autre dans les autres cas.
 Les conditions if, if…else, ….elseif …..else
• if…else if …else : (si…sinon si sinon) permettant d’
éxecuter autant de bloc de code suivant les cas.
Dans ce cas, on pourra insérer autant de elseif que
des cas.
 Les conditions if, if…else, ….elseif …..else
• Condition imbriquée : c’est une condition qui s’
éxecuter selon le cas d’une première condition. En
terme simple if à l’intérieur de if
 Les opérateurs logiques

• Objectifs :
✔ Trois opérateurs logiques à connaitre ET, OU et
CONTRAIRE
✔ Utilisés pour effectuer plusieurs comparaisons au
sein d’une condition.
 CHAPITRE 10

LES OPERATEURS LOGIQUES

 Les opérateurs logiques

✔ Ils sont utilisés au sein d’une condition afin d’

éffectuer plusieurs comparaison dans au sein d’
condition.
✔ ET : crée une intervalle de comparaison pour
variable.
 Les opérateurs logiques
✔ ET : crée une intervalle de comparaison pour
variable.
 Les opérateurs logiques
✔ OU : comparer la valeur d’une variable à deux
valeurs différentes. Si l’une de deux comparaisons
affiche le résultat attendu, le reste du code sera
executé.
 Les opérateurs logiques
✔ NOT : nier le résultat d’une comparaison.
 Evaluation – simplification des conditions

• Objectifs :
✔ Apprendre à simplifier l’écriture des conditions
✔ Comprendre comment fonctionne l’évaluation des
valeurs en Javascript.
 CHAPITRE 11

ECRITURE DE CONDITION SIMPLIFIEE

 Evaluation – simplification des conditions
• Rappel : Javascript exécute par défaut les codes
contenu dans un if si la comparaison condition est
évalué à true.

• Equivaut à ceci, sans le double égale.

 Evaluation – simplification des conditions
• La négation avec !

• L’évaluation des valeurs : les valeurs peuvent être

évaluées à true ou false même sans opérateur de
comparaison par le JS.
 Evaluation – simplification des conditions
• Ainsi, toutes valeurs différentes de null, undefined,
NaN, 0 et la chaine de caractère vide est évalué à
true.
 Les conditions ternaires

• Objectifs :
✔ Découverte de la syntaxe d’une structure ternaire.
✔ Savoir utiliser les ternaires.
 CHAPITRE 12

LES CONDITIONS TERNAIRES

 Les conditions ternaires

• Ternaire : façon simplifiée d’écrire une condition

if…else.
• Ecriture avec opérateur logique et ??
(condition)? ‘executé si true’ : ‘executé si false’;
 LES CONDITIONS TERNAIRES

• Ternaire : besoin de commentaire si le code est

compliqué.
CHAPITRE 13

LE SWITCH
 LE SWITCH

• Objectifs :
✔ Présentation de switch et exemple
✔ Cas d’utilisation du switch
 LE SWITCH
• Utilisation : on voudrait dissocier plusieurs cas afin de
traiter chaque cas différemment.
• Le switch test seulement l’égalité des valeurs.
• Ecriture : switch()……case : ……break…..default:…;
• Substitue le if….else if()……else if()……..else…….
 Le switch
• Exemple :

• break : empêche le code de continuer dans les

autres cas.
 LES BOUCLES

• Objectifs :
✔ Découverte des boucles while, do…while et for.
✔ Exemples d’utilisation des boucles.
✔ Comprendre l’incrémentation et la
décrémentation.
CHAPITRE 14

LES BOUCLES
 LE BOUCLE
• Boucle : Nous permet d’exécuter un code à certains
nombres de fois lorsque la condition est remplie.
Exécuter certaines instructions tant que la variable
n’a pas atteint telle valeur.
• Boucle permet de gagner beaucoup de temps en
automatisant la répétition d’un bloc de code.
• La condition doit à un moment donnée être false
sinon la boucle va continuer jusqu’à l’infini.
 LES BOUCLES
• while : répeter une série d’instruction tant qu’une
condition donnée est vraie. Il faut une
incrémentation ou décrémentation pour que la
valeur change.
• Si la valeur est false au départ le boucle ne sera pas
exécuter.
 LES BOUCLES
• Incrémentation et décrementation :

• Les instructions sont égaux sauf la priorité

d’incrémentation et le stockage qui est différent.
 LES BOUCLES
• do…while :même type qu’avec le boucle while sauf
que sur l’ordre des opérations qui les différents peu.
• Avec do…while, les instructions seront exécutés au
moins une fois même si la condition donnée est false
au départ.
 LES BOUCLES
• for : répéter une série d’instruction d’une valeur
donnée jusqu’à un seuil.
• Instruction :
initialiser la variable; poser la condition; incrémenter ou décrémenter

• La condition d’arrêt est déterminé au départ ici = 10.

• La boucle s’arrête jusqu’à ce que la condition sera false.
 CHAPITRE 15

LES FONCTIONS
 DECOUVERTE DES FONCTIONS

• Objectifs :
✔ Présentation des fonctions : utilisation et syntaxe;
✔ Création d’une fonction Javascript;
✔ Utilisation de paramètres - arguments;
 DECOUVERTE DES FONCTIONS

• Définition : bloc de code qui effectue une tâche

précise.
• Intérêt : pas besoin de redéfinir le code nos fonctions.
• Une fois créee, on a plus qu’appeler par leur nom
autant de fois, et à tout endroit qu’on veut l’utiliser.
• 2 grands types de fonctions : les fonctions natives et
les fonctions que nous allons créer nous même.
 DECOUVERTE DES FONCTIONS

• Fonction native : prête à l’emploi, déjà crée par un

développeur et intégré dans JS. Ex : alert(‘*******’)
• Fonction personnalisée : mot clé
function nomDeLaFonction() { //Instruction }

• Même règle que pour l’écriture d’une variable, doit être

unique, et n’est pas déjà pris nativement en javascript.
 DECOUVERTE DES FONCTIONS

• Le couple de parenthèse est important car grâce à elle qui

va nous permettre de déclencher l’exécution de la fonction.
Aussi, nous permettre de contenir nos paramètres.
• Paramètres : c’est que la fonction a besoin pour fonctionner.
Comme dans alert(***), on donne un texte entre les
parenthèses car le texte est nécessaire afin de pouvoir
afficher quelque chose dans la boite de dialogue.
 DECOUVERTE DES FONCTIONS

• Exemple :
 DECOUVERTE DES FONCTIONS

• On utilise le terme paramètres au définition de la fonction et

arguments au moment de l’appel.
• x et y sont les paramètres et 5,6,-4,60 sont des arguments.
• Les arguments remplacent les paramètres de la fonction.
 DECOUVERTE DES FONCTIONS

• return : mot clé pour retourner (avoir) le résultat sans

l’afficher. Le résultat peut donc être stocké dans une
variable.
 DECOUVERTE DES OBJETS

• Objectifs :
✔ Comprendre l’importance des objets en Javascript
✔ Définir ce qu’est un objet.
✔ Comprendre ce que sont les propriétés et les
méthodes d’un objet.
 CHAPITRE 16

DECOUVERTE DES OBJETS

 DECOUVERTE DES OBJETS

• En Javascript, tout est objet. Les nombres, chaines de

caractères, Boolean, les tableaux, les fonctions, les
dates soit des objets, soit des valeurs primitives qui
seront traités comme des objets.
• Objet est composé des propriétés et méthodes
• Exemple : crayon a comme propriété couleur, taille
et méthode écrire, dessiner.
 DECOUVERTE DES OBJETS

• Une propriété en JS est assimilé comme une variable.

• Une méthode est assimilé comme une fonction qui
sera stockés dans une propriété.
• Mot clé this représente l’objet en cours.
 CHAPITRE 17

VALEURS PRIMITIVES ET OBJETS

 VALEURS PRIMITIVES ET OBJETS

• Objectifs :
✔ Découverte des objets natifs
✔ Création d’objets natifs
✔ Explication des différences entre objets natifs et
valeurs primitives.
 VALEURS PRIMITIVES ET OBJETS

• Objets natifs : objet qui possède déjà des propriétés

et méthodes prêtes à l’emploi.
• Exemple : Number, String, Array
• Mot clé new pour utiliser l’objet.
 VALEURS PRIMITIVES ET OBJETS

• La valeur primitive est introduit en JS pour simplifier

l’utilisation. Pourtant, la valeur seront traiter comme
un objet, c’est-à-dire appelé une propriété ou
appliquer une méthode.
 CRÉER OBJETS

• Objectifs :
✔ Découverte des différentes façons de créer des
objets en Javascript.
✔ Créer un objet avec le mot clé new.
✔ Créer un objet littéral.
✔ Créer un objet à partir d’un constructeur.
 CHAPITRE 18

CRÉER DES OBJETS

 CRÉER OBJETS
• Créer un objet avec new Object()
• Utiliser point ‘.’ pour ajouter des propriétés et ‘=‘ pour
assigner des valeurs.
 CRÉER OBJETS
• Créer un objet avec un objet littéral.
 CRÉER OBJETS
• Créer un objet avec un constructeur.
 CHAPITRE 19

LES METHODES DE L’OBJET STRING

 LES METHODES DE L’OBJET STRING

• Objectifs :
✔ Découverte des propriétés et méthodes les plus
utiles de l’objet String
 LES METHODES DE L’OBJET STRING
• String : objet qui gère les chaines de caractères
• Possède 3 propriétés et vingtaine de méthode.
• Propriétés :
✔ length : permet d’avoir la longueur de la chaine
✔ Prototype : ajouter une nouvelle propriété -
méthode à un objet.
✔ Constructeur : retourne la fonction
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ toLowerCase() : mettre une chaine en minuscule
✔ toUpperCase() : mettre une chaine en majuscule
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ chatAt() : retourne la caractère au position donnée
✔ Le premier caractère possède la position n° 0.
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ indexOf() : retourne la première position d’une
caractère ou premier occurrence donnée.
✔ lastIndexOf() : retourne la dernière position d’une
caractère donnée. En paramètre le caractère à
chercher.
 LES METHODES DE L’OBJET STRING

• La méthode retoure -1 si le caractère n’est pas

trouvé.
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ replace(): recherche des caractères dans une
chaine et remplacer par une autre. Deux
paramètres : le caractère à remplacer et le
caractère de remplacement.
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ slice(): extraire une partie de chaine de retourner
la partie extraite. Deux paramètres : position de
début et fin de l’extraction.

✔ Si le premier paramètre est négatif, l’extraction va

depuis la fin de la chaine.
 LES METHODES DE L’OBJET STRING
• Méthodes:
✔ trim() : supprimer les espaces en début et en fin de
chaine.
 CHAPITRE 20

LES METHODES DE L’OBJET NUMBER

 LES METHODES DE L’OBJET NUMBER

• Objectifs :
✔ Découverte des propriétés et méthodes les plus
utiles de l’objet Number
 LES METHODES DE L’OBJET NUMBER

• Number : gère les valeurs numériques en Js

• Possède 5 propriétés : MIN_VALUE, MAX_VALUE,
NEGATIVE_INFINITY, POSITIVE_INFINITY, NaN
 LES METHODES DE L’OBJET NUMBER
• Méthodes:
✔ toString(): convertir le nombre en chaine de
caractère.
 LES METHODES DE L’OBJET NUMBER
• Méthodes:
✔ toFixed(): convertir le nombre décimal en chaine
de caractère.
 LES METHODES DE L’OBJET NUMBER
• Méthodes:
✔ toPrecision(): préciser taille de nombre renvoyé et
qui va retourner une chaine de caractère.
 LES METHODES DE L’OBJET NUMBER
• Méthodes:
✔ toExponential(): retourne la valeur exponentiel de
nombre.
 LES METHODES DE L’OBJET NUMBER
• Méthodes globales en JS : Number, parseFloat, parseInt
 DECOUVERTE DE L’OBJET ARRAY
• Objectifs :
✔ Présentation de l’objet Array et des tableaux en
Javascript.
✔ Créer un tableau et afficher ses valeurs
✔ Calcule le nombre d’éléments d’un tableau
✔ Connaître la différence entre un objet littéral et un
tableau
 DECOUVERTE DE L’OBJET ARRAY
• Array : type de variable spécial qui peut contenir
plusieurs valeurs.
• Un clé (index) est affecté automatiquement à
chaque élément du tableau de 0 à n.
• Les éléments chaines sont entre guillemets ou
apostrophe, pour les nombres non.
• Pour créer, on utilise des crochets et les éléments
séparés par une virgule [‘element1’, ‘el2’, ‘el3’].
 DECOUVERTE DE L’OBJET ARRAY
• Exemple

• Modifier la valeur d’un tableau

 DECOUVERTE DE L’OBJET ARRAY
• Nombre d’élément d’un tableau avec length

• Ajouter élément à la fin de tableau

 DECOUVERTE DE L’OBJET ARRAY
• Parcourir un tableau avec la boucle for

• Tableau associatif en JS et objet littéral

 DECOUVERTE DE L’OBJET ARRAY
• Parcourir un objet littéral avec la boucle for….in
 LES METHODES DE L’OBJET ARRAY

• Objectifs :
✔ Découverte des méthodes les plus utiles de l’objet
Array.
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ push() : ajouter un élément en fin de tableau,
retourne la nouvelle taille du tableau.
✔ pop() : supprimer un élément depuis la fin,
retourne en chaine de caractère la valeur de l’
élément supprimé.
 LES METHODES DE L’OBJET ARRAY
• Utilisations de pop et push:
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ unshift() : ajouter un élément au début de tableau
et retourne le nouvel tableau.
✔ shift() : supprimer un élément depuis le début du
tableau et retourne l’information relative à l’
élément supprimé.
 LES METHODES DE L’OBJET ARRAY
• Utilisations de shift() et unshift():
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ splice() : ajouter et supprimer un élément n’import
où dans un tableau.
Voyons comment ajouter de l’élément
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ splice() : ajouter et supprimer un élément n’import
où dans un tableau.
Voyons comment supprimer de l’élément
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ sort() : trier le tableau selon l’ordre alphabétique
de valeur. Les majuscules vont en premier.
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ reverse() : trier le tableau en ordre anti-alphabetique.
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ join() : retourne les valeurs du tableau sous forme de
chaine de caractère. Prends le séparateur voulu en
argument.
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ slice() : Créer un nouveau tableau en extrayant le
tableau de base. 2 paramètres: position de départ
de position de fin pour couper.
 LES METHODES DE L’OBJET ARRAY
• Méthodes:
✔ concat() :fusionner les tableaux en paramètres et les
tableaux de base ne sont pas touchés.
 DECOUVERTE DE L’OBJET DATE

• Objectifs :
✔ Présentation de l’objet Date,
✔ Créer un objet de type date
✔ Récupérer la date actuelle en JS
✔ Connaître de format de date valide en JS
 DECOUVERTE DE L’OBJET DATE
• Deux formats : littéral ou chaine, timestamps.

• Valeur timestamps correspond au temps écoulé en

milliseconde depuis 1970 * 1000
 DECOUVERTE DE L’OBJET DATE
• Créer un objet de type date avec new Date()
• 4 types
✔ Sans argument : retourne la date actuelle
✔ Passé une date littérale : l’objet crée stocke la
date indique en anglais
 DECOUVERTE DE L’OBJET DATE
• 4 types avec le constructeur Date()
✔ Indiquer un nombre en argument = nombre de
milliseconde écolé depuis 01Jan1970.
 DECOUVERTE DE L’OBJET DATE
• 4 types avec le constructeur Date()
✔ Indiquer 7 nombres en argument correspondant à
l’année, mois, jour, heure, minute, seconde,
milliseconde. Le mois comme à 0 en JS. Les 3
premiers arguments sont obligatoires.
 DECOUVERTE DE L’OBJET DATE
• 4 formats de date : date littérale, date iso, date
courte, date longue et date complète.
 LES METHODE DE L’OBJET DATE

• Objectifs :
✔ Découverte des méthodes les plus utiles de l’objet
Date.
 LES METHODES DE L’OBJET DATE
• Méthodes: possède cinquantaine de méthode
regroupé en 2: les getters et setters.
• Getters : récupérer l’information d’une date
• Setters : définir une date
 LES METHODES DE L’OBJET DATE
• Méthodes getters: commence par get
✔ getTime() : renvoi le nombre de milliseconde
écoulé entre le 01Jan 70 et la date définie.
✔ getFullYear() : renvoi l’année relative à la date.
✔ getMonth() : renvoi le mois de 0 à 11 (Jan – Déc).
✔ getDate() : renvoi le jour du mois de 1 à 31
✔ getDay() : renvoi le jour de la semaine de 0 à 6
(Dim à Sam)
 LES METHODES DE L’OBJET DATE
• Méthodes getters: commence par get
✔ getHours() : renvoi l’heure de 0 à 23
✔ getMinutes(): renvoi la minute de 0 à 59
✔ getSeconds() : renvoi la seconde de 0 à 59
✔ getMilliseconds() : renvoi la millisecond de 0 à 999.
 LES METHODES DE L’OBJET DATE
• Méthodes getters: commence par get
 LES METHODES DE L’OBJET NUMBER
• Méthodes setters: commence par set
 LES METHODES DE L’OBJET NUMBER
• Méthodes setters: commence par set
✔ Mettre au format fr avec get
 LES METHODE DE L’OBJET MATH

• Objectifs :
✔ Présentation de l’objet Math.
✔ Découverte des méthodes les plus utiles de l’objet
Math.
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ rondom() : générer un nombre aléatoire entre 0 et 1.
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ Pour avoir un nombre entre 0 et 1000, on multiplie par
1000
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ Pour avoir un nombre entier entre 0 et 1000, on utilise
la méthode round() avec rondom().
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ floor : arrondir le nombre en nombre inferieur
✔ ceil : arrondir le nombre en nombre supérieure
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ min et max : retourner le nombre le plus petit et plus
grand parmi une série de nombre en arguments.
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ abs() : retourner le nombre en valeur absolue.
 LES METHODES DE L’OBJET MATH
• Méthodes:
✔ pow() : exposant d’un nombre
✔ square() : racine carré
✔ Cos : cosinus et sinus d’un nombre
✔ Pi : retourne la valeur de pi.
 LA PORTEE EN JAVASCRIPT

• Objectifs :
✔ Définir la notion de portée en JavaScript
✔ Comprendre les différences entre variables locales
et globales
✔ Choix de portée.
 LA PORTEE EN JAVASCRIPT
• En JS, le variable peut être définit localement ou
globalement dans le script.
• La portée est le faite qu’on puisse récupérer ou non
le contenu de la variable n’importe où dans le script.
• Portée locale: accessible seulement dans une
fonction càd entre les accolades { x = 10; ----}
 LA PORTEE EN JAVASCRIPT
• Exemple :

Génère une erreur

 LA PORTEE EN JAVASCRIPT
• La portée globale : La variable est accessible depuis
n’importe où dans le script même à l’intérieur d’une
fonction.
 LA PORTEE EN JAVASCRIPT
• La portée globale : à ne pas recommander
l’utilisation dans une fonction. Puisqu’il est accessible
et peut être modifié dans une fonction et aura une
impact sur les autres scripts.
 LA PORTEE EN JAVASCRIPT
• Quand on n’utilise pas le mot clé var pour déclarer
une variable, JS va créer une sorte d’une variable
globale.
 LES FONCTIONS ANONYMES

• Objectifs :
✔ Définition des fonctions anonymes
✔ Création d’une fonction anonyme
✔ Exécuter une fonction anonyme.
 LES FONCTIONS ANONYMES
• Définition : fonction qui ne possède pas de nom et
sera affectée dans une variable. A ne pas oublier
d’ajouter une point virgule à fin.
 LES FONCTIONS AUTO-INVOQUEES

• Objectifs :
✔ Présentation des fonctions auto-invoquées
✔ Création d’une fonction auto-invoquée.
 LES FONCTIONS AUTO-INVOQUEES

• Définition : une fonction qui s’appelle ou s’éxecute

elle-même.
• Ajouter une couple de parenthèse au fonction et
une autre couple après la fonction.
• Le couple de parenthèse après, déclanche la
fonction.
 LES FONCTIONS AUTO-INVOQUEES

• Exemple :
 LES CLOSURES EN JAVASCRIPT

• Objectifs :
✔ Rappels sur la portée et la durée de vie des
variables;
✔ Découverte et explication des closures
✔ Création d’une clôture
✔ Comprendre l’intérêt des closures.
 LES CLOSURES EN JAVASCRIPT
• Closure : fermeture, une fonction qui va récupérer et
utiliser une variable d’environnement auquel il est crée.
Permet d’isoler ou enfermer une partie de code et
d’utiliser une variable qui est accessible seulement à
l’intérieur de ce code.
 LES CLOSURES EN JAVASCRIPT
• Exemple :

• Ajoutons () pour exécuter la fonction anonyme

 Partie II :
Manipulation de DOM en Javascript
 DECOUVERTE DU DOM HTML

• Objectifs :
✔ Définir ce qu’est le Document Object Model
✔ Présenter la structure du DOM HTML
✔ Faire le rapport entre le DOM et le Javascript.
 DECOUVERTE DU DOM HTML
• DOM : Interface permettant de manipuler les éléments
HTML et CSS.
• DOM divisé en 3 parties: le XML, le HTML et une partie
cœur accessible en xml et html.
• DOM est crée par le navigateur lors du chargement de
la page.
• DOM permet de traitement les éléments HTML comme
des objets.
 DECOUVERTE DU DOM HTML

• Ainsi, les éléments HTML vont posséder des propriétés et

des méthodes.
• DOM permet de déclencher les événements ce qui
permet d’avoir une dynamisme dans nos pages web.
• Structure de DOM : tout est considéré comme un nœud.
• Type de nœud : element nœud, text nœud, ……
 DECOUVERTE DU DOM HTML
• La page HTML est considéré comme une hiérarchie ou
arbre de nœud.
 DECOUVERTE DU DOM HTML
• Lorsque la page est chargé, le navigateur crée un objet
appelé document
• L’objet document va représente notre page, et disposer
de méthode pour modifier la page.
• L’objet document contient les autres nœuds crées par le
DOM comme l’objet element
• L’objet element possède aussi beaucoup de propriété et
méthode.
 ACCEDER A UN ELEMENT HTML

• Objectifs :
✔ Découverte des différentes méthodes permettant
d’accéder à un élément HTML.
✔ Accéder au contenu d’un élément HTML
✔ Accéder directement à un élément grâce aux
propriétés body, link et title.
 ACCEDER A UN ELEMENT HTML
• Pour accéder aux éléments HTML, il faut passer par
l’objet document.
• Méthode de document : getElementById,
getElementsByTagName, getElementByClassName,
querySelector, querySelectorAll
 ACCEDER A UN ELEMENT HTML
• getElementById : permet de cibler un élément
possédant un id particulier. Si l’élément est trouvé,
elle renvoie l’élément sous forme d’objet sinon null.

Ici on récupère un élément HTML de type Heading ou

titre
 ACCEDER A UN ELEMENT HTML
• getElementsByTagName : récupère tous les éléments
de même genre dans la page. Ex : p, h, dans un
tableau. Cette méthode prendra le nom de type de
l’élément comme argument. On récupère un
élément spécifique en utilisant l’indice du tableau.
 ACCEDER A UN ELEMENT HTML
• getElementsByTagName :
 ACCEDER A UN ELEMENT HTML
• getElementsByClassName : récupère tous les
éléments disposant une classe en particulier dans un
tableau.
 ACCEDER A UN ELEMENT HTML
• querySelector, querySelectorAll :permet d’accéder
un élément HTML par des sélecteurs CSS id ou classe.
• querySelector : renvoi l’élément premièrement trouvé
et querySelectorAll renvoi tous les éléments trouvés.
ACCEDER A UN ELEMENT HTML
 ACCEDER A UN ELEMENT HTML
• La propriété innerHTML : permet de récupérer tous les
contenus entre la balise ouvrante et fermante.
ACCEDER A UN ELEMENT HTML
 ACCEDER A UN ELEMENT HTML
• La propriété textContent : permet de récupérer tous
les textes entre la balise ouvrante et fermante.
 MODIFIER DU CONTENU EN JS

• Objectifs :
✔ Apprendre à modifier le contenu d’un élément
HTML.
✔ Apprendre à modifier la valeur d’un attribut HTML.
✔ Apprendre à modifier du code CSS relatif à un
élément HTML.
 MODIFIER DU CONTENU EN JS
• Les contenus récupérés à l’aide des propriétés
innerHTML et textContent peuvent être affectés dans
des variables.
• innerHTML : permet également de modifier le
contenu HTML d’un élément.
 MODIFIER DU CONTENU EN JS

• Comme opérateur d’affectation, on peut utiliser +=

 MODIFIER DU CONTENU EN JS
• On peut ajouter des balises comme valeur de
innerHTML
 MODIFIER DU CONTENU EN JS
• Modifier la valeur de l’attribut HTML avec la propriété
attribute.
• On précise l’attribut à modifier
 MODIFIER DU CONTENU EN JS
• Modifier la valeur de l’attribut class avec className.
• NB ne jamais utiliser class car c’est réservé.
 MODIFIER DU CONTENU EN JS
• Modifier le css, on utilise la propriété style suivi de la
propriété css à appliquer.
• La propriété à deux doit s’écrire en camelCase. Edx :
marginTop, fontSize, textTransform,…….
 AJOUTER – INSERER DES ELEMENTS HTML

• Objectifs :
✔ Créer un élément HTML en Javascript.
✔ Ajouter un attribut et du texte à un élément HTML.
✔ Insérer du texte et un élément dans une page
HTML
✔ Insérer un élément HTML à un endroit précis.
 AJOUTER – INSERER DES ELEMENTS HTML
• Pour créer un élément, on utilise généralement la
méthode createElement de l’objet document.
• Cette méthode va prendre le nom de l’élément
HTML à créer.
• Pour ajouter des attributes à l’élément créé, on utilise
la propriété attribute ou setAttribute
 AJOUTER – INSERER DES ELEMENTS HTML
• Pour un contenu textuel, on utilise la méthode
createTexteNode(……).
• Pour insérer un élément dans le flux d’un autre
élément, on utilise la méthode appendChild()
• appendChild() va insérer un élément comme dernier
enfant d’un autre objet.
• Prends en paramètre le nom de l’objet à insérer.
AJOUTER – INSERER DES ELEMENTS HTML
 AJOUTER – INSERER DES ELEMENTS HTML
• Pour insérer un élément à une endroit précise dans la
page HTML, on utilise la méthode insertBefore().
• Insérer un élément avant un élément indiqué.
• 2 arguments, l’élément à insérer et l’élément avec
lequel il va être inséré.
AJOUTER – INSERER DES ELEMENTS HTML
 MODIFIER – SUPPRIMER DES ELEMENTS HTML

• Objectifs :
✔ Apprendre à supprimer un élément HTML en
JavaScript.
✔ Apprendre à modifier un élément HTML en
JavaScript.
 MODIFIER – SUPPRIMER DES ELEMENTS HTML
• Pour supprimer un élément HTML, on utilise la
méthode removeChild() à partir de l’élément parent.
• Méthode de l’objet element et va prendre le nom de
l’élément à retirer.
 MODIFIER – SUPPRIMER DES ELEMENTS HTML
• Pour modifier un élément HTML, on utilise la méthode
replaceChild() à partir de l’élément parent.
• Méthode va avoir 2 arguments : la valeur de
remplacement et le nœud qui doit être remplacé.
MODIFIER – SUPPRIMER DES ELEMENTS HTML
 NAVIGUER DANS LE DOM

• Objectifs :
✔ Apprendre à naviguer entre les différents noeufs du
DOM.
✔ Comprendre l’intérêt de naviguer dans le DOM
 NAVIGUER DANS LE DOM
• parentNode : permet d’accéder au nœud parent
d’un certain nœud et de nous déplacer.
• C’est un propriété d’un objet element donc à
appliquer à un objet de type element.
 NAVIGUER DANS LE DOM
• childNodes : permet d’accéder au nœud enfant
d’un certain nœud HTML.
• NB : Le texte fait partie d’un nœud.
• Cette propriété renvoi les noeuds enfant sous forme
tableau y compris l’espace, à travailler par un boucle.
• nodeValue : permet de récupérer le contenu textuel
d’un nœud
• On peut aussi utiliser innerHMTL ou textContent
NAVIGUER DANS LE DOM
 NAVIGUER DANS LE DOM
• firstChild, lastChild : permet d’accéder
respectivement au premier et dernier enfant d’un
nœud. Prend compte les espaces.
 NAVIGUER DANS LE DOM
• nextSibling, previousSibling: permet d’accéder
respectivement au nœud frère suivant et précédent.
• Toujours faire attention aux espaces.
 Partie III :
Les évènements en JAVASCRIPT
 INTRODUCTION

• Objectifs :
✔ Définir ce qu’est un évènement
✔ Apprendre à déclencher un événement
✔ Connaître les évènements les plus courants
✔ Apprendre à réagir aux évènements via le DOM.
 INTRODUCTION

• Evénement : action effectué par l’utilisateur ou par le

navigateur lui-même.
• Ex : Clique sur un bouton, chargement page,…..
• On attache une action à un événement : Ex : au
clique d’un bouton, on modifie la couleur de fond.
• On utilise un attribut html de type événement.
 INTRODUCTION
• Attributs :
✔ onclick : se déclenche lorsque l’utilisateur clique sur
un élément.
✔ onmouseover : se déclenche l’utilisateur passe le
curseur sur un élément.
✔ onmouseout : se déclenche lorsque l’utilisateur sort
le curseur dans l’élément.
✔ Onkeydown : se déclenche lorsque l’utisateur
 INTRODUCTION
• Attributs :
✔ onkeydown : se déclenche lorsque l’utilisateur
appui sur le clavier sans le relâcher.
✔ onkeyup : se déclenche lorsqu’une touche de
clavier qui a été pressée et relâchée.
✔ onchange : se déclenche lorsqu’on sélectionne
une autre option d’une liste déroulante.
 INTRODUCTION
• Exemple : onclick pour afficher une boîte de dialogue.

• this : fait référence à l’objet en cours.

 INTRODUCTION
• Pour attacher un événement, on peut soit utiliser
l’attribut de type événement soit utiliser la propriété
d’un objet addEventListeners.
• addEventListeners à recommander pour pouvoir
attacher plusieurs type d’événement facilement à un
même élément.
 INTRODUCTION

✔ Equivalent à
 LA METHODE ADDEVENTLISTENER

• Objectifs :
✔ Présenter la méthode addEventListener();
✔ Exemple d’utilisation
✔ Comprendre l’intérêt d’utiliser cette méthode.
 LA METHODE ADDEVENTLISTENER

• addEventListener() : appartient à l’objet élément et

besoin de 2 arguments pour fonctionner. Le nom de l’
événement déclencheur et l’action à effectuer.
• Le declencheur sera du même nom qu’avec l’HTML
sauf sans le « on ».
 LA METHODE ADDEVENTLISTENER

• Equivalent à ..
CHAPITRE III : ES6
 Chapitre 3 : ES 6 Classes
• ES6 introduit la classes
• Class est un type de fonction, mais au lieu d’utiliser le mot clé function , on utilise class et les propriétés
sont affectés dans une méthode appelé constructor().
• Ci-dessous comment créer une classe et l’instancier (créer un objet)
 Chapitre 3 : ES 6 Classes
• La notion d’objet en JS fonctionne comme pour tous les autres langages, voyons comment on fait
l’héritage avec.

• super() se refère à la classe parente

 Chapitre 3 : ES 6 Fonctions fléchées
• La fonction fléchée ou Arrow function nous permet d’avoir une instruction courte.
• Voyons les différentes types de déclaration, avec les commentaires
 Chapitre 3 : ES 6 Variables
• Avant l’apparution de ES 6, nous avons déclarer une variable avec le mot clé var.
• Pour être plus court, il est toujours opérationnel aujourd’hui mais on ne s’en sert plus.
• A la place, il y a les mots clé let pour déclarer une variable et const pour déclarer une constante.
• var : aura une portée globale ainsi la variable est accessible en tout endroit.
• let : aura une porté locale ou porte en bloc (block scope) seulement accessible entre { --- }
• const : aura une porté globale il peut prendre n’importe quel type de valeur integer, string, boolean,
object, function……… mais empêche une réaffectation de valeur.
 Chapitre 3 : ES 6 methodes des Array
• Précaution : les fonctions que nous allons decouvrir s’utilisent seulement pour les object - Array.
• Quand? Si on veut traiter chaque éléments d’un objet sans interruption.
• forEach() et map

• Quand utiliser forEach et quand map??

• forEach : le tableau est utilisé uniquement en entrée (valeur). Modifier les valeurs d’entrée et remplace
par les valeurs traitées.
• map : traite un tableau et récupère un nouveau tableau.
 Chapitre 3 : ES 6 methodes des Array
• sort() : Trie les éléments d’un tableau dans ce même tableau et renvoi le tableau.
• filter() : crée et retourne un nouveau tableau contenant tous les éléments du tableau d’origine qui
repond la condition déterminé par la fonction callback.

• reduce() : applique une fonction qui est un accumulateur de valeur et qui traite chaque valeur d’une
liste (de gauche à droite) et réduit en une seule.
 Chapitre 3 : ES 6 methodes des Array
• Les méthodes suivantes sont à renseigner, vous en aurez besoin tels que
• for(), for…..in, for……..of, every(), find()
 Chapitre 3 : ES 6 Destructuring
• Destructuring = extraction des valeurs
• Nous pouvons avoir un tableau ou objet et nous voulons seulement quelques éléments.
 Chapitre 3 : ES6 Spread Operator
• Spread operator (…) = copier les valeurs des objets ou array, tous ou seulement la partie.
 Chapitre 3 : ES6 Module import & export
• Le module en javascript nous permet de couper nos code dans un fichier séparé.
• Améliore la maintenabilité des codes
• ES Module dépend de import et export.
 Chapitre 3 : ES6 Module import & export
• Nous pouvons importer les modules avec import {name, age} from ‘./[Link]’;