Zkoušení slovíček v Javascriptu 5 - Listování v historii 2

V minulém díle jsme si připravili objekt Listovani, umíme vytvořit jeho instanci a pomocí metody vyvesListovani() zobrazit listovací panel. Dnes si napíšeme metodu, která bude ukládat losovaná slova do historie a aktivujeme ovládací tlačítka.

Načítání slov do historie

Potřebujeme metodu, která bude ukládat právě vylosované slovo a jeho překlad do historie listování. Tato metoda bude volána z procedury zkousej().

Aby se nám se slovíčky lépe pracovalo, připravíme si nejprve pomocný objekt Slovo s atributy slovo a překlad.

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

Nyní již můžeme napsat samotnou metodu nactiDoHistori­e(). Tato metoda si sama zavolá dříve napsanou metodu vyvesListovani() a to právě ve chvíli, kdy má načtena dvě slova v historii (je již tedy v čem listovat). Po vylosování nového slova se posune aktuální pozice v historii na začátek pole. Nově vylosované slovo se načte na začátek pole.

/* 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 = "---";
}

Metodu budeme volat během metody zkousej() s příslušnými atributy.

listujInstance.nactiDoHistorie(tedLosovaneSlovo,tedLosovanyPreklad);

Ovládání tlačítek listování

Napíšeme metody, kterými budeme ovládat tlačítka vpřed a zpět.

Tlačítko zpět bude listovat v historii dozadu, ale index polohy v poli historie posouvá dopředu (this.pozice ++;). Je nutno ošetřit, abychom klikáním nepřekročili rozměry pole. Slovo na aktuální pozici v historii bude automaticky vypsáno na tabuli metodou 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 = " --- ";
    }
}

Podobně bude vypadat metoda 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 = " --- ";
    }
}

Aktivace tlačítek v těle objektu Listovani

Začátečník v JavaScriptu by si myslel, že použije událost onclick na tlačítka ve formátu this.zpetBtn a this.vpredBtn a má vyhráno.

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

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

Můžete vyzkoušet a uvidíte, že tlačítka nereagují. Jak je to možné?

Literatura vysvětluje, že JavaScript ztratí odkaz na instanci a nedokáže ji zpětně ovládat. Řešením je pomocná proměnná (např. self), do které se uloží klíčové slovo this. Při vytvoření nové instance je odkaz na tuto konkrétní novou instanci právě v její privátní proměnné self.

Na začátek definice objektu listování napíšeme toto přiřazení:

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

Metoda pro ovládání tlačítek bude mít tuto syntaxi:

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

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

Nyní již můžeme v historii listovat tam a zpět.

Jak fungují instance ?

Jen tak pro zajímavost si procvičíme práci s instancemi. Vytvoříme si duplicitní instanci listování a změníme text popisku abychom si instance vzájemně nepletli.

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

Instanci duplicita budeme zobrazovat v odstavci listovani2. Nezapomeneme si odstavec napsat do HTML.

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

Do metody zkousej() přidáme volání metody nactiDoHistorie() duplicitní instance listování.

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

Po spuštění kódu vidíme, že každá instance listování si načítá svou vlastní historii. Po kliknutí na tlačítko ovládacího panelu vypisuje každá instance listování svou historii na tabuli.

Duplicitní instanci opět smažeme, protože nám opravdu k ničemu není (ve zdrojácích je schovaná v komentářích).

Odepnutí panelů a smazání historie na konci lekce

Přidáme si metodu, která na závěr lekce odepne listovací panely. Využijeme toho, že všechny uzly jsou uloženy v tzv. node listu childnodes. Do proměnné pocetUzlu uložíme počet uzlů v odstavci před mazáním. Pak opakovaně odpojíme první uzel node listu. Použijeme metodu 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]);
    }
}

Metodu voláme z metody konecLekce():

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

Smazání historie na konci lekce (smazání pole) provedeme přiřazením nového, prázdného pole.

listujInstance.historie = new Array;

Začleníme rovněž do metody konecLekce().