Avatar
Michal Žůrek (misaz):

Vítám Vás u další minisoutěže Machr. Tentokrát na JavaScript. Cílem úlohy bude udělat editor tabulky, který bude umožňovat nějaký export do inputu nebo textarey. Nehledejte v tom vědu, vytvoříte jednoduše tabulku, umožníte uživateli do ní zadávat hodnoty a pak z tabulky splácáte třeba CSV, které dopíšete do inputu nebo textarey. Aby takový editor byl použitelný, minimálně musíte uživateli umožnit měnit počet sloupců a buněk.

Použít můžete různé JavaScriptové knihovny (ne však něco co automaticky splní zadání :) ) a pokud chcete, můžete to napsat i v nějaké JavaScriptové nadstavbě (např. CoffeScript, Dart, TypeScript). Můžete použít i jQuery UI, která má dialog a editor můžete mít v tomto dialogu.

Jde hlavně o to, abyste napsali co nejefektivnější zdrojový kód. Nemusíte zajišťovat zpětnou kompatibilitu s Internet Explorer 6, ale dělejte tak aby se nestalo, že v běžně používaném prohlížeči půlka aplikace nebude fungovat. Stejně tak pokud zefektivníte práci s aplikací (např. pohyb mezi buňkami pomocí šipek), určitě máte body navíc. Velmi důležitou roli při hodnocení bude brát zdrojový kód, funkcionalita výsledku a jeho rozšířitelnost. Velmi budu hledět na to, jak je aplikace rozšířitelná, protože jestli sice naprogramujete aplikaci, co umí skvěle generovat CSV je to na houby, pokud moje CMS požaduje formát tabulek Texy.

Není to složité, nehledejte v tom vědu, základ je relativně jednoduchý, a pokud si to dobře navrhnete (což je velmi důležité) implementace dalších funkcí (např: přidej sloupec vpravo) je taktéž velmi jednoduchá.

Kompletní pravidla soutěže jsou zde: http://www.itnetwork.cz/…outezi-machr .
Deadline je v pondělí 4.8 v 10:00.
odkaz na řešení posílejte zde nebo Michal Žůrek (misaz) do PM ideálně v zazipované (soubor *.zip) složce, ať to nemusím otevírat 3rd party aplikací. Pokud použijte nadstavbu nad JavaScript, odesílejte jak kód nadstavby, tak překompilovaný JS kód.

Editováno 29.7.2014 12:19
Odpovědět  +5 29.7.2014 12:18
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
PiskotPiskotovic:

Další machr :D Super. V JavaScriptu moc neumím, ale pokusím se, aspoň se něco přiučím :)

Editováno 30.7.2014 8:49
Nahoru Odpovědět  +2 30.7.2014 8:48
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Redaktor
Avatar
PiskotPiskotovic:

Už mám skoro hotovo, umí to měnit barvu textu, pozadí, rámečku, měnit text na určité pozici ale nedaří se mi udělat, aby se přidal/odebral řádek/sloupec :( Řádek mi jde, ale pak nejde editovat, protože se mu nepřidělí id.

//EDIT: To políčko HTML kód asi nahradím něčím rozumnějším ... a umí to i mazat ^^

Editováno 30.7.2014 11:21
Nahoru Odpovědět 30.7.2014 11:19
Error 404 - stránka motto.php nenalezena.
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Patrik Smělý (SogoCZE):

Hm, možná to taky zkusím, ale kdy tu bude nějaký machr na php ? či oop ?

Nahoru Odpovědět  +1 1.8.2014 16:04
PHP můj oblíbený jazyk......
Avatar
Ondřej Hanák
Redaktor
Avatar
Odpovídá na PiskotPiskotovic
Ondřej Hanák:

Jak si vyřešil přidání řádku?

 
Nahoru Odpovědět 1.8.2014 21:03
Avatar
Nahoru Odpovědět 1.8.2014 21:19
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Ondřej Hanák
Michal Žůrek (misaz):

řádek máš jednoduchý, sloupec je horší.

Nápověda pro všechny: zkuste se zamyslet nad tím, jak ta tabulka vypadá v HTML a pracujte sní tak. Vytvořit a vložit několik elementů není přece vůbec těžké.

Nahoru Odpovědět  +1 1.8.2014 21:22
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Ondřej Hanák
PiskotPiskotovic:

V tom mám problém taky, zatím mám provizorně okopírování druhého řádku a vložení na konec. Taky nevím, jak to zdokonalit, nevím jak k tomu přidat id, které identifikuje který řádek a sloupec to je.

Nahoru Odpovědět 2.8.2014 9:35
Error 404 - stránka motto.php nenalezena.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na PiskotPiskotovic
Jiří Gracík:

Můžeš využít data atributy a označit si to jako dvourozměrné pole :)

Nahoru Odpovědět 2.8.2014 9:51
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jiří Gracík
Jiří Gracík:

A nebo klidně i třídy, to už je v podstatě jedno.

Nahoru Odpovědět 2.8.2014 9:52
Creating websites is awesome till you see the result in another browser ...
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
PiskotPiskotovic:

Bude taky nějaký machr na webdesign ? Myslím, že jsem se v něm dost zlepšil.

Nahoru Odpovědět 2.8.2014 12:02
Error 404 - stránka motto.php nenalezena.
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek (misaz):

