4. diel - Implementácia metód v JavaScripte Nové

V tomto tutoriále objektovo orientovaného programovania v JavaScripte sa budeme venovať tvoreniu vlastných metód. Už vieme definovať vlastnosti aj vytvárať konštruktory pre inicializáciu týchto vlastností na počiatočné hodnoty. Pre väčšiu interaktivitu poďme našu triedu Firma rozšíriť o niekoľko klasických metód aj prekrytú metódu toString() a následne pridať do firmy zamestnancov.

Výpis názvu a sídla

Vytvoríme metódu na vypísanie mena našej firmy a jej sídla. Vyskúšame si tak, že k vlastnostiam inštancie môžeme v triede jednoducho pristupovať. Do triedy Firma pridáme vypisovaciu metódu vypisInfoOFirme(). Nová podoba triedy môže byť nasledovná:

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;
    }

}

Súbor obsluha.js upravíme a metódu v ňom zavoláme. Súbor teraz vyzerá takto:

'use strict';

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

Naša stránka potom bude vyzerať takto:

Tvoja stránka

localhost

Vyzerá to, že všetko funguje veľmi dobre:)

Pokiaľ však chceme v JavaScripte získať textovú reprezentáciu objektu, teda jeho textový výpis, obvykle k tomu takto vlastnú metódu nevytvárame. Použijeme na to totiž už existujúcu metódu toString(). Rovnako náš spôsob zostavenia textu je trochu nešťastný. Musíme vždy ukončiť textový reťazec a potom pripojiť ďalší. To môže byť zdrojom chýb. Použime namiesto toho radšej iný spôsob vkladania hodnôt premenných do reťazcov, a to pomocou interpolácie reťazca, s ktorým sme sa oboznámili v lekcii Textové reťazce v JavaScripte.

Prepísanie metódy `toString()`

Metódu toString() automaticky obsahuje každý objekt, teda aj naša inštancia firmy. Skúsme si schválne v súbore obsluha.js vypísať hodnotu, ktorú nám táto metóda na firme vráti:

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

Výsledok:

Tvoja stránka

localhost

Vidíme, že predvolenou textovou reprezentáciou objektu v JavaScripte je nič nehovoriaci reťazec [object Object]. V našej triede Firma si však môžeme vytvoriť vlastnú implementáciu metódy toString(), takzvane ju prepísať (niekedy sa tiež hovorí prekryť), a vracať v nej zmysluplnejšiu reprezentáciu firmy.

Na prepisovanie metód sa ešte raz vrátime v lekcii Dedičnosť a polymorfizmus.

Odoberme teda našu metódu vypisInfoOFirme() a nahraďme ju metódou toString(). Využime zároveň aj interpoláciu reťazca na zostavenie textovej reprezentácie firmy:

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

Keď si zobrazíme našu stránku, uvidíme opäť očakávaný výpis:

Tvoja stránka

localhost

Hlavnou výhodou teraz je, že v súbore obsluha.js metódu toString() dokonca ani nemusíme vôbec volať. Operátoru += stačí odovzdať priamo náš objekt, na ktorom si operátor metódu toString() zavolá sám:

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

Nikdy by sme si nemali robiť vlastnú metódu, napríklad niečo ako náš vypisInfoOFirme(), keď máme v JavaScripte pripravenú cestu, ako toto riešiť.

Správa zamestnancov

Ďalej do triedy pridáme metódy na vytváranie zamestnancov a na ich výpis.

Keďže budeme pracovať so zamestnancami, vytvoríme si pre nich novú triedu Zamestnanec v súbore js/Zamestnanec.js, rovno aj s konštruktorom a atribútmi:

class Zamestnanec {
    jmeno;
    vek;
    pozice;

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

Súbor s triedou si nezabudnime opäť naimportovať v index.html v tomto poradí:

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

Vytváranie zamestnancov

Na vytváranie zamestnancov budeme potrebovať získať vstup od užívateľa. Keďže s objektmi začíname, vyhneme sa zatiaľ zložitému užívateľskému rozhraniu (častiam aplikácie, ktoré interagujú s užívateľom na získanie vstupov ako sú tlačidlá, menu, vizuálne prvky a ďalšie) a použijeme funkciu prompt(), ktorá nám pre náš príklad bude stačiť.

Nevýhodou dialógového okna prompt() je, že umožňuje zadanie iba jednej hodnoty a neponúka možnosť prispôsobenia. Užívateľsky prívetivejším riešením by bolo si vytvoriť vlastné dialógové okno s plnohodnotným formulárom. To je však nad rámec tejto lekcie.

Nová metóda pridejZamestnance() triedy Firma bude vyzerať 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 prvých troch riadkoch od používateľa načítame meno, vek a pracovnú pozíciu nového zamestnanca. Toho ďalej vytvárame a ukladáme ho do premennej zamestnanec. Do poľa zamestnanci ho pridávame pomocou metódy push().

V súbore obsluha.js našu novú metódu pridejZamestnance() zavoláme:

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

microsoft.pridejZamestnance();

Noví zamestnanci sa zatiaľ nikam nevypisujú, poďme to napraviť.

Výpis zamestnancov

Do triedy Firma pridáme poslednú metódu vypisZamestnance(), ktorá do stránky vypíše HTML zoznam našich zamestnancov. Vyzerať 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);
}

Najprv na stránku vypisujeme nadpis Zaměstnanci. Následne zostavujeme samotný zoznam ako element typu <ul>, teda nečíslovaný zoznam. Prechádzame naše pole zamestnancov cyklom a informácie každého zamestnanca vkladáme ako odrážky do zoznamu. Meno zamestnanca vypisujeme do nadpisu a zvyšné vlastnosti do zoznamu typu <dl> (Definition List), ktorý sa skvele hodí na zobrazenie dát tvaru kľúč-hodnota. Nakoniec náš nečíslovaný zoznam vkladáme do elementu <body>.

Teraz už stačí metódu vypisZamestnance() zavolať v súbore obsluha.js. Ešte môžeme zavolať druhýkrát metódu na vytvorenie ďalšieho zamestnanca, aby sme videli, ako bude náš zoznam vyzerať s viacerými zamestnancami:

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

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

microsoft.vypisZamestnance();

Keď si našu stránku zobrazíme v prehliadači a vyplníme informácie o zamestnancoch, bude stránka vyzerať takto:

Tvoja stránka

localhost

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 0x (3.22 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Šimon Raichl

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor se věnuje především vývoji v JavaScriptu

Aktivity

Najčastejšie vyhľadávané

4. diel - Implementácia metód v JavaScripte Nové

Výpis názvu a sídla

Prepísanie metódy toString()

Správa zamestnancov

Vytváranie zamestnancov

Výpis zamestnancov

Stiahnuť

Prepísanie metódy `toString()`