code

JavaScript pour
Débutants
Un Guide Visuel

Découvrez les fondamentaux de JavaScript à travers

des explications visuelles et des exemples pratiques
conçus spécialement pour les débutants.

lightbulb auto_awesome touch_app

Concepts Clés Visuel
Interactif
Variables, Illustrations claires
Exemples pratiques
fonctions, objets et pour chaque
et exercices
plus encore concept
 Variables et Types de
Données
Les bases du stockage d'informations en JavaScript

storage Qu'est-ce qu'une variable ?

Une variable est un conteneur qui stocke une valeur. Pensez-y comme
une boîte étiquetée où vous pouvez mettre différentes informations.

// Déclaration de variables
let nom = "Marie"; // Variable modifiable
const age = 25; // Constante (non modifiable)
var ville = "Paris"; // Ancienne méthode (à éviter)

category Types de Données Primitifs

JavaScript a plusieurs types de données primitifs pour représenter
différentes sortes d'informations :

text_fields String: "Bonjour" tag Number: 42, 3.14

check_circle Boolean: true, false remove Undefined: non défini

block Null: vide intentionnel emoji_symbols Symbol: identifiant unique

swap_horiz Conversion de Types

JavaScript peut convertir automatiquement les types de données
(coercition) ou vous pouvez les convertir manuellement :

Conversion Automatique Conversion Manuelle

"5" + 3 // → "53" Number("123") // → 123

(string) String(123) // → "123"
"5" - 3 // → 2 (number) Boolean(1) // → true
"5" == 5 // → true
(boolean)
 Fonctions
Les blocs de construction réutilisables de JavaScript

functions Qu'est-ce qu'une fonction ?

Une fonction est un bloc de code réutilisable qui effectue une tâche
spécifique. Elle peut prendre des entrées (paramètres), traiter des
données, et retourner un résultat.

// Structure de base d'une fonction

function nomFonction(paramètre1, paramètre2) {
// Code à exécuter
return résultat;
}

code Déclaration de Fonctions

Il existe plusieurs façons de déclarer une fonction en JavaScript :

text_format Déclaration classique arrow_forward Expression de fonction

function saluer(nom) { const saluer =

return "Bonjour " + function(nom) {
nom; return "Bonjour " +
} nom;
};

flash_on Fonction fléchée (ES6) shortcut Fonction fléchée concise

const saluer = (nom) => const saluer = (nom) =>

{ "Bonjour " + nom;
return "Bonjour " +
nom;
};

sync_alt Paramètres et Valeurs de Retour

Les fonctions peuvent recevoir des données (paramètres) et renvoyer
des résultats :

input settings output

Paramètres
arrow_forward arrow_forward
Traitement Valeur de retour
d'entrée

Fonction avec paramètres Fonction sans retour

function function
additionner(a, b) { afficherMessage(msg) {
return a + b; [Link](msg);
} }

additionner(5, 3); afficherMessage("Bonjour!");

// → 8 // → undefined

lightbulb Pourquoi les fonctions sont importantes ?

repeat grid_view
Réutilisabilité Organisation
Écrire une fois, utiliser partout Structurer le code en blocs logiques

build extension
Maintenance Abstraction
Facile à modifier et déboguer Cacher la complexité derrière une
interface simple
 Objets et Tableaux
Structures de données complexes en JavaScript

category Qu'est-ce qu'un objet ?

Un objet est une collection de propriétés, où chaque propriété est une
association entre un nom (ou clé) et une valeur.

nom: "Marie"

âge: 25

ville: "Paris"

travail: function() {...}

// Création d'un objet

const personne = {
nom: "Marie",
âge: 25,
ville: "Paris",
saluer: function() {
return "Bonjour, je suis " + [Link];
}
};

build Manipulation des objets

visibility Accéder aux propriétés add Ajouter des propriétés
Deux manières d'accéder aux Créer de nouvelles propriétés pour
propriétés d'un objet un objet

[Link] [Link] =
personne["nom"] "marie@[Link]";

