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ě.
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ě.