Diskuze: Machr na JavaScript - CountDown

JavaScript JavaScript Machr na JavaScript - CountDown

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Zdravím webové vývojáře! Tento týden si v pravidelné minisoutěži o placku a samolepky naprogramujeme odpočet (countdown) v JavaScriptu. Navrhněte skript, který z následujícího divu:

<div id="odpocet" data-datum="2014-01-27 10:00"></div>

Vytvoří odpočet, který bude zobrazovat zbývající dny, hodiny, minuty a vteřiny do data, předaného v data atributu. Každou vteřinu se samozřejmě hodnota aktualizuje. Snažte se o co nejjednodušší řešení bez použití externích pluginů. Můžete využít čisté jquery. Nejlepší skript bude na devbooku použit k zobrazení zbývajícího času do konce soutěží Machr, tedy pro blaho všech :P

Deadline (ještě bez odpočtu) je v pondělí 27.1. v 10:00

Podrobnější pravidla soutěží naleznete zde: http://www.itnetwork.cz/…outezi-machr

Odpovědět  +1 21.1.2014 16:44
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

co TypeScript, dovoleno nebo zakázáno?

Nahoru Odpovědět  +1 21.1.2014 17:03
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

proč je odpočet id? to nemůže být na stránce více odpočtů?

Nahoru Odpovědět  +1 21.1.2014 17:15
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Vojtěch Mašek (Woyta):

Tak udělej funkci se dvěma parametry (el, time).

Nahoru Odpovědět 21.1.2014 17:18
Výraz "to nejde" není v mém slovníku
Avatar
Odpovídá na Michal Žůrek (misaz)
Vojtěch Mašek (Woyta):

Teda pardon, vlastně s jedním místo žádného...

Nahoru Odpovědět 21.1.2014 17:20
Výraz "to nejde" není v mém slovníku
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na David Čápka
Filip Pýrek:

Má to být tak že si to samo vezme z HTML, nebo se to má přidávat v JS?

Nahoru Odpovědět 21.1.2014 17:23
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Michal Žůrek (misaz):

však já jsem to vyřešil že to funguje bez jakéhokoliv id nebo class :`

Nahoru Odpovědět 21.1.2014 17:31
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:

Můžeš to v něm klidně napsat, ale pak se to sem asi nevyužije, počítat to budu. Klidně dej místo ID class.

Nahoru Odpovědět 21.1.2014 17:40
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

proč bys to nemohl využít? TypeScript se překládá do JavaScriptu a funguje pak normálně soubor *.js

Nahoru Odpovědět 21.1.2014 17:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Filip Pýrek
David Čápka:

Nevím jak to myslíš. Vložím 1 řádek se skriptem do hlavičky a zbytek udělá JS.

Nahoru Odpovědět 21.1.2014 17:42
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:

Protože se tu chci držet určité množiny technologií.

Nahoru Odpovědět  +2 21.1.2014 17:43
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Filip Pýrek
Redaktor
Avatar
Nahoru Odpovědět 21.1.2014 17:45
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

Bere se v potaz i vzhled okolo nebo jenom kód?
A ještě edit: sdraco, proč dáváš deadliny v 10:00? Ve škole máme naprosto mizernou wifi a v pondělí se k ní do 10:00 nedostanu :/ A většinou to dělám o přestávkách :(

Editováno 21.1.2014 19:42
Nahoru Odpovědět 21.1.2014 19:41
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Michal Vašíček
Michal Žůrek (misaz):

Vy máte ve škole wi-fi? wow, tak to je u nás jen sen.

Nahoru Odpovědět  +5 21.1.2014 19:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Vašíček:

:D No jo, ale to je wifi učitelská, ne pro nás, takže musíme běhat do určitých učeben abysme se na ten net dostali :)
A v naší kořenové třídě chytáme wifi gymplu, co je naproti :D

Nahoru Odpovědět 21.1.2014 19:49
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Michal Vašíček
Michal Žůrek (misaz):

vzhled okolo: samozřejmě to můžeš doplnit stylem, ale osobně to dělám tak aby si to každý stylově přizpůsobil sám.

Nahoru Odpovědět 21.1.2014 20:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Vašíček
Benjibs:

1 Učitelská Wifi? :O

My máme 4 wifi pre študentov (každé poschodie 1), 2 pre návštevníkov a tuším 2-3 učiteľské :D

Nahoru Odpovědět 21.1.2014 20:42
1 + 1 = 2
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Benjibs
Michal Vašíček:

No jo, ale pochybuju, že ty chodíš na základku :) A ne, učitelských je asi 5.

Nahoru Odpovědět 21.1.2014 20:43
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Jan Vargovský:

Jsi na základce, vždyť každý máte smartphone ... Pak by už ti lidi neuměli nic :)

BTW, to u nás je AP snad v každé učebně. Je pokryto úplně všude :)

Editováno 21.1.2014 20:46
 
Nahoru Odpovědět 21.1.2014 20:45
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Vašíček
Benjibs:

Naša škola je gympel aj základka dohromady, čiže to majú všetci

Nahoru Odpovědět 21.1.2014 20:48
1 + 1 = 2
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Nahoru Odpovědět 21.1.2014 20:50
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Vašíček
Benjibs:

Nemám, akorát na základke som bol na škole, kde pomaly nemali ani školské PC ;(

Nahoru Odpovědět 21.1.2014 20:53
1 + 1 = 2
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Benjibs
Michal Vašíček:

:D tak to je ale zas moc... no, abych byl upřímnej, tahám si do školy USB modem, ale vzhledem k tomu, že je ta škola ze železa (jinak si to nedokážu vysvětlit) mi to leze maximálně 60kb/s :D

Nahoru Odpovědět 21.1.2014 21:03
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Jan Vargovský
Michal Žůrek (misaz):

jenže moji spolužáci neumí nic ani bez wifi (dobře mou na androidu zvládají dobře, to se musí nechat), jeden spolužák (zdůrazňuji v devítce) neumí malou násobilku, řekl nám, že 5/5=5, 3*3=12 na testu už ani mě ani učitele moc nepřekvapuje.

Editováno 21.1.2014 21:05
Nahoru Odpovědět 21.1.2014 21:05
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Vašíček:

Tak toto je ale moc špatnej případ ;(

Nahoru Odpovědět 21.1.2014 21:06
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Michal Žůrek (misaz)
Jakub Vaněk (Bubavanek):

Tak to bude asi chyba někde v učitelích, že se dostal až do deváté třídy.

 
Nahoru Odpovědět  +1 21.1.2014 21:08
Avatar
Odpovídá na Michal Vašíček
Michal Žůrek (misaz):

smutné je že není jediný.

Ale celkem dost jsem odbočili od tématu, když tak to někdo někam přesuňte.

Nahoru Odpovědět 21.1.2014 21:09
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Michal Vašíček:

Ještě odpovím a už s OT přestanu :) U mě to moc nehrozí, protože jsem se (naštěstí) dostal do matematický třídy, a těma příjímačkama by žádnej vůl neprošel. A s ostatníma třídama se moc nestýkám.

Nahoru Odpovědět 21.1.2014 21:11
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Tak to nejspíš mám.
Sice jsem se s tím chvíli páral, ale mělo by to zobrazovat a počítat správně.
Je to na pár řádků, takže pokud to není proti pravidlům, mám to na JSFiddle.
Odkaz: http://jsfiddle.net/…204/J6Kdm/6/

 
Nahoru Odpovědět  +1 21.1.2014 21:43
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Kdyžtak kdyby to někdo mohl zkontrolovat pro případnou opravdu, protože už mi z toho jde hlava kolem. Jsem asi 3 hodiny řešil jak udělat zbývající hodiny.

 
Nahoru Odpovědět 21.1.2014 21:48
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Zdeněk Bauer
Ondrca:

Je správně, že se mi tam vypisuje: Nan:Nan ....?

Nahoru Odpovědět 21.1.2014 22:01
Zase jsem o něco chytřejší
Avatar
Zdeněk Bauer
Redaktor
Avatar
Odpovídá na Ondrca
Zdeněk Bauer:

To správně není a nevím jak se ti to povedlo, mě to funguje skvěle.

 
Nahoru Odpovědět 21.1.2014 22:11
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Bauer
Drahomír Hanák:

YYYY-MM-DD HH:MM není standardní formát data v JavaScriptu. Funguje to dobře v prohlížečích, založených na webkitu. Pro ostatní to musíš ručně parsovat.

 
Nahoru Odpovědět  +1 21.1.2014 22:18
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Zdeněk Bauer
Ondrca:

Jak říka drahoš tak to asi bude ono - jsem na mozille.

Nahoru Odpovědět 21.1.2014 22:24
Zase jsem o něco chytřejší
Avatar
Zdeněk Bauer
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Zdeněk Bauer:

Aha, no fakt, naštěstí do deadline času dost, tak to upravím :(

 
Nahoru Odpovědět 21.1.2014 22:32
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Tak tady by to mělo být opravený.
Funguje mi to jak na Chromu a FF, tak na IE.
http://jsfiddle.net/…204/J6Kdm/9/

 
Nahoru Odpovědět 21.1.2014 23:10
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:

Sakra, omlouvám se za třetí příspěvek v řadě, ale správnej odkaz je toto :(
http://jsfiddle.net/…04/J6Kdm/10/

 
Nahoru Odpovědět 21.1.2014 23:14
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Tak jsem trošku hrábnul do archivu.

http://leteckaposta.cz/150401935

 
Nahoru Odpovědět 22.1.2014 1:23
Avatar
Artas
Redaktor
Avatar
Artas:

Ahoj, tady je moje řešení: https://www.dropbox.com/…ountdown.zip

 
Nahoru Odpovědět 22.1.2014 12:21
Avatar
Michal Žůrek (misaz):

jelikož placku na JS nemám, tak já se samozřejmě musím přidat.

Je to "objektové", funguje to automaticky, do HTML si napíšete kam to chcete vložit a nalinkujete ten script (klidně i v hlavičce, načítá to po načtení stránky). Musí to být div, ale nemusí mít žádné id ani class, stačí když bude mít ten data-datum. Pomocí ruguérního výrazu to opravím i tak aby fungoval sdracův zápis. V stránce jich můžete mít kolik chcete.

Donwload: http://misaz.moxo.cz/…coutdown.zip
Online: http://misaz.moxo.cz/…/machr144js/

Nahoru Odpovědět  +3 22.1.2014 13:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 22.1.2014 14:05
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Nahoru Odpovědět  +2 22.1.2014 14:07
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Procházka:

Ahoj, tady je moje první verze: https://www.dropbox.com/…z27/Deiv.zip

 
Nahoru Odpovědět 22.1.2014 15:40
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Také zkusím OOP včetně automatického načítání. Veškerý popis je v souboru countdown.js

http://leteckaposta.cz/449324575

 
Nahoru Odpovědět 22.1.2014 16:07
Avatar
Filip Pýrek
Redaktor
Avatar
Filip Pýrek:

Momentálně to vypadá takto: http://jsfiddle.net/4RYNF/
Ci myslíte mám to nechat takto, nebo to mám udělat 9 sekund -> 09 sekund ?

Nahoru Odpovědět 22.1.2014 16:36
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Filip Pýrek
Ondřej Štorc:

Podle mně bude určitě lepší těch 9 sekund..

Nahoru Odpovědět 22.1.2014 16:44
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek (misaz):

nemůžeš tam dát normální script, ten minimalizovaný je otřesný.

Nahoru Odpovědět  +1 22.1.2014 19:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Benjibs:

Ten ho obfuskoval, aby si uchránil svoje štátne tajomstvo ]:>

Nahoru Odpovědět  +4 22.1.2014 19:49
1 + 1 = 2
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Proč, já neřekl že je to finální verze :) pouze jsem se na něco ptal :D

Nahoru Odpovědět  -2 22.1.2014 20:03
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Petr G
Redaktor
Avatar
 
Nahoru Odpovědět 24.1.2014 15:14
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Maršálek
Zdeněk Pavlátka:

Ten čtvrtý vzhled je úžasný. Mohl bych ho použít na svých stránkách? (Pro odpočítávání různých věcí) - Samozřejmě až po skončení soutěže :D

Nahoru Odpovědět 24.1.2014 19:13
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Maršálek:

Jsem rád, že se líbí, použít můžeš. ;)

 
Nahoru Odpovědět 24.1.2014 19:33
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Nahoru Odpovědět 24.1.2014 19:37
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Takže, když jsi se tak těšil, tak zde je momentální verze - :* http://odpocet.filippyrek.cz/
Nakonec to udělám tak jako Michal, přehled všech vlastností a dema :)

Nahoru Odpovědět 24.1.2014 20:13
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek (misaz):

SUper, ale nepostrádá to smysl, když jsi to udělal podle Michala?

Nahoru Odpovědět  +1 24.1.2014 20:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Filip Pýrek
Zdeněk Pavlátka:

V tom druhém ti chybí mezery... 8|

Nahoru Odpovědět 24.1.2014 20:34
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Co jsem udělal podle Michala? Všechno jsem dělal sám! ;)
Jediné co asi udělám podobně jako Michal bude ten seznam vlastností a dem... ;)

Nahoru Odpovědět 24.1.2014 21:14
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
Filip Pýrek:

Je to ukázka nastylovaného a nenastylovaného... ;)

Nahoru Odpovědět 24.1.2014 21:16
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Odpovídá na Filip Pýrek
Michal Žůrek (misaz):

no píšeš:

Nakonec to udělám tak jako Michal
Nahoru Odpovědět  ±0 24.1.2014 21:24
Nesnáším {}, proto se jim vyhýbám.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Filip Pýrek:

Na něco jsi zapoměl

Nakonec to udělám tak jako Michal, přehled všech vlastností a dema

ok... ;) Nechme to už radši být... :)

Nahoru Odpovědět 24.1.2014 21:28
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Michael Olšavský:

http://jsfiddle.net/J6Kdm/18/

Také se přidám. Neumí to nic extra, ale je to alespoň napsané objektově :)

 
Nahoru Odpovědět 25.1.2014 14:18
Avatar
Odpovídá na Michael Olšavský
Michal Žůrek (misaz):

jen malá technická poznámka: je zbytečné procházet #odpocet, aby byl dokument validní a validně se v JavaScriptu jevil může být id použito jen jednou.

Nahoru Odpovědět 25.1.2014 14:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Dostal
Redaktor
Avatar
David Dostal:

Už to nestihnu napsat, ale kdyby se někdo chtěl inspirovat...

 
Nahoru Odpovědět  +3 26.1.2014 20:04
Avatar
Filip Pýrek
Redaktor
Avatar
Filip Pýrek:

Zde je moje finální verze

Snažil jsem se to udělat tak, aby při upravování vzhledu a některých vlastností stačilo použít CSS.

Online: http://odpocet.filippyrek.cz
Download: https://drive.google.com/…MV3VSNl80TjQ

Editováno 26.1.2014 21:45
Nahoru Odpovědět 26.1.2014 21:44
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Filip Pýrek
Redaktor
Avatar
Nahoru Odpovědět 26.1.2014 21:59
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Já se snažil asi jako jediný o cross browser řešení be jquery nesmyslu. Asi nejspíš mám na něj opravdu averzi. Pomalejší věc jsem v javascriptu neviděl. Zlatý Clisure od googlu.

 
Nahoru Odpovědět 27.1.2014 0:01
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Vůbec jsem nečekal tak velkou účast, řešení je spoustu a většina z nich funguje skvěle. Pár řešení pouze trpělo nedostatkem, že se widget zobrazil až po vteřině, měl by tam být hned po načtení stránky. Zaměřil jsem se tedy na to, kdo to dotáhl nejdále.

Nejvíce se mi líbí řešení od Michal Maršáleka. Máš to vymakané, to schovávání nul, placeholder když to skončilo, podporu skinů atd. Vím, že nápad s posledním skinem je od Salátíka, ale prostě jsi své řešení představil tak, že by ho od tebe koupil každý zákazník :) Gratuluji k placce. Napiš si o ní Míše.

Všem ostatním děkuji za účast a budu se těšit u příští soutěže :)

Editováno 27.1.2014 12:01
Nahoru Odpovědět  +3 27.1.2014 12:01
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:

Máš to hezké, ale lepší by bylo udělat to přes Konstruktor a prototypy, tvůj OOP návrh je sice dobrý, ale pak to může někdy omezovat. :)

Viz třeba http://www.itnetwork.cz/…ani-tutorial

Nahoru Odpovědět 27.1.2014 12:09
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Já byl líný to stylovat. Proto jsem měl v prototypu ten update. Akorát jsem nedodělal žádné callbacky pro každý element zvlášť. No třeba příště to bude lepší. Chtěl jsem 3D, ale VML v IE je tak pomalé, že jsem to vzdal. :D

 
Nahoru Odpovědět 27.1.2014 14:40
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

musíš dávat těžší machry, pak nás bude soutěžit méně a bude to zajímavější.

Nahoru Odpovědět  +2 27.1.2014 15:50
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:

Konstruktor používám, ale přijde mi přehlednější mít veškerou definici objektu v jednom bloku kódu (mezi { a }). Je k tomu nějaký závažný důvod, proč se metody definují přes ty prototypy?

 
Nahoru Odpovědět 27.1.2014 15:54
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Zdeněk Pavlátka:

Na druhou stranu ale bude víc případů, kdy bude soutěžit jen jeden.

Nahoru Odpovědět 27.1.2014 15:57
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek (misaz):

co se devbook rozrůsta si myslím že už to nebude problém, možná leda tak u JS, kde ty tutoriály nejsou zatím na tak dobré úrovni jako třeba u C#.

Nahoru Odpovědět 27.1.2014 16:02
Nesnáším {}, proto se jim vyhýbám.
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Michal Maršálek
Drahomír Hanák:

Základní rozdíl: bez prototypu se při každém vytvoření objektu vytvoří nová anonymní funkce pro každou metodu.

 
Nahoru Odpovědět  +2 27.1.2014 16:04
Avatar
Odpovídá na Drahomír Hanák
Michal Maršálek:

Aha, takže v podstatě "jen" výkonnostní rozdíl?

 
Nahoru Odpovědět 27.1.2014 16:05
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:

Teď si nejsem jistý, ale myslím že se využívají k dědičnosti atp.
Celkově je to takový lepší způsob. Víc by ti mohl říct určitě Drahomír Hanák :)

Nahoru Odpovědět 27.1.2014 16:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Nahoru Odpovědět 27.1.2014 16:08
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Maršálek
1Pupik1989:

Kromě toho, že je to několikanásobně rychlejší je hlavní výhoda asi v tom, že se metody objektu nevytvářejí pořád dokola. Vlastně v případě tvého objektu ani nemá cenu vytvářet objekt s kouzelném slovíčkem "new". Je to úplně stejné jako:

function Neco(parametr){
  var objekt = {
    parametr: parametr,
    metoda:function(){
      alert(this.parametr);
    }
  };

  return objekt;
}

var objekt_neco = Neco('Ahoj');
objekt_neco.metoda();

A podle mě je přehlednější:

function Neco(parametr){
  this.parametr = parametr;
};

Neco.prototype.metoda = function(){
  alert(this.parametr);
};

var objekt_neco = new Neco('Ahoj');
objekt_neco.metoda();

Crofordovu metodu má cenu použít pouze v případě, že máš lokální proměnnou, která má být privátní.

Takže tvůj objekt CountDown by šel klidně předělat na:

function CountDown(element){
        var date = new Date(element.dataset.date.replace(new RegExp(/-/g), "/"));
        var notExpiredLabel = typeof element.dataset.notexpired == "undefined" ? "" : element.dataset.notexpired;
        var expiredLabel = typeof element.dataset.expired == "undefined" ? "" : element.dataset.expired;

  return function(){
                var diff = Math.round((date.getTime() - new Date().getTime()) / 1000);
                if(diff <= 0){
                        element.innerHTML = "<span class='expirationLabel'>" + expiredLabel + "</span>"
                }
                else{
                        var s = diff % 60;
                        var m = (diff - s) / 60 % 60;
                        var h = (diff - s - m * 60) / 60 / 60 % 24;
                        var d = (diff - s - m * 60 - h * 3600) / 60 / 60 / 24;
                        s = new TimePart(s, "secs", ["sekunda", "sekundy", "sekund"]);
                        m = new TimePart(m, "mins", ["minuta", "minuty", "minut"]);
                        h = new TimePart(h, "hours", ["hodina", "hodiny", "hodin"]);
                        d = new TimePart(d, "days", ["den", "dny", "dnů"]);
                        element.innerHTML = "<span class='expirationLabel'>" +notExpiredLabel + "</span><span class='countdowning'>" + d.formatedPart + h.formatedPart + m.formatedPart + s.formatedPart + "</span>";
                }
        }
}

A pak bych ho v cyklu volal:

countDowns[i] = CountDown(elements[i]);
setInterval(countDowns[i],1000);

Možná tam mám někde chybku, nekontroloval jsem to.

Editováno 27.1.2014 16:15
 
Nahoru Odpovědět  +1 27.1.2014 16:15
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Michal Maršálek
Drahomír Hanák:

Nejde jen o výkon. Prototyp je jednoduchý objekt, se kterým jde snadno manipulovat (což se hodí např. pro dědičnost, různé "mixin" funkce atd.). Vytváří se pouze jednou (méně paměťově náročné) a řekl bych dokonce, že je to "best practice" co se týče objektů v JS. U velkého množství kódu v JS je to v podstatě jedno, protože jde jen o různé doplňky pro web. V JS se ale píší i velké single-page aplikace nebo dokonce serverové aplikace, kde to hodně vadí.

O výkonnost by se ale vývojáři měli zajímat. Přestože s ní nemají zrovna ve své aplikaci problémy (a JavaScript je dnes opravdu rychlý) neznamená, že by ji měli úplně ignorovat. Momentálně třeba vyvíjím aplikaci v JS, kde je výkon naprosto zásadní, protože tam zpracovávám celkem velké množství dat v reálném čase.

ADD private vlastnosti: dají se udělat i tak, že objekt zabalíme do closure funkce nebo použitím JSDoc anotace @private a o zbytek se postará Closure Compiler příp. jiný podobný nástroj.

Editováno 27.1.2014 16:27
 
Nahoru Odpovědět  +2 27.1.2014 16:23
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:

Moc dobré vysvětlení jsem našel tady : http://stackoverflow.com/a/310914
Vážně doporučuji přečíst ;)

Nahoru Odpovědět  +2 27.1.2014 16:23
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:

Díky, přečetl jsem a už to chápu, díky taky Drahošovi.

 
Nahoru Odpovědět 27.1.2014 16:29
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 86 zpráv z 86.