Skúšanie slovíčok v JavaScripte 1 - Tabuľa

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

Vitajte u prvého dielu kurzu, ktorý je určený pre začiatočníkov v JavaScriptu. Pre dostatočné pochopenie scriptovania by ste sa už mali vedieť orientovať v štruktúre HTML dokumente. Ak HTML tagy a filozofiu ich používanie nepoznáte, odporúčam si napred prejsť, aspoň zbežne, niektorý kurz na tému tvorba webu.

Cieľom kurzu je naučiť sa a prakticky si precvičiť základnú konštrukcie JavaScriptu. Na konci bude vytvorenie užitočné aplikácie, ktorá vám snáď aj uľahčí učenie sa slovíčok cudzieho jazyka.

Predstavenie a základné funkcie

Aplikácia bude vyberať náhodná slová z poľa a vypisovať ich na tabuľu. Kliknutím na tabuli sa zobrazí preklad daného slova. Po kliknutí na tlačidlo ďalšie sa vylosuje ďalšie slovo a vypíše sa opäť na tabuli. Začneme jednoduchou aplikáciou a postupne budeme pridávať ďalšie funkcie. Precvičíme si prácu s poľom, štýly, funkciami a DOM.

Začneme tvorbou používateľského rozhrania. Rozhraním bude webová stránka teda .html dokument a zobrazovať sa bude vo webovom prehliadači. Ak budete chcieť zobraziť chyby počas scriptu, stlačte klávesu F12.

Na webovú stránku (document) pripneme metódou appendChild () objekty DOM typu button. Budem ich v ďalšom texte nazývať tabule a ovládacie tlačidlo.

Návrh aplikácie pre skúšanie slovíčok v JavaScripte - Objektovo orientované programovanie v JavaScriptu

Po stlačení ovládacieho tlačidla tlacitkoStartBtn reaguje metóda onclick (), ktorá spustí funkciu skúšajte (). Súčasťou funkcie skúšajte () je žrebovanie náhodného čísla.

Dáta slovíčok budú uložené v poli1 a preklady v poli2. Slovo a preklad si vzájomne odpovedajú, majú rovnaké poradie v poli, ďalej index.

Vyberieme celé náhodné číslo z poľa o rozmere počte slovíčok v poli. Toto číslo v programe poslúži ako index, podľa ktorého bude vybraných slovo a jeho preklad k vypísaniu na tabuli.

Vytvoríme funkciu vypisSlovo (). Táto funkcia bude mať na vstupe iba jedno vybrané slovo z poľa a jeho preklad. Bude pracovať s premennú typu boolean nazvanú preklad.

Tento ukazovateľ bude riadiť, či sa na tabuli vypíše slovo alebo preklad. Medzi slovom a jeho prekladom budeme prepínať cez funkciu Preložte (). Funkcia preloží () bude volaná metódou onclick (), ktorú pripojíme k objektu tabule.

Diagram aplikácie pre skúšanie slovíčok v JavaScripte - Objektovo orientované programovanie v JavaScriptu

Toto je stručné zhrnutie, ako bude aplikácia pracovať az akých komponentov ju budeme skladať. Ak je pre vás tento opis mätúce, nič si z toho nerobte. Pri praktickom zostavovaní aplikácie iste všetky závislosti zdarne pochopíte. Pre názornosť pridávam síce nie vývojový, ale orientačné diagram.

Teraz sa presunieme k praktickej časti.

Vytvorenie HTML šablóny

Vytvoríme si .html dokument. Ak sa programovanie chvíľu venujete, máte už určite svoj obľúbený editor. Ja používam Bluefish.

Hlavička dokumentu bude obsahovať okrem základných povinných zložiek HTML odkaz na súbor JavaScriptu, konkrétne 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 tele dokumente si pripravíme bloky pomocou elementov div a priradíme im Id, podľa ktorých sa budeme v dokumente orientovať. Mimo nadpis si pripravíme blok, kam vypíšeme skúšané slovo a tlačidlo "ďalší", vytvorené priamo v JavaScripte pomocou funkcií rozhrania DOM. Pre umiestnenie objektu do HTML použijeme metódu getElementById () (viac teória ohľadom DOM ľahko vyhľadáte v iných seriáloch).

Vytvorenie tabule

Teraz si vytvoríme nový súbor slovicka.js. Môžeme rovno začať písať kód bez akejkoľvek hlavičky.

Vytvoríme si objekt DOM typu "button" - tabuľu pre vypisovanie slovíčok "tabuleBtn". Objekt uložíme do premennej pomocou kľúčového slova var.

Deklarujeme premennú "preložené" typu boolean, ktorá bude rozhodovať, či sa na tabuli vypíše slovo alebo jeho preklad.

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

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

Napíšeme funkciu vypisSlovo () so vstupnými parametrami slovo a preklad. Táto dvojica parametrov bude pri behu aplikácie odoslaná funkcií skúšajte ().

Funkcia vypisSlovo () pridá na tabuľu slovo a po kliknutí zobrazí jeho preklad. O tom, či sa na tabuli vypíše slovo alebo jeho preklad, bude rozhodovať hodnota premennej preložené.

Vybraný text sa pripojí k objektu tabuleBtn atribútom tabuleBtn.textContent.

Tabuľu vyvěsíme funkcií appendChild () do príslušného bloku HTML vybraného metódou getElementById (), konkrétne 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 metódu onclick (), ktorá spustí funkciu Preložte ().

Funkcia preloží () zmení hodnotu premennej preloženie (true-false) a zavolá späť funkciu 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);
}

Teraz si už môžeme script vyskúšať. Napíšeme si funkciu window.onload (). Obsah tejto funkcie sa spustí pri načítaní okna.

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

Miesto slova a prekladu si do parametrov funkcie vypisSlovo () napíšeme ľubovoľný textový reťazec alebo premennú typu string.

Vyskúšame, či funguje metóda onclick () a či sa správne prepína premenná preložené.

Výsledok si už môžete pozrieť vo webovom prehliadači.

Test tabule v JavaScripte - Objektovo orientované programovanie v JavaScriptu

Než sa rozlúčime, upravíme štýl tabule, aby sme na ňu lepšie videli .

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

Príkazy pre zmenu štýlu sú rovnaké ako v CSS. Štýl definovaný JavaScriptom v tvare objekt.style zmení štýl definovaný v CSS súbore nie naopak.

Výsledok vyzerá takto:

zväčšená tabule - Objektovo orientované programovanie v JavaScriptu

Teraz si môžete podobným spôsobom do dokumentu pridať štartovacie tlačidlo. Nabudúce si zadáme pole so slovíčkami a začneme skúšať.

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 79x (1.11 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísala Katuki Shimanova

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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