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

JavaScript Základní konstrukce 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.


 

Stáhnout

Staženo 4x (9.86 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (2)

Článek pro vás napsala Katuki Shimanova
Avatar
Autorka je vystudovaná strojařka a věnuje se FEA simulacím. Zkušenosti s programováním má od děctví atari basic :).

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 



 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!