Hirdetés

Keresés

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

  • Sk8erPeter
    nagyúr

    Ez amúgy így miért jobb?

    window.addEventListener("load", function load(event) {
    window.removeEventListener("load", load, false); //remove listener, no longer needed
    initialize();
    }, false);

    Nem is láttam még ilyen formában a window.onload-ot

    Azért, mert így nem írsz felül semmilyen másik, szintén onloadra bekövetkező eseménykezelőt, olyat, amit pl. akár egy másik fájlban határoztál meg (Te vagy akár egy library), hiszen így HOZZÁADSZ egy eseménykezelőt, mint az a nevében benne is van (addEventListener), nem pedig felülvágod az onloadot egy egyenlőségjellel, hogy az lesz az eseménykezelő, és kész, semmi más.

    Vegyünk egy nagyon egyszerű példát:
    A HTML-struktúrában ez a két fájl van behúzva:

    ...
    <script src="testjs-1.js"></script>
    <script src="testjs-2.js"></script>
    ...

    testjs-1.js tartalma:

    window.onload = function() {
    alert("asdasd");
    }

    testjs-2.js tartalma:

    window.onload = function() {
    alert("blabla");
    }

    Ha mindkét fájlban meghatározott eseménykezelő fontos lenne, hogy lefusson a load esemény hatására, hát akkor szomorúan fogjuk tapasztalni, hogy bizony ez nem történik meg, csak a "blabla" felirat fog felpattanni, pedig elvártuk volna, hogy előtte az "asdasd" szöveg is vágódjon a pofánkba.

    Most ha átírod így:

    testjs-1.js tartalma:

    window.addEventListener("load", function(event) {
    alert("asdasd");
    }, false);

    testjs-2.js tartalma:

    window.addEventListener("load", function(event) {
    alert("blabla");
    }, false);

    Akkor innentől kezdve először felugrik az "asdasd", majd a "blabla" feliratú ablak. Pont ezt vártuk el, mindkét eseménykezelő lefutott.

    A window.removeEventListener("load", load, false); sor pedig a jsFiddle-re felrakott példában azt jelenti, hogy eltávolítjuk az eseménykezelőt, hiszen ha már egyszer lekezeltük a betöltődés eseményét, akkor teljesen felesleges, hogy rá legyen aggatva egy eseménykezelő, mivel az esemény már bekövetkezett, nem fog többször bekövetkezni.
    Még régebben az MDN oldalán láttam, aztán rászoktam a használatára, elméletileg így kevesebb erőforrást eszik a script. Általában egyébként elvileg elég jelentéktelen lehet az ebből adódó különbség, így egy weboldal esetében igazából nem biztos, hogy érdemes vele foglalkozni, hogy ez a sor szerepeljen egyáltalán a kódban, de egyébként alapvetően nem egészséges, ha feleslegesen sok listenert aggatunk fel ide-oda az alkalmazásunkban, ezért spórolok vele, hiszen minden listener azért kér némi erőforrást - így pl. egy böngésző esetén ha sok-sok bővítmény van telepítve, és mindegyik felaggatja a kis listenerjét, majd ott is marad, akkor az már elméletileg számíthat.

    A többi remélem érthető, kérdezz, ha nem tiszta.

  • Sk8erPeter
    nagyúr

    Egy vasutas vizsgapélda volt 2 éve az egyik tárgyból. Jelen esetben annyit kellett csinálni, hogy a 3 színnek vannak csúszkák 0-255 közötti értékekkel és aszerint kilegózott színre kellett beállítani az összes listaelem színét.

    De, hogy konkrét legyek [link]

    Gondolom a tanár elvárása volt, hogy feltétlenül a list itemekre hivatkozzatok (<li>), de egyébként igencsak kretén példa, mert itt bőven elég lenne a mainList azonosítóval rendelkező <ul> elemre beállítani a színt, és kész, ettől öröklődne a szín a gyerekelemekre is, nem kéne végigszaladgálni for ciklussal semmilyen listitem-tömbön minden alkalommal. A document.getElementById(...)-hívások eredményét is illik letárolni, amikor újból és újból hivatkozol ugyanarra az elemre, pont ugyanazok miatt, amit az előbb írtam.
    Csak gyors átalakítással: https://jsfiddle.net/76218j80/2/
    Szerk.: persze ez így egyébként még csúnya megoldás, mert néhány változó globális scope-ban elérhető, de most ilyen szempontokat elegánsan leszartam.

  • Sk8erPeter
    nagyúr

    Pure JS-el mennyire nevezhető ez a megoldás kulturáltnak, ha az összes li elem színét akarom változtatni?

    var listElements = document.querySelectorAll("li");
    for(var i = 0; i < listElements.length; i++){
    listElements[i].style.color = "rgb(" + currRed +
    ", " + currGreen + ", " +currBlue + ")";
    }

    Van ennél ortodoxabb, szebb megoldás?

    - Ahogy dqdb írta, itt pl. a színt előre el lehetne tárolni egy változóban, és azt a változót felhasználni minden alkalommal, mivel itt a cikluson belül nem változtatod, ergo értelmetlen mindig újból és újból összefűzögetni a stringet (mikrooptimalizáció, de az ilyen overheadek szépen egymásra tudnak rakódni, meg amúgy is igénytelenség nem figyelni a mikrooptimalizációra, ugyanígy nem hívogatunk egy metódust többször egymás után, hanem annak a visszatérési értékét is eltároljuk - már amennyiben persze nem változik a visszaadott érték menetközben).
    - Stílust nem szép állítgatni JavaScript-oldalról, erről itt volt szó nemrég: [link] (1. bekezdés vonatkozik ide is). Persze kérdés, mi a cél. Ezt itt nem árultad el nekünk, hogy mit szeretnél csinálni, úgyhogy nehéz eldönteni, hogy ez a megoldás így elfogadható-e - pl. lehet olyan, hogy valami üzleti logika van mögötte, és a számított értéket kénytelen az ember JavaScriptben beállítani.
    - Mi a cél azzal, hogy az oldalon az ÖSSZES list itemet beszínezed? Amúgy hallgass CSorBA kollégára, a szülőelemnek (<ul> vagy <ol>) add meg a színt egyszer, és kész - persze kivétel az, ha egy-egy elem színét felül szeretnéd bírálni, vagy explicite van bedrótozva a CSS-fájlba a list itemek színe.

    Na, szóval röviden írd le, mi a célod, és csak akkor tudjuk eldönteni, mi lenne rá a jó megoldás. :D

  • dqdb
    nagyúr

    Pure JS-el mennyire nevezhető ez a megoldás kulturáltnak, ha az összes li elem színét akarom változtatni?

    var listElements = document.querySelectorAll("li");
    for(var i = 0; i < listElements.length; i++){
    listElements[i].style.color = "rgb(" + currRed +
    ", " + currGreen + ", " +currBlue + ")";
    }

    Van ennél ortodoxabb, szebb megoldás?

    Ha ugyanazt a számolt adatot többször is felhasználod, akkor számold ki előre, tedd el egy változóba és onnan vedd ki az értékét. Én a JS-specifikus részekre nem térnék ki, azt majd megteszik mások.

  • CSorBA
    őstag

    Pure JS-el mennyire nevezhető ez a megoldás kulturáltnak, ha az összes li elem színét akarom változtatni?

    var listElements = document.querySelectorAll("li");
    for(var i = 0; i < listElements.length; i++){
    listElements[i].style.color = "rgb(" + currRed +
    ", " + currGreen + ", " +currBlue + ")";
    }

    Van ennél ortodoxabb, szebb megoldás?

    Mi lenne, ha az ul elem színét változtatnád? A li-re öröklődni fog.

  • trisztan94
    őstag

    valóban, de az tényleg fura, hogy ha console-ba beírtam akkor meg kiírta az eredményt.
    No mindegy, köszi.

    A programozásban nincs olyan, hogy valami egyszer működik, egyszer nem.

  • CSorBA
    őstag

    De hát látod, hogy van. Sőt, ha közvetlen beírod az általad kiemelt sort akkor szépen ki tudom íratni console-ra az értékét.

    Hát gondolkozz kicsit. Az i és j változót tartalmazó ciklus első futásakor 1+1 szerinted mennyi lesz? :)

  • CSorBA
    őstag

    Sziasztok!

    Mi a probléma a következő kódban? [link]
    Lényeg, hogy be lehet írni az egyes cellákba bármit, majd a gombra kattintva meg kell adni egy stringet amit szeretnénk megkeresni a cellákban, egzakt. De vmiért az istenért nem lép bele az egymásba ágyazott for-ban lévő if-be...

    Debugban megnéztem és az értékeket helyesek és ha összehasonlítom őket akkor jól is adja vissza a logikai értéket.

    Ha debugban megnézted, akkor a konzolt is látnod kellene :U
    TypeError: document.getElementById(...) is null

    Méghozzá itt: aktCella = document.getElementById(i+j).value;

    Egész egyszerűen nincs olyan id-jű elem a kódodban amit le akarsz kérdezni, ezért nincs neki value-je és ezért itt elhasal az egész. Ellenőrizni kellene az elem meglétét, mielőtt value-t kérdezel.

  • martonx
    veterán

    Itt a feladatleírás, lehet én értelmezek rosszul, de nekem ebből az jön le, hogy százalékosan kell megvalósítani azt amit akar.

    Label ID-t tényleg megcseréltem, fáradt voltám már, valszeg azért nem szúrtam ki a dolgot. :R

    (#5669) martonx: Erre most milyen választ vársz? Attól, hogy JS-hez még hülye vagyok attól még statikus oldalakat képes lehetek csinálni nem? Főleg, hogy kb mindennek le van írva, hogy mit hogyan. Plussz azért tanulom, hogy a későbbiekben tudjam. De amúgy érdekes, mert választ nem nagyon adtál a kérdésre.

    u.i.: Módosítottam a kódot, így már nem közvetlen %-ban adom meg a méretet, hanem az eredeti méretet szorozgatom meg a tekergető által generált értékekkel, így jónak tűnik.

    Bocsánat, azért nem válaszoltam a kérdésedre, mert olyan érzésem volt, mint amikor valaki bejelenti, hogy holnaptól matematikusként akar dolgozni, aztán meg megkérdezi a hallgatóságát, hogy amúgy 2 + 2 mennyi. Nem tudtam eldönteni, hogy ez most mi akart lenni. Bocsánat, máskor majd komolyabban veszem.

  • fordfairlane
    veterán

    Itt a feladatleírás, lehet én értelmezek rosszul, de nekem ebből az jön le, hogy százalékosan kell megvalósítani azt amit akar.

    Label ID-t tényleg megcseréltem, fáradt voltám már, valszeg azért nem szúrtam ki a dolgot. :R

    (#5669) martonx: Erre most milyen választ vársz? Attól, hogy JS-hez még hülye vagyok attól még statikus oldalakat képes lehetek csinálni nem? Főleg, hogy kb mindennek le van írva, hogy mit hogyan. Plussz azért tanulom, hogy a későbbiekben tudjam. De amúgy érdekes, mert választ nem nagyon adtál a kérdésre.

    u.i.: Módosítottam a kódot, így már nem közvetlen %-ban adom meg a méretet, hanem az eredeti méretet szorozgatom meg a tekergető által generált értékekkel, így jónak tűnik.

    CSS-ben a százalékban megadott méret a tartalmazó elemhez képest relatív méret, nem pedig magán az img elemen.

  • DarkByte
    addikt

    Sziasztok!

    Az alábbi kis kódban vannak gondjaim, megtudnátok mondani, hogy mi okozza?

    1. Miért csak a vízszintes méretezés csúszkája működik?
    2. Miért változik a függőleges méret is ha csak a szélességet változtatom?
    3. A vízszintes csúszka mozgatásával miért a függőleges szövege változik?
    4. Hogyan tudok 1 tizedes pontossággal kiíratni értéket a <p> tag-be? (.toFixed-el nem csinál semmit)

    Mivel HTML kódhoz csak ritkán nyúlok így lehet nem írom pontosan, de

    1) az img tagnél a magasságot tudtommal csak pixelben lehet megadni, nem százalékban. A magasság csúszka ezért nem csinál semmit
    2) szerintem ha csak egyik tengely mentén van megadva a méret akkor az img alapesetben aránytartóan jeleníti meg a képet
    3) mert a label p-k id-it összecserélted
    4) ezt nem értem, nálam már 1 tizedes jegyig írja ki hogy mit választasz. Gondolom közben módosítottad a kódot

  • martonx
    veterán

    Sziasztok!

    Az alábbi kis kódban vannak gondjaim, megtudnátok mondani, hogy mi okozza?

    1. Miért csak a vízszintes méretezés csúszkája működik?
    2. Miért változik a függőleges méret is ha csak a szélességet változtatom?
    3. A vízszintes csúszka mozgatásával miért a függőleges szövege változik?
    4. Hogyan tudok 1 tizedes pontossággal kiíratni értéket a <p> tag-be? (.toFixed-el nem csinál semmit)

    Biztos vagy abban, hogy webfejlesztőként szeretnél maszekolni?

  • inf3rno
    nagyúr

    Bakker..., tényleg, köszi. Sztem az életbe nem jöttem volna rá, hogy azt írtam el...

    Meg is csináltam, elvileg jól működik. Legalábbis nekem úgy tűnik 1-2 teszt után.

    Ha megnézted volna, a konzolt, akkor látszott volna benne, hogy a getElementById null-t ad vissza, ami meg csak azért lehet, mert rossz id-t adtál meg.

    Ha most tényleg jól megy, akkor ez lehet az 1.0. Ha van kedved tovább fejleszteni, akkor javaslom, hogy ahelyett, hogy az input-okat járod be az ellenőrzésnél, csinálj 2d tömböt a tartalmukból, és azt járd be. Ez elsőre plusz munkának tűnik, de így közvetlenül a "model"-en tudsz dolgozni, és cserélni tudod, hogy honnan és hogyan olvasod be azt. Következő lépésnek be lehetne tenni egy olyan, hogy az input.onchange eseménynél olvasod be minden cellából az értéket, a 2d tömbödbe, ahelyett, hogy gombnyomásra tennéd ezt. Így a gomb teljesen feleslegessé válna, helyette minden változásnál futtathatnád az ellenőrzést automatikusan. Ez mondjuk lehetne a 2.0. Következő lépésnek betehetnél két táblázatot ugyanahhoz a model-hez, és az lenne a feladat, hogy szinkronban tartsd őket. Szóval ha az egyikben változik egy cella tartalma, akkor a másikban is változnia kéne, ez már egy komolyabb data binding, lehetne 3.0. Utána csinálhatnál olyat, hogy külön ablakban van a két táblázat, és úgy tartod szinkronban a cellák értékeit, ez lehetne 4.0. Nagyjából ennyi amit ki lehet hozni a témából. Gondolom egy kis fantáziával még képeket is lehetne generálni a számok alapján, stb.

  • inf3rno
    nagyúr

    Kicsit hegesztettem rajta, ellenben továbbra se húzza be az adatokat a mezőkből. Kezdi már felhúzni az agyamat ez a sz@r... Amúgy jó tudni, hogy olyan formában nem is lehetett volna csinálni 2d-s tömböt ahogy akartam...
    Ha nincs .value a getElement után akkor "undefined", ha ott van akkor meg rinyál a chrome console-ja érte.
    Valaki már igazán megmondhatná, hogy a francba kell megcsinálni ezt a szutyok feladatot, mert ezekkel nemigen vagyok előrébb, amiket leírsz. Annak aki már ismeri a nyelvet annak biztos segítenek valamit a rávezetéseid, de olyannak aki kb a 0-ról indul neki annak nemsokat... :R

    kb. 2.napja csak azzal szívok, hogy a nyűves adatokat kiszedjem a megadott input mezőkből, azért ez vicc.

    ip-t írtál id helyett, azért nem működik.

  • martonx
    veterán

    Úgy néz ha collaboration-t indítok akkor az a session végén "megsemmisül"
    Itt van normálisan. Ahogy látom teljes kapufa amivel próbálkozok amúgy, mert még az alert se jön fel, amit próbaként írtam, ha rányomok a gombra.

    Nem tudtok olyan kódoló tutorialt, ahol html-el kombinálva kell JS-t használni? Olyanra gondolok, mint ami codeschool-on is van, de ugye az csak pure JS, csak az alapokkal. Mert nagyon úgy érzem, közöm nincs ahhoz, hogy a html elemeket manipuláljam, "lekérdezzem". :(

    Azért nem moccant meg a js-ed, mert ha onload-ot használsz a js kódod wrapperének, akkor az inline js eventnél nincs scope-on belül. Szóval megoldás lehetett volna, simán body-ba rakni a js-t, vagy header-be. Amúgy sem illik inline eventeket használni, úgyhogy átalakítottam, normális event bindingra, és meghagytam az onload-ot. Így legalább már megmoccan a js :)
    Ránézésre egy rakás hibát látok benne, de így már el tudsz indulni. Ettől kezdve a feladatnak nulla köze a js-hez, szimpla programozás feladat bármilyen nyelven. Figyelj oda a kismillió hibádra, de direkt nem akarom a poénokat lelőni, vannak nagyon triviálisak is közöttük.

    Ja és a friss link: [link]

  • martonx
    veterán

    [link]

    TagName-el csak 1D-s array-be lehet bedobni a cuccokat, nem?

    Próbáltam Firefox-al, és Edge-el is, de sehogy nem jött be a példa.

  • PumpkinSeed
    addikt

    [link]

    TagName-el csak 1D-s array-be lehet bedobni a cuccokat, nem?

    Igazából teljesen mindegy mivel olvasod ki, megfelelő matematikai műveletek használatával az 1 dimenziós tömböt is fel tudod ugyan úgy dolgozni mint a 2 dimenziósat.

    Amúgy ez így szerintem undorító, már megbocsáss (nem szoktam így fogalmazni). Sokkal szebb lenne, ha az inputokat is JS-el generálnád. appendChild vagy valami hasonló függvény az ami neked kell ehhez.

    Ez az új JSFIDDLE nagyon jó lett, lazán lehet oktatásra is használni. :D

  • martonx
    veterán

    Nem bizonygatni akarom, hogy mennyire foglalkozok vele, ötletet kértem, hogy hogyan nyerem ki az input mezőkből az adatokat... Amit most leírtál az már pont megvan, ezért kérdeztem a JS részét a dolognak...

    (#5632) PumpkinSeed: Köszi, ez már használható infó. Guglizással csak arra jutottunk, hogy magának a táblának adok pl ID-t és azt egy az egyben getElementsByTagName("TD")-el dobom be egy array-be, de az nem volt jó.

    getElementsByTagName("input") nem lenne célszerűbb? ;] Vagy csak én nem értem, hogy mi a probléma?
    Egy jsfiddle-lel légyszi kínálj már meg bennünket, ha már azt szeretnéd, hogy segítsünk.

  • PumpkinSeed
    addikt

    Sziasztok!

    Suliban épp JS-t tanulok, de az oktatás színvonala kb -1..., ellenben a következő minta vizsgával nem nagyon tudok elindulni. Tudnátok segíteni?

    Itt a feladatleírás:

    Készítsen olyan HTML5 weboldalt, amin elhelyez egy 7x7 méretű táblázatot, melynek minden eleme egy-egy egész szám megadására alkalmas beviteli mező! A számoknak az [1; 7] zárt intervallumba kell esniük. A táblázat legyen egy űrlap része! Az űrlapon helyezzen el egy küldés (submit) gombot is, „Ellenőriz” felirattal!
    Készítsen JavaScript nyelven olyan eseménykezelő szubrutint, ami a gombra kattintást (pontosabban űrlap „elküldést”) követően ellenőrzi, hogy minden mezőt kitöltöttek-e! Ha nem, ezt felbukkanó ablakban közli. Ha igen, akkor ellenőrzi, hogy a táblázatba bevitt értékek latin négyzetet alkotnak-e. Akkor beszélünk latin négyzetről, ha a táblázat minden sorában és minden oszlopában a 7 lehetséges érték pontosan egyszer fordul elő.

    Igazából a legeleje a homály, hogy hogyan szedem ki a táblázatból az egyes értékeket, hogyan rakom bele 2d-s array-be? Aztán lehet a továbbiaknál is vakarnám a fejemet, de jelenleg az elindulást nemtom.

    Adsz egy id-t 0-48-ig az űrlapmezőknek, majd ezt for-al kiolvasod, és beleteszed egy tömbbe. Ha úgy testszik akkor készítesz erre egy 2 dimenziós tömböt.

  • martonx
    veterán

    Sziasztok!

    Suliban épp JS-t tanulok, de az oktatás színvonala kb -1..., ellenben a következő minta vizsgával nem nagyon tudok elindulni. Tudnátok segíteni?

    Itt a feladatleírás:

    Készítsen olyan HTML5 weboldalt, amin elhelyez egy 7x7 méretű táblázatot, melynek minden eleme egy-egy egész szám megadására alkalmas beviteli mező! A számoknak az [1; 7] zárt intervallumba kell esniük. A táblázat legyen egy űrlap része! Az űrlapon helyezzen el egy küldés (submit) gombot is, „Ellenőriz” felirattal!
    Készítsen JavaScript nyelven olyan eseménykezelő szubrutint, ami a gombra kattintást (pontosabban űrlap „elküldést”) követően ellenőrzi, hogy minden mezőt kitöltöttek-e! Ha nem, ezt felbukkanó ablakban közli. Ha igen, akkor ellenőrzi, hogy a táblázatba bevitt értékek latin négyzetet alkotnak-e. Akkor beszélünk latin négyzetről, ha a táblázat minden sorában és minden oszlopában a 7 lehetséges érték pontosan egyszer fordul elő.

    Igazából a legeleje a homály, hogy hogyan szedem ki a táblázatból az egyes értékeket, hogyan rakom bele 2d-s array-be? Aztán lehet a továbbiaknál is vakarnám a fejemet, de jelenleg az elindulást nemtom.

    Kezdetnek csinálsz egy táblázatot, minden cellájában egy input-tal. Tovább hagy ne folytassam. Pláne, hogy nem látom a jsfiddle példádat, hogy egyáltalán próbálkozol a dologgal.

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