A + művelet numerikussá konvertálja az adatot, például:
Objektumok esetén az objektum valueOf() metódusa által visszaadott érték konvertálódik numerikusra.
===
A === relációs jellel vizsgálható, hogy két adat típusa azonos, és az értékük is egyenlő.
Ellentéte: !==
addEventListener()
Egy html-elemhez egy új eseménykezelő függvényt ad hozzá, tehát nem írja felül az eddigi hozzárendeléseket.
Egy html-elemhez sok eseménykezelő függvény lehet hozzárendelve, akár ugyanazzal az esemény névvel,
így az adott eseményre az összes függvény le fog futni.
Néhány lehetséges esemény név:
Példa: egy oldalon lévő linkre kattintva, megkérdezzük hogy valóban a link címére akar menni.
Ha nem akar, akkor letiltjuk a link default funkcionalitását, így a felhasználó nem navigál el az oldalról
egy másik címre.
Az arguments segítségével lehetőség van a függvény paramétereit elérni,
még abban az esetben is ha a függvénynek nem definiáltunk paramétereket.
Így működnek a változó paraméterszámú függvények is. Példa:
array
A madott indexű elem lekérdezése, mely megengedi a negatív indexet.
Negatív index a tömb végétől visszafelé értendő.
Ha nemlétező indexre hivatkozunk, akkor a visszatérési érték: undefined
Elemek hozzáadása a tömb végéhez.
Utolsó elem törlése. A tömb mérete 1-gyel csökken. Üres tömb esetén a visszatérési érték: undefined.
Első elem törlése. A tömb mérete 1-gyel csökken, az elemek balra tolódnak.
Üres tömb esetén a visszatérési érték: undefined.
Elemek hozzáadása a tömb elejéhez. A többi elem jobbra tolódik.
Tömb elemszámának lekérdezése vagy írása. Valójában ezt adja vissza: az utolsó elem indexe + 1
Írással le lehet vágni a tömb végét, ha kisebb értéket adunk meg a jelenlegi hossznál,
illetve meg lehet vele növelni a tömböt undefined elemekkel.
Tömb string formában. Az elemek közé "," karaktert helyez. Az üres tömböt üres stringként adja vissza.
Tömb módosítása. A "start" indextől töröl "deleteCount" darab elemet, majd a törölt elemek helyére beszúrja
az "elem1, ..., elemN" elemeket.
Tömb részének lekérdezése.
A tömb nem változik, új tömböt ad vissza, a "startPosition"-től az "endPosition-1" indexig.
Mindkét érték lehet negatív is.
Tömb elemének megkeresése (első előfordulása), a "startPosition"-től.
Tömb elemének megkeresése (utolsó előfordulása), a "startPosition"-től.
Tömb elem létezésének lekérdezése a "startPosition"-től.
Tömb elem lekérdezése függvény alapján, például amelyiknek a hossza 3 karakter.
Tömb elemeinek szűrése függvény alapján. Az eredeti tömb nem változik.
A szűrt tömb azokat az elemeket tartalmazza, melyekre a függvény true-val tér vissza.
Tömb elemeinek konvertálása függvény alapján. Az eredeti tömb nem változik.
A konvertált tömb elemei a függvény visszatérési értékei, például az elemek hosszai.
Tömb elemeinek sorbarendezése. Az elemeket stringre konvertált alakjuk szerint abc-be rendezi.
Más sorrend is elérhető, ha egy sorbarendező-függvényt adunk meg a paraméterében.
A függvény negatív/0/pozitív visszatérési értéke dönti el a két elem sorrendjét.
Számokat tartalmazó tömb nagyság szerinti sorbarendezése.
Tömb elemek sorrendjének megfordítása.
String darabolása tömbbe.
Tömb elemeinek összefűzése stringbe.
async
Szintaxis:
Az async kulcsszó csak függvény definíció elé írható.
Hívjuk aszinkron függvénynek.
Egy aszinkron függvény meghívásakor a hívó nem várja meg amíg a függvény befejeződik,
de azonnal megkapja a promise objektumot.
Így az aszinkron függvény error-t is dobhat, nem szakítja meg a hívó futását.
Az aszinkron függvény promise objektummal tér vissza.
A függvényen belül ezzel nem kell foglalkozni.
Így sokkal elegánsabb forma, mintha a függvényen belül ezt alkalmaznánk: return new Promise(...).
Ha a függvény visszatér egy értékkel, az egyenértékű azzal mintha a promise.resolve()-ot használnánk.
Példa: ugyanaz a függvény mint ami a promise-nál látható:
await
Szintaxis:
Az await használata a promise-hoz köthető, hiszen "await" csak promise elé írható!
Elegánsabb megoldás, mint a promise-ra then()-nel feliratkozni.
await csak async függvényen belül használható!
Működés: megvárja amíg a promise végre nem hajtódik, vagyis végre nem hajt egy resolve()-ot, vagy reject()-et,
és a promise resolve() által beállított visszatérési értékét adja vissza.
Ha a promise reject()-et hajtott végre, akkor exception keletkezik ebben a sorban!
Példa:
call() & apply()
Ezzel a két metódussal lehetőség van arra hogy úgy hajtsunk végre egy függvényt,
mintha az általunk megadott objektumon belül lenne, vagyis az adott
objektum lenne a környezete. Így tehát a függvényben lévő this hivatkozás erre az objektumra mutat.
A függvénynek paramétereket is lehet adni, és ebben különbözik a call() és az apply(), ugyanis az utóbbinál
ezeket a paramétereket egy tömbben kell megadni. Példa:
console
Normál üzenet kiírása a konzolra két módon is lehetséges:
Hibaüzenet kiírása a konzolra, mely feltűnően, pirossal jelenik meg:
data types
Az itt látható adattípus megnevezés megegyezik azzal, amit a typeof() függvény visszaad:
'number', 'string', 'boolean', ...
number
string
A backtick jelek között szereplő ${...} kifejezések kiértékelődnek.
boolean
object
function
bigint
undefined
symbol
date
A dátumok kezelését a Date osztály biztosítja, nincs más osztály a javascriptben.
Egy dátum éve csak a 100 - 275760 tartományba eshet, csak ezeket tudja a Date osztály kezelni.
Ha az év ennél kisebb akkor hibásan az 1900-as éveket kapjuk meg, ha nagyobb akkor érvénytelen a dátum:
A Date osztály a hónapot 0-tól számolja:
tehát a hónapnál 1-gyel kevesebbet kell megadni, vagyis 1968.07.22 esetén:
Példa: a hét melyik napjával indul 1968 július ?
mely 0 - 6 közötti számot ad vissza, ahol:
Példa: hány napból áll 1968 július ?
A hónapnál mindig 1-gyel nagyobbat kell megadni (7 - 1 + 1), a nap pedig mindig 0!
mely 28 - 31 közötti számot ad vissza.
dispatchEvent()
A metódus segítségével egy html-elemen eseményt lehet kiváltani:
encodeURIComponent()
Ezzel a függvénnyel lehet az url-ben lévő query paramétereket encode-olni:
error
try-catch
Hibakezelés try-catch szerkezettel
A catch-nél nem adható meg milyen típusú error-t kezeljen le, így minden típust elkap.
Ha nem akarunk minden típusú error-t elkapni, akkor instanceof-fal kell vizsgálódni,
és a feleslegesen elkapott error-t throw-val új kell dobni.
A példában csak a SyntaxError-t akarjuk elkapni:
A catch-el elkapott error objektum tagjai:
Error kiváltása throw-val:
window.onerror
A window.onerror segítségével globális hibakezelőt állíthatunk be.
Alapesetben a window.onerror értéke: null.
Ezért ha az oldalon bármilyen lekezeletlen javascript hiba keletkezik, a hiba a konzolra íródik ki.
Ha a window.onerror egy függvény, akkor a lekezeletlen javascript hiba eljut a beállított error handler
függvényhez, az lefut, majd utána a hiba a konzolra is kiíródik.
Az error handler függvényben nem érdemes a hibát kiírni, ugyanis több helyzetben előfordul,
hogy nem kapja meg az error objektumot.
Ezért elég ha felhívja a figyelmet a hiba keletkezésére, és jelzi a felhasználónak, hogy tekintse meg a konzolt.
falsy values
Javascript-ben bármilyen érték logikai értékre konvertálható, vagy például automatikusan konvertálódik egy
if() belsejében.
A következő értékek konvertálódnak false-ra, ezeket falsy-nak nevezzük:
A felsoroltakon kívül minden más true-ra konvertálódik például: 'false', ' '
A konvertálás kikényszeríthető a ! használatával, de !!-t kell alkalmaznunk
ha a valódi logikai értéket szeretnénk, például:
fetch
Url meghívása. A régi "ajax módszer" modern változata. Szintaxis:
Ha az url hívás akadályba ütközik (network error, cross origin megsértés, ...),
akkor promise.reject()-et hajt végre.
Ha az url hívás nem ütközik akadályba, akkor promise.resolve()-ot hajt végre, melynek eredménye
egy Response objektum.
Ilyen eset a http 200-on kívül a többi http-státusz is (404, 500, ...), tehát ezek nem akadályok!
A Response objektum fő elemei:
Mivel a fetch() csak a response header-t tölti le, ezért a response objektum async függvényeivel lehet
a response body-hoz hozzáférni:
Egy input mezőn van a fókusz, ha a kurzor benne van.
A focus() függvénnyel egy adott html elemre helyezhető a focus. Az elem nemcsak input mező lehet.
Figyelem!
Input mezőkön kívüli html elemre csak akkor helyezhető rá a fókusz, ha a html elem rendelkezik a "tabindex"
attribútummal, ami akár "-1" is lehet.
for of
A for of ciklussal iterálható adatokon lehet végighaladni.
Végighaladás egy tömb elemein:
Végighaladás egy string karakterein:
<form>
Ezen html-elem:
submit művelete így hajtható végre:
getElementById()
Html-elem lekérdezése html-id alapján.
Ha nem létezik ilyen elem, akkor null-t ad vissza.
Ha több elem létezik ezzel az ID-vel, akkor azokból az egyiket adja vissza.
Csak a document objektumon lehet végrehajtani!
html attribute
Attribútum írásakor nem kell escape-elni az értéket, ellentétben a html-fájl összeállításánál.
Tetszőleges attribútum
Létezik-e a html-elemhez "attr" attribútum ?
Akkor is létezőnek minősül ha az attribútumhoz nincs érték hozzárendelve.
Attribútum értékének lekérdezése. Ha nincs érték hozzárendelve akkor üres string. Ha nincs ilyen attribútum, akkor null.
Attribútum, és értékének beállítása. Ha létezik az attribútum akkor az értéket felülírja, ha nem létezik,
akkor létre is hozza.
Attribútum törlése. Ha nem létezik az attribútum, az sem okoz exception-t.
Összes attribútum
A html-elemhez tartozó összes attribútum így érhető el:
Az összes attribútum nevének és értékének kiiratása:
"class" attribútum
Erre az attribútumra speciális elérési módok is vannak, hogy ne egyben kelljen kezelni az értékét.
"class" attribútum egész értékének lekérdezése, és beállítása.
Osztály hozzáadása a "class" attribútumhoz. Duplán nem lehet hozzáadni, de exception-t sem okoz.
Osztály törlése a "class" attribútumból. A nemlétező törlése nem okoz exception-t.
Osztály hozzáadása a "class" attribútumhoz, ha még nincs benne. Ha benne van, akkor törli a "class" attribútumból.
Létezik-e az osztály a "class" attribútumban ?
A "class" attribútum osztályainak kiiratása külön-külön:
"style" attribútum
Erre az attribútumra speciális elérési módok is vannak, hogy ne egyben kelljen kezelni az értékét.
Egy style jellemző elérésének módja:
ahol XXX egy style-on belüli jellemzőt jelent, például:
Írni, és olvasni is lehet a jellemzőt, például:
html tag
Egy html tag (elem) nevének lekérdezése a tagName jellemzővel lehetséges, mely csak olvasható,
és mindig nagybetűvel adja vissza a nevet:
<input type="checkbox">
Ezen html-elem:
kipipálásának lekérdezéséhez és beállításához a checked jellemzőt használjuk:
<input type="file">
Ezen html-elem:
kiválasztott fájljának, vagy multiple esetén vagy fájljainak lekérdezése:
Ha egyetlen fájl sincs kiválasztva, akkor az elem.files tömb üres (nem pedig null).
<input type="radio">
Ezen html-elemcsoport:
bejelölt gombjának lekérdezése:
egy gombjának bejelölése:
<input type="text">
Ezen html-elemek:
tartalmának olvasása és írása a value jellemzővel:
Íráskor nem kell escape-elni az értéket, ellentétben a html-fájl összeállításánál.
innerHTML
Html-elem belső tartalmának lekérdezése, illetve beállítása.
Lekérdezéskor változatlanul kapjuk meg a tartalmat, ahogy az a html-elem belsejében szerepel.
Beállításkor változatlanul íródik a megadott szöveg a html-elem belsejébe.
instanceof
Sajnos a typeof() függvény egy javascript objektumról csak azt adja vissza hogy "object",
de ennél mélyebb szinten nem lehet kideríteni melyik osztálynak a példánya.
Az instanceof operátorral viszont vizsgálható, hogy egy adott osztály példánya-e.
Szintaxis:
Példák true-ra:
Példák false-ra:
JSON
Javascript objektum átalakítása json-string formátumra.
Hasznos ha pl. a szerver oldallal rest típusú kommunikáció zajlik, és kérés törzse json formátumú.
A keletkező json-string 1 soros, de sortörésekkel és bekezdésekkel megformázható.
A 3. paraméternek meg kell adni a bekezdés méretét, pl. 2 space:
Hasznos lehet ha log-olni akarjuk az adatot, és a log-ot olvassuk.
A java Map-hez hasonlóan kulcs-érték párokat tartalmaz.
A kulcsok tetszőleges típusúak lehetnek, egy map-ben vegyesen is előfordulhatnak.
Használat:
Példa: kulcs-érték párok kiiratása
module
A html oldalon lévő javascript modulok később futnak le mint a nem modulok, még akkor is ha a modul
előbb van az oldalon:
Ez azért van, mert a modulok automatikusan defer (elhalaszt) attribútummal vannak ellátva,
így megvárják míg a teljes html oldal betöltődik. Az oldalon definiált modulok sorrendje viszont megmarad.
Így tehát az a javaslat, hogy minden általunk fejlesztett javascript kód modul-ban legyen!
Javascript fájlt lehet modul-ként használni. Egy fájl egy modulnak felel meg.
A modulok zártak, kívülről csak a megengedett (exportált) elemek érhetők el.
A modul elemei nem szennyezik a globális névteret, biztonságosabb programozást biztosítanak.
Egy javascript fájl, vagy a html-be ágyazott javascript akkor lesz modulként értelmezve,
ha a html-ben így hivatkozunk rá:
A modulok egymást hívhatják az export, import funkciókkal, ez a két kulcsszó csak modulban használható. export: megjelölhetők vele elemek melyekhez hozzáférhetnek más modulok is import: hozzáférés más modulban megjelölt elemekhez.
A modulok mindig strict mód-ban futnak.
A modulban deklarált változók, csak modul szintűek lesznek, nem window szintűek.
A modul kódja csak egyszer fut le, amikor előszőr hivatkoznak rá (import-tal, script-tel).
Modulon belül a this értéke undefined.
Modul csak akkor fut le, amikor a teljes html betöltődött.
Az exportált elemből egyetlen egy van a modulon belül, ezen az egy elemen osztoznak az importálók.
Egy másik modulból importálni csak azt lehet, ami a másik modulban exportálva van.
A fájl név relatív vagy abszolút lehet, és "path" részt is kell tartalmaznia.
Példa: 2 konkrét elem importálása ugyanazzal a névvel, ahogy exportálva van.
Példa: 2 konkrét elem importálása más névvel:
Példa: Minden exportált elem importálása *-gal.
A *-import nem olyan szép megoldás, mint a konkrét import elemek felsorolása,
inkább az utóbbit alkalmazzuk!
Sajnos még előtagot is kell hozzá használni, ezért az elemek hosszabb névvel érhetők el.
outerHTML
Html-elem, és belső tartalmának lekérdezése. A lekérdezéskor így megkapjuk a html-elem attribútumait is.
Az outerHTML tulajdonsággal ne írjuk az elemet!
Ezzel más lesz a html-ben és a dom-ban, ellentmondanak egymásnak.
promise
A javascript callback függvények használatánál modernebb a promise használata.
Olyan függvénynek szokás promise objektumot visszaadni, mely általában sokáig fut, és várakozik valamire.
Jó ha ezek a függvények aszinkron módban futnak, mert mellettük más javascript kódok is végre tudnak hajtódni.
Ilyen eset amikor az internetről töltünk le valamit.
A függvényen belül egy promise objektumot hozunk létre, melynek konstruktorában egy másik függvényt kell megadni
resolve, reject paraméterrel, melyeket a javascript motor biztosít.
Ha a függvény sikeresen lefutott, akkor a visszatérési értékét átadja a resolve()-nak.
A visszatérési érték bármi lehet: number, string, boolean, objektum, ...
Ha a függvény lefutása nem volt sikeres, akkor egy error objektumot ad át a reject()-nek.
A gasztro() függvény promise objektummal tér vissza, mely resolve() vagy reject() eredményt ad, attól függően,
hogy a felhasználó szereti-e az adott gyümölcsöt.
A promise eredményére feliratkozni a then() függvénnyel lehet, melyben le lehet kezelni
a resolve, reject eseteket is.
Akkor fog a vezérlés átadódni a then() által megadott egyik vagy másik függvénynek,
amikor a promise-t visszadó függvény véget ér.
Ha a függvény se resolve(), se reject()-et nem hajtott végre, akkor a then()-ben megadott egyik kód sem lép életbe,
ha pedig exception-t vált ki, akkor a reject kezelő fut le.
Bizonyos függvények promise-t adnak vissza, pédául:
Azért is hasznos promise-t visszaadni, mert rögtön meg is várható annak végrehajtása,
mellyel kiváltható a then() használata:
querySelector()
Az első html-elem lekérdezése mely megfelel a css-selector alapján.
Ha nem létezik ilyen elem, akkor null-t ad vissza.
Ha a document objektumon hajtjuk végre akkor az egész oldalon keres, ha egy html-elemen, akkor csak azon belül!
querySelectorAll()
Html-elemek lekérdezése css-selector alapján. Elem-tömböt ad vissza.
Ha nem létezik ilyen elem, akkor üres tömböt ad vissza.
Ha a document objektumon hajtjuk végre akkor az egész oldalon keres, ha egy html-elemen, akkor csak azon belül!
Végigszaladás az elemeken:
return confirm
Egy submit gomb csak akkor hajtódjon végre, ha a javascript confirm üzenetére igen-t mond a felhasználó:
screen position
X: vízszintes tengely Y: függőleges tengely 0;0 koordináta: bal felső sarok
Egy html elem képernyő pozíciójának meghatározásakor ebből kell kiindulni:
Példa: egy input mező alatt naptárat szeretnénk megjeleníteni.
Így állíthatjuk be a naptár pozícióját, hogy a mező aljától 4 pixellel lejjebb legyen a naptár teteje:
<select>
NEM MULTIPLE <select> html-elem
értékének olvasásához és írásához a value jellemző javasolt annak ellenére, hogy a <select> elemnek
nincs value attribútuma html szinten!
MULTIPLE <select> html-elem
kiválasztott elemeinek lekérdezése:
elemek beállítása kiválasztottra:
Set
A java Set-hez hasonlóan értékeket tartalmaz. Egy érték csak egyszer szerepelhet benne.
Az értékek tetszőleges típusúak lehetnek, egy set-ben vegyesen is előfordulhatnak.
Használat:
Példa: értékek kiiratása
setInterval()
Szintaxis:
A millisecundumban megadott delay elteltével folyamatosan lefut a megadott függvény,
melynek átadódnak az argumentumok.
Nem számít, hogy a függvény meddig fut, tehát a várakozási időt nem a függvény végétől számítja,
így egymásba folyhatnak a függvényhívások:
Az általa visszaadott timerId segítségével le is állítható a folyamat.
setInterval() helyett setTimeout()
Helyesebb ezt az utat követni, és az eljárás végén ismét végrehajtani egy setTimeout()-ot.
Így könnyen leállítható a folyamat, és biztosítani lehet, hogy csak a függvény befejeztével
induljon újra a várakozási idő, így nem csúsznak egymásba a függvényhívások:
setTimeout()
Szintaxis:
A millisecundumban megadott delay elteltével egyszer lefut a megadott függvény,
melynek átadódnak az argumentumok.
Az általa visszaadott timerId segítségével le is állítható a folyamat.
delay: 0
Ha delay értéke 0, vagy nincs megadva, akkor a függvény rögtön lefut amikor véget ér az éppen most futó javascript.
"Hello World" kiírására 2 alert-tel:
string
Egy karakter lekérdezése, ahol lehet negatív indexet is használni, így a string végéről számol vissza:
String hosszának lekérdezése:
Multi line string:
A többsoros szöveget backtick karakterek közé kell zárni.
A java-val ellentétben itt megmarad a stringben minden sortörés, és az összes space, ami a backtick karakterek
között szerepel.
<table>
Egy html <table> elem celláihoz (<th> és <td> elemeihez) való hozzáférés a
rows és cells property-vel történik:
<textarea>
Ezen html-elem:
tartalmának olvasása és írása a value jellemzővel:
Íráskor nem kell escape-elni az értéket, ellentétben a html-fájl összeállításánál.
Ne használjuk a tartalom olvasásához és írásához az innerHTML-t, és a textContent-et!
textContent
Az innerHTML-hez hasonlóan működik, ezzel is egy html-elem belső tartalmát lehet lekérdezni,
illetve beállítani,
de a művelet közben a tartalmon html-escape műveletet is végez ha szükséges!
Tehát beállításkor pontosan ugyanaz a szöveg fog látszódni a weboldalon mint amit megadtunk!
A html-be az escape-elt tartalom kerül ha szükséges.