Soutěž: Machr na JavaScript - Interaktivní výběr intervalu
Zadání
V tomto machrovi si zkusíte naprogramovat výběr intervalu, který umožní uživateli zadat rozsah od a do. Příklad najdete v různých eshopech a srovnávačích, kde obvykle můžete vyhledávat produkty v cenovém rozmezí. Odstrašujícím příkladem je heureka, kde se hodnoty zadávají do textových políček a ukázkový příklad je v eshopu CZC, kde máte interaktivní posuvník. Je jen na Vás jak to uděláte. Můžete udělat přesně to co je na CZC, ale kreativitě se meze nekladou. Jako minimum si stanovme, že script dostane hraniční hodnoty a mezi nimi v nejjednodušším případě zobrazí posuvník.
Můžete použít jQuery. Tentokrát nesmíte použít JavaScriptové nadstavby.
Hodnotit se bude spousta věcí. Mimo jiné tentokrát dostanete +10 (což je celkem dost) pokud naimplementujete nějakou (alespoň trochu užitečnou) feature, kterou nebude mít naimplementovanou nikdo jiný. Očekává se, že aplikace bude použitelná a i intuitivní na mobilním telefonu. Do poznámky připište co si myslíte, že bude ta unikátní feature (pokud bude).
Výhra
Vítěz dostane placku Machr, pár samolepek a ocenění do portfolia.
Výsledky
| Jméno | bodů | Řešení ( Stáhnout vše ) |
|---|---|---|
| Neaktivní uživatel | 70 | Stáhnout řešení |
| dave_23 | 70 | Stáhnout řešení |
| alfonz | 65 | Stáhnout řešení |
| Jan Lupčík | 60 | Stáhnout řešení |
| Ondřej Pohořelý | 0 | Stáhnout řešení |
| Pokusný králík | 0 | Stáhnout řešení |
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Jan Lupčík:30.11.2015 20:05
Počkat, počkat, počkat ... JS jako .exe? Vážně? 
//EDIT: jinak se taky o něco pokusím. 
Neaktivní uživatel:2.12.2015 13:04
Dotaz: mala vypomoc od stackoverflow komunity, resp funkce drag se bere jako knihovna? Sam jsem na drag prisel, ale ne na containment, tedy aby mi to nevyjizdelo mimo nejake hranice.
PS: sorry ze pisu bez diakritiky, jsem na skolnim pc a prez linux ve virtualu
da obejit zablokovani internetu a jsem moc liny vzdy nastavovat klavesnici na ceskou....
Neaktivní uživatel:3.12.2015 22:44
Budou nějaký bonus bodíky za prezentaci schopností, menší dokumentaci a
několik stylů sliderů?
Díky všem za účast, zde jsou výsledky:
Ondřej Pohořelý - 0 bodů
diskvalifikace
Neaktivní uživatel - 70 bodů
První věc, která mě u tvého kódu trochu zarazila je, že jeho implementace
neobsahuje jediný komentář. Dále by bylo vhodné zvážit rozdělení kódu
do více než 2 metod. Nicméně v kódu je vidět, že jQuery využíváš
opravdu naplno a výsledkem je, že tě opravdu odstiňuje od těch špatných
vlastností JavaScriptu. Využíváš i takových „skrytých“ částí
JavaScriptu, jako je operátor in. Trošku zvláštně kombinuješ styly psaní
závorek. U funkcí je obvykle píšeš až na nový řádek
this.GetValues = function()
{
...
}A u callbacků je obvykle zase píšeš na stejný řádek.
el.on("slider:handlerMove", function(){
...
});Některé řádky jsou doslova hnusné, třeba
if(x>bor_x_min) x = (drg_x + drg_w) < bor_x_max ? drg_x : bor_x_max - drg_w;Opět zde kombinuješ několik stylů psaní kódu, zatímco v podmínce mezi operátorem a operandy mezery neděláš, v tom za podmínkou je zase děláš. Tady jde přesně vidět, že tomu schází komentář. Na první pohled je tam totiž podmínka s nějakým ternárním operátorem. Pak si teprve člověk všímá, že je tam nějaké větší než a menší než. Opravdu by zde bylo vhodné zvážit rozdělení na více řádku a nějakého komentáře.
Asi 4 řádky v kódu jsou strašně dlouhé, třeba řádek 141, kde si mezi operátory (až na operátor * skoro u konce) raději nedělal mezery. Co třeba ten výpočet rozdělit do proměnných?
Aplikace funguje, ale ne moc dobře. Když táhnu posuvník, vyjedu z posuvníku a pustím, posuvník zůstane uchycený. V kódu totiž máš
$drag.parents().on("mousemove", function(e) { ... }dave_23 - 70 bodů
Než se přesunu k hodnocení JS kódu, zastavil bych se u HTML a CSS, kde
používáš pro označování id a class 2 různé notace. Např jeden element
má id maxCena (CammelCase) a druhý má cena-horniMez (obojživelník
pomlčkové notace a CammelCase). V civilizovaném světě také platí, že
jazyk, kterým se domluví všichni je Angličtina, takže by nebylo na škodu
přejmenovat vlastnosti na anglické názvy.
Kód má jednu podstatnou chybu a to, že není objektový. Kvůli tomu ti to zvládne obsloužit jeden jediný posuvník na stránce, který ku všemu musí existovat už při načítání stránky. Kód je dobře dokumentovaný, řádky jsou adekvátně dlouhé a důkladně si hlídáš styl spaní kódu (opomeneme-li incident v CSS a HTML).
Funkce ZmenaDolniHodnoty a ZmenaHorbniHodnoty jsou si moc podobné, jen tam jsou popřeházeny rovnítka, šlo by je sloučit do jedné.
Funguje ti to však velmi dobře, je to plynulé, bez problémů. Jsi jediný u koho je aplikace plně použitelná (hodnoceno z uživatelského hlediska, podle kódu určitě ne).
Vzhled je takový zastaralý, designově to lze vychytat. Už třeba přidat tam nějaký jednoduchý přechod nebo nějaká šipečka v posuvníku by tomu pomohla, ne všechno jednobarevné je hezké.
+10 za plně funkční a uživatelský přívětivou aplikaci
Jan Lupčík - 60 bodů
Kód je dobře komentovaný, ale není vůbec objektový. Funkce updateSelected
a updateNumber jsou poněkud dlouhé, bylo by vhodné je rozdělit do více
menších. Chválím využití HTML5 drag and drop API. Nevýhoda toho API však
je, že není dotažené do konce a navíc ho nepodporují některé webové
prohlížeče. Když i mírně vyjedu z elementu, prostě to přestane fungovat.
Ono to ale konec konců ani moc nefunguje v ramci toho lementu. Moc jsem
nepochopil, proč by mělo být úplné maximum větší o 107. Obecně je tam
hodně těřko pochopitelných konstant. Třeba například:
percents = (percents <= 5) ? 5 : percents;Proč zrovna 5?
Tvé řádky sice splňují jakousi standardní přijatelnou délku, ale zato jsou některé příkazy (a hlavně výpočty) rozdělená na strašně moc řádku. Např.:
var fromRight = Math.abs(Math.round(((value + (maximum - 107)) /
(maximum - 107) * (parseInt($(".select").css("width")) -
parseInt($(".arrow").css("width")) * 2) / 10000) -
parseInt($(".select").css("width")) +
parseInt($(".arrow").css("width")) * 2));Proč to nerozdělíš do proměnných a na mezivýpočty?
Pokusný králík - 0 bodů
pokus
alfonz - 65 bodů
Kód je dobře strukturovaný a objektový. Aplikace je však náchylná na
vyjetí myši z elementu, čímž to přestane fungovat a je to dost
nepraktické. Metody jsou však velmi dlouhé a bylo by vhodné zvážit, zdali
není lepší to rozdělit na více menších. Příprava scriptu probíhá
přímo v elementu <script> v html, což by nemělo. V projektu máš
jQuery, ale ani zdaleka ji nevyužíváš naplno. Třeba např.:
//Copy html to each element
var arr = $(selector);
for (var i = 0; i < arr.length;i++)
{
...
}To lze s jQuery napsat jako.
$(selector).each(function (index, item) {
$(item).append(this.createHtml($(item).attr("data-name")));
}.bind(this));V kódu používáš self. Což nemusíš, lze to vyřešit elegantněji (čím složitější kód, tím víc oceníš „eleganci“ toho řešení).
var self = this;
$(document).mousedown(function () {
self.mouseDown = true;
}).mouseup(function () {
self.mouseDown = false;
});Lze napsat jako:
$(document).mousedown(function () {
this.mouseDown = true;
}.bind(this)).mouseup(function () {
this.mouseDown = false;
}.bind(this));Bind (což je metoda objektu Function) ti vytvoří novou funkci, ale za this fixně dosadí to, co mu předáš, umí to i s parametry, ale to tě v tomto okamžiku moc nemusí zajímat.
Tvá aplikace jako jediná vypadá k světu, ale funkčnost Je velmi omezující. Poznámka, že si myslíš, že budeš jediný kdo, to bude mít objektové a že si to samo vygeneruje HTML, které k funkčnosti potřebuje, mě trochu překvapila. O to smutnější však je, že jsi opravdu byl jediný, kdo v tom měl náznak objektového myšlení.
+10 za relativně objektový kód
Tentokrát placku nikdo nezískává, snad někdy příště.
+5 Zkušeností
Jan Lupčík:5.12.2015 16:00
Nevím, proč 5. Ale prostě bez toho to dobře vyjíždělo z toho
intervalu.
Jinak díky za hodnocení a za machra. Byl to hodně zajímavý nápad udělat
něco takového. A určitě se podívám na kódy ostatních. Že,
alfonz?
Neaktivní uživatel:5.12.2015 21:21
Dotaz: jak se odebírají obsluhy událostí? Jinak supr machr, s js moc
nedělám a dělal jsem v podstatě poprvé něco jako jQuery plugin Jinak o tom bugování jsem
věděl, je to tam napsaný i jako Known bugs myslim ale nevěděl jsem jak to
eliminovat.
BTW: výpočty jsem zvyklý dělat na jeden řádek, i když je delší, líp
se v tom orientuju a ty různý zápisy závorek jsou tam kde mi to automaticky
generovalo IDE:
function(){
}
a tam kde to píšu celé já tak mám začátek složený závorky na
newline
Zobrazeno 31 zpráv z 31.