edit Modifier des propriétés delete Supprimer des propriétés

Changer la valeur d'une propriété Retirer une propriété d'un objet
existante
delete [Link];
personne.âge = 26;

view_array Tableaux (Arrays)

Un tableau est une liste ordonnée de valeurs. Chaque valeur est appelée
un élément, et chaque élément a une position numérique appelée index
(commençant par 0).

0 1 2 3

// Création d'un tableau

const fruits = ["pomme", "banane", "orange", "fraise"];

// Accéder aux éléments

fruits[0]; // → "pomme"
fruits[2]; // → "orange"

// Connaître la longueur
[Link]; // → 4

format_list_bulleted Méthodes de tableaux utiles

add_circle push() et unshift() loop forEach()

Ajouter des éléments à la fin ou au Exécuter une fonction pour chaque
début élément

[Link]("kiwi"); [Link](fruit => {

[Link]("mangue"); [Link](fruit);
});

remove_circle pop() et shift()

Retirer des éléments de la fin ou du
filter_list filter() et map()
début Créer de nouveaux tableaux filtrés
ou transformés
[Link]();
[Link](); [Link](f => [Link]
> 5);
[Link](f =>
[Link]());
 Flux de Contrôle
Instructions conditionnelles et boucles en JavaScript

call_split Instructions Conditionnelles

Les instructions conditionnelles permettent d'exécuter du code en
fonction de certaines conditions.

alt_route if / else if / else swap_horiz switch

Exécute un bloc de code si une Compare une expression à
condition est vraie, sinon exécute un plusieurs valeurs et exécute le code
autre bloc correspondant

