Vlastne webove aplikacie - pochvalte sa

F3RY · Napísal **F3RY**: 02.01.2016 23:08

Sem mozete pridavat a komentovat / hodnotit vlastnorucne vytvorene webove aplikacia, weby pravdepodobne nie

Tak zacnem ja. Prave mam zasebou semester vyucby JS a semestralny projekt:

Citácia:

Teritórium
Na čierne štvorce sa nemôže presúvať.
Teritórium vlka je to, kam sa vie dostať zo svojho domu na maximálne 5 krokov.
Cieľom hráča je klikaním na biele štvorce zafarbiť teritórium vlka, ktoré musí program skontrolovať. Hráč má možnosť odznačiť ľubovoľný zafarbený štvorec.
Definícia plochy by mala byť definovaná na serveri vo formáte JSON. Prípadne by ich mohlo byť viac a zadaním parametra by sa načítala len 1 plocha.
Rozšírená verzia hry môže obsahovať editor máp s možnosťou uloženia vo formáte JSON (najlepšie na server). Snažte sa viaceré „nastavenia“ udržiavať na serveri. Editor by mohol obsahovať aj simuláciu zobrazenia teritória (alebo aspoň jednorazové zobrazenie).

Ovladanie:

Citácia:

Pre zobrazenie hracej plochy je potrebne zvolit mapu, alebo vytvorit si novu.

Hraci mod: Tento mod sa objavi pri nacitani a zobrazeni hracej plochy. Klikanim do plochy pridavame/odoberame stopy, po ktorych vlk prechadza.
Tlacidlo skontroluj, preveri riesenie ulohy. Vystupom je pocet chyb, ktore pouzivatel urobil.
Selectbox: mapy umoznuje prepinanie sa medzi ulozenymi zaznamami.

Editovaci mod: Pre zobrazenie editovacieho modu staci prepnut prepinac hraj.
Klikanim do plochy pridavame/odoberame prekazky.
Pohyb vlka je mozny pomocou sipok na klavesnici.
Je mozne nastavit nazov mapy a pocet krokov.
Takto zmenenu mapu je mozne ulozit, alebo vymazat.

Vytvorenie novej mapy: Treba zvolit v selectboxe mapy: --nova mapa--.
Po nastaveni sirky a vysky mapy a kliknuti na tlacidlo vytvor, sa zobrazi mapa iba s bielymi polickami a vlkom na zaciatku. Nasledne sa
prepneme do editacneho modu a mapu nastavime podla potreby.

Odkaz na somotnu aplikaciu: http://davinci.fmph.uniba.sk/~krizan34/webprog/

Aplikaciu je potrebne otvorit vo firefoxe, pretoze funkcia onclick v selectboxe v chrome nefunguje, a teda nevie, co ma zobrazit.
Cas vyroby 2 dni. Mozno to posluzi, ako inspiracia pre ostatnych pouzivatelov.

chrono · Napísal **chrono**: 02.01.2016 23:35

1. Používaš tam jQuery a aj tak tam používaš atribúty onchange, onclick...?

2. A ak je tam už to jQuery, tak namiesto document.getElementsByClassName("wolf") sa dá použiť $(".wolf") (a podobne sa dá riešiť aj to get_element_by_id)

3. Prečo pri tom selecte pre mapy nepoužívaš onchange? (či skôr jQuery a .on("chanche", function() { ... }); ) Teraz tam nemôžem zmeniť mapu pomocou klávesnice.
4. Netuším prečo, ale mne vo Firefox nefunguje ovládanie klávesnicou (v Chrome mi to ale funguje).

F3RY · Napísal autor témy **F3RY**: 02.01.2016 23:51

Este sa v tom len zdokonalujem. Funkcia document.getElementsByClassName("wolf") by mala byt na mieste, pretoze tych tried mam viacero, potrebujem ziskat prave jeden, tak si vyberiem vsetky a hladam id. No s get_element_by_id s tebou suhlasim.
Nemozem pouzit onchange, pretoze pri selecte potrebujem dynamicky posielat ID mapy. To, ze to nepodporuje chrome som si vsimol az pri odovzdavani. Primarne pouzivam chrome, ale pri vyvoji aplikacii a tvorbe webov firefox.
Ovladanie klavesnicou je robene pomocou funkcie keydown a bindovanie znakov. Malo by to fungovat pre vsetky prehliadace.
Dakujem za odpoved, presne takuto reakciu som cakal, do buucna si na tieto veci dam pozor.

Lessik · Napísal **Lessik**: 02.01.2016 23:54

preco pouzivas firefox na vyvoj?

chrono · Napísal **chrono**: 02.01.2016 23:59

Kód:

var attr = document.getElementsByClassName('wolf');
$(attr).removeClass("wolf").addClass("white");

je viac menej to isté ako

Kód:

$(".wolf").removeClass("wolf").addClass("white");

Pri tom selecte môžeš bez problémov použiť change, stačí pridať tým option aj atribút value s číslom mapy (a napr. s reťazcom new, aby sa odlíšila tá položka nová mapa) a potom sa v tom callback otestuje čo obsahuje ten atribút value a podľa toho sa zavolá tá funkcia new_map alebo select.

// Spojený príspevok Ned 03.01.16 0:00

Lessik píše:

preco pouzivas firefox na vyvoj?

Prečo nie?

BX · Napísal BX: 03.01.2016 0:16

Celé zle. Keď používaš jQuery, tak ho aj používaj. Niečo ako "vo firefoxe to ide a v chrome nie" pri takto jednoduchej veci je non-sense, neexistuje.

F3RY píše:

Funkcia document.getElementsByClassName("wolf") by mala byt na mieste, pretoze tych tried mam viacero, potrebujem ziskat prave jeden, tak si vyberiem vsetky a hladam id.

Kód:

$('.wolf').first()

ti vráti práve jeden .wolf element - ten prvý.

Kód:

$('.wolf').each( function() {
  console.log( $(this) ); // prechadzam vsetkymi elementmi .wolf
});

Kód:

$('.wolf').find('#idecko')

ti nájde element s id = idecko vo .wolf, alebo lepšie

Kód:

$('.wolf').find("[data-nieco='" + nieco + "']")

ti nájde rovno element kde data-nieco je rovné nieco. Napíš priamo do selektora dva za sebou a funguje to ako AND.

Kód:

var newdiv = $('div').addClass('whatever')...

vytvorí nový div element.

A žiadne js eventy v html kóde! Všetko pekne do jQuery.

A to je len čo som narýchlo spozoroval, nechce sa mi v tom kóde až tak šťúrať. Pointa je, že klasické javascript funkcie v podstate vôbec nepotrebuješ a máš tak zaistený cross-browser kód.

Oprav to, lebo v Chrome to neviem spustiť a firefox sa mi inštalovať nechce.

Lessik · Napísal **Lessik**: 03.01.2016 0:39

Tu ide skor o to, ze pisal, ze primarne vyuziva Chrome (ako drviva vacsina uzivatelov) ale na vyvoj webov a aplikacii vyuziva Firefox.
Preco? Co ponuka Chrome oproti Firefoxu?

F3RY · Napísal autor témy **F3RY**: 03.01.2016 18:09

Super dakujem

Teda najlepsie jQuery nekombinovat s JS? Ja som myslel, ze je to iba pomocna kniznica pre JS, teda co nejde v JS, pouzijem v jQuery.
Opravil som to, uz to funguje aj v chrome. Minutka roboty:

Kód:

  $('#n_select').change(function() {
     select(this.value);
  });

Dal som v option vulue id. No teraz pri nacitani mapky, do selectoboxu Mapy nevlozi nazov mapy.

Kód:

$("#n_select").val(name);

Je to sice detail, ale aj tak by ma zaujmalo preco ho tam nevlozi.

Preco pouzivam firefox na vyvoj?
Sila zvyku. Myslim, ze co sa tyka nastrojov je na tom rovnako, ako chrome. Navyse mam v nom nainstalovane developer pluginy, zalozky smerujuce na stackoverflow... Cely ho mam prisposobeny na vyvoj. Zatial co chrome pouzivam na browsovanie.

BX · Napísal BX: 03.01.2016 18:46

Ja som v praxi narazil len na veľmi málo vecí, ktoré nešli urobiť v jQuery (a aj to možno išli, len som nenašiel, že ako). Takže nie, najlepšie nekombinovať.

A aj tak mi to moc nefunguje, ale teraz už z logického hľadiska. Je tam napísané "Pohyb pomocou šípok", ale žiadnu reakciu na šíkpy som nespozoroval.
Nevadí, skúsil som teda naklikávať labky a vyšiel mi z toho takýto výsledok. Nemá to byť na 5 krokov? Či ako to teda má fungovať?
Vlastne webove aplikacie - pochvalte sa

F3RY · Napísal autor témy **F3RY**: 03.01.2016 20:52

Povodne zadanie bolo na 5 krokov, moje ide lubovolne menit 1-9. V tvojom pripade je na 7 krokov.
Pomocou sipok je ovladanie vlka. Do toho sa dostanes kliknutim na switch hraj, ktory prepne na editovaci mod.

BX · Napísal BX: 03.01.2016 21:04

Jááj blbec, to som si nevšimol :lol:

F3RY · Napísal autor témy **F3RY**: 03.01.2016 21:48

Skor ja som to mohol spravit intuitivnejsie. Rozmyslal som o hodeni napovedy do aplikacie, no uz to zrejme riesit nebudem.
Zverejnil som ju hlavne kvoli radam, pripomienkam, kritike do buducnosti. V JS budem robit diplomovu pracu, a chcem sa nan ho zameriat aj po skole, kedze s prichodom html5 a pomalym upadkom flashu ma perspektivu, navyse je volnych na tuto poziciu viacero zaujmavych pracovnych miest.
Zaroven moze posluzit, aj ako inspiracia pre ostatnych pouzivatelov. V pripade zaujmu poskytnem zdrojove subory, no myslim, ze kazdy si ich vie ziskat aj sam.
Postupom casu sem budem zverejnovat dalsie aplikacie.
Som rad za taku odozvu. Dakujem

hatto13 · Napísal **hatto13**: 03.01.2016 23:44

