Lekce 2 - První objektová aplikace v JavaScriptu

V minulé lekci, Úvod do objektově orientovaného programování v JavaScriptu, jsme si vysvětlili, proč OOP vzniklo a nakousli, jak OOP v JavaScriptu vypadá.

V dnešním tutoriálu OOP v JavaScriptu se budeme věnovat tomu, jak OOP funguje a vytvoříme si svou první objektovou aplikaci v JavaScriptu.

Jak OOP funguje

OOP nám umožňuje nasimulovat realitu tak, jak ji jsme zvyklí vnímat. Můžeme tedy říci, že se odpoutáváme od toho, jak program vidí počítač (stroj) a píšeme program spíše z pohledu programátora (člověka). Jako jsme tehdy nahradili assembler lidsky čitelnými matematickými zápisy, nyní jdeme ještě dál a nahradíme i ty. Jde tedy o určitou úroveň abstrakce nad programem. To má značné výhody už jen v tom, že je to pro nás přirozenější a přehlednější.

Základní jednotkou je objekt, který odpovídá nějakému objektu z reálného světa (například objekt clovek nebo databaze):

Objekt má své vlastnosti a metody.

Vlastnosti objektu

Vlastnosti objektu jsou data, která uchovává (například u člověka jmeno a vek, u databáze heslo). Jedná se vlastně o proměnné, se kterými jsme již stokrát pracovali. Někdy o nich hovoříme jako o vnitřním stavu objektu. Vlastnost na rozdíl od proměnných, které jsme používali dříve, patří nějakému objektu.

Metody objektu

Metody jsou schopnosti, které umí objekt vykonávat, jsou tedy jeho funkcemi. U člověka by to mohly být metody: jdiDoPrace(), pozdrav() nebo mrkni(). U databáze pridejZaznam() nebo vyhledej(). Metody mohou mít parametry a mohou také vracet nějakou hodnotu. Od funkcí se liší tím, že metoda patří objektu, zatímco funkce nepatří nikam (to je také problém neobjektového kódu):

Metody velmi dobře známe, používali jsme například metodu write() na objektu document. I document je vlastně objekt, který reprezentuje v realitě nějaký dokument. Můžeme si jednoduše představit, že jednáme s dokumentem, něco mu přikazovat nebo na něm něco nastavovat. Obsahuje metody, které dokument umí vykonávat (vypisování, vybírání elementů, nahrazování...) a má také nějaké vlastnosti. Například vlastnost title, která obsahuje jeho titulek.

Ve starších jazycích funkce nepatřily objektům, ale volně se nacházely v modulech (jednotkách). Místo text.split() bychom tedy postaru psali split(text). Nevýhodou samozřejmě bylo zejména to, že funkce split() tehdy nikam nepatřila. Nebyl způsob, jak si vyvolat seznam toho, co se s řetězcem dá dělat a v kódu byl nepořádek. Navíc jsme nemohli mít dvě metody se stejným názvem, v OOP můžeme mít uzivatel.vymaz() a clanek.vymaz(). To je velmi přehledné a jednoduché, ve strukturovaném programu bychom museli psát: vymaz_uzivatele(uzivatel) a vymaz_clanek(clanek). Takovýchto hloupých funkcí bychom museli mít někde rozházených tisíce. Pokud vám to připomíná jazyk PHP, máte pravdu. PHP je v tomto opravdu nepřívětivé a to z toho důvodu, že jeho návrh je starý. Sice se časem plně přeorientovalo na objekty, ale jeho základy se již nezmění.

Prototypy a třídy v JavaScriptu

JavaScript prošel v roce 2015 velmi zásadními změnami. Jednou z nich je přidání moderního způsobu vytváření objektů pomocí takzvaných tříd. Tento způsob je také výrazně jednodušší, a proto si právě na něm OOP vysvětlíme. OOP je již sám o sobě pokročilý koncept a není důvod, proč si výuku neusnadnit.

Třídy v JavaScriptu fungují jako takzvaný syntaktický cukr. To znamená, že umožňují programátorům psát jednodušší a srozumitelnější kód, ale vnitřně jsou příkazy přepisovány na práci s takzvanými prototypy. Ty byly v minulosti jediným rozumným způsobem, jak s objekty v JavaScriptu pracovat. Abychom dokázali upravovat starší zdrojové kódy a pochopili jak OOP v JavaScriptu funguje uvnitř, samozřejmě si v kurzu dále i prototypy podrobně vysvětlíme. Nyní však zpět ke třídám.

Třída

Abychom vytvořili nějaký objekt, musíme si nejprve vytvořit takzvanou třídu. Třída je vzor, podle kterého se objekty vytváří. Definuje jejich vlastnosti a metody.

Objekt, který se vytvoří podle třídy, se nazývá instance. Instance mají stejné rozhraní jako třída, podle které se vytváří, ale navzájem se liší svými daty (vlastnostmi).

Rozhraním se zde rozumí souhrn metod a vlastností, které jsou definovány ve třídě a které lze u každé instance této třídy použít. V OOP může pojem rozhraní také označovat speciální typ třídy interface, která definuje pouze metody bez jejich implementace. JavaScript sice nativně interface nepodporuje, ale podobné funkce lze dosáhnout například pomocí TypeScriptu.

Mějme například třídu Clovek a od ní si vytvoříme instance karel a josef. Obě instance mají jistě ty samé vlastnosti jako třída (například jmeno a vek) a metody (jdiDoPrace() a pozdrav()), ale hodnoty v nich se liší (první instance má ve vlastnosti jmeno hodnotu "Karel" a ve vek 22, druhá "Josef" a 45):

