Web-fejlesztés 2.

HTML programozás, DOM

Visnovitz Márton
egyetemi tanársegéd
visnovitz.marton@inf.elte.hu

@elte-fi/courses-tt-webprog

Ismétlés

Ismétlés

  • JavaScript nyelvi alapok
  • Programozott grafika (rajz, animáció, játék)
  • HTML elemek programozása
  • Kitekintés a szerveroldali programozás világába

Felületi elemek programozása

Programozás a böngészőben

Eddig: a canvas HTML elem programozása a Canvas API segítségével

Most: tetszőleges HTML elem programozása a DOM API segítségével

Dokumentum Objektum Modell

  • HTML és XML dokumentumok programozási felülete
  • Szabványos interfész fa struktúra alapú hierarchiához
  • Gyökérelem: document
  • Csomópontok: dokumentum, elem, attribútum, szöveg

DOM a böngészőben

  • HTML elemek belső ábrázolása
  • HTML elemeknek megfelelő JS objektumok hierarchiája

Dokumentum Objektum Modell (DOM)

A forrás és a DOM eltérhet egymástól.

Dokumentum Objektum Modell (DOM)

  • Programozási interfész (a felület felé)
  • Bemeneti-kimeneti interfész

DOM Core

  • csomópontok fája
  • ábrázolás és műveletek

HTML DOM

  • HTML elemek fája

Szöveges csomópontok

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>Lorem ipsum.</p>
    <p class="active">
      Dolor sit amet.
    </p>
  </body>
</html>
┣ DOCTYPE: html
┣ HTML
┣━━ HEAD
┣━━━━ #text:
┣━━━━ META charset="utf-8"
┣━━━━ #text:
┣━━━━ TITLE
┣━━━━ #text:
┣━━ #text:
┣━━ BODY
┣━━━━ #text:
┣━━━━ P
┣━━━━━━ #text: Lorem ipsum.
┣━━━━ #text:
┣━━━━ P class="active"
┣━━━━━━ #text: Dolor sit amet.
┣━━━━ #text:
┗━━ #text:

Műveletcsoportok

  • Elemek kiválasztása
  • Szerkezet bejárása
  • Szerkezet módosítása
    • attribútumok
    • új elem/attribútum létrehozása
    • módosítás
    • törlés

Elem(ek) kiválasztása

Elem(ek) kiválasztása

CSS szelektorral:

Egy elem: document.querySelector(sel)
Több elem: document.querySelectorAll(sel) 
Name:
<input id="name" value="Luke">
<button>Click me!</button>

<script>
  console.log( document.querySelector("#name") );
  console.log( document.querySelectorAll("form > *") );
</script>

CSS szelektorok

névvel button
azonosítóval #navbar
stílusosztállyal .important
attribútummal [name=password]
univerzális *
kombinálva input.error[type=text]
közvetlen gyerek form >input
leszármazott #wrapper div
következő testvér ul + p
utána jövő testvérek ul ~ p

Több elem kiválasztása

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
const listItems = document.querySelectorAll("ul > li");

// Array-like object (NodeList)
for (const li of listItems) { /*...*/ } // OK
listItems.map(li => /*...*/);           // Wrong: not an array

// Transforming to array
const listItemsArray = Array.from(listItems); // OK
listItemsArray.map(li => /*...*/);            // OK

Kiválasztás leszármazottak közül

  • elem.querySelector(sel)
  • elem.querySelectorAll(sel)
<div class="first">
  <span>Apple</span>
</div>
<div class="second">
  <span>Pear</span>
</div>
const secondDiv = document.querySelector("div.second");
const spanInSecondDiv = ✒>secondDiv<✒.querySelector("span");

DOM elem tulajdonságai és metódusai

  • Szabvány
  • Dokumentáció
  • Analóg módszer (HTML, az esetek 80%-ban OK)
  • Felfedező módszer (fejlesztői eszköztár, óvatosan)

Analóg módszer

  • “camelCase” átírási mód
  • Tulajdonságok
HTML attribútum DOM tulajdonság
type type
value value
readonly readOnly
maxlength maxLength

További fontosabb tulajdonságok

  • innerHTML, innerText: az elem nyitó- és záróelem közötti HTML vagy szöveg
<p>This is a <span>text</span></p>
const p = document.querySelector("p");
// Reading
p.innerHTML; // "This is a <span>text</span>"
p.innerText; // "This is a text"
// Writing
p.innerHTML = "This is a <strong>new</strong> text";

Felületi elemek programozása (példa)

