JavaScript - lekce 3

Podklady pro tuto lekci si stáhni zde. Stažený ZIP rozbal u sebe na počítači a složku otevři v editoru VS Code.

Funkce

Funkce jsou v programování samostatné bloky kódu, které se spustí tehdy, až jsou zavolány. To nám umožňuje vícekrát použít části kódu, aniž bychom je museli psát znovu. Abychom funkci vytvořili, potřebujeme slovo function, kterým programu řekneme, že teď bude následovat funkce. Funkce mohou mít vstupní hodnoty - argumenty, se kterými následně pracují, a stejně tak mohou i vracet výsledky. Co má funkce vrátit, jí řekneme slovem return. Tomu, co nám funkce vrátí, se říká návratová hodnota.

// Funkce, který má dva argumenty, které spojí do jednoho textového řetězce
// a následně je vrátí jako výsledek, se kterým můžeme pracovat
function spoj(slovoA, slovoB) {
   let vysledek = slovoA + " " + slovoB;
   return vysledek;
}

spoj("Hello", "World"); // volání funkce
let pozdrav = spoj("Ahoj", "Světe"); // návratovou hodnotu můžeme uložit do proměnné
console.log(spoj("Hallo", "Welt")); // nebo ji můžeme vypsat do konzole třeba

Funkce se skládají z několika částí:

• slovo "function", pomocí kterého říkáme, že se jedná o funkci;
• jméno funkce, díky kterému ji můžeme následně volat, kolikrát chceme (jména funkcí jsou proto jedinečná a vyjadřují, co přesně funkce dělá);
• závorky () pro argumenty (mohou být i prázdné);
• složené závorky {}, které značí blok pro tělo funkce - kód, který se vykoná po zavolání funkce.

Události

Události (anglicky events) se spouští na základě různých akcí, které provádíme na webu. Například:

• kliknutí (click) nebo dvojité kliknutí (dblclick);
• najetí myši (mouseenter) nebo odjetí myši (mouseleave);
• zmáčknutí klávesy (keydown) nebo puštění klávesy (keyup);
• načtení (load);
• posun (scroll);
• spousta dalších.

Seznam všech událostí najdete tady. My ale budeme používat jen pár základních.

Důležité je si uvědomit, že události se spouštějí neustále, i když na ně nereagujeme. My chceme reagovat jen na některé vybrané z nich a k tomu nám slouží "posluchače" (anglicky event listener).

Abychom mohli na událost reagovat, musíme získat element, na kterém se spouští, a nastavit mu "posluchače". K tomu nám poslouží metoda addEventListener(), která bere dva argumenty:

typ události;
funkci, která se spustí ihned po vyvolání události.
// Získáme objekt elementu, u kterého chceme reagovat na události
let tlacitko = document.querySelector('.tlacitko');

// Nastavení event listeneru na událost kliknutí na talčítko a
// přiřazení funkce, která na událost bude reagovat
tlacitko.addEventListener('click', spracovatVstup);

function spracovatVstup() {
 // Nějaký kód
}

V případě, že funkci využíváme pouze v jednom event listeneru, můžeme využít anonymní funkci.

Anonymní funkce je funkce, kterou nelze volat z jiného místa v kódu, protože nemá jméno (od toho anonymní). Spouští se pouze při vyvolání události, na kterou reagujeme.

tlacitko.addEventListener('click', function() {
 // Nějaký kód
});

Při reagování na událost JavaScript automaticky předává funkci objekt dané události, který můžeme a nemusíme využít. Pokud ho ale potřebujeme využít, musíme ho předat jako argument anonymní funkci. Standardně se využívá pojmenování event nebo zkráceně e, ale na pojmenování vůbec nezáleží, jen si ho musíte pamatovat.

Nám se bude tento objekt hodit třeba v případě, když budeme zjišťovat, kterou jsme stiskli klávesu.

// Event listener pro událost stisknutí klávesy
// (událost vyvolá stisk kterékoliv klávesy)
window.addEventListener('keydown', function(event) {
 console.log(event.key);
});

Kontrolní otázky

1. Co je hlavní myšlenkou funkcí?
2. Pomocí čeho řekneme funkci, co má být její návratová hodnota?
3. Jaký je rozdíl mezi klasickou a anonymní funkcí?
4. Kterých dvou událostí bychom využili, kdybychom chtěli vytvořit hover efekt?
5. Jak se dostaneme k objektu události, na kterou reagujeme?

‍