Skúšanie slovíčok v Javascriptu 4 - Listovanie v histórii 1

V predchádzajúcom cvičení, Riešené úlohy k 24. lekcii OOP v JavaScripte, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V prvých troch dieloch sme vytvorili aplikáciu pre skúšanie slovíčok v náhodnom poradí. Jednoduchým algoritmom sme zariadili neopakovaniu už skúšaných slovíčok a mohli sa preskúšať plynulo z celej lekcie.

Ak je lekcia príliš dlhá a chceme sa vracať k už losovaným slovíčkam, potrebuje mať uloženú históriu skúšanie. Tiež potrebujeme užívateľské rozhranie, pomocou ktorého budeme v histórii listovať.

V tomto diele si toto rozhranie a ovládacie funkcie naprogramujeme a pridáme do už hotového kódu.

Listovanie v histórii skúšaných slovíčok

Aby sme sa v kóde nestrácali, vytvoríme nový súbor listovani.js. Nezabudneme ho tiež pridať do HTML stránky. Súbor listovani.js budeme používať ako knižnicu pre už existujúci súbor slovickaJedno­duse4.js, musíme teda zachovať poradie pri načítaní z HTML.

<title>Jednoduché zkoušení slovíček</title>
<script type="text/javascript" src="listovani.js"></script>
<script type="text/javascript" src="slovickaJednoduse4.js"></script>
<script type="text/javascript" src="slovickaData01.js"></script>
...

Rozmyslíme si, čo všetko musí nová funkcia vedieť.

• načítať vylosovaná slová a ukladať ich do poľa histórie
• vytvoriť užívateľské rozhranie pre listovanie v histórii
• poznať aktuálnu pozíciu v poli histórie a zobraziť slovo z poľa histórie pod príslušným indexom
• posúvať aktuálnu pozíciu

Keby sme pokračovali v rovnakom štýle písania kódu ako doteraz, museli by sme vytvoriť:

• nové pole a príslušnú obslužnú funkciu
• dve nové tlačidlá plus komentár a funkcie pre ich ovládanie
• premennú pre aktuálnu pozíciu v histórii

Čoskoro by sme sa v takom množstve funkcií a premenných stratili. Preto je pre rozsiahlejšie aplikácie výhodné použiť objekty, ktoré program rozdelí na viac ucelených častí.

Objekty v JavaScripte

Je známe, že s objektmi v Javascriptu to nie je také jednoznačné, ako napr. V Jave. Určite je vhodné oboznámiť sa s teóriou.

Ak ste s teóriou, aspoň letmo, oboznámení a máte predstavu o tom, čo je objekt a čo inštancie, môžeme pokračovať.

Vyberieme jednu z možností, ako definovať objekt v JavaScriptu.

var Listovani = function(IdOdstavce) {
}

Pri tvorbe novej inštancie tohto objektu zadáme atribút IdOdstavce. Do tohto odseku budeme chcieť zobraziť užívateľské rozhranie objektu.

Do tela objektu si definujeme všetky potrebné premenné:

this.idOdstavce = IdOdstavce;
var historie = new Array;
this.historie = historie;
var vpredBtn = vytvorListujTlacitko("30px"," ");
this.vpredBtn = vpredBtn;
var zpetBtn = vytvorListujTlacitko(" ","30px");
this.zpetBtn = zpetBtn;
var popisek = document.createElement("text");
popisek.textContent = " listování zkoušenými slovy ";
this.popisek = popisek;
var pozice;
this.pozice = pozice;

Pomocné slovo this znamená patriaci tomuto objektu. Pre objekt definovaný týmto kódom:

var Objekt = function (atribut) {
    this.jmenoPromenne = atribut;
}

Premenná alebo funkcie sa potom volá:

var instanceObjektu = new Objekt(atribut);
instanceObjektu.jmenoPromenne

Pre vytvorenie ovládacích tlačidiel si napíšeme pomocnú funkciu, ktorá vytvorí tlačidlo už upravené pre potreby listovacího panelu.

function vytvorListujTlacitko(odsazeniZleva,odsazeniZprava) {
    var btn = document.createElement("button");
    btn.style.fontSize = "15px";
    btn.style.padding = "5px 32px";
    btn.style.marginLeft = odsazeniZleva;
    btn.style.marginRight = odsazeniZprava;
    btn.style.backgroundColor = "grey";
    btn.style.color = "white";
    return btn;
};

Funkcia objektu, teda metódy

Syntax písanie metód v JavaScripte tiež nie je jednoznačná (máme viac možností ako napísať metódu). Použijeme kľúčové slovo prototype. Metóda s kľúčovým slovom prototype sa píše mimo telo objektu.

/* metoda objektu se píše mimo tělo objektu, atributy jsou nepovinné */
nazevObjektu.prototype.nazevMetody = (atribut1, atribut2) {
}

Prvá metóda, ktorú si napíšeme, vyvesí ovládacie tlačidlá na popisok objektu listovanie. Nepotrebujeme žiadne atribúty, ID odseky, do ktorého tlačidlá vyvěsíme, si metóda načíta z príslušnej inštancie objektu listovanie. Syntax vyzerá takto:

/* metoda objektu Listovani, vyvěsí tlačítka a popisek */
Listovani.prototype.vyvesListovani = function () {
    var odstavec = document.getElementById(this.idOdstavce);
    odstavec.appendChild(this.zpetBtn);
    odstavec.appendChild(this.popisek);
    odstavec.appendChild(this.vpredBtn);
}

Keďže je článok určený predovšetkým pre začiatočníkov, chcem upozorniť, že nikdy nepracujeme priamo s objektmi, ale s ich tzv. Inštanciami. Definovaní objektu možno prirovnať len k vytvoreniu vzoru, teda nového dátového typu. Aby sme mohli objekt použiť, musíme vytvoriť inštanciu, čo sa podobá vytvorenie premenné. V JavaScriptu ste sa s tým už možno stretli pri tvorení nového poľa, čo je vlastne objekt.

Vytvorenie inštancie a použitie metódy v kóde

Inštanciu objektu môžeme teoreticky vytvoriť kdekoľvek (samozrejme až potom, čo dopíšeme jeho definíciu). Pre prehľadnosť vytvoríme novú inštanciu objektu Listovanie v sekcii "deklarácie premenných" v súbore slovickaJedno­duse4.js.

/* instance objektu Listovani */
var listujInstance = new Listovani("listovani");

Nová inštancie sa volá listujInstance. Tlačidlá, ktorými budeme ovládať túto inštanciu, sa vyvesí metódou vyvesListovane () do odseku dokumentu "listovanie". Konkrétne volanie vyzerá takto:

listujInstance.vyvesListovani();

Nesmieme zabudnúť odstavec vytvoriť. Umiestnime ho pod tabuľu so slovíčkami:

<div id="tabule"></div>
<div id="listovani"></div>
<div id="tlacitkoDalsi"></div>

Aby sme metódu vyskúšali prakticky, musíme ju volať pri behu aplikácie. Keďže slová do histórie budeme načítavať za behu procedúry skúšaj (), zaradíme metódu do tejto procedúry.

function zkousej() {
    var losovane = Math.floor((Math.random()*slovaPracovni.length));
    var tedLosovaneSlovo = slovaPracovni[losovane];
    var tedLosovanyPreklad = prekladyPracovni[losovane];

    listujInstance.vyvesListovani();

    if (neopakovatSlova == true) {
        neopakujSlova(losovane);
    }
    ...

Teraz môžeme kód otestovať. Po načítaní okna je ovládací panel schovaný a pripne sa po stlačení tlačidla štart, kedy zároveň prebehne procedúra skúšajte ().

V budúcom dieli si napíšeme metódu, ktorá bude ukladať slová to história listovanie a aktivujeme si tlačidlá pre pohyb v histórii.