Introduction Rapide à JavaScript

JavaScript est un langage de programmation dynamique largement utilisé pour créer des pages web interactives et des applications web. Initialement conçu pour fonctionner uniquement dans les navigateurs web, JavaScript s’exécute désormais également sur des serveurs via Node.js, permettant le développement d’applications full-stack avec un seul langage. JavaScript est au cœur de la programmation web moderne, avec des frameworks et des bibliothèques comme React, Angular, et Vue.js qui facilitent la création d’applications web riches et interactives.

Caractéristiques Principales

• Dynamiquement Typé : Les types sont associés aux valeurs, pas aux variables.
• Langage Interprété : Exécuté directement dans le navigateur ou sur le serveur sans nécessité de compilation.
• Orienté Objet : Supporte la programmation orientée objet avec des objets pouvant être créés via des fonctions constructeurs et des classes (introduites dans ES6).
• Fonctionnel : Supporte la programmation fonctionnelle avec des fonctions comme citoyens de première classe.
• Asynchrone : Gère les opérations asynchrones avec des callbacks, des promesses, et async/await.

Hello World en JavaScript

                console.log('Hello, World!');
                

Ce simple programme affiche le message “Hello, World!” dans la console du navigateur ou du serveur Node.js. Il illustre la syntaxe basique pour exécuter une instruction en JavaScript.

Syntaxe de Base de JavaScript

Commentaires

• Ligne unique: // Ceci est un commentaire
• Multi-lignes: /* Ceci est un commentaire sur plusieurs lignes */

Variables

• var : Portée de fonction, moins utilisé de nos jours.
• let : Portée de bloc, peut être re-assigné.
• const : Portée de bloc, ne peut pas être re-assigné.

Types

JavaScript est un langage à typage dynamique. Les types principaux sont :

• String : let nom = "JavaScript";
• Number : let nombre = 42;
• Boolean : let estVrai = true;
• Null : let objetNul = null;
• Undefined : let nonDefini;
• Object : let voiture = {marque: "Toyota", modele: "Corolla"};
• Array : let nombres = [1, 2, 3, 4, 5];

Opérateurs

• Arithmétiques : +, -, *, /, % (modulo), ** (puissance)
• Assignation : =, +=, -=, *=, /=
• Comparaison : ==, === (égalité stricte), !=, !== (inégalité stricte), <, >, <=, >=
• Logiques : && (et), || (ou), ! (non)

JavaScript est un langage riche et flexible, permettant de manipuler des données de divers types et de contrôler le flux d’exécution du programme avec des opérateurs simples et des structures de contrôle.

Structures de Contrôle dans JavaScript

Conditions

• if permet de spécifier un bloc de code à exécuter, si une condition spécifiée est vraie.

  
                  if (condition) {
                    // bloc de code à exécuter si la condition est vraie
                  }
                  

• else permet de spécifier un bloc de code à exécuter, si la même condition est fausse.

  
                  if (condition) {
                    // bloc de code à exécuter si la condition est vraie
                  } else {
                    // bloc de code à exécuter si la condition est fausse
                  }
                  

• else if permet de spécifier une nouvelle condition si la première condition est fausse.

  
                  if (condition1) {
                    // bloc de code à exécuter si condition1 est vraie
                  } else if (condition2) {
                    // bloc de code à exécuter si condition2 est vraie
                  } else {
                    // bloc de code à exécuter si les conditions précédentes sont fausses
                  }
                  

• switch permet de spécifier de nombreux blocs de code alternatifs à exécuter.

  
                  switch(expression) {
                    case x:
                      // bloc de code à exécuter si expression égale x
                      break;
                    case y:
                      // bloc de code à exécuter si expression égale y
                      break;
                    default:
                      // bloc de code à exécuter si aucune des conditions ci-dessus ne sont vraies
                  }
                  

Boucles

• for exécute un bloc de code un nombre défini de fois.

  
                  for (initialisation; condition; incrémentation) {
                    // bloc de code à exécuter
                  }
                  

• while crée une boucle qui exécute un bloc de code tant que la condition spécifiée est vraie.

  
                  while (condition) {
                    // bloc de code à exécuter
                  }
                  

• do...while crée une boucle qui exécute un bloc de code une fois, avant de vérifier si la condition est vraie, puis répète la boucle tant que la condition est vraie.

  
                  do {
                    // bloc de code à exécuter
                  }
                  while (condition);
                  

