JavaScript DAY00

Les bases du langage

Professeur : LOUKACH EL-MEHDI

JavaScript
À propos
LOUKACH EL-MEHDI
Entrepreneur

Master en informatique et les systèmes d’information

3 ans d’experience en développement FULLSTACK
Entreprises : DEVAXY, BADEEL, Alten Maroc, Ynov Campus Maroc
Poste : Co-fondateur, Gérant, Ingénieur Fullstack - Cyberground
JavaScript

"RECOGNIZING THE NEED

IS THE PRIMARY
CONDITION FOR DESIGN.”

DAY 00
JavaScript

SOMMAIRE

PHASE 4
PHASE 1 PHASE 3 Programmation PHASE 5
PHASE 2 Orientée Objet en
Les bases du langae Requêtes HTTPS, Programmation
JS
Gestion des API FETCH Asynchrones
événements et DOM

Suivant : TypeScript Introduction

JavaScript

INTRODUCTION
JavaScript est un langage de programmation dynamique et polyvalent, essentiel
dans le développement web. Créé initialement pour ajouter des éléments
interactifs aux pages web, il est aujourd'hui utilisé tant du côté client que
serveur. JavaScript permet de créer des sites web riches et interactifs, en
gérant des événements, en modifiant le contenu du document HTML, et en
améliorant l'expérience utilisateur.

DAY 00
JavaScript
LES TYPES DES
APPLICATIONS
Les types d'applications que
l'on peut développer sont
variés et couvrent un large
éventail de domaines et de
technologies.
Applications Web
Applications Mobiles
Applications d'Entreprise
Rappel
LES APPLICATIONS
WEB
Les applications web sont
des programmes interactifs
accessibles via un
navigateur internet, conçus
pour offrir des
fonctionnalités dynamiques
et une expérience utilisateur
enrichissante.
LES BIBLIOTHÈQUES ET
LES FRAMEWORKS
Une bibliothèque offre des
outils spécifiques que vous
pouvez utiliser comme vous
le souhaitez, tandis qu'un
framework fournit un modèle
ou une architecture
complète à suivre pour
structurer votre projet.
JavaScript

Rappel

LES APPLICATIONS WEB

Sites Web Statiques et Dynamiques: Des pages simples à des sites complexes avec des interactions
dynamiques.
Applications Web Monopage (SPA): Des applications qui chargent une seule page HTML et mettent à jour
dynamiquement le contenu.
Portails Web: Des systèmes de gestion de contenu, des forums, des plateformes de commerce électronique,
etc (Wordpress, Shopify, Drupal, Jumla, WooCommerce, etc...).
JavaScript

LES PAGES WEB

Une page web est un document numérique qui fait partie du World Wide Web et
qui est accessible par le biais d'un navigateur web. Voici quelques éléments clés
qui caractérisent une page web :
Contenu Numérique: Elle contient du texte, des images, des vidéos et d'autres
éléments multimédias.
Langage de Balisage: Généralement écrite en HTML (Hypertext Markup
Language), qui structure le contenu et la mise en page de la page.

DAY 00
JavaScript

LES PAGES WEB

Styles et Mise en Page: Utilise souvent CSS (Cascading Style Sheets) pour
définir le style et la présentation visuelle.
Interactivité: Peut inclure des éléments interactifs grâce à des langages de
programmation comme JavaScript.
Accessible via URL: Chaque page web a une adresse unique, connue sous le
nom d'URL (Uniform Resource Locator), qui permet aux utilisateurs de la
trouver et de la visiter.
Liée à d'Autres Pages: Elle peut contenir des liens hypertextes vers d'autres
pages web, facilitant la navigation et la connexion entre les contenus du Web.
DAY 00
JavaScript

LES PAGES WEB

Les pages web peuvent varier de simples documents textuels à des applications
web complexes fournissant une large gamme de fonctionnalités. Elles sont
hébergées sur des serveurs web et sont conçues pour être consultées et
interactives pour les utilisateurs.

DAY 00
JavaScript

LE RÔLE DE JAVASCRIPT

Le rôle du JavaScript dans les pages web est fondamental et polyvalent,

contribuant significativement à l'interactivité, la fonctionnalité et l'expérience
utilisateur globale. Voici quelques aspects clés de son rôle :
Interactivité Utilisateur : JavaScript permet d'ajouter des interactions
dynamiques aux pages web. Par exemple, il peut répondre à des événements
utilisateur comme les clics, les survols, et les entrées de clavier, rendant les
pages web plus réactives et interactives.

DAY 00
JavaScript

LE RÔLE DE JAVASCRIPT

Manipulation du Document HTML : Avec le modèle d'objet document (DOM),

JavaScript peut modifier dynamiquement le contenu, la structure et le style
d'une page web. Cela signifie que les éléments de la page peuvent être changés,
ajoutés, supprimés ou animés après que la page a été chargée.
Validation des Formulaires : JavaScript est souvent utilisé pour valider les
données entrées dans les formulaires avant qu'elles soient envoyées au
serveur, améliorant ainsi l'expérience utilisateur et réduisant les erreurs côté
serveur.

