NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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í.

Diskuze: Machr na JavaScript – editor tabulek

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:29.7.2014 12:18

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
29.7.2014 12:18
Avatar
PiskotPiskotovic
Tvůrce
Avatar
PiskotPiskotovic:30.7.2014 8:48

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
30.7.2014 8:48
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Tvůrce
Avatar
PiskotPiskotovic:30.7.2014 11:19

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ý
Tvůrce
Avatar
Patrik Smělý:1.8.2014 16:04

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

 
Nahoru Odpovědět
1.8.2014 16:04
Avatar
adas
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
adas:1.8.2014 21:03

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

 
Nahoru Odpovědět
1.8.2014 21:03
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Patrik Smělý
Michal Žůrek - misaz:1.8.2014 21:19

brzy.

 
Nahoru Odpovědět
1.8.2014 21:19
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na adas
Michal Žůrek - misaz:1.8.2014 21:22

řá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.8.2014 21:22
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na adas
PiskotPiskotovic:2.8.2014 9:35

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Neaktivní uživatel:2.8.2014 9:51

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

Nahoru Odpovědět
2.8.2014 9:51
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:2.8.2014 9:52

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

Nahoru Odpovědět
2.8.2014 9:52
Neaktivní uživatelský účet
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
PiskotPiskotovic:2.8.2014 12:02

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
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:2.8.2014 14:26

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
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Zdeněk Pavlátka:3.8.2014 19:10

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
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
PiskotPiskotovic:4.8.2014 9:15

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
4.8.2014 9:15
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:4.8.2014 10:25

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á adas. Prosím, zažádej o redaktorská práva a publikuj řešení.

 
Nahoru Odpovědět
4.8.2014 10:25
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
PiskotPiskotovic:4.8.2014 15:58

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
adas
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
adas:26.8.2014 16:27

Děkuji.

 
Nahoru Odpovědět
26.8.2014 16:27
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.8.2014 17:44

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 .. :(

adas.. příště piš dřív .. :D

Nahoru Odpovědět
26.8.2014 17:44
Neaktivní uživatelský účet
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.