• forEach est utilisé pour exécuter une fonction une fois pour chaque élément dans un tableau.

  
                  array.forEach(function(element) {
                    // bloc de code à exécuter
                  });
                  

Les structures de contrôle permettent de gérer le flux d’exécution du programme, offrant des moyens de prendre des décisions et de répéter l’exécution de blocs de code en fonction de conditions spécifiques.

Fonctions et Méthodes dans JavaScript

Déclaration de Fonctions

• La manière classique de déclarer une fonction :

  
                  function nomDeLaFonction(parametre1, parametre2) {
                    // Corps de la fonction
                  }
                  

• Fonction anonyme :

  
                  const maFonction = function(parametre1, parametre2) {
                    // Corps de la fonction
                  };
                  

Paramètres et Retour

• Fonctions avec paramètres et valeur de retour :

  
                  function somme(a, b) {
                    return a + b;
                  }
                  

Paramètres Optionnels

• Paramètres par défaut :

  
                  function saluer(nom = 'Visiteur') {
                    console.log('Bonjour ' + nom);
                  }
                  

Fonctions Fléchées

• Introduction dans ES6, offrent une syntaxe concise :

  
                  const additionner = (a, b) => a + b;
                  

Fonctions Anonymes

• Surtout utilisées comme arguments de fonction :

  
                  setTimeout(function() {
                    console.log('Message après 2 secondes');
                  }, 2000);
                  

Méthodes

• Fonctions stockées comme propriétés d’un objet :

  
                  const objet = {
                    direBonjour: function() {
                      console.log('Bonjour');
                    }
                  };
                  

Portée et Fermetures

• La portée détermine la visibilité des variables.
• Les fermetures permettent à une fonction d’accéder aux variables de son contexte lexical :

  
                  function externe() {
                    let variableExterne = 'Je suis à l'extérieur!';
                    function interne() {
                      console.log(variableExterne); // Accès à la variable externe
                    }
                    return interne;
                  }
                  const maFonction = externe();
                  maFonction();
                  

Les fonctions sont au cœur de JavaScript, permettant de créer des blocs de code réutilisables, de manipuler des données et de construire la logique des applications.

Collections dans JavaScript

Tableaux

• Déclaration et accès aux éléments :

  
                  let fruits = ['pomme', 'banane', 'cerise'];
                  console.log(fruits[0]); // Accède au premier élément, 'pomme'
                  

• Méthodes courantes : .push(), .pop(), .shift(), .unshift(), .slice() et splice().

Objets

• Déclaration et accès aux propriétés :

  
                  let voiture = {marque: 'Toyota', modele: 'Corolla', annee: 2020};
                  console.log(voiture.marque); // Accède à la propriété 'marque'
                  

• Manipulation des propriétés : delete voiture.modele;, voiture.couleur = 'bleu';.

Sets

• Collections d’éléments uniques :

  
                  let nombres = new Set([1, 2, 3, 2, 1]);
                  console.log(nombres); // Affiche Set {1, 2, 3}
                  

Maps

• Collections de paires clé-valeur :

  
                  let capitales = new Map([['France', 'Paris'], ['Japon', 'Tokyo']]);
                  console.log(capitales.get('France')); // 'Paris'
                  

Opérations Courantes

• Tableaux : .map(), .filter(), .reduce(), .forEach().
• Objets : Object.keys(objet), Object.values(objet), Object.entries(objet).

Les collections en JavaScript permettent de stocker et de manipuler des ensembles de données. Les tableaux et les objets sont les types de collections les plus utilisés, tandis que les Set et Map offrent des fonctionnalités spécifiques pour certaines situations.

Programmation Asynchrone dans JavaScript

La programmation asynchrone est cruciale dans JavaScript, surtout pour les opérations comme les requêtes réseau, l’accès aux fichiers, ou tout traitement nécessitant un temps d’attente. JavaScript utilise des Promesses, async/await, et d’autres techniques pour gérer l’asynchronicité.

Promesses

• Une Promise est un objet représentant l’achèvement ou l’échec d’une opération asynchrone.

  
                  const maPromesse = new Promise((resolve, reject) => {
                    // Opération asynchrone
                    const condition = true; // Exemple de condition
                    if (condition) {
                      resolve('Succès');
                    } else {
                      reject('Échec');
                    }
                  });
                  
                  maPromesse.then((message) => {
                    console.log(message); // 'Succès' si résolue
                  }).catch((message) => {
                    console.error(message); // 'Échec' si rejetée
                  });
                  

Async et Await

• async marque une fonction comme asynchrone, permettant d’utiliser await à l’intérieur pour attendre les Promesses.

  
                  async function chargerDonnees() {
                    try {
                      const reponse = await fetch('url');
                      const donnees = await reponse.json();
                      console.log(donnees);
                    } catch (erreur) {
                      console.error('Erreur:', erreur);
                    }
                  }
                  

Gestion des Erreurs

• Utilisez try...catch pour gérer les erreurs dans les fonctions asynchrones.

  
                  // Exemple intégré dans la fonction `chargerDonnees` ci-dessus.
                  

Fetch API pour les requêtes HTTP

• La Fetch API permet de faire des requêtes réseau asynchrones.

  
                  fetch('url')
                  .then(reponse => reponse.json())
                    .then(donnees => console.log(donnees))
                    .catch(erreur => console.error('Erreur:', erreur));
                  

La programmation asynchrone permet de maintenir les applications JavaScript réactives et performantes, en évitant le blocage de l’exécution pendant les opérations longues ou incertaines.

Sucre Syntaxique et Null-Aware Operators

Sucre Syntaxique

JavaScript propose divers raccourcis syntaxiques qui rendent le code plus court et souvent plus clair.

• Destructuring Assignment : Permet d’extraire des données des tableaux ou des objets.

  
                  const [a, b] = [1, 2]; // a = 1, b = 2
                  const {nom, age} = {nom: 'John', age: 30}; // nom = 'John', age = 30
                  

• Template Literals : Facilite la concaténation de chaînes et l’insertion de variables.

  
                  const nom = 'John';
                  console.log(`Bonjour ${nom}!`); // "Bonjour John!"
                  

Spread Operator

• Utilisation dans les tableaux : Permet de “disperser” les éléments d’un tableau dans un autre tableau.

  
                  const arr1 = [1, 2, 3];
                  const arr2 = [...arr1, 4, 5]; // arr2 est [1, 2, 3, 4, 5]
                  

• Utilisation dans les objets : Permet de copier les propriétés d’un objet dans un autre.

  
                  const obj1 = { a: 1, b: 2 };
                  const obj2 = { ...obj1, c: 3 }; // obj2 est { a: 1, b: 2, c: 3 }
                  

Rest Parameters

• Collecte des arguments dans une fonction : Permet de rassembler un nombre indéterminé d’arguments dans un tableau.

  
                  function maFonction(...args) {
                    console.log(args); // args est un tableau des arguments passés à la fonction
                  }
                  maFonction(1, 2, 3); // Affiche [1, 2, 3]
                  

Ces fonctionnalités rendent le code plus flexible et lisible, en simplifiant les opérations sur les collections d’éléments et en offrant une manière élégante de gérer les paramètres de fonction.

Null-Aware Operators

Ces opérateurs aident à gérer les valeurs null ou undefined de manière élégante.

• Optional Chaining (?.) : Permet d’accéder en toute sécurité à la propriété d’un objet qui pourrait ne pas exister.

  
                  const utilisateur = {nom: 'John', profil: {age: 30}};
                  console.log(utilisateur?.profil?.age); // 30
                  console.log(utilisateur?.adresse?.ville); // undefined sans erreur
                  

• Nullish Coalescing Operator (??) : Renvoie l’opérande de droite si l’opérande de gauche est null ou undefined.

  
                  const input = null;
                  const valeurDefaut = 'valeur par défaut';
                  console.log(input ?? valeurDefaut); // 'valeur par défaut'
                  

Ces fonctionnalités améliorent la gestion des données et la prévention des erreurs, tout en gardant le code concis et lisible.

Tests dans JavaScript

Introduction aux Tests

Les tests automatisés jouent un rôle crucial dans le développement de logiciels, permettant de vérifier que le code fonctionne comme prévu et d’identifier les régressions avant qu’elles n’atteignent la production.

Frameworks de Test

Il existe de nombreux frameworks de test en JavaScript, chacun avec ses spécificités :

• Jest : Populaire pour les applications React, mais peut être utilisé avec d’autres frameworks.
• Mocha : Flexible et bien établi, souvent utilisé avec l’assertion library Chai.
• Jasmine : Cadre de développement orienté comportement (BDD) qui ne nécessite pas d’autres libraries pour l’assertion.

Écrire un Test Unitaire

Exemple avec Jest :

                test('addition de deux nombres', () => {
                  expect(2 + 2).toBe(4);
                });
                