ano jquery je kniznica pre js. to znamena to co sa da urobit v jquery, vies urobit aj v js (castokrat komplikovanejsie, hlavne vizualne efekty). ale kedze jquery ma urcitu velkost, tak si treba premysliet, ci je naozaj to potrebne stahovat. ak ti staci na logiku vo vanilla js a efekty si vies urobit pomocou css3, tak nepotrebujes riesit jquery.

inak toto $(".mojaTrieda") vies urobit tiez v js pomocou querySelectorAll => document.querySelectorAll('.mojaTrieda') a malo by to byt rychlejsie kedze je to nativne (nemam overene, len mi to pride logicke)

chrono · Napísal **chrono**: 04.01.2016 16:34

Ak prehliadač podporuje querySelectorAll, tak jQuery tú funkciu použije, takže rozdiel v rýchlosti je zanedbateľný. Ak naozaj z jQuery potrebuješ len tú funkčnosť (a netrápia ťa prehliadače, ktoré to nepodporujú), tak naozaj asi jQuery nepotrebuješ. Ale v momente, keď začneš potrebovať zmenu class, obsluhu udalostí... budeš musieť zisťovať, ako fungujú v súčasnosti používané prehliadače, prípadne použiješ jQuery (či inú knižnucu), v ktorej to je už vyriešené a ušetríš kopec času (a ak budeš chcieť aj použiteľnú dokumentáciu, vypadne kopec knižníc a veľký výber neostane).

F3RY · Napísal autor témy **F3RY**: 24.01.2016 14:40

Zdravim, vidim ze sa celkom dobre vyznate do JS. Potreboval by som poradits problemom, s ktorym si neviem pomoct.
Ukazka: http://davinci.fmph.uniba.sk/~krizan34/weblogo/
Ide o vyvoj v pociatocnom stadiu, teda prototyp. Takze program nie je optimalizovany,kod je zle citatelny... Snad sa v tom bude niekto vyznat.
Aplikacia je software na interaktivny interpretovany jazyk logo.

Opis problemu: Ak vytvorim prikaz, vlozim ho do pola v pravo, nefungovali funkcie na klik mysou, no vyriesil som to funkciou live, ktora sa sprava dobre. Problem nastava, ak chcem vytvorit cyklus. Teda vytvorim novy element a do toho elementu pridavam prikazy - dalsie elementy. Ktore obsahuju triedy plus/minus/text... A tu nastava problem. Sice som v tej triede, ale JS hlasi, ze tieto triedy nepozna... Ak si prepnete na konzolu, obsahuje vypis. Vobec nerozumiem, preco je to tak... Neviem sa pohnut.

Ku chybe sa da dostat: Kliknutim na tlacidlo cyklus. Vytvori prikaz na ktory treba kliknut. Ak je aktivny, prikazy vklada do neho. Staci vlozit do cyklu prikaz dopredu a v tom prikaze stlacit +.

Kod:

Kód:

   $(".plus").live("click", function(){
     if ($(this).parent().hasClass('forward_command')){
        var key = $(this).parent().data('key');
        var number = parseInt($(this).parent().find('.number').text());
        console.log($(this).parent());
        console.log('Ma element podtriedu text? '+$(this).parent().hasClass('.text'));
        number++;
        if (number > 10){
         number = 1;
        }
        $(this).parent().find('.number').text(number);
        if ($(this).parent().parent().hasClass('cycle_command')){
         var r_key = $(this).parent().parent().data('key');
         var command = commands[r_key]
         command.change_repeat_fd(key, number);
        }else{        
         var command = commands[key];
         command.change_fd(number);
      }
     }

Ide mi o to, aby sa v tom prikaze vybrala hodnota, navysila sa a znova vlozila.

Opis kodu: Snazim sa pri kliknuti na element,ktoreho dieta je element +, vytiahnut kluc a hodnotu. Prikazy mam ulozene v asociativnom poli, a pomocou kluca k nim pristupujem. Ak sa tento prikaz nachadza v cykle, vyberiem si kluc aj z prikazu cyklus. To pravdepodobne funguje dobre. Nefunguje iba vrchna cast kodu.

Snad je to vysvetlene dostatocne. Dakujem za akukolvek pomoc.

hatto13 · Napísal **hatto13**: 25.01.2016 10:27

ohladom toho 'live' - to sa uz nepouziva, pouzivaj iba $().on('click',function) ... a to ze ti to nejde ked vytvoris novy element je normalne. ty pridelujes event po nacitani stranky, a teda ten element, ktory je vytvoreny neskor, nema mat preco prideleny tento event. ale co mozes spravit je $(rodicovsky-element).on('click', 'moj-element-prikaz', function ). ten vykonava funkciu na vsetky elementy 'moj-element-prikaz' elementu rodicovksy-element. a teda aj ked su vytvorene dynamicky tak sa funkcia zavola.

problem s tou triedou som nepochopil, ale je mozne ze je to rovnaky problem. bud pridelis event po kazdom vytvoreni elementu, alebo ho zavolas na rodica pre potomkou

Vlastne webove aplikacie - pochvalte sa

Podobné témy