Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
 
Odpovědět
24.1.2014 19:05
Avatar
Odpovídá na Michal Maršálek
Zdeněk Pavlátka:24.1.2014 19:13

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:24.1.2014 19:33

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

 
Nahoru Odpovědět
24.1.2014 19:33
Avatar
Nahoru Odpovědět
24.1.2014 19:37
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Filip Pýrek:24.1.2014 20:13

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:24.1.2014 20:33

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

 
Nahoru Odpovědět
24.1.2014 20:33
Avatar
Odpovídá na Filip Pýrek
Zdeněk Pavlátka:24.1.2014 20:34

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
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Filip Pýrek:24.1.2014 21:14

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
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Filip Pýrek:24.1.2014 21:16

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:24.1.2014 21:24

no píšeš:

Nakonec to udělám tak jako Michal
 
Nahoru Odpovědět
24.1.2014 21:24
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Filip Pýrek:24.1.2014 21:28

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ý:25.1.2014 14:18

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:25.1.2014 14:30

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
Avatar
David Dostal
Tvůrce
Avatar
David Dostal:26.1.2014 20:04

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

 
Nahoru Odpovědět
26.1.2014 20:04
Avatar
Filip Pýrek
Tvůrce
Avatar
Filip Pýrek:26.1.2014 21:44

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
Tvůrce
Avatar
Nahoru Odpovědět
26.1.2014 21:59
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
 
Nahoru Odpovědět
26.1.2014 23:48
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:27.1.2014 0:01

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 Hartinger
Vlastník
Avatar
David Hartinger:27.1.2014 12:01

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
27.1.2014 12:01
You are the greatest project you will ever work on.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:27.1.2014 12:09

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:27.1.2014 14:40

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 Hartinger
Michal Žůrek - misaz:27.1.2014 15:50

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

 
Nahoru Odpovědět
27.1.2014 15:50
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:27.1.2014 15:54

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
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:27.1.2014 15:57

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:27.1.2014 16:02

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
Avatar
Odpovídá na Michal Maršálek
Drahomír Hanák:27.1.2014 16:04

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
27.1.2014 16:04
Avatar
Odpovídá na Drahomír Hanák
Michal Maršálek:27.1.2014 16:05

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

 
Nahoru Odpovědět
27.1.2014 16:05
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:27.1.2014 16:07

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:27.1.2014 16:08

Záleží na daném zadání.

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:27.1.2014 16:15

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
27.1.2014 16:15
Avatar
Odpovídá na Michal Maršálek
Drahomír Hanák:27.1.2014 16:23

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
27.1.2014 16:23
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Maršálek
Honza Bittner:27.1.2014 16:23

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

Nahoru Odpovědět
27.1.2014 16:23
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:27.1.2014 16:29

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 36 zpráv z 86.