HTML, CSS és JavaScript: a webes felület három szerepe

Célok

A lecke végére meg tudod különböztetni a HTML, a CSS és a JavaScript feladatát, el tudod dönteni, hogy egy követelmény melyikhez tartozik, és érted, miért nem elég a kliensoldali ellenőrzés a szabályok védelméhez.

Miért három külön nyelv?

Egy weboldal egységes felületnek látszik, de a böngésző három különböző jellegű erőforrást dolgoz fel. A szétválasztásnak gyakorlati oka van: a tartalmat, a megjelenést és a viselkedést más-más célból és más-más emberek módosítják. Ha a szöveg szerkesztése közben véletlenül elrontanánk az elrendezést, vagy egy színváltoztatás kockáztatná a működést, a rendszer törékeny lenne. A három szerep elkülönítése azt is lehetővé teszi, hogy a böngésző (és a segítő technológia, a kereső) a tartalmat akkor is értelmezni tudja, ha a megjelenés vagy a viselkedés hiányzik.

flowchart LR
    H["HTML: szerkezet és jelentés"] --> O[Használható felület]
    C["CSS: megjelenés"] --> O
    J["JavaScript: viselkedés"] --> O

Az ábra együttműködést mutat, nem azt, hogy mindhárom kötelező minden oldalon. Egy egyszerű dokumentum önmagában HTML-lel is olvasható.

HTML: mit jelent a tartalom?

A HTML leíró nyelv: elemekkel jelöli, hogy a szöveg melyik része cím, bekezdés, lista, hivatkozás, gomb vagy űrlap. A böngésző ebből építi fel a dokumentumot. A HTML nem a betűk színét vagy a képernyőn elfoglalt pontos helyét írja le, hanem azt, hogy mi micsoda.

Egy kurzusoldal váza a Kurzuspontban:

<main>
  <h1>Webprogramozás 1.</h1>
  <p>A kurzus a web működésének alapjait tárgyalja.</p>
  <a href="/jelentkezes">Jelentkezés</a>
</main>

A main a fő tartalmat, a h1 a főcímet, a p a bekezdést, az a a hivatkozást jelöli. Az elemek jelentése nem csak a látó olvasónak hasznos: a böngésző, a keresőmotor és a képernyőolvasó is támaszkodik rá. Erről a 9. fejezet részletesen szól.

CSS: hogyan jelenjen meg?

A CSS (Cascading Style Sheets, magyarul „lépcsőzetes stíluslapok”) szabályokkal írja le a megjelenést: színt, betűméretet, térközt, elrendezést, és azt is, hogyan alkalmazkodjon a különböző kijelzőkhöz.

