← Wróć do spisu ← Wróć na pulpit
Materiał edukacyjny · Informatyka JavaScript w przeglądarce · Moduł 13

MODUŁ 13

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

PPrezentacja dla nauczyciela

Komponenty multimedialne wymagają płynnej obsługi nawigacji: przełączania slajdów w obu kierunkach, reagowania na kliknięcia w miniatury oraz zapamiętywania stanu sesji. W tym module dowiesz się, jak budować niezawodne galerie oraz utrwalać proste dane za pomocą localStorage.

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.

Kluczowym wymaganiem jest prawidłowa obsługa przypadków skrajnych:

  • 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. 

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();
}
1. Jaki operator arytmetyczny pozwala uzyskać efekt zapętlenia indeksu slajdu po osiągnięciu końca tablicy?
2. Co się stanie, gdy przy przełączaniu wstecz indeks zmniejszy się poniżej zera bez zabezpieczenia warunkiem?
3. W jaki sposób najprościej zabezpieczyć przejście do poprzedniego slajdu przed indeksem ujemnym?

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ć atrybuty danych data-*.

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. 

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;
}
4. Który atrybut elementu img należy zaktualizować w kodzie JavaScript, aby wyświetlić nowy plik graficzny?
5. Gdzie najlepiej przechować ścieżkę do zdjęcia w pełnym rozmiarze w znaczniku miniatury?
6. Jak wyróżnić aktywną miniaturę po kliknięciu wśród pozostałych miniaturek?

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. Dane te nie znikają po odświeżeniu ani po ponownym otwarciu karty.

Do obsługi magazynu służą metody:

  • 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.

Należy pamiętać, że localStorage przechowuje wyłącznie ciągi znaków (typ string). Przy operacjach arytmetycznych na zapisanych liczbach należy dokonać jawnej konwersji za pomocą Number(). 

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();
7. Jaka metoda służy do zapisania wartości tekstowej pod określonym kluczem w pamięci localStorage?
8. Dlaczego po pobraniu liczby z localStorage metodą getItem należy użyć funkcji Number()?
9. Która instrukcja usuwa wszystkie zapisane dane bieżącej domeny z magazynu localStorage?

Ćwiczenia

Materiały edukacyjne Hyżyk · JavaScript pod kątem INF.03 · Moduł 13