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ésAlaptí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
szerkesztésAz 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éketrue
ésfalse
.null
: az egyetlen lehetséges értékenull
.- Egész
number
,BigInt
: decimális (pl.28
), oktális (pl.034
vagy0o34
–BigInt
nél nem hagyható el azo
), hexadecimális (pl.0x1c
) vagy bináris (pl.0b11100
) szám,BigInt
esetébenn
utótaggal (pl.9007199254740992n
vagy0x20000000000000n
). A számrendszert jelzőo
,x
, illetveb
, valamint a hexadecimális számok 9-néla
–f
számjegyei lehetnek kis- és nagybetűsek is, aBigInt
ek 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
vagy6e23
. 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 undefined
dal érhető el, ez azonban a null
tó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
szerkesztésA 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
szerkesztésA 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
szerkesztésA 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
szerkesztésDeklará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
szerkesztés//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 const
tal 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
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[13]
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.
JavaScript és HTML kapcsolata
szerkesztésAz abszlút minimum
szerkesztésJavaScript é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.
Jegyzetek
szerkesztés- ↑ ECMAScript® 2024 Language Specification, 2024. június 1. (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.)
- ↑ Grammar and types - JavaScript. MDN Web Docs. (Hozzáférés: 2025. április 29.)
- ↑ undefined - JavaScript. MDN Web Docs. (Hozzáférés: 2025. április 30.)
- ↑ Symbol - JavaScript. MDN Web Docs. (Hozzáférés: 2025. április 30.)
- ↑ Template literals (Template strings) - JavaScript. MDN Web Docs. (Hozzáférés: 2025. április 30.)
- ↑ const - JavaScript. MDN Web Docs. (Hozzáférés: 2025. május 1.)
- ↑ a b Jason Orendorff: ES6 In Depth: let and const. Mozilla Hacks – the Web developer blog, 2015. július 31. (Hozzáférés: 2025. május 1.)
- ↑ 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