Skúšanie slovíčok v JavaScripte 2 - Skúšanie

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

V prvej lekcii tvorby skúšač slovíčok v JavaScripte sme si pripravili tabuľu pre vypisovanie slovíčok, umiestnili ju do HTML dokumentu a pridali funkciu vypisSlovo (slovo, preklad). Teraz si rovnakým postupom vytvoríme ovládacie tlačidlo, ktoré bude spúšťať žrebovanie slová. Budeme ho nazývať tlačidlo štart v kóde tlacitkoStartBtn.

Objekt tlacitkoStartBtn

Vytvoríme si objekt tlačidla v okne.

var tlacitkoStartBtn = document.createElement("button");

Tlačidlo umiestnime do dokumentu do bloku "tlacikoDalsi", ktorý máme už v HTML stránke pripravený.

Funkcie tlačidlo Štart ()

Pre pohodlnejšiu prácu s tlačidlom štart počas zostavovania aplikácie si napíšeme funkciu tlačidlo Štart (). Pri volaní funkcie budeme zadávať parameter popis, ktorý sa bude na tlačidle zobrazovať. Tento parameter nie je potrebný, len výhodný. Tlačidlo štart je totiž objektom okná a môžeme jeho popisok meniť odkiaľkoľvek.

Ku tlačidlu pridáme udalosť onclick (), ktorá spustí funkciu skúšajte ().

/*
 vyvěsí tlačítko "start" nebo změní jeho popisek,
 spustí funkci "zkousej()"
*/
function tlacitkoStart(popisek) {
    tlacitkoStartBtn.textContent = popisek;
    document.getElementById("tlacitkoDalsi").appendChild(tlacitkoStartBtn);
    tlacitkoStartBtn.onclick = function () { zkousej(); };
}

Vykreslenie menu

Teraz už máme pripravené všetko, čo na ovládanie jednoduché aplikácie pre skúšanie potrebujeme. Napíšeme si funkciu pre vykreslenie užívateľského rozhrania. V parametroch pri volaní zadáme obsah popiskov tabule a ovládacieho tlačidla.

/****
 vyvěsí tabule a popíše je dle vstupních proměnných
****/
function vykresliMenu(slovo, preklad, popisek) {
    vypisSlovo(slovo,preklad);
    tlacitkoStart(popisek);
}

Vyskúšame si, čo sme doteraz naprogramovali. Do window.onload () vložíme funkciu vykresliMenu () s úvodnými menovkami. Vitaci1 a vitaci2 sú textové premenné

/****
 spustí script při načtení okna
****/
window.onload = function () {
    vykresliMenu(vitaci1, vitaci2, "start");
}

Vitaci1 a vitaci2 sú textové proměnné_

/* textove proměnné */
var vitaci1 = "Vítejte, kliknutím zobrazíte překlad";
var vitaci2 = "zkoušení slovíček spustíte tlačítkem 'START'";

Na stránke teraz vidíme tabuľu a štartovacie tlačidlo. Skúste kliknúť na tabuľu, všetko funguje ako má. Po kliknutí na štartovacie tlačidlo sa nič nedeje.

Stlačte klávesu F12 pre zobrazenie chybových hlášok. Vidíme, že program nenašiel funkciu skúšajte (). Túto funkciu si čoskoro napíšeme. Najprv však potrebujeme dáta slovíčok, z ktorých sa chceme skúšať.

Dáta slovíčok

Dáta slovíčok budeme vkladať ako prvky poľa. Vytvoríme si zvlášť poľa slov a zvlášť ich prekladov. Nesmieme zabudnúť zachovať poradie slov. Slovo a preklad budeme hľadať podľa rovnakého indexu poľa.

Zatiaľ nám stačí pár testovacích slovíčok.

/* vstupni data slovicka a jejich překlady */
var slovaCesky = new Array ("žába", "sáček", "květina", "zábradlí", "kanál(stoka)");
var slovaAnglicky = new Array ("frog", "bag, sached, packet", "flower", "banister, balustrade, handrail, rail", "sewer");

Pristúpime k vytvoreniu funkcie pre žrebovanie slovíčok.

Náhodné čísla v JavaScripte

V JavaScriptu sa pre generovanie náhodného čísla používa funkcie Math.random (). Nezabudnite na veľké písmeno na začiatku volania knižnice Math .

var losovane = Math.random();

Tento kód vložíme funkcie skúšajte ()

function zkousej() {
    var losovane = Math.random();
    alert(losovane);
}

Po načítaní HTML kliknite na tlačidlo štart. Vyskočí obdobná hláška ako na obrázku. Môžete si to niekoľkokrát zopakovať. Funkcia Math.random () vracia náhodné desatinné číslo v intervale <0, 1>

