Hviezdičkové hodnotenie v JavaScripte

Vítam Vás pri tutoriálu, v ktorom si vytvoríme hviezdičkové hodnotenie. Cieľom tohto tutoriálu je ukázať, ako možno veľmi jednoducho vytvoriť script, ktorý efektívne a elegantne obslúži hviezdičkové hodnotenie, ktoré potom môžeme využiť napríklad pri tvorbe formuláre pre odosielanie hodnotenie nejakého produktu v eshope, článku v redakčnom systéme a podobne.

ukážka scriptu

Návrh scriptu a využívanej technológie

Na úvod pred akoukoľvek tvorbou je dobré si povedať, ako budeme postupovať a čo budeme využívať. U zložitejšie scriptov je to samozrejme ťažšie, ale vždy je dobré si uvedomiť aspoň zbežný postup a miesto, kde je dobré začať. Hoci sa vám to nemusí pozdávat ako dôležité, výber "miesta", kde začneme, hrá veľmi dôležitú úlohu. Akú radosť z tvorby budete mať u zložitejšie scriptov, keď budete veky programovať niečo, čo nič nebude robiť a ako moc (alebo málo) bude výsledok kvalitné? Predstavte si, že pečiete tortu, čím začnete? Polevou alebo cestom? Keď začnete polevou a potom na ňu dáte cesto, asi to moc nebude držať a bude to vyzerať zvláštne. Pri programovaní je to úplne rovnaké, len sa nejedná o tortu.

Základným princípom a požiadavkou na náš script je jednoduchosť - script nebude mať viac ako 40 riadkov zdrojového kódu. Vďaka tomu je script veľmi prehľadný aj bez komentárov. A je celkom jasné hneď na prvý pohľad čo kód robí. Aj napriek tomu je dobré kód aspoň zbežne komentovať, zvlášť v menej prehľadných častiach.

Script bude hviezdičkové hodnotenie iba obsluhovať, nebude ho vytvárať, vďaka tomu to budeme mať trošku zjednodušené.

Reprezentácie vo formulári

Pretože využívať ho budeme vo formulári, budeme mať okolo hviezdičiek skrytý input, do ktorého budeme ukladať počet označených hviezdičiek. Tento input potom server spracuje. Inými slovami, server uvidí textové políčko, používateľ hviezdičky.

Manipulácia s HTML

Pretože hviezdička je nejako reprezentovaná v HTML, využijeme knižnice jQuery, ktorá nám uľahčí manipuláciu s jeho obsahom.

Hviezdička

Teraz prichádza rad na samotnú hviezdičku. Je niekoľko možností ako ju reprezentovať. Prvá možnosť je reprezentovať ju obrázkom.

Metóda obrázkov je v súčasnej dobe stále najčastejšou reprezentácie hviezdičiek na webových stránkach. Avšak je potrebné si uvedomiť, že obrázky sú potrebné minimálne dva - jeden s neoznačenú hviezdičkou a jeden s označenou. Naviac sa obrázky musia načítavať, čo jednak vytvára u koncového užívateľa nepríjemnú oneskorenie, kedy má užívateľ zo stránky pocit, že zamrzla. Druhá nevýhoda je, že načítanie obrázkov si musíme samozrejme v JavaScripte ošetriť, čo je zbytočne pracné a možno to aj bez toho.

Obrázková písma

Lepšie variantom je využiť obrázkových písiem. Obrázková písma sú samozrejme oveľa výhodnejšie, pretože o načítanie písiem sa nemusíme starať, načítavajú sa pri načítaní stránky, takže keď používateľ hodnotenia používa, písma sú už neprevzali a implementácie je jednoduchšie. Nemusíme meniť žiadne obrázky, ale iba zmeníme jedno písmeno (resp. Triedu, ale o tom neskôr). Výhodou je, že hviezdičky môžeme napríklad veľmi ľahko podľa ľubovôle prefarbiť. Nevýhoda obrázkových písiem je nekompatibilita s veľa starými prehliadačmi, ale to dnes v podstate vôbec nevadí, pretože 90% užívateľov internetu používa moderné prehliadač.

Potom si samozrejme musíme povedať, aké obrázkové písmo použijeme. Existuje niekoľko používaných variantov, ktoré naozaj stoja za to. Medzi tie najpoužívanejšie patrí Font Awesome a písmo v CSS frameworku Bootstrap. Bootstrap je v množstve projektov už predvolené súčasťou (tak ako jQuery), preto využijeme práve ho.

Implementácia

Prejdime od plánovania k realizácii. Na úvod je potrebné naimportovať si všetky frameworky. Budeme využívať tzv. CDN serverov, ktoré slúžia na načítanie práve takýchto scriptov. Vďaka nim nemusíme mať scripty a štýly frameworkov na svojom vlastnom serveri, ale budeme odkazovať na nejaký cudzí server.

jQuery importujete scriptom:

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

a pre Bootstrap sú potrebné dva štýly 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šimnúť, že každý Attribut src a href neodkazuje na náš server, ale práve na servery jQuery a Bootatrapu.

Nakoniec si vytvoríme script pre náš vlastný zdrojový kód a importuje ho do stránky. Aby sme mali scripty synchronizované, pomenujte si ho review.form.js.

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

Testovacie formulár

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

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