Zkoušení slovíček v JavaScriptu 3 - Stylování

Z předešlé lekce kurzu o zkoušeči slovíček v JavaScriptu máme připravenu aplikaci pro zkoušení slovíček v nekonečné smyčce. V tomto díle si nejprve upravíme vzhled aplikace a poté přidáme užitečnou funkci.

Úprava vzhledu pomocí objektu style

Objekt style jsme již použili v prvním díle pro úpravu tlačítka tabule. Atribut fontSize určuje velikost písma a padding tloušťku okrajů okolo textu.

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

Podobným způsobem si můžeme upravit také tlačítko start, samozřejmě dle svého vkusu.

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

Barvy v HTML

Za znaky #990066 se skrývá definice barvy v šestnáctkové soustavě, kde každé dvojčíslo udává podíl některé ze tří základních barev ve vybraném odstínu.

První dvojčíslí patří červené barvě. Pokud chceme 100% červené barvy a žádný další odstín, napíšeme #FF0000.

• #FF0000 - červená
• #00FF00 - zelená
• #0000FF - modrá
• #FFFF00 - žlutá
• #FFFFFF - bílá (zde šedě)
• #000000 - černá

Styl tabule

Upravíme si tabuli, aby se slovo a jeho překlad zobrazovalo v jiných barvách. Napíšeme si funkce ve kterých definujeme barvy. Příklad kódu, jak tyto funkce mohou vypadat:

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

Funkce na řízení stylu přidáme do funkce 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);
    }
}

Prohlédněte si nyní barevnou aplikaci.

Pokud se vám nelíbí, napište si vlastní styly a barvy. Není nutno upravovat celý dokument v JavaScriptu. Dobrým pomocníkem při vytváření pěkného vzhledu webové stránky jsou CSS styly.

CSS styly

Dokument HTML lze pohodlně upravit pomocí CSS stylů. Jak na to si v tomto seriálu vysvětlovat nebudeme. Řekneme si pouze, že JavaScript dokáže styly definované v CSS přepsat a do hlavičky HTML musíme doplnit link na CSS souboru.

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

Javascript dokáže také všechny styly CSS vypnout příkazem:

document.styleSheets[0].disabled=true;

Do souborů přiložených k lekci jsem zařadila jeden vzorový CSS soubor - slovicka.css. Můžete se podívat jak vytvořit a pracovat s CSS.

V úvodu článku jsem slíbila další rozšíření funkcí. Při užívání aplikace nemusí každému vyhovovat nekonečná smyčka zkoušení. Vytvoříme tedy mód, ve kterém se slovíčka nebudou opakovat.

Neopakování slovíček

Definujeme si řídící proměnnou, která bude rozhodovat, zda zkoušet ve smyčce, nebo projít postupně celou lekci.

var neopakovatSlova = true;

Zamysleme se, jak docílíme toho, aby se jednou vybrané slovo již nevylosovalo podruhé? Nejjednodušším způsobem je odebrat právě vybrané slovo z pracovních slov.

Nové pole pracovních slov vytvoříme jednoduchou funkcí vytvorNovePra­covni(). V prvním parametru je právě vylosované číslo. Toto číslo existuje pouze uvnitř funkce zkousej(), proto jej musíme předávat parametrem (již také víme odkud budeme proceduru volat). Druhým parametrem je původní pole slov. Funkce vrací nové pole slov bez právě 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;
}

Funkcí vytvorNovePra­covni() budeme upravovat pracovní slova a pracovní překlady. Využijeme toho, že si pracovní data ukládáme do globální proměnné, přesněji lokální proměnné okna. Funkce, která přepíše tyto dvě pole, bez již právě vylosovaného členu vypadá takto:

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

Funkci musíme volat z funkce zkousej() a bez parametru losovane se neobejdeme. Jakmile funkci neopakujSlova() zavoláme, právě vylosované slovo zmizí z pracovních. My jej však ještě potřebujeme vypsat na tabuli. Pro tyto účely vytvoříme dvě proměnné uvnitř funkce zkousej(), kam právě losované číslo a jeho překlad uložíme a následně odešleme do funkce 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 průběhu zkoušení nám budou slova ze zásobníku ubývat, až se pole pracovních slov zcela vyprázdní. Tuto situaci ošetříme následující podmínkou uvnitř funkce zkousej().

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 vyloučit situaci, kdy zkoušíme z prázdného zásobníku. Přidáme k události onclick() na tlačítku tlacitkoStartBnt následující podmínku:

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

Na konci lekce použijeme již připravenou proceduru vykresliMenu(), pouze přepíšeme parametry.

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

Ještě si upravíme komentáře v průběhu zkoušení.

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, které chceme mít vypsáno v komentáři, si uložíme do proměnné maxPracovníchSlov.

var maxPracovnichSlov = 0;

Hodnotu načteme při načítání pracovních slov.

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

O tom, zda se bude zkoušet v nekonečné smyčce nebo v lekci rozhoduje proměnná neopakovatSlova. Měnit ji momentálně můžeme pouze ve zdrojovém kódu scriptu. Za domácí úkol si zkuste napsat přepínání přímo v dokumentu HTML.