brzy. Nový machr je každý týden a zatímco jeden ani neskončil, vy už zjišťujete kdy bude další.

Nahoru Odpovědět 2.8.2014 14:26
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na PiskotPiskotovic
Zdeněk Pavlátka:

Webdesign určitě někdy bude, ale na příští týden už mám vymyšleno něco jiného.

Nahoru Odpovědět 3.8.2014 19:10
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na Zdeněk Pavlátka
PiskotPiskotovic:

Dobře. Zase něco nového ;) Budou to webové technologie (PHP, HTML, CSS, JS) nebo desktopové (JAVA, C#) nebo něco mezi (EFEKTY) ? :)

Nahoru Odpovědět  -2 4.8.2014 9:15
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek (misaz):

Ahoj, překvapilo mě, že jste to vzdali. Nakonec se našlo alespoň jedno řešení.

sidecek123: Tvoje řešení je relativně jednoduché. Skoro všechny práce v JavaScriptu s tabulkou je obcházena metodami jQuery. V jQuery máš rozhled, v čistém JavaScriptu nemáš ani tušení co všechno jde udělat. Když to ovládám pomocí tlačítek, vždy mi to zobrazí dialog a za ním další, co použití tlačítka to se to stupňuje. Aplikace je dosti těžkopádná, pokud bych ji chtěl nasadit třeba do CMS zde na ITnetwork, musel bych ji značně upravit. Nepoužíváš objekty a s aplikací je potřeba tahat jak CSS (to by až zas tak nevadilo), ale horší je dosti specifické HTML. Všude zbytečně voláš load, což ti znovu načítá obsluhy tlačítek, to ale není přece třeba. Když jsem každé zbytečné volání load zakomentoval aplikace fungovala stejně. Mícháš krásu jQuery a čistého JavaScriptu nevím proč používáš document.GetE­lementsByClas­sName, když v jQuery vybíráš pomocí CSS selektorů, funguje

$(".trida") // vrátí pole elementů

http://jsfiddle.net/Uym46/

Řádky 108 – 133 máš nějak blbě odsazené, při vývoji složitější aplikace by se hodilo zachovat nějaké rozumné odsazení, aby se to nepletlo. Z jednoho tabu poskočíš na 4. Kód kopíruješ, podíváš-li se na to co obsloužíš po stisknutí klávesy a to co při stisknutí tlačítka, zjistíš, že je to úplně stejné. Nebylo by jednoduší dát to do funkce a tu na obou místech zavolat? Pokud bys totiž tento kód měnil, nemusel bys ho měnit na dvou místech. Zkus se podívat, jak se pracuje s elementy v čistém JavaScriptu, tabulku lze jednoduše zpracovat. Každá buňka mohla mít svůj input. JavaScript má cykl, cyklem si mohl v tabulce projít řádky a v každém řádku buňky. Bylo by to všechno mnohem jednodušší. Elementy mají vlastnost child (nebo children) a ta obsahuje pole potomků. Zkus se odpoutat od zlozvyku dávat HTML do stringu, jde to udělat lépe a později se to bude lépe zlepšovat. Rozšiřitelnost aplikace pokulhává, pokud bych chtěl implementovat jiný formát výstupu, jediné co můžu udělat je předělat tvůj kód. JavaScript je jazyk, kde na jednom místě nemusí být vůbec nic anebo tam může být všechno, navíc jen někdy. Využiješ toho však asi až se v JavaScriptu naučíš programovat objektově, pak stačí vědět, že jednoduše vytvoříš objekt daného „jazyka“, bude mít metodu Export, která si vezme jako parametr tabulku a vrátí třeba string s výsledkem, tento objekt předáš nějakému generátoru editora a ten zavolá metodu Export, kdy potřebuje. Tím že všude může mít něco a nic (zde metoda Export) nikdo nebrání, že když chceš jiný generátor, prostě dáš jiný objekt co má metodu Export. JavaScriptu je jedno jestli předávaný objekt je instance od CsvGenerator nebo TexyGenerator, pokud bude mít metodu Export, bude spokojen. V takovémto návrhu není problém pak třeba doimplementovat metody pro import, prostě každý generátor výstupu bude umět i ze stringu (nebo souboru, to už je jedno) vytvořit HTML tabulku a tu předá generátoru.

Protože se nenašel nikdo jiný kdo by se tím prokousal, tak ačkoliv v jeho řešení byli nedostatky, placku získává Ondřej Hanák. Prosím, zažádej o redaktorská práva a publikuj řešení.

Nahoru Odpovědět  +5 4.8.2014 10:25
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
Avatar
Odpovídá na PiskotPiskotovic
PiskotPiskotovic:

Mínuskujte si mě, jak chcete. Auru to ubírá vám, chtěl jsem se jen zeptat. Gratuluji sidecek123 ;)

Nahoru Odpovědět 4.8.2014 15:58
Error 404 - stránka motto.php nenalezena.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

Sakra ! A já se těšil :D
Na hlavní stránce jsem (dnes!) uviděl machra, přečetl jsem si zadání, zajásal jsem, že to bude sranda a pak jsem uviděl deadline .. :(

Ondřej Hanák.. příště piš dřív .. :D

 
Nahoru Odpovědět  +4 26.8.2014 17:44
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 18 zpráv z 18.