Pre našu aplikáciu potrebujeme generovať náhodné čísla v rozsahu počte slovíčok, ktoré chceme skúšok. Teda podľa počtu prvkov v poli. Použijeme teda atribút pole.length, ktorý obsahuje počet prvkov poľa. Upravíme výraz pre náhodné číslo:

    var losovane = (Math.random()*slovaCesky.length);
}

Opäť vyskúšajte. Teraz už padajú náhodné desatinné čísla v rozsahu <0; počet slov>. Pre losovanie indexu budeme potrebovať celé čísla v rozsahu <0; počet slov -1>. Na dosiahnutie tohto výstupu použijeme metódu Math.floor (číslo), ktorá zaokrúhľuje nadol. Vďaka tomuto zaokrúhlenie takisto získame optimálne rozloženie náhodných čísel.

var losovane = Math.floor((Math.random()*slovaCesky.length));

Funkcia skúšajte ()

Teraz už padajú celé čísla a môžeme ich použiť ako index. Máme teda náhodný index a môžeme vybrať náhodné slovo a preklad. Použijeme ich ako parametre funkcia vypisSlovo (), ktorú máme pripravenú od minulého dielu.

function zkousej() {
    var losovane = Math.floor((Math.random()*slovaCesky.length));
    vypisSlovo(slovaCesky[losovane], slovaAnglicky[losovane]);
}

Výsledkom je už fungujúce aplikácia pre skúšanie slovíčok. Slovíčka vyskakujú na tabuli náhodne v nekonečnej slučke. Môžete sa vyskúšať, či je všetky viete .

Slovná zásoba a práce s dátami

Skúšať sa iba z piatich slovíčok veľmi rýchlo omrzí. Slovnú zásobu si rozšírime pridaním dát. Ideálne použijeme externé dátové súbory, aby sa dáta neplietla s kódom aplikácie. Pridáme odkazy na dáta do hlavičky HTML.

<head>
    <meta charset="UTF-8">
    <title>Jednoduché zkoušení slovíček</title>
    <script type="text/javascript" src="slovickaJednoduse2.js"></script>
    <script type="text/javascript" src="slovickaData01.js"></script>
    <script type="text/javascript" src="slovickaData02.js"></script>
    <script type="text/javascript" src="slovickaData03.js"></script>
</head>

Dáta slov sú uložené v premenných s1 až s3, dáta prekladov v p1 až p3. Pole slov spojíme do jedného pracovného poľa metódou concat ().

/* pracovni proměnné */
var slovaPracovni = new Array;
var prekladyPracovni = new Array;

/**** načítá slova do zásobníku ****/
function nactiPracovniSlova() {
    slovaPracovni = slovaCesky.concat(s1,s2,s3);
    prekladyPracovni = slovaAnglicky.concat(p1,p2,p3);
}

Na záver si ešte pridáme komentár.

Vypísanie textového komentáre

V dokumente HTML si pripravíme nový blok s id = "komentar", určený pre výpis komentáre medzi tabuľou a tlačidloNext.

<body>
        <h1 id="nadpis">Zkoušení slovíček</h1>
    <div id="tabule"></div>
    <div id="komentar"></div>
    <div id="tlacitkoDalsi"></div>
</body>

Komentár bude mať pre prehľadnosť dva riadky. Ak chceme rozdeliť komentár na viac riadkov, musíme vždy na konci riadku vložiť element "br", v kóde máme tento element uložený v konecRadku. Jedná sa o jednu konkrétnu medzeru na konkrétnom mieste. Ak budeme chcieť vložiť novú medzeru inde, musíme deklarovať nový element napr. KonecRadku2.

/*textové objekty*/
var komentar1 = document.createElement("text");
var komentar2 = document.createElement("text");
/*objekt mezera*/
var konecRadku = document.createElement("br");

function komentar(Id) {
    komentar1.textContent = "Zkoušení náhodných slov v nekonečné smyčce";
    komentar2.textContent = "celkem " + slovaPracovni.length + " slov";
    document.getElementById(Id).appendChild(komentar1);
    document.getElementById(Id).appendChild(konecRadku);
    document.getElementById(Id).appendChild(komentar2);
}

Funkciu komentár pridáme do funkcie skúšajte (). Z estetických dôvodov prepíšeme v priebehu skúšania nápis na tlacitkoStartBtn zo "štart" na "ďalší".

function zkousej() {
    var losovane = Math.floor((Math.random()*slovaPracovni.length));
    vypisSlovo(slovaPracovni[losovane], prekladyPracovni[losovane]);
    komentar("komentar");
    tlacitkoStartBtn.textContent = "další";
}

V budúcej lekcii pridáme ďalšie funkcie pre zlepšenie užívateľskej prívetivosti aplikácie.

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