Introduction à JavaScript #

JavaScript est un langage de programmation dynamique principalement utilisé pour le développement web côté client, mais aussi côté serveur grâce à des environnements comme Node.js. Si vous êtes déjà familiers avec Java, un langage statiquement typé et orienté objet classique, JavaScript peut sembler au premier abord déroutant en raison de son typage dynamique et de sa flexibilité extrême. Cependant, de nombreuses concepts que vous connaissez déjà en Java existent sous une forme similaire en JavaScript, même si leur implémentation diffère souvent.

En JavaScript, la déclaration de variables se fait principalement avec deux mots-clés : let et const.La différence principale entre let et const réside dans la réassignation : let permet de modifier la valeur de la variable après sa déclaration, tandis que const interdit toute réassignation (bien que pour les objets, les propriétés internes restent modifiables). Il est recommandé d’utiliser const par défaut et let uniquement quand une réassignation est nécessaire, en évitant complètement var dans le code moderne.

Voici un exemple illustrant ces différences. La fonction console.log est équivalente à System.out.println en Java.

// Exemple avec let : réassignation possible
let age = 25;
console.log(age); // 25
age = 26; // OK
console.log(age); // 26

// Exemple avec const : réassignation interdite
const nom = "Alice";
console.log(nom); // Alice
// nom = "Bob"; // Erreur : Assignment to constant variable

// Pour les objets avec const : propriétés modifiables, mais pas l'objet lui-même
const personne = { nom: "Alice", age: 25 };
personne.age = 26; // OK, modification d'une propriété
console.log(personne); // { nom: "Alice", age: 26 }
// personne = { nom: "Bob", age: 30 }; // Erreur : réassignation de l'objet

Les fonctions occupent une place centrale en JavaScript, bien plus qu’en Java où elles sont toujours membres d’une classe. En JavaScript, les fonctions sont des citoyens de première classe : elles peuvent être assignées à des variables, passées en paramètres ou retournées par d’autres fonctions. Une fonction simple s’écrit function addition(a, b) { return a + b; } ou, de manière plus moderne, avec une flèche : const addition = (a, b) => a + b;.

Voici quelques exemples illustrant ces concepts.

// Fonction assignée à une variable
const multiplier = function(a, b) { return a * b; };
console.log(multiplier(3, 4)); // 12

// Fonction flèche
const soustraire = (a, b) => a - b;
console.log(soustraire(10, 3)); // 7

// Fonction passée en paramètre
function appliquerOperation(a, b, operation) {
  return operation(a, b);
}
console.log(appliquerOperation(5, 3, (x, y) => x + y)); // 8

// Fonction retournée par une autre fonction (closure)
function creerMultiplicateur(facteur) {
  return function(nombre) {
    return nombre * facteur;
  };
}
const doubler = creerMultiplicateur(2);
console.log(doubler(5)); // 10

Les objets en JavaScript sont fondamentalement différents des classes Java. Il n’y a pas de classes traditionnelles (avant ES6), mais des objets basés sur des prototypes. Chaque objet peut hériter directement d’un autre via sa chaîne de prototypes, ce qui remplace le système d’héritage par classes de Java. Depuis ES6, la syntaxe class a été introduite pour faciliter la transition des développeurs venant de langages comme Java, mais sous le capot, il s’agit toujours d’héritage prototypal.

Vous pouvez créer un objet de manière littérale très simplement : const personne = { nom: "Dupont", age: 30 };. Pour ajouter une fonction (appelée méthode lorsqu’elle est dans un objet), il suffit d’ajouter une propriété qui contient une fonction : personne.saluer = function() { console.log("Bonjour, je m'appelle " + this.nom); }; ou, avec la syntaxe moderne : const personne = { nom: "Dupont", age: 30, saluer() { console.log(\Bonjour, je m’appelle ${this.nom}`); } };. L'appel se fait ensuite avec personne.saluer();`.

En JavaScript, les chaînes de caractères peuvent être définies avec des guillemets simples ('texte') ou doubles ("texte"). Depuis ES6, les littéraux de gabarit (template literals) permettent d’intégrer des expressions directement dans les chaînes en utilisant des backticks (`) et la syntaxe ${expression}.

Cette syntaxe ${personne.nom} habite à ${personne.ville} est un exemple de littéral de gabarit. Elle permet d’insérer la valeur d’une variable ou le résultat d’une expression directement dans la chaîne, sans avoir à utiliser la concaténation avec l’opérateur +.

Voici des exemples comparatifs :

const personne = { nom: "Alice", age: 25, ville: "Paris" };

// Concaténation traditionnelle (comme en Java)
const message1 = "Bonjour, je m'appelle " + personne.nom + " et j'ai " + personne.age + " ans.";
console.log(message1); // Bonjour, je m'appelle Alice et j'ai 25 ans.

// Littéral de gabarit (plus moderne et lisible)
const message2 = `Bonjour, je m'appelle ${personne.nom} et j'ai ${personne.age} ans.`;
console.log(message2); // Bonjour, je m'appelle Alice et j'ai 25 ans.

// Avec des expressions
const message3 = `${personne.nom} habite à ${personne.ville.toUpperCase()} et a ${personne.age + 5} ans dans 5 ans.`;
console.log(message3); // Alice habite à PARIS et a 30 ans dans 5 ans.

// Chaînes multi-lignes
const messageMultiligne = `Ceci est une chaîne
sur plusieurs lignes
sans avoir à utiliser \n`;
console.log(messageMultiligne);

La gestion des erreurs en JavaScript repose sur les exceptions comme en Java, avec try, catch et finally.

try {
  let resultat = 10 / 0;
  throw new Error("Quelque chose s'est mal passé");
} catch (erreur) {
  console.error("Erreur capturée :", erreur.message);
} finally {
  console.log("Ce bloc s'exécute toujours");
}

Une autre exemple courant avec une fonction.

function diviser(a, b) {
  if (b === 0) throw new Error("Division par zéro");
  return a / b;
}

try {
  diviser(10, 0);
} catch (e) {
  console.log("Impossible :", e.message);
}

JavaScript est très permissif sur les égalités : == effectue des conversions de type implicites (souvent source de bugs), tandis que === compare sans conversion, ce qui est l’équivalent de la comparaison stricte en Java. De même, les valeurs truthy/falsy (comme "", 0, null, undefined) se comportent différemment des booléens stricts.

Voici des exemples illustrant ces comportements.

// Différence entre == et ===
console.log(1 == "1");  // true (conversion implicite : string "1" devient number 1)
console.log(1 === "1"); // false (pas de conversion : types différents)
console.log(0 == false);  // true (conversion : false devient 0)
console.log(0 === false); // false (types différents : number vs boolean)
console.log(null == undefined);  // true (égalité spéciale pour null/undefined)
console.log(null === undefined); // false (types différents)

// Valeurs falsy (considérées comme false dans les conditions)
console.log("Valeurs falsy :");
if ("") console.log("Chaîne vide"); else console.log("Chaîne vide est falsy");
if (0) console.log("Zéro"); else console.log("0 est falsy");
if (null) console.log("Null"); else console.log("null est falsy");
if (undefined) console.log("Undefined"); else console.log("undefined est falsy");
if (false) console.log("False"); else console.log("false est falsy");
if (NaN) console.log("NaN"); else console.log("NaN est falsy");

// Valeurs truthy (considérées comme true dans les conditions)
console.log("Valeurs truthy :");
if ("hello") console.log("Chaîne non vide : truthy");
if (42) console.log("Nombre positif : truthy");
if ([]) console.log("Array vide : truthy (attention !)");
if ({}) console.log("Objet vide : truthy");

Activité de mise en pratique #

Vous pouvez tester votre compréhension de la syntaxe avec la console suivante.

Questions de révision #

Testez vos connaissances avec ces questions. Cliquez sur chaque question pour voir la réponse.

Vidéo suggérée #

JSON et JavaScript #

En JavaScript, JSON est nativement supporté grâce aux méthodes JSON.stringify() pour convertir des objets JavaScript en chaînes JSON, et JSON.parse() pour analyser des chaînes JSON et les convertir en objets JavaScript.

Voici quelques exemples pratiques illustrant comment générer et consommer du JSON en JavaScript.

Génération de JSON #

Pour convertir un objet JavaScript en une chaîne JSON, utilisez JSON.stringify(). Cette méthode prend un objet en paramètre et retourne sa représentation JSON sous forme de chaîne.

// Exemple avec un objet simple
const personne = {
  nom: "Dupont",
  age: 30,
  ville: "Paris",
  hobbies: ["lecture", "sport"]
};

const jsonString = JSON.stringify(personne);
console.log(jsonString);
// Sortie : {"nom":"Dupont","age":30,"ville":"Paris","hobbies":["lecture","sport"]}

Vous pouvez également formater le JSON pour une meilleure lisibilité en ajoutant des espaces :

const jsonPretty = JSON.stringify(personne, null, 2);
console.log(jsonPretty);
/*
Sortie :
{
  "nom": "Dupont",
  "age": 30,
  "ville": "Paris",
  "hobbies": [
    "lecture",
    "sport"
  ]
}
*/

Consommation de JSON #

Pour analyser une chaîne JSON et la convertir en objet JavaScript, utilisez JSON.parse(). Cette méthode prend une chaîne JSON valide et retourne l’objet JavaScript correspondant.

// Exemple avec une chaîne JSON
const jsonData = '{"nom":"Martin","age":25,"ville":"Lyon","actif":true}';
const objet = JSON.parse(jsonData);
console.log(objet.nom); // Martin
console.log(objet.age); // 25
console.log(objet.actif); // true

Attention : si la chaîne JSON n’est pas valide, JSON.parse() lèvera une exception SyntaxError. Il est donc recommandé d’utiliser un bloc try...catch :

try {
  const donnees = JSON.parse(jsonData);
  console.log("Données analysées :", donnees);
} catch (erreur) {
  console.error("Erreur de parsing JSON :", erreur.message);
}

Exemples avec des tableaux #

JSON peut également représenter des tableaux. Voici un exemple complet :

// Génération d'un tableau d'objets en JSON
const personnes = [
  { nom: "Alice", age: 28, ville: "Marseille" },
  { nom: "Bob", age: 32, ville: "Toulouse" },
  { nom: "Charlie", age: 45, ville: "Nice" }
];

const jsonArray = JSON.stringify(personnes);
console.log(jsonArray);
// Sortie : [{"nom":"Alice","age":28,"ville":"Marseille"},{"nom":"Bob","age":32,"ville":"Toulouse"},{"nom":"Charlie","age":45,"ville":"Nice"}]

// Consommation du JSON
const parsedArray = JSON.parse(jsonArray);
parsedArray.forEach(personne => {
  console.log(`${personne.nom} habite à ${personne.ville}`);
});
// Sortie :
// Alice habite à Marseille
// Bob habite à Toulouse
// Charlie habite à Nice

Mise à l’essai #

Utilisez la console suivante pour tester vos programmes JavaScript.

Console prête. Écrivez du code et cliquez sur "Exécuter le code".

Vidéo suggérée #

Activités suggérées #

Pour appliquer les concepts de JSON en JavaScript, voici 5 activités pratiques à réaliser :

1. Création et sérialisation d’un objet : Définissez un objet JavaScript représentant un étudiant (nom, âge, notes sous forme de tableau). Utilisez JSON.stringify() pour le convertir en chaîne JSON et affichez-le dans la console.

2. Parsing d’une chaîne JSON : Créez une chaîne JSON représentant une liste de produits (nom, prix, catégorie). Utilisez JSON.parse() pour la convertir en objet, puis parcourez le tableau pour afficher chaque produit.

3. Manipulation de données JSON imbriquées : Définissez un objet complexe avec des objets imbriqués (par exemple, une entreprise avec des employés, chacun ayant un poste et un salaire). Convertissez-le en JSON, puis parsez-le et modifiez une valeur avant de le reconvertir.

4. Gestion d’erreurs de parsing : Écrivez un script qui tente de parser différentes chaînes JSON, certaines valides et d’autres non. Utilisez un bloc try...catch pour gérer les erreurs et afficher des messages appropriés.

5. Simulation d’une API REST : Créez une fonction qui simule une réponse d’API en retournant une chaîne JSON. Écrivez ensuite du code qui “fetch” cette donnée, la parse, et affiche les informations dans une liste HTML en manipulant le DOM.

6. Installation et essai de Node.js (optionnel) : JavaScript n’est pas limité au navigateur ! Installez Node.js, l’environnement d’exécution JavaScript côté serveur. Téléchargez la dernière version depuis le site officiel (nodejs.org), installez-la, puis ouvrez un terminal et tapez node -v pour vérifier l’installation. Créez ensuite un fichier test.js avec du code simple (par exemple, console.log("Hello from Node.js!");), et exécutez-le avec node test.js.