Histoire et importance de JavaScript

1// Bienvenue dans le monde de JavaScript !
2// Découverte de l'histoire et de l'importance du langage
3
4console.log("Bienvenue dans le Jurassic Park de JavaScript !");
5
6// 1. JavaScript à travers les époques - l'évolution du langage
7console.log("\n=== Évolution de JavaScript ===");
8
9// ES5 (2009) - méthodes de tableau de base
10const dinosaurNames = ["Tyrannosaurus", "Triceratops", "Velociraptor", "Stegosaurus"];
11
12// méthode map - transformation des données
13const dinosaursWithTitle = dinosaurNames.map(function(name) {
14  return "Dr. " + name;
15});
16console.log("ES5 map:", dinosaursWithTitle);
17
18// méthode filter - filtrage des données
19const longNames = dinosaurNames.filter(function(name) {
20  return name.length > 10;
21});
22console.log("ES5 filter (noms longs):", longNames);
23
24// 2. ES6/ES2015 - fonctionnalités modernes
25console.log("\n=== ES6+ JavaScript moderne ===");
26
27// Fonctions fléchées
28const modernDinosaurs = dinosaurNames.map(name => `${name}`);
29console.log("Fonctions fléchées ES6:", modernDinosaurs);
30
31// Littéraux de gabarit
32const favoriteDinosaur = "Tyrannosaurus Rex";
33const description = `Mon dinosaure préféré est ${favoriteDinosaur}.
34C'est le roi de tous les dinosaures !`;
35console.log("Littéraux de gabarit:", description);
36
37// Déstructuration
38const [first, second, ...rest] = dinosaurNames;
39console.log("Déstructuration - premier:", first);
40console.log("Déstructuration - deuxième:", second);
41console.log("Déstructuration - reste:", rest);
42
43// 3. Objets dinosaures - différentes méthodes de création
44console.log("\n=== Création d'objets ===");
45
46// Approche ES5
47function createDinosaurES5(name, period, diet) {
48  return {
49    name: name,
50    period: period,
51    diet: diet,
52    roar: function() {
53      return this.name + " dit : ROAAR !";
54    }
55  };
56}
57
58const trex = createDinosaurES5("T-Rex", "Cretaceous", "Carnivore");
59console.log("Objet ES5:", trex);
60console.log("Méthode ES5:", trex.roar());
61
62// Approche ES6+ - syntaxe abrégée des objets
63function createDinosaurES6(name, period, diet) {
64  return {
65    name,
66    period,
67    diet,
68    roar() {
69      return `${this.name} dit : ROAAR !`;
70    },
71    getInfo() {
72      return `${this.name} vivait à l'époque ${this.period} et était un ${this.diet}`;
73    }
74  };
75}
76
77const velociraptor = createDinosaurES6("Velociraptor", "Cretaceous", "Carnivore");
78console.log("Objet ES6:", velociraptor);
79console.log("Info ES6:", velociraptor.getInfo());
80
81// 4. Classes ES6
82console.log("\n=== Classes ES6 ===");
83
84class Dinosaur {
85  constructor(name, period, diet, weight) {
86    this.name = name;
87    this.period = period;
88    this.diet = diet;
89    this.weight = weight;
90  }
91
92  roar() {
93    return `${this.name} pousse un rugissement puissant !`;
94  }
95
96  getDetails() {
97    return {
98      name: this.name,
99      period: this.period,
100      diet: this.diet,
101      weight: `${this.weight} kg`,
102      sound: this.roar()
103    };
104  }
105
106  // Méthode statique
107  static compareDinosaurs(dino1, dino2) {
108    if (dino1.weight > dino2.weight) {
109      return `${dino1.name} est plus lourd que ${dino2.name}`;
110    } else if (dino1.weight < dino2.weight) {
111      return `${dino2.name} est plus lourd que ${dino1.name}`;
112    } else {
113      return `${dino1.name} et ${dino2.name} ont un poids similaire`;
114    }
115  }
116}
117
118const stegosaurus = new Dinosaur("Stegosaurus", "Jurassic", "Herbivore", 5000);
119const allosaurus = new Dinosaur("Allosaurus", "Jurassic", "Carnivore", 4000);
120
121console.log("Stegosaurus:", stegosaurus.getDetails());
122console.log("Comparaison:", Dinosaur.compareDinosaurs(stegosaurus, allosaurus));
123
124// 5. Promesses et async/await - simulation du chargement de données
125console.log("\n=== Asynchronicité ===");
126
127// Promesse
128function loadDinosaurData(name) {
129  return new Promise((resolve, reject) => {
130    setTimeout(() => {
131      const dinosaurDB = {
132        "Tyrannosaurus": { period: "Cretaceous", discovered: 1905 },
133        "Triceratops": { period: "Cretaceous", discovered: 1889 },
134        "Stegosaurus": { period: "Jurassic", discovered: 1877 }
135      };
136
137      if (dinosaurDB[name]) {
138        resolve({ name, ...dinosaurDB[name] });
139      } else {
140        reject(new Error(`Le dinosaure ${name} est introuvable dans la base de données !`));
141      }
142    }, 1000);
143  });
144}
145
146// Async/await
147async function getDinosaurInfo(name) {
148  try {
149    console.log(`Recherche d'infos sur ${name}...`);
150    const data = await loadDinosaurData(name);
151    console.log(`Trouvé : ${name} de l'époque ${data.period}, découvert en ${data.discovered}`);
152    return data;
153  } catch (error) {
154    console.log("Erreur:", error.message);
155  }
156}
157
158// Tester différentes fonctions
159getDinosaurInfo("Tyrannosaurus");
160getDinosaurInfo("Brontosaurus"); // Celui-ci n'existe pas dans la base de données
161
162// 6. Modules - export et import (simulation)
163console.log("\n=== Modules (simulation) ===");
164
165// Simulation d'export/import
166const DinosaurModule = {
167  // Fonctions exportées
168  createHerbivore(name, weight) {
169    return new Dinosaur(name, "Unknown", "Herbivore", weight);
170  },
171
172  createCarnivore(name, weight) {
173    return new Dinosaur(name, "Unknown", "Carnivore", weight);
174  },
175
176  // Constante exportée
177  PERIODS: ["Triassic", "Jurassic", "Cretaceous"],
178
179  // Export par défaut
180  default: Dinosaur
181};
182
183// Utilisation des fonctions « importées »
184const brachiosaurus = DinosaurModule.createHerbivore("Brachiosaurus", 80000);
185const spinosaurus = DinosaurModule.createCarnivore("Spinosaurus", 7000);
186
187console.log("Brachiosaurus:", brachiosaurus.getDetails());
188console.log("Époques disponibles:", DinosaurModule.PERIODS);
189
190// 7. Démonstration de tous les types de données
191console.log("\n=== Types de données en JavaScript ===");
192
193const dataTypes = {
194  // Types primitifs
195  string: "Tyrannosaurus Rex",
196  number: 68000000, // Âge en années
197  boolean: true, // S'il est carnivore
198  undefined: undefined,
199  null: null,
200  symbol: Symbol("unique-dinosaur-id"),
201  bigint: 999999999999999999999n,
202
203  // Objets
204  object: { name: "Triceratops", horns: 3 },
205  array: ["T-Rex", "Velociraptor", "Triceratops"],
206  function: function() { return "Je suis une fonction !"; },
207  date: new Date(),
208  regexp: /dinozaur/gi
209};
210
211console.log("Tous les types de données :");
212for (const [key, value] of Object.entries(dataTypes)) {
213  console.log(`${key}: ${typeof value} = ${value}`);
214}
215
216console.log("\nFélicitations ! Tu as découvert l'histoire et les bases de JavaScript !");