- Fotók, videók mobillal
- iPhone topik
- 45 wattos vezeték nélküli töltés jön az új iPhone-ba
- VoLTE/VoWiFi
- Bemutatkozott a Poco X7 és X7 Pro
- Milyen okostelefont vegyek?
- Xiaomi 14T Pro - teljes a család?
- Honor Magic6 Pro - kör közepén számok
- Android alkalmazások - szoftver kibeszélő topik
- Huawei Mate X6 - keleti oldal, nyugati oldal
-
Mobilarena
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
-
#7321
cattus
addikt
hiperFizikus
#7320
cattus
addikt
válasz
hiperFizikus
#7320
üzenetére
GoogleDuckDuckGo első találat.
-
#7313
cattus
addikt
hiperFizikus
#7312
cattus
addikt
válasz
hiperFizikus
#7312
üzenetére
Mit szeretnél elérni? Ha az első megoldás működik, miért nem felel meg?
-
cattus
addikt
Az első hibát ott véted, hogy a givebackCookie függvényben nem nullázod a cookie értékét, így az if-ednek mindig ugyanaz az ága fog lefutni.
A div újratöltését kezelő kódot meg inkább nem kísérlem meg megérteni és debugolni, meg amúgy is jQuery-t már nem illik 2019-ben használni.
Működő kód:
function wantCookie() {
document.cookie = "tesztkuki=Létezik";
loadDiv();
}
function givebackCookie() {
document.cookie = "tesztkuki=; expires=Thu, 18 Dec 2013 12:00:00 UTC";
loadDiv();
}
window.addEventListener("load", loadDiv);
function loadDiv() {
if (document.cookie.includes('tesztkuki')) {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-want'>Press the button, if you want a cookie<br /><button id='cookiebutton' onclick='wantCookie()'>I want a cookie</button><br /></div> <br />The cookie now DOES NOT exist !";
} else {
document.getElementById('cookie-check').innerHTML = "<div id='cookie-give-back'>Press the button, if you want give back the cookie<br /><button id='cookiebutton' onclick='givebackCookie()'>I give back the cookie</button><br /></div> <br /><br />The cookie now exist !<hr />";
}
}Itt minden cookie változtatás után újratölti a div tartalmát. A
window.addEventListener("load", loadDiv);pedig azért felel, hogy az oldal betöltésekor is fel legyen töltve a div.indexOf helyett használj includes-ot, ha csak annyit akarsz megtudni, hogy tartalmazza-e az adott dolgot.
Továbbá ahogy most a div tartalmát kitöltöd, az nem túl elegáns / karbantartható / error-safe. Használj createElement-et és appendChild-ot.
A fenti kódodat megfixáltam, de erősen ajánlom a fentiek figyelembevételét. Sok későbbi szenvedést tudsz megspórolni.
+1: Ha nem kötelező cookie-t használni, akkor ajánlom inkább a localStore-et.
-
-
cattus
addikt
Annyit azért hozzáfűznék ehhez a kódódhoz, hogy bár működik, de még bőven van benne hibás működés. Pl. az alábbi sor:
var content = this.parentNode.style.display = 'none';Itt bár a div-et eltűnteni, de a content értéke
true(ami athis.parentNode.style.display = 'none';kifejezés eredménye) lesz, nem pedig maga a tartalom. Ezért az utána lévő display állítás sem fog lefutni. Ha megnézed a console-t látod, hogy hibát dob. Javaslom nézz utána, hogy hogy működnek ezek az alap dolgok (értékadás, visszatérési értékek, callback és hasolnók.Plusz a w3schools-os editor helyett szerintem inkább használj jsfiddle-t az ilyen kis kódokhoz, itt van külön HTML, CSS és JS rész, jóval átláthatóbb az egész, plusz van benne automatikus kódformázás is.
-
cattus
addikt
Persze, hogy nem tünteti el a gombot, ugyanis nem nyúlsz hozzá a kódodban. A második esetben azért nem történik semmi, mert a
var content = this.nextElementSibling;a gomb utáni, vele egy szinten lévő elemeket választja ki, és ha a gombot a paragrafus után rakod, akkor nem lesz ennek megfelelő DOM elemed. Szerintem itt a jó megoldás az lenne, ha a gombot és a szöveget összefoglaló elemet rejtenéd el. Erre egyszerű megoldás, ha az eventlistener callback-jébe ezt írod:this.parentNode.style.display = 'none'; -
cattus
addikt
válasz
RedHarlow
#7162
üzenetére
Array.map()-et és String.slice()-ot használva meg tudod oldani egyszerűen.
-
-
cattus
addikt
Akit esetleg érdekel, megcsináltam async-await használatával, ezzel kicsit tisztább a szintaxis.
(#7124) Aureal:
Az a helyzet, hogy amit szeretnél (frissíteni a UI-t, miközben a háttérben dolgozol), kb. minden nyelvben hasonlóval lehet megoldani (vagy használsz valamilyen framework-öt, de az ebben az esetben atomrakétával a verébre esete). Ha a tömbök kezelése se teljesen tiszta számodra, akkor azt ajánlanám, hogy első körben az alapoknak nézz utána.A fentebb linkelt indiai YT videó helyett inkább ajánlom a Lynda és Pluralsight viedósorozatait, én sok dolgot onnan tanultam meg.
-
cattus
addikt
Megoldottam Promise-t használva (sejtésemre máshogy nagyon nem is lehet), itt a kód. Raktam bele egy kis késleltetést (setTimeout), hogy látszódjon a folyamat, mert anélkül instant lefut az egész.
Visszatérve az eredeti problémára és kódra: azért nem írta ki, hogy "dolgozom az eredményen...", mert a UI mindaddig nem frissül, amíg mindkét függvény futása nem ért véget teljesen.
-
cattus
addikt
válasz
joysefke
#7099
üzenetére
Nem kell semmit szerializálni, nem is tudom ezt honnan vetted.
A HTML-be alapból letiltod a gombot egy disabled attribútummal.
<button id="rsvpSubmit" class="btn btn-primary btn-submit" disabled type="submit">Send</button>A JS:
$(document).ready(function() {
$('#rsvpForm :input').change(function() {
$("#rsvpSubmit").removeAttr('disabled');
});
});Ja és a pastebin-es kódban a jquery-t meg hasonlókat korábban húzd be, mint a saját kódod.
-
-
cattus
addikt
válasz
bandi0000
#6999
üzenetére
Amíg az alkalmazáson belül marad az adat, addig persze, átadhatod az adott objektumként (kérdés, hogy a Form kezelésén kívül szükség van-e máshol a teljes wrappelt objektumra az adaton kívül - általában nem), a lényeg, hogy amikor a HTTP hívás megtörténik, ott már a "csupasz" JSON objektumot küldd el a szerver felé.
-
cattus
addikt
válasz
martonx
#6984
üzenetére
Tény, hogy a React népszerűbb, de az Angular 2+ bőven nem halott platform. Mind támogatásban, mind feature set-ben szerintem előrébb van, mint a Vue. Tény, hogy komplikáltabb a default felépítése, mint a másik két "nagy" frameworknek, de ha megnő az alkalmazásod, akkor mindegyikben sok kód lesz előbb-utóbb.
-
cattus
addikt
válasz
bandi0000
#6982
üzenetére
És ez a tap fv vagy micsoda, ez mit akar csinálni? Sikeres kérésre csinál valamit, a cathError meg a sikertelenre?
A catchError igen, a tap ennél kicsit összetettebb. Dokumentáció -> [link]
Lényegében egy side-effectet csinál anélkül, hogy a forrás Observable-t megváltoztatná. Érdemes utánnanézni a pipe opreátornak és használatának -> [link]A handleError első paraméterként megkapja, hogy melyik függvényben keletkezett a hiba. Maga a handleError egy
(error: any): Observable<T>szignatúrájú függvénnyel tér vissza. Ez a függvény kilogolja konzolra és a saját logger függvénnyel az errort, majd visszaadja az esetlegesen paraméterként kapott változót Observable-be csomagolva (erre szolgál azof(result as T)).Utolsó kérdésedre: igen, definiálsz a backenden egy végpontot, amin JSON-ban adod vissza az adatot, majd a frontendről ezt a végpontot hívod HttpClient-tel.
-
cattus
addikt
válasz
bandi0000
#6973
üzenetére
Most nem tudom pontosan a tutorial-ban mi van, általában a userek felé szokták tudatni, ha egy művelet sikeres volt / failelt.
Ez nagyban függ attól, hogy a backend hogyan működik, milyen végpontjai vannak (bár ez nem mindig feltétel, lásd GraphQL), és az alapján tudja a kliens hívni. Meg attól is függ, hogy a user felé hogyan jeleníted meg az adatokat. De egy egyszerű CRUD app esetében igen, egy táblához tartozik egy API endpoint, amit meg akarsz jeleníteni valahogyan a frontenden.
-
cattus
addikt
válasz
bandi0000
#6971
üzenetére
ngOnInit és konstruktor kapcsolata: [link]
Typescriptben minden tagváltozót / tagfüggvényt this-szel kell hivatkozni osztályon belül, ez a nyelv jellegzetessége.
Miért kellett az a lambda kifejezés? Elvileg van egy HeroService, ami egy tömböt adna vissza
Nem egészen, a service egy
Observable<Hero[]>-t ad vissza, aminek asubscribemetódusával tudsz feliratkozni a változására, így aszinkron módon tud működni a service.ezek a service osztályok csak arra vannak, hogy adatokat szolgáltassanak
Legiknább arra, de használhatóak arra is, hogy a front-end beállításait elérhetővé tegyék a komponensek között.
a komponensek meg gyakorlatilag minden másra
A komponens a webappodnak egy adott feladatát ellátó része, rendelkezik felülettel (template), formázással (stylesheet), meg logikával (.ts kód).ő
Observable<> meg azért kell, hogy ha servertől várnám az adatot, és ha az nem érkezik meg, akkor ne omoljon össze az alkalmazás, hanem várjon addig, amíg nem kapja meg
Inkább úgy fogalmaznék, hogy így nem blokkolja a UI-t, amíg megjön az adat, tehát nem "fagy be" az alkalmazás.
Tutorialba csináltunk még üzenet kezelést, pl, amikor betöltődnek az adatok, akkor kiírja hogy sikeres volt,ezt valós alkalmazásnál is használják, vagy nem ilyen formában gondolom, hanem lementik valahova?
Mit értesz lementés alatt? Front-end kódban nagyon ritkán van szükség perzisztens adattárolásra, egy üzenet megjelenítéséhez meg nem is kell.
Új hozzászólás Aktív témák
Hirdetés
- Motorolaj, hajtóműolaj, hűtőfolyadék, adalékok és szűrők topikja
- Audi, Cupra, Seat, Skoda, Volkswagen topik
- Fotók, videók mobillal
- Le Mans Ultimate
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- Xbox Series X|S
- Battlefield 4
- NVIDIA GeForce RTX 5080 / 5090 (GB203 / 202)
- Intel Core i3 / i5 / i7 / i9 10xxx "Comet Lake" és i3 / i5 / i7 / i9 11xxx "Rocket Lake" (LGA1200)
- Intel Dual Core 2000 felhasználók barátságos offolós topikja
- További aktív témák...
- Samsung Galaxy J6 2018 32GB, Kártyafüggetlen, 1 Év Garanciával
- AKCIÓ! Apple Mac Studio M1 MAX 2022 32GB 512GB számítógép garanciával, hibátlan működéssel
- Realme C30 32GB, Kártyafüggetlen 1Év Garanciával
- Medion Erazer Beast X40-hez vízhűtés (MD 60961) (ELKELT)
- BESZÁMÍTÁS! ASRock H310CM i3 9100F 8GB DDR4 240GB SSD 1TB HDD GTX 1060 3GB AeroCool Strike-X 500W
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: Promenade Publishing House Kft.
Város: Budapest