2. diel - Prvý objektová aplikácie v JavaScripte

V minulej lekcii, Úvod do objektovo orientovaného programovania v JavaScripte , sme si vysvetlili prečo OOP vzniklo a načali ako OOP v JavaScripte vyzerá. V dnešnom tutoriále sa budeme venovať tomu ako OOP funguje a vytvoríme si svoju prvú objektovú aplikáciu v JavaScripte.

Ako OOP funguje

OOP nám umožňuje nasimulovať realitu tak, ako ju sme zvyknutí vnímať. Môžeme teda povedať, že sa odpútavame od toho, ako program vidí počítač (stroj) a píšeme program skôr z pohľadu programátora (človeka). Ako sme vtedy nahradili assembler ľudsky čitateľnými matematickými zápisy, teraz ideme ešte ďalej a nahradíme aj tie. Ide teda o určitú úroveň abstrakcie nad programom. To má značné výhody už len v tom, že je to pre nás prirodzenejšie a prehľadnejšie.

Základnou jednotkou je objekt, ktorý zodpovedá nejakému objektu z reálneho sveta (napr. Objekt človek alebo databázy).

Objekt má svoje vlastnosti a metódy.

Vlastnosti

Vlastnosti objektu sú dáta, ktoré uchováva (napr. U človeka jmeno a vek, u databázy heslo). Jedná sa vlastne o premenné, s ktorými sme už stokrát pracovali. Niekedy o nich hovoríme ako o vnútornom stave objektu. Vlastnosť na rozdiel od premenných, ktoré sme používali predtým, patrí nejakému objektu.

Metódy

Metódy sú schopnosťami, ktoré vedia objekt vykonávať, teda jeho funkciami. U človeka by to mohli byť metódy: jdiDoPrace(), pozdrav() alebo mrkni(). U databázy pridejZaznam() alebo vyhledej()). Metódy môžu mať parametre a môžu tiež vracať nejakú hodnotu. Od funkcií sa líši tým, že metóda patrí objektu, zatiaľ čo funkcia nepatrí nikam (to je tiež problém neobjektového kódu).

Metódy veľmi dobre poznáme, používali sme napr. Metódu write() na objekte document. Aj document je vlastne objekt, ktorý reprezentuje v realite nejaký dokument. Vidíte, že si môžeme jednoducho predstaviť, že rokujeme s dokumentom, niečo mu prikazovať alebo na ňom niečo nastavovať. Obsahuje metódy, ktoré dokument vedia vykonávať (vypisovanie, vyberanie elementov, nahrádzanie ...) a má tiež nejaké vlastnosti, napr. title, ktorá obsahuje jeho titulok.

V starších jazykoch funkcie nepatrili objektom, ale voľne sa nachádzali v moduloch (jednotkách). Miesto text.split() by sme teda postarom písali split(text). Nevýhodou samozrejme bolo najmä to, že funkcia split() vtedy nikam nepatrila. Nebol spôsob, ako si vyvolať zoznam toho, čo sa s reťazcom dá robiť a v kóde bol neporiadok. Navyše sme nemohli mať 2 metódy s rovnakým názvom, v OOP môžeme mať uzivatel.vymaz() a clanek.vymaz(). To je veľmi prehľadné a jednoduché, v štruktúrovanom programe by sme museli písať: vymaz_uzivatele(uzivatel) a vymaz_clanek(clanek). Takýchto hlúpych funkcií by sme museli mať niekde rozhádzaných tisíce. Ak vám to pripomína jazyk PHP, bohužiaľ máte pravdu. PHP je v tomto naozaj hrozné a to z toho dôvodu, že jeho návrh je starý. Síce sa časom plne preorientovalo na objekty, ale jeho základy sa už nezmení.

Prototypy a triedy

