Kategóriák

10. nap

Table of Contents
  1. Jelmagyarázat
  2. JavaScript fájl létrehozása
  3. JavaScript fájl linkelése
  4. Dátum értéke
    1. 1. HTML kód
    2. 2. Hogyan választhatunk ki különböző elemeket?
    3. 3. Hogyan adhatunk az elemnek tartalmat?
    4. 4. JavaScript kód
  5. 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.querySelectorAll(): Ez a metódus az összes elemet visszaadja a megadott CSS szelektor alapján egy NodeList objektumban.
  • 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.

JavaScript fájl létrehozása

A JavaScript fájl létrehozása hasonlóan egyszerű ahhoz, mint a HTML fájlok létrehozása. Hozzunk létre egy script.js elnevezésű fájlt a projekt mappájában.

JavaScript fájl linkelése

Az újonnan létrehozott fájlt össze kell kapcsolnunk a HTML fájllal, amit linkelés útján tudunk megtenni. Ezt a kódot a HTML fájl <head> elemébe kell helyezni.

<script src="script.js" defer></script>

Dátum értéke

A legelső JavaScript műveletünk az lesz, hogy a láblécben található dátum elemet feltöltjük adattal.

1. HTML kód

<p>${Név} <span id="date"></span></p>
  • Ez egy HTML bekezdés (<p>) elem.
  • A bekezdésen belül van egy ${Név} kifejezés, ami a neved jelöli.
  • Majd van egy <span> elem az "date" azonosítóval. Ezt fogjuk használni az aktuális dátum megjelenítésére.

A feladatunk a következő: írj JavaScript kódot a <span> elem kiválasztására "date" azonosítóval, majd ennek az elemnek a tartalmát írd át a jelenlegi évre.

A feladat szövegében dőltbetűkkel kiemeltem azokat a fontos kulcsszavakat, amelyekre figyelnünk kell.

2. Hogyan választhatunk ki különböző elemeket?

  • Kiválasztás név alapján:
// Kiválasztja az első <p> elemet
const paragraph = document.querySelector("p");
  • Kiválasztás ID alapján:
// Kiválasztja az elemet az id="myElement"
const elementById = document.querySelector("#myElement");
  • Kiválasztás osztálynév alapján:
// Kiválasztja az összes elemet az class="myClass" alapján
const elementsByClass = document.querySelectorAll(".myClass");
  • Beágyazott elemek kiválasztása:
// Kiválasztja a <div> elemekben lévő <span> elemeket
const spansInDivs = document.querySelectorAll("div span");

3. Hogyan adhatunk az elemnek tartalmat?

  • Válaszd ki az elemet:
    • Használd a fent említett módszereket, mint például a document.getElementById(), document.querySelector() vagy document.querySelectorAll() a frissíteni kívánt elem kiválasztásához.
  • A tartalom frissítése:
    • Ha már megvan az elem, frissítheti a tartalmát az olyan tulajdonságok segítségével tudod, mint a textContent, innerHTML vagy innerText.

4. JavaScript kód

const dateElement = document.querySelector("#date");
const fullYear = new Date().getFullYear();
dateElement.innerHTML = fullYear;
  • A document.querySelector("#date") segítségével kiválasztja az "date" azonosítójú HTML elemet.
  • const fullYear = new Date().getFullYear(); létrehoz egy új Date objektumot, amely a jelenlegi dátumot és időt reprezentálja, majd a .getFullYear() metódussal kinyeri belőle az évet.
  • Végül, dateElement.innerHTML = fullYear; beállítja a <span> elem belsejének HTML tartalmát a fullYear változóban tárolt jelenlegi év értékére.

Extra olvasnivaló

Amennyiben szeretnél még olvasni a különböző kiválasztókról, akkor azt itt tudod megtenni.

Ezek is értékesek lehetnek