Példa

  • Feladat
    • Bekérni a nevet, pl. “Senki bácsi”
    • Kiírni: “Hello, Senki bácsi!”
  • Űrlap
    • Gomb lenyomása
    • Érték kiolvasása
    • Eredmény megjelenítése

Megoldás lépései

  • Reagálni a gomb lenyomására.
  • Kiolvasni a szöveges beviteli mező értékét (beolvasás).
  • Előállítani a bemenet alapján a kimenetet, azaz az üdvözlő szöveget (feldolgozás).
  • Megjeleníteni az üdvözlő szöveget (kiírás).

Name: 

Name: <input type="text" id="name">
<button id="hello">Say hello!</button>
<br>
<span id="output"></span>

Megoldás lépései (1)

  • Reagálni a gomb lenyomására.
  • Kiolvasni a szöveges beviteli mező értékét (beolvasás).
  • Előállítani a bemenet alapján a kimenetet, azaz az üdvözlő szöveget (feldolgozás).
  • Megjeleníteni az üdvözlő szöveget (kiírás).
function greet(name) {
  return `Hello, ${name}!`;
}

Felhasználói felület

  • Interaktivitás
    • adatok megadása (beolvasás)
    • információ megjelenítése (kiírás)
  • Elemei
    • HTML: oldal szerkezetének leírása
    • CSS: megjelenés, stílus
    • JavaScript: program a felület működtetésére
  • → INTERFÉSZ A HTML ELEMEKHEZ

Megoldás lépései (2)

  • Reagálni a gomb lenyomására.
  • Kiolvasni a szöveges beviteli mező értékét (beolvasás).
  • Előállítani a bemenet alapján a kimenetet, azaz az üdvözlő szöveget (feldolgozás).
  • Megjeleníteni az üdvözlő szöveget (kiírás).
// Reading
const input = document.querySelector('#name');
const name = input✒>.value<✒;
// Writing
const output = document.querySelector('#output');
output✒>.innerHTML<✒ = greet(name);

Eseménykezelés elemeken

Eddig: globális eseménykezelés, nincs elemhez rendelve

Most: egy adott elemen történő eseménykezelés

Eseménykezelés

  1. Az eseményt kiváltó elem (pl. egy gomb)
  2. Az esemény típusa (pl. kattintás)
  3. Az eseményt kezelő függvény

elem.addEventListener("eventType", eventHandler)

const button = document.querySelector("button");

function handleButtonClick() {
  console.log("clicked");
}

✒>button<✒.addEventListener("click", handleButtonClick);

Megoldás lépései (3)

Name: <input type="text" id="name">
<button id="hello">Say hello!</button>
<br>
<span id="output"></span>
function greet(name) {
  return `Hello ${name}!`;
}

const input = document.querySelector("#name");
const output = document.querySelector("#output");
const hello = document.querySelector("#hello");

function handleHelloClick() {
  const name = input.value;
  const greeting = greet(name);
  output.innerHTML = greeting;
}

hello.addEventListener("click", handleHelloClick);

Megoldás lépései (3)

  • Reagálni a gomb lenyomására.
  • Kiolvasni a szöveges beviteli mező értékét (beolvasás).
  • Előállítani a bemenet alapján a kimenetet, azaz az üdvözlő szöveget (feldolgozás).
  • Megjeleníteni az üdvözlő szöveget (kiírás).

A DOM mint I/O

A DOM mint I/O

  • A felhasználó a felhasználói felületen keresztül lép kapcsolatba a programmal
  • A program számára a DOM az I/O
// Typical JavaScript program:

// Reading (from DOM)
// Processing (independent from I/O)
// Writing (to DOM)

A DOM mint I/O

  • Beolvasás: DOM objektum tulajdonságának lekérdezése
  • Kiírás: DOM objektum tulajdonságának módosítása
<!-- Reading -->
<input type="checkbox" id="accept" checked>
<script>
  const elfogad = document.querySelector("#accept").checked;
</script>

<!-- Writing -->
<img src="" id="image">
<script>
  const url = "http://images.io/example.png";
  const image = document.querySelector("#image");
  image.src = url;
</script>

Példa DOM I/O

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
Maiden name: <input id="maidenName">
<script>
  // Reading
  const femaleRadio = 
    document.querySelector("[name=gender][value=female]");
  const isFemale = famaleRadio.checked;
  // Writing
  document.querySelector("#maidenName").hidden = !isFemale;
</script>

Összefoglalás

  • DOM a felhasználói felület programozási interfésze
  • Elemek kiválasztása:
    document.querySelector("selector")
  • Alap eseménykezelés:
    elem.addEventListener("click", handleElemClick)
  • Elem tulajdonságai: analóg módszer (pl. value)
  • Elem tartalma: innerHTML, innerText