Skúšanie slovíčok v JavaScripte 3 - Štýlovanie

V predchádzajúcom kvíze, Kvíz - Statika, zapuzdrenie, anonymné objekty a prototypy, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

Z predošlej lekcie kurzu o skúšač slovíčok v JavaScripte máme pripravenú aplikáciu pre skúšanie slovíčok v nekonečnej slučke. V tomto diele si najprv upravíme vzhľad aplikácie a potom pridáme užitočnú funkciu.

Úprava vzhľadu pomocou objektu style

Objekt style sme už použili v prvom diele pre úpravu tlačidlá tabule. Atribút fontSize určuje veľkosť písma a padding hrúbku okrajov okolo textu.

tabuleBtn.style.fontSize = "40px";
tabuleBtn.style.padding = " 70px";

Podobným spôsobom si môžeme upraviť tiež tlačidlo štart, samozrejme podľa svojho vkusu.

tlacitkoStartBtn.style.fontSize = "20px";
tlacitkoStartBtn.style.padding = "15px 32px";
tlacitkoStartBtn.style.backgroundColor = "#990066"

Farby v HTML

Za znaky # 990066 sa skrýva definície farby v šestnástkovej sústave, kde každé dvojčíslo udáva podiel niektorej z troch základných farieb vo vybranom odtieni.

Prvé dvojčíslie patrí červenej farbe. Ak chceme 100% červenej farby a žiadny ďalší odtieň, napíšeme # FF0000.

• # FF0000 - červená
• # 00FF00 - zelená
• # 0000FF - modrá
• # FFFF00 - žltá
• #FFFFFF - biela (tu sivo)
• # 000000 - čierna

Štýl tabuľa

Upravíme si tabuľu, aby sa slovo a jeho preklad zobrazovalo v iných farbách. Napíšeme si funkcie v ktorých definujeme farby. Príklad kódu, ako tieto funkcie môžu vyzerať:

/* změna stylu výpisu při překladu */
function stylSlova() {
    tabuleBtn.style.backgroundColor = "green";
    tabuleBtn.style.color = "white";
}

/* změna stylu výpisu při překladu */
function stylPrekladu() {
    tabuleBtn.style.backgroundColor = "teal";
    tabuleBtn.style.color = "white";
}

Funkcie na riadenie štýlu pridáme do funkcie vypisSlovo ().

function vypisSlovo(slovo,preklad) {
    if (prelozeno == false) {
        stylSlova();
        tabuleBtn.textContent = slovo;
    }
    else {
        stylPrekladu();
        tabuleBtn.textContent = preklad;
    }
    document.getElementById("tabule").appendChild(tabuleBtn);
    tabuleBtn.onclick = function () {
        preloz(slovo,preklad);
    }
}

Prezrite si teraz farebnú aplikáciu.

Ak sa vám nepáči, napíšte si vlastné štýly a farby. Nie je nutné upravovať celý dokument v JavaScripte. Dobrým pomocníkom pri vytváraní pekného vzhľadu webovej stránky sú CSS štýly.

CSS štýly

Dokument HTML možno pohodlne upraviť pomocou CSS štýlov. Ako na to si v tomto seriáli vysvetľovať nebudeme. Povieme si len, že JavaScript dokáže štýly definované v CSS prepísať a do hlavičky HTML musíme doplniť link na CSS súboru.

<link href="slovicka.css" rel="stylesheet" />

Javascript dokáže tiež všetky štýly CSS vypnúť príkazom:

document.styleSheets[0].disabled=true;

Do súborov priložených k lekcii som zaradila jeden vzorový CSS súbor - slovicka.css. Môžete sa pozrieť ako vytvoriť a pracovať s CSS.

V úvode článku som sľúbila ďalšie rozšírenie funkcií. Pri užívaní aplikácia nemusí každému vyhovovať nekonečná slučka skúšanie. Vytvoríme teda mód, v ktorom sa slovíčka nebudú opakovať.

Neopakovaniu slovíčok

Definujeme si riadiaca premennú, ktorá bude rozhodovať, či skúšať v slučke, alebo prejsť postupne celú lekciu.

var neopakovatSlova = true;

Zamyslime sa, ako docielime to, aby sa raz vybrané slovo už nevylosovalo druhýkrát? Najjednoduchším spôsobom je odobrať práve vybrané slovo z pracovných slov.

