Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

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

Objekty v objektově orientovaném programování

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

Objekty v objektově orientovaném programování

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

Objekty v objektově orientovaném programování

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ž je stránka načtená. 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:

Your page
localhost

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ěla jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 140x (2.13 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Úvod do objektově orientovaného programování v JavaScriptu
Všechny články v sekci
Objektově orientované programování v JavaScriptu
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
9 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (4)

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
Michal Šmahel:11.4.2019 22:56

Ahoj, než začnu s podrobnějším vysvětlením, uvedu to na pravou míru. Jedná se buď o přístup vložení do hlavičky (<head>) (obvykle na konec) nebo na konec těla (<body>) stránky. Také prozradím, že se doporučuje spíše druhá varianta, tedy zvolit konec tagu <body>.

Oba přístupy v konečném důsledku udělají totéž - načtou daný skript ze souboru, popř. elementu <script>. Liší se však tím, kdy je skript načten.

Umístění do hlavičky
Link na soubor se skriptem nebo přímo element <script> s obsaženým zdrojovým kódem lze umístit do hlavičky (kamkoliv, doporučuje se však spíše nějak ke konci kvůli oddělení od zbytku věcí, které patří výhradně do hlavičky - meta tagy, linky pro napojení CSS souborů a další potřebné věci). Poté však dochází k obecně známému "problému" (ona je to však pouze vlastnost) - když se načte skript (a s tím všechny funkce, chceš-li metody), ještě není načten DOM (Document Object Model). To znamená, že skript ještě nemá k dispozici ani strukturu HTML kódu a logicky k ní proto nemůžeš přistupovat. Toto se dá vyřešit tím, že ve skriptu vyčkáš na načtení DOM (nebo celého obsahu, podle toho, co potřebuješ) - typická implementace je přes akce onload nebo DOMContentLoaded na okně (window).

Zjednodušený příklad implementace:

// Potřebuji počkat, až se vše načte, potom se může pokračovat v načítání skriptu
window.onload = () => {
    // Kód
}

// Stačí mi načtené DOM, obrázky, CSS a další externí zdroje nepotřebuji
document.addEventListener("DOMContentLoaded", () => {
    // Kód
});

Umístění na konec těla
V tomto případě link nebo přímo zdrojový kód v <script> vložíš před </body> (na konec těla). Poté odpadá nevýhoda z minulého řešení. HTML kód se načítá postupně, a když dojde na načtení tvých zdrojových kódů, již je zbytek stránky načten. Nemusíš tedy řešit implementaci akcí, které ti hlídají, zda je již vše načteno - prostě počítáš s tím, že je. Kromě toho je Javascript také oddělen od zbytku provázání na externí soubory (CSS, favicon, různé obrázky pro sdílení, ...) a má své vyhrazené místo jen pro sebe. V tomto případě se ti nestane, že Javascript "hledáš" - vždy je na konci HTML kódu.

Javascript není můj primární jazyk, takže prosím o omluvení stručnosti a menší obsáhlosti mého komentáře. Vím, že jsou tu členové, kteří s Javascriptem pracují o mnoho více a jistě mě rádi doplní.

Odpovědět
11.4.2019 22:56
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Fero M
Člen
Avatar
Fero M:12.6.2019 23:34

Ahoj, nejde mi vůbec spustit kod OOP, ani ze souboru "ahoj_oop.zip".
Kde může být chyba? Nevypisují se žádné chybové hlášky, jen když kód spustim tak se mi objeví jen bílá stránka....

 
Odpovědět
12.6.2019 23:34
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Fero M
David Čápka:8.5.2020 12:18

Protože to musíš nejdřív rozbalit.

Odpovědět
8.5.2020 12:18
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na Fero M
Miroslav Lalík:28.5.2020 15:17

Pro ty kterým tohle nefunguje musíte nejdřív v html souboru načíst script kde se definuje třída a potom až script pro obsluhu.

Odpovědět
28.5.2020 15:17
Všechno jde když znáš ty správný lidi
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Fero M
Milan Turyna:28.5.2020 22:05

Bylo by dobre si zjistit co vlastne OOP je, abys ho mohl provozovat naimportuj tridy a potom ve svem skriptu vytvor instanci. Napriklad

var Player = new Player()
 
Odpovědět
28.5.2020 22:05
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Jedlička:4.6.2020 17:07

Omlouvam se, ze se tak blbe ptam. Pri ukladani souboru musim pouzit pro nazev prvni velke pismeno? Chapu u vytvareni objektu (new Neco).

 
Odpovědět
4.6.2020 17:07
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Jan Jedlička
Milan Turyna:5.6.2020 6:06

Nemusíš, ale můžeš, já to dělám přijde mi to přehlednější. To stejné i u třídy, tam si taky myslím můžeš zvolit jestli začneš velkým nebo malým písmenem.

 
Odpovědět
5.6.2020 6:06
Avatar
Odpovídá na Milan Turyna
Jan Jedlička:5.6.2020 10:13

takze je to hlavne pro prehlednost?

 
Odpovědět
5.6.2020 10:13
Avatar
Milan Turyna
Redaktor
Avatar
Milan Turyna:5.6.2020 10:28

Ano v Javascriptu to je pouze pro přehlednost.

 
Odpovědět
5.6.2020 10:28
Avatar
Rudolf Pecinovský:23.12.2020 10:16

Hrubě nesouhlasím s tvrzením "Samotné objektově orientované programování pojem objekt vlastně vůbec nezná, rozlišuje pouze třídu a instanci." Naopak. V OOP je všechno objekt a třídy jsou pouze objekty, které umějí vytvořit jiné objekty, jež označujeme jako jejich instance. To, že v některých jazycích (např. C++) je třída pouhá abstrakce, a v jiných (např. C#, Groovy, Java, ...) je třída zvláštní objekt, který není ničí instancí, a nejde proto uložit do proměnné, je dáno pouze omezením daných jazyků, ale nemá to vliv na objektově orientované paradigma.

 
Odpovědět
23.12.2020 10:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 11. Zobrazit vše