JavaScript

A Wikipédiából, a szabad enciklopédiából
Ugrás a navigációhoz Ugrás a kereséshez
JavaScript
Unofficial JavaScript logo 2.svg

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ás1.8.5[1] (2011-3-22)
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

A JavaScript programozási nyelv egy objektumorientált, prototípus-alapú szkriptnyelv, amelyet weboldalakon elterjedten használnak.

Története[szerkesztés]

Elkészülése a Netscape-nél[szerkesztés]

Eredetileg 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 ECMAECMAScript” 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és]

A 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,[2][3] ami megnehezítette a fejlesztőknek, hogy a weblapjaik mindkét webböngészőben jól működjenek, ami a „Netscape-en működik legjobban” és „Internet Exploreren működik legjobban” széles körű használatához vezettek sok éven át.[2][4]

A JScript felemelkedése[szerkesztés]

1996 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.[5] 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.

Szerkesztés, előállítás[szerkesztés]

A 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és]

A 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és]

Bá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]

Három elsődleges elemi adattípus létezik:

  • String
  • Number
  • Boolean

Speciális típusok:

  • Null
  • Undefined

Két összetett típus:

  • Object
  • Array

Pár fontosabb objektum:

  • Date
  • RegExp
  • Function
  • Math

A string típusú adatokat 'aposztróf' vagy "idézőjel" pár közé írjuk. Mindkét 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: NemSzá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és]

A JavaScript nyelvben minden változót deklarálni kell. Ezt a var kulcsszóval tudjuk megtenni. 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. Arra is van lehetőség, hogy a var kulcsszót elhagyjuk, viszont ilyenkor az értékadás kötelező, és a változó globálisan elérhető lesz, míg a var-ral deklarált változók csak az aktuális scope-ben láthatóak.

var str;
var int1, int2, int3;
var a=[],b,c=d=0;
var i = 1;
j = null;

A fentiekben többféle deklarációra látunk példát. Fontos megjegyeznünk, hogy az első és második esetben 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. A harmadik sorban 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. 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 JScript kódrészletet, például ASP-be! Az utolsó példa egy globális változó, tehát mindenhonnan elérhető. Használata mellőzendő, mivel könnyen okozhat nehezen felderíthető hibákat.

Operátorok[szerkesztés]

Az operátorok típusai[szerkesztés]

Aritmetikai 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ő: ==
  • Nem egyenlő: !=
  • Feltételes hármas: ?:
  • Vessző: ,
  • Teljesen egyenlő: ===
  • Nem teljesen egyenlő: !==
  • Falsy értékű (false/ 0/ üres karakterlánc/ undefinied/ null) !!a

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ék növelő, csökkentő operátor a hozzá kapcsolódó értékhez hozzáad egyet, 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=

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
  • benne:in

Típuskényszerítés[szerkesztés]

A 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és]

mdc operátori precedencia[6]

Operátorok asszociativitása[szerkesztés]

Kivételkezelés[szerkesztés]

try {
.
<utasítások>
.
}
catch(e){
..
<utasítások>
..
}

A JavaScript alapobjektumai és függvényei[szerkesztés]

Megnevezé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és]

Kó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és]

Az oldal egészére vonatkozó események[szerkesztés]

Esemé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és]

Esemé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 az 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]

  1. New in JavaScript 1.8.5 | Mozilla Developer Network. Developer.mozilla.org, 2012. november 18. [2018. december 25-i dátummal az eredetiből archiválva]. (Hozzáférés: 2013. május 26.)
  2. 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.)
  3. Microsoft Internet Explorer 3.0 Beta Now Available. microsoft.com . Microsoft, 1996. május 29. (Hozzáférés: 2016. július 16.)
  4. McCracken, Harry: The Unwelcome Return of "Best Viewed with Internet Explorer". technologizer.com , 2010. szeptember 16. (Hozzáférés: 2016. július 16.)
  5. Mozilla Firefox Internet Browser Market Share Gains to 7.4%. Search Engine Journal, 2004. november 24. (Hozzáférés: 2011. december 7.)
  6. https://developer.mozilla.org/en/JavaScript/Reference/Operators/Operator_Precedence

Kapcsolódó szócikkek[szerkesztés]

Több projekt foglalkozik más programnyelvekről javascript-re fordítással:

További információk[szerkesztés]