DAY 00
JavaScript

LE RÔLE DE JAVASCRIPT
Communication Asynchrone : Grâce à AJAX (Asynchronous JavaScript and
XML), JavaScript permet de charger des données en arrière-plan sans avoir à
recharger toute la page. Cela permet de créer des applications web fluides et
dynamiques, comme le chargement de nouveaux contenus dans les réseaux
sociaux sans actualiser la page.
Animation et Effets Graphiques : JavaScript, souvent combiné avec CSS,
permet de créer des animations et des effets visuels pour améliorer l'attrait
visuel des pages web.
Développement d'Applications Web Monopage (SPA) : JavaScript est
essentiel dans le développement des SPA, où une seule page web fournit une
expérience utilisateur fluide et similaire à celle d'une application de bureau.
DAY 00
JavaScript

LE RÔLE DE JAVASCRIPT
Intégration avec d'Autres Technologies Web : JavaScript fonctionne bien
avec d'autres technologies web, telles que le HTML et le CSS, et il est
compatible avec une variété de frameworks et de bibliothèques, étendant
ainsi ses fonctionnalités.
Prise en Charge du Stockage Local : JavaScript permet d'utiliser le stockage
local du navigateur pour sauvegarder des données côté client, améliorant
ainsi la performance et l'expérience utilisateur.
En résumé, JavaScript est essentiel pour créer des pages web modernes,
interactives, et riches en fonctionnalités, jouant un rôle crucial dans l'expérience
utilisateur globale et l'efficacité du web.
DAY 00
JavaScript

PROJET
JavaScript

JAVASCRIPT

DAY 00
JavaScript

POUR COMMENCER
Préparez l’environment (installations)
Créez un nouveau dossier d’un site internet
Initialisez votre première page qui affiche “Bonjour tout le
monde !”
Ajoutez un fichier CSS

DAY 00
JavaScript

PHASE 1
Variables, Types de données, Opérateurs

DAY 00
JavaScript
LES
VARIABLES
Une variable, en général, est un concept fondamental en programmation.
Elle représente un espace de stockage nommé dans la mémoire de
l'ordinateur, utilisé pour conserver des valeurs de données qui peuvent être
modifiées pendant l'exécution d'un programme. Quelques caractéristiques
clés des variables : Nomination, Typage, Assignation de Valeurs, Portée,
Durée de Vie.
En somme, les variables sont essentielles pour stocker et manipuler des
données dans un programme, permettant ainsi aux développeurs de
construire des logiciels dynamiques et interactifs. DAY 00
JavaScript
LES
VARIABLES
En JavaScript, les variables sont des conteneurs pour stocker des
données.
Déclarées avec les mots-clés var, let, ou const.

DAY 00
JavaScript

EXEMPLE SANS
VARIABLES DAY 00
JavaScript

EXEMPLE AVEC
VARIABLE DAY 00
JavaScript

TYPES DE DONNÉES
Les variables

DAY 00
JavaScript
TYPES DE DONNÉES
Les variables

Les variables peuvent être de différents types, tels que des nombres, des
chaînes de caractères, des booléens, etc. Le type de la variable détermine la
nature des données qu'elle peut stocker et les opérations qui peuvent être
effectuées dessus.

DAY 00
JavaScript
TYPES DE DONNÉES
Les variables

En JavaScript, les données peuvent être classées en plusieurs types

principaux. Voici les principaux types de données en JavaScript :
1. Primitives :
2. Non-Primitives :

DAY 00
JavaScript
TYPES DE DONNÉES
Les variables

1. Primitives :
String : Représente des séquences de caractères, par exemple "Bonjour".
Number : Représente à la fois les nombres entiers et à virgule flottante, par exemple 42 ou
3.14.
Boolean : Représente une valeur logique qui peut être soit true (vrai) soit false (faux).
Undefined : Représente une variable qui a été déclarée mais n'a pas encore reçu de valeur.
Null : Représente une absence délibérée de valeur et est utilisé pour indiquer qu'une
variable est "vide" ou "inexistante".
Symbol : Introduit dans ECMAScript 6, représente une valeur unique qui ne peut pas être
égalée à une autre valeur Symbol.
DAY 00
JavaScript
TYPES DE DONNÉES
Les variables
1.
2. Non-Primitives :
Object : Représente des collections de propriétés où chaque propriété est soit une
association clé-valeur, soit un autre objet. Cela inclut également des types spéciaux
d'objets, comme les arrays (tableaux) et les fonctions.
Array : Un type spécial d'objet utilisé pour stocker des listes de valeurs ordonnées.
Function : Un bloc de code conçu pour effectuer une tâche particulière, les fonctions sont
également des objets en JavaScript.

DAY 00
JavaScript
TYPES DE DONNÉES
Les variables