JavaScript prešiel relatívne nedávno, v roku 2015, veľmi zásadnými zmenami. Jednou z nich je pridanie moderného spôsobu vytvárania objektov pomocou tzv. Tried. Tento spôsob je tiež výrazne jednoduchšie a preto si práve na ňom OOP vysvetlíme. OOP je už sám o sebe pokročilý koncept a nie je dôvod prečo si výučbu neuľahčiť.

Triedy v JavaScriptu fungujú ako tzv. Syntaktický cukor. To znamená, že umožňujú programátorom písať jednoduchšie a zrozumiteľnejšie kód, ale vnútorne sú príkazy prepisované na prácu s tzv. Prototypy. Tie boli v minulosti jediným rozumným spôsobom, ako s objektmi v JavaScripte pracovať. Aby sme dokázali upravovať staršie zdrojové kódy a pochopili ako OOP v JS funguje vo vnútri, samozrejme si v kurze ďalej aj prototypy podrobne vysvetlíme. Teraz však späť k triedam.

Trieda

Aby sme vytvorili nejaký objekt, musíme si najprv vytvoriť tzv. Triedu. Trieda je vzor, podľa ktorého sa objekty vytvára. Definuje ich vlastnosti a metódy.

Objekt, ktorý sa vytvorí podľa triedy, sa nazýva inštancia. Instance majú rovnaké rozhranie ako trieda, podľa ktorej sa vytvára, ale navzájom sa líšia svojimi dátami (vlastnosťami). Majme napríklad triedu Clovek a od nej si vytvoríme inštancie karel a josef. Obe inštancie majú iste tie isté vlastnosti ako trieda (napr. jmeno a vek) a metódy (jdiDoPrace() a pozdrav()), ale hodnoty v nich sa líši (prvá inštancia má vo vlastnosti jmeno hodnotu "Karel" a vo vek 22, druhá "Josef" a 45).

Samotné objektovo orientované programovanie pojem objekt vlastne vôbec nepozná, rozlišuje iba triedu a inštanciu. Ak napíšem v článku objekt, mám na mysli inštanciu.

Komunikácia medzi objektmi prebieha pomocou odovzdávania správ, vďaka čomu je syntaxe prehľadná. Správa zvyčajne vyzerá takto: příjemce.názevMetody(parametry). Napr. karel.pozdrav(sousedka) by mohol spôsobiť, že inštancia karel pozdraví inštanciu sousedka.

Prvý objektová aplikácie

Na začiatku kurzu sa základnými konštrukciami jazyka JavaScript sme si vytvorili skript Hello world. Ten do stránky vypísal text "Ahoj ITnetwork". Urobme si teraz podobný program ako úvod do objektovo orientovaného programovania. Naprogramujte si Hello object world!

Vytvorte si nejakú zložku, napr. ahoj_oop, a v nej podpriečinok js na javascriptové súbory.

Zdravic.js

Ako sme si vysvetlili, každú akciu bude mať odteraz na starosti nejaký objekt. Tomuto rozdelenie logiky do objektov sa niekedy hovorí aj rozdelenie zodpovednosti. Za každú časť aplikácie je zodpovedný iný objekt a ten je definovaný v inom súbore.

Pre pozdravenie si vytvoríme objekt zdravic a ako už vieme, potrebujeme k tomu triedu Zdravic. Triedy pomenovávame pomocou PascalCase, prvé písmeno je veľké, aby sa poznalo, že sa jedná o vzor. V názvoch tried samozrejme nepoužívame diakritiku, rovnako ako v názvoch identifikátorov všeobecne. Jednotlivé inštancie, vytvorené Zdravice, potom už pomenovávame pomocou CamelCase, teda s malým začiatočným písmenom.

V priečinku js si vytvoríme súbor Zdravic.js. Jeho obsah bude nasledujúci:

'use strict';

class Zdravic {


}

Kód si popíšme.

