Sommaire

Apprendre JavaScript

Objectifs

  1. Compréhension du Langage :

    • Acquérir une compréhension approfondie des concepts fondamentaux de JavaScript.
    • Apprendre la syntaxe et la structure de base du langage.

  2. Manipulation du DOM :

    • Maîtriser la manipulation du Document Object Model (DOM) pour interagir avec les éléments d'une page web.

  3. Programmation Asynchrone :

    • Comprendre les concepts liés à la programmation asynchrone.
    • Utiliser des Promises et des fonctions asynchrones pour gérer les opérations non bloquantes.

  4. Gestion des Événements :

    • Savoir gérer les événements du navigateur et réagir de manière appropriée aux interactions de l'utilisateur.

  5. Structures de Données :

    • Travailler avec des objets et des tableaux pour organiser et manipuler les données.

  6. Programmation Orientée Objet :

    • Comprendre les principes de base de la programmation orientée objet en JavaScript.
    • Créer et utiliser des classes et des instances.

  7. Communication avec le Serveur :

    • Apprendre à effectuer des requêtes HTTP asynchrones à l'aide de l'API Fetch.
    • Comprendre le concept d'AJAX et son utilisation.

  8. Développement d'Applications Web :

    • Acquérir des compétences pour développer des applications web interactives et réactives.

  9. Débogage et Bonnes Pratiques :

    • Maîtriser les outils de débogage du navigateur.
    • Adopter les bonnes pratiques de progammation en JavaScript.

  10. Projet Pratique :

    • Mettre en pratique les connaissances acquises à travers la réalisation d'un projet pratique.

  11. Préparation à des Niveaux Avancés :

    • Fournir une base solide pour ceux qui souhaitent approfondir leurs connaissances en JavaScript et explorer des sujets plus avancés.

Prérequis

Avant de suivre ce cours, les apprenants devraient idéalement posséder les connaissances et compétences suivantes :

  1. Notions de Base en Programmation :

    • Compréhension des concepts fondamentaux de la programmation tels que les variables, les boucles et les structures conditionnelles.

  2. HTML et CSS :

    • Connaissance de base en HTML pour comprendre la structure d'une page web.
    • Compétence de base en CSS pour la mise en forme et la présentation des pages web.

  3. Environnement de Développement :

    • Familiarité avec l'utilisation d'un éditeur de texte ou un environnement de développement intégré (IDE).

  4. Navigation Web :

    • Connaissance de base de la navigation sur le web et de l'utilisation des navigateurs.

  5. Motivation et Engagement :

    • Motivation à apprendre et à résoudre des problèmes.
    • Engagement à travailler sur des projets pratiques et à participer activement aux activités du cours.

Ces prérequis servent à garantir que les apprenants ont une base solide avant d'aborder le cours de JavaScript et peuvent tirer le meilleur parti de l'expérience d'apprentissage.

Sommaire

  1. Objectifs
  2. Prérequis
  3. Sommaire
  4. Introduction à JavaScript
    1. Présentation du langage JavaScript
      1. Définition du langage JavaScript
      2. Caractéristiques principales
      3. Utilisations courantes
    2. Histoire et évolution de JavaScript
      1. Origines de JavaScript
      2. Évolution à travers les versions
      3. Impact sur le développement web
  5. Fondamentaux de JavaScript
    1. Variables et types de données
      1. Variables
      2. Types de données
        1. Primitifs :
        2. Complexes :
    2. Opérateurs
      1. Opérateurs Arithmétiques
      2. Opérateurs de Comparaison
      3. Opérateurs Logiques
      4. Opérateurs d'Assignation
      5. Opérateurs spéciaux
    3. Structures de Contrôle
      1. Instructions Conditionnelles (if, else, switch)
      2. Boucles (for, while, do-while)
  6. Fonctions
    1. Déclaration de Fonction
    2. Appel de Fonction
    3. Paramètres et Arguments
    4. Valeurs de retour
    5. Portée des variables (Scope)
      1. Portée Globale
      2. Portée Locale
      3. Hoisting
    6. Fonctions Anonymes et Expressions de Fonctions
    7. Fonctions Fléchées (Arrow Fonctions)
  7. Manipulation du DOM
    1. Qu'est ce que le DOM ?
    2. Structure arborescente du DOM
    3. Interactivité avec le DOM
    4. Sélection des éléments dans le DOM
      1. Séletion par ID
      2. Sélection par nom de balise
      3. Sélection par classe
      4. Sélection par sélecteur CSS
      5. Sélection de tous les éléments par sélecteur CSS
      6. Sélection par relation parent-enfant
    5. Modification du contenu et des attributs
      1. Modification du contenu
      2. Modification des Attributs
      3. Ajout et suppréssion d'éléments
    6. Gestion des événements dans le DOM
      1. Ajout d'un événement
      2. Événements de souris
      3. Événements de clavier
      4. Événements de formulaire
      5. Retrait d'un événement
  8. Objets et Tableaux
    1. Objets
      1. Création d'un Objet
      2. Accès aux Propriétés et Méthodes d'un Objet
    2. Tableaux
      1. Création d'un Tableau
      2. Accès aux éléments du Tableau
    3. Objets et opérations sur les Objets
    4. Tableaux et opérations sur les Tableaux
    5. Itération sur les Objets et Tableaux
      1. Itération sur les Objets
      2. Itération sur les tableaux
  9. Asynchrone
    1. Callbacks
    2. Promesses
    3. Async/Await
    4. Les fonctions Asynchrones
      1. Déclaration d'une fonction Asynchrone
      2. Utilisation de Await dans une Fonction Asynchrone
      3. Gestion des Erreurs avec try/catch
    5. Le modèle de programmation événementielle
      1. Enregistrement d'un événement
      2. Utilisation de Promesses avec les Événements
      3. Librairies Événementielles
  10. AJAX et fetch API
    1. AJAX (Asynchronous JavaScript and XML)
    2. Fetch API
      1. Option de Fetch
  11. Outils de développement
    1. Débogage avec les outils du navigateur
      1. Console de développement
      2. Inspecteur d'éléments
      3. Débogage Pas-à-Pas
    2. Gestion des erreurs
      1. Blocs Try/Catch
      2. Gestionnaire des Erreurs Globales
      3. Bonnes Pratiques de Codage