Il est important de noter que JavaScript est un langage de programmation à

type dynamique, ce qui signifie que les variables ne sont pas directement
liées à un type de données spécifique, et le même type de variable peut
être utilisé pour stocker différents types de données à différents moments.

DAY 00
DAY 00
JavaScript

LES OPÉRATEURS
Maths

DAY 00
JavaScript
LES OPÉRATEURS
En JavaScript, les opérateurs sont utilisés pour effectuer des opérations sur
des variables et des valeurs. Il existe plusieurs catégories d'opérateurs, et voici
un aperçu général avec des exemples pour chaque type :
Opérateurs Arithmétiques
Opérateurs d'Affectation
Opérateurs de Comparaison
Opérateurs Logiques
Opérateurs Unaires
Opérateur Ternaire
Opérateurs de Chaîne DAY 00
JavaScript
LES OPÉRATEURS
1. Opérateurs Arithmétiques
Utilisés pour effectuer des opérations mathématiques
courantes.
Addition (+) : 5 + 3 donne 8.
Soustraction (-) : 5 - 3 donne 2.
Multiplication (*) : 5 * 3 donne 15.
Division (/) : 6 / 3 donne 2.
Modulo (%) : 5 % 3 donne 2 (reste de la division).
Incrémentation (++) : Si x = 5, alors x++ donne 6.
Décrémentation (--) : Si x = 5, alors x-- donne 4. DAY 00
JavaScript

LES OPÉRATEURS DAY 00

JavaScript
LES OPÉRATEURS
2.Opérateurs d'Affectation
Utilisés pour assigner des valeurs à des variables.
Assignation (=) : x = 5.
Addition assignée (+=) : x += 5 est équivalent à x = x + 5.
Soustraction assignée (-=) : x -= 5 est équivalent à x = x - 5.
Multiplication assignée (*=) : x *= 5 est équivalent à x = x * 5.
Division assignée (/=) : x /= 5 est équivalent à x = x / 5.

DAY 00
JavaScript
LES OPÉRATEURS
3. Opérateurs de Comparaison
Utilisés pour comparer deux valeurs.
Égalité (==) : 5 == '5' donne true.
Égalité stricte (===) : 5 === '5' donne false.
Inégalité (!=) : 5 != '8' donne true.
Inégalité stricte (!==) : 5 !== '5' donne true.
Supérieur (>) : 5 > 3 donne true.
Inférieur (<) : 5 < 3 donne false.
Supérieur ou égal (>=) : 5 >= 5 donne true.
Inférieur ou égal (<=) : 5 <= 5 donne true. DAY 00
JavaScript
LES OPÉRATEURS
4. Opérateurs Logiques
Utilisés pour déterminer la logique entre les variables ou les
valeurs.
ET logique (&&) : (5 > 3) && (5 > 4) donne true.
OU logique (||) : (5 < 3) || (5 > 4) donne true.
NON logique (!) : !(5 > 3) donne false.

DAY 00
JavaScript
LES OPÉRATEURS
5. Opérateurs Unaires
Opèrent sur une seule valeur.
Typeof : typeof "Bonjour" donne "string".
Négation (-) : Si x = 5, alors -x donne -5.

DAY 00
JavaScript
LES OPÉRATEURS
6. Opérateur Ternaire
Seul opérateur JavaScript qui prend trois opérandes.
Conditionnel (? :) : 5 > 3 ? "vrai" : "faux" donne "vrai".

DAY 00
JavaScript
LES OPÉRATEURS
7. Opérateurs de Chaîne
Pour concaténer des chaînes de caractères.
Concaténation (+) : "Bonjour " + "le monde" donne "Bonjour le
monde".

Ces opérateurs sont des éléments essentiels de la

programmation JavaScript, permettant d'effectuer des
calculs, de manipuler des données et de contrôler le flux d'un
programme.
DAY 00
JavaScript

EXERCICES
Les variables, types de données et les opérateurs

DAY 00
JavaScript
EXERCICE

Create two variables, name and age. Assign your name as a string to name and
your age as a number to age.
Print these variables to the console

DAY 00
JavaScript
EXERCICE

Declare a variable number and initialize it with a value of 10.

Increment this number by 5, multiply it by 3, then subtract 2. Do each of these
as a separate operation, updating the variable each time.
Print the final result to the console.

DAY 00
JavaScript
EXERCICE

