The Coding Adventure

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

KAPCSOLÓDÓ CIKKEK