Zkoušení slovíček v JavaScriptu 1 - Tabule

Vítejte u prvního dílu kurzu, který je určen pro začátečníky v JavaScriptu. Pro dostatečné pochopení scriptování byste se již měli umět orientovat ve struktuře HTML dokumentu. Pokud HTML tagy a filozofii jejich používání neznáte, doporučuji si napřed projít, alespoň zběžně, některý kurz na téma tvorba webu.

Cílem kurzu je naučit se a prakticky si procvičit základní konstrukce JavaScriptu. Na konci bude vytvoření užitečné aplikace, která vám snad i usnadní učení se slovíček cizího jazyka.

Představení a základní funkce

Aplikace bude vybírat náhodná slova z pole a vypisovat je na tabuli. Kliknutím na tabuli se zobrazí překlad daného slova. Po kliknutí na tlačítko další se vylosuje další slovo a vypíše se opět na tabuli. Začneme jednoduchou aplikací a postupně budeme přidávat další funkce. Procvičíme si práci s polem, styly, funkcemi a DOM.

Začneme tvorbou uživatelského rozhraní. Rozhraním bude webová stránka tedy .html dokument a zobrazovat se bude ve webovém prohlížeči. Pokud budete chtít zobrazit chyby během scriptu, stlačte klávesu F12.

Na webovou stránku (document) připneme metodou appendChild() objekty DOM typu button. Budu je v dalším textu nazývat tabule a ovládací tlačítko.

Návrh aplikace pro zkoušení slovíček v JavaScriptu - Zdrojákoviště JavaScript - OOP

Po stisknutí ovládacího tlačítka tlacitkoStartBtn reaguje metoda onclick(), která spustí funkci zkousej(). Součástí funkce zkousej() je losování náhodného čísla.

Data slovíček budou uložena v poli1 a překlady v poli2. Slovo a překlad si vzájemně odpovídají, mají stejné pořadí v poli, dále index.

Vybereme celé náhodné číslo z pole o rozměru počtu slovíček v poli. Toto číslo v programu poslouží jako index, dle kterého bude vybráno slovo a jeho překlad k vypsání na tabuli.

Vytvoříme funkci vypisSlovo(). Tato funkce bude mít na vstupu pouze jedno vybrané slovo z pole a jeho překlad. Bude pracovat s proměnnou typu boolean nazvanou preklad.

Tato proměnná bude řídit, zda se na tabuli vypíše slovo nebo překlad. Mezi slovem a jeho překladem budeme přepínat přes funkci preloz(). Funkce preloz() bude volána metodou onclick(), kterou připojíme k objektu tabule.

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

Toto je stručné shrnutí, jak bude aplikace pracovat a z jakých komponent ji budeme skládat. Pokud je pro vás tento popis matoucí, nic si z toho nedělejte. Při praktickém sestavování aplikace jistě všechny závislosti zdárně pochopíte. Pro názornost přidávám sice ne vývojový, ale orientační diagram.

Nyní se přesuneme k praktické části.

Vytvoření HTML šablony

Vytvoříme si .html dokument. Pokud se programování chvíli věnujete, máte již určitě svůj oblíbený editor. Já používám Bluefish.

Hlavička dokumentu bude obsahovat kromě základních povinných složek HTML odkaz na soubor JavaScriptu, konkrétně slovicka1.js.

<!DOCTYPE html>
<html lang="cs-cz">

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

<body>
        <h1>Zkoušení slovíček</h1>
    <div id="slovo"></div>
    <div id="komentar"> klikněte na slovíčko</div>
    <div id="tlacitkoDalsi"></div>
</body>

</html>

V těle dokumentu si připravíme bloky pomocí elementů div a přiřadíme jim Id, dle kterých se budeme v dokumentu orientovat. Mimo nadpis si připravíme blok, kam vypíšeme zkoušené slovo a tlačítko "další", vytvořené přímo v JavaScriptu pomocí funkcí rozhraní DOM. Pro umístění objektu do HTML použijeme metodu getElementById() (více teorie ohledně DOM snadno vyhledáte v jiných seriálech).

Vytvoření tabule

Nyní si vytvoříme nový soubor slovicka.js. Můžeme rovnou začít psát kód bez jakékoliv hlavičky.

Vytvoříme si objekt DOM typu "button" - tabuli pro vypisování slovíček "tabuleBtn". Objekt uložíme do proměnné pomocí klíčového slova var.

Deklarujeme proměnnou "prelozeno" typu boolean, která bude rozhodovat, zda se na tabuli vypíše slovo nebo jeho překlad.

/* ------------------deklarace proměnných ---------------------*/
var prelozeno = false;

/*tlačítka pro výpis výstupu*/
var tabuleBtn = document.createElement("button");

Napíšeme funkci vypisSlovo() se vstupními parametry slovo a preklad. Tato dvojice parametrů bude při běhu aplikace odeslána funkcí zkousej().

Funkce vypisSlovo() přidá na tabuli slovo a po kliknutí zobrazí jeho překlad. O tom, zda se na tabuli vypíše slovo nebo jeho překlad, bude rozhodovat hodnota proměnné prelozeno.

Vybraný text se připojí k objektu tabuleBtn atributem tabuleBtn.textContent.

Tabuli vyvěsíme funkcí appendChild() do příslušného bloku HTML vybraného metodou getElementById(), konkrétně do bloku "slovo".

/****vyvěsí tabuli a vypíše na ni vstupní slovo,
po kliknutí na tabuli ("onclick()") změní stav proměnné "překlad"
****/
function vypisSlovo(slovo,preklad) {
    if (prelozeno == false) {
        tabuleBtn.textContent = slovo;
    }
    else {
        tabuleBtn.textContent = preklad;
    }
    document.getElementById("slovo").appendChild(tabuleBtn);
    tabuleBtn.onclick = function () { preloz(slovo,preklad); };
}

Použijeme metodu onclick(), která spustí funkci preloz().

Funkce preloz() změní hodnotu proměnné prelozeno (true-false) a zavolá zpět funkci vypisSlovo().

/*změní stav proměnné "prelozeno" a vypíše slovo
(předává si s funkcí "vypisSlovo" proměnné pro vylosované slovo a jeho překlad)*/
function preloz(slovo,preklad) {
    if (prelozeno == true) {
        prelozeno = false;
    }
    else {
        prelozeno = true;
    }
    vypisSlovo(slovo, preklad);
}

Nyní si již můžeme script vyzkoušet. Napíšeme si funkci window.onload(). Obsah této funkce se spustí při načtení okna.

window.onload = function () {
    vypisSlovo("test tabule, zde bude slovo", "zde bude překlad");
}

Místo slova a překladu si do parametrů funkce vypisSlovo() napíšeme libovolný textový řetězec nebo proměnnou typu string.

Vyzkoušíme, zda funguje metoda onclick() a zda se správně přepíná proměnná prelozeno.

Výsledek si již můžete prohlédnout ve webovém prohlížeči.

Test tabule v JavaScriptu - Zdrojákoviště JavaScript - OOP

Než se rozloučíme, upravíme styl tabule, abychom na ni lépe viděli .

/*úprava tlačítek*/
tabuleBtn.style.fontSize = "40px";
tabuleBtn.style.padding = " 60px";

Příkazy pro změnu stylu jsou stejné jako v CSS. Styl definovaný JavaScriptem ve tvaru objekt.style změní styl definovaný v CSS souboru nikoliv naopak.

Výsledek vypadá takto: