10/4/25

JavaScript - Roadmap
Plan Evaluation
• Syntaxe JavaScript • Présence
Javascript • Document Object Model • Participations
• Gestion des événements • Mini-projets
• Manipulation des données • Examen final

1 2

Introduction et fondamentaux

Histoire et évolution de JavaScript

• 1995 : Création de JavaScript par Brendan Eich en seulement 10
jours, avec pour objectif de développer un langage capable de
s'exécuter directement dans les navigateurs web
• Fin des années 1990, Malgré la défaite de Netscape dans la guerre
des navigateurs, JavaScript s'était déjà largement diffusé et imposé
Syntaxe JavaScript sur le web
• Années 1990-2000, JavaScript devient le premier et unique langage
de programmation supporté nativement par l'ensemble des
navigateurs web
• 2006 : Lancement de jQuery, facilitant la manipulation du DOM
et marquant un tournant dans l'adoption de JavaScript

3 4

1
 10/4/25

Introduction et fondamentaux Introduction et fondamentaux

Histoire et évolution de JavaScript JavaScript, est

• Milieu des années 2000 : Popularisation d'AJAX, permettant des • Langage de programmation
interactions web asynchrones et dynamiques • Haut niveau : le langage va stocker des valeurs dans la mémoire et les
libérer lorsqu’elles ne sont plus utilisées. Il avait également une riche
• 2008 : Google lance Chrome avec le moteur V8, un navigateur capacité de débogage et plus indépendant de la plate-forme.
moderne offrant des performances révolutionnaires • Multi-paradigme: le langage n’impose pas à ses développeurs
d’utiliser un paradigme de programmation particulier.
• Milieu-fin des années 2000 : L'émergence de plateformes • Interprété: signifie que le langage n’a pas besoin d’être compilé avant
complexes comme Facebook stimule l'évolution du langage pour de s’exécuter
répondre aux besoins des grandes entreprises technologiques • Typé dynamiquement: Une variable dans JS peut être affectée à
• 2009 : Lancement de [Link] par Ryan Dahl, permettant n’importe quel type.
d'exécuter JavaScript côté serveur et ouvrant de nouvelles • Faiblement typé: Dans un langage fortement typé, il faut déclarer le
type d’une variable lors de l’initialisation
perspectives

5 6

Introduction et fondamentaux Introduction et fondamentaux

Configuration de l'environnement de développement Console du navigateur

• Installation d’ un éditeur de code, exemple visual Studio Code • La console JavaScript est un outil
(VS Code), C'est un éditeur de code gratuit et populaire, formidable pour déboguer du
recommandé pour son interface conviviale et ses nombreuses code JavaScript qui ne
fonctionnalités. fonctionne pas comme on le
souhaite.
• Elle permet d'exécuter des lignes
de JavaScript sur la page qui est
• Installation d’un navigateur web, exemple Google Chrome, est actuellement chargée dans le
nécessaire pour visualiser et tester votre code JavaScript côté navigateur et de rapporter les
client. erreurs rencontrées lorsque le
navigateur souhaite exécuter le
code.

7 8

2
 10/4/25

Introduction et fondamentaux Introduction et fondamentaux

Inclusion de JavaScript dans une page web Premier script "Hello World"
• Pour appeler du code JavaScript depuis votre document HTML,
vous aurez besoin de l'élément < s c r i p t >
• Il y a deux méthodes pour utiliser script :
• une qui sert lorsqu'on intègre directement le code du script dans la page
web.
<script>
Instructions JavaScript
</script>
• une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier
tiers
<script src="chemin/vers/le/[Link]"></script>
Ø Si src est défini, le contenu de la balise script est ignoré.

9 10

Introduction et fondamentaux Introduction et fondamentaux

Les commentaires Les commentaires

• Les commentaires peuvent être insérés librement dans le code • Les commentaires s'étendant sur plusieurs lignes commencent par les
sans affecter son exécution, le moteur JavaScript les ignorant caractères /* et se concluent par */
automatiquement.
• Pour commenter une seule ligne, utilisez la syntaxe // : tout ce qui
suit ces deux barres obliques devient un commentaire, qu'il soit
placé sur une ligne dédiée ou après une instruction.

• Bonnes pratiques
• Expliquer le "pourquoi", pas le "quoi"
• Éviter les commentaires évidents, [Link](’bonjour’); // afficher le bonjour
• Maintenir les commentaires à jour, un commentaire obsolète est pire
• Utiliser des commentaires pour la documentation, expliquer les fonctions
complexes, les algorithmes, les cas particuliers

11 12

3
 10/4/25

Variables et types de données Variables et types de données

