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	ECMAScript 2024 (stabil verzió, 2024. június, 15th edition, ES2024, ES15)[1] ECMAScript 2025 (kiadás előtti verzió, 2024. március 27., ES2025)[2]
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

Elkészülése a Netscape-nél

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 általi átvétele

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]

A JScript felemelkedése

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.

ECMAScript 5

Ez a szakasz egyelőre üres vagy erősen hiányos. Segíts te is a kibővítésében!

Éves frissítések

Ez a szakasz egyelőre üres vagy erősen hiányos. Segíts te is a kibővítésében!

Szerkesztés, előállítá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

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

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

Alaptípusok:^[7]

• Elemi típusok:
  • boolean (logikai érték, értéke igaz vagy hamis)
  • null (érték hiányát jelzi)
  • undefined (egy meghatározatlan érték)
  • number (szám, lehet egész és lebegőpontos is). Léteznek különleges értékek is, mint a 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.
  • BigInt (tetszőleges pontosságú egész szám)
  • string (karakterlánc)
  • symbol (egy olyan speciális típus, aminek két példánya soha nem egyenlő)
• object (objektum, minden összetett típus ebbe tartozik)

Szintaxis

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]

String

A string típusú adatokat aposztróf ('…'), idézőjel ("…") vagy backtick (`…`) pár közé írjuk. Az első két megoldás teljesen azonos jelentésű, így az éppen nem használt jeleket is tartalmazhatja a szöveg.

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

ami egyszerűbben:

const a="Hymnus, a' Magyar nép zivataros századaiból", 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.

A backtick (`…`) egy sablonstring, ami a normál (aposztrófos vagy idézőjeles) stringektől eltérően tartalmazhat sortöréseket, beágyazhat tetszőleges JavaScript-kifejezéseket, valamint speciális függvények teljesen más jelentést is adhatnak neki.^[10] Példák sablonstringekre:

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`;

Változók

A JavaScript nyelvben minden változót előzetesen deklarálni kell. Ezt függvényszinten a var, blokkszinten a let vagy a const kulcsszóval tudjuk megtenni. Utóbbi használata esetén a változónak nem lehet újból értéket adni (de ha a változó objektumtípusú, akkor az objektum értéke módosítható).^[11] Az ECMAScript 6 változat előtt csak a var létezett,^[12] azóta 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 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.

Lokális

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]

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ó
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!

Operátorok

Az operátorok típusai

Aritmetikai operátorok

Ö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

• 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 vagy false): !!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

• konkatenáció (összefűzés) c=a+b
• részstring-képzés: stringobjektum.substring(kezdet,hossz)

Bitszintű műveletek

• 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

• értékadás: =
• összetett értékadás: OP= (például: a += 2; c -= 3; d /= 9; stb.)

Vegyes operátorok

• 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

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

mdc operátori precedencia^[13]

Operátorok asszociativitása

Ez a szakasz egyelőre üres vagy erősen hiányos. Segíts te is a kibővítésében!

Kivételkezelés

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

A JavaScript alapobjektumai és függvényei

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.

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

Az oldal egészére vonatkozó események

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

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

• 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

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

Az abszlút minimum

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.