5

Reakce na události

Abychom dokázali naši webovou stránku udělat interaktivní, potřebujeme být v JavaScriptu schopní takzvaně reagovat na události. Událost je například stisknutí tlačítka, kliknutí myší, stisknutí klávesy apod. Pro reakce na události budeme používat funkce, proto jsme je tolik procvičovali.

Procedury

Zatím naše vlastní funkce vždy něco počítaly a vracely nějakou hodnotu. Zajímavé je, že funkce nutně nemusí nic vracet. Místo toho, aby funkce něco spočítala, můžeme chtít aby prostě jen provedla nějakou činnost. Například vypsala něco na obrazovku, změnila něco na webové stránce, přehrála animaci apod. Funkcím, které nic nevrací se někdy říká procedury.

Vezměme naši jednoduchou stránku s jedním nadpisem.

<html>
  <body>
    <div id="mytitle">My Very First Webpage</div>
    <div>My new DIV</div>
  </body>

  <script>
    const element = document.querySelector('#mytitle');
    element.textContent = 'New text';
  </script>
</html>

Vyrobme si funkci changeTitle, která vybere ze stránky náš element s nadpisem a nastaví jeho text na zadanou hodnotu.

const changeTitle = (titleText) => {
  const element = document.querySelector('#mytitle');
  element.textContent = titleText;
}

Díky této funkci můžeme vždy nastavit nadpis stránky na jakýkoliv text, se kterým funkci zavoláme. Všimněte si, že funkce opravdu nic nevrací, jen něco udělá a skončí.

Posluchače událostí

Pokud provedeme nějakou akci na naší stránce, například stiskneme klávesu, klikneme myší, klikneme na tlačítko, zascrollujeme apod., JavaScript vytvoří takzvanou událost (anglicky event). Událost je speciální typ hodnoty podobně jako číslo, řetězec, pole nebo funkce, můžeme ji tedy uložit do proměnné nebo poslat nějaké funkci jako vstup. Událost popisuje co se přesně stalo, například jaká klávesa byla zrovna stisknuta, kde na obrazovce bylo kliknuto a spoustu dalších informací.

Pokud chceme na událost nějak zareagovat, tedy spustit nějaký kus kódu v případě, že událost nastane, musíme tento kód zabalit do funkce, která dostane událost jako svůj vstup. Takovým funkcím se říká posluchače událostí (anglicky event listeners).

Mějme například funkci, která ve chvíli kdy nastane nějaká události nastaví nadpis naší stránky na nějakou novou hodnotu hodnotu.

const setTitle = (event) => {
  const element = document.querySelector('#mytitle');
  element.textContent = 'New title';
}

Nyní musíme JavaScriptu říct, že má tuto funkci zavolat například ve chvíli, kdy uživatel klikne na stránku. JavaScript celé stránce říká dokument, takže musíme říct dokumentu, aby nastavil našeho posluchače na událost jménem onclick.

document.addEventListener('onclick', setTitle);

Celá naše stránka pak bude vypadat takto:

<html>
  <body>
    <div id="mytitle">My Very First Webpage</div>
    <div>My new DIV</div>
  </body>

  <script>
    const setTitle = (event) => {
      const element = document.querySelector('#mytitle');
      element.textContent = 'New title';
    };

    document.addEventListener('click', setTitle);
  </script>
</html>

Nemusíme však poslouchat události jen na celém dokumentu. Můžeme například poslouchat kliknutí jen na nějakém elementu. Takto můžeme na stránku přidat například tlačítko a textové políčko.

<html>
  <body>
    <div id="mytitle">My Very First Webpage</div>
    <input type="text" id="name" />
    <button id="greet">Greet</button>
  </body>

  <script>
    const greet = (event) => {
      const nameElm = document.querySelector('#name');
      const titleElm = document.querySelector('#mytitle');
      titleElm.textContent = 'Hello ' + nameElm.value;
    };

    const btnElm = document.querySelector('#greet');
    btnElm.addEventListener('click', greet);
  </script>
</html>

Reagování na stisk klávesy

Událost click samozřejmě není jediná událost, kterou můžete na webové stránce použít. Můžete vyzkoušet například následující událost keydown, která reaguje na stisk klávesy. Tuto událost je dobré připojit na samotný dokument. Číslo sitknuté klávesy najdeme ve vlastnosi keyCode přímo na události, kterou jsme obdrželi v našem posluchači. Například klávesa enter má kód 13.

Můžeme tak například napsat program, který místo na kliknutí změní nadpis stránky na stisk klávesy enter.

const setTitle = (event) => {
  if (event.keyCode === 32) {
    const element = document.querySelector('#mytitle');
    element.textContent = 'New title';
  }
};

document.addEventListener('keydown', setTitle);

Pokud chcete zjistit jaký kód patří jaké klávese, velmi dobrým pomocníkem je tato stránka.

Cvičení

1

Pozdrav

  1. Vytvořte webovou stránku, která při kliknutí na dokument zobrazí jednoduchý pozdrav pomocí funkce alert.
  2. Vytvořte na stránce div s nějakým textem. Změňte stránku tak, aby pozdrav zobrazila nikoliv pomocí alert ale jako text přímo ve vašem divu.
  3. Změňte stránku tak, aby zobrazila pozdrav nikoliv na kliknutí, ale na stisknutí mezerníku.
2

Celsius vs Fahrnheit

Vytvořte webovou stránku s jedním textovým políčkem, jednom tlačítkem a jedním divem pro výslednou zprávu. Uživatel do políčka zadá teplotu ve stupních Fahrnheita a po stisku tlačítka obdrží výsledek ve stupních Celsia.

Postup přepočtu stupňů Fahrnheita na stupně Celsia najdete například na České wikipedii.

3

Ovládání mamuta

Vytvořte stránku, která bude obsahovat jeden div element s id mammoth. V JavaScriptu tomuto element nastavte

  1. Výšku a šířku na 256 pixelů.
  2. Obrázek pozadí na obrázek mamuta.
  3. Pozicování (style.position) na absolute.

Nyní můžete s mamutem začít hýbat po obrazovce. Zkuste například na stisk šipky doprava posunout mamuta o 100px doprava (nastavte vlastnost style.left). Na stisknutí šipky dolů nastavte vlastnost style.top také na 100px.

Pokud si pozici mamuta uložíte do proměnných, například x a y, můžete k těmto proměnným postupně