Déclaration des variables (var, let, const) Déclaration des variables (var, let, const)
• Une variable est un “stockage nommé” pour les données
• Pour créer une variable en JavaScript, nous devons utiliser le mot-
clé let. Exemple : let mon_variable = 12;
• La casse est importante: message ≠ MESSAGE
• Certains mots sont réservés par le langage et ne peuvent donc
pas servir de noms de variables.
Caractéristique var let const
Portée Fonction Bloc Bloc
Réassignation Oui Oui Non
Redéclaration Oui Non Non
Hoisting Oui ( undefined ) Oui ( undefined ) Non

13 14

Variables et types de données Variables et types de données

Types primitifs Types primitifs

• Un type primitif est un type de donnée simple et immuable (qui • String
ne peut pas être modifié). C'est la brique de base en JavaScript.
• Number

15 16

4
 10/4/25

Variables et types de données Variables et types de données

Types primitifs Types primitifs

• Boolean • Undefined : Représente une variable déclarée mais non initialisée.
• AND ⇒ && • Null : Représente une absence intentionnelle de valeur.
• OR ⇒ ||
• NOT ⇒ !

17 18

Variables et types de données Variables et types de données

Types primitifs Types primitifs

• BigInt : Représente des entiers très grands (au-delà de la limite de • Symbole : qui garantit l'unicité. Cela signifie que chaque symbole
Number). créé est différent des autres, même s'ils ont la même description

19 20

5
 10/4/25

Variables et types de données Variables et types de données

Conversion de types: implicite et explicite Conversion de types: implicite

• JavaScript est un langage faiblement typé : les variables peuvent • Exemples
changer de type et les types peuvent être convertis
automatiquement.
• Deux types de conversion :
• Implicite (Coercion) : JavaScript convertit automatiquement
• Explicite (Casting) : Le développeur force la conversion

21 22

Variables et types de données Variables et types de données

Conversion de types: explicite Le mode moderne, use strict

• Vers String: • Vers Number: • Vers Boolean: • use strict est une directive qui active le mode strict en JavaScript.
Ce mode impose des règles plus strictes pour écrire du code plus
sûr et éviter certaines erreurs courantes.
• Il déclaré en
• Haut de la page JS ⇒ Mode strict pour tout le script
• La première ligne d’une fonction ⇒ Mode strict uniquement dans la fonction

23 24

6
 10/4/25

Boîtes contextuelles Boîtes contextuelles

Boîtes contextuelles, alert Boîtes contextuelles, prompt

• Affiche une boîte de dialogue avec un champ de saisie pour obtenir
• Affiche un message d'information à l'utilisateur avec un bouton "OK". une information de l'utilisateur.
• Paramètres
• Caractéristiques • message : le texte affiché
• Bloque l'exécution : le code s'arrête jusqu'à • valeurParDefaut (optionnel) : valeur
ce que l'utilisateur clique sur "OK" pré-remplie dans le champ
• Un seul bouton : "OK" • Valeurs de retour
• Pas de valeur de retour (renvoie undefined) • Une chaîne de caractères : si
• Utilisé pour informer l'utilisateur l'utilisateur saisit quelque chose et
clique "OK"
• null : si l'utilisateur clique "Annuler"

25 26

Boîtes contextuelles Variables et types de données

Boîtes contextuelles, confirm Exercice 1

• Affiche une boîte de dialogue avec deux boutons : "OK" et "Annuler". • Créez une calculatrice avec toutes les opérations de base.
• Valeurs de retour 1. Afficher un menu dans une popup
• true : si l'utilisateur clique "OK" 2. Choisir l’opération
• false : si l'utilisateur clique "Annuler" 3. Saisir les nombres
4. Afficher le résultat
5. Réafficher le menu

27 28

7
 10/4/25

Variables et types de données Opérateurs

Exercice 2 Opérateurs arithmétiques

• Créez un jeu interactif où l'utilisateur doit deviner un nombre mystère
généré aléatoirement par l'ordinateur. • Les opérateurs arithmétiques permettent d'effectuer des calculs
• Initialisation du jeu : mathématiques sur des nombres.
• Générer un nombre aléatoire entre 1 et 100
• Limiter le nombre de tentatives à 10
• Afficher un message de bienvenue avec les règles Opérateur Nom Description Exemple Résultat
+ Addition Additionne deux nombres 10 + 5 15
• Boucle de jeu : • Indices
- Soustraction Soustrait le second du premier 10 - 5 5
• Demander à l'utilisateur de saisir un nombre • Utiliser [Link]() pour
• Valider que la saisie est un nombre valide générer un nombre aléatoire * Multiplication Multiplie deux nombres 10 * 5 50
• Comparer la proposition avec le nombre secret • Combiner prompt(), alert() et / Division Divise le premier par le second 10 / 5 2
• Donner un indice : "C'est plus" ou "C'est moins” confirm() % Modulo Reste de la division 10 % 3 1
• Compter les tentatives ** Puissance Élève à la puissance 2 ** 3 8
• Continuer jusqu'à ce que :
• Le joueur trouve le nombre (victoire)
• Les tentatives soient épuisées (défaite)

