2. előadás

Felületi elemek programozása

Feladat: Kérjünk be egy nevet és köszönjünk!

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

Mit kell csinálnunk?

Feldolgozás

Előállítani a bemenet alapján a kimenetet, azaz az üdvözlő szöveget

function greet(name) {
    return `Hello ${name}!`;
}

Beolvasás

Kiolvasni a szöveges beviteli mező értékét

// Reading
const input = document.querySelector('#name');
const name = input.value;

Kiírás

Megjeleníteni az üdvözlő szöveget

// Writing
const output = document.querySelector('#output');
output.innerHTML = greet(name);

Reakció

Reagálni a gomb lenyomására

hello.addEventListener('click', handleHelloClick);

Teljes megoldás

function greet(name) {
    return `Hello ${name}!`;
}

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

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

hello.addEventListener('click', handleHelloClick);

DOM = dokumentum objektum modell

HTML elemeknek megfelelő JS objektumok hierarchiája

Dokumentáció

CSS szelektorok

Névvel
Azonosítóval (#)
Stílusosztállyal (.)
Attribútummal ([name=password])
Univerzális (*)

document.querySelector(sel)

Szöveg

innerHTML, innerText: az elem nyitó- és záróelem közötti HTML vagy szöveg

value

Eseménykezelés

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

elem.addEventListener('eventType', eventHandler)

Példa

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

button.addEventListener('click', handleButtonClick);

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

DOM, mint IO

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>

Stílus attribútumok

A style tulajdonság beolvasása és módosítása
Mindegyiket tartalmazza és az összes módosítható