Zaawansowane Ćwiczenia

1: Klasy i dziedziczenie

Stwórz klasę Osoba i dziedziczącą po niej klasę Student z metodą przedstawSię.

class Osoba {
    constructor(imie, wiek) {
        this.imie = imie;
        this.wiek = wiek;
    }
}

class Student extends Osoba {
    przedstawSie() {
        console.log(`Cześć, mam na imię ${this.imie} i mam ${this.wiek} lat.`);
    }
}

let student = new Student("Jan", 20);
student.przedstawSie();

2: Async/await i fetch

Pobierz dane z API (JSONPlaceholder) z użyciem async/await.

async function fetchData() {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log(data);
}

fetchData();

3: Mapowanie obiektów

Z tablicy użytkowników wygeneruj tablicę tekstowych przywitań.

let users = [
    { imie: "Jan", wiek: 20 },
    { imie: "Anna", wiek: 25 },
    { imie: "Marek", wiek: 30 }
];

let greetings = users.map(user =>
  `Cześć, mam na imię ${user.imie} i mam ${user.wiek} lat.`);
console.log(greetings);

4: localStorage

Zapisz obiekt użytkownika w localStorage i go odczytaj.

function saveData() {
    let user = { imie: "Jan", wiek: 20 };
    localStorage.setItem("user", JSON.stringify(user));
}

function getData() {
    let user = JSON.parse(localStorage.getItem("user"));
    console.log(user);
}

saveData();
getData();

5: Eventy i formularz

Obsłuż wysłanie formularza z polami „imię” i „wiek”.

document.querySelector("form").addEventListener("submit", function(event) {
    event.preventDefault();
    let imie = document.querySelector("#imie").value;
    let wiek = document.querySelector("#wiek").value;
    console.log(`Imię: ${imie}, Wiek: ${wiek}`);
});

6: Debouncing

Wywołaj akcję dopiero 500 ms po zakończeniu pisania w polu tekstowym.

let timer;

document.querySelector("#input").addEventListener("input", function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log("Wprowadzono dane:", this.value);
    }, 500);
});

7: Destrukturyzacja obiektu

Użyj destrukturyzacji, aby wydobyć pola z obiektu samochod.

const samochod = { marka: "Toyota", model: "Corolla", rocznik: 2015 };
const { marka, model, rocznik } = samochod;
console.log(marka, model, rocznik);

8: UUID

Wygeneruj identyfikator w formacie GUID/UUID v4.

function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
      .replace(/[xy]/g, function(c) {
        let r = Math.random() * 16 | 0;
        let v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

console.log(generateUUID());

9: Obsługa błędów

Podziel dwie liczby i obsłuż błąd dzielenia przez 0.

function divide(a, b) {
    try {
        if (b === 0) throw "Nie można dzielić przez 0!";
        console.log(a / b);
    } catch (e) {
        console.error(e);
    }
}

divide(10, 2);
divide(10, 0);

10: Różnica tablic

Znajdź elementy, które są tylko w jednej z dwóch tablic.

let array1 = [1, 2, 3, 4, 5];
let array2 = [4, 5, 6, 7, 8];

let diff = array1.filter(x => !array2.includes(x))
  .concat(array2.filter(x => !array1.includes(x)));

console.log(diff);

Zaawansowane Ćwiczenia – JavaScript