JavaScript
A JavaScript programozási nyelv egy objektumorientált, prototípus-alapú szkriptnyelv, amelyet weboldalakon elterjedten használnak. Ebből fejlődött ki a TypeScript, ami a JavaScript típusos változatának tekinthető.
JavaScript | |
Paradigma | Multi-paradigma: szkript, objektumorientált (prototípus-alapú), imperatív, funkcionális |
Jellemző kiterjesztés | .js |
Megjelent | 1996. május |
Tervező | Brendan Eich |
Fejlesztő | Netscape Communications Corporation, Mozilla Alapítvány |
Utolsó kiadás | |
Típusosság | dinamikus, duck |
Megvalósítások | KJS, Rhino, SpiderMonkey, V8, Carakan, Chakra |
Hatással volt rá | Scheme, Self, Java, C, Python, AWK, HyperTalk |
Befolyásolt nyelvek | ActionScript, AtScript, CoffeeScript, Dart, JScript .NET, Objective-J, QML, TypeScript, Node.js, LiveScript |
Weboldal |
Története
szerkesztésEz a lap vagy szakasz tartalmában elavult, korszerűtlen, frissítésre szorul. Frissítsd időszerű tartalommal, munkád végeztével pedig távolítsd el ezt a sablont! |
Elkészülése a Netscape-nél
szerkesztésEredetileg Brendan Eich, a Netscape Communications mérnöke fejlesztette ki; neve először Mocha, majd LiveScript volt, később „JavaScript” nevet kapott, és szintaxisa közelebb került a Sun Microsystems Java programozási nyelvéhez. A JavaScriptet először 1997–99 között szabványosította az ECMA „ECMAScript” néven. A jelenleg is érvényes szabvány az ECMA-262 Edition 3 (1999. december), ami a JavaScript 1.5-nek felel meg. Ez a szabvány egyben ISO szabvány is.
A Microsoft általi átvétele
szerkesztésA Microsoft 1995-ben kifejlesztette az Internet Explorert, ami a Netscape-pel való böngészőháborúhoz vezetett. A Microsoft a Netscape Navigator JavaScript-feldolgozójának forráskódja segítségével létrehozta a sajátját, a JScriptet.
A JScript először 1996-ban jelent meg a CSS kezdeti támogatása és a HTML néhány kiegészítése mellett. E megvalósítások merőben különböztek a Navigatorban alkalmazottaktól,[3][4] ami megnehezítette a fejlesztőknek, hogy a weblapjaik mindkét webböngészőben jól működjenek, és ami a „Netscape-en működik legjobban” és „Internet Exploreren működik legjobban” széles körű használatához vezetett sok éven át.[3][5]
A JScript felemelkedése
szerkesztés1996 novemberében a Netscape elküldte a JavaScriptet az ECMA International-nek, ami a sztenderddé válás kiindulópontja. Ez vezetett 1997 júniusában az első ECMAScript nyelv hivatalos kiadásához.
A sztenderdizációs folyamat néhány évig folytatódott, közben az ECMAScript 2 1998 júniusában, az ECMAScript 3 1999 decemberében lett kiadva. Az ECMAScript 4-en a munka 2000 decemberében kezdődött.
Közben a Microsoft egyre dominánsabb lett a böngészőpiacon. A 2000-es évek elejére az Internet Explorer részesedése elérte a 95%-ot.[6] Ez azt jelenti, hogy a JScript tulajdonképp sztenderddé vált a weben.
A Microsoft eleinte részt vett a sztenderdizációban, s néhány tervezetet is megvalósított, de végül megszűnt közreműködni.
ECMAScript 5
szerkesztésÉves frissítések
szerkesztésSzerkesztés, előállítás
szerkesztésA JavaScript kód vagy a HTML fájlban, vagy külön (jellemzően .js
kiterjesztésű) szövegfájlban van. Ezek a fájlok tetszőleges szövegszerkesztő (nem dokumentumszerkesztő) programmal szerkeszthetőek.
Futási környezete
szerkesztésA JavaScript esetében a futási környezet jellemzően egy webböngésző, illetve annak JavaScript-motorja.
JavaScript alkalmazások futtathatók továbbá a böngészőn kívül is, Node.js vagy Deno segítségével, melyek Windows, macOS és Linux alapú operációs rendszerekkel is kompatibilisek.
JavaScript programok Windows alapú környezetben futtathatók továbbá a wscript.exe és a cscript.exe segítségével is.
Inkompatibilitások
szerkesztésBár a nyelvet szabványosították, mégis részben különbözően implementálják a JavaScriptet a különböző böngészők.
Adattípusok
szerkesztés- Elsődleges elemi adattípusok
- String (karakterlánc)
- Number (szám, lehet tizedestört vagy egész szám is)
- Boolean (értéke igaz vagy hamis)
- Speciális típusok
- Undefined (meghatározatlan, így nincs értéke)
- Null (kifejezetten semmiként van meghatározva)
- Összetett típusok
- Object (objektum)
- Array (lista, amely több különböző adattípust is tartalmazhat)
- Set (speciális lista, amely minden értékből csak egyet tartalmazhat)
- Fontosabb objektumok
- Date (dátum)
- RegExp (reguláris kifejezés)
- Function (függvény)
- Math (matematikai függvények gyűjteménye)
A string típusú adatokat aposztróf ('...'), idézőjel ("...") vagy backtick (`...`) pár közé írjuk. Mindhárom megoldás lehetséges, így az éppen nem használt jeleket is tartalmazhatja a szöveg.
var a = "I'm sorry.";
var b = 'Idézőjel: (")';
var c = " \" ' ";
ami egyszerűbben:
var a="I'm sorry.", b='Idézőjel: "', c="\"'";
Az első példában az aposztróf, a másodikban az idézőjel tagja a string adatnak, míg a harmadik példában mind a kettő. A harmadik példában a backslash karakter miatt nincs speciális jelentése az idézőjelnek. Számszerű értékek lehetnek egész (decimális, hexadecimális, oktális), vagy tizedes számok. Léteznek különleges értékek is, mint az előzőekben említett NaN (Not a Number, azaz: Nem szám) érték, amit akkor használ a nyelv, ha értelmezhetetlen a matematikai művelet eredménye, például 0/0. Lehet még pozitív, vagy negatív végtelen, vagy szintén pozitív/negatív 0 érték. A JavaScript különbséget tesz a két 0 között.
Változók
szerkesztésA JavaScript nyelvben minden változót előzetesen deklarálni kell. Ezt globális szinten a var
, lokális szinten a let
vagy a const
kulcsszóval tudjuk megtenni. Utóbbi használata esetén az értéke nem megváltoztatható. Az ES6 változat óta a var
mellőzött, helyette a let
használata javasolt. Lehet csoportos deklaráció is, amikor vesszővel elválasztva több változót megadunk, és akár értéket is rendelhetünk hozzájuk.
- Globális
A var
kulcsszóval definiált változók globális változók, tehát mindenhonnan elérhetőek. Használatuk mellőzendő, mivel könnyen okozhat nehezen felderíthető hibákat.
- Lokális
Deklarálásuk a let
kulcsszóval történik. Csak a változók definiálásának helyén, az adott szinten (scope) láthatóak.
- Változók deklarálása
//Globális változók
var str;
var int1, int2, int3;
var a = [], b, c = d = 0;
var i = 1;
var j = null;
//Lokális változók
let str = "Lorem ipsum";
let str1, str2, str3;
let wheels = 2;
let myObject = {};
let myArr = [0, 1, 2, 3];
let isUsed = undefined;
const height = 6;
height = 7; // HIBA: a height értéke nem módosítható
A fentiekben többféle deklarációra látunk példát. Fontos megjegyeznünk, hogy értékadás nélkül a változó típusa undefined
lesz. Az ötödik esetben pedig a j változó null
értéket kap. A különbség a két fogalom között az, hogy a null úgy viselkedik, mint egy 0 szám érték, a definiálatlan típus pedig egy speciális érték: NaN (Not a Number). A két érték összehasonlítása egyenlőséget mutat minden esetben.
Látható, hogy a deklarációt lehet vegyesen is használni: a
egy üres tömb (Array), b
értéke undefined
, c
és d
pedig 0.
Arra is van lehetőség, hogy a deklaráló kulcsszót elhagyjuk, viszont ilyenkor az értékadás kötelező, és a változó globálisan elérhető lesz.
A JavaScript nyelv case-sensitive, ami annyit tesz, hogy nem mindegy, hogy kis- vagy nagybetűt használunk. Figyeljünk erre oda, főként ha ezen tekintetben eltérő szabályú keretbe helyezzük a JavaScript kódrészletet, például ASP-be!
Operátorok
szerkesztésAz operátorok típusai
szerkesztésAritmetikai operátorok
szerkesztésÖsszeadás (+)
Az összeadás kétoperandusú művelet. Számokat ad össze,
z=3+4; // z egyenlő 7-tel
és karakterfüzéreket láncol össze.
z="3"+"4"; //z egyenlő "34"-gyel
udv="Hel"+"lo"; // az udv megegyezik a "Hello"-val
Kivonás (-)
Ha kétoperandusú műveletként használjuk, akkor a kivonás (-) művelettel két számot vonhatunk ki egymásból.
x=4-3; // x egyenlő 1-gyel
x=3-4; // x egyenlő -1-gyel
Ha egyoperandusú műveletként használjuk, akkor ez az operátor az értéket az ellentettjére alakítja.
x=6;
y=-x; // y egyenlő -6-tal
z=-y; // z jelen esetben megegyezik 6-tal
Ha az operátort nem szám típusú értékekkel használjuk, akkor megpróbálja kiszámolni a különbséget olyan módon, hogy szám típusú értékké alakítja őket.
Szorzás (*)
A szorzás (*) kétoperandusú művelet, amelynek segítségével két számot szorozhatunk össze.
z=2*3; // z egyenlő 6-tal
Ha az operátort nem szám típusú értékekkel használjuk, akkor megpróbálja kiszámolni a szorzatot olyan módon, hogy szám típusú értékké alakítja őket.
Osztás (/)
Az osztás (/) olyan kétoperandusú művelet, amely az első operandust elosztja a másodikkal.
z=6/3; // z egyenlő 2-vel
z=3/2; // z egyenlő 1.5-del
A nullával való osztás speciális értéket eredményez.
z=3/0; // z POSITIVE_INFINITY-vel egyenlő
z=-3/0; // z NEGATIVE_INFINITY-vel egyenlő
z=0/0; // z NaN-nal egyenlő
Ha ez operátort nem szám típusú értékekkel használjuk, akkor megpróbálja kiszámolni a hányadost olyan módon, hogy szám típusú értékké alakítja őket.
Maradékos osztás (%)
A maradékos osztást (%) szokás modulo-műveletnek is nevezni. A két operandus osztása során keletkezett maradékot adja vissza.
z=7%2; // z egyenlő 1-gyel
z=6%2; // z egyenlő 0-val
Ha az operátort nem szám típusú értékekkel használjuk, akkor megpróbálja kiszámolni a maradékot olyan módon, hogy szám típusú értékké alakítja őket.
Inkrementálás (++)
Az inkrementálás (++) egyoperandusú művelet, amelynek segítségével egy számot lehet inkrementálni, azaz hozzá adni egyet. A művelet lehet pre- és posztinkrement. A preinkrement azelőtt végrehajtódik, mielőtt az utasítás további műveletei végrehajtódnának.
x=5;
y=++x; // mind az x, mind az y egyenlő 6-tal
A posztinkrement azután hajtódik végre, miután az utasítás összes többi művelete végrehajtódott.
x=5;
y=x++; // az x 6-tal, az y 5-tel egyenlő
Ha az operátort nem szám típusú értékekkel használjuk, akkor az inkrementálást megpróbálja kiszámolni olyan módon, hogy szám típusú értékké alakítja az operandusokat.
Dekrementálás (--)
A dekrementálás (--) egyoperandusú művelet, amelynek segítségével egy számot lehet dekrementálni, azaz értékéből egyet kivonni. A művelet lehet pre- és posztdekrement.
A predekrement azelőtt végrehajtódik, mielőtt az utasítás további műveletei végrehajtódnának.
x=5;
y=--x; // mind az x, mind az y egyenlő 4-gyel
A posztdekrement azután hajtódik végre, miután az utasítás összes többi művelete végrehajtódott.
x=5;
y=x--; // az x 4-gyel, az y 5-tel egyenlő
Ha az operátort nem szám típusú értékekkel használjuk, akkor az dekrementálást megpróbálja kiszámolni olyan módon, hogy szám típusú értékké alakítja az operandusokat.
Logikai operátorok
szerkesztés- logikai és:
a && b
- logikai vagy:
a || b
- tagadás/negálás:
!a
- kisebb mint:
<
- nagyobb mint:
>
- kisebb egyenlő:
<=
- nagyobb egyenlő:
>=
- egyenlő:
==
(értékszintű összehasonlítás) - nem egyenlő:
!=
(értékszintű összehasonlítás) - feltételes hármas:
?:
- vessző:
,
- teljesen egyenlő:
===
(érték és típus szintű összehasonlítás) - nem teljesen egyenlő:
!==
(érték és típus szintű összehasonlítás) - a kettős tagadás nem elemi művelet, gyakran egy érték logikai típusúvá alakítására használják (eredménye
true
vagyfalse
):!!a
alert( !!"non-empty string" ); // true
alert( !!null ); // false
A különbség az egyenlő (==
) és teljesen egyenlő (===
) operátorok között az, hogy a fordító az egyenlőség esetén a kiértékelés előtt „kikényszeríti” a hasonlóságot, tehát például: egy numerikus és karakteres 1, ill. "1"
érték összehasonlítása egyenlőséget eredményez, míg a teljes egyenlőség vizsgálatánál nem.
Az értéknövelő és -csökkentő operátor a hozzá kapcsolódó értékhez hozzáad, vagy kivon belőle egyet.
a = ++a;
b = a++;
Ha az operátor elöl áll, akkor előbb történik meg az érték növelése, ha viszont hátul áll az operátor, akkor előbb az értékadás (b = a) valósul meg, és utána mellesleg nő az "a" változó értéke 1-gyel. Hasonlóképpen az értékcsökkentő operátornál.
A feltételes hármas (? :
) operátor esetén a kérdőjel előtt egy logikai kifejezés szerepel. Ha a kiértékelés eredménye igaz, akkor a "?" és ":" közötti értéket adja vissza az operátor, ellenkező esetben a ":" utáni értéket.
A bitszintű jobbra eltolás két változata között a különbség az, hogy amíg a ">>" esetén az előjelbit értékét használja az új értékhelyek feltöltésére a bal oldalon, addig a ">>>" operátor esetén mindig 0 értékekkel tölti fel az üres helyeket.
a = b >> 2;
b = a >>> 2;
A műveletek során a második kifejezésben megadhatjuk, hogy hány értékhellyel tolódjon el a bináris adatsor.
x += y;
x = x + y;
String operátorok
szerkesztés- konkatenáció (összefűzés) c=a+b
- részstring-képzés: stringobjektum.substring(kezdet,hossz)
Bitszintű műveletek
szerkesztés- bitszintű negálás:
~
- bitszintű balra eltolás:
<<
- bitszintű jobbra eltolás:
>>
- előjel nélküli jobbra eltolás:
>>>
- bitszintű és:
&
- bitszintű kizáró vagy:
^
- bitszintű vagy:
|
Értékadó operátorok
szerkesztés- értékadás:
=
- összetett értékadás:
OP=
(például:a += 2; c -= 3; d /= 9;
stb.)
Vegyes operátorok
szerkesztés- törlés: delete
- típus: typeof
- értékadás kiküszöbölése: void
- példánya-e: instanceof
- új: new
- tartalmazás, benne: in
Típuskényszerítés
szerkesztésA JavaScript esetében könnyű az átmenet a változó típusok között. Ha a feldolgozó kiértékel egy kifejezést, akkor az alábbi szabályok szerint jár el:
Tevékenység | Eredmény |
---|---|
szám és szöveg összeadása | A szám a szövegbe épül |
logikai érték és szöveg összeadása | A logikai érték a szövegbe épül |
szám és logikai érték összeadása | A logikai érték a számba épül |
Műveletek precedenciája
szerkesztésmdc operátori precedencia[7]
Operátorok asszociativitása
szerkesztésKivételkezelés
szerkesztéstry {
.
<utasítások>
.
}
catch(e){
..
<utasítások>
..
}
A JavaScript alapobjektumai és függvényei
szerkesztésMegnevezés | Leírás |
---|---|
Array | tömb objektum |
Boolean | logikai értékeket leíró és azok kezelését szolgáló beépített objektum |
Date | dátumkezelésre szolgáló beépített objektum |
eval() | JavaScript kód végrehajtása a paraméterként megadott karakterláncból (Biztonsági kockázatot rejtő, veszélyes függvény!) |
Math | matematikai függvények használatát biztosító beépített objektum |
MimeType | MIME típusok kezelésre szolgáló beépített objektum |
Number | számok megvalósítását szolgáló beépített objektum |
parseFloat() | a numerikus értéket képviselő objektumból kinyeri a lebegőpontos számot |
parseInt() | a numerikus értéket képviselő objektumból kinyeri az egész számot |
RegExp | reguláris kifejezések kezelésre szolgáló beépített objektum |
String | sztringek megvalósítását és kezelését szolgáló beépített objektum |
BigInt | nagy egészek tárolására alkalmas adattípus |
Math.
szerkesztésKód | Leirás |
---|---|
Math.abs(x) | Visszatér a szám abszolút értékével |
Math.acos(x) | Visszatér a szám arkusz koszinuszával (radián) |
Math.asin(x) | Visszatér a szám arkusz szinuszával (radián) |
Math.atan(x) | Visszatér a szám arkusz tangensével (radián) |
Math.cbrt(x) | Visszatér a szám köbgyökével |
Math.ceil(x) | Visszatér a nem egész szám felfelé kerekített értékével |
Math.cos(x) | Visszatér a szám koszinuszával (radián) |
Math.E | Visszatér az 'e' számmal (kb. 2,71) |
Math.floor(x) | Visszatér a nem egész szám felfelé kerekített értékével |
Math.LN2 | Visszatér a 2 'e' alapú logaritmusával |
Math.LN10 | Visszatér a 10 'e' alapú logaritmusával |
Math.log(x) | Visszatér a szám 'e' alapú logaritmusával |
Math.max(x, y, z, ...) | Visszatér a legnagyobb számmal |
Math.min(x, y, z,.....) | Visszatér a legkisebb számmal |
Math.PI | Visszatér a 'pi' számmal (kb. 3,14) |
Math.pow(x, y) | Visszatér a szám hatványával 'x' az alap és az 'y' a kitevő |
Math.random() | Visszatér egy random számmal 0 és 1 között |
Math.round(x) | Visszatér a nem egész szám kerekített értékével |
Math.sin(x) | Visszatér a szám szinuszával (radián) |
Math.sqrt(x) | Visszatér a szám négyzetgyökével |
Math.tan(x) | Visszatér a szám tangensével (radián) |
JavaScript események
szerkesztésAz oldal egészére vonatkozó események
szerkesztésEsemény | Eseménykezelő | Bekövetkezése |
---|---|---|
Load | onLoad | Az oldal minden objektuma letöltődése után |
Resize | onResize | Dokumentum átméretezésekor |
Scroll | onScroll | Dokumentum görgetésekor |
Unload | onUnload | Dokumentum eltávolítása esetén ablakból vagy frame-ből. Érvényes BODY, FRAMESET elemekre. |
Egéresemények
szerkesztésEsemény | Eseménykezelő | Bekövetkezése | Menete | Érvényes |
---|---|---|---|---|
Click | onClick | Az adott elemre való egérkattintáskor | MouseDown > MouseUp > Click (Többszörös kattintásnál a detail attribútum értéke minden kattintásnál megnövekszik eggyel.) |
A legtöbb elemre. |
MouseDown | onMouseDown | Egérgomb lenyomása az adott elem felett | - | A legtöbb elemre. |
MouseUp | onMouseUp | Egérgomb felengedése az adott elem felett | - | A legtöbb elemre. |
MouseOver | onMouseOver | Az egérkurzor az adott elem fölé kerülése esetén. | - | A legtöbb elemre. |
MouseMove | onMouseMove | Az egérkurzor mozog az adott elem fölött. | - | A legtöbb elemre. |
MouseOut | onMouseout | Az egérkurzor az adott elemet elhagyja. | - | A legtöbb elemre. |
Formokra vonatkozó események
szerkesztés- Blur
- Eseménykezelő neve: onBlur
- Bekövetkezése: amikor az adott elem elveszti a "fókuszt".
- Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre.
- Change
- Eseménykezelő neve: onChange
- Bekövetkezése: amikor az adott elem elveszti a beviteli fókuszt, és változás következett be a tartalmában azóta, hogy rákerült a fókusz.
- Érvényes: INPUT, SELECT, és TEXTAREA elemekre.
- Focus
- Eseménykezelő neve: onFocus
- Bekövetkezése: amikor az adott elem aktívvá válik, vagy az egér, vagy a billentyűzet segítségével (TAB).
- Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre.
- Reset
- Eseménykezelő neve: onReset
- Bekövetkezése: amikor FORM reset következik be.
- Érvényes: Csak FORM elemre.
- Select
- Eseménykezelő neve: onSelect
- Bekövetkezése: amikor a felhasználó szöveget jelöl ki szöveges (text) mezőben.
- Érvényes: INPUT, TEXTAREA elemekre.
- Submit
- Eseménykezelő neve: onSubmit
- Bekövetkezése: amikor a FORM adatokat elküldenek. (submit).
- Érvényes: Csak FORM elemre.
Objektumszintű események
szerkesztés- Abort
- Eseménykezelő neve: onAbort
- Bekövetkezése: amikor egy képletöltést megszakítanak.
- Érvényes: objektum elemekre.
- Error
- Eseménykezelő neve: onError
- Bekövetkezése: Amikor egy kép nem töltődik le teljesen vagy hiba keletkezik a script futása közben.
- Érvényes: OBJEKTUM, BODY, FRAMESET elemekre.
Jegyzetek
szerkesztés- ↑ ECMAScript® 2024 Language Specification, 2024. (Hozzáférés: 2024. augusztus 30.)
- ↑ ECMAScript® 2025 Language Specification, 2024. március 27. (Hozzáférés: 2024. április 17.)
- ↑ a b Champeon, Steve: JavaScript, How Did We Get Here?. oreilly.com , 2001. április 6. [2016. július 19-i dátummal az eredetiből archiválva]. (Hozzáférés: 2016. július 16.)
- ↑ Microsoft Internet Explorer 3.0 Beta Now Available. microsoft.com . Microsoft, 1996. május 29. (Hozzáférés: 2016. július 16.)
- ↑ McCracken, Harry: The Unwelcome Return of "Best Viewed with Internet Explorer". technologizer.com , 2010. szeptember 16. (Hozzáférés: 2016. július 16.)
- ↑ Mozilla Firefox Internet Browser Market Share Gains to 7.4%. Search Engine Journal, 2004. november 24. (Hozzáférés: 2011. december 7.)
- ↑ https://developer.mozilla.org/en/JavaScript/Reference/Operators/Operator_Precedence
Kapcsolódó szócikkek
szerkesztésTöbb projekt foglalkozik más programnyelvekről JavaScript-re fordítással:
További információk
szerkesztés- JavaScript reference a Mozilla Developer Network oldalán