NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Lekce 4 - Implementace metod v JavaScriptu Nové

Předchozí
Další

V minulé lekci, Vlastnosti objektů a konstruktory v JavaScriptu, jsme si vytvořili svůj první pořádný objekt, kterým byla firma.

V tomto tutoriálu objektově orientovaného programování v JavaScriptu se budeme věnovat tvoření vlastních metod. Již umíme definovat vlastnosti i vytvářet konstruktory pro inicializaci těchto vlastností na počáteční hodnoty.

Tvorba metod v JavaScriptu

Pro větší interaktivitu pojďme naši třídu Firma rozšířit o několik klasických metod i překrytou metodu toString() a následně přidat do firmy zaměstnance.

Výpis názvu a sídla

Vytvoříme metodu na vypsání jména naší firmy a jejího sídla. Vyzkoušíme si tak, že k vlastnostem instance můžeme ve třídě jednoduše přistupovat. Do třídy Firma přidáme vypisovací metodu vypisInfoOFirme(). Nová podoba třídy může být následující:

class Firma {
    nazev;
    sidlo;
    zamestnanci = [];

    constructor(nazev, sidlo) {
        this.nazev = nazev;
        this.sidlo = sidlo;
    }

    vypisInfoOFirme() {
        document.body.innerHTML += "Firma " + this.nazev + " sídlí v " + this.sidlo;
    }

}

Soubor obsluha.js upravíme a metodu v něm zavoláme. Soubor nyní vypadá takto:

'use strict';

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
microsoft.vypisInfoOFirme();

Naše stránka pak bude vypadat takto:

Tvoje stránka
localhost

Vypadá to, že vše funguje velmi dobře :)

Pokud však chceme v JavaScriptu získat textovou reprezentaci objektu, tedy jeho textový výpis, obvykle k tomu takto vlastní metodu nevytváříme. Použijeme k tomu totiž již existující metodu toString(). Rovněž náš způsob sestavení textu je poněkud nešťastný. Musíme vždy ukončit textový řetězec a poté připojit další. To může být zdrojem chyb. Použijme místo toho radši jiný způsob vkládání hodnot proměnných do řetězců, a to pomocí interpolace řetězce, se kterým jsme se obeznámili v lekci Textové řetězce v JavaScriptu.

Přepsání metody toString()

Metodu toString() automaticky obsahuje každý objekt, tedy i naše instance firmy. Zkusme si schválně v souboru obsluha.js vypsat hodnotu, kterou nám tato metoda na firmě vrátí:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft.toString();

Výsledek:

Tvoje stránka
localhost

Vidíme, že výchozí textovou reprezentací objektu v JavaScriptu je nicneříkající řetězec [object Object]. V naší třídě Firma si však můžeme vytvořit vlastní implementaci metody toString(), takzvaně ji přepsat (někdy se také říká překrýt), a vracet v ní smysluplnější reprezentaci firmy.

K přepisování metod se ještě jednou vrátíme v lekci Dědičnost a polymorfismus.

Odeberme tedy naši metodu vypisInfoOFirme() a nahraďme ji metodou toString(). Využijme zároveň i interpolaci řetězce pro sestavení textové reprezentace firmy:

toString() {
    return `Firma ${this.nazev} sídlí v ${this.sidlo}`;
}

Když si zobrazíme naši stránku, uvidíme opět očekávaný výpis:

Tvoje stránka
localhost

Hlavní výhodou nyní je, že v souboru obsluha.js metodu toString() dokonce ani nemusíme vůbec volat. Operátoru += stačí předat přímo náš objekt, na němž si operátor metodu toString() zavolá sám:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft;

Nikdy bychom si neměli dělat vlastní metodu, například něco jako náš vypisInfoOFirme(), když máme v JavaScriptu připravenou cestu, jak toto řešit.

Správa zaměstnanců

Dále do třídy přidáme metody na vytváření zaměstnanců a na jejich výpis.

Jelikož budeme pracovat se zaměstnanci, vytvoříme si pro ně novou třídu Zamestnanec v souboru js/Zamestnanec.js, rovnou i s konstruktorem a atributy:

class Zamestnanec {
    jmeno;
    vek;
    pozice;

    constructor(jmeno, vek, pozice) {
        this.jmeno = jmeno;
        this.vek = vek;
        this.pozice = pozice;
    }
}

Soubor s třídou si nezapomeňme opět naimportovat v index.html v tomto pořadí:

<body>
    <script src="js/Zamestnanec.js"></script>
    <script src="js/Firma.js"></script>
    <script src="js/obsluha.js"></script>
</body>

Vytváření zaměstnanců

Pro vytváření zaměstnanců budeme potřebovat získat vstup od uživatele. Jelikož s objekty začínáme, vyhneme se zatím složitému uživatelskému rozhraní (částem aplikace, které interagují s uživatelem pro získání vstupů jako jsou tlačítka, menu, vizuální prvky a další) a použijeme funkci prompt(), která nám pro náš příklad bude stačit.

Nevýhodou dialogového okna prompt() je, že umožňuje zadání pouze jedné hodnoty a nenabízí možnost přizpůsobení. Uživatelsky přívětivějším řešením by bylo si vytvořit vlastní dialogové okno s plnohodnotným formulářem. To je však nad rámec této lekce.

Nová metoda pridejZamestnance() třídy Firma bude vypadat takto:

pridejZamestnance() {
    const jmeno = prompt("Zadej jméno zaměstnance");
    const vek = prompt("Zadej věk");
    const pozice = prompt("Zadej pracovní pozici");

    const zamestnanec = new Zamestnanec(jmeno, vek, pozice);
    this.zamestnanci.push(zamestnanec); // Přidáme nového zaměstnance do pole
}

Na prvních třech řádcích od uživatele načítáme jméno, věk a pracovní pozici nového zaměstnance. Toho dále vytváříme a ukládáme jej do proměnné zamestnanec. Do pole zamestnanci jej přidáváme pomocí metody push().

V souboru obsluha.js naši novou metodu pridejZamestnance() zavoláme:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft;

microsoft.pridejZamestnance();

Noví zaměstnanci se zatím nikam nevypisují, pojďme to napravit.

Výpis zaměstnanců

Do třídy Firma přidáme poslední metodu vypisZamestnance(), která do stránky vypíše HTML seznam našich zaměstnanců. Vypadat bude takto:

vypisZamestnance() {
    document.body.innerHTML += "<h2>Zaměstnanci</h2>";
    const seznam = document.createElement("ul");

    for (const zamestnanec of this.zamestnanci) {
        seznam.innerHTML += `
            <li>
                <h3>${zamestnanec.jmeno}</h3>
                <dl>
                    <dt>Věk:</dt>
                    <dd>${zamestnanec.vek}</dd>
                    <dt>Pozice:</dt>
                    <dd>${zamestnanec.pozice}</dd>
                </dl>
            </li>`;
    }

    document.body.appendChild(seznam);
}

Nejprve na stránku vypisujeme nadpis Zaměstnanci. Následně sestavujeme samotný seznam jako element typu <ul>, tedy nečíslovaný seznam. Procházíme naše pole zaměstnanců cyklem a informace každého zaměstnance vkládáme jako odrážky do seznamu. Jméno zaměstnance vypisujeme do nadpisu a zbylé vlastnosti do seznamu typu <dl> (Definition List), který se skvěle hodí pro zobrazení dat tvaru klíč-hodnota. Nakonec náš nečíslovaný seznam vkládáme do elementu <body>.

Nyní již stačí metodu vypisZamestnance() zavolat v souboru obsluha.js. Ještě můžeme zavolat podruhé metodu na vytvoření dalšího zaměstnance, abychom viděli, jak bude náš seznam vypadat s více zaměstnanci:

const microsoft = new Firma("Microsoft Corporation", "Redmont, Washington");
document.body.innerHTML += microsoft;

microsoft.pridejZamestnance();
microsoft.pridejZamestnance();

microsoft.vypisZamestnance();

Když si naši stránku zobrazíme v prohlížeči a vyplníme informace o zaměstnancích, bude stránka vypadat takto:

Tvoje stránka
localhost

Shrnutí lekce

Metody dávají objektům chování, takže třída Firma už data nejen uchovává, ale také s nimi pracuje. Pro textový výpis objektu můžeme přepsat metodu toString(), kterou JavaScript použije automaticky při vložení objektu do textu. Třída Zamestnanec reprezentuje jednotlivého zaměstnance. Firma si pomocí metody pridejZamestnance() vytvoří nového zaměstnance jako instanci této třídy a uloží ho do vlastního pole. Metoda vypisZamestnance() pak uložené zaměstnance projde a zobrazí jejich data na stránce.

V následujícím cvičení, Řešené úlohy k 1.-4. lekci OOP v JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

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

Stáhnout

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

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

 

Předchozí článek
Vlastnosti objektů a konstruktory v JavaScriptu
Všechny články v sekci
Objektově orientované programování v JavaScriptu
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 1.-4. lekci OOP v JavaScriptu
Článek pro vás napsal Šimon Raichl
Avatar
Uživatelské hodnocení:
1 hlasů
Autor se věnuje především vývoji v JavaScriptu
Aktivity