if (âge >= 18) { switch (jour) {

[Link]("Majeur"); case "lundi":
} else if (âge >= 13) { [Link]("Début de
[Link]("Adolescent"); semaine");
} else { break;
[Link]("Enfant"); case "vendredi":
} [Link]("Fin de
semaine");
break;
default:
[Link]("Jour
normal");
}

loop Boucles
Les boucles permettent d'exécuter répétitivement un bloc de code.

repeat for replay while

Exécute un bloc de code un nombre Exécute un bloc de code tant qu'une
déterminé de fois condition est vraie

for (let i = 0; i < 5; i++) let i = 0;

{ while (i < 5) {
[Link]("Tour n°" + [Link]("Tour n°" +
i); i);
} i++;
}

update do...while format_list_numbered for...of

Exécute un bloc de code au moins Parcourt les éléments d'un objet
une fois, puis répète tant que la itérable (tableau, chaîne, etc.)
condition est vraie
const fruits = ["pomme",
let i = 0; "banane", "orange"];
do { for (const fruit of fruits)
[Link]("Tour n°" + {
i); [Link](fruit);
i++; }
} while (i < 5);

rule Valeurs Truthy et Falsy

En JavaScript, toutes les valeurs ont une valeur booléenne inhérente
lorsqu'elles sont évaluées dans un contexte booléen.

check_circle Valeurs Truthy (vraies) cancel Valeurs Falsy (fausses)

true 1 -1 "0" false 0 -0 0n ""

"false" [] {} null undefined NaN

function(){}

// Exemples d'utilisation des valeurs truthy/falsy

if ("bonjour") {
[Link]("Ceci s'affiche car 'bonjour' est truthy");
}

if (0) {
[Link]("Ceci ne s'affiche pas car 0 est falsy");
} else {
[Link]("Ceci s'affiche car 0 est falsy");
}

speed Contrôle de Boucle Avancé

skip_next continue stop break
Passe à l'itération suivante de la Termine immédiatement la boucle
boucle, en sautant le reste du code et continue l'exécution après la
de l'itération actuelle boucle

for (let i = 0; i < 5; i++) for (let i = 0; i < 5; i++)

{ {
if (i === 2) continue; if (i === 2) break;
[Link](i); // Affiche [Link](i); // Affiche
0,1,3,4 0,1
} }
 Manipulation du DOM
Interagir avec les éléments HTML en JavaScript

account_tree Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est une interface de programmation
qui représente la structure d'un document HTML sous forme d'arbre
d'objets que JavaScript peut manipuler.

document

html

head body

div p

// Le DOM permet d'accéder et de modifier

// n'importe quel élément de la page web
[Link] = "Nouveau titre"; // Modifie le titre de
la page
[Link] = "#f0f0f0"; // Change
la couleur de fond

search Sélectionner des Éléments

querySelector() querySelectorAll()
tag Sélectionne le premier format_list_bulleted Sélectionne tous les éléments
élément correspondant correspondants

getElementById() getElementsByClassName()
bookmark Sélectionne par ID (unique) local_offer Sélectionne par classe

// Exemples de sélection
const titre = [Link]("h1");
const paragraphes = [Link]("p");
const bouton = [Link]("monBouton");
const elements =
[Link]("maClasse");

edit Modifier des Éléments

text_fields Contenu style Style

Modifier le texte ou le HTML d'un élément Changer l'apparence d'un élém

[Link] = "Nouveau texte"; [Link] = "bl

[Link] = "HTML"; [Link] =

format_list_bulleted Classes settings Attributs

Ajouter, supprimer ou vérifier des classes Modifier les attributs HTML

[Link]("nouvelleClasse"); [Link]("src
[Link]("ancienneClasse"); "[Link]");
[Link]("active"); [Link]("
[Link]("dis

add_circle Créer et Supprimer des Éléments

add Création delete Suppression
Créer de nouveaux éléments Supprimer des éléments existants

const nouveauDiv = const element =

[Link]("div"); [Link]("monEle
[Link] = "Bonjour!"; [Link](); // Supprime
[Link] = "maClasse"; l'élément

arrow_downward Ajout au DOM content_copy Clonage

Ajouter des éléments à la page Dupliquer des éléments existants

const parent = const original =

[Link]("conteneur"); [Link]("origin
[Link](nouveauDiv); const copie =
[Link](nouveauDiv, [Link](true);
premierEnfant); [Link](copie
 Événements
Réagir aux interactions utilisateur en JavaScript

notifications Qu'est-ce qu'un événement ?

Un événement est une action ou occurrence détectée par le navigateur,
comme un clic de souris, un appui sur une touche, ou le chargement
d'une page. JavaScript peut "écouter" ces événements et y répondre.

mouse click keyboard keydown visibility load screen_rotation resize touch_app touchstart

change_history change send submit mouse_over mouseover

// Exemple simple d'événement

const bouton = [Link]("button");

[Link]("click", function() {
alert("Bouton cliqué !");
});

settings_remote Gestionnaires d'Événements

add_circle addEventListener() remove_circle removeEventListener()
Méthode moderne pour ajouter un Supprime un gestionnaire d'événements
gestionnaire d'événements précédemment ajouté

[Link]("click", function maFonction() {

maFonction); [Link]("Événement
[Link]("click", déclenché");
function() { }
// Code à exécuter [Link]("click",
}); maFonction);
[Link]("click"
maFonction);

assignment Propriétés d'événement code Attributs HTML

Ancienne méthode mais toujours utilisée Méthode directe dans le HTML (déconseillé

[Link] = function() {
[Link]("Élément cliqué"); <button onclick="maFonction()">
}; Cliquez-moi
</button>
[Link] = null; //
Supprime l'événement

call_merge Propagation des Événements

Lorsqu'un événement se produit sur un élément, il se propage à travers le
DOM selon trois phases :

window

document

html

body

div parent

élément cible

Phase de Capture arrow_downward Phase Cible arrow_upward Phase de Bouillonnement

arrow_downward Capture arrow_upward Bouillonnement (Bubbling)

L'événement descend du haut du L'événement remonte de l'élément
DOM vers l'élément cible cible vers le haut du DOM

[Link]( [Link](
"click", "click",
maFonction, maFonction,
true // useCapture = true false // useCapture =
); false (défaut)
);

// Contrôler la propagation
[Link]("click", function(event) {
[Link](); // Arrête la propagation
[Link](); // Empêche le comportement par
défaut
});

event_available Objet Event

Lorsqu'un événement est déclenché, un objet Event est créé et passé au
gestionnaire d'événements. Il contient des informations utiles sur
l'événement.
touch_app Propriétés utiles mouse Événements de souris
Informations sur l'événement Informations spécifiques aux
événements de souris
[Link] // Élément qui
a déclenché l'événement [Link] // Position X
[Link] // par rapport à la fenêtre
Élément qui écoute [Link] // Position Y
l'événement par rapport à la fenêtre
[Link] // Type [Link] // Bouton de la
d'événement (click, etc.) souris (0=gauche, 1=milieu,
[Link] // Moment où 2=droite)
l'événement s'est produit [Link] // Si la touche
Alt est enfoncée
JavaScript Asynchrone
Gérer les opérations qui prennent du temps

hourglass_empty Qu'est-ce que l'asynchrone ?

JavaScript est un langage single-thread, mais il peut exécuter des
opérations asynchrones qui ne bloquent pas le thread principal. Cela
permet de gérer des tâches comme les requêtes réseau ou les lectures
de fichiers sans bloquer l'interface utilisateur.

1995 2015 2017

Callbacks Promesses Async/Await

Fonctions Objets Syntaxe simplifiée

passées en représentant une pour les
paramètre opération future promesses

// Exemple d'opération asynchrone

[Link]("Début");

setTimeout(function() {
[Link]("Opération asynchrone terminée");
}, 2000); // Exécuté après 2 secondes

[Link]("Fin"); // S'affiche immédiatement

replay Callbacks (Rappels)

Un callback est une fonction passée en argument à une autre fonction,
qui sera exécutée plus tard, généralement après la fin d'une opération
asynchrone.

call_made Callback simple warning Callback Hell

Fonction exécutée après une Imbrication excessive de callbacks
opération asynchrone
getData(function(a) {
function fetchData(callback) getMoreData(a, function(b)
{ {
setTimeout(function() { getMoreData(b,
callback("Données function(c) {
reçues"); getMoreData(c,
}, 1000); function(d) {
} [Link](d);
});
fetchData(function(data) { });
[Link](data); });
}); });

verified Promesses (Promises)

Une promesse est un objet représentant une opération asynchrone qui
n'est pas encore terminée. Elle peut être dans l'un des états suivants :
pending (en attente), fulfilled (résolue) ou rejected (rejetée).

hourglass_top check_circle error

arrow_forward arrow_forward
Pending Fulfilled Rejected

// Création d'une promesse

const maPromesse = new Promise(function(resolve, reject) {
const succes = true;

if (succes) {
resolve("Opération réussie !");
} else {
reject("Erreur lors de l'opération");
}
});

// Utilisation de la promesse
maPromesse
.then(function(resultat) {
[Link](resultat); // "Opération réussie !"
})
.catch(function(erreur) {
[Link](erreur);
});

auto_awesome Async/Await
Async/Await est une syntaxe simplifiée pour travailler avec les
promesses, rendant le code asynchrone plus facile à lire et à écrire,
similaire au code synchrone.

code Syntaxe de base compare_arrows Comparaison

Utilisation des mots-clés async et Promesses vs Async/Await
await

async function fetchData() Promesses Async/Await

{
try {
const response = await
.then().catch() try/catch
fetch('/api/data');
const data = await Chaînage Séquentiel
[Link]();
[Link](data);
} catch (erreur) { Plus verbeux Plus lisible
[Link](erreur);
}
}

// Exemple avec plusieurs opérations asynchrones

async function getUserData() {
try {
// Exécution parallèle
const [user, posts] = await [Link]([
fetch('/api/user/1'),
fetch('/api/posts/1')
]);

const userData = await [Link]();

const postsData = await [Link]();

return { user: userData, posts: postsData };

} catch (erreur) {
[Link]("Erreur:", erreur);
 }
}