-
GAMEPOD.hu
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
-
cattus
őstag
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 asubscribe
metó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.
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
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é.
Do the thing!
-
cattus
őstag
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.
[ Szerkesztve ]
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
válasz RedHarlow #7162 üzenetére
Array.map()-et és String.slice()-ot használva meg tudod oldani egyszerűen.
Do the thing!
-
cattus
őstag
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';
Do the thing!
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
-
cattus
őstag
-
cattus
őstag
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.
Do the thing!
-
cattus
őstag
válasz hiperFizikus #7312 üzenetére
Mit szeretnél elérni? Ha az első megoldás működik, miért nem felel meg?
Do the thing!
-
cattus
őstag
-
cattus
őstag
válasz hiperFizikus #7351 üzenetére
A substr() deprecated, tehát már nem érdemes használni.
A slice() és a substring() között a fő különbség, hogy az előbbi elfogad negatív számokat is.
Do the thing!
-
cattus
őstag
válasz hiperFizikus #7367 üzenetére
Ajánlom figyelmedbe a kulcsszavas kereső (angolul történő) használatát, ugyanis nagyon sok kört meg tud spórolni neked a későbbiekben is.
Do the thing!
-
cattus
őstag
válasz hiperFizikus #7383 üzenetére
myStringVariable.replace(/\|\|/gm, '|')
Ez
a változóban kicseréli az összes '||' karaktert '|' karakterre.[ Szerkesztve ]
Do the thing!
-
cattus
őstag
válasz hiperFizikus #7393 üzenetére
Ne string-be mentsd el a regexet, hanem regexként, így:
a2 = /\|\|/gm
Do the thing!
-
cattus
őstag
válasz hiperFizikus #7397 üzenetére
Az első esetben
xa01[0]
ésxa01[1]
-nek amikor értéket adsz, akkor két különböző tömb lesz létrehozva, mivel JavaScript esetében ezt jelenti a[]
szintaxis.A második esetben viszont egy már előre létrehozott tömböt (
xe
) adsz odaxa01[0]
-nak ésxa01[1]
-nek. Ilyenkorxe
értéke nem másolódik le, csak egy referencia lesz beállítva rá, és ezért válozik megxa01
másik értéke, ha az egyiket változtatod.Do the thing!
-
cattus
őstag
válasz Nagyzoli27 #7400 üzenetére
x.textContent = x.textContent.replace("Ft", "");
x.textContent = x.textContent.replace(",", ".");
Do the thing!
-
cattus
őstag
-
cattus
őstag
válasz hiperFizikus #7510 üzenetére
Elképesztő. Elágazást használtál egy programban. Meghajlok kódoló tudásod előtt.
Do the thing!
-
cattus
őstag
válasz RedHarlow #7617 üzenetére
Csinálsz a '?year=<évszám>'-ra egy regexet. Ha már tartalmazza a link, akkor kicseréled, ha nem, akkor hozáfűzöd.
const regex = /\?year=\d{4}/
if (links[i].href.match(regex)) {
links[i].href = links[i].href.replace(regex, `?year=${year}`)
} else {
links[i].href = `${links[i].href}?year=${year}`;
}Do the thing!
-
cattus
őstag
válasz instantwater #7650 üzenetére
Amúgy a Nest is expressre épít, csak elég sokat elwrappel. Nekem az architektúrája eléggé bejött, meg jóval "opinionated-ebb", mint egy sima express, ezért kezdőknek talán jobban ajánlott. Nálunk a cégben is ezt hozták példának, mint go-to node.js framework. Nameg default typescript-et használ.
Arcanus: amúgy amiket felsoroltál, azoknak nagy része nem framework, hanem build tool.
Do the thing!
Új hozzászólás Aktív témák
- AMD Ryzen 9 / 7 / 5 7***(X) "Zen 4" (AM5)
- Az NVIDIA szerint a partnereik prémium AI PC-ket kínálnak
- Ukrajnai háború
- WLAN, WiFi, vezeték nélküli hálózat
- Kormányok / autós szimulátorok topicja
- Helldivers 2 (PC, PS5)
- iPhone topik
- Megjelent az iOS 17.4, minden idők egyik legfontosabb iPhone-frissítése
- gban: Ingyen kellene, de tegnapra
- Autós topik
- További aktív témák...