Introduction à JavaScript

Présentation du langage JavaScript

JavaScript, souvent abrégé en JS, est un langage de programmation de haut niveau, dynamique et orienté objet. Il a été créé à l'origine pour rendre les pages web interactives en permettant des modifications du contenu côté client sans nécessiter de rechargement de la page. Voici un aperçu plus détaillé des éléments clés :

Définition du langage JavaScript

JavaScript est un langage de script polyvalent qui peut être exécuté dans un navigateur web. Il a été développé par Netscape et a été publié pour la première fois en 1995. En plus de son utilisation côté client pour la manipulation du DOM, JavaScript est également utilisé côté serveur grâce à des plates-formes telles que Node.js.

Caractéristiques principales

Utilisations courantes

JavaScript est essentiel dans le développement web moderne. Il est utilisé pour créer des fonctionnalités interactives, des animations, des validations de formulaires, et bien plus encore. En plus du développement web, JavaScript est également employé dans des environnements tels que le développement de jeux, la création d'extensions de navigateur, et le développement d'applications mobiles avec des frameworks tels que React Native.

Histoire et évolution de JavaScript

JavaScript a une histoire fascinante qui a vu son évolution et son adoption massive dans le développement web. Voici un aperçu détaillé des aspects historiques et évolutifs du langage :

Origines de JavaScript

JavaScript a été créé par Brendan Eich, un ingénieur chez Netscape, en 1995. À l'origine, il était appelé "Mocha" avant de devenir "LiveScript" et, finalement, "JavaScript" pour capitaliser sur la popularité émergente de Java à l'époque. Le langage avait pour objectif initial de fournir des fonctionnalités de script côté client dans le navigateur Netscape Navigator.

Évolution à travers les versions

Impact sur le développement web

JavaScript a révolutionné le développement web en offrant une expérience utilisateur plus dynamique et interactive. Il a contribué à l'émergence de nombreuses bibliothèques et frameworks tels que Angular, React, et Vue.js, simplifiant la création d'applications web complexes. L'adoption de JavaScript côté serveur avec Node.js a également ouvert de nouvelles opportunités pour le développement d'applications complètes.

Fondamentaux de JavaScript

Le chapitre sur les fondamentaux de JavaScript abordera les concepts de base qui forment la structure essentielle du langage. Ces éléments sont cruciaux pour la compréhension et la manipulation des données en JavaScript.

Variables et types de données

Variables

Les variables sont des conteneurs qui permettent de stocker et de manipuler des données en JavaScript. Elles sont déclarées à l'aide des mots-clés var, let ou const.

Exemple d'utilisation de variables:

// Utilisation de let pour déclarer une variable modifiable
let count = 10;

// Utilisation de const pour déclarer une variable constante
const pi = 3.14;

// Utilisation de var (à éviter) pour déclarer une variable
var message = "Hello, World!";

Types de données

JavaScript est un langage dynamiquement typé, ce qui signifie que les types de données sont déterminés à l'exécution. Il existe deux grands groupes des types, les types primitifs et les types complexes.

Primitifs :
Complexes :
// Primitifs
let name = "John";
let age = 30;
let isStudent = false;
let car = null;
let address; // undefined par défaut

// Complexes
let person = { name: "Alice", age: 25 };
let numbers = [1, 2, 3, 4, 5];
function greet() {
	console.log("Hello!");
}

En comprenant ces concepts, les développeurs peuvent utiliser efficacement les variables pour stocker et manipuler des données dans leurs programmes JavaScript.

Opérateurs

Les opérateurs sont des symboles spéciaux qui effectuent des opérations sur des variables et des valeurs. Ils sont essentiels pour manipuler les données en JavaScript. Ce chapitre explore les différents types d'opérateurs disponibles.

Opérateurs Arithmétiques

Les opérateurs arithmétiques effectuent des opérations mathématiques sur des nombres.

let a = 10;
let b = 5;

let addition = a + b; // 15
let soustraction = a - b; // 5
let multiplication = a * b; // 50
let division = a / b; // 2
let modulo = a % b; // 0

Opérateurs de Comparaison

Les opérateurs de comparaison comparent deux valeurs et renvoient un résultat booléen.

let x = 10;
let y = 5;

console.log(x == y); // false
console.log(x != y); // true
console.log(x === y); // false
console.log(x !== y); // true
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false

En utilisant ces opérateurs, les développeurs peuvent comparer efficacement les valeurs et prendre des décisions conditionnelles dans leurs programmes JavaScript.

Opérateurs Logiques

Les opérateurs logiques sont utilisés pour effectuer des opérations logiques sur les valeurs booléennes.

let condition1 = true;
let condition2 = false;

console.log(condition1 && condition2); // false
console.log(condition1 || condition2); // true
console.log(!condition1); // false

En utilisant ces opérateurs logiques, les développeurs peuvent créer des expressions conditionnelles complexes et prendre des décisions basées sur plusieurs conditions dans leurs programmes JavaScript.

