- bitpork: Augusztus 2- szombat jelen állás szerint.
- Luck Dragon: Asszociációs játék. :)
- eBay-es kütyük kis pénzért
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- sziku69: Fűzzük össze a szavakat :)
- Geri Bátyó: B550 szűk keresztmetszet, de mi és miért?
- Yutani: Yutani Retró Hangkártyái: AdMOS AdWave 32
- user2: Kia Ceed Gold 160 1.5 T-GDI MY2024
- Kempingezés és sátrazás
- gerner1
-
LOGOUT
JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)
Új hozzászólás Aktív témák
-
Sziasztok!
Furcsa kérdést akarok feltenni, egyelőre elméleti alapokon.
Vegyünk alapul egy HTML Weboldalt, ID-kkel ellátott DIV-ekkel, CSS-ből eltűntetve.
A továbbiakban vannak itt gombok melyek megnyomásával a hozzájuk rendelt DIV JS-en keresztül láthatóvá válik.Van mellette egy másik HTML Weboldal, ami rámutató linket tartalmaz az imént említett felépítéssel rendelkező oldalra. A feladat annyi lenne, hogy mikor erről az oldalról átnavigál a böngésző a Linknek köszönhetően a másik oldalra, akkor azon az oldalon már a betöltés során aktiválja az egyik gombot. Vagyis, amennyiben azzal az adott Linkkel nyitják meg az adott oldalt, ne érvényesüljön a CSS elrejtés, vagy legyen felülírva.
Ez így létező jelenség?
A példa kedvéért, ez a végeredmény oldal, ez pedig a rámutató oldal.
Előre is köszönöm a válaszokat!
-
-
martonx
veterán
válasz
lanszelot #8694 üzenetére
Felveszed az élelmiszerek listáját, és mindegyikhez megadod, hogy melyik diétához jó, illetve melyik zárja ki.
Utána, amikor szűrsz, már csak azokat az ételeket kell elővenned, amelyek az összes megadott diétához engedélyezettek, és semelyik megadott diétához nincsenek tiltva.
Ennyi. -
lanszelot
addikt
Hello,
Élelmiszerek listáját, hogyan tudom különböző diéták szerintleszűrni?
Tömböt hozzak létre, és minden diétához adjam meg mely tömb elemek tartoznak?
De akkor ha több diéta van együtt, hogy szedem ki amit a másik diéta zár ki?
Vagy nem tömbbel kell megoldani?
Volna valakinek ötlete, hogyan oldható meg?
A legjobb az lenne, hogy egy elem bevitelekor adnám meg mely diétákban ture és melyekben false. De nem áll össze a fejemben ez hogyan/mivel oldható meg. -
Jim-Y
veterán
Sziasztok,
A TypeScript es tarsai temakorhoz szeretnek hozzaszolni, mert felek, hogy ha egy kezdo olvassa a topikot akkor veletlenul egyoldalu velemenyt fog leszurni.
Kedves kezdo javascriptes
Amiket ebben a topikban olvasol velemenyeket mind szubjektiv velemenyek es kezeld is oket ugy. Semmit ne vegyel keszpenznek, hanem probalj meg tobb forrasbol utanajarni, probalj lehetoleg hiteles forrasokbol taplalkozni.
ES6 tema
Oszinten szolva almomban sem gondoltam volna, hogy 2021-ben meg van akinek ez nem alap, es tenyleg, ha nem hasznalsz ES6 featuroket akkor abba a szereny taborba tartozol aki meg mindig osregi javascriptet ir. Forras: [link]
Igy az elejen leszogeznem, hogy barki johet azzal, hogy ez is csak egy survey a sok kozul, ami teljesen igaz, de mig a topik nezetet egy kezdo 5-6 ember velemenye alapjan kenyszerul leszurni addig ezt a survey-t tobb 10 ezren toltottek ki vagyis sokkal inkabb relevans mint a te vagy az en szemelyes velemenyem egy kezdo szamara.
TypeScript tema
Ha egy ember egy sajat prokten dolgozik akkor megertem, hogy valaki nem latja a TS adta elonyok zomet. Ha viszont egy csapatban masokkal, produktivan kell dolgozni akkor a TS igenis nagyon sokat segit ebben.Errol az oldalrol azt lehet leolvasni, hogy a Compile-to-JS nyelvek kozul a TypeScript ami leginkabb megy [link] Errol meg azt erdemes leolvasni , hogy az altalanos trendek szerint no az erdeklodes a TypeScript-re. Ez [link] azert erdekes mert a valaszadok tobbsege a Static Typing hianyat latja a legnagyobb hianyossagnak a nyelvben. Mit ad a TS a JS-hez? Static Typingot. Nem veletlen, hogy no a TS nemszerusege
TypeScript is exploding vagy egy GitHub statisztikaA szemelyes velemenyem az, hogy a TS elengedhetetlen ma egy munkat kereso szamara. Ha valaki koca-programozo es csak sajat szorakoztatasara programozik, akkor nem kell TS, ha valaki Freelancer akkor szerintem ki tudna tunni a tobbi freelancer kozul azzal, hogy TS-el statikusan tipusozott kodot ad az ugyfelnek, ha pedig valaki vallalati kornyezetben akar elhelyezkedni akkor kotelezo, mert igazabol nagyvallalati kornyezetben jon ki a TS igazi elonye, ami szerintem a kovetkezo(k):
- A nyelv analizalja a kododat igy kepes hibakat megtalalni benne. "When the TypeScript compiler compiles your code, it creates an Abstract Syntax Tree (AST) of it" forras. Ez egy csomo elonnyel jar. Peldaul emiatt sokkal jobb intellisense-t kapsz az IDE-ben emiatt tud olyan programozoi hibakra ramutatni amiket amugy nem vennel eszre
- Dokumentalja a kodod. Az hogy megirod egy fuggvenyhez a bemeneti es kimeneti ertekek tipusat egyben dokumentacios ertekkel is bir. Kinek? Magadnak kevesbe, mondhatnad, hisz te irtad a kodot tudod, hogy mukodik, de egy kollegad aki meg akkor nincs is a cegnel amikor a kodot irod, de majd neki kell atirnia, hat neki bizony sokat fog segiteni
- polimorf tipushelyes kodot tudsz irni. Mit jelent ez? Kepzeld el, hogy egy data-table widget-et fejlesztesz, amihez filter funkciot is kell irni. Nem tudod implementacio kozben hogy aki majd hasznalja a widgetet, a data-table-t az majd milyen tipusu oszlopokat fog felvenni de neked mar most ugy kell megirni a filter-t, hogy mukdojon stringekre, numberekre, arrayekre. Ha most beegetsz egy olyan kodot a widget-be ami az erteken valamilyen array function-t fog hasznalni az nem fog mukodni number tipusu ertekekre. Nyilvan ezt TS nelkul is meg lehet oldani, viszont a TS segit abban, hogy polimorf meg tudd fogalmazni a filter fuggvenyed.
- Mivel a TS compile-to-js ezert ha TS-t hasznalsz olyan JavaScript featuroket is hasznalhatsz mar ma, amit amugy nem tehetnel meg mert az adott syntax-sugar meg nincs szeleskoruen tamogatva a bongeszok altal. Hogyan? Meg tudod mondani a TS compilernek, hogy milyen verzioju JS-re forditsa a kodod
- Nem beszelve a sok apro nuanszrol amit kapunk a TS-el pl absolute path aliases, hogy csak egy hasznos dolgot emlitsek
---
En a munkamban mar most is mindenhol TS-t hasznalok, es nem is allnek neki TS nelkul egy uj projektnek, sajat projekteken meg vegyes, hogy hasznalok-e vagy sem. A projekt stilusa szabja meg. Egy blog-hoz nem hasznalnek mert ott kb csak statikus html oldalakat gyartok, kicsi a hibalehetoseg a JS kodban, mig pl ha egy Authorization Server-t probalok leprogramozni ott meg igen, mert ott nagy a hibalehetoseg amiben segit a TS. Arrol nem is beszelve, ha a projektet igy vagy mas emberek is hasznaljak -majd- akkor meg a tipusok amiket expozalsz sokat fognak segiteni masoknak.
-
polymorphin
csendes tag
En nem teljsen ertem hogy mit szeretnel
1, Login formot soha ne kuldj GET-el
2, A gombnyomas animaciot szeritem meg lehet oldani CSS-el (hacsak nem egy arcon porgo ember a gomb)
3,"index page helyett application page kell login után, de csak utána" ennek semmi koze a front-end-hez ezt szerver oldalon kell intezni
4, Amit Rimuru linkelt azok nem hiba hanem status code-ok, nezd at ezt: HTTP Messages - HTTP | MDN (mozilla.org)
Tegyuk fel a felhasznalo helytelen adatokkal akar belepni akkor nem 200 OK-et kuldesz vissza szerverrol hanem 401 Unauthorized-et -
-
Rimuru
veterán
-
coco2
őstag
Köszönöm a tippeket mindenkinek, de a jelek szerint kommunikációs hibát véthettem, amikor nem hangsúlyoztam ki eléggé, hogy az a form egy login form, és a submit-nak újra _kell_ töltenie az oldalt. Van pár login paraméter, azokat raknám inkább post paraméterbe az oldal újratöltéshez, ahogy form submit-nál is volt. De az oldalnak újra kell töltenie (index page helyett application page kell login után, de csak utána).
Form submit gomb-on nem lehet képet cserélni. A submit elemet lehet image-re lecserélni. De akkor meg nincs gombnyomás anim. Ezért ne engem szidjatok, a html5-be a halom marhaság belefért, de egy normális form submit a jelek szerint meghaladta a tervezők képzelőerejét. Vagy csak simán sza*tak rá, nem tudom.
Xhr-ben el tudom kérni az új html-t stringben, igaz. Azt tudom háttérben intézni. Viszont akkor meg azzal lesz egy olyan problémám, hogyan cserélem le a megjelenített oldalt (az oldal egészét) egy változóban lévő stringre? Ilyet még nem csináltam. Lehet egyáltalán?
-
Silεncε
őstag
Ha ennyire kell, akkor tolsz egy location.reload-ot a then-ből?
Illetve ha kombinálod az eredeti ötletet, és a képet a button gyerekének teszed? Vagy a hátterének?
(nem akarlak mindenképp lebeszélni, csak ez nekem nagyon a funkció megerőszakolásának tűnik, ami sosem szerencsés + szerintem nem is lehet megcsinálni)
-
coco2
őstag
válasz
Silεncε #8680 üzenetére
Mert természetesen megtartanám az eredeti funkcionalitást. A <form> submit esemény lapot tölt újra.
Csúnya volt az eredeti gomb a form submit-hoz, lecseréltem image-re (a form elem bármi image-et is elfogad submit elemként). Viszont így nincs gombmegnyomás anim, ami bénán néz ki. Azért akarok nyomógombot.
Viszont akkor meg form submit nem lesz
Szóval marad a window.location.assign(). De ehhez meg POST paramétert adni nem tudok.
GET paramétert tuti adni tudok hozzá, azt megnéztem. De ha tudok POST paramétereket adni hozzá valahogyan, jobban nézne ki, hogy a megjelenített oldal címbe nem kerülnek bele a get paraméterek. Nem mintha jelenleg túl sok lenne, de akkor is randa
-
Silεncε
őstag
Az miért nem jó, hogy fetch-el (vagy ha szélesebb támogatás kell, akkor a jóöreg XMLHttpRequest) csinálsz egy POST requestet a click eseményre? Miért kell ehhez a location?
nevemfel
okosabb-tapasztaltabb
Hát akkor sajnos rossz helyen kopogtatsz
egyébként kb 2 évig használtam TS-t Angularral (ez már lassan egy éve, most egy pure JS-React projekten dolgozom), én szerettem. Az, hogy muszáj minden változóhoz/konstanshoz típusdeklarációt írni sztem csomót javit a kódon (vagy pl a generikusok, az is segített nekem egy csomószor). Bár az tény, hogy nem csodaszer ez se, TS-ben is lehet szar kódot írni ahogy a JS kód se feltétlenül rossz.
illetve amit még nagyon szeretek: nekem a VSCode a bevált editor, kb mindenhol azt használom. Ez ugye beépítetten hozza a TS-t, szóval pl ha van egy npm package-ben .d.ts, akkor az IntelliSense auto felismeri és az alapján segít.
-
coco2
őstag
Jelenleg van egy <form> a weblapon, submit post-al küldi az adatokat. Leszedném a form-ot a lapról, és submit helyett button onclick-et használnék. Azon gondolkodom, hogy a location-el tudok-e post paramétereket küldeni (hogy a szerver oldal ugyan az maradhasson), vagy muszáj lesz a post-ot get-re cserélnem? A location-re post támogatást eddig nem találtam. Ha véletlenül van rá valami trükk, felvilágosításnak örülnék.
-
nevemfel
senior tag
válasz
nevemfel #8677 üzenetére
Kihagytam pár assembly nyelvjárást. 6510, Z80, ilyen - olyan (jellemzően PIC, illetve Arduino) mikrokontrollert. De egyszer szívesen meghallgatnám a tapasztalataidat a TS használatával kapcsolatban. Sosem szégyen tanulni az okosabbtól-tapasztaltabbtól. Nem szarkasztikusan értem, tényleg komolyan gondolom.
-
nevemfel
senior tag
válasz
Silεncε #8676 üzenetére
De mondom, lelked rajta.
A lelkem az úré. Minden másra ott van a javascript.
Szerk: Én C64 basic-en kezdtem, aztán jött a Pascal 6-7, ES1-2-3-5, PHP 3-4-5-7, hozzá a JAVA 1.2, és egyszer kénytelen voltam alámerülni a COBOL gyönyöreibe. Szóval lehet, hogy ez csak valamiféle generációk közti megnemértés.
-
nevemfel
senior tag
Én is maradok az ES5-nél, bár kétségtelen, volt, mikor elcsábultam az ES6 feature-it tekintve. for...of, rest - spread operátor, natív module kezelés, destructuring. A többi szemét.
TS-t egyszer megnéztem, és arra jutottam, hogy nem érdekel. A problémák, amik fejlesztés közben jellemzően felmerülnek, a TS ezek közül nem old meg semmit.
-
-
_ak_
addikt
válasz
Silεncε #8665 üzenetére
Köszi, végül ez lett belőle:
const account: IAccount | null = useAccount(accounts[0] || {});
const customProp: string | undefined =
account?.idTokenClaims?.extension_customProp;Ahogy mondtad az AccountInfo lehet null is, emiatt a customProp lehet undefined is), amit használata előtt ellenőrzök, így a helyére került minden.
Jim-Y:
Kipróbáltam ezt is, de ugyan az maradt a figyelmeztetés.
coco2:
Távol álljon tőlem, hogy megmondjam a frankót, de ha engem kérdezne valaki, hogy érdemes-e a TS-el foglalkozni, akkor azt tanácsolnám, hogy ne is kezdjen bele semmibe anélkül, legalábbis, ha programozásból akar megélni és JS vonalon mozog.
-
coco2
őstag
válasz
polymorphin #8668 üzenetére
>?
??
-
Silεncε
őstag
Igen, mivel a hook visszatérési típusa nem
IAccount
, hanemIAccount | null
union, ezért csak simanIAccount
típus nem lehet a tároló konstans típusa. Az account konstans típusa legyen ugyanúgyIAccount | null
és úgy már jó lesz (a ?. le fogja kezelni, ha ott null van (de azt is kezeli, ha undefined), olyankor a string konstans értéke is undefined lesz) -
_ak_
addikt
válasz
Silεncε #8663 üzenetére
Valóban, figyelmetlen voltam a customProp egy string a végére és rossz helyen deklaráltam.
const account: IAccount = useAccount(accounts[0] || {});
const customProp: string = account?.idTokenClaims?.extension_customProp;Így megoldódik a customProp kérdése, de az accountra ezt kapom:
TS2322: Type 'AccountInfo | null' is not assignable to type 'IAccount'. Type 'null' is not assignable to type 'IAccount'.
A useAccount:
// Given 1 or more accountIdentifiers, returns the Account object if the user is signed-in
export declare function useAccount(accountIdentifiers: AccountIdentifiers): AccountInfo | null;
-
Silεncε
őstag
Szerintem: Az useAccount visszatérhet sima objecttel is (én erre következtetek a paraméterben átadott üres object miatt)? Akkor viszont a TS jogosan reklamál, hiszen ott az account típusa nem IAccount lesz, hanem
IAccount | object
“union”, az objecten pedig nem fogja megtalálni az adott propot.Illetve az az IAccount típusdeklaráció sincs szerintem jó helyen, annak az account konstanson kene legyen, a customProp az interface szerint string típusú
-
_ak_
addikt
Nekem erről egyből a Modernizr jutott eszembe, de nem tudom, hogy mennyire divatos még használni.
Más.
Ugyan csak lassacskán, de ismerkedem a TypeScripttel és van valami ami nem tudom, hogy miért nem működik. Az MS Authentication Libraryban adott egy type definition:export declare type AccountInfo = {
homeAccountId: string;
environment: string;
tenantId: string;
username: string;
localAccountId: string;
name?: string;
idTokenClaims?: object;
};AzA React komponensemben szeretnék hozzáférni egy custom idTokenClaimshez:
const { accounts } = useMsal();
const account = useAccount(accounts[0] || {});
const customProp: IAccount = account?.idTokenClaims?.extension_customProp;Az account definíciója az AccountInfo. Az IAccount egy általam létrehozott interface, ahol az AccountInfo-t próbálom kibővíteni, lovasítom alapján ennek működnie kellene:
interface IAccount extends AccountInfo {
idTokenClaims: {
extension_customProp: string;
};
}De akárhogy csavarom a dolgot az
.extension_customProp
-ra mindig azt kapom, hogy
TS2339: Property 'extension_customProp' does not exist on type 'object'.
Hol rontom el? -
coco2
őstag
válasz
polymorphin #8660 üzenetére
Ugy lehet felkesziteni hogy nem irsz egy sor JS kodot sem
Azt nem különösebben nagy ügy elintézni, hogy legyen nagyon kevés számú legfelső szintű div, azokon alapból display: none, és az js-ből legyen átállítva block / inline vagy akármire. Ha js nem fut, nem fog látszani semmi, csak egy üzenet, hogy kedves felhasználó, leszel szíves engedélyezni a js-t.
De különben csatlakoznék azokhoz, akik tojnak rá. Aki letiltja a js-t, csak ignore, és nem foglalkozni vele, mi lesz az oldallal. Aki egy hulladék vacakot akar böngészőnek hívni, had büfögjön, amit csak akar, de ha az oldalt is akarja, lesz szíves letölteni egy böngészőt - chrome.
Én például bele írtam a user guide-ba, hogy figyi felhasználó, nincs itt semmi ördöngösség, de ha valami mégsem megy, légyszi töltsd le ezt a böngészőt, és oda adtam egy chrome linket.
-
polymorphin
csendes tag
válasz
Silεncε #8659 üzenetére
Postcss, postcss-preset-env-el lehet, ez is a fentebb emlitett caniuse-bol dolgozik.
Ha nem tamogatja a HTML5-ot a bongeszo akkor lehet mondeni hogy igy jart"szétesve inkább ne jelenítse meg az oldalt sehogy, helyette egy információs lap, hogy használd ezt vagy azt a böngészőt."
<noscript> - HTML: HyperText Markup Language | MDN (mozilla.org)"Javascriptek futását letiltja teljesen. Na erre is fel akarom készíteni"
Ugy lehet felkesziteni hogy nem irsz egy sor JS kodot sem -
Silεncε
őstag
válasz
polymorphin #8657 üzenetére
A JS-polyfillekkel meg lehet oldani, de ugye ott vannak a különféle CSS szabályok, amikre ha jól tudom, nem létezik polyfill-szerű megoldás (hacsak valami CSS-in-JS nem tud hasonlót). Meg aztán lehet olyan régi böngésző is, ami még a HTML5-t se tudja
-
Taci
addikt
válasz
polymorphin #8657 üzenetére
Tapasztalatból tudom, hogy sokak nem is foglalkoznak vele, milyen böngészőt használnak, menjen minden mindenen (ha már egyszer drágán megvették a gépet), így még ha tehetnék, most is IE-ben nyitnának meg mindent. Ezért akarom ezt az ellenőrzést bele, szétesve inkább ne jelenítse meg az oldalt sehogy, helyette egy információs lap, hogy használd ezt vagy azt a böngészőt.
Plusz valamelyik adblockeres Chrome addon-nál láttam olyan opciót egyből kéz alatt, hogy a Javascriptek futását letiltja teljesen. Na erre is fel akarom készíteni.
De leghamarabb maximum csak hétvégén lesz időm ezzel foglalkozni (vagy inkább csak bőven később), ezért is szántam még csak puhatolózó kérdésnek.
Köszönöm a válaszokat.
-
Taci
addikt
Egyelőre ez még csak egy tapogatózó, felületes kérdezősködés, de azt szeretném elérni, hogy az oldalam csak olyan (verziójú) böngészőkön jelenhessen meg, amit 100%-ig támogat mindent, amit az oldalam használ.
Ehhez ugye előbb tudnom kellene, hogy pontosan mit használ az oldalam. Ehhez valamelyik topikban láttam belinkelve a Can I use oldalát, talán ezzel el tudok indulni.
De van esetleg olyan oldal, ami "átnézni" az oldalamat, és megmondja, hogy milyen böngészőkből milyen verzió az alap, hogy gond nélkül fusson minden?
Mert ha meglenne ez a lista, akkor az oldal betöltése előtt ellenőrizhetném a böngésző verzióját, és ha az általam beállított (a megkapott) verzió alatt van, akkor csak egy információs lapot jelenítenék meg, hogy a böngésző verziója nem támogatott, frissítse stb.
Vagy van erre jobb módszer? Ti hogyan kezelitek/kezelnétek ezt?
(JS topikba írom a kérdést, mert gondolom, azzal a legegyszerűbb ezt kezelni.)
Köszi.
-
-
coco2
őstag
válasz
Silεncε #8650 üzenetére
A #8640-et megtaláltam. Feltételezem, arról van szó.
Amit a #8649-ben írtam, arra vonatkozó célzás, hogy találkoztam már ügyfél igénnyel, amikor valaki nagy sebbel-lobbal nekiállt nagyon tutit alkotni, és akkor derült ki, igazából fogalma sincs, hogy mit akar, vagy hogy egyáltalán mire hasonlítson? A #8646 + #8647 kísértetiesen arra hajaz.
De ha nagyon félre értettem volna valamit, gondolom, majd felvilágosítasz.
-
-
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.
-
-
-
Köszönöm a példát. Ez már okot ad, hogy bízzak benne, minden lehetséges
-
Taci
addikt
Egyből a biliárd játékok jutottak eszembe, és találtam is még tutorialt is hozzá:
JavaScript + HTML5 GameDev Tutorial: 8-Ball Pool Game
Van forráskód is, illetve maga a játék is a leírásban szereplő linkek alatt. -
Sziasztok!
Elméleti kérdést tennék fel, tehát nem kérek kódot, példát vagy iyesmit.
Vannak olyan játékok, hogy például elindul egy lézersugár és különböző tükrök módosítják annak útját, ha a felhasználó oda mozgatja az adott elemet. A kérdés az lenne, hogy egy ilyesmi számítás / megjelenítés kivitelezhető HTML + JS -el? -
Chrystall
senior tag
Ha azt akarom, hogy Streaming videó reklámja ne álljon le ha átmegyek másik Tab-ra a böngészőben, akkor mit kell a konzolba beírni a fejlesztői eszközöknél? Az onvisibilitychange-el kellene mókolni valamit nem? Valaki tudna tippet adni?
-
Taci
addikt
Köszönöm szépen!
Ez a megoldás tuti eszembe nem jutott volna soha, főleg úgy, hogy csak sokadjára átnézve értettem meg, mi és hogyan is működik benne.Az escape-elést pedig már előtte megoldottam, ami keresőszavak a tömbbe bekerültek, azok már "tiszták".
Köszönöm még egyszer.
-
Taci
addikt
válasz
cstomee #8622 üzenetére
Belefutottam egy olyan hibába ezzel a kóddal, hogy amikor több szót is szeretnék kijelölni, és az egyik ezek közül a
mark
része (pl.ma
, vagy simán csak aza
betű), akkor a<mark></mark>
-ban lévő karaktereket is átírja, ezzel elrontva az egészet.A gond itt nyilván az, hogy már ugyanarra a sztringre hívom rá újra a kijelölő függvényt, amiben már benne vannak a mark tag-ek.
Ki lehet valahogy kerülni, hogy a kijelölő mark tag-eket is átírja? Mármint valami egyszerű módon.
Köszi.
-
coco2
őstag
Ne vegyél rá mérget, hogy az ugyan az az tényleg ugyan az. Website-on ugyan azt a path-ot használod file behívásra, épp csak egy régebbi file verziót raktál oda, máris kész a "nem ugyan az" esete. Mikrokód-hibás-ez-a-vacak-CPU-filozofálás helyett már rég teleszórhattad volna az egész kódot console.log()-al orrvérzésig, és első nekifutásra kiderülne, mi sikerül félre.
-
&martonx
Köszönöm a válaszokat, utána nézek a dolognak. Csak egy apró dolog még:
Ha nem egyezik a kimenet a bemenettel, akkor elírtad a függvény nevet
Ha egyezik, de a bemenet nem stimmel, akkor a programot írtad el.
Mint említettem, ugyan azt a fájlt hívják be pontosan ugyan azzal az include kóddal.
-
martonx
veterán
A localStorage írás nem tud hibázni. Ráadásul faék könnyen ellenőrizheted, hogy mi van éppen a localstorage-ban, sikerült-e az írás.
Mivel semmit nem tudunk a rendszeredről, ezért azt sem tudhatjuk, hogy esetleg van-e valami ultraspéci jogosultsági probléma. Vagy hehe, a kódod el sem jut az írásig, csak te azt hiszed, hogy eljut. De ezt is csak te tudod ellenőriznilocalStorage.setItem('myKey', 'myValue');
Ha ez mindenkinél működik, csak éppen te vagy az egyetlen, akinél nem, akkor szerinted ebben ki tud neked segíteni?
-
coco2
őstag
Ahogy @martonx említette, az ilyesmivel már mindenki maga szenved. Valami elírás lesz.
Az írás áll abból, hogy ráhívsz a local storage függvényre kulcs és adat párossal. Azokat logba tudod dobni. Debug jelleggel beraksz oda azonnal egy visszaolvasást is. Ha nem egyezik a kimenet a bemenettel, akkor elírtad a függvény nevet
Ha egyezik, de a bemenet nem stimmel, akkor a programot írtad el.
-
-
-
-
Sziasztok!
Értetlenül állok egy probléma előtt.
Készítettem egy témaváltó kapcsolót. A kapcsoló egy JS-t hív be a PHP fájlba, módosítja a szövegszínt, hátteret és a képeket is. Mindezt megfejeltem egy Local.Storage megoldással is, hogy megjegyezze a felhasználó kiválasztását és aszerint töltsön be legközelebb is az oldal.
Mindez remekül is működik, teszi a dolgát. Legalábbis, tesztoldalon.
Miután elkészült, beintegráltam ezt a kapcsolót a fő oldalba is (egyelőre csak Localhost). Ott már nem igazán akar menni a dolog. A váltás megtörténik, kivéve a képekkel. Ezen felül nem írja át a Local.Storage értékét. Ha a tesztfájlal módosítom, akkor a fő oldalon is megtörténik a módosítás, tehát hivatalosan mindent lát és használ is. Éppen ezért nem értem a dolgot.
Mi okozhatja, hogy ugyan az a funkció, ugyan olyan ID alatt lévő képekkel egyik oldalon megy, másikon nem? Illetve, hogy látja és használja is a Local.Storage-t mindkettő, de csak az egyik képes módosítani?
Mindkét oldalon PHP include-al van meghívva a komplett kapcsoló és JS include-al a hozzá tartozó JS.
Előre is köszönöm a válaszokat!
Ui.: JSFiddle elmarad, mert nem ott van a probléma, illetve PHP-t nem futtat.
-
Taci
addikt
válasz
martonx #8624 üzenetére
Na basszus, nekem pont ott törte a sort a böngésző cstomee válaszánál, hogy úgy tűnt, a "jsFiddle" még az előző linkhez tartozik, így fel sem tűnt, hogy az egy külön belinkelt példakód... Munka utána azonnal nézem is, a tiéddel együtt, martonx.
És megfogadom a tanácsot, ha újra elakadnék, linkelek példakódot mindenképp.
-
martonx
veterán
Egy kicsit tovább szépítve cstomee példáját: Edit fiddle - JSFiddle - Code Playground
Taci, az nem baj, hogy értelmesen leírod, hogy mit szeretnél, mert sokszor olyankor jön rá az ember, hogy még megfogalmazni sem tudja, nem hogy megvalósítani.
De egy működő jsfiddle példa száz szónál is többet ér -
Taci
addikt
Ah, amit én ~50 sorban sem tudtam tökéletesen megoldani, te rendbe raktad ~10 sorban, úgy, hogy annak is a fele még logolás is...
Igazából kell még egy kis idő, hogy felfogjam, mi is történik itt...
(Értve ezalatt a
$1
-et és a zárójelezést avar textToMark
-nál stb..)Ismételten köszönöm szépen mindenkinek!
@cstomee: Amikor ide írok, már túl vagyok nagyon sok keresésen, kutakodáson, utánajáráson. Próbálom ennek a fórumnak az eszét csak akkor igénybe venni, ha már tényleg nem találom a megoldást saját erőből.
És "sajnos" élettapasztalat, ha valamit már nem írok alaposan körbe az elején, akkor később magyarázkodhatok és pontosíthatok, elvesztegetve sok időt és energiát.
De köszönöm az észrevételt mindenképp, igyekszem a jövőben kevésbé regényesre ereszteni! -
cstomee
tag
Csak egy észrevételt ha megengedsz... Túl hosszasan írod le hogy mit szerenél ahelyett hogy 4-6 kulcsszót beírnál a google-be. pl: javascript mark text non case sensitive
jsFiddle
Nem tudom hogy ez kell e neked mert őszintén bevallom nem olvastam végig amit írtál, TLDR;.
Szerk.:
Időközben a példa mondat majdnem hasonló lettEgy kicsit bonyi a tiéd, de ha működik akkor jó ...
-
Taci
addikt
Készen is van az "ultimate kereső kijelölő"
https://jsfiddle.net/4awv16hg/16/
Rengeteg bug volt benne, de most már javítva vannak.
Illetve majdnem mind, mert ha vesszőre (",") keresek, meg infinte-loop-gyanús, pontnál (".") pedig kijelöl mindent mindenhol.
De látom, írt dqbd még valamit, ha visszajöttem, átnézem.
Köszi.
-
dqdb
nagyúr
Ajánlott előtte a
textToMark
tartalmának escape-elése, ha véletlenül regex számára speciális karaktert tartalmazna.var textToMark = "a*b*c";
var textContainer = "xxxx A*B*C yyyy a*b*c zzzz";
var escapeRegex = new RegExp(/[.*+?^${}()|[\]\\]/g, "g");
console.log(textToMark);
var textToMark = "(" + textToMark.replaceAll(escapeRegex, "\\$&") + ")";
console.log(textToMark);
var replaceRegex = new RegExp(textToMark, "gi");
console.log(textContainer);
textContainer = textContainer.replaceAll(replaceRegex, "<mark>$1</mark>")
console.log(textContainer); -
Taci
addikt
válasz
martonx #8617 üzenetére
Persze, jogos minden gondolat.
Azért nem írtam eddig, mert egyszerűsítettem, mert az előző változat már ránézésre is túlbonyolított volt.
Így talán egy fokkal egyszerűbb, és van benne példa is:
https://jsfiddle.net/4awv16hg/3/ (konzolba logolással)
https://jsfiddle.net/4awv16hg/4/ (konzolba logolás nélkül, ha zavaró lenne a sok plusz sor)Itt csak 1 elemen futtatom,
if
használatával, arra szépen lefut. Amúgywhile
-lal akarom (mert ha ez a függvény meghívódik, akkor 1 találat már biztosan van, szóval egyszer mindenképp le kell futnia), csak az a baj, ha átírom az if-et while-ra, akkor lefagy egy időre (felteszem, ismét valahol infinite loop) (logolásnál látszik, hogy valami nem stimmel a loop-ban), a logolás nélküliben pedig a konzolban írja, hogy "Invalid string length at markText".Szóval valószínűleg a ciklusban hibázok valamivel, mert a logban látszik, hogy a textContainerLocal elkezd "önmagába írni" már azután is, hogy elvileg megtalálta mindkét bejegyzést.
-
martonx
veterán
Netán ha kaphatnánk működő konkrét példát html-el? Az mondjuk így ránézésre látszik, hogy amit tippre pár sor kóddal meg lehetne oldani, te 29 teleírt sorból oldottad meg.
Szóval komolyabban bele se néztem, mert ez így biztos, hogy nem jóés nem működő példa híján, hogy az 5 sor helyett, 29 sorban hol a hiba....
-
Taci
addikt
Igen, ezzel valóban a jókat jelöli ki, viszont az a gond továbbra is, hogy ha csupa kisbetűvel írom be a keresőbe a szót (pl. "máté"), akkor hiába szerepel az eredeti tartalomban nagy kezdőbetűvel (pl. "Máté"), a keresési találatokban átírja a keresésben megadott formára.
Ha pl. a textContainer az, hogy
"Alszik Máté, mert elfáradt."
, a keresési kifejezés pedig az, hogy "mÁtÉ", akkor bár kijelöli a megfelelő sztringet, viszont ez lesz a megjelenített sztring:"Alszik mÁtÉ, mert elfáradt."
Így csináltam meg, legalábbis itt járok benne:
https://jsfiddle.net/j7qt4bva/Ha "normál kifejezésre" keresek (pl. "máté" vagy "apple"), tökéletesen működik, de rövidebbekre (pl. "a" vagy "az") végtelen cikulsba kerül valahol.
(Amúgy sanszos, hogy erősen túlbonyolítva csináltam meg...)
Az alapötlet az, hogy a keresett szó pozícióinak megkereséséhez csupa nagybetűssé alakítom a szöveget, amiben keresek, és a keresett szót is. Aztán ha megvan a pozíció (vagy pozíciók, több találatnál), akkor egy tömbbe szétvágom az eredeti sztringet a találat pozíciók végén. Majd ezeken belül megcsinálom az öleted alapján (RegExp "i") a <mark> tag hozzáadását úgy, hogy a már megszerzett pozíciók alapján kiszedem az eredeti karaktereket (így meglesz az a változat, hogy a kis- és nagybetűk az eredetiben vannak).
Aztán ezeket a tömbelemeket összefűzöm újra, és ezt adom vissza.Csak valahol rövid(ebb) karakterszámnál végtelen ciklusba futok.
-
Taci
addikt
Keresés eredményéhez akarom kijelölni a találatokon belül a keresett szavakat.
Erre a<mark>
tag-et használom.function markText(textContainer, textToMark){
return textContainer.replace(textToMark, "<mark>" + textToMark + "</mark>");
}
Így viszont nem tudom kezelni a kis- és nagybetűket.
Pl. arra keresek, hogy "máté". A szerver visszaadja találatnak a "Máté"-t (nagy kezdőbetűvel) tartalmazó találatokat is (ehhez kapcsolódóan amúgy a PHP topikban van egy nyitott kérdésem, és nagyon összezavarodtam vele, ha valakinek magabiztos tudása van a keresés mikéntjével PHP-ban/SQL-ben, kérem, nézzen majd rá), viszont a JS csak azokat jelöli be, amik pontosan megfelel a keresésnek.
És nem tudom, hogyan kellene úgy módosítanom a fenti függvényt, hogy ha a szövegben az van, hogy "Máté" (nagy kezdőbetű), a keresési szöveg az "máté" (kis kezdőbetű), a találatban lévő sztringben a nagy kezdőbetűs Mátét is vegye körbe <mark> taggel. (Ha csak a kezdőbetűt kellene figyelni, könnyű lenne, viszont ugye lehet olyan találat is, ahol csupa nagybetű, vagy csak a 3. karakter nagy stb. És nekem az kellene, hogy kijelölje, bárhogyan is találja meg a "máté"-t: máté, Máté, MÁTÉ, mÁtÉ, MáTé stb.)
Lehet, valami nagyon egyszerű, és amint elküldöm a hozzászólást, eszembe is jut - de egyelőre nem jövök rá.
Hátha ti már találkoztatok ilyen helyzettel.
Köszi.
-
-
-
martonx
veterán
-
Húh, köszönöm mindenkinek a válaszokat, három remekül működő megoldás is született.
Azonban, mivel az oldal felépítésem úgy néz ki, ahogy lényegében martonx leírta, ezt a megoldást választom. -
coco2
őstag
Kérdés
display: none / block
-hoz,visibility: hidden / visible
-t használni helyette fog felvetni problémákat?@Silεncε:
Köszönöm a tippet. Ezeken a marketing vicceken én folyton elámulok -
martonx
veterán
Az én javaslatom, ami szerintem A megoldás, még ha elsőre komplexnek is hathat a js-es barkácsmódszerekhez képest:
Egyrészt, ha mindent jól csináltál, akkor css media query-ket használtál, azaz tisztán css-ben dől el, hogy ez a div block vagy flex (ezen kicsit elmosolyodtam, hiszen a flex pont erre való, hogy ne kelljen media query-ket se használni, de te tudod, hogy miért jó hol block, hol flex-ként használni, szóval nekem már eleve itt bűzlik valami
).
A tisztán css-es megoldásból kiindulva, csak annyit kell tenned, hogy csinálsz egy css class-t, amit hívj mondjuk .hidden-nek, amiben egyetlen egy rule van: display: none !important;
Alapból oldal betöltésnél ezen a div-en legyen rajta ez a hidden class. Ezzel elérve, hogy betöltéskor ez az elemed nem fog látszódni. Ha minden igaz, akkor ezt eddig is így csináltad, ha viszont nem, akkor máris nem hiába koptattam a billentyűzetet.És amikor gombnyomásra vissza akarod hozni láthatóvá, akkor elég lesz csak ezt a class-t leszedni róla
document.getElementById("bazinga").addEventListener('click', event => {
document.getElementById("walami").classList.remove('hidden'); // fejből írtam, nem biztos, hogy hibátlan...
});és voilá, ekkor máris a tisztán css-ben, az adott szabályoknak megfelelő display lesz rá érvényes
és így nem kell js-ben találgatni, hiszen a js nem erre való (függetlenül attól, hogy js-ben is meg lehet oldani). Separation of Concerns.
-
nevemfel
senior tag
Én így oldanám meg a mező elrejtését, és az eredeti display visszaállítását, legyen az block vagy flex, vagy bármi más:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#walami {
display: flex;
}
</style>
</head>
<body>
<form>
<input type="text" id="walami">
</form>
<script>
document.getElementById("walami").style.display = "none";
</script>
<input type="button" id="bazinga" value="Bazinga!">
<script>
document.getElementById("bazinga").addEventListener("click", function(event) {
document.getElementById("walami").style.display = "";
});
</script>
</body>
</html>Remélem, érthető a példa.
-
Taci
addikt
Én a mobilos dolgokra egészen egyszerűen ezt használom:
if (screen.width < 600){
}
Aztán persze ezt az értéket (szélesség pixelben) finomhangolhatod magadnak, de én is csak találtam, és nekem tökéletesen működik chrome dev tools-ban a különböző előre beállított képernyőfelbontásokra.
-
Sziasztok!
22-es csapdába estem.
Adva van egy mező, nevezzük DIV-nek. Az alap CSS paraméterezése szerint ez asztali környezetbendisplay: block;
, míg mobil környezetbendisplay: flex;
.Csakhogy, ez a mező az oldal betöltésekor
display: none;
módon eltűnik és csak egy gombnyomással lehet visszahozni. A probléma a következő, JS oldalról:document.getElementByID("DIV").style.display = "block";
- ebben az esetben ugye megjelenik és asztali felületen kiváló, csak ugye BLOCK lesz az mobilnézetben is. Ugyan ez van természetesen fordítva is.Szeretnék egy olyan megoldást, ahol a JS figyelembe veszi, hogy a Weboldal mobilnézetbe van-e, vagy sem és eszerint jeleníti meg az adott mezőt. Van erre megoldás?
Előre is köszönöm!
-
Silεncε
őstag
A serverless egy architektúra, igazából arról van szó, hogy nem a hagyományos értelemben vett backend szervert írsz, hanem a business logicot megírod mondjuk JS függvényekben, majd ezt odaadod a felhő providernek, hogy legyél szíves futtatni. Igazából neked az üzemeltetés részen semmit nem kell tenni, a provider intézi a scalinget, stb. Erre utal a serverless név.
Új hozzászólás Aktív témák
Hirdetés
- Hibátlan Apple iPhone 15 Pro - Kártyafüggetlen - 128GB Fekete Titán (87% Akku)
- Apple iPhone 14 Pro, Kártyafüggetlen, 1 Év Garanciával
- Xiaomi Redmi 12 Pro 5G 128GB, Kártyafüggetlen, 1 Év Garanciával
- Xiaomi Redmi Note 11 Pro 128GB, Kártyafüggetlen, 1 Év Garanciával
- HP Probook 640 G2 (14/i3-G6/8GB/256SSD/Magyar/Win11) - Szép!
- Veszünk: PS5 Fat/Slim/Digital/Pro konzolt, játékokat, Portalt stb. Kérj ajánlatot!
- Samsung Galaxy S23 128GB, Kártyafüggetlen, 1 Év Garanciával
- Okosóra felvásárlás!! Samsung Galaxy Watch 5 Pro, Samsung Galaxy Watch 6 Classic
- LG UltraGear Gaming Monitorok: FRISS SZÁLLÍTMÁNY -30%
- Amazon Kindle 10th Generation ébresztős tok
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: PC Trade Systems Kft.
Város: Szeged