Zkoušení slovíček v Javascriptu 4 - Listování v historii 1

V prvních třech dílech jsme vytvořili aplikaci pro zkoušení slovíček v náhodném pořadí. Jednoduchým algoritmem jsme zařídili neopakování již zkoušených slovíček a mohli se prozkoušet plynule z celé lekce.

Pokud je lekce příliš dlouhá a chceme se vracet k již losovaným slovíčkům, potřebuje mít uloženou historii zkoušení. Také potřebujeme uživatelské rozhraní, pomocí kterého budeme v historii listovat.

V tomto díle si toto rozhraní a ovládací funkce naprogramujeme a přidáme do již hotového kódu.

Listování v historii zkoušených slovíček

Abychom se v kódu neztráceli, vytvoříme nový soubor listovani.js. Nezapomeneme ho také přidat do HTML stránky. Soubor listovani.js budeme používat jako knihovnu pro již existující soubor slovickaJedno­duse4.js, musíme tedy zachovat pořadí při načítání 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, co vše musí nová funkce umět.

• načítat vylosovaná slova a ukládat je do pole historie
• vytvořit uživatelské rozhraní pro listování v historii
• znát aktuální pozici v poli historie a zobrazit slovo z pole historie pod příslušným indexem
• posouvat aktuální pozici

Kdybychom pokračovali ve stejném stylu psaní kódu jako dosud, museli bychom vytvořit:

• nové pole a příslušnou obslužnou funkci
• dvě nové tlačítka plus komentář a funkce pro jejich ovládání
• proměnnou pro aktuální pozici v historii

Brzy bychom se v takovém množství funkcí a proměnných ztratili. Proto je pro rozsáhlejší aplikace výhodné použít objekty, které program rozdělí na více ucelených částí.

Objekty v JavaScriptu

Je známo, že s objekty v Javascriptu to není tak jednoznačné, jako např. v Javě. Určitě je vhodné seznámit se s teorií.

Pokud jste s teorií, alespoň letmo, seznámeni a máte představu o tom, co je objekt a co instance, můžeme pokračovat.

Vybereme jednu z možností, jak definovat objekt v Javascriptu.

var Listovani = function(IdOdstavce) {
}

Při tvorbě nové instance tohoto objektu zadáme atribut IdOdstavce. Do tohoto odstavce budeme chtít zobrazit uživatelské rozhraní objektu.

Do těla objektu si definujeme všechny potřebné proměnné:

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á patřící tomuto objektu. Pro objekt definovaný tímto kódem:

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

Proměnná nebo funkce se poté volá:

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

Pro vytvoření ovládacích tlačítek si napíšeme pomocnou funkci, která vytvoří tlačítko již upravené pro potřeby 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;
};

Funkce objektu, tedy metody

Syntaxe psaní metod v JavaScriptu také není jednoznačná (máme více možností jak napsat metodu). Použijeme klíčové slovo prototype. Metoda s klíčovým slovem prototype se píše mimo tělo objektu.

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

První metoda, kterou si napíšeme, vyvěsí ovládací tlačítka na popisek objektu Listovani. Nepotřebujeme žádné atributy, ID odstavce, do kterého tlačítka vyvěsíme, si metoda načte z příslušné instance objektu Listovani. Syntaxe vypadá 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);
}

Jelikož je článek určen především pro začátečníky, chci upozornit, že nikdy nepracujeme přímo s objekty, ale s jejich tzv. instancemi. Definováni objektu lze přirovnat jen k vytvoření vzoru, tedy nového datového typu. Abychom mohli objekt použít, musíme vytvořit instanci, což se podobá vytvoření proměnné. V JavaScriptu jste se s tím již možná setkali při tvoření nového pole, což je vlastně objekt.

Vytvoření instance a použití metody v kódu

Instanci objektu můžeme teoreticky vytvořit kdekoliv (samozřejmě až poté, co dopíšeme jeho definici). Pro přehlednost vytvoříme novou instanci objektu Listovani v sekci "deklarace proměnných" v souboru slovickaJedno­duse4.js.

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

Nová instance se jmenuje listujInstance. Tlačítka, kterými budeme ovládat tuto instanci, se vyvěsí metodou vyvesListovane() do odstavce dokumentu "listovani". Konkrétní volání vypadá takto:

listujInstance.vyvesListovani();

Nesmíme zapomenout odstavec vytvořit. Umístíme jej pod tabuli se slovíčky:

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

Abychom metodu vyzkoušeli prakticky, musíme ji volat při běhu aplikace. Jelikož slova do historie budeme načítat za běhu procedury zkousej(), zařadíme metodu do této procedury.

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

Nyní můžeme kód otestovat. Po načtení okna je ovládací panel schovaný a připne se po stisku tlačítka start, kdy zároveň proběhne procedura zkousej().

V příštím díle si napíšeme metodu, která bude ukládat slova to historie listování a aktivujeme si tlačítka pro pohyb v historii.