Slovníček v JavaScriptu

Pokud chcete na své stránky vložit jednoduchý slovníček, je možné použít JavaScript.

Předem upozorňuji, že se to ani zdaleka nebude podobat třeba slovníku od Googlu. Vkládání slov je velice jednoduché, každé slovo a překlad vždy na jeden řádek odděleno dvojtečkou v uvozovkách. Př. „jedna“ : „one“, 

Živá ukázka kompletního a funkčního slovníčku. Zkuste si do pole „Text“ zadat třeba slovo jedna, dva, pět, nebo třeba dvanáct. Poté stisknout tlačítko „Přeložit“. Pokud slovíčko existuje a je uložené v JavaScriptu, vypíše se jeho překlad (druhé uvozovky), pokud neexistuje, vypíše se ho pole hláška „Chybí překlad!“. Zdrojový kód:

HTML:

<form action="" onsubmit="preloz(this); return false">
    <h3>Online slovníček:</h3>
    <input type="text" onfocus='if(this.value=="Text") this.value=""' value="Text" name="prelozit">
    <button>Přeložit</button>
<input type="text" value="Výsledek" name="prelozeno">
</form>

JS:

// JavaScript Document - CZ/AJ SLOVNICEK

function preloz(el) {
    var slova = {
        "jedna" : "one", 
        "dva" : "two",        
    };

    if (slova[el.prelozit.value]) {
        el.prelozeno.value = slova[el.prelozit.value];
    }
    else {
        el.prelozeno.value = "Chybí překlad!";
    }
}

V kódu JavaScriptu (JS) jsem čeveně vyznačil místa, kam se vkládají slova. Uvedu ještě jednou příklad:

"jedna" : "one", 

Slovo jedna zadává uživatel a slovo one se mu automaticky vygeneruje do vedlejšího políčka pomocí JavaScriptu. Pokud bychom třeba chtěli přeložit slovíčko papír, které zadá uživatel do angličtiny, tedy na slovíčko paper, kód by vypadal následovně:

"papír" : "paper", 
Snad jste to pochopili. Pokud ne, připravil jsem pro Vás oddělenou ukázku pouze se slovem papír. Živá ukázkaDále platí pravidlo, že co nový překlad (tedy dvě slovíčka), to nový řádek. Jednotlivé překlady ještě oddělujeme čárkou na konci ,.

Máte-li připomínky, či dotazy, nebo nápady, nebojte se využít komentářů níže pod tímto článkem.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *