The Coding Adventure

11. nap

3 min olvasás Programozóvá válás

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.

KAPCSOLÓDÓ CIKKEK