Kategóriák

11. nap

Table of Contents
  1. Jelmagyarázat
  2. Téma váltó
    1. 1. HTML elem kiválasztása
    2. 2. Téma váltó függvény
    3. 3. Eseményfigyelő
  3. Lokális tároló
    1. 1. Téma váltó függvény módosítása
    2. 2. Aktuális téma kiolvasása
    3. 3. Téma alkalmazása
  4. Extra olvasnivaló

Jelmagyarázat

  • document: A document az a globális objektum a böngészők JavaScript környezetében, amely reprezentálja az aktuális HTML dokumentumot. Segítségével hozzáférhetünk az aktuális oldalon található elemekhez és manipulálhatjuk azokat.
  • document.querySelector(): Ez a metódus az első elemet adja vissza a megadott CSS szelektor alapján.
  • document.getElementById(): Ez a metódus visszaadja az azonosítójával megegyező első elemet az aktuális dokumentumban.
  • new Date().getFullYear(): Ez a kifejezés létrehoz egy új Date objektumot, ami a jelenlegi dátumot és időt reprezentálja, majd a getFullYear() metódussal kinyeri belőle az évet.
  • ELEMENT.addEventListener(ESEMÉNY, FÜGGVÉNY): Ez a függvény lehetővé teszi egy eseményfigyelő függvény hozzáadását egy HTML elemhez. Amikor az adott esemény bekövetkezik az elemen (pl. 'click', 'input', 'change' stb.), akkor a megadott függvény automatikusan végrehajtódik.
  • document.documentElement.setAttribute(KULCS, ÉRTÉK): Ez a függvény lehetővé teszi egy attribútum beállítását a dokumentum gyökéreleménél (általában a <html> elem). A kulcs és az érték paraméterek segítségével megadhatjuk az attribútum nevét és értékét, ami változtathatja az elem megjelenését vagy működését.
  • localStorage.setItem(KULCS, ÉRTÉK): Ez a függvény lehetővé teszi egy adatpár (kulcs-érték páros) hozzáadását vagy felülírását a helyi tárolásban (localStorage) a böngészőben. A kulcs és az érték paraméterekkel megadhatjuk az adatot, amit tárolni szeretnénk.
  • localStorage.getItem(KULCS, ÉRTÉK): Ez a metódus visszaadja az adott kulcshoz tartozó értéket a helyi tárolásból (localStorage). Megadhatjuk a kulcsot, amely alapján keresni szeretnénk az adatot, és a függvény visszaadja az ezzel a kulccsal tárolt értéket.

Téma váltó

A második műveletünk a téma váltó implementálása lesz, amely lehetővé teszi a felhasználók számára, hogy váltogassanak a világos és sötét témák között.

1. HTML elem kiválasztása

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);

Ez a sor kiválasztja a checkbox elemet a theme-switch osztályú elemen belül.

2. Téma váltó függvény

A függvények olyan kódblokkok, amelyeket arra terveztek, hogy egy adott feladatot hajtsanak végre. Képesek bemeneteket (paramétereket) fogadni, műveleteket végrehajtani, és értéket visszaadni. Ebben az esetben a switchTheme függvény egy objektumot e vesz bemenetként (ami a változás eseményt reprezentálja), megvizsgálja a checkbox állapotát (e.target.checked), és ez alapján váltja a témát.

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
  }
}

A függvényeket úgy tudjuk meghívni, hogy a függvény nevét követően egy zárójel párt teszünk, jelen esetben switchTheme().

3. Eseményfigyelő

Az eseményfigyelők olyan függvények a JavaScript-ben, amelyek egy adott esemény bekövetkezését várják, majd végrehajtják a hozzájuk tartozó visszahívó függvényt, jelen esetben a switchTheme függvényt.

toggleSwitch.addEventListener("change", switchTheme);

Ez a sor egy eseményfigyelőt ad hozzá a checkbox elemhez. Figyeli a "change" eseményt, ami akkor történik meg, amikor a checkbox állapota megváltozik (például be vagy kikapcsolják). Amikor ez az esemény bekövetkezik, meghívja a switchTheme függvényt, ami kezeli a téma váltást.

Lokális tároló

A harmadik műveletünk a kiválasztott téma elmentése lesz a felhasználó böngészőjébe, és amikor az oldalunkra visszajön, akkor ugyan azt a témát lássa.

1. Téma váltó függvény módosítása

Ahhoz, hogy el tudjuk menteni a kiválasztott témát, azt akkor kell megtennünk, amikor rákattintunk a témaváltó gombra. Ezért a témaváltó függvény módosítanunk kell a következő képpen.

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

2. Aktuális téma kiolvasása

A böngésző helyi tárolójából lekéri a jelenlegi téma preferenciát. Ha van téma preferencia, akkor azt a currentTheme változóban tárolja; egyébként a currentTheme értéke null.

const currentTheme = localStorage.getItem("theme")
  ? localStorage.getItem("theme")
  : null;

3. Téma alkalmazása

Ha van elmentve téma (currentTheme nem null), akkor beállítja a <html> elem data-theme attribútumát a tárolt téma szerint. Ezen felül, ha a tárolt téma "dark", akkor bejelöli a jelölőnégyzetet, hogy tükrözze a sötét téma állapotát.

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);

  if (currentTheme === "dark") {
    toggleSwitch.checked = true;
  }
}

Extra olvasnivaló

Amennyiben szeretnél még olvasni a különböző kiválasztókról, akkor azt itt tudod megtenni. Ha a események érdekelnek, akkor itt tudsz róluk olvasni.

Ezek is értékesek lehetnek