Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Zkoušení slovíček v JavaScriptu 2 - Zkoušení

V první lekci tvorby zkoušeče slovíček v JavaScriptu jsme si připravili tabuli pro vypisování slovíček, umístili ji do HTML dokumentu a přidali funkci vypisSlovo(slovo, preklad). Nyní si stejným postupem vytvoříme ovládací tlačítko, které bude spouštět losování slova. Budeme ho nazývat tlačítko start v kódu tlacitkoStartBtn.

Objekt tlacitkoStartBtn

Vytvoříme si objekt tlačítka v okně.

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

Tlačítko umístíme do dokumentu do bloku "tlacikoDalsi", který máme již v HTML stránce připraven.

funkce tlacitkoStart()

Pro pohodlnější práci s tlačítkem start během sestavování aplikace si napíšeme funkci tlacitkoStart(). Při volání funkce budeme zadávat parametr popisek, který se bude na tlačítku zobrazovat. Tento parametr není nutný, jen výhodný. Tlačítko start je totiž objektem okna a můžeme jeho popisek měnit odkudkoliv.

Ke tlačítku přidáme událost onclick(), která spustí funkci zkousej().

/*
 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(); };
}

Vykreslení menu

Nyní již máme připraveno vše, co k ovládání jednoduché aplikace pro zkoušení potřebujeme. Napíšeme si funkci pro vykreslení uživatelského rozhraní. V parametrech při volání zadáme obsah popisků tabule a ovládacího tlačítka.

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

Vyzkoušíme si, co jsme dosud naprogramovali. Do window.onload() vložíme funkci vykresliMenu() s úvodními popisky. Vitaci1 a vitaci2 jsou textové proměnné

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

Vitaci1 a vitaci2 jsou 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ánce nyní vidíme tabuli a startovací tlačítko. Zkuste kliknout na tabuli, vše funguje jak má. Po kliknutí na startovací tlačítko se nic neděje.

Vítací menu aplikace pro zkoušení slovíček v JavaScriptu - Zdrojákoviště JavaScript - OOP

Stiskněte klávesu F12 pro zobrazení chybových hlášek. Vidíme, že program nenašel funkci zkousej(). Tuto funkci si brzy napíšeme. Nejprve však potřebujeme data slovíček, ze kterých se chceme zkoušet.

Chyba JavaScriptu - Zdrojákoviště JavaScript - OOP

Data slovíček

Data slovíček budeme vkládat jako prvky pole. Vytvoříme si zvlášť pole slov a zvlášť jejich překladů. Nesmíme zapomenout zachovat pořadí slov. Slovo a překlad budeme hledat dle stejného indexu pole.

Zatím nám stačí pár testovacích slovíček.

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

Přistoupíme k vytvoření funkce pro losování slovíček.

Náhodná čísla v JavaScriptu

V JavaScriptu se pro generování náhodného čísla používá funkce Math.random(). Nezapomeňte na velké písmeno na začátku volání knihovny Math :).

var losovane = Math.random();

Tento kód vložíme funkce zkousej()

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

Po načtení HTML klikněte na tlačítko start. Vyskočí obdobná hláška jako na obrázku. Můžete si to několikrát zopakovat. Funkce Math.random() vrací náhodné desetinné číslo v intervalu < 0, 1 >

Náhodná čísla v JavaScriptu - Zdrojákoviště JavaScript - OOP

Pro naši aplikaci potřebujeme generovat náhodná čísla v rozsahu počtu slovíček, která chceme zkoušek. Tedy dle počtu prvků v poli. Použijeme tedy atribut pole.length, který obsahuje počet prvků pole. Upravíme výraz pro náhodné číslo:

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

Opět vyzkoušejte. Nyní již padají náhodná desetinná čísla v rozsahu < 0; počet slov >. Pro losování indexu budeme potřebovat celá čísla v rozsahu < 0; počet slov -1 >. K dosažení tohoto výstupu použijeme metodu Math.floor(čís­lo), která zaokrouhluje dolů. Díky tomuto zaokrouhlení rovněž získáme optimální rozložení náhodných čísel.

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

Funkce zkousej()

Nyní již padají celá čísla a můžeme je použít jako index. Máme tedy náhodný index a můžeme vybrat náhodné slovo a překlad. Použijeme je jako parametry funkce vypisSlovo(), kterou máme připravenou od minulého dílu.

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

Výsledkem je již fungující aplikace pro zkoušení slovíček. Slovíčka vyskakují na tabuli náhodně v nekonečné smyčce. Můžete se vyzkoušet, zda je všechna umíte :).

Náhodné zkoušení slovíček v JavaScriptu - Zdrojákoviště JavaScript - OOP

Slovní zásoba a práce s daty

Zkoušet se pouze z pěti slovíček velice rychle omrzí. Slovní zásobu si rozšíříme přidáním dat. Ideálně použijeme externí datové soubory, aby se data nepletla s kódem aplikace. Přidáme odkazy na data 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>

Data slov jsou uložena v proměnných s1 až s3, data překladů v p1 až p3. Pole slov spojíme do jednoho pracovního pole metodou 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ávěr si ještě přidáme komentář.

Vypsání textového komentáře

V dokumentu HTML si připravíme nový blok s id = "komentar", určený pro výpis komentáře mezi tabulí a tlacitkoDalsi.

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

Komentář bude mít pro přehlednost dva řádky. Pokud chceme rozdělit komentář na více řádků, musíme vždy na konci řádku vložit element "br", v kódu máme tento element uložen v konecRadku. Jedná se o jednu konkrétní mezeru na konkrétním místě. Budeme-li chtít vložit novou mezeru jinde, musíme deklarovat nový element např. 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);
}

Funkci komentář přidáme do funkce zkousej(). Z estetických důvodů přepíšeme v průběhu zkoušení nápis na tlacitkoStartBtn ze "start" na "další".

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

V příští lekci přidáme další funkce pro zlepšení uživatelské přívětivosti aplikace.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Všechny články v sekci
Zdrojákoviště JavaScript - OOP
Článek pro vás napsala Katuki Shimanova
Avatar
Uživatelské hodnocení:
3 hlasů
Autorka je vystudovaná strojařka a věnuje se FEA simulacím. Zkušenosti s programováním má od děctví atari basic :).
Aktivity