JavaScript w przeglądarce · Moduł 13

Galerie obrazów i pamięć podręczna w przeglądarce

Przełączanie slajdów, zapętlanie indeksów modulo, interaktywne miniatury oraz trwały stan w localStorage.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minCykliczne przełączanie slajdów w galerii Przejście do przodu po osiągnięciu ostatniego slajdu powinno zapętlić galerię do indeksu…
12 minGaleria miniatur i zmiana widoku głównego Aby przekazać dane do funkcji obsługującej, najwygodniej posłużyć się parametrem this…
12 minZapisywanie prostego stanu w localStorage localStorage.setItem(klucz, wartosc) — zapisuje wartość pod wskazanym kluczem,
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

Cykliczne przełączanie slajdów w galerii

Budowa karuzeli lub galerii zdjęć wymaga przechowywania aktualnego stanu w zmiennej liczbowej (np. let aktualnyIndeks = 0 ), która wskazuje na bieżący element tablicy grafik lub opisów.

Przejście do przodu po osiągnięciu ostatniego slajdu powinno zapętlić galerię do indeksu zerowego: if (aktualnyIndeks >= slajdy.length) aktualnyIndeks = 0;
Cofnięcie się przed pierwsze zdjęcie (indeks mniejszy od zera) musi przenieść użytkownika na koniec kolekcji: if (aktualnyIndeks < 0) aktualnyIndeks = slajdy.length - 1;
Do zapętlenia nawigacji w przód można również zastosować elegancki zapis z operatorem reszty z dzielenia: aktualnyIndeks = (aktualnyIndeks + 1) % slajdy.length .
Kluczowym wymaganiem jest prawidłowa obsługa przypadków skrajnych:

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

const slajdy = [
  { tytul: 'Tatry Wysokie', kolor: '#3b82f6' },
  { tytul: 'Karkonosze — Śnieżka', kolor: '#10b981' },
  { tytul: 'Bieszczadzki Park Narodowy', kolor: '#f59e0b' }
];

let aktualnyIndeks = 0;

function pokazSlajd() {
  const ramka = document.getElementById('ramkaZdjecia');
  const licznik = document.getElementById('licznikSlajdow');

  ramka.textContent = slajdy[aktualnyIndeks].tytul;
  ramka.style.backgroundColor = slajdy[aktualnyIndeks].kolor;
  licznik.textContent = 'Zdjęcie ' + (aktualnyIndeks + 1) + ' z ' + slajdy.length;
}

function nastepnySlajd() {
  aktualnyIndeks++;
  if (aktualnyIndeks >= slajdy.length) {
    aktualnyIndeks = 0;
  }
  pokazSlajd();
}

function poprzedniSlajd() {
  aktualnyIndeks--;
  if (aktualnyIndeks < 0) {
    aktualnyIndeks = slajdy.length - 1;
  }
  pokazSlajd();
}

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

const slajdy = [
  { tytul: 'Tatry Wysokie', kolor: '#3b82f6' },
  { tytul: 'Karkonosze — Śnieżka', kolor: '#10b981' },
  { tytul: 'Bieszczadzki Park Narodowy', kolor: '#f59e0b' }
];

let aktualnyIndeks = 0;

function pokazSlajd() {
  const ramka = document.getElementById('ramkaZdjecia');
  const licznik = document.getElementById('licznikSlajdow');

  ramka.textContent = slajdy[aktualnyIndeks].tytul;
  ramka.style.backgroundColor = slajdy[aktualnyIndeks].kolor;
  licznik.textContent = 'Zdjęcie ' + (aktualnyIndeks + 1) + ' z ' + slajdy.length;
}

function nastepnySlajd() {
  aktualnyIndeks++;
  if (aktualnyIndeks >= slajdy.length) {
    aktualnyIndeks = 0;
  }
  pokazSlajd();
}

function poprzedniSlajd() {
  aktualnyIndeks--;
  if (aktualnyIndeks < 0) {
    aktualnyIndeks = slajdy.length - 1;
  }
  pokazSlajd();
}

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Jaki operator arytmetyczny pozwala uzyskać efekt zapętlenia indeksu slajdu po osiągnięciu końca tablicy?

Atom 2 z 3 · ~12 min

Galeria miniatur i zmiana widoku głównego

Drugim powszechnym wzorcem w serwisach internetowych jest podgląd produktu z rzędem miniatur pod dużym zdjęciem głównym. Kliknięcie dowolnej miniatury powoduje natychmiastowe zaktualizowanie głównego kadru.