29 30

Opérateurs Opérateurs

Opérateurs de comparaison Opérateurs logiques

• Les opérateurs de comparaison comparent deux valeurs et • Utilisés pour combiner des conditions.
retournent un booléen (true ou false).
Opérateur Nom Description Exemple Résultat
Opérateur Nom Description Exemple Résultat Retourne true si toutes les conditions sont
&& ET logique true && true true
== Égalité faible Compare les valeurs avec conversion de type 5 == "5" true vraies
=== Égalité stricte Compare les valeurs ET les types 5 === "5" false Retourne false si au moins une condition est
&& ET logique true && false false
fausse
!= Vérifie si les valeurs sont différentes (avec 5 != "5" false
Inégalité faible Retourne true si au moins une condition est
conversion) || OU logique true || false true
!== 5 !== "5" true vraie
Inégalité stricte Vérifie si les valeurs OU les types sont différents
Retourne false si toutes les conditions sont false ||
< Inférieur Vérifie si la première valeur est inférieure 5 < 10 true || OU logique false
fausses false
> Supérieur Vérifie si la première valeur est supérieure 5 > 10 false
! NON logique Inverse la valeur booléenne !true false
<= Inférieur ou égal Vérifie si la première valeur est inférieure ou égale 5 <= 5 true
! NON logique Inverse la valeur booléenne !false true
>= Vérifie si la première valeur est supérieure ou 10 >= 5 true
Supérieur ou égal
égale

31 32

8
 10/4/25

Opérateurs Opérateurs

Opérateurs d'assignation Opérateur ternaire

• Utilisés pour assigner des valeurs aux variables. • Condition en une seule ligne. Alternative compacte au if...else.

Opérateur Nom Description Exemple Résultat

= x = 5 x vaut 5 Opérateur Nom Description Exemple Résultat
Assignation simple Assigne une valeur à une variable
"Majeur" si age
+= Addition assignée Ajoute et assigne x += 3 x = x + 3 Retourne une valeur age >= 18 ? "Majeur" :
? : Ternaire >= 18, sinon
-= Soustraction assignée Soustrait et assigne x -= 2 x = x - 2 selon une condition "Mineur"
"Mineur"
*= Multiplication assignée Multiplie et assigne x *= 4 x = x * 4
/= Division assignée Divise et assigne x /= 2 x = x / 2
%= Modulo assigné Calcule le modulo et assigne x %= 3 x = x % 3
**= Puissance assignée Élève à la puissance et assigne x **= 2 x = x ** 2

33 34

Opérateurs

L'opérateur de coalescence des nuls Structures de contrôle

• L'opérateur de coalescence des nuls, symbolisé par ??, est un Les structures de contrôle permettent de modifier l'ordre d'exécution
opérateur binaire en programmation qui renvoie la valeur de son des instructions dans un programme.
opérande de gauche s'il n'est ni null ni undefined ; sinon, il
renvoie l'opérande de droite
Trois catégories principales :
• Structures conditionnelles - Prendre des décisions (if, switch)
• Structures itératives (boucles) - Répéter des actions (for, while)
• Structures de branchement - Modifier le flux (break, continue, return)

35 36

9
 10/4/25

Structures de contrôle Structures de contrôle

Structure de contrôle conditionnelle, if Structure de contrôle conditionnelle, switch

• Exécute un bloc de code si une condition est vraie. • Compare une valeur à plusieurs cas possibles.
• Syntaxe • Exemple • Syntaxe • Exemple

37 38

Structures de contrôle Structures de contrôle

Structure de contrôle iterative, for Structure de contrôle iterative, while

• Répète un bloc de code un nombre défini de fois. • Répète un bloc de code tant qu'une condition est vraie.
• Syntaxe • Syntaxe

• Exemple
• Exemple

• Assurez-vous que la condition devienne fausse

39 40

10
 10/4/25

Structures de contrôle Structures de contrôle

Structure de contrôle iterative, do .. while Structure de contrôle de branchement, break

• Similaire à while, mais exécute le code au moins une fois avant de • Interrompt l'exécution d'une boucle ou d'un switch.
vérifier la condition. • Exemple
• Syntaxe

• Exemple

• Utilisation: Sortir d'une boucle dès qu'une condition est remplie,

utile pour optimiser les performances.

41 42

Structures de contrôle

Structure de contrôle de branchement, continue

• Passe à l'itération suivante d'une boucle en ignorant le reste du
code.
• Exemple

• Utilisation: Ignorer certaines valeurs dans une boucle sans

l'interrompre complètement.

43

11