Nové pole pracovných slov vytvoríme jednoduchou funkciou vytvorNovePracovni (). V prvom parametri je práve vyžrebované číslo. Toto číslo existuje iba vnútri funkcie skúšaj (), preto ho musíme odovzdávať parametrom (už tiež vieme odkiaľ budeme procedúru volať). Druhým parametrom je pôvodný pole slov. Funkcia vracia nové pole slov bez práve vylosovaného slova.

function vytvorNovePracovni(losovane,puvodniSlova) {
    var novePracovni = new Array;
    for (i=0; i < puvodniSlova.length; i++) {
        if (i < losovane) {
            novePracovni[i] = puvodniSlova[i];
        }
        if (i > losovane) {
            novePracovni[i-1] = puvodniSlova[i];
        }
    }
    return novePracovni;
}

Funkciou vytvorNovePracovni () budeme upravovať pracovný slová a pracovné preklady. Využijeme toho, že si pracovné dáta ukladáme do globálne premenné, presnejšie lokálne premenné okna. Funkcia, ktorá prepíše tieto dve polia, bez už práve vylosovaného členu vyzerá takto:

function neopakujSlova(losovane) {
    slovaPracovni = vytvorNovePracovni(losovane,slovaPracovni);
    prekladyPracovni = vytvorNovePracovni(losovane,prekladyPracovni);
}

Funkciu musíme volať z funkcie skúšajte () a bez parametra žrebovanie sa nezaobídeme. Akonáhle funkciu neopakujSlova () zavoláme, práve vyžrebované slovo zmizne z pracovných. My ho však ešte potrebujeme vypísať na tabuli. Pre tieto účely vytvoríme dve premenné vnútri funkcie skúšaj (), kam práve zoznam pobočiek číslo a jeho preklad uložíme a následne odošleme do funkcie vypisSlovo ().

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

V priebehu skúšania nám budú slová zo zásobníka ubúdať, až sa pole pracovných slov úplne vyprázdni. Túto situáciu ošetríme nasledujúce podmienkou vnútri funkcie skúšajte ().

if (slovaPracovni.length == 0) {
    tlacitkoStartBtn.textContent = "konec";
    komentar1.textContent = "Prázdný zásobník";
    komentar2.textContent = "všechna slova přezkoušena";
}
else {
    tlacitkoStartBtn.textContent = "další";
}

Musíme vylúčiť situáciu, keď skúšame z prázdneho zásobníka. Pridáme k udalosti onclick () na tlačidle tlacitkoStartBnt nasledujúce podmienku:

tlacitkoStartBtn.onclick = function () {
    if (slovaPracovni.length == 0) {
        konecLekce();
    }
    else {
        zkousej();
    }
}

Na konci lekcie použijeme už pripravenú procedúru vykresliMenu (), iba prepíšeme parametre.

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

Ešte si upravíme komentáre v priebehu skúšania.

function komentarVypis() {
    if (neopakovatSlova == true) {
        komentar1.textContent = "Zkoušení z celé lekce. Přezkoušených slov: " + (maxPracovnichSlov-slovaPracovni.length) + " zbývá: " + slovaPracovni.length;
        komentar2.textContent = "celkem " + maxPracovnichSlov + " slov";
    }
    else {
        komentar1.textContent = "Zkoušení náhodných slov v nekonečné smyčce";
        komentar2.textContent = "celkem " + slovaPracovni.length + " slov";
    }
}

function komentarVyves(Id) {
    document.getElementById(Id).appendChild(komentar1);
    document.getElementById(Id).appendChild(konecRadku);
    document.getElementById(Id).appendChild(komentar2);
}

function komentar(Id) {
    komentarVypis();
    komentarVyves(Id);
}

Maximum pracovných slov, ktoré chceme mať vypísané v komentári, si uložíme do premennej maxPracovníchSlov.

var maxPracovnichSlov = 0;

Hodnotu načítame pri načítaní pracovných slov.

function nactiPracovniSlova() {
    slovaPracovni = slovaCesky.concat(s1, s2, s3);
    prekladyPracovni = slovaAnglicky.concat(p1, p2, p3);
    maxPracovnichSlov = slovaPracovni.length;
}

O tom, či sa bude skúšať v nekonečnej slučke alebo v lekcii rozhoduje premenná neopakovatSlova. Meniť ju momentálne môžeme len v zdrojovom kóde scriptu. Za domácu úlohu si skúste napísať prepínanie priamo v dokumente HTML.