Opérateurs d'Assignation

Les opérateurs d'assignation attribuent une valeur à une variable.

let a = 5;

a += 2; // a est maintenant égal à 7
a -= 3; // a est maintenant égal à 4
a *= 2; // a est maintenant égal à 8
a /= 4; // a est maintenant égal à 2
a %= 3; // a est maintenant égal à 2 (reste de la division par 3)

En utilisant ces opérateurs d'assignation, les développeurs peuvent effectuer des modifications directes sur les variables de manière concise et efficace dans leurs programmes JavaScript.

Opérateurs spéciaux

Opérateur de concaténation (+) : Utilisé pour concaténer des chaînes de caractères.

let firstName = "John";
let lastName = "Doe";

let fullName = firstName + " " + lastName; // "John Doe"

En utilisant l'opérateur de concaténation, les développeurs peuvent fusionner des chaînes de caractères et créer des expressions textuelles plus complexes dans leurs programmes JavaScript.

En comprenant l'utilisation et la combinaison de ces opérateurs, les développeurs peuvent effectuer des opérations complexes dans leurs programmes JavaScript.

Structures de Contrôle

Les structures de contrôle permettent de diriger le flux d'exécution d'un programme en fonction de certaines conditions.

Instructions Conditionnelles (if, else, switch)

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

let temperature = 25;

if (temperature > 30) {
	console.log("Il fait chaud!");
} else if (temperature > 20) {
	console.log("Le temps est agréable.");
} else {
	console.log("Il fait un peu frais.");
}

let day = "Lundi";

switch (day) {
	case "Lundi":
		console.log("C'est le début de la semaine.");
		break;
	case "Mercredi":
		console.log("On est au milieu de la semaine.");
		break;
	default:
		console.log("C'est un autre jour de la semaine.");
}

Boucles (for, while, do-while)

Les boucles permettent d'itérer sur un ensemble de données ou d'exécuter un bloc de code plusieurs fois.

for (let i = 0; i < 5; i++) {
	console.log(i);
}

let counter = 0;
while (counter < 3) {
	console.log("Iteration: " + counter);
	counter++;
}

let x = 5;
do {
	console.log("La valeur de x est : " + x);
	x--;
} while (x > 0);

En comprenant comment utiliser ces structures de boucles, les développeurs peuvent créer des programmes plus flexibles et réactifs en JavaScript.

Fonctions

Les fonctions sont des blocs de code réutilisables qui peuvent être définis une fois et appelés à plusieurs reprises. Elles jouent un rôle crucial dans la modularité et la structuration du code en JavaScript.

Déclaration de Fonction

La déclaration d'une fonction consiste à définir son nom, ses paramètres (si besoin), et le bloc de code à exécuter. On utilise le mot clé fonction pour déclarer une fonction.

// fonction sans paramètres
function helloWorld() {
	console.log("Hello World !");
}

// fonction avec paramètres
function additionner(a, b) {
	return a + b;
}

Appel de Fonction

L'appel d'une fonction exécute le bloc de code associé à cette fonction avec des valeurs spécifiques.

helloWorld(); // affiche "Hello World !" dans la console

let resultat = additionner(3, 5); // resultat est maintenant égal à 8

Paramètres et Arguments

Les paramètres sont des variables déclarées dans la signature/déclaration de la fonction, tandis que les arguments sont les valeurs réelles fournies lors de l'appel de la fonction.

function multiplier(x, y) {
	return x * y;
}

let produit = multiplier(4, 6); // produit est maintenant égal à 24

Dans cet exemple, la fonction multiplier prend deux paramètres (x et y). Lorsqu'elle est appelée avec des valeurs spécifiques (comme multiplier(4, 6)), ces valeurs sont assignées aux paramètres x et y à l'intérieur de la fonction. Le bloc de code utilise ensuite ces valeurs pour effectuer une multiplication et assigner le résultat à produit.

Valeurs de retour

Les valeurs de retour permettent à une fonction de renvoyer un résultat spécifique après son exécution. Cela offre la possibilité d'utiliser le résultat de la fonction dans d'autres parties du code. On utilise le mot clé return pour préciser la valeur qui doit être retournée par la fonction. Une valeur retournée est habituellement assignée à une variable, cela permet de réutiliser la valeur retournée ailleurs dans le script.

function aireTriangle(base, hauteur) {
	return (base * hauteur) / 2;
}

let aireTriangle1 = aireTriangle(2, 5);
// L'aire de ce triangle est égale à 5
// (2 * 5) / 2 = 5

let aireTriangle2 = aireTriangle(3, 4);
// L'aire de ce triangle est égale à 6
// (3 * 5) / 2 = 6

Portée des variables (Scope)

La portée d'une variable détermine la visibilité et l'accessibilité de cette variable dans différentes parties du code. En JavaScript, il existe principalement deux types de portées : la portée globale et la portée locale.

Portée Globale

Une variable déclarée en dehors de toute fonction ou bloc de code est une variable à portée globale. Elle est accessible de n'importe où dans le programme, y compris à l'intérieur des fonctions.

// Variable à portée globale
let globalVar = "Je suis une variable globale";

function afficherGlobalVar() {
	console.log(globalVar);
}

afficherGlobalVar(); // Affiche "Je suis une variable globale"

Dans cet exemple, la variable globalVar est accessible à la fois à l'extérieur et à l'intérieur de la fonction afficherGlobalVar.

Portée Locale

Une variable déclarée à l'intérieur d'une fonction ou d'un bloc de code est une variable à portée locale. Elle n'est accessible qu'à l'intérieur de cette fonction ou de ce bloc.

function examplePorteeLocale() {
	// Variable à portée locale
	let localVar = "Je suis une variable locale";

	console.log(localVar);
}

examplePorteeLocale(); // Affiche "Je suis une variable locale"

// console.log(localVar); // Cela provoquerait une erreur, car localVar n'est pas défini en dehors de la fonction.

Dans cet exemple, la variable localVar est déclarée à l'intérieur de la fonction examplePorteeLocale et n'est accessible que dans cette fonction.

Hoisting

JavaScript a un comportement appelé "hoisting" où les déclarations de variables sont déplacées vers le haut de leur portée avant l'exécution du code. Cela signifie que même si une variable est déclarée plus tard dans le code, elle peut être utilisée avant sa déclaration réelle.

console.log(hoistedVar); // Affiche "undefined"

var hoistedVar = "Je suis hoistée";
console.log(hoistedVar); // Affiche "Je suis hoistée"

Dans cet exemple, la déclaration de hoistedVar est "hoistée" vers le haut de la portée, mais la variable est initialisée à undefined jusqu'à sa déclaration effective.

Il est important de comprendre la portée des variables en JavaScript pour éviter les erreurs et écrire un code plus robuste et prévisible.

Fonctions Anonymes et Expressions de Fonctions

Il est possible de déclarer des fonctions sans leur attribuer de nom, créant ainsi des fonctions anonymes. Les expressions de fonction sont une autre manière de créer des fonctions sans utiliser la déclaration classique.

let carre = function (x) {
	return x * x;
};

let resultatCarre = carre(4); // resultatCarre est maintenant égal à 16

Fonctions Fléchées (Arrow Fonctions)

Les fonctions fléchées sont une syntaxe concise pour déclarer des fonctions en JavaScript, introduites dans ECMAScript 6 (ES6).

let cuber = x => x ** 3;

let resultatCube = cuber(3); // resultatCube est maintenant égal à 27

Manipulation du DOM

Le DOM, ou Document Object Model, est une interface de programmation qui représente la structure d'un document HTML ou XML sous forme d'arbre. En d'autres termes, le DOM permet aux développeurs d'interagir avec la structure, le style et le contenu d'une page web de manière dynamique, en utilisant des langages de programmation tels que JavaScript.

Qu'est ce que le DOM ?

Le DOM représente chaque élément d'une page web, comme des balises HTML, des attributs, du texte, etc., en tant qu'objets. Ces objets peuvent être manipulés à l'aide de scripts JavaScript pour modifier la structure, le style et le contenu d'une page sans avoir à recharger la page elle-même.

Le DOM est essentiel pour créer des pages web interactives et dynamiques, car il permet aux développeurs de réagir aux événements utilisateur, de modifier le contenu en temps réel et de créer des interfaces utilisateur dynamiques.

Structure arborescente du DOM

Le DOM est organisé de manière arborescente, où chaque élément de la page est un nœud dans cet arbre. Le nœud racine représente l'ensemble du document, suivi par les nœuds représentant les balises HTML, les attributs, le texte, etc.

Document (Racine)
├── Élement (Balise HTML)
│   ├── Attribut (Attribut de l'élément)
│   └── Élement (Élément dans un container)
│       └── Texte
└── Élement
    └── Texte

Interactivité avec le DOM

JavaScript est le langage de programmation principal utilisé pour interagir avec le DOM. Les développeurs peuvent accéder aux éléments du DOM, les modifier, les ajouter ou les supprimer en utilisant des méthodes et des propriétés JavaScript.

// Accès à un élément du DOM par son ID
let monElement = document.getElementById("monId");

// Modification du contenu de l'élément
monElement.innerHTML = "Nouveau contenu";

Dans cet exemple, document.getElementById est une méthode du DOM qui permet d'accéder à un élément en fonction de son ID, et innerHTML est une propriété qui permet de modifier le contenu HTML de cet élément.

En résumé, le DOM est une représentation en arbre de la structure d'une page web, offrant aux développeurs un moyen puissant et flexible d'interagir avec le contenu et le style des pages web à travers des scripts JavaScript.

Sélection des éléments dans le DOM

La sélection d'éléments dans le DOM est une étape cruciale lors de la manipulation d'une page web à l'aide de JavaScript. Cela permet aux développeurs d'interagir avec des éléments spécifiques pour les modifier, les supprimer ou ajouter de nouveaux éléments.

Séletion par ID

La méthode getElementById permet de sélectionner un élément en utilisant son ID unique.

let monElement = document.getElementById("monId");

Sélection par nom de balise

La méthode getElementsByTagName permet de sélectionner tous les éléments ayant une balise spécifique.

let tousLesParagraphes = document.getElementsByTagName("p");

Sélection par classe

La méthode getElementsByClassName permet de sélectionner tous les éléments ayant une classe spécifique.

let tousLesElementsAvecClasse = document.getElementsByClassName("maClasse");

Sélection par sélecteur CSS

La méthode querySelector permet de sélectionner le premier élément correspondant à un sélecteur CSS spécifique.

let premierElement = document.querySelector("#monId .maClasse");

Sélection de tous les éléments par sélecteur CSS

La méthode querySelectorAll permet de sélectionner tous les éléments correspondant à un sélecteur CSS spécifique.

let tousLesElements = document.querySelectorAll(".maClasse");

Sélection par relation parent-enfant

La propriété parentNode permet d'accéder au nœud parent d'un élément, tandis que la propriété childNodes permet d'accéder à tous les nœuds enfants.

let parent = monElement.parentNode;
let enfants = monElement.childNodes;

Ces méthodes de sélection offrent une flexibilité permettant aux développeurs de cibler spécifiquement les éléments dont ils ont besoin dans le DOM. Une fois les éléments sélectionnés, ils peuvent être manipulés à l'aide d'autres méthodes et propriétés du DOM.

Modification du contenu et des attributs

Une fois que vous avez sélectionné des éléments dans le DOM, la modification de leur contenu ou de leurs attributs est une tâche fréquente pour créer des pages web dynamiques. Voici comment vous pouvez effectuer ces modifications à l'aide de JavaScript.

Modification du contenu

La propriété innerHTML permet de manipuler le contenu HTML d'un élément. Vous pouvez l'utiliser pour remplacer ou ajouter du contenu à l'intérieur d'un élément.

// Sélection de l'élément par ID
let monElement = document.getElementById("monId");

// Modification du contenu HTML
monElement.innerHTML = "<p>Nouveau contenu</p>";

La propriété textContent permet de manipuler uniquement le texte à l'intérieur d'un élément, en ignorant les balises HTML.

// Modification du contenu texte
monElement.textContent = "Nouveau texte";

Modification des Attributs

Les attributs d'un élément peuvent être modifiés en utilisant les méthodes du DOM.

// Sélection de l'élément par ID
let monElement = document.getElementById("monId");

// Modification de l'attribut
monElement.setAttribute("src", "nouvelleImage.jpg");

Si vous connaissez le nom de l'attribut, vous pouvez également accéder directement à celui-ci.

// Modification de l'attribut directement
monElement.src = "nouvelleImage.jpg";

Ajout et suppréssion d'éléments

La création et l'ajout de nouveaux éléments dans le DOM se font également avec JavaScript. La méthode createElement crée un nouvel élément, et la méthode appendChild ajoute cet élément en tant qu'enfant d'un autre élément.

// Création d'un nouvel élément div
let nouveauDiv = document.createElement("div");

// Modification du contenu du nouvel élément
nouveauDiv.textContent = "Nouveau contenu div";

// Sélection de l'élément parent
let parent = document.getElementById("parentElement");

// Ajout du nouvel élément en tant qu'enfant
parent.appendChild(nouveauDiv);

La méthode removeChild permet de supprimer un élément de son parent.

// Suppression de l'élément nouvellement créé
parent.removeChild(nouveauDiv);

En comprenant ces techniques de modification du contenu et des attributs, les développeurs peuvent créer des pages web interactives et réactives.

Gestion des événements dans le DOM

La gestion des événements est essentielle pour rendre les pages web interactives. Les événements tels que les clics de souris, les pressions de touches, les changements de taille de fenêtre, etc., peuvent déclencher l'exécution de scripts JavaScript spécifiques.

Ajout d'un événement

La méthode addEventListener permet d'attacher un gestionnaire d'événements à un élément. Vous spécifiez le type d'événement (comme "click", "mouseover", "keydown", etc.) et la fonction à exécuter lorsque l'événement se produit.

// Sélection de l'élément par ID
let monElement = document.getElementById("monId");

// Ajout d'un gestionnaire d'événements pour le clic
monElement.addEventListener("click", function () {
	console.log("Clic détecté !");
});

Événements de souris

Les événements de souris sont couramment utilisés pour détecter les interactions de l'utilisateur avec une page web.

// Gestionnaire pour le survol de la souris
monElement.addEventListener("mouseover", function () {
	console.log("Souris survolée !");
});

// Gestionnaire pour le clic droit
monElement.addEventListener("contextmenu", function (event) {
	event.preventDefault(); // Empêche l'affichage du menu contextuel
	console.log("Clic droit détecté !");
});

Voici un tableau des événements de souris les plus couramment utilisés dans la gestion des événements JavaScript :

Événement Description
click Un clic de souris sur un élément.
dblclick Double-clic de souris sur un élément.
mousedown Le bouton de la souris est enfoncé sur un élément.
mouseup Le bouton de la souris est relâché sur un élément.
mousemove La souris se déplace au-dessus d'un élément.
mouseover La souris survole un élément ou entre dans celui-ci.
mouseout La souris quitte un élément.
contextmenu Clic droit sur un élément pour afficher le menu contextuel.

Ces événements offrent un large éventail de possibilités pour détecter et répondre aux interactions de l'utilisateur avec les éléments d'une page web à l'aide de JavaScript.

Événements de clavier

Les événements de clavier sont utilisés pour détecter les pressions de touches du clavier.

// Gestionnaire pour la pression d'une touche
document.addEventListener("keydown", function (event) {
	console.log("Touche pressée : " + event.key);
});

Événements de formulaire

Les formulaires peuvent être associés à des événements tels que la soumission ou le changement de valeurs.

// Gestionnaire pour la soumission d'un formulaire
let monFormulaire = document.getElementById("monFormulaire");
monFormulaire.addEventListener("submit", function (event) {
	event.preventDefault(); // Empêche l'envoi du formulaire
	console.log("Formulaire soumis !");
});

Retrait d'un événement

La méthode removeEventListener permet de retirer un gestionnaire d'événements précédemment ajouté.

function gestionnaireClic() {
	console.log("Clic détecté !");
}

// Ajout du gestionnaire d'événements
monElement.addEventListener("click", gestionnaireClic);

// Retrait du gestionnaire d'événements
monElement.removeEventListener("click", gestionnaireClic);

Objets et Tableaux

Les objets et les tableaux sont des structures de données fondamentales en JavaScript, permettant aux développeurs de stocker, organiser et manipuler des informations de manière flexible.

Objets

Les objets en JavaScript sont des collections de paires clé-valeur, où chaque clé est une chaîne de caractères et chaque valeur peut être de n'importe quel type de données, y compris d'autres objets. Les objets permettent de représenter des entités complexes avec des propriétés et des méthodes associées.

Création d'un Objet

let personne = {
	nom: "John",
	age: 30,
	adresse: {
		rue: "123 Rue Principale",
		ville: "Villeville",
		codePostal: "12345",
	},
	parler: function () {
		console.log("Bonjour !");
	},
};

Accès aux Propriétés et Méthodes d'un Objet

console.log(personne.nom); // Accès à la propriété "nom"
console.log(personne.adresse.ville); // Accès à une propriété imbriquée
personne.parler(); // Appel de la méthode "parler"

Tableaux

Les tableaux en JavaScript sont des collections ordonnées d'éléments indexés numériquement. Ils sont utilisés pour stocker des listes d'éléments et sont particulièrement adaptés pour travailler avec des ensembles de données.

Création d'un Tableau

let fruits = ["Pomme", "Banane", "Orange"];

Accès aux éléments du Tableau

console.log(fruits[0]); // Accès au premier élément du tableau. Affiche "Pomme" dans la console

Il est observé que le premier élément du tableau fruits est "Pomme" car les tableaux JavaScript sont indexés à partir de 0, ce qui signifie que le comptage des éléments commence à 0.

Objets et opérations sur les Objets

Les objets en JavaScript sont des structures de données flexibles permettant de stocker des collections de paires clé-valeur. Les opérations sur les objets facilitent la manipulation et l'interaction avec les propriétés de l'objet.

// Création d'un Objet
let personne = {
	nom: "John",
	age: 30,
	adresse: "123 Rue Principale",
};

// Accès aux Propriétés et Méthodes d'un Objet
console.log(personne.nom); // Accès à la propriété "nom"
console.log(personne.adresse); // Accès à la propriété "adresse"

// Méthodes pour Manipuler les Propriétés
let cles = Object.keys(personne);
console.log(cles); // ["nom", "age", "adresse"]

let valeurs = Object.values(personne);
console.log(valeurs); // ["John", 30, "123 Rue Principale"]

let entrees = Object.entries(personne);
console.log(entrees); // [["nom", "John"], ["age", 30], ["adresse", "123 Rue Principale"]]

// Méthodes pour Manipuler l'Objet Lui-même
let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }

let personneFreeze = { nom: "John" };
Object.freeze(personneFreeze);
personneFreeze.nom = "Jane"; // Ne produira aucune modification, car l'objet est gelé

// Méthodes pour Manipuler le Prototype
let animal = { cri: "bruit" };
let chien = Object.create(animal);
console.log(chien.cri); // "bruit"

let protoChien = Object.getPrototypeOf(chien);
console.log(protoChien === animal); // true

Tableaux et opérations sur les Tableaux

Les tableaux en JavaScript sont des structures de données flexibles permettant de stocker des collections ordonnées d'éléments. Les opérations sur les tableaux sont courantes dans le développement JavaScript, offrant diverses façons de manipuler et de travailler avec les données.

// Création d'un Tableau
let fruits = ["Pomme", "Banane", "Orange"];

// Accès aux Éléments d'un Tableau
console.log(fruits[0]); // Accès au premier élément du tableau (Pomme)

// Ajout et Suppression d'Éléments
fruits.push("Fraise"); // Ajout de "Fraise" à la fin du tableau
console.log(fruits); // ["Pomme", "Banane", "Orange", "Fraise"]

fruits.pop(); // Retrait du dernier élément du tableau
console.log(fruits); // ["Pomme", "Banane", "Orange"]

fruits.unshift("Kiwi"); // Ajout de "Kiwi" au début du tableau
console.log(fruits); // ["Kiwi", "Pomme", "Banane", "Orange"]

fruits.shift(); // Retrait du premier élément du tableau
console.log(fruits); // ["Pomme", "Banane", "Orange"]

// Méthodes Courantes des Tableaux
let longueurTableau = fruits.length;
console.log(longueurTableau); // 3

let indexBanane = fruits.indexOf("Banane");
console.log(indexBanane); // 1

let dernierIndexOrange = fruits.lastIndexOf("Orange");
console.log(dernierIndexOrange); // 2

let sousListe = fruits.slice(1, 3);
console.log(sousListe); // ["Banane", "Orange"]

Itération sur les Objets et Tableaux

Itération sur les Objets

Pour itérer sur les propriétés d'un objet, on peut utiliser une boucle for...in ou les méthodes Object.keys, Object.values, ou Object.entries.

// Objet personne
let personne = {
	nom: "John",
	age: 30,
	adresse: "123 Rue Principale",
};

// Boucle for...in
for (let cle in personne) {
	console.log(cle + ": " + personne[cle]);
}

// Utilisation de Object.keys
let cles = Object.keys(personne);
cles.forEach(function (cle) {
	console.log(cle + ": " + personne[cle]);
});

// Utilisation de Object.entries
let entrees = Object.entries(personne);
entrees.forEach(function ([cle, valeur]) {
	console.log(cle + ": " + valeur);
});

Itération sur les tableaux

Pour itérer sur les éléments d'un tableau en JavaScript, on peut utiliser des boucles for, forEach, ou les méthodes spécifiques des tableaux comme map ou reduce.

// Tableau de fruits
let fruits = ["Pomme", "Banane", "Orange"];

// Boucle for
for (let i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
	// Résultat:
	// "Pomme"
	// "Banane"
	// "Orange"
}

// Méthode forEach
fruits.forEach(function (fruit) {
	console.log(fruit);
	// Résultat:
	// "Pomme"
	// "Banane"
	// "Orange"
});