Create two variables, firstName and lastName, and assign your first and last
names to them.
Concatenate these two variables to form a full name and assign this to a new
variable fullName.
Print fullName to the console and ensure it has a space between the first name
and last name.
DAY 00
JavaScript
EXERCICE
Déclarer et Initialiser des Variables
Créez une variable nomComplet et assignez-lui votre nom complet sous
forme de chaîne de caractères.
Créez une variable anneeNaissance et assignez-lui votre année de
naissance sous forme de nombre.
Manipulation de Chaînes et de Nombres
Extraire votre prénom de nomComplet et l'assigner à une nouvelle
variable prenom. Utilisez la méthode substring ou split.
Calculer votre âge en soustrayant anneeNaissance de l'année actuelle
(par exemple, 2023). Stockez ce résultat dans une variable age. DAY 00
Utilisation des Opérateurs
JavaScript
EXERCICE
Créez une variable message et utilisez l'opérateur de concaténation (+)
pour former un message : "Bonjour, je m'appelle " + prenom + " et j'ai " + age
+ " ans."
Assurez-vous que le message soit bien formé et lisible.
Affichage des Résultats
Affichez le message final dans la console.
Exemple de Résultat Attendu
Si votre nom complet est "Jean Dupont" et votre année de naissance
est 1990, le message à afficher sera : "Bonjour, je m'appelle Jean et j'ai
33 ans." (en supposant que l'année actuelle soit 2023). DAY 00
JavaScript

PHASE 1
Instructions et structures de programmation

DAY 00
JavaScript

STRUCTURES DE
CONTRÔLE DE FLUX

DAY 00
JavaScript
STRUCTURES DE CONTRÔLE DE FLUX
En JavaScript, comme dans la plupart des langages de
programmation, il existe diverses instructions et
structures qui permettent de contrôler le flux d'un
programme, de manipuler des données, et d'interagir
avec des systèmes externes.

DAY 00
JavaScript
STRUCTURES DE CONTRÔLE DE FLUX
Boucles :
for : Boucle avec une condition initiale, de fin, et un
incrément.
while : Boucle qui s'exécute tant que la condition
est vraie.
do...while : Similaire à while, mais s'exécute au moins
une fois.
for...in : Pour itérer sur les propriétés d'un objet.
for...of : Pour itérer sur les éléments d'un objet
DAY 00
itérable (comme un tableau).
JavaScript

DAY 00
JavaScript

DAY 00
JavaScript

PHASE 1
Structures conditionnelles et itératives

DAY 00
JavaScript
STRUCTURES DE CONTRÔLE DE FLUX
Instructions Conditionnelles :
if, else if, else : Pour exécuter des blocs de code en
fonction de conditions spécifiques.
switch : Permet d'effectuer une sélection parmi
plusieurs alternatives.

DAY 00
JavaScript

DAY 00
JavaScript

PHASE 1
Fonctions

DAY 00
JavaScript
FONCTIONS
En JavaScript, les fonctions sont des blocs de code conçus
pour effectuer une tâche spécifique et sont une partie
fondamentale de la programmation. Elles permettent de
regrouper des instructions, de réutiliser le code, et
d'organiser le programme de manière logique. Voici les
différents types de fonctions en JavaScript et leurs
caractéristiques :

DAY 00
JavaScript

DAY 00
JavaScript

PHASE 1
Chaînes de caractères

DAY 00
JavaScript
Chaînes de caractères

En JavaScript, les chaînes de caractères (ou strings) sont

utilisées pour représenter et manipuler du texte.

