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

Rappel

LES TYPES DES LES APPLICATIONS LES BIBLIOTHÈQUES ET

APPLICATIONS WEB LES FRAMEWORKS
Les types d'applications que Les applications web sont Une bibliothèque offre des
l'on peut développer sont des programmes interactifs outils spécifiques que vous
variés et couvrent un large accessibles via un pouvez utiliser comme vous
éventail de domaines et de navigateur internet, conçus le souhaitez, tandis qu'un
technologies. pour offrir des framework fournit un modèle
Applications Web fonctionnalités dynamiques ou une architecture
Applications Mobiles et une expérience utilisateur complète à suivre pour
Applications d'Entreprise enrichissante. 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