Komunikace mezi objekty probíhá pomocí předávání zpráv, díky čemuž je syntaxe přehledná. Zpráva obvykle vypadá takto: příjemce.názevMetody(parametry). Například karel.pozdrav(sousedka) by mohl způsobit, že instance karel pozdraví instanci sousedka.

První objektová aplikace

Na začátku kurzu Základní konstrukce jazyka JavaScript jsme si vytvořili skript Hello world. Ten do stránky vypsal text "Ahoj ITnetwork". Udělejme si nyní podobný program jako úvod do objektově orientovaného programování. Naprogramujme si Hello object world!

Vytvořme si v počítači složku ahoj_oop/ a v ní podsložku js/ na javascriptové soubory.

Třída Zdravic

Jak jsme si vysvětlili, každou akci bude mít odteď na starosti nějaký objekt. Tomuto rozdělení logiky do objektů se někdy říká také rozdělení odpovědnosti. Za každou část aplikace je odpovědný jiný objekt a ten je definovaný v jiném souboru.

Pro pozdravení si vytvoříme objekt zdravic a jak již víme, potřebujeme k tomu třídu Zdravic. Třídy pojmenováváme pomocí PascalCase, první písmeno je velké, aby se poznalo, že se jedná o vzor. V názvech tříd samozřejmě nepoužíváme diakritiku, stejně jako v názvech identifikátorů obecně. Jednotlivé instance, vytvořeného zdraviče, poté již pojmenováváme pomocí camelCase, tedy s malým počátečním písmenem.

Ve složce js/ si vytvoříme soubor Zdravic.js. Jeho obsah bude následující:

'use strict';

class Zdravic {


}

Kód si popišme:

• Pomocí 'use strict' říkáme, že chceme, aby se používal modernější typ kontroly zdrojového kódu. JavaScript nás tak upozorní na mnohem více chyb a podivností v našem kódu, které by byly ve starších verzích ignorovány. Tento příkaz budeme používat na začátku svých souborů, ale nebudeme jej psát nikam, kde se nalézá cizí zdrojový kód. Ten by totiž mohl být staršího data a tato kontrola by mohla zabránit jeho spuštění.
• Blok class definuje naši třídu, tedy vzor pro vytvoření objektu nebo objektů typu Zdravic.

Nyní do zdraviče přidáme metodu pro pozdravení. To uděláme podobně, jako když deklarujeme funkci. Naše zdravící metoda nebude mít žádné vstupní parametry ani návratovou hodnotu:

'use strict';

class Zdravic {

    pozdrav() {
        document.write("Ahoj OOP!");
    }

}

Zde jsme prozatím skončili.

Soubor obsluha.js

Nyní si vytvoříme instanci třídy Zdravic. Bude to tedy ten objekt zdravic, se kterým budeme pracovat. Objekty se ukládají do proměnných. Instance má zpravidla název třídy, jen má první písmeno malé. Deklarujme si proměnnou zdravic a následně v ní založme novou instanci třídy Zdravic. Tu necháme rovnou pozdravit.

Ve složce js/ vytvoříme nový soubor s názvem obsluha.js a do něj vložíme následující kód:

'use strict';

const zdravic = new Zdravic();
zdravic.pozdrav();

Všimněme si, že:

• Novou instanci vytváříme pomocí klíčového slova new, za které uvedeme název třídy, ze které instanci vytváříme. Proč za ním píšeme závorky si vysvětlíme dále v kurzu.
• Když chceme, aby zdravič pozdravil, zavoláme metodu pozdrav() na jeho instanci pomocí operátoru tečky ..

Klíčové slovo const

K uložení instance jsme použili klíčové slovo const. V kurzu Základní konstrukce jazyka JavaScript jsme proměnné vytvářeli zejména pomocí let. Protože jsme již pokročilí, budeme se snažit proměnné, které se nemění, deklarovat pomocí klíčového slova const. JavaScript nám poté sám ohlídá, aby se jejich hodnota nikdy nezměnila. A my v této proměnné již nikdy nebudeme chtít mít uložené nic jiného než tento zdravič.

Častým omylem je, že si lidé myslí, že objekt uložený v proměnné založené pomocí const je neměnný. Kdyby měl zdravič nějaké vlastnosti, mohli bychom je jednoduše změnit. Nemůžeme pouze do proměnné zdravic již přiřadit žádný jiný objekt.

Soubor index.html

Vše máme hotové a naše skripty stačí již jen načíst. Proto vytvoříme v kořenové složce projektu soubor index.html s následujícím obsahem:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="UTF-8">
        <title>Zdravič</title>
    </head>
    <body>
        <script src="js/Zdravic.js"></script>
        <script src="js/obsluha.js"></script>
    </body>
</html>

Kód je triviální a v podstatě jen načte oba naše javascriptové soubory:

• Všimněme si, že nejprve načítáme třídy. Kdybychom se totiž pokusili vytvořit instanci třídy, kterou JavaScript ještě nenačetl a tudíž ji nezná, skript by skončil s chybou. Až budeme mít v aplikaci více tříd, které se budou navzájem používat, budeme je muset načítat v takovém pořadí, aby se nikdy nestalo, že JavaScript nějakou třídu nebude znát.
• Skripty načítáme až na konci body. To proto, aby se provedly až po načtení stránky. Toto je v JavaScriptu základní praktika, která by nás určitě neměla překvapit. Pokud bychom chtěli načítat skripty v hlavičce, museli bychom v kódu reagovat na událost načtení stránky.

Dnešní lekci zakončíme pohledem na naši první fungující objektovou aplikaci:

Je důležité, abychom si uvědomili, že nyní je to objekt, kdo má na sobě danou funkci.

V další lekci, Vlastnosti objektů a konstruktory v JavaScriptu, si vytvoříme svůj první pořádný objekt.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.