DAY 00
JavaScript
Chaînes de caractères
Définition et Création de Chaînes de Caractères
Déclaration de Chaîne : Les chaînes de caractères
peuvent être créées en utilisant des guillemets simples
('), doubles ("), ou des backticks (`) pour les template
literals.
let chaineSimple = 'Bonjour'; l
et chaineDouble = "le monde";
let chaineTemplate = `Bonjour le monde`;

DAY 00
JavaScript
Chaînes de caractères
Caractéristiques des Chaînes de Caractères
Immutabilité : En JavaScript, les chaînes de caractères
sont immuables, ce qui signifie que leur contenu ne peut
pas être modifié une fois qu'elles sont créées.
Concaténation : Les chaînes peuvent être combinées
en utilisant l'opérateur +.
Exemple : let salutation = chaineSimple + ' ' +
chaineDouble;
Template Literals : Les backticks permettent d'insérer
DAY 00
des variables et des expressions dans une chaîne de
caractères en utilisant la syntaxe ${expression}.
JavaScript
Chaînes de caractères

DAY 00
JavaScript
Chaînes de caractères
Méthodes Courantes des Chaînes de Caractères
Longueur : .length retourne la longueur de la chaîne.
Trouver un Sous-String : .indexOf(), .lastIndexOf(),
.includes().
Manipulation : .slice(), .substring(), .split(), .replace().
Majuscules/Minuscules : .toUpperCase(),
.toLowerCase().
Trim : .trim() pour retirer les espaces blancs des deux
extrémités de la chaîne.
DAY 00
JavaScript

PHASE 1
Les Tableaux

DAY 00
JavaScript
Les tableaux
Les tableaux en JavaScript sont des objets utilisés pour
stocker des collections de données, généralement de
types multiples. Ils sont l'un des types de données les plus
utiles et les plus utilisés en JavaScript.

Définition et Création de Tableaux

Création : Les tableaux peuvent être créés en utilisant
des crochets [] ou en utilisant le constructeur new
Array().
DAY 00
JavaScript
Les tableaux

DAY 00
JavaScript
Les tableaux
Caractéristiques des Tableaux
Indexation : Les éléments d'un tableau sont indexés à
partir de 0.
Hétérogénéité : Un tableau en JavaScript peut
contenir des éléments de différents types (nombres,
chaînes, objets, autres tableaux, etc.).
Taille Dynamique : La taille d'un tableau n'est pas fixe;
elle peut changer dynamiquement lorsque des
éléments sont ajoutés ou retirés.
DAY 00
JavaScript
Les tableaux
Méthodes et Propriétés :
.length : Retourne la longueur (le nombre d'éléments)
du tableau.
.push() : Ajoute un ou plusieurs éléments à la fin du
tableau.
.pop() : Supprime le dernier élément du tableau.
.shift() : Supprime le premier élément du tableau.
.unshift() : Ajoute un ou plusieurs éléments au début
du tableau.
DAY 00
.slice() : Retourne une copie d'une partie du tableau.
JavaScript
Les tableaux
.splice() : Permet d'ajouter/supprimer des éléments
à un indice spécifique.
.indexOf() et .lastIndexOf() : Cherchent un élément
dans le tableau.
.join() : Concatenation de tous les éléments du
tableau en une chaîne.
.reverse() : Inverse l'ordre des éléments du tableau.
.sort() : Trie les éléments du tableau.

DAY 00
JavaScript

EXERCICE
Les bases de langage

DAY 00
JavaScript
EXERCICE
Exercice : Gestion d'un Inventaire de Livres
Objectif :
Développer un script JavaScript pour gérer un
inventaire de livres dans une bibliothèque. Le script doit
permettre d'ajouter des livres à l'inventaire, de
rechercher des livres par titre, et de lister tous les livres
disponibles.

DAY 00
JavaScript
EXERCICE
1. Déclaration de l'Inventaire :
Créez un tableau inventaire pour stocker les
informations des livres.
Chaque livre sera un objet avec les propriétés : titre,
auteur, et disponible (booléen).
2. Fonction pour Ajouter un Livre :
Écrivez une fonction ajouterLivre qui prend en
arguments le titre, l'auteur, et ajoute un nouveau
livre à l'inventaire. Le livre doit être marqué comme
disponible. DAY 00
JavaScript
EXERCICE
3 - Fonction pour Rechercher un Livre par Titre :
Écrivez une fonction rechercherTitre qui prend en
argument un titre de livre et renvoie le livre s'il est trouvé
dans l'inventaire, sinon renvoie null.
4 -Fonction pour Lister tous les Livres :
Écrivez une fonction listerLivres qui affiche tous les
livres de l'inventaire avec leur statut (disponible ou non).
5 - Tests :
Testez vos fonctions en ajoutant quelques livres, en
recherchant des titres et en listant l'inventaire. DAY 00
JavaScript

FIN DU CHAPITRE
next : • Gestion des événements et DOM

DAY 00
JavaScript

PHASE 2
Gestion des événements DOM

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

DOM (Document Object Model) :

Représentation structurée d'un document HTML ou XML.
Permet aux scripts d'accéder et de manipuler le contenu, la
structure et le style des documents.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM
Qu'est-ce qu'un Événement DOM?
Définition :
Un événement DOM est une action ou occurrence détectée par
le navigateur, comme un clic, un mouvement de souris, une
pression de touche, etc.
Types d'Événements :
Événements de souris (click, mouseover, mouseout...).
Événements de clavier (keypress, keydown, keyup).
Événements de formulaire (submit, change, focus).
Événements de fenêtre (load, resize, scroll). DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM
Écouteurs d'Événements
Ajout d'Écouteurs :
Utilisation de addEventListener pour attacher un écouteur
d'événements à un élément.
Syntaxe : element.addEventListener(event, function,
useCapture);
Fonction de Rappel :
Fonction appelée lorsqu'un événement se produit.
DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Lister tous les attributs et propriétés accessibles en JavaScript pour les

éléments HTML est un vaste sujet, car il existe de nombreux attributs et
propriétés, et leur disponibilité peut varier en fonction du type
d'élément.
Exemples :

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM
Attributs Généraux
id : L'identifiant unique de l'élément.
class : Les classes CSS de l'élément.
style : Le style inline de l'élément.
title : Un texte supplémentaire associé à l'élément (généralement
affiché en tant qu'info-bulle).
data-* : Pour stocker des informations supplémentaires
personnalisées.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Attributs d'Événement
onclick, onmouseover, onmouseout, onkeydown, onload, etc. : Pour
gérer les événements JavaScript directement depuis le HTML.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Attributs de Formulaire
value : La valeur d'un élément de formulaire (input, select, etc.).
name : Le nom de l'élément de formulaire.
placeholder : Le texte indicatif dans un champ de formulaire.
checked : Indique si un élément de type checkbox ou radio est
coché.
disabled : Indique si un élément de formulaire est désactivé.
readonly : Rend un champ de formulaire en lecture seule.
DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Attributs de Lien et de Source

href : L'URL de destination d'un lien (<a>).
src : L'URL de la source d'une image (<img>), d'une vidéo (<video>)
ou d'un script (<script>).
alt : Texte alternatif pour les images.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Propriétés DOM
innerHTML / outerHTML : Obtient ou définit la structure HTML à
l'intérieur de l'élément.
textContent : Obtient ou définit le contenu textuel de l'élément.
parentElement, children, nextSibling, previousSibling : Pour
naviguer dans la structure DOM.
style : Un objet représentant le style CSS de l'élément.
classList : Permet de manipuler les classes d'un élément.
attributes : Un objet contenant tous les attributs d'un élément. DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Propriétés d'État et de Dimension

offsetWidth, offsetHeight : Largeur et hauteur, incluant les
bordures et les paddings.
clientWidth, clientHeight : Largeur et hauteur, excluant les bordures
mais incluant les paddings.
scrollWidth, scrollHeight : Dimensions totales du contenu défilable.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Propriétés et Méthodes Spécifiques aux Types d'Éléments

play(), pause() pour les éléments <video> et <audio>.
getContext() pour les éléments <canvas>.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Propriétés et Méthodes liées aux Événements

addEventListener(), removeEventListener() : Pour attacher ou
détacher des gestionnaires d'événements.
preventDefault(), stopPropagation() : Méthodes utilisées dans la
gestion des événements.

DAY 01
JavaScript
GESTION DES ÉVÉNEMENTS DOM

Cette liste n'est pas exhaustive, mais elle couvre bon nombre des
attributs et propriétés les plus fréquemment utilisés en JavaScript
pour manipuler les éléments HTML. Pour une liste complète, il est
conseillé de se référer à la documentation officielle du Web API et
HTML sur des sites comme MDN (Mozilla Developer Network).

DAY 01
JavaScript

EXEMPLES DE CODE

DAY 01
JavaScript

DAY 01
JavaScript

DAY 01
JavaScript

PRÉPARATION - TP

DAY 01
JavaScript

FIN DU PHASE 2
next : • API Requests with JS

DAY 00
JavaScript

PHASE 2
API Requests with JS

DAY 02
JavaScript
INTRODUCTION
ARCHITECTURES DE DÉVELOPPEMENT

Architecture Monolithique Architecture Microservices

Architecture Serveless Architecture Peer 2 Peer

Architecture Client - Serveur

DAY 02
JavaScript
INTRODUCTION
Architecture client / serveur

Dans cette configuration, l'application web est divisée en deux parties

principales : le client et le serveur. Le client est généralement un
navigateur web qui exécute le frontend de l'application, tandis que le
serveur gère le backend et interagit avec la base de données, les
fichiers, et d'autres services.

DAY 02
JavaScript
ROLE DU CLIENT
Architecture client / serveur

Rôle du client : Le client envoie des requêtes au serveur, généralement

via le Web (HTTP/HTTPS), pour demander des données ou des services.
Le client affiche également les données et les interfaces utilisateur
reçues du serveur. Les technologies courantes utilisées pour le
développement du client incluent HTML, CSS et JavaScript.

DAY 02
JavaScript
ROLE DU SERVEUR
Architecture client / serveur

Rôle du serveur : Le serveur traite les requêtes du client, interagit avec

la base de données ou d'autres services si nécessaire, et renvoie les
résultats au client. Les serveurs web peuvent être développés en
utilisant divers langages et frameworks, tels que Python avec Django ou
Flask, Java avec Spring, ou JavaScript avec Node.js.

DAY 02
JavaScript
COMMUNICATION
Architecture client / serveur

Communication : La communication entre le client et le serveur se fait

généralement via le protocole HTTP. Les données peuvent être
échangées sous divers formats, le plus courant étant le JSON
(JavaScript Object Notation).

DAY 02
JavaScript

LES AVANTAGES
Architecture client / serveur

Cette architecture permet de séparer les préoccupations, de répartir

la charge entre le client et le serveur, et facilite le développement et la
maintenance des applications. Elle est également adaptable à
différents environnements et dispositifs (ordinateurs, téléphones
mobiles, tablettes).

DAY 02
JavaScript
LES DÉFIS
Architecture client / serveur

Il est important de prendre en compte la sécurité (par exemple, les

attaques XSS, CSRF), la performance (gestion de la charge du serveur,
optimisation du frontend), et la compatibilité entre différents
navigateurs et dispositifs.

DAY 02
JavaScript

JAVASCRIPT
et les requêtes http / https

DAY 02
JavaScript
JAVASCRIPT
Requêtes HTTP

Javascript s'exécute dans le navigateur, permet de créer et d'envoyer

des requêtes HTTP vers le serveur. Cela est généralement accompli en
utilisant l'objet XMLHttpRequest ou l'API fetch, qui sont des moyens
intégrés dans les navigateurs modernes pour effectuer des requêtes
HTTP.

DAY 02
JavaScript
JAVASCRIPT
FETCH API

L'API fetch est une façon moderne et plus puissante de faire des
requêtes HTTP en JavaScript. Elle est basée sur les promesses, ce qui
rend le code plus lisible et facile à gérer, surtout pour les opérations
asynchrones. Avec fetch, vous pouvez envoyer des requêtes GET,
POST, PUT, DELETE, etc., et gérer les réponses du serveur.

DAY 02
JavaScript

HTTP / HTTPS

DAY 02
JavaScript
JAVASCRIPT
HTTP / HTTPS

Les requêtes HTTP et HTTPS sont des mécanismes fondamentaux pour

la communication sur le Web, permettant aux clients (comme les
navigateurs) de demander des ressources aux serveurs.

DAY 02
JavaScript

HTTP VS HTTPS
HTTP (Hypertext Transfer Protocol) est le protocole de base pour la
transmission de données sur le Web.
HTTPS (HTTP Secure) est une version de HTTP sécurisée par
l'utilisation de protocoles de chiffrement comme SSL/TLS. HTTPS
crypte les données transférées, offrant sécurité et confidentialité.

DAY 02
JavaScript
COMPOSANTS D'UNE REQUÊTE
HTTP/HTTPS
Ligne de Requête (Request Line)
Méthode : Indique l'action souhaitée sur la ressource. Les
méthodes courantes incluent GET (récupérer des données),
POST (envoyer des données pour traitement), PUT (mettre à
jour une ressource), DELETE (supprimer une ressource), etc.
URL (Uniform Resource Locator) : Adresse de la ressource sur le
serveur.
Version HTTP : Version du protocole HTTP utilisée (par exemple,
HTTP/1.1). DAY 02
JavaScript
COMPOSANTS D'UNE REQUÊTE
HTTP/HTTPS
En-têtes (Headers)
Fournissent des informations supplémentaires sur la requête ou le
client. Exemples :
Host : Nom de domaine du serveur.
User-Agent : Identifie le type de client effectuant la requête.
Accept : Types de contenu que le client peut traiter.
Content-Type : Type de données dans le corps de la requête
(pour POST/PUT).
Authorization : Informations d'authentification. DAY 02
JavaScript
COMPOSANTS D'UNE REQUÊTE
HTTP/HTTPS
Corps de la Requête (Request Body)
Contient les données envoyées avec la requête. Utilisé avec des
méthodes comme POST ou PUT.
Peut contenir des données de formulaire, du JSON, du XML, etc.
Paramètres de Requête
Souvent inclus dans l'URL pour les requêtes GET. Exemple : ?
param1=value1&param2=value2.

DAY 02
JavaScript

FONCTIONNEMENT D'UNE REQUÊTE

Envoi de la Requête : Le client envoie la requête au serveur via une

connexion TCP/IP (HTTPS utilise en plus une couche de chiffrement
SSL/TLS).
Traitement par le Serveur : Le serveur analyse la requête, exécute
l'action demandée (comme récupérer une page web), et prépare
une réponse.
Réponse du Serveur : Le serveur envoie une réponse au client,
comprenant un code de statut (par exemple, 200 OK, 404 Not
Found) et, généralement, les données demandées. DAY 02
JavaScript

SÉCURITÉ AVEC HTTPS

Chiffrement : Les données sont chiffrées pendant la transmission,

protégeant contre l'écoute clandestine.
Authentification : Les certificats SSL/TLS assurent que le client
communique avec le bon serveur.
Intégrité des Données : Vérifie que les données n'ont pas été
altérées pendant le transfert.

DAY 02
JavaScript

FETCH API

DAY 02
JavaScript
FETCH API
La méthode fetch en JavaScript est une façon moderne et puissante de
faire des requêtes réseau (notamment HTTP). Elle est plus flexible et
plus facile à utiliser que XMLHttpRequest, l'approche plus ancienne.

DAY 02
JavaScript
FETCH API - OPTIONS

Méthode (method) : Type de requête (GET, POST, PUT, DELETE,

etc.).
En-têtes (headers) : Un objet représentant les en-têtes HTTP.
Corps (body) : Les données à envoyer avec la requête (pour POST,
PUT, etc.). Peut être une chaîne de caractères, un objet FormData,
un Blob, etc.
Mode (mode) : Mode de la requête (par exemple, cors pour les
requêtes cross-origin).

DAY 02
JavaScript
FETCH API - OPTIONS

Credentials (credentials) : Gestion des cookies et des identifiants

(par exemple, include pour les inclure dans les requêtes cross-
origin).
Cache (cache) : Politique de cache de la requête.
Redirect (redirect) : Gestion des redirections (par exemple, follow
pour suivre les redirections).

DAY 02
 JavaScript
FETCH API - TRAITEMENT DE LA RÉPONSE
L'objet Response retourné par la promesse contient plusieurs
propriétés et méthodes utiles :
Vérification du Statut : response.status (code de statut HTTP) et
response.ok (booléen indiquant si le statut est dans la plage 200-
299).
Lecture du Corps : Méthodes pour lire le corps de la réponse :
.json() : Pour les réponses JSON.
.text() : Pour les réponses en texte brut.
.blob() : Pour les données binaires.
En-têtes de Réponse : response.headers pour accéder aux en-têtes
DAY 02
de la réponse.
JavaScript
EXEMPLE DE CODE

DAY 02
JavaScript
GESTION DES ERREURS
La promesse rejetée par fetch indique seulement des erreurs réseau
(par exemple, problème de connexion).
Les réponses HTTP avec des codes d'erreur (comme 404 ou 500) ne
rejetteront pas la promesse. Il faut vérifier response.ok ou
response.status.
fetch est un outil puissant et flexible pour faire des requêtes réseau
en JavaScript, offrant une meilleure intégration avec les autres
fonctionnalités modernes du langage comme les promesses et
async/await.
DAY 02
JavaScript

APIS

DAY 02
JavaScript
APIS
Une API (Application Programming Interface) est un ensemble de règles,
protocoles et outils permettant à différentes applications ou systèmes
logiciels de communiquer entre eux. Les API jouent un rôle crucial dans
le développement logiciel moderne, en facilitant l'interaction entre
différents logiciels. Elles sont particulièrement importantes dans le
contexte des applications web, où elles permettent la communication
entre le frontend (interface utilisateur) et le backend (serveur), ainsi
qu'avec d'autres services tiers.

DAY 02
JavaScript
CARACTÉRISTIQUES FONDAMENTALES
DES API
1. Interface Contractuelle : Une API définit un contrat entre le
fournisseur de l'API et l'utilisateur, spécifiant comment les deux
parties doivent interagir. Ce contrat inclut des détails sur les
requêtes possibles, les formats de données, les protocoles de
communication, etc.
2. Abstraction et Encapsulation : Les API fournissent une couche
d'abstraction, permettant aux développeurs d'utiliser des
fonctionnalités complexes sans connaître les détails de leur mise en
œuvre interne. Cela favorise également l'encapsulation, en cachant
DAY 02
les détails internes du service fourni.
JavaScript
CARACTÉRISTIQUES FONDAMENTALES
DES API
Interactivité entre Divers Langages et Plateformes : Les API
permettent l'interaction entre des applications écrites dans
différents langages de programmation et fonctionnant sur
différentes plateformes.

DAY 02
JavaScript

LES TYPES DES APIS

API Web / API REST : Les API web, souvent basées sur le style
architectural REST (Representational State Transfer), utilisent les
protocoles HTTP/HTTPS pour les communications. Les API REST sont
largement utilisées pour les interactions client-serveur dans les
applications web.
API SOAP : Basé sur le protocole SOAP (Simple Object Access
Protocol), ce type d'API est souvent utilisé dans les entreprises pour
des échanges de données structurées et sécurisées.
DAY 02
JavaScript

LES TYPES DES APIS

API GraphQL : Un langage de requête pour votre API, et un runtime

côté serveur pour exécuter ces requêtes en utilisant un type système
que vous définissez pour vos données.
API Locales : Fournissent des interfaces pour interagir avec le
système d'exploitation ou d'autres logiciels locaux.
API de Librairies/Frameworks : Ces API sont fournies par des
bibliothèques ou des frameworks logiciels, permettant aux
développeurs d'accéder à des fonctionnalités prédéfinies.
DAY 02
JavaScript

UTILISATION DES API

Intégration de Services Tiers : Les API permettent l'intégration de

services tiers, comme les paiements en ligne, les cartes, ou les
services de réseaux sociaux.
Microservices : Dans l'architecture microservices, les différents
services communiquent entre eux via des API.
Automatisation et Orchestration : Les API sont utilisées pour
automatiser des tâches et orchestrer le fonctionnement entre
différents systèmes.
DAY 02
JavaScript
BONNES PRATIQUES DE CONCEPTION
D'API
Sécurité : Authentification (tokens, OAuth), autorisation, et
chiffrement des données sont cruciaux.
Documentation : Une documentation claire et complète est
essentielle pour que les développeurs puissent utiliser l'API
efficacement.
Versioning : Gérer les versions de l'API pour maintenir la
compatibilité avec les applications existantes.
Gestion des Erreurs : Fournir des messages d'erreur clairs et des
codes de statut appropriés. DAY 02
JavaScript
BONNES PRATIQUES DE CONCEPTION
D'API

Performance et Scalabilité : Optimiser la performance et s'assurer

que l'API peut gérer un grand nombre de requêtes.

DAY 02
JavaScript

TP - FETCH API DUMMYJSON

DAY 02