Body zdarma Body zdarma
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde

Navrhujeme doplněk webu v JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V tomto článku si zkusíme naprogramovat doplněk pro interaktivní stránky v JavaScriptu. Náš doplněk bude fungovat plně automaticky, tvořit budeme kulatý progress bar. K vykreslování použijeme canvas s data-* atributy. V tomto článku to nebudu uvádět step-by-step postupem, jak jste asi zvyklí, ale vždy vás pouze nakopnu (snad) správným směrem. Stejně tak článek počítá s tím, že jste studijní typy a dokážete použít google. I kdybyste nechtěli tvořit celý komplet, tak si můžete stáhnout přiložený zdrojový kód (dole pod článkem) a upravit ho tak, aby byl lepší a dokonalejší.

Někde se začít musí

Většina lidí začíná tím, že si představí výsledek. To je sice fajn, ale když pak začínají psát, pořád mají tu představu. Začněte jinak, představte si svůj výsledek, když jste jej ořezali na minimum. Toto se vám bude dělat mnohem lépe a té první představy dosáhnete mnohem rychleji. Stejně tak je dobré začít právě tím základem. Jestliže začnete vykreslováním textu doprostřed, při dodělávání samotného progress baru zjistíte, že to není až zas tak snadné a přitom je.

Začneme samotným skriptem, který bude obsluhovat každý canvas s atributem data-procent. K tomuto účelu nám dobře poslouží metoda document.query­SelectorAll(), která v parametru dostává CSS selektor a vrátí nám pole elementů, které by ovlivnil tento selektor. Pro vybrání všech canvasů s atributem data-procent použijeme selektor canvas[data-procent], po načtení stránky tedy projdeme pomocí querySelectorA­ll("canvas[da­ta-procent]"), který nám vrátí přesně ty canvasy co potřebujeme.

Nyní si vytvoříme objekt, který bude zastupovat náš kulatý progress bar. Objekty jsou v JavaScriptu jeden velký kámen úrazu. Definují se totiž konstruktorem, což je jednak už od pohledu divné, špatně se v tom orientuje a tím se nám občas i změní docela jasné proměnné i nabobtná pomocný kód. Nicméně se na objekty v JavaScriptu podívejme z té druhé stránky, jakmile by se naše progressbary rozrostly, projekt by se automaticky stal natolik složitý, že bez dobrého návrhu bychom se dříve nebo později dostali do bodu, kdy jsme na dosavadním projektu víceméně pouze ztratili čas. Ačkoli tedy s objekty ze začátku budeme zápasit, nebudeme se jim za žádnou cenu vyhýbat.

Objekt v JavaScriptu definujeme ve funkci, tam načteme všechny vlastnosti. Metody se definují přes prototype této třídy. Vlastnosti ukládáme přes klíčové slovo this. Jako jednoduchou ukázku kódu použijeme třídu pro osoby, na které to lze všechno docela pěkně vidět.

function Clovek(jmeno, vek) {
        this.jmeno = jmeno;
        this.vek = vek;

        Clovek.prototype.Pozdrav = function () {
                alert("Jmenuji se " + this.jmeno + " a je mi " + this.vek + " let.");
        }
}

var karel = new Clovek("Karel", 34)
karel.Pozdrav();
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Zde vytváříme 34 letého Karla a necháme ho, aby nás pozdravil. V našem doplňku nám bude stačit jen jeden objekt, ten bude reprezentovat právě náš Progressbar. Objekt by mohl mít metody pro aktualizaci stavu a vykreslení, případně by mohl obsahovat metody pro vykreslování jednotlivých částí, čímž se kód zpřehlední. Jednotlivé metody a celkový kód nezapomeňte zdokumentovat, velmi vám to pomůže vyznat se v už tak dost nepřehledných objektech. Pro dokumentaci můžete použít třeba nějakou syntaxi, je jich hodně, můžete použít třeba JSdoc. Zápis JS doc se příliš neliší od dokumentace používané v Javě, naši metodu Pozdrav v člověkovi bychom mohli zdokumentovat následovně:

