Historia i znaczenie JavaScript

1// Witaj w świecie JavaScript!
2// Poznajemy historię i znaczenie języka
3
4console.log("Witaj w Parku Jurajskim JavaScript!");
5
6// 1. JavaScript w różnych okresach - ewolucja języka
7console.log("\n=== Ewolucja JavaScript ===");
8
9// ES5 (2009) - podstawowe metody tablicowe
10const dinosaurNames = ["Tyrannosaurus", "Triceratops", "Velociraptor", "Stegosaurus"];
11
12// Metoda map - transformacja danych
13const dinosaursWithTitle = dinosaurNames.map(function(name) {
14  return "Dr. " + name;
15});
16console.log("ES5 map:", dinosaursWithTitle);
17
18// Metoda filter - filtrowanie danych
19const longNames = dinosaurNames.filter(function(name) {
20  return name.length > 10;
21});
22console.log("ES5 filter (długie nazwy):", longNames);
23
24// 2. ES6/ES2015 - nowoczesne funkcje
25console.log("\n=== ES6+ Nowoczesny JavaScript ===");
26
27// Arrow functions
28const modernDinosaurs = dinosaurNames.map(name => `${name}`);
29console.log("ES6 arrow functions:", modernDinosaurs);
30
31// Template literals
32const favoriteDinosaur = "Tyrannosaurus Rex";
33const description = `Mój ulubiony dinozaur to ${favoriteDinosaur}.
34Jest królem wszystkich dinozaurów!`;
35console.log("Template literals:", description);
36
37// Destructuring
38const [first, second, ...rest] = dinosaurNames;
39console.log("Destructuring - pierwszy:", first);
40console.log("Destructuring - drugi:", second);
41console.log("Destructuring - reszta:", rest);
42
43// 3. Obiekty dinozaurów - różne sposoby tworzenia
44console.log("\n=== Tworzenie obiektów ===");
45
46// ES5 sposób
47function createDinosaurES5(name, period, diet) {
48  return {
49    name: name,
50    period: period,
51    diet: diet,
52    roar: function() {
53      return this.name + " mówi: ROAAR!";
54    }
55  };
56}
57
58const trex = createDinosaurES5("T-Rex", "Kredowy", "Mięsożerca");
59console.log("ES5 obiekt:", trex);
60console.log("ES5 metoda:", trex.roar());
61
62// ES6+ sposób - skrócona składnia obiektów
63function createDinosaurES6(name, period, diet) {
64  return {
65    name,
66    period,
67    diet,
68    roar() {
69      return `${this.name} mówi: ROAAR!`;
70    },
71    getInfo() {
72      return `${this.name} żył w okresie ${this.period} i był ${this.diet}`;
73    }
74  };
75}
76
77const velociraptor = createDinosaurES6("Velociraptor", "Kredowy", "Mięsożerca");
78console.log("ES6 obiekt:", velociraptor);
79console.log("ES6 informacje:", velociraptor.getInfo());
80
81// 4. Klasy ES6
82console.log("\n=== Klasy 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} wydaje potężny ryk!`;
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  // Metoda statyczna
107  static compareDinosaurs(dino1, dino2) {
108    if (dino1.weight > dino2.weight) {
109      return `${dino1.name} jest cięższy od ${dino2.name}`;
110    } else if (dino1.weight < dino2.weight) {
111      return `${dino2.name} jest cięższy od ${dino1.name}`;
112    } else {
113      return `${dino1.name} i ${dino2.name} mają podobną wagę`;
114    }
115  }
116}
117
118const stegosaurus = new Dinosaur("Stegosaurus", "Jurski", "Roślinożerca", 5000);
119const allosaurus = new Dinosaur("Allosaurus", "Jurski", "Mięsożerca", 4000);
120
121console.log("Stegosaurus:", stegosaurus.getDetails());
122console.log("Porównanie:", Dinosaur.compareDinosaurs(stegosaurus, allosaurus));
123
124// 5. Promises i async/await - symulacja ładowania danych
125console.log("\n=== Asynchroniczność ===");
126
127// Promise
128function loadDinosaurData(name) {
129  return new Promise((resolve, reject) => {
130    setTimeout(() => {
131      const dinosaurDB = {
132        "Tyrannosaurus": { period: "Kredowy", discovered: 1905 },
133        "Triceratops": { period: "Kredowy", discovered: 1889 },
134        "Stegosaurus": { period: "Jurski", discovered: 1877 }
135      };
136
137      if (dinosaurDB[name]) {
138        resolve({ name, ...dinosaurDB[name] });
139      } else {
140        reject(new Error(`Dinozaur ${name} nie został znaleziony w bazie!`));
141      }
142    }, 1000);
143  });
144}
145
146// Async/await
147async function getDinosaurInfo(name) {
148  try {
149    console.log(`Szukam informacji o ${name}...`);
150    const data = await loadDinosaurData(name);
151    console.log(`Znaleziono: ${name} z okresu ${data.period}, odkryty w ${data.discovered} roku`);
152    return data;
153  } catch (error) {
154    console.log("Błąd:", error.message);
155  }
156}
157
158// Test różnych funkcji
159getDinosaurInfo("Tyrannosaurus");
160getDinosaurInfo("Brontosaurus"); // Ten nie istnieje w bazie
161
162// 6. Modules - eksport i import (symulacja)
163console.log("\n=== Modules (symulacja) ===");
164
165// Symulujemy eksport/import
166const DinosaurModule = {
167  // Eksportowane funkcje
168  createHerbivore(name, weight) {
169    return new Dinosaur(name, "Nieznany", "Roślinożerca", weight);
170  },
171
172  createCarnivore(name, weight) {
173    return new Dinosaur(name, "Nieznany", "Mięsożerca", weight);
174  },
175
176  // Eksportowana stała
177  PERIODS: ["Triasowy", "Jurski", "Kredowy"],
178
179  // Domyślny eksport
180  default: Dinosaur
181};
182
183// Używanie "zaimportowanych" funkcji
184const brachiosaurus = DinosaurModule.createHerbivore("Brachiosaurus", 80000);
185const spinosaurus = DinosaurModule.createCarnivore("Spinosaurus", 7000);
186
187console.log("Brachiosaurus:", brachiosaurus.getDetails());
188console.log("Dostępne okresy:", DinosaurModule.PERIODS);
189
190// 7. Demonstracja wszystkich typów danych
191console.log("\n=== Typy danych w JavaScript ===");
192
193const dataTypes = {
194  // Prymitywne typy
195  string: "Tyrannosaurus Rex",
196  number: 68000000, // Wiek w latach
197  boolean: true, // Czy jest mięsożercą
198  undefined: undefined,
199  null: null,
200  symbol: Symbol("unique-dinosaur-id"),
201  bigint: 999999999999999999999n,
202
203  // Obiekty
204  object: { name: "Triceratops", horns: 3 },
205  array: ["T-Rex", "Velociraptor", "Triceratops"],
206  function: function() { return "Jestem funkcją!"; },
207  date: new Date(),
208  regexp: /dinozaur/gi
209};
210
211console.log("Wszystkie typy danych:");
212for (const [key, value] of Object.entries(dataTypes)) {
213  console.log(`${key}: ${typeof value} = ${String(value)}`);
214}
215
216console.log("\nGratulacje! Poznałeś historię i podstawy JavaScript!");