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 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ř. objekt člověk nebo databáze).

Objekt má své vlastnosti a metody.

Vlastnosti

Vlastnosti objektu jsou data, která uchovává (např. 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

Metody jsou schopnostmi, které umí objekt vykonávat, 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ř. metodu write() na objektu document. I document je vlastně objekt, který reprezentuje v realitě nějaký dokument. Vidíte, že si můžeme 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ř. 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 2 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, bohužel máte pravdu. PHP je v tomto opravdu hrozné 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

JavaScript prošel relativně nedávno, v roce 2015, velmi zásadními změnami. Jednou z nich je přidání moderního způsobu vytváření objektů pomocí tzv. 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 tzv. 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 tzv. 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 JS 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 tzv. 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). 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ř. 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).

Samotné objektově orientované programování pojem objekt vlastně vůbec nezná, rozlišuje pouze třídu a instanci. Pokud napíši v článku objekt, mám na mysli instanci.

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ř. karel.pozdrav(sousedka) by mohl způsobit, že instance karel pozdraví instanci sousedka.

První objektová aplikace

Na začátku kurzu se základními konstrukcemi 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řte si nějakou složku, např. ahoj_oop, a v ní podsložku js na javascriptové soubory.

Zdravic.js

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é 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 obecně 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.

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ěte 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čka (.).

Klíčové slovo const

K uložení instance jsme použili klíčové slovo const. V základním kurzu JavaScriptu 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č.

Pozor. Č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, pouze již do proměnné zdravic nemůžeme přiřadit žádný jiný objekt.

index.html

Vše máme hotové a naše skripty stačí již jen načíst. Proto vytvoříme již 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ěte 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 JS 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 vás určitě neměla překvapit. Pokud byste chtěli načítat skripty v hlavičce, museli byste 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. Pokud vám cokoli nefunguje, stáhněte si vzorový projekt v příloze níže a najděte si chybu.

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š.