SLeitgeb/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    Základy JS – functions, events, callbacks

Pokud chceme funkcionalitu webu obohatit o interaktivitu, můžeme v JavaScriptu naslouchat událostem a kódem na ně reagovat. Událostí je dostupných mnoho, nás budou zajímat zejména některé základní, např. "click", "mouseover", "mouseout", "load" nebo "submit".
Některé eventy se vážou jen na některé konkrétní elementy:

"load" event vážeme na objekt window – kontroluje načtení webové stránky
"submit" event vážeme na HTML element <form> – nastane při odeslání formuláře (buďto tlačítkem submit nebo klávesou Enter)
události myši se vážou na konkrétní elementy (např. odkazy nebo celá sekce stránky), podívejte se na návod na javascript.info.

Jak správně připojit JavaScript v HTML

Kód v JavaScriptu můžeme načíst v HTLM různými způsoby:


Skript main.js ve složce js, uložený na stejném počítači jako zdrojové HTML:
<script src="js/main.js"></script>
Tohle řešení používáme nejčastěji.


Skript main.js, uložený na webu example.com:
<script src="https://example.com/js/main.js"></script>
Takhle můžeme načítat např. různé externí knihovny.


Přímo uvnitř HTML v elementu <script>:
<script>
  "use strict";
  console.log("Hello world!");
</script>
Používáme na jednoduché, krátké kousky kódu, pro které by bylo zbytečné vytvářet samostatný soubor.


Jak pracovat s HTML elementy v JavaScriptu

Pokud v kódu manipulujeme s obsahem HTML, je potřeba se ujistit že se náš kód provede až budou všechny prvky ve stránce načtené.
V tomto případě náš kód nebude fungovat, protože se provede ještě než se vůbec začne načítat element <body>:
<!DOCTYPE html>
<html lang="en">
<head>
  <script> <!-- v tomto místě se provede kód -->
  console.log(document.getElementById("first-heading"));
  </script>
</head>

<body> <!-- až tady se začne vykreslovat stránka – dlouho potom co byl náš kód proveden -->
  <h1 id="first-heading">10 JavaScript examples you won't believe!</h1>
</body>
</html>
Eventy, callback funkce

Základy funkcí: http://javascript.info/function-basics
Správně bychom měli stanovit kdy přesně se má náš kód spustit – až bude obsah stránky načtený → událost load. Toho docílíme metodou .addEventListener(...) a tzv. callbackem – funkcí, která se má zavolat až k události dojde:
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
  window.addEventListener("load", function() {
    console.log(document.getElementById("first-heading"));
  });
  </script>
</head>

<body>
  <h1 id="first-heading">10 JavaScript examples you won't believe!</h1>
</body>
</html>
Vytvořili jsme tzv. anonymní funkci – nemá žádné jméno a nemůžeme ji nijak zavolat – o to se stará prohlížeč, počká než se obsah stránky načte a potom funkci sám zavolá.
Pojmenovaná funkce jako callback

Jako callback můžeme použít ale také jméno funkce – funkci si nejdříve nadefinujeme a pojmenujeme a potom se v metodě .addEventListener(...) na ni odkážeme pomocí jejího jména:
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
  function printHeadingName() {
    const HEADING_ELEMENT = document.getElementById("first-heading");

    console.log(HEADING_ELEMENT);
  }

  window.addEventListener("load", printHeadingName);
  </script>
</head>

<body>
  <h1 id="first-heading">10 JavaScript examples you won't believe!</h1>
</body>
</html>
Důležité je, že funkci printHeadingName můžeme definovat i před tím, než element #first-heading existuje – kód funkce se nespustí dokud se funkce nezavolá.
K událostem formuláře si přečtěte:
http://javascript.info/forms-submit