Hirdetés

Keresés

Új hozzászólás Aktív témák

  • Pala
    veterán

    Sziasztok!

    Adott JS generátor, mely 1-től 500-ig generál számokat. Ehhez van egy HTML kódom, amin egy gomb van. Arra kattintva kiválaszt egyet az 500 "különböző"számból, és kiírja a képernyőre:

    Probléma: Ez tuti hogy nem 500 különböző számot generál, mert teszteltem. Kigenerálta a 12-t mondjuk hatodjára. Utána 91-edjére megint beadta a 12-t. Nekem az kellene, hogy amit már egyszer kiírt a képernyőre az legközelebb akkor jelenjen meg, ha már egyszer mind az 500 szám 1x a képernyőre került addig ne. Ehhez kellene egy S.O.S help! :R

    Parancsolj: [link]
    Amint felhasznaltad az osszes szamot, reseteli magat es ujrakezdi, amugy meg akarmikor resetelheted manualisan is.

  • Pala
    veterán
    A megválaszolt hozzászólás már nem elérhető.

    Az async JS-ben csak annyit jelent, hogy az igy megjelolt fuggveny mindenkeppen egy promise-t ad vissza, meg akkor is, ha ezt nem jelzed explicit modon.
    Az await pedig egy kenyelmesebb mod a promise-ok visszateresi ertekenek kezelesere (a masik opcio a then-catch).
    Az await kulcsszot async fuggvenyen belul lehet hasznalni, amikor promise-okkal dolgozol.

    Kezdetnek ennyi eleg. :)

  • Pala
    veterán

    Sziasztok!

    Szeretnék egy rámutatást kérni. Nem tudom, hogy JS-ben kivitelezhető-e, de remélem.

    Adott egy felállás, ami mondjuk annyi, hogy van a Weboldalon egy beviteli mező és egy gomb.

    Ezt akárhányan meg tudják nyitni egyszerre. A beviteli mező csak azonosítás végett kell. Tegyük fel, megnyitják ezt 5-en, mind az 5 bevitel ki van töltve, legyen adott Robi, Elemér, Albert, Géza és Veronika.
    Ha valamelyikük rányom a saját felületen található gombra, az oldal elküldi az azonosítóját (nevét) a többieknek, és mindenkinél megjelenik ez (mondjuk egy <div id="demo"></div> részben).

    Tehát az érdekelne engem, hogyan oldható meg, hogy az oldal lefrissítése nélkül is megjelenjen, ha egy másik gépen megnyomják a gombot. Remélem érthető, hasonlóra gondolok, mint az online üzenetküldés, csak nem kell megjegyezne semmit, csak abba az egy demo-ba beírni, hogy ki nyomta meg utoljára.

    Bízva abban, hogy megoldható, előre is köszönöm a válaszokat!

    Ez szerveroldali feladat is egyben.
    Ezeknek nezz utana a megoldashoz:
    1. long polling
    2. websocket

  • Pala
    veterán

    Köszönöm a választ. Annyit szeretnék kérni, hogy ez kód formában hogy néz ki? Mert hiába csináltam, nem működik... Szóval biztos elrontom

    [link]

    Typescript, de a lenyeget lathatod.
    szerk.: Nem teszteltem le, csak gyorsan osszehanytam, remelem mukodik. :D

  • Pala
    veterán

    Sziasztok!

    Elakadtam a randomgenerátor használatával. Tudtok ebben segíteni?
    Példa: LINK
    A példában benne van a feladat, de minden esetre leírom ide is: A gomb feladata: Megnyomását követően az a 9 DIV egység, ami a "randomizator2000" -en belül található, behívásra kerül a JS-be. Ezután random kiválasztódik egyikük, aminek .innerHTML értéke szintén egy random, pozitív egyész számra beáll (pl 1 és 25 között). Példa: Gombnyomást követően fentről a negyedik DIV szövege 13-ra módosul. A feladatot úgy kell megoldani, hogy a JS írásakor mi adjuk meg, mely azonosítók játszanak, vagyis melyek közül kell kiválasztania a programnak egyet.

    Előre is köszönöm

    Mi a gond konkretan??

    Megoldas:
    1. Adsz egy classt az osszes divnek, majd document.querySelectorAll-lal eltarolod oket egy tombben.
    2. A fuggvenyed bemeneti ertekkent kap egy tombot (vagy listat), benne tetszoleges mennyisegu szammal. Ezutan szepen kiszurod azokat a szamokat, amikkel nem lehet indexelni a 9db div-et, magyarul kiszorsz belole mindent, ami nem 0 es 8 koze eso egesz szam, de stringeket + egyeb bullshitet is kiszurhetsz, attol fuggoen, hogy milyen merteku error handlinget akarsz beleepiteni.
    3. Utana random kivalasztasz egy szamot ebbol a leszurt szamokat tartalmazo tombbol, ezzel megkapod a veletlenszeruen kivalasztott div-et.
    4. Majd generalsz egy szamot 1 es 25 kozott es beleiratod a kivalasztott div-be.
    5. Orulsz.

    Lehet persze sokfelekeppen cifrazni, de a fo koncepcio ez.

  • Pala
    veterán

    Az utolsó mondat volt a probléma.
    Nem hittem, hogyha formon belül sima butttont használok és nem input buttont vagy submitto, akkor az galibát okozhat.

    A formon belul a legelso button automatikusan submitol, ez az alapertelmezett viselkedes.

  • Pala
    veterán

    Sziasztok!

    Van bármi hátránya annak, ha a honlapomra a JS-szkripteket "tömörítve" (minify, pl. https://jscompress.com/) rakom fel és használom?

    Inkabb csak elonye van: kisebb fajlmeret -> gyorsabb betoltodes + gyorsabb parse-olas.

  • Pala
    veterán

    Közben megnéztem, hogy milyen lehetőségek vannak tanfolyami keretek között, hát ...

    Top 10 JavaScript programozó tanfolyam magyarul

    Egy jotanacs: ne kolts ilyenekre penzt, ezeknek a kodolo kurzusoknak a nagy resze egyedul azoknak eri meg, akik az ilyen vallalkozasokat mukodtetik. :) Minden, amit itt tanitanak, az netrol ezerszer tobb forrasbol, jobb minosegben elerheto; ingyen vagy sokkal olcsobban (magyarul egy lehuzas az egesz).

  • Pala
    veterán

    Oké, szerencsére a fentiek megvannak. ;)
    Ami a szakmai részt illeti, csak most gondoltam bele, hogy lehet-e hátrány az, hogy nem magyar forrásokból tanulok (a kifejezéseket, fogalmakat csak angolul ismerem, nem tudom, hogy van-e magyar megfelelőjük és ha van, akkor azok mik)?

    Nekem konkretan volt Budapesten olyan frontend interjum, ahol kozoltem az interjuztatoval, hogy kizarolag angolul tudok valaszolni a kerdeseire, mert nem ismerem a magyar terminologiat. Azt mondta, semmi gond. :) Emiatt szerintem ne izgulj, ez inkabb elony. Sot, tovabbmegyek, en amondo vagyok, olyan helyre ne is akarj menni, ahol a fejlesztok nem tudnak angolul legalabb egy"kozepesen szar" szinten.

  • Pala
    veterán

    Nézd meg YT-on vagy akárhol, hogyan kell egy Pong játékot canvasra leprogramozni, onnan tudsz meríteni ötleteket, praktikákat. Azért a Pongot említem, mert ott a falról/paddle-ről visszapattanó labda valamelyest párhuzamba állítható az általad említett lézeres-tükrös koncepcióval.

    Én írtam játékot canvasra, arra készülj fel, hogy ez javarészt geometria + algoritmizálás.

  • Pala
    veterán

    Köszönöm a példát. Ez már okot ad, hogy bízzak benne, minden lehetséges :)

    Abszolút lehetséges, ez ilyen számolgatós-matekos feladat, bár egy ilyesmi játékot én canvas-szel oldanék meg.

  • Pala
    veterán

    Az nem legenerálja hanem önmagában futtatja.
    Az egy családfa program, amit a saját gépeden nézegethetsz.
    A családfát kigenerálja magába az adatokból, de nincs export.

    Pala: pontosan így van, tanulnom kell, de mindenhol az van /mivel az alapokat megtanultam/, hogy kezdjek el csinalni valamit amit szeretnék, és a felmerülő problémákat megoldva tanuljak tovább.
    Én nem akarok ebben dolgozni, a flash-es családfám kuka lett, és azt szeretném újra megcsinálni, csak ennyi érdekel. Tehat ez az amit csinálnom kell.
    Fentebb is írtam, hogy fogalmam sincs, hogy kell tervezni, az sehol senki sem mondja el.
    Nem tudom mi az első lépés, és mi a második, harmadik.
    Pl ramdom szám generátor: kell egy gomb, majd javaban írok egy random szám generátort, hozzá rendelem a gombhoz , végül alert-tel kiiratom.
    Ezt nem tudom, mit kell a családfánál.
    Így nem tudok mi után utána nézni.

    Ahhoz, hogy tudj tervezni, elsősorban algoritmizálási képesség és adatstruktúrák (majd később design patternek) ismerete szükséges, ez jelenti az alapokat, mondhatni. Mindig adatokkal dolgozunk (ezért kell adatstruktúrában gondolkodni), és mindig valamilyen műveletet végzünk rajtuk (ehhez kell az algoritmizálás). Ezen a területen kell képezned magad kicsit elméletibb oldalról ( [link] ), majd gyakorlatiasabb megközelítéssel ( [link] ).

    A családfás feladatnak is ugyanúgy kell nekiállni, első lépésként felismerni, hogy milyen adatstruktúrával tudod reprezentálni a családfát. És ehhez a bizonyos felismeréshez kellenek a fenti alapok, pl. hogy ehhez a feladathoz egy gráfra lesz szükséged (irányíott körmentes gráf, DAG = directed acyclic graph), majd azt utána leképezni olyan formába, hogy kód-szinten is kifejezhető legyen (ehhez meg egy szomszédossági lista (adjacency list) kell, ezeknek nézz utána neten). Ha nem ismered a gráfokat, akkor meg kell őket tanulni (nem kell profi szinten). Ez az a bizonyos első lépés, amit keresel. Ha hajlandó vagy rászánni egy minimális összeget, illetve némi időt, hogy pl. a fenti két kurzust végigcsináld, máris teljesen máshogy állnál hozzá a feladathoz. De akár Youtube-on is rengeteg ingyenes anyagot találsz "algorithms", "data structures" kulcsszavakra.

    Mindezekkel együtt továbbra is hangsúlyozom, hogy a feladat, amire vállalkozni szándékozol, nem triviális. Sokkal egyszerűbb példákkal kellene kezdeni, ha el akarod sajátítani a megfelelő gondolkodásmódot. Egy hasonlattal élve, most kb. autóversenyzőnek készülsz, de közben nincs kedved megtanulni vezetni, mert te egyből autóversenyző akarsz lenni, mert az érdekel. És emiatt nem találod, hogyan kezdj neki, mert túl nagyot akarsz ugrani. :)

  • Pala
    veterán

    Ez nem segít semmit.
    Ez csak trollkodás megint....

    Az a helyzet, hogy (látva a korábbi hozzászólásaidat a topikban) neked nem komplex feladatok megoldásával kellene foglalkoznod, hanem tanulással. Méghozzá azért, mert alapvető ismereteid hiányoznak, nem csak JavaScript és a webprogramozás, hanem úgy általában a programozás terén. Félreértés ne essék, nincs ezzel semmi gond, mindenki tartott itt egyszer... csak ezt fel kellene ismerned.

  • Pala
    veterán

    Szerintem alapvetően két úton tudsz elindulni. Kérdés: mennyire szeretnéd, hogy dinamikus legyen?

    Első út: ez akkor működik, ha elég a beégetett adat. Találtam egy ilyen codepent (nem én csináltam) [link], ez nagyjából olyan, amit szeretnél, de nyilván ki kell egészíteni.

    Második út: canvas+JS. Ez (szerintem) muszáj, ha dinamikussá akarod tenni (meg lehet oldani az elsővel is valszeg, de kihullik a hajad a CSS miatt). Ekkor kell a Pala által felvetett gráfelmélet is

    Sose csináltam még ilyet, csak ötletelek

    A linkelt codepennél az a probléma, hogy egyetlen root node-ból (parent) indul az egész, miközben ugyebár minden (normális) embernek két szülője szokott lenni, emellett oldalágon beházasodást is kezelni kell és akkor jönnek még ilyen buktatók, mikor rokoni szálon házasodnak emberek és úgy lesz gyerekük, meg egyéb finomságok... :D Ezért nem lehet fa-struktúrát használni, hanem általánosabb gráf kell ide, amiben a körmentességet biztosítani kell, hiszen az nem fordulhat elő, hogy a nagyapa fiának a fia a nagyapa apja is legyen. :D

    Fel kell állítani dummy adatokkal egy példa-családfát 20-30 emberrel, leképezni az egészet egy szomszédossági listába (adjacency list), ez alapján már ki lehet generálni rekurzívan valami otromba gráfot belőle, aztán lehet gondolkodni a formázáson. Szerintem ez utóbbi a nagyobb challenge benne, hogy miként lehet ezt átláthatóan prezentálni.

  • Pala
    veterán

    Hello,
    Ha volna vkinek kedve/ideje/tudása segíteni:
    Egy ilyen csaladfat szeretnék, html-css-js /se j-query, se bootstrap, se semmi más/
    Fogalmam sincs merre induljak, vagy egyáltalán hogy kezdjek bele.

    Ez egy nagyon nem triviális topik! Kezdőknek én nem javasolnám, de ha sok felesleges hajszálad van, akkor első körben egy kis gráfelmélet-tanulmányozást javaslok, azon belül is egy irányított körmentes gráfra (directed acyclic graph) lesz szükséged az adatmodellezéshez.

  • Pala
    veterán

    Én se arra gondoltam, amire az előző kolléga értette, hanem hogy egyáltalán nem ír CSS-t aka nem webes fejlesztő, erre vonatkozott a disclaimer is :D

    Nekem most az emotiont kell megtanulni React projekthez, előtte Sass-t használtam, a Sass-al nem volt annyira nagy bajom, viszont ezt a CSS-in-JS-t én kicsit kreált problémának érzem, de fixme...

    Az viszont kb totál mindegy, hogy mi hány sor griddel, ha a támogatott böngészők fele fejreáll a gridtől...

    Reacthoz talán a legjobb megoldás (CSS-in-JS helyett) a Sass/SCSS modules. Scope-olható és nem kell beleturmixolni a JS-be. Az ilyen Radium meg Styled Components-féle mutációktól én fejre állok. :) Ezt az Emotiont nem ismertem, de most gyorsan belenézve ez is kb. ugyanaz a förmedvény, mint a Styled Components.

  • Pala
    veterán

    Sziasztok! :) Akad itt valaki, aki object composition (és ezzel kapcsolatos patternek, best practice-ek) terén otthonosabban mozog.

    Szinte bárhol olvasok a témáról, általában a lentihez hasonló példákkal illusztrálják, hogyan is néz ez ki a gyakorlatban (ez nem az én kódom, csak példa):

    const canCast = (state) => ({
    cast: (spell) => {
    console.log(`${state.name} casts ${spell}!`);
    state.mana--;
    }
    })

    const canFight = (state) => ({
    fight: () => {
    console.log(`${state.name} slashes at the foe!`);
    state.stamina--;
    }
    })

    const fighter = (name) => {
    let state = {
    name,
    health: 100,
    stamina: 100
    }

    return Object.assign(state, canFight(state));
    }

    const mage = (name) => {
    let state = {
    name,
    health: 100,
    mana: 100
    }

    return Object.assign(state, canCast(state));
    }

    scorcher = mage('Scorcher')
    scorcher.cast('fireball'); // Scorcher casts fireball!
    console.log(scorcher.mana) // 99

    slasher = fighter('Slasher')
    slasher.fight(); // Slasher slashes at the foe!
    console.log(slasher.stamina) // 99

    Namármost, nekem ezzel az a problémám, hogy a kompozíció során minden egyes object instance új példányt kap ugyanabból a metódusból is, tehát tkp. elkezdjük szépen teleszemetelni a memóriát, kvázi feleslegesen. Kérdés, hogy:
    1. El tudjuk-e ezt kerülni úgy, hogy a fenti kódban a canCast és canFight továbbra is pure function-ök maradjanak (mondjuk most a bennük lévő console.log miatt nem azok, de azt most gondolatban vegyük ki :) )!? (Pusztán azt elérni, hogy egy metóduson osztozzanak az instance-ek, nem nehéz.)

    Épp most írok egy játékot, ahol object compositiont használok, százas nagyságrendben készülnek majd objektumok, és nem találtam igazán szép megoldást erre a problémára.

Új hozzászólás Aktív témák