main { max-width: 48rem; margin: auto; }
h1   { color: #17365d; }

Egy szabály szelektorból (mire vonatkozik) és deklarációkból (mit állít be) áll. Az elnevezésben szereplő „lépcsőzetesség” azt jelenti, hogy ha több szabály vonatkozik ugyanarra az elemre, a böngésző meghatározott szabályok (specificitás, sorrend, öröklés) szerint dönti el, melyik érvényesül. A CSS nem puszta díszítés: az olvasható sorköz, a megfelelő kontraszt és a keskeny képernyőn is használható elrendezés azt döntik el, hogy az információ használható-e.

JavaScript: hogyan reagáljon a felület?

A JavaScript programozási nyelv. A böngészőben futó kód figyelhet felhasználói eseményeket (kattintás, billentyű), módosíthatja a dokumentumot, és új adatot kérhet a szervertől. A kurzuskereső például szűréskor frissítheti a találati listát anélkül, hogy új oldalt töltene be.

Egy kis példa: a találati lista elemeinek elrejtése, ha nem egyezik a beírt szöveggel.

const mezo = document.querySelector("#kereso");
mezo.addEventListener("input", () => {
  const szoveg = mezo.value.toLowerCase();
  for (const sor of document.querySelectorAll(".kurzus")) {
    sor.hidden = !sor.textContent.toLowerCase().includes(szoveg);
  }
});

A kódot böngésző nélkül nem tudjuk lefuttatni (a document objektum a böngésző része). A szintaxisát ellenőriztük, de a viselkedését nem futtattuk; a kód célja a szerep szemléltetése.

Fokozatos fejlesztés

A három szerep természetes sorrendet ad: a tartalom HTML-ben, a megjelenés CSS-ben, a kényelmi funkciók JavaScriptben épülnek. Ez az elv a progressive enhancement (fokozatos fejlesztés): a legfontosabb tartalom és alapművelet működjön akkor is, ha egy későbbi réteg nem érkezik meg vagy hibás. Részletesen a 3.5 leckében tárgyaljuk.

Ez nem azt jelenti, hogy minden alkalmazás JavaScript nélkül is teljes lehet: egy böngészős ábraszerkesztő más alapra épül, mint egy kurzusleírás. A helyes kérdés: melyik funkcióhoz mi kell, és mi történik, ha az egyik erőforrás nem érkezik meg?

---
type: chapter
children:
  - "[[03-01-html-css-and-javascript.md]]"
  - "[[03-02-document-structure-and-dom.md]]"
  - "[[03-03-browser-rendering.md]]"
  - "[[03-04-loading-web-resources.md]]"
  - "[[03-05-browser-compatibility.md]]"
  - "[[03-06-browser-capabilities.md]]"
---
# Böngésző és webes dokumentum

A harmadik fejezet a kliens oldalára vált. Megmutatja, hogyan osztozik a HTML, a CSS és a JavaScript a webes felület feladatain, hogyan lesz a szerver által küldött szövegből a böngésző dokumentummodellje, és hogyan jelenik meg belőle a képernyőn látható oldal. Szó lesz az erőforrások betöltéséről, a böngészők közötti eltérésekről és a fokozatos fejlesztésről, valamint arról, mit tud és mit nem tud a böngésző programozható környezetként.

- [[03-01-html-css-and-javascript.md]]
- [[03-02-document-structure-and-dom.md]]
- [[03-03-browser-rendering.md]]
- [[03-04-loading-web-resources.md]]
- [[03-05-browser-compatibility.md]]
- [[03-06-browser-capabilities.md]]

Végigvezetett példa: a Kurzuspont kurzusoldala

Követelmény	Melyik réteg?
A kurzus neve főcímként jelenjen meg	HTML (h1)
A „Jelentkezés” egy hivatkozás legyen	HTML (a)
A főcím sötétkék, a szöveg legfeljebb 48 rem széles	CSS
Telefonon egyoszlopos legyen az elrendezés	CSS
Gépelés közben szűrje a kurzuslistát	JavaScript
Jelentkezés előtt ellenőrizze a férőhelyet	Szerver (a JavaScript csak jelezhet)

Az utolsó sor azt mutatja, hogy a szabályok védelme nem a három böngészős réteg feladata.

Gyakori tévhitek

Állítás	Pontosítás
„A HTML csak a kinézet vázlata.”	A szerkezet mellett az elemek jelentését is megadja.
„A CSS csak díszítés.”	Az olvashatóságot és az alkalmazkodó elrendezést is meghatározza.
„Minden modern oldalnak sok JavaScript kell.”	A viselkedés mértékét a feladat határozza meg.
„A kliensoldali ellenőrzés elég.”	A fontos szabályokat a szervernek is ellenőriznie kell.
„A HTML programozási nyelv.”	Jelölőnyelv: szerkezetet ír le, nem utasításokat.

Röviden

• A HTML a szerkezetet és a jelentést, a CSS a megjelenést, a JavaScript a viselkedést adja.
• A három szerep szétválasztása teszi karbantarthatóvá és sokféle környezetben értelmezhetővé a felületet.
• A CSS szabályai szelektorból és deklarációkból állnak; több szabály ütközésekor meghatározott sorrend dönt.
• A kliensoldali ellenőrzés nem védelem: a szabályokat a szerveren is érvényesíteni kell.
• A fokozatos fejlesztés az alapot védi: tartalom először, kényelem később.

Ellenőrző kérdések

1. Melyik réteghez tartozik: egy szöveg címsor-e, vagy milyen színű?
2. Mit jelent a CSS nevében a „lépcsőzetes” szó?
3. Miért nem elég a jelentkezés előfeltételét JavaScriptben ellenőrizni?
4. Mit jelent az, hogy egy oldal fokozatosan fejleszthető?

Tanulási források

• Basic HTML syntax (MDN) — HTML-alapok angolul.
• Document Object Model (MDN) — hogyan éri el a JavaScript a dokumentumot.