„JavaScript” változatai közötti eltéré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 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 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]

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.^[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.

Az undefined és a symbol kivételével minden elemi típusnak, valamint néhány objektumtípusnak van saját szintaxisa:

• Elemi típusok:
  • boolean: a két lehetséges értéke true és false.
  • null: az egyetlen lehetséges értéke null.
  • Egész number, BigInt: decimális (pl. 28), oktális (pl. 034 vagy 0o34 – BigIntnél nem hagyható el az o), hexadecimális (pl. 0x1c) vagy bináris (pl. 0b11100) szám, BigInt esetében n utótaggal (pl. 9007199254740992n vagy 0x20000000000000n). A számrendszert jelző o, x, illetve b, valamint a hexadecimális számok 9-nél a–f számjegyei lehetnek kis- és nagybetűsek is, a BigIntek n utótagja viszont mindig kisbetűs.
  • Törtrésszel is rendelkező number: decimális szám, a tizedes elválasztó a pont, írható normálalakhoz hasonló formában (de a normálalaktól eltérően a mantisszának nem kell 1 és 10 közötti abszolút értékűnek lennie), pl. 3.14 vagy 6e23.
  • string: lásd lentebb.
• Objektumtípusok:
  • Object (általános objektum): { név1: érték1, név2: érték }, pl. { név: 'Wikipédia', mottó: 'A szabad enciklopédia' }.
  • Array (tömb, több különböző adattípust is tartalmazhat): [ elem1, elem2 ], pl. [ 'pi', 3.14 ].
  • RegExp (reguláris kifejezés): /regex/.
  • Function (függvény – a függvények is változónak számítanak): pl. function f(x) { return 2*x; } vagy (x) => 2*x.

Az elemi típusok közül az undefined az undefineddal érhető el, ez azonban a nulltól eltérően nem kulcsszó, hanem a globális névtér egy változója,^[8] symbol típusú értékek pedig a Symbol() globális névtérbeli függvénnyel hozhatók létre.^[9]

const a = "Hymnus, a' Magyar nép zivataros századaiból";
const b = 'Idézőjel: (")';
const c = " \" ' ";

const a="Hymnus, a' Magyar nép zivataros századaiból", b='Idézőjel: "', c="\"'";

const a = `Kedvenc könyvem a(z) ${kedvenc.cím}, amit ${kedvenc.szerző} írt.`;
const html = `<!DOCTYPE html>
<html>
    <head>
        <title>Weblap</title>
    </head>
    <body>
        <p>Helló világ!</p>
    </body>
</html>`;
const feldolgozott = feldolgozó`Paraméter, ami tartalmazhat ${a} és ${html} változókat is`;

A var kulcsszóval deklarált változók az egész függvényben elérhetőek, amelyikben deklarálva lettek (ha függvényen kívül lettek deklarálva, akkor bárhol elérhetők), még a deklaráció előtt is. Használatuk mellőzendő, mivel könnyen okozhatnak nehezen felderíthető hibákat.

Deklarálásuk a let vagy const kulcsszóval történik. Csak a változók deklarálásának helyén, az adott blokkban láthatóak. A blokk kezdete és a deklaráció között nem használhatóak, de elfedik az esetleges azonos nevű, külsőbb blokkban deklarált változót.^[12]

//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ó
const üres; // HIBA: constnál kötelező a kezdeti értékadás

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 (kivéve a consttal deklarált változókat, amiknek hiba nem adni értéket). 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!

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:

A műveletek precedenciáját és asszociativitását a szabványokban részletesen definiálták.^[13]

• 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.

• 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.

JavaScript és HTML együttes használatával könnyedén készíthetők egyszerű kalkuláror-programok. Az ilyen kalkulátorok egy HTML-ben megírt űrlapon (FORM) keresztül kérik be és írják ki az adatokat (INPUT), a matematikai számításokat pedig JavaScript-ben megírt függvényekkel végezhetjük el. A megfelelő nyomógomb (BUTTON) lenyomásának hatására pedig lefut a megfelelő függvény (function).

Az alábbi egyszerű html dokumentum ezt a kapcsolatot mutatja be. minimum.html néven elmentve, és böngészővel megnyitva egy egyszerű kalkulátort kapunk:

<HTML>
<BODY>
<SCRIPT>

	function osszead(){
		document.alapmuveletek.c.value = parseInt(document.alapmuveletek.a.value) + parseInt(document.alapmuveletek.b.value);
	}

	function kivon(){
		document.alapmuveletek.c.value = parseInt(document.alapmuveletek.a.value) - parseInt(document.alapmuveletek.b.value);
	}

	function szoroz(){
		document.alapmuveletek.c.value = parseInt(document.alapmuveletek.a.value) * parseInt(document.alapmuveletek.b.value);
	}

	function oszt(){
		document.alapmuveletek.c.value = parseFloat(document.alapmuveletek.a.value) / parseFloat(document.alapmuveletek.b.value);
	}
</SCRIPT>
<BODY>
<FORM NAME="alapmuveletek">
b=<INPUT TYPE="TEXT" NAME="a"></INPUT><BR>
a=<INPUT TYPE="TEXT" NAME="b"></INPUT><BR>
<BUTTON TYPE="BUTTON" onclick="osszead()">a+b</BUTTON>
<BUTTON TYPE="BUTTON" onclick="kivon()">a-b</BUTTON>
<BUTTON TYPE="BUTTON" onclick="szoroz()">a*b</BUTTON>
<BUTTON TYPE="BUTTON" onclick="oszt()">a/b</BUTTON>
<BR>c=<INPUT TYPE="TEXT" NAME="c">
</BODY>
</HTML>

Az input értéke (.value) karakterlánc formátumú, amit a matematikai művelethez át kell konvertálnunk számmá. Ha egész számmá akarjuk alakítani, ezt megtehetjük a parseInt() függvénnyel. Ha tört számokkal szeretnénk dolgozni, akkor pedig a parseFloat() függvényt használhatjuk.