• Pomocou 'use strict' hovoríme, že chceme, aby sa používal modernejší typ kontroly zdrojového kódu. JavaScript nás tak upozorní na oveľa viac chýb a všeobecne podivností v našom kódu, ktoré by boli v starších verziách ignorované. Tento príkaz budeme používať na začiatku svojich súborov, ale nebudeme ho písať nikam, kde sa nachádza cudzie zdrojový kód. Ten by totiž mohol byť staršieho dáta a táto kontrola by mohla zabrániť jeho spusteniu.
• Blok class definuje našu triedu, teda vzor pre vytvorenie objektu alebo objektov typu Zdravic.

Teraz do Zdravice pridáme metódu pre pozdravenie, to urobíme podobne ako keď deklarujeme funkciu. Naše Zdravice metóda nebude mať žiadne vstupné parametre ani návratovú hodnotu.

'use strict';

class Zdravic {

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

}

Tu sme zatiaľ skončili.

Obsluha.js

Teraz si vytvoríme inštanciu triedy Zdravic. Bude to teda ten objekt Zdravice, s ktorým budeme pracovať. Objekty sa ukladajú do premenných. Inštancia má spravidla názov triedy, len má prvé písmeno malé. Vyhlásiť si premennú zdravic a následne v nej založme novú inštanciu triedy Zdravic. Tú necháme rovno pozdraviť.

V priečinku js vytvoríme nový súbor s názvom obsluha.js a do neho vložíme nasledujúci kód:

'use strict';

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

Všimnite si, že:

• Novú inštanciu vytvárame pomocou kľúčového slova new, za ktoré uvedieme názov triedy, z ktorej inštanciu vytvárame. Prečo za ním píšeme zátvorky si vysvetlíme ďalej v kurze.
• Keď chceme, aby Zdravice pozdravil, zavoláme metódu pozdrav() na jeho inštanciu pomocou operátora bodka (.).

Kľúčové slovo const

Na uloženie inštancie sme použili kľúčové slovo const. V základnom kurze JavaScripte sme premenné vytvárali najmä pomocou let. Pretože sme už pokročilí, budeme sa snažiť premenné, ktoré sa nemenia, deklarovať pomocou kľúčového slova const. JavaScript nám potom sám postráži, aby sa ich hodnota nikdy nezmenila. A my v tejto premennej už nikdy nebudeme chcieť mať uložené nič iné ako tento Zdravice.

Pozor. Častým omylom je, že si ľudia myslia, že objekt uložený v premennej založené pomocou const je nemenný. Keby mal Zdravice nejaké vlastnosti, mohli by sme ich jednoducho zmeniť, len už do premennej zdravic nemôžeme priradiť žiadny iný objekt.

Index.html

Všetko máme hotové a naše skripty stačí už len načítať. Preto vytvoríme už v koreňovom priečinku projekte súbor index.html s nasledujúcim obsahom:

<!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álne a v podstate len načíta oba naše javascriptové súbory.

• Všimnite si, že najprv načítame triedy. Keby sme sa totiž pokúsili vytvoriť inštanciu triedy, ktorú JavaScript ešte nenačítalo a teda ju nepozná, skript by skončil s chybou. Až budeme mať v aplikácii viac tried, ktoré sa budú navzájom používať, budeme ich musieť načítavať v takom poradí, aby sa nikdy nestalo, že JS nejakú triedu nebude poznať.
• Skripty načítame až na konci body, to preto, aby sa vykonali až je stránka načítaná. Toto je v JavaScripte základná praktika, ktorá by vás určite nemala prekvapiť. Ak by ste chceli načítať skripty v hlavičke, museli by ste v kóde reagovať na udalosť načítanie stránky.

Dnešné lekciu zakončíme pohľadom na našu prvú fungujúce objektovú aplikácii:

Je dôležité, aby sme si uvedomili, že teraz je to objekt, kto má na sebe danú funkciu. Ak vám čokoľvek nefunguje, stiahnite si vzorový projekt v prílohe nižšie a nájdite si chybu.

Čo ďalej objekty v JavaScripte vie si ukážeme zas nabudúce, v lekcii Vlastnosti objektov a konštruktory v JavaScripte .

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.