Hvězdičkové hodnocení v JavaScriptu

JavaScript Hotová řešení Hvězdičkové hodnocení v JavaScriptu

Vítám vás u tutoriálu, ve kterém si vytvoříme hvězdičkové hodnocení. Cílem tohoto tutoriálu je ukázat, jak lze velmi jednoduše vytvořit script, který efektivně a elegantně obslouží hvězdičkové hodnocení, které pak můžeme využít například při tvorbě formuláře pro odesílání hodnocení nějakého produktu v eshopu, článku v redakčním systému a podobně.

Hvězdičkové hodnocení produktu

Ukázka scriptu

Návrh scriptu a využité technologie

Na úvod před jakoukoliv tvorbou je dobré si říct, jak budeme postupovat a co budeme využívat. U složitější scriptů je to samozřejmě těžší, ale vždy je dobré si uvědomit alespoň zběžný postup a místo, kde je dobré začít. Ačkoliv se vám to nemusí pozdávat jako důležité, výběr "místa", kde začneme, hraje velmi důležitou roli. Jakou radost z tvorby budete mít u složitější scriptů, když budete věky programovat něco, co nic nebude dělat a jak moc (nebo málo) bude výsledek kvalitní? Představte si, že pečete dort, čím začnete? Polevou nebo těstem? Když začnete polevou a pak na ni dáte těsto, asi to moc nebude držet a bude to vypadat zvláštně. Při programování je to úplně stejné, jen se nejedná o dort.

Základním principem a požadavkem na náš script je jednoduchost - script nebude mít více než 40 řádků zdrojového kódu. Díky tomu je script velmi přehledný i bez komentářů. A je docela jasné hned na první pohled co kód dělá. I přesto je dobré kód alespoň zběžně komentovat, zvlášť v méně přehledných částech.

Script bude hvězdičkové hodnocení pouze obsluhovat, nebude jej vytvářet, díky tomu to budeme mít trošku zjednodušené.

Reprezentace ve formuláři

Protože využívat jej budeme ve formuláři, budeme mít okolo hvězdiček skrytý input, do kterého budeme ukládat počet označených hvězdiček. Tento input poté server zpracuje. Jinými slovy, server uvidí textové políčko, uživatel hvězdičky.

Manipulace s HTML

Protože hvězdička je nějak reprezentována v HTML, využijeme knihovny jQuery, která nám usnadní manipulaci s jeho obsahem.

Hvězdička

Nyní přichází řada na samotnou hvězdičku. Je několik možností jak ji reprezentovat. První možnost je reprezentovat ji obrázkem.

Metoda obrázků je v současné době stále nejčastější reprezentace hvězdiček na webových stránkách. Nicméně je třeba si uvědomit, že obrázky jsou potřeba minimálně dva - jeden s neoznačenou hvězdičkou a jeden s označenou. Navíc se obrázky musí načítat, což jednak vytváří u koncového uživatele nepříjemnou prodlevu, kdy má uživatel ze stránky pocit, že zamrzla. Druhá nevýhoda je, že načítání obrázků si musíme samozřejmě v JavaScriptu ošetřit, což je zbytečně pracné a lze to i bez toho.

Obrázková písma

Lepší variantou je využít obrázkových písem. Obrázková písma jsou samozřejmě mnohem výhodnější, protože o načítání písem se nemusíme starat, načítají se při načtení stránky, takže když uživatel hodnocení používá, písma jsou již načtena a implementace je jednoduší. Nemusíme měnit žádné obrázky, ale pouze změníme jedno písmeno (resp. třídu, ale o tom později). Výhodou je, že hvězdičky můžeme například velmi snadno podle libosti přebarvit. Nevýhoda obrázkových písem je nekompatibilita s hodně starými prohlížeči, ale to dnes v podstatě vůbec nevadí, protože 90% uživatelů internetu používá moderní prohlížeč.

Poté si samozřejmě musíme říci, jaké obrázkové písmo použijeme. Existuje několik používaných variant, které opravdu stojí za to. Mezi ty nejpoužívanější patří Font Awesome a písmo v CSS frameworku Bootstrap. Bootstrap je ve spoustě projektů již výchozí součástí (tak jako jQuery), proto využijeme právě jej.

Implementace

Přejděme od plánování k realizaci. Na úvod je třeba naimportovat si všechny frameworky. Budeme využívat tzv. CDN serverů, které slouží k načítání právě takových scriptů. Díky nim nemusíme mít scripty a styly frameworků na svém vlastním serveru, ale budeme odkazovat na nějaký cizí server.

jQuery naimportujeme scriptem:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

a pro Bootstrap jsou potřeba dva styly a script:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Můžete si všimnout, že každý attribut src a href neodkazuje na náš server, ale právě na servery jQuery a Bootatrapu.

Nakonec si vytvoříme script pro náš vlastní zdrojový kód a naimportujeme ho do stránky. Abychom měli scripty synchronizované, pojmenujte si jej review.form.js.

<script src="review.form.js"></script>

Testovací formulář

V testovacím formuláři (značka <form>) si vytvořme <input>, type mu nastavme na hidden a pojmenujme si ho třeba stars. V JavaScriptu sice lze elementy vyhledávat podle name, ale je taková tradice, že by se v JavaScriptu s elementy mělo manipulovat s pomocí id, proto mu nastavme id na "rating".

<input type="hidden" name="stars" id="rating" />

Dále si přidejme elementy, které bude script obsluhovat. Protože hvězdičky chceme na jednom řádku, uložíme je do elementu <p> a samotné hvězdičky budou reprezentovány elementem <span> uvnitř elementu <p>.

<form class="review">
        <input type="hidden" name="stars" id="rating" />
        <p>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
        </p>
</form>

Hvězdičky v scriptu budeme podle něčeho vyhledávat. Protože hvězdiček je více, volba padla na class. Přidejme tedy elementům <span> třídu, např. "review-star".

Do JavaScriptu se pustíme příště.


 

  Aktivity (1)

Článek pro vás napsal Michal Žůrek (misaz)
Avatar
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Jak se ti líbí článek?
Celkem (12 hlasů) :
4.833334.833334.833334.833334.83333


 



 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!