// Utilisation de map
// La méthode map renvoie un nouveau tableau en applicant une fonction à chaque élément du tableau d'origine
let longueurFruits = fruits.map(function (fruit) {
	return fruit.length;
	// La propriété `fruit.length` renvoie la longueur d'une chaîne de caractères, également appelée "string". Les types "string" et "array" présentent des similitudes dans leurs méthodes et propriétés.
});
console.log(longueurFruits); // [5, 6, 6]

Asynchrone

JavaScript est un langage de programmation asynchrone, ce qui signifie qu'il peut exécuter plusieurs tâches en parallèle sans attendre la fin de chacune avant de passer à la suivante. Cela est particulièrement important dans les applications web, où des opérations telles que les requêtes réseau, la manipulation des événements utilisateur et d'autres tâches peuvent être effectuées de manière asynchrone pour améliorer la réactivité de l'interface utilisateur.

Callbacks

Les callbacks sont une façon courante de gérer l'asynchronisme en JavaScript. Un callback est une fonction qui est passée en argument à une autre fonction et qui sera exécutée ultérieurement, généralement après la réalisation d'une opération asynchrone.

// Exemple d'utilisation d'un callback avec une fonction asynchrone (setTimeout)
console.log("Début du programme");

setTimeout(function () {
	console.log("Le callback a été exécuté après 2 secondes.");
}, 2000);

console.log("Fin du programme");

Promesses

Les promesses sont une autre façon de gérer l'asynchronisme en JavaScript, introduites pour simplifier le code et rendre la gestion des opérations asynchrones plus lisible.

// Exemple d'utilisation de Promesses avec une fonction asynchrone (setTimeout)
console.log("Début du programme");

const attente = duree => new Promise(resolve => setTimeout(resolve, duree));

attente(2000).then(() => {
	console.log("La Promesse a été résolue après 2 secondes.");
});

console.log("Fin du programme");

Async/Await

L'utilisation des mots-clés async et await simplifie davantage la gestion des promesses. Une fonction déclarée avec le mot-clé async renvoie toujours une promesse, et l'utilisation de await permet d'attendre la résolution d'une promesse à l'intérieur d'une fonction asynchrone.

// Exemple d'utilisation de async/await avec une fonction asynchrone (setTimeout)
console.log("Début du programme");

const attenteAsync = async () => {
	await attente(2000);
	console.log("Attente avec async/await terminée après 2 secondes.");
};

attenteAsync();

console.log("Fin du programme");

La gestion asynchrone en JavaScript offre une flexibilité qui permet de concevoir des applications réactives et performantes en exploitant efficacement les ressources disponibles.

Les fonctions Asynchrones

Les fonctions asynchrones, introduites par le mot-clé async, permettent de simplifier la gestion des opérations asynchrones en JavaScript. Ces fonctions rendent l'écriture du code asynchrone plus lisible et facilitent la manipulation des promesses.

Déclaration d'une fonction Asynchrone

Pour déclarer une fonction asynchrone, on utilise le mot-clé async avant la liste des paramètres de la fonction.

async function maFonctionAsynchrone() {
	// Code asynchrone ici
}

Utilisation de Await dans une Fonction Asynchrone

Le mot-clé await est utilisé à l'intérieur d'une fonction asynchrone pour attendre la résolution d'une promesse. Cela permet de rendre le code asynchrone plus séquentiel et plus proche de la logique synchrone.

async function exempleAsynchrone() {
	console.log("Début de la fonction");

	// Attente de la résolution d'une promesse
	await attente(2000);

	console.log("Fin de la fonction après attente de 2 secondes.");
}

// Appel de la fonction asynchrone
exempleAsynchrone();

Gestion des Erreurs avec try/catch

La gestion des erreurs dans les fonctions asynchrones peut être effectuée avec les blocs try et catch, de manière similaire à la gestion synchrone des erreurs.

async function gestionErreurAsynchrone() {
	try {
		// Code asynchrone pouvant générer une erreur
		await attente(2000);
		throw new Error("Une erreur s'est produite.");
	} catch (erreur) {
		console.error("Erreur capturée :", erreur.message);
	}
}

// Appel de la fonction asynchrone avec gestion des erreurs
gestionErreurAsynchrone();

Les fonctions asynchrones simplifient la gestion des opérations asynchrones en utilisant des concepts tels que async, await, try, et catch, rendant le code plus lisible et plus facile à maintenir. Ces fonctions sont largement utilisées dans le développement moderne en JavaScript, notamment dans les applications web.

Le modèle de programmation événementielle

Le modèle de programmation événementielle est une approche fondamentale dans le développement JavaScript, en particulier dans le contexte des applications web. Il repose sur la gestion des événements, qui sont des actions ou occurrences spécifiques, comme des clics de souris, des pressions de touches, ou d'autres interactions utilisateur.

Enregistrement d'un événement

Pour utiliser le modèle événementiel, on enregistre des gestionnaires d'événements sur des éléments du DOM (Document Object Model), qui représentent la structure de la page web.

// Enregistrement d'un gestionnaire d'événement pour un clic de souris sur un bouton
const monBouton = document.getElementById("monBouton");

monBouton.addEventListener("click", function () {
	console.log("Le bouton a été cliqué !");
});

Dans cet exemple, la fonction anonyme passée à addEventListener sera exécutée chaque fois que le bouton est cliqué.

Utilisation de Promesses avec les Événements

Le modèle événementiel peut également être combiné avec des promesses pour gérer des actions asynchrones. Par exemple, lors du chargement d'une image :