Assertions

Les assertions sont des vérifications au sein d’un test unitaire. Exemple avec Jest :

                expect(value).toBe(expected); // Vérifie l'égalité stricte
                expect(value).toEqual(expected); // Vérifie l'égalité profonde pour les objets ou tableaux
                

Mocking

Le mocking est une technique permettant de simuler le comportement de dépendances externes. Ceci est particulièrement utile pour isoler le code à tester.

• Jest offre des fonctionnalités de mocking intégrées :

  
                  jest.mock('module_name');
                  

Exécuter les Tests

La commande pour exécuter les tests dépend du framework utilisé. Par exemple, avec Jest :

s
                jest
                

Organisation des Tests

• Structurez vos tests de manière logique, en utilisant describe pour regrouper des tests liés.
• Utilisez beforeEach et afterEach pour réinitialiser les conditions avant/après chaque test.

Les tests unitaires et d’intégration sont des éléments fondamentaux de la programmation JavaScript moderne, permettant de développer des applications robustes et fiables.

Modules en JavaScript

Introduction aux Modules

Les modules JavaScript permettent de diviser le code en petits morceaux réutilisables. Chaque module peut contenir des variables, des fonctions, des classes ou tout autre code, et peut les exporter pour être utilisés dans d’autres modules.

Exportation et Importation

• Exporter : Pour rendre des parties d’un module disponibles à l’extérieur, utilisez le mot-clé export.

  
                  // Dans fichier.js
                  export const nom = 'JavaScript';
                  export function direBonjour() {
                    console.log('Bonjour');
                  }
                  

• Importer : Pour utiliser des parties exportées d’un autre module, utilisez le mot-clé import.

  
                  // Dans autreFichier.js
                  import { nom, direBonjour } from './fichier.js';
                  direBonjour(); // Affiche 'Bonjour'
                  

Default Exports

Chaque module peut avoir un export default, qui est l’exportation par défaut du module.

                // Dans calculateur.js
                export default class Calculateur {
                  static addition(a, b) {
                    return a + b;
                  }
                }
                

Pour importer un export par défaut :

                // Dans index.js
                import Calculateur from './calculateur.js';
                console.log(Calculateur.addition(2, 3)); // Affiche 5
                

Avantages des Modules

• Encapsulation : Les modules permettent d’encapsuler le code, exposant uniquement ce qui est nécessaire à l’extérieur.
• Réutilisabilité : Les fonctionnalités encapsulées dans des modules peuvent être réutilisées dans différentes parties de l’application ou dans différents projets.
• Maintenance : La séparation des préoccupations rend le code plus facile à maintenir et à comprendre.

Les modules sont un élément essentiel de l’écosystème JavaScript moderne, utilisés tant côté client (dans les navigateurs) que côté serveur (avec Node.js).

Manipulation du DOM

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. JavaScript peut être utilisé pour manipuler le DOM, permettant de modifier dynamiquement le contenu, la structure et le style des documents web.

Sélection d’éléments

• getElementById : Sélectionne un élément par son ID.

  
                  const element = document.getElementById('monId');
                  

• querySelector : Sélectionne le premier élément qui correspond au sélecteur CSS spécifié.

  
                  const premierElement = document.querySelector('.maClasse');
                  

• querySelectorAll : Sélectionne tous les éléments qui correspondent au sélecteur CSS spécifié.

  
                  const tousLesElements = document.querySelectorAll('.maClasse');
                  

Modification d’éléments

• textContent : Modifie ou renvoie le contenu textuel d’un élément.

  
                  element.textContent = 'Nouveau texte';
                  

• innerHTML : Modifie ou renvoie le contenu HTML d’un élément.

  
                  element.innerHTML = '<span>Nouveau contenu HTML</span>';
                  

• style : Modifie le style CSS d’un élément.

  
                  element.style.color = 'red';
                  

Événements

JavaScript permet d’écouter et de réagir à des événements dans le document, comme des clics de souris ou des frappes de clavier.

• addEventListener : Attache un gestionnaire d’événements à un élément.

  
                  element.addEventListener('click', function() {
                    console.log('Élément cliqué!');
                  });
                  

La manipulation du DOM est fondamentale pour créer des interactions utilisateurs dynamiques dans les applications web. En utilisant JavaScript pour manipuler le DOM, les développeurs peuvent ajouter, supprimer ou modifier des éléments HTML, écouter et répondre aux événements, et appliquer des styles CSS dynamiquement.