Frontend jegyzetSearch...
\chapter{ECMAScript}
ECMAScript alapok
Mi az az ECMAScript?
Az ECMAScript tulajdonképpen nem más, mint a JavaScript hivatalos megnevezése, miután az ECMA szabványosította '97-ben. 2015-ig az egyes verziók verziószámmal voltak ellátva. Az utolsó nagy verziózott frissítés 2015-ben érkezett JavaScript néven. Ez volt az első olyan frissítés ami egy új irányba tolta el a nyelv fejlődését és már képes a korábbi könyvtárak funkcióit önállóan is ellátni.
2016-tól viszont az évszámot kapta meg, mint verziószám. Jelenleg az ES2022 a legfrisszebb verzió, amely június óta a hivatalos standard. A tananyag igyekszikezt a verziót követni.
Információ
A tananyagban a továbbiakban ES néven fogok a nyelvre hivatkozni.
Hogyan használjuk a HTML oldalunkon?
Az oldalunkra két lehetőségünk van a kód használatára.
Az egyik lehetőségünk, hogy <script> tagben inline megadjuk azt a kódot, amelyet szeretnénk futtatni. Ezt általában akkor érdemes, ha nem végzünk túl sok és/vagy bonyolult műveletet az oldalon.
html
<script>
alert("Hello World!");
</script>
A másik lehetőségünk, hogy behivatkozzuk a megfelelő fájlt. Ekkor célszerű a <head>-ben elhelyezni a <script> taget és a defer attribútumot használni, ugyanis ilyenkor a scriptet csak az oldal betöltése után kezdi el értelmezni nekünk a böngésző.
html
<script src="main.js" defer></script>
FONTOS!
A tag nem rövidíthető és nem hagyható el a záró párja sem.
Szintaktika
Mivel a ES egy gyengén típusos nyelv, így a változóink felvételekor csak arra kell figyelni, hogy megadjuk, hogy később a tárolt értéket megtudjuk-e változtatni, vagy sem.
let: bármikor szabadon változtathatóvar: bár szabadon változtatható, viselkedése eltér az előbbitől, ugyanis nem veszi figyelembe a különböző blokkokat.const: csak kezdeti érték adható neki
Vigyázat!
A var-t változó létrehozására ne használjuk már!
Változónévnek bármilyen UTF-8-as karaktersor megadható, így a következők teljesen érvényes változók lesznek.
Információ
Valószínűleg a PDF formátumú jegyzetben ezek hibásan fognak megjelenni
js
let bokmål = "Norwegian";
const számok = [1,2,3,4,5];
FONTOS!
Azonban oda kell figyelni, hogy --et NEM tartalmazhat az elnevezés.
Mivel a nyelv nem követeli meg tűlünk a sor végén a ;-t, így mindig figyelni kell, hogy egy sorba csak akkor kerüljön több utasítás, ha minden utasítás ;-vel le van zárva
Típusok
Number
A legtöbb nyelvhez képest a ES nem kezeli külön a az int és a double típusokat.
JavaScript
let egesz = 10;
let tizedesTort = 3.14;
Két speciális értéke van a számoknak:
infinityvagy-infinity=> Matematikailag hibás képlet eredménye, vagy kellően nagy szám amit nem tud már értelmezni. Pl:10/0 = infinityNaN=> Not a Number. Akkor keletkezik, ha egy számmá nem konvertálható értékkel próbálunk meg matematikai műveletet végezni. Pl:"Hello"/"there" = NaN(az osztás csak a számokra értelmezett)
BigInt [ES2020]
A Number kibővítésére készült egy új típus, amely nagyobb számokat is képes tárolni.Ezeket két féleképpen tudunk felvenni, amelyek egyenértékűek:
JavaScript
let bigInt1 = 10n;
let bigInt2 = BigInt(10);
FONTOS!
Bizonyos műveletek (pl osztás) csak és kizárólag azonos típussal működnek. Vagyis nem lehet BigInt-et Numberrel osztani.
String
Szöveg tárolására alkalmas típus. A szöveg megadható " vagy ' között. Speciális jelölése, az úgynevezett template literal: ` (backtick) A template literal alkalmas arra, hogy könnyen és gyorsan belefüzzük a szövegbe a változóinkat.
JavaScript
let nev = "Papp Zsombor";
let udvozles = `Hello, ${nev}!`
//Hello, Papp Zsombor!
Több szöveg összefűzése a + operátor segítségével tehető meg
JavaScript
let elso = "Ez az elso tagmondat,";
let masodik = "ez pedig a masodik.";
let mondat = elso+masodik;
Ha számot szeretnénk összefűzni szöveggel akkor nagyon oda kell figyelni, hogy mit milyen sorrendben teszünk, ugyanis mindig stringé próbál meg alakítani.
JavaScript
let szamString = 30 + '10' //3010
let stringSzam = '10' + 20 //1020
Legegyszerűbb megoldás erre, hogy az átalakítandó string elé (feltéve, hogy tényleg csak számot tartalmaz) egy + jelet helyezünk el.
JavaScript
let szam = 30 + +"10"; //40
Ha nem csak szám van az adott stringben akkor keletkezhetnek elég furcsa dolgok is, pl:
JavaScript
let banan = 'b' + 'a' + +'a' + 'a'; // baNaNa
Ez azért fordul elő, mert a +'a' az nem konvertálható számmá, így NaN-t ad vissza.
String kezelés
Boolean
Logikai változó két értéket tud felvenni: true vagy false.
undefined
Legtöbbször akkor találkozunk vele, ha az adott változónak nem adunk értéket, ugyanis ilyenkor nem tudja a ES eldönteni, hogy minek kéne ott lennie.
null
A null esetében, az adott változónk valamilyen objektumra szeretne mutatni, azonban mivel az adott objektum nem létezik vagy nem tudott létrejönni, így a semmibe mutat a változónk.
Konzol kezelése
A konzolon keresztül tudunk a fejlesztőknek számt üzeneteket közvetíteni.
Egyszerű kiírások
JavaScript
console.log("Egyszeru bejegyzes");
console.info("Informacio!");
console.warn("Figylemeztetes!");
console.error("Hiba tortent!");
Táblázatos
Összetettebb adatokat, például tömböt a legegyszerűbben táblázatként tudunk kíírni a következőképp:
JavaScript
console.table(tomb1);
Számlálás
Amennyiben azt szeretnénk ellenőrizni, hogy egy adott kódrészlet hányszor fut le akkor a következő módszerrel tudjuk ezt megtenni:
JavaScript
console.count("cimke");
Eltelt idő vizsgálata
A szeretnénk például egy függvény lefutási idejét megvizsgálni akkor a kódrészletet az alábbi módon körbevéve, annak lefutása után látni fogjuk, hogy pontosan mennyi időt vett igénybe.
JavaScript
function fgv(){
console.time("cimke");
...
console.timeEnd("cimke");
}
Konzol ürítése
JavaScript
console.clear();
Ellenőrző kérdések
- Hogyan tilos változókat elnevezni?
- A
constkulcsszóval megjelölt változónak milyen különlegessége van a többivel szemben? - Milyen módon lehet egyszerű adatot, figyelmeztetés vagy hibát kiírni a fejlesztői konzolra?
- Mit csinál a
consoletime()éstimeEnd()függvénye? - Mi a különség a
Numberés aBigInttípusok között?
\pagebreak