Aby przekazać dane do funkcji obsługującej, najwygodniej posłużyć się parametrem this (wskazującym na kliknięty kafelek) oraz przekazać dodatkowe argumenty lub odczytać…
Dla zapewnienia czytelności interfejsu skrypt powinien również oznaczyć wybraną miniaturę klasą CSS (np.
aktywna ), usuwając ją uprzednio ze wszystkich pozostałych kafelków za pomocą pętli forEach .

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

function zmienMiniature(kliknietaMiniatura, nazwaWidoku, kolorTla) {
  const glowny = document.getElementById('glownyObraz');
  const podpis = document.getElementById('podpisWidoku');
  const wszystkieMiniatury = document.querySelectorAll('.mini-box');

  wszystkieMiniatury.forEach(function(m) {
    m.classList.remove('aktywna');
  });

  kliknietaMiniatura.classList.add('aktywna');
  glowny.textContent = nazwaWidoku;
  glowny.style.backgroundColor = kolorTla;
  podpis.textContent = 'Wybrany kąt: ' + nazwaWidoku;
}

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

function zmienMiniature(kliknietaMiniatura, nazwaWidoku, kolorTla) {
  const glowny = document.getElementById('glownyObraz');
  const podpis = document.getElementById('podpisWidoku');
  const wszystkieMiniatury = document.querySelectorAll('.mini-box');

  wszystkieMiniatury.forEach(function(m) {
    m.classList.remove('aktywna');
  });

  kliknietaMiniatura.classList.add('aktywna');
  glowny.textContent = nazwaWidoku;
  glowny.style.backgroundColor = kolorTla;
  podpis.textContent = 'Wybrany kąt: ' + nazwaWidoku;
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

Który atrybut elementu img należy zaktualizować w kodzie JavaScript, aby wyświetlić nowy plik graficzny?

Atom 3 z 3 · ~12 min

Zapisywanie prostego stanu w localStorage

Mechanizm localStorage umożliwia zapisywanie prostych danych (np. liczby wyświetleń, stanu koszyka czy preferowanego motywu graficznego) bezpośrednio w pamięci przeglądarki użytkownika.

localStorage.setItem(klucz, wartosc) — zapisuje wartość pod wskazanym kluczem,
localStorage.getItem(klucz) — odczytuje wartość (jeśli klucz nie istnieje, zwraca null ),
localStorage.removeItem(klucz) — usuwa konkretną pozycję z pamięci,
localStorage.clear() — czyści wszystkie klucze zapisane dla danej domeny.

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

function odczytajPolubienia() {
  const zapisane = localStorage.getItem('polubieniaLicznik');
  const wynik = document.getElementById('stanPolubien');
  const stan = zapisane ? Number(zapisane) : 0;
  wynik.textContent = 'Liczba polubień: ' + stan;
  return stan;
}

function dodajPolubienie() {
  const aktualne = odczytajPolubienia();
  const nowe = aktualne + 1;
  localStorage.setItem('polubieniaLicznik', nowe);
  odczytajPolubienia();
}

function zresetujPolubienia() {
  localStorage.removeItem('polubieniaLicznik');
  odczytajPolubienia();
}

odczytajPolubienia();

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

function odczytajPolubienia() {
  const zapisane = localStorage.getItem('polubieniaLicznik');
  const wynik = document.getElementById('stanPolubien');
  const stan = zapisane ? Number(zapisane) : 0;
  wynik.textContent = 'Liczba polubień: ' + stan;
  return stan;
}

function dodajPolubienie() {
  const aktualne = odczytajPolubienia();
  const nowe = aktualne + 1;
  localStorage.setItem('polubieniaLicznik', nowe);
  odczytajPolubienia();
}

function zresetujPolubienia() {
  localStorage.removeItem('polubieniaLicznik');
  odczytajPolubienia();
}

odczytajPolubienia();

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

Jaka metoda służy do zapisania wartości tekstowej pod określonym kluczem w pamięci localStorage?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Przejście do przodu po osiągnięciu ostatniego slajdu powinno zapętlić galerię do indeksu zerowego: if (aktualnyIndeks >= slajdy.length) aktualnyIndeks = 0;
Aby przekazać dane do funkcji obsługującej, najwygodniej posłużyć się parametrem this (wskazującym na kliknięty kafelek) oraz przekazać dodatkowe argumenty lub…
localStorage.setItem(klucz, wartosc) — zapisuje wartość pod wskazanym kluczem,

Bilet wyjściowy: Która instrukcja usuwa wszystkie zapisane dane bieżącej domeny z magazynu localStorage?
Odpowiedź: d) Instrukcja localStorage.clear()