Zaawansowane Ćwiczenia

Ćwiczenie 1: Klasy i dziedziczenie

Stwórz klasę "Osoba", która zawiera imię i wiek. Następnie stwórz klasę "Student", która dziedziczy po klasie "Osoba" i dodaje 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();

Ćwiczenie 2: Praca z asynchronicznością (async/await)

Stwórz funkcję, która pobierze dane z API (symulowane API, np. JSONPlaceholder), a następnie wyświetli je w konsoli. Użyj asynchroniczności.

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

fetchData();

Ćwiczenie 3: Mapowanie obiektów

Stwórz tablicę obiektów z danymi użytkowników (imię, wiek). Następnie użyj metody .map, aby stworzyć nową tablicę z powitaniami dla każdego użytkownika.

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);

Ćwiczenie 4: Praca z lokalnym magazynem (localStorage)

Stwórz funkcję, która zapisuje dane użytkownika (imię, wiek) do localStorage, a następnie pobiera te dane i wyświetla je w konsoli.

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();

Ćwiczenie 5: Eventy i obsługa formularzy

Stwórz formularz z polami: imię i wiek. Po kliknięciu przycisku "Zatwierdź" dane mają być wyświetlone w konsoli.

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}\`);
});

Ćwiczenie 6: Debouncing

Stwórz funkcję, która wyświetli wynik tylko po 500 ms od ostatniego wprowadzenia danych w polu tekstowym. Użyj techniki debouncing.

let timer;

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

Ćwiczenie 7: Destrukturyzacja obiektów

Stwórz obiekt "samochód" z właściwościami: marka, model, rocznik. Następnie użyj destrukturyzacji, aby wydobyć te właściwości do zmiennych.

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

Ćwiczenie 8: Generowanie unikalnych identyfikatorów (UUID)

Stwórz funkcję, która generuje unikalny identyfikator (UUID) w formacie 8-4-4-4-12 (np. 123e4567-e89b-12d3-a456-426614174000).

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());

Ćwiczenie 9: Obsługa błędów z try...catch

Stwórz funkcję, która dzieli dwie liczby i obsługuje potencjalne błędy (np. dzielenie 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);

Ćwiczenie 10: Różnice między tablicami

Stwórz dwie tablice i porównaj je, wyświetlając elementy, które są tylko w jednej z nich (niepowtarzające się elementy).

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