Ćwiczenia JavaScript – Zaawansowane

Ćwiczenie 1: Klasy i dziedziczenie

Stwórz klasy Osoba i Student, a następnie wypisz komunikat z metody przedstawSię.

class Osoba {
  constructor(imie, wiek) {
    this.imie = imie;
    this.wiek = wiek;
  }
}
class Student extends Osoba {
  przedstawSie() {
    return `Cześć, mam na imię ${this.imie} i mam ${this.wiek} lat.`;
  }
}
let student = new Student("Jan", 20);
document.getElementById("wynik1").innerHTML = student.przedstawSie();

Ćwiczenie 2: Funkcja asynchroniczna

Zasymuluj pobieranie danych i pokaż wynik po 2 sekundach (async/await).

async function pobierzDane() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Dane pobrane!"), 2000);
  });
}
async function run() {
  let wynik = await pobierzDane();
  document.getElementById("wynik2").innerHTML = wynik;
}
run();

Ćwiczenie 3: Map i Filter

Przefiltruj parzyste liczby z tablicy i pomnóż je razy 2.

let liczby = [1,2,3,4,5,6];
let wynik = liczby
  .filter(n => n % 2 === 0)
  .map(n => n * 2);
document.getElementById("wynik3").innerHTML = wynik.join(", ");

Ćwiczenie 4: Rekurencja

Napisz rekurencyjną funkcję liczącą silnię z liczby 5.

function silnia(n) {
  return (n === 0 ? 1 : n * silnia(n - 1));
}
document.getElementById("wynik4").innerHTML = silnia(5);

Ćwiczenie 5: Obiekt Date

Wyświetl aktualną datę w formacie RRRR-MM-DD.

let d = new Date();
let data =
  d.getFullYear() + "-" +
  (d.getMonth() + 1) + "-" +
  d.getDate();
document.getElementById("wynik5").innerHTML = data;

Ćwiczenie 6: Generator

Stwórz generator zwracający liczby 1, 2, 3.

function* licznik() {
  yield 1;
  yield 2;
  yield 3;
}
let gen = licznik();
document.getElementById("wynik6").innerHTML =
  [gen.next().value, gen.next().value, gen.next().value].join(", ");

Ćwiczenie 7: Set

Utwórz zbiór unikalnych liczb z tablicy z duplikatami.

let liczby = [1,2,2,3,4,4,5];
let zbior = new Set(liczby);
document.getElementById("wynik7").innerHTML =
  Array.from(zbior).join(", ");

Ćwiczenie 8: Promise

Zwróć komunikat z obietnicy po 1 sekundzie.

let obietnica = new Promise(resolve => {
  setTimeout(() => resolve("Gotowe!"), 1000);
});
obietnica.then(result => {
  document.getElementById("wynik8").innerHTML = result;
});

Ćwiczenie 9: Spread operator

Połącz dwie tablice w jedną używając operatora spread.

let a = [1,2,3];
let b = [4,5,6];
let polaczone = [...a, ...b];
document.getElementById("wynik9").innerHTML =
  polaczone.join(", ");

Ćwiczenie 10: Destrukturyzacja

Pobierz imię i wiek z obiektu przy pomocy destrukturyzacji.

let osoba = {imie: "Jan", wiek: 20};
let {imie, wiek} = osoba;
document.getElementById("wynik10").innerHTML =
  `Imię: ${imie}, wiek: ${wiek}`;

Zaawansowane ćwiczenia JavaScript