Webprogramozás – Objektumok, DOM és eseménykezelés

1. Objektumok JavaScriptben

A JavaScriptben az objektum olyan adatszerkezet, amely adatokat és műveleteket foglalhat össze.

Egy objektumnak lehetnek:

• tulajdonságai (property);
• metódusai (method).

Egyszerű példa

const auto = {
    marka: "Toyota",
    szin: "piros",
    sebesseg: 50
};

Az auto egy objektum.

A tulajdonságai:

auto.marka
auto.szin
auto.sebesseg

Például:

console.log(auto.marka);    /* eredmény: Toyota

Tulajdonság módosítása

A tulajdonság értékét meg is változtathatjuk:

auto.szin = "kék";      /* Az objektum színe: kék

2. Tulajdonság vagy metódus?

Tulajdonság

Információt, adatot tárol.

auto.szin

Metódus

Egy műveletet hajt végre.

objektum.metodus()

Példa

console.log("Hello");

A console egy objektum.

A log() pedig egy metódus.

3. Objektumok a weboldalon

A weboldal elemei is objektumként kezelhetők JavaScriptből.

Például van egy HTML-gombunk:

<button id="gomb">Kattints!</button>

JavaScriptből megszerezhetjük:

const gomb = document.getElementById("gomb");

A gomb változóban ezután a HTML-gombhoz tartozó DOM-objektum található.

Ennek például lehet:

gomb.id
gomb.textContent
gomb.style

tulajdonsága.

És vannak metódusai is, például:

gomb.addEventListener()

4. DOM (Document Object Model) - Dokumentum Objektum Modell

A böngésző a HTML-dokumentumot egy objektumokból álló struktúraként kezeli.

Például:

<html>
    <body>
        <h1>Cím</h1>
        <p>Szöveg</p>
        <button>Gomb</button>
    </body>
</html>

A DOM leegyszerűsített szerkezete:

document
└── html
    └── body
        ├── h1
        ├── p
        └── button

A JavaScript ezen a DOM-on keresztül tud kapcsolatba lépni a HTML-oldallal.

5. A document objektum

A weboldal DOM-jának kiindulópontja a document objektum.

Például:

console.log(document);

kiírja a dokumentumot a konzolra.

A JavaScript a document objektum metódusaival tudja megkeresni a HTML-elemeket.

6. Elem kiválasztása ID alapján

HTML:

<p id="szoveg">Hello!</p>

JavaScript:

const szoveg = document.getElementById("szoveg");

A getElementById() megkeresi azt a HTML-elemet, amelynek azonosítója: szoveg

Ezután a szoveg változóval elérhetjük az elemet.

Példa

const szoveg = document.getElementById("szoveg");

console.log(szoveg);

7. A textContent tulajdonság

A textContent segítségével lekérdezhetjük vagy módosíthatjuk egy elem szövegét.

HTML:

<p id="szoveg">Eredeti szöveg</p>

JavaScript:

const szoveg = document.getElementById("szoveg");

szoveg.textContent = "Új szöveg";

A weboldalon ez jelenik meg:

Új szöveg

8. Szöveg lekérdezése

Nemcsak módosítani tudjuk a szöveget, hanem lekérdezni is:

console.log(szoveg.textContent);

Ha a HTML:

<p id="szoveg">Hello!</p>

akkor a konzolban:

Hello!

jelenik meg.

9. A style tulajdonság

JavaScriptből CSS-tulajdonságokat is módosíthatunk.

Például:

szoveg.style.color = "red";

A szöveg piros lesz.

További példák:

szoveg.style.backgroundColor = "yellow";

szoveg.style.fontSize = "30px";

szoveg.style.fontWeight = "bold";

📌 CSS-ben: background-color, JavaScriptben: backgroundColor. A kötőjeles CSS-nevek JavaScriptben általában camelCase formában jelennek meg.

10. querySelector()

Egy másik gyakran használt metódus:

document.querySelector()

Például:

<h1 id="cim">Webprogramozás</h1>

JavaScript:

const cim = document.querySelector("#cim");

A # az ID-t jelenti.

Osztály kiválasztása

HTML:

<p class="kiemelt">Első</p>

JavaScript:

const elem = document.querySelector(".kiemelt");

A . az osztályt jelenti.

Elemnév alapján

const cim = document.querySelector("h1");

Ez az első <h1> elemet választja ki.

Gyakorló feladatok – DOM

1. feladat – Üdvözlő oldal

Készíts egy HTML-oldalt, amely tartalmaz:

• egy h1 címet,
• egy p bekezdést,
• egy button gombot.

JavaScriptből:

• változtasd meg a h1 szövegét,
• változtasd meg a bekezdés szövegét,
• változtasd meg a bekezdés betűszínét,
• változtasd meg a gomb szövegét.

2. feladat – Tanuló adatai

Készíts egy oldalt az alábbi HTML-elemekkel:

• h1 – „Tanuló adatai”
• p – név
• p – életkor
• button

JavaScriptből:

• változtasd meg a címet,
• jelenítsd meg a nevet,
• jelenítsd meg az életkort,
• állítsd a név színét zöldre,
• a gomb felirata legyen „Adatok megjelenítése”.

3. feladat – Kedvenc szín

Készíts egy html-t ami a következőket tartalmazza:

• egy h1 címet,
• egy bekezdést,
• egy gombot.

JavaScriptből:

• a cím legyen: „Kedvenc színem”,
• a bekezdés szövege legyen: „A kedvenc színem a kék.”,
• a bekezdés színe legyen kék,
• a gomb szövege legyen: „Kék gomb”,
• a gomb háttérszíne legyen kék.

4. feladat – Egyszerű termék

Készíts egy weboldalt, amelyen szerepel:

• egy h1 – termék neve,
• egy p – termék ára,
• egy p – készlet,
• egy button.

JavaScriptből állítsd be:

• a termék neve: Laptop
• az ár: 299 990 Ft
• a készlet: 5 db
• az ár színe legyen piros,
• a gomb szövege: „Vásárlás”

5. feladat – Profilkártya

Készíts:

• egy h1 címet,
• három p elemet,
• egy gombot.

A három bekezdés tartalmazza:

• nevet,
• foglalkozást,
• várost.

JavaScriptből állítsd be az adatokat.

A név legyen félkövér, a város színe pedig legyen zöld.