Cours JavaScript - Partie 2 : Approfondissement

1. Tableaux (Arrays) - Approfondissement

Les tableaux permettent de stocker plusieurs valeurs dans une seule variable.

// Création de tableaux
let fruits = ["Pomme", "Banane", "Orange"];
let nombres = [1, 2, 3, 4, 5];
let mixte = ["Texte", 42, true, null];

// Méthodes essentielles
fruits.push("Kiwi");        // Ajoute à la fin
fruits.pop();               // Enlève le dernier
fruits.unshift("Fraise");   // Ajoute au début
fruits.shift();             // Enlève le premier
fruits.indexOf("Banane");   // Trouve l'index (retourne 1)
fruits.includes("Pomme");   // Vérifie présence (true/false)
                

🍎 Manipulation de tableau

2. Méthodes modernes : map, filter, reduce

Ces méthodes permettent de manipuler les tableaux de façon élégante et fonctionnelle.

let nombres = [1, 2, 3, 4, 5];

// map - Transforme chaque élément
let doubles = nombres.map(n => n * 2);  // [2, 4, 6, 8, 10]

// filter - Filtre les éléments
let pairs = nombres.filter(n => n % 2 === 0);  // [2, 4]

// reduce - Accumule les valeurs
let somme = nombres.reduce((acc, n) => acc + n, 0);  // 15

// forEach - Parcourt le tableau
nombres.forEach(n => console.log(n));
                

🔄 Testez map/filter/reduce

Tableau original : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3. Objets - Structure de données clé/valeur

Les objets permettent de regrouper des données et des fonctions associées.

// Création d'un objet
let personne = {
    nom: "Dupont",
    prenom: "Marie",
    age: 28,
    ville: "Paris",
    
    // Méthode
    sePresenter() {
        return `Je m'appelle ${this.prenom} ${this.nom}`;
    }
};

// Accès aux propriétés
console.log(personne.nom);      // "Dupont"
console.log(personne["age"]);   // 28

// Ajouter/modifier des propriétés
personne.email = "marie@email.com";
                

👤 Créez votre profil

4. Destructuration et Spread Operator (...)

Des syntaxes modernes pour extraire et combiner des données facilement.

// Destructuration de tableau
let couleurs = ["rouge", "vert", "bleu"];
let [premiere, deuxieme] = couleurs;  // premiere = "rouge", deuxieme = "vert"

// Destructuration d'objet
let utilisateur = { id: 1, nom: "Alice", age: 30 };
let { nom, age } = utilisateur;  // nom = "Alice", age = 30

// Spread operator pour copier/fusionner
let nombres1 = [1, 2, 3];
let nombres2 = [4, 5, 6];
let fusion = [...nombres1, ...nombres2];  // [1, 2, 3, 4, 5, 6]

// Rest operator
let [premier, ...reste] = [10, 20, 30, 40];  // premier=10, reste=[20,30,40]
                

✨ Jouez avec la destructuration

5. JSON (JavaScript Object Notation)

Format d'échange de données universel, utilisé avec les API.

// Objet JavaScript vers JSON
let personne = { nom: "Dupont", age: 30 };
let jsonString = JSON.stringify(personne);  // '{"nom":"Dupont","age":30}'

// JSON vers objet JavaScript
let jsonData = '{"nom":"Martin","ville":"Lyon"}';
let objet = JSON.parse(jsonData);  // {nom: "Martin", ville: "Lyon"}
                

🔄 Conversion JSON

6. LocalStorage - Sauvegarder des données

Stockez des données persistance dans le navigateur de l'utilisateur.

// Sauvegarder
localStorage.setItem("nom", "Jean");
localStorage.setItem("age", "25");

// Récupérer
let nom = localStorage.getItem("nom");
let age = localStorage.getItem("age");

// Supprimer
localStorage.removeItem("nom");
localStorage.clear();  // Tout supprimer
                

💾 Sauvegardez vos préférences

⚠️ Note importante : Le LocalStorage ne stocke que des chaînes de caractères. Utilisez JSON.stringify() pour les objets et tableaux.

7. Programmation asynchrone

JavaScript est asynchrone : certaines opérations prennent du temps sans bloquer le reste du code.

// setTimeout - Délai d'exécution
setTimeout(() => {
    console.log("Exécuté après 2 secondes");
}, 2000);

// setInterval - Exécution répétée
let compteur = 0;
let interval = setInterval(() => {
    console.log(`Compteur: ${compteur++}`);
    if(compteur === 5) clearInterval(interval);
}, 1000);

// Promesse
let promesse = new Promise((resolve, reject) => {
    let succes = true;
    if(succes) {
        resolve("Opération réussie !");
    } else {
        reject("Erreur !");
    }
});

// Async/Await (plus moderne)
async function recupererDonnees() {
    try {
        let resultat = await fetch('https://api.example.com/data');
        let data = await resultat.json();
        console.log(data);
    } catch(error) {
        console.log("Erreur:", error);
    }
}
                

⏱️ Testez l'asynchrone

8. Fetch API - Communiquer avec des serveurs

Récupérez des données depuis des API externes.

// Requête GET simple
fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Erreur:', error));

// Requête POST
fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nom: "Dupont", email: "dupont@email.com" })
});
                

🌐 Récupérer une blague aléatoire

9. Manipulation des dates

L'objet Date permet de gérer les dates et heures.

let maintenant = new Date();
let annee = maintenant.getFullYear();
let mois = maintenant.getMonth();     // 0-11 (0 = Janvier)
let jour = maintenant.getDate();
let heures = maintenant.getHours();

// Formatage personnalisé
function formaterDate(date) {
    return `${date.getDate()}/${date.getMonth()+1}/${date.getFullYear()}`;
}
                

📅 Affichage horloge

10. Mini-projet : Gestionnaire de tâches avancé

Appliquez tout ce que vous avez appris !

✅ Ma liste de tâches avec LocalStorage

0%

11. Gestion des erreurs (try/catch)

Capturez et gérez les erreurs pour éviter que votre code ne plante.

try {
    // Code qui peut causer une erreur
    let resultat = 10 / 0;
    let donnée = JSON.parse("json invalide");
} catch (erreur) {
    console.error("Une erreur s'est produite:", erreur.message);
} finally {
    console.log("Ce code s'exécute toujours");
}
                

⚠️ Testez la gestion d'erreurs

📝 Récapitulatif - Partie 2

Concept	Utilisation principale
map/filter/reduce	Manipulation fonctionnelle des tableaux
Objets	Structurer des données complexes
LocalStorage	Sauvegarde persistante dans le navigateur
Async/Await	Gérer les opérations asynchrones
Fetch API	Communiquer avec des API externes
try/catch	Gérer les erreurs élégamment