function chargerImage(src) {
	return new Promise((resolve, reject) => {
		const image = new Image();

		image.addEventListener("load", () => {
			resolve(image);
		});

		image.addEventListener("error", erreur => {
			reject(erreur);
		});

		image.src = src;
	});
}

chargerImage("monImage.jpg")
	.then(image => {
		console.log("Image chargée avec succès:", image);
	})
	.catch(erreur => {
		console.error("Erreur lors du chargement de l'image:", erreur);
	});

Librairies Événementielles

Pour simplifier la gestion des événements dans des applications plus complexes, de nombreuses librairies et frameworks JavaScript, tels que jQuery, React, ou Vue.js, fournissent des abstractions et des fonctionnalités supplémentaires pour le modèle événementiel.

Le modèle de programmation événementielle est essentiel pour créer des interfaces utilisateur réactives et interactives dans le développement web, offrant une manière efficace de répondre aux actions de l'utilisateur et de synchroniser le comportement de l'application avec les événements qui se produisent.

AJAX et fetch API

AJAX (Asynchronous JavaScript and XML)

AJAX est une technique de développement web qui permet de réaliser des échanges de données asynchrones entre le navigateur et le serveur, sans avoir à recharger complètement la page. Cela permet des mises à jour dynamiques du contenu d'une page, améliorant ainsi l'expérience utilisateur.

La manière classique d'utiliser AJAX était avec l'objet XMLHttpRequest.

Exemple avec XMLHttpRequest

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.responseText);
	}
};

xhr.open("GET", "https://exemple.com/data", true);
xhr.send();

Cependant, l'utilisation de XMLHttpRequest peut être complexe et nécessite plusieurs étapes. Avec l'évolution des technologies web, la Fetch API a été introduite pour simplifier cette tâche.

Fetch API

La Fetch API fournit une interface JavaScript moderne pour effectuer des requêtes réseau, et elle est basée sur les Promesses, facilitant la gestion des opérations asynchrones.

Exemple avec Fetch API

fetch("https://exemple.com/data")
	.then(response => {
		if (!response.ok) {
			throw new Error("Erreur de réseau");
		}
		return response.json(); // Parse la réponse JSON
	})
	.then(data => {
		console.log(data);
	})
	.catch(error => {
		console.error("Erreur:", error);
	});

La Fetch API utilise la méthode fetch qui renvoie une promesse. On peut ensuite chaîner les méthodes .then() pour traiter la réponse. La première fonction dans le then traite la réponse HTTP, et la deuxième fonction traite les données renvoyées. La méthode .catch() est utilisée pour traiter les erreurs qui pourraient survenir dans le cas où elles se produisent.

Option de Fetch

La méthode fetch accepte plusieurs options pour personnaliser la requête, telles que la méthode HTTP, les en-têtes, ou encore le corps de la requête.

fetch("https://exemple.com/data", {
	method: "POST",
	headers: {
		"Content-Type": "application/json",
	},
	body: JSON.stringify({ key: "valeur" }),
})
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(error => console.error("Erreur:", error));

La Fetch API offre une syntaxe plus moderne et plus propre pour effectuer des requêtes AJAX, et elle est largement utilisée dans le développement web moderne. Elle simplifie la gestion des requêtes et des réponses HTTP tout en offrant une approche asynchrone basée sur les Promesses.

Outils de développement

Ce chapitre se concentre sur les aspects fondamentaux du développement JavaScript, en mettant l'accent sur les outils de développement, les techniques de débogage, la gestion des erreurs, et les bonnes pratiques de codage. Il offre aux développeurs une compréhension approfondie des ressources et des méthodes disponibles pour améliorer leur productivité et la qualité de leur code.

Débogage avec les outils du navigateur

Les navigateurs modernes offrent des outils de développement puissants qui facilitent le processus de débogage des applications JavaScript. Ces outils incluent des consoles interactives, des inspecteurs d'éléments, des profils de performances, et bien plus encore.

Console de développement

La console de développement est un outil essentiel pour afficher des messages, des erreurs, et exécuter des commandes JavaScript directement dans le navigateur. Elle permet également de surveiller les sorties de débogage à l'aide de console.log et d'autres méthodes de la console.

Inspecteur d'éléments

L'inspecteur d'éléments permet d'explorer et de manipuler le DOM en temps réel. Il offre la possibilité de modifier le HTML et le CSS en direct, facilitant le débogage visuel.

Débogage Pas-à-Pas

Les outils de développement permettent de déboguer pas à pas le code JavaScript, de mettre en place des points d'arrêt, d'inspecter les variables, et de suivre l'exécution du code étape par étape.

Gestion des erreurs

La gestion des erreurs est cruciale pour assurer la robustesse et la fiabilité des applications. JavaScript propose des mécanismes tels que les blocs try/catch pour capturer et gérer les erreurs de manière efficace.

Blocs Try/Catch

Les blocs try/catch permettent d'encadrer du code susceptible de générer des erreurs. En cas d'erreur, le bloc catch est exécuté, offrant la possibilité de gérer l'erreur de manière appropriée.

Gestionnaire des Erreurs Globales

En plus des blocs try/catch, il est possible de définir des gestionnaires d'erreurs globaux à l'aide de window.onerror. Cela permet de capturer les erreurs non gérées au niveau global.

Bonnes Pratiques de Codage

Adopter des bonnes pratiques de codage contribue à améliorer la lisibilité, la maintenabilité et la performance du code JavaScript. Voici quelques conseils :

En adoptant ces pratiques et en utilisant les outils de développement à disposition, les développeurs JavaScript peuvent améliorer significativement leur flux de travail et la qualité de leurs applications.