/**
 * @author Misaz
 * Představí člověka
*/
Clovek.prototype.Pozdrav = function () {
        alert("Jmenuji se " + this.jmeno + " a je mi " + this.vek + " let.");
}

Vykreslování

Vykreslování na plátno je zprostředkováno kontextem, na kterém se volají jednotlivé metody pro vykreslování. Budou vám bohatě stačit metoda arc(), která bere různé parametry a vykreslí část kruhu. Pozor si dávejte na to, že všechny úhly nejsou ve stupních, ale v radiánech. Vzorec pro převod stupňů na radiány je

Radiany = PI / 180 * stupně

Pokud převod budete používat častěji, vložte si to do funkce někde mimo. Velmi zajímavé je si tu funkci vložit přímo do interních Math. V JavaScriptu je to snadné, prostě přiřadíte do požadovaného názvu v Math (vytvoříte si nový, nic nepřepisujete) onu funkci. Tímto zakomponujete vaši funkci do již existujících a čistota kódu je zachována.

Math.deg2rad = function (degrades) {
        return Math.PI / 180 * degrades
}

Aby metoda arc() fungovala podle vašich potřeb, je potřeba si pohrát s cestami. Cestu otevřete metodou beginPath(), ukončíte closePath() a vykreslíte přes fill(). Ta vyplní uzavřenou cestu a stroke vykreslí pouze obrys.

Animace

Abyste docílili efektu animace, musíte v určitém intervalu volat vykreslování a aktualizaci stavu. K tomu můžete použít dvě varianty. Můžete nastavit interval nebo odpočet s tím, že odpočet byste pak museli v každém kroku nastavit nový. Na první pohled se může zdát, že interval je tedy lepší, ale opak je pravdou. Interval běží stále, i když není potřeba – animace přeci nebude nekonečná. Toto sice na běžném moderním počítači s obvykle 2 a více jádrovým procesorem nejde poznat, ale na mobilu se to výrazně negativně projeví na výdrži baterie (v dnešní době velký problém) a u některých telefonů i přehřívání (ale toho se většinou nevyhnete tak či tak). Osobně vám tedy s ohledem ke koncovému uživateli doporučuji metodu odpočtu, nastavíte ji metodou setTimeout(). Pokud jste se i přesto rozhodli pro interval, tak ten nastavíte přes metodu setInterval(). I pro interval je tu ještě jedna možnost, která by řešila problém zbytečných aktualizací a to návratovou hodnotu si někam uložit a v okamžiku konce animace zavolat clearIterval(), do parametru předáte právě proměnnou. Ve výsledku to může vyjít na stejno a je jen na vás, která varianta se vám více líbí.

Pokud jste animace v JavaScriptu nikdy nedělali a nejste v tom zběhlí, tak se vám možná budou na úvod hodit jednoduché tipy pro jejich tvorbu. Jestliže by se měl progressbar animovat, tak se bude hodnota většinu času pohybovat někde uvnitř. Nejprve to bude 0, pak 1, 2, 3 a nakonec to bude třeba 75 uložených v attributu data-procent (ten který jsme ověřovali selektorem). K zařazení této pohybující se proměnné do aplikace máte opět dvě varianty. První varianta je ta, že to budete celou dobu animace předávat v parametru, ta druhá, že si vytvoříte pomocnou proměnnou (osobně je pro přehlednost označuji tím, že začínají podtržítkem). Druhá mi osobně přijde o trochu lepší, protože dělali byste animaci, která může přibývat nebo ubývat (možná si říkáte na co ubývání, to proto, že jakmile implementuje obsluhu události pro změnu parametru, tak uživatel může zadat hodnotu menší než je dosavadní), tak musíte použít buď inkrementaci, nebo dekrementaci, ačkoliv to jde udělat všechno i v parametru přijde mi hezčí varianta pracovat s vlastností.

DOMsubtreeModified

