Skúšanie slovíčok v Javascriptu 5 - Listovanie v histórii 2

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 minulom dieli sme si pripravili objekt listovanie, vieme vytvoriť jeho inštanciu a pomocou metódy vyvesListovani () zobraziť listovací panel. Dnes si napíšeme metódu, ktorá bude ukladať losovanie slová do histórie a aktivujeme ovládacie tlačidlá.

Načítanie slov do histórie

Potrebujeme metódu, ktorá bude ukladať práve vyžrebované slovo a jeho preklad do histórie listovanie. Táto metóda bude volaná z procedúry skúšajte ().

Aby sa nám so slovíčkami lepšie pracovalo, pripravíme si najprv pomocný objekt Slovo s atribútmi slovo a preklad.

/* pomocný objekt Slovo */
var Slovo = function (slovo,preklad) {
    this.slovo = slovo;
    this.preklad = preklad;
}

Teraz už môžeme napísať samotnú metódu nactiDoHistorie (). Táto metóda si sama zavolá skôr napísanú metódu vyvesListovani () a to práve vo chvíli, keď má načítaná dve slová v histórii (je už teda v čom listovať). Po vylosovaní nového slova sa posunie aktuálnej pozície v histórii na začiatok poľa. Novo vyžrebované slovo sa načíta na začiatok poľa.

/* metoda objektu Listovani, načítá své atributy do historie */
Listovani.prototype.nactiDoHistorie = function (slovo, preklad) {
    /* posune pozici na začátek pole */
    this.pozice = 0;
    /* vytvoří novou instanci objektu Slovo dle vstupních atributů metody nactiDoHistie() */
    var slovoVHistorii = new Slovo(slovo,preklad)
    /* připojí novou instanci obj. Slovo na začátek pole historie */
    this.historie.unshift(slovoVHistorii);
    /* pokud jsou v historii dvě slova, vyvěsí tlačítka */
    if (this.historie.length == 2) {
        this.vyvesListovani();
    }
    /* popis tlačítek */
    this.zpetBtn.textContent = "zpět";
    this.vpredBtn.textContent = "---";
}

Metódu budeme volať počas metódy skúšajte () s príslušnými atribútmi.

listujInstance.nactiDoHistorie(tedLosovaneSlovo,tedLosovanyPreklad);

Ovládanie tlačidiel listovanie

Napíšeme metódy, ktorými budeme ovládať tlačidlá vpred a späť.

Tlačidlo späť bude listovať v histórii dozadu, ale index polohy v poli histórie posúva dopredu (this.pozice ++;). Je nutné ošetriť, aby sme klikaním neprekročili rozmery poľa. Slovo na aktuálnu pozíciu v histórii bude automaticky vypísané na tabuľu metódou vypisSlovo ().

Listovani.prototype.klikaniZpet = function () {
    /* vymezuje posun pozice na délku pole historie */
    if (this.pozice < (this.historie.length - 1)) {
        this.pozice ++;
        this.zpetBtn.textContent = "zpět";
        this.vpredBtn.textContent = "vpřed";
        /* používá metodu vypisSlovo, vypíše aktuální pozici v historii na tabuli */
        vypisSlovo(this.historie[this.pozice].slovo, this.historie[this.pozice].preklad);
    }
    if (this.pozice == (this.historie.length - 1)) {
        this.zpetBtn.textContent = " --- ";
    }
}

Podobne bude vyzerať metóda klikaniVpred ().

Listovani.prototype.klikaniVpred = function () {
    if (this.pozice > 0) {
        this.pozice --;
        this.zpetBtn.textContent = "zpět";
        vypisSlovo(this.historie[this.pozice].slovo,this.historie[this.pozice].preklad);
    }
    if (this.pozice == 0) {
        this.vpredBtn.textContent = " --- ";
    }
}

Aktivácia tlačidiel v tele objekte listovanie

Začiatočník v JavaScripte by si myslel, že použije udalosť onclick na tlačidlá vo formáte this.zpetBtn a this.vpredBtn a má vyhraté.

this.zpetBtn.onclick = function () {
    this.klikaniZpet();
}

this.vpredBtn.onclick = function () {
    this.klikaniVpred();
}

Môžete vyskúšať a uvidíte, že tlačidlá nereagujú. Ako je to možné?

Literatúra vysvetľuje, že JavaScript stratí odkaz na inštanciu a nedokáže ju spätne ovládať. Riešením je pomocná premenná (napr. Self), do ktorej sa uloží kľúčové slovo this. Pri vytvorení novej inštancie je odkaz na túto konkrétnu novú inštanciu práve v jej privátnej premennej self.

Na začiatok definícia objektu listovanie napíšeme toto priradenie:

var Listovani = function(IdOdstavce) {
    var self = this;
    ...

Metóda pre ovládanie tlačidiel bude mať túto syntax:

self.zpetBtn.onclick = function () {
    self.klikaniZpet();
}

self.vpredBtn.onclick = function () {
    self.klikaniVpred()
}

Teraz už môžeme v histórii listovať tam a späť.

Ako fungujú inštancie?

Len tak pre zaujímavosť si precvičíme prácu s inštanciami. Vytvoríme si duplicitné inštanciu listovanie a zmeníme text popisku aby sme si inštancie vzájomne neplietli.

var duplicita = new Listovani("listovani2");
duplicita.popisek.textContent = "duplicitní instance listování";

Inštanciu duplicita budeme zobrazovať v odseku listovani2. Nezabudneme si odstavec napísať do HTML.

<div id="listovani"></div>
<div id="listovani2"></div>

Do metódy skúšajte () pridáme volanie metódy nactiDoHistorie () duplicitné inštancie listovanie.

listujInstance.nactiDoHistorie(tedLosovaneSlovo, tedLosovanyPreklad);
duplicita.nactiDoHistorie("klikáte na duplicitní instanci listování", "stále dokola načítá tyto dva řetězce")

Po spustení kódu vidíme, že každá inštancia listovanie si načíta svoju vlastnú históriu. Po kliknutí na tlačidlo ovládacieho panelu vypisuje každá inštancia listovanie svoju históriu na tabuli.

Duplicitné inštanciu opäť zmažeme, pretože nám naozaj k ničomu nie je (vo zdrojácích je schovaná v komentároch).

Odopnutí panelov a zmazanie histórie na konci lekcie

Pridáme si metódu, ktorá na záver lekcie odopne listovací panely. Využijeme toho, že všetky uzly sú uložené v tzv. Node listu childnodes. Do premennej pocetUzlu uložíme počet uzlov v odseku pred mazaním. Potom opakovane odpojíme prvý uzol node listu. Použijeme metódu removeChild ()

/* odepne všechny uzly připojené k listovacímu odstavci (definovaný IdOdstavce) */
Listovani.prototype.odepni = function () {
    var odstavec = document.getElementById(this.idOdstavce);
    /* získá počet napojených uzlů */
    var pocetUzlu = odstavec.childNodes.length;
    /* opakovaně odepíná uzel s indexem 0 */
    for (i = 0; i < pocetUzlu; i++) {
        odstavec.removeChild(odstavec.childNodes[0]);
    }
}

Metódu voláme z metódy konecLekce ():

function konecLekce() {
    listujInstance.odepni();
    vykresliMenu("konec lekce","všechna slova přezkoušena","opakovat");
}

Zmazanie histórie na konci lekcie (zmazanie pole) vykonáme priradením nového, prázdneho poľa.

listujInstance.historie = new Array;

Začleníme tiež do metódy konecLekce ().