Abychom mohli nějak za běhu kontrolovat změny parametrů, tak máme (jako už asi již tradičně) dvě možnosti. Ta první je, že budeme v určitém časovém intervalu kontrolovat každou hodnotu anebo si odchytíme událost DOMsubtreeModified. Ta se vyvolá vždy v okamžiku, když se cokoliv změní v stromu DOM. Ačkoli by tuto událost měli správně zpracovat všechny prohlížeče, zjistil jsem, že v Google Chrome nefunguje. Neustálá kontrola atributů je jednak asi mírně složitější, kód je méně přehlednější, jelikož tam je kolem toho spousta pomocného kódu a jak již jsem zmiňoval v odstavci o animacích, pro mobilní zařízení to není to pravé ořechové. Proto si odchyťte DOMsubtreeModified a obslužte si to podle libosti.

Možná vylepšení

Tímto byste měli mít progreessbary hotové a můžete se pustit do implementace dalších vylepšení, dbejte vždy na dobrý návrh, přemýšlejte a věřte, že přepisovat kód na pětkrát je zcela normální, někdy si to ani neuvědomujete. Nakonec vám vypíši, co byste mohli doimplementovat.

  • Volitelné animace, dejte možnost i neanimované verze, můžete použít attrbtu data-*
  • Možnost nastavování různých barev pro pozadí i samotný progress
  • Umožnit nastavení startovního úhlu, u některých aplikací se hodí víc když pregress začíná třeba v 3/5.
  • Podpora různé výšky šířky. Můžete třeba vycentrovat obsah, k tomu se dobře hodí možnost posunutí kontextu u plátna.

Doufám že se vám tento článek líbil, něco jste se přiučili, ale hlavně doufám že byl pro vás přínosný a vaše nadcházející výsledky v JavaScriptu budou zase o trochu lepší.

Doporučuji se zkoušet zapojovat do zdejších minisoutěží Machr na JavaScript. Trénujete nejen JavaScrit, ale i schopnost řešit určitou úlohu rychle a celý projekt stihnout dokončit do deadline. V Machru na JS se nehodnotí jenom výsledek, ale i zdrojový kód. A právě tento článek vás měl navést správnou cestou a dát vám některé tipy k správnému návrhu a psaní hezkého a dobře čitelného kódu. Právě kulatý progressbar je úloha jednoho předchozího machra. :)


 

Stáhnout

Staženo 514x (2.36 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
6 hlasů
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.
Předchozí článek
Dokončujeme zajímavé interaktivní menu v JavaScriptu
Všechny články v sekci
Objektově orientované programování v JavaScriptu
Miniatura
Následující článek
Zkoušení slovíček v JavaScriptu 1 - Tabule
Aktivity (1)

 

 

Komentáře
Zobrazit starší komentáře (18)

Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:15.4.2014 12:32

To nic nemění na tom, že to simulovat jde, když to tak nutně potřebuješ. Nicméně jsem moc nepochopil význam té události.

 
Odpovědět 15.4.2014 12:32
Avatar
šíma
Člen
Avatar
šíma:16.12.2018 13:18

nefunguje to :-(

Odpovědět 16.12.2018 13:18
šíma = programátor !!!
Avatar
 
Odpovědět  +1 17.12.2018 8:09
Avatar
Patrik Pastor:17. dubna 21:13

co to jako je??

<canvas width="100" height="100"
data-procent="45"
data-animovane
data-barva="#FF0000"
data-pismo="calibri"
data-popisek="Down"
data-startovni-uhel="225"></­canvas>
<canvas width="100" height="100"
data-procent="10"
data-animovane
data-barva="#FF0000"
data-pismo="'Segoe UI symbol'"
data-popisek=""
data-startovni-uhel="225"></­canvas>

<canvas width="100" height="100"
data-procent="85"
data-popisek="HTML\numím na\n%%%%"></canvas>

<canvas width="200" height="200" id="hrajtesi"
data-procent="45"
data-animovane
data-barva="rgb(66, 177, 10)"
data-barva-pozadi="#B1F100"
data-pismo="calibri"
data-popisek="Hrajte\n si!"></canvas>

Jak mam vedet za mam takhle zacit, predstavil jsem si jeden canvas pro progres bar (jeste sem si hledal co to vlastne je), ale clanek pokracoval, vyberem VSECHNY canvasy..... Proc je tam vice kanvasu? (nema prece plnit funkci dalsich procent prave ten jeden kanvas - to "nacitani" nebo proc tam jsou random canvasy pro random procenta? (myslim, 10, 45, 75, 100 - tak nejak to tam myslim bylo), ja jsem si teda nepredstavil, ze bych progress bar zacinal se 4 canvasy pro 4 random procenta, vubec sem nepochopil autora na zacatku, mohl by to psat trochu lepe srozumitelneji.

 
Odpovědět 17. dubna 21:13
Avatar
Odpovídá na Patrik Pastor
Michal Žůrek - misaz:18. dubna 0:06

Je to ze soutěže, jejiž cílem bylo udělat jednu komponentu, která může být na stránce vícekrát. Tento článek není step-by-step tutorial. Prostě si ho přečti a zkus to naprogramovat sám, bez ohledu na to jak vypadá moje řešení. (tvoje řešení bude nejspíš diametrálně odlišné, ale to vůbec nevadí). Klidně si to udělej jako jeden canvas, když ti to víc vyhovuje.

 
Odpovědět 18. dubna 0:06
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Michal Žůrek - misaz
Patrik Pastor:18. dubna 13:54

aha chapu, je to ze souteze, ale potom by bylo dobre uvest i podminky (nebo cile, jak jsi zminil) k teto soutezi, tedy ze se maji vykrslit vice canvasu, takhle ten clanek pusobi nedodelany a muze nekoho zmast, kdyz zacnes psat jakoby z prostredka (kor kdyz to neni prave step-by-step), stacilo pouze par informaci k okolnosti vzniku. dik

Editováno 18. dubna 13:54
 
Odpovědět 18. dubna 13:54
Avatar
Odpovídá na Patrik Pastor
Michal Žůrek - misaz:19. dubna 10:50

ta soutěž už byla. To co si můžeš stáhnou je jedno z řešení.

 
Odpovědět 19. dubna 10:50
Avatar
Odpovídá na Michal Žůrek - misaz
Patrik Pastor:19. dubna 21:59

o soutez vubec nejde ale o informaci ke clanku. Pokud se CLANEK tyka souteze, a v ni jsou napriklad pravidla (za ma byt vice canvasu) tak by bylo dobre to zminit i ve clanku, kde se snazis napovedet k reseni, ale stejne zacnes z prostredka, takze ctenar je potom zmateny. Ze soutez probehla, je uplne putna. Jde o informaci ke clanku, protoze ten ctu, zadnou soutez.

 
Odpovědět 19. dubna 21:59
Avatar
Odpovídá na Patrik Pastor
Michal Žůrek - misaz:20. dubna 22:20

Tady tyto soutěže (okolo roku 2014) fungovali tak, že se na fóru (teré tehdy nebylo striktně omezeno na dotazy, ale využívalo se i všelijak jinak) byl zadán každý týden úkol a kdo to vyřešil nejlíp, tak dostal placku (takovou tu třeba na batoh) takovou jako je na obrázku dole v článku.

Podmínkou získání placky bylo, že to ešení tu bude na věky věků zveřejněno jako článek a to je v tomto případě tento článek.

Zadání (a průběhú) je zde: https://www.itnetwork.cz/…2e7da4c2e544

Pomocí vyhledávače jdou najít i další soutěže, které se historicky řešili. Každý má v profilu placky, které získal, takže si můžeš rozkliknout můj profil a tam bude 12 placek, které jsem získal, můžeš si zkusit ty programy naprogramovat taky.

 
Odpovědět  +1 20. dubna 22:20
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek - misaz
David Čápka:21. dubna 13:29

Ony byly pokusy je oživit ještě poměrně nedávno. Měl bych tu teď mít výrazně více času než předtím, možná by se s tím dalo zas něco zkusit.

Odpovědět 21. dubna 13:29
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
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.

Zobrazeno 10 zpráv z 28. Zobrazit vše