A JavaScript áttekintése

Kategória: Web fejlesztésJavaScript.

A JavaScript története

Története az 1990-es évek elejéig nyúlik vissza. Akkoriban a weboldalak - mai szemmel nézve - igen egyszerűek voltak: szöveget, képeket, linkeket és beviteli mezőket tartalmaztak csak. Interakciót a linkeken kívül az űrlapok jelentették: be lehetett írni valamit, rá kellett nyomni a megfelelő nyomógombra, a kérés elment a szerver felé, majd a válasz során teljesen újratöltődött a lap. A betárcsázós internet korában, a kezdeti böngészőkkel ez úgy nézett ki, hogy a nyomógomb megnyomásakor fehér lett a képernyő, és még szerencsés esetben is jó pár másodperc eltelt, mire megjelent valami.

Az internet terjedésével megjelent az igény a jelentősebb felhasználói élményt biztosító weboldalak iránt. Tehát olyan lehetőségekre, hogy a weboldal tartalma megváltozzon anélkül, hogy az teljesen újratöltődne. Kezdetben apróságokra kell gondolni: pl. arra, hogy egy kép, ami nyomógombként is funkcionál, megváltozzon, ha a felhasználó az egérrel a kép fölé megy. A trükk az volt, hogy valójában két kép szerepelt, és "meg volt mondva", hogy mikor melyik képet kell megjeleníteni.

A nagy kérdés az, hogy hogyan volt "megmondva". Erre a HTML szabvány nem biztosított semmit. A komolyabban vehető böngészők adtak saját megoldásokat. Ennek nyilvánvaló hátránya az volt, hogy csak abban a böngészőben működött. A Netscape úttörő volt ebben a folyamatban, megalkotta a Mocha nevű script nyelvet, amiből később LiveScript lett, végül ebből lett a JavaScript. Ezt szabványosították végül ECMAScript néven. A JavaScript szabványokat tehát az ECMA tartja karban, és így is hivatkozunk rá, pl. ES5 (az ECMAScript 5-ös verziója) vagy ES6 (a 6-os verzió).

Térjünk vissza a '90-es évekre! A Microsoft is hamarosan előállt a saját megoldásával az Internet Explorerben, JScript néven. Ez nem teljesen felelt meg a JavaScript-nek. És a gyakorlatban pont úgy nézett ki, mint ahogy elképzeljük: a mindenhol (és ez a mindenhol akkoriban a Netscape-et és az Internet Explorert jelentette) működő interaktív weboldalak forrása tele volt tűzdelve olyanokkal, hogy "ha Netscape, akkor ez, ha Internet Explorer, akkor az" (esetleg: ha lynx, akkor meg amaz stb.).

A '90-es évek végére a Netscape igazságtalan versenyhátrányba került az Internet Explorerrel szemben, mivel ez utóbbit a Microsoft a Windows operációs rendszerekhez alapértelmezésben feltelepítette. De azért a Netscape is sok döntésével házhoz ment a pofonért. Miután a Netscape bedobta a törülközőt, a sírján főnixmadárként feltámadó böngészők alapból ezt támogatták.

A többi böngésző - különösen az Internet Explorer - csak nagyon lassan, és - finoman fogalmazva - sajátosan kezdte el alkalmazni a szabványt. Magyarán az Internet Explorerrel semmi sem úgy működött, ahogy kellett volna. A 2000-es évek elejére az a faramuci helyzet állt elő, hogy az Internet Explorer gyakorlatilag egyeduralkodóvá vált, az volt "a" böngésző (2002-ben a piaci részesedése 95% felett volt), és volt egy, böngészőkre vonatkozó szabvány, amit pont a piacot döntőrészt uraló böngésző nem támogatott teljes egészében. Majd megjelentek az olyan, ma is ismert böngészők, mint a Firefox, az Opera vagy a Safari, majd pár évvel később a Google Chrome (ez utóbbi a jQuery megjelenése után), és ezek fokozatosan teret hódítottak maguknak, nagyon lassan, de biztosan kiszorítva az Internet Explorert.

Amint azt ebből is láthatjuk, a script nyelvek bevezetését nem előzte meg komoly tervezés, eléggé ad hoc módon történt. Volt egy probléma, arra adtak egy megoldást, és azzal nem igazán törődtek, hogy milyen hosszú távú mellékhatást vezetnek be kitörölhetetlenül. A kezdeti átgondolatlanság a mai napig érezteti hatását. Nagyon sok JavaScript mém született, amelyek a nyelv negatív tulajdonságait figurázzák ki; a bevezető oldal tetején egy ilyen gyöngyszemet láthatunk.

A JavaScript szerepe

A JavaScript - ahogy a nevéből is következik - egy script nyelv. Viszont - a nevével ellentétben - semmi köze sincs a Java-hoz. Alapvetően a böngészőben fut, bár létezik egyéb felhasználási területe is, pl. a NodeJS szerver oldali JavaScript.

A JavaScript alapvető fontosságú a webes fejlesztésben, a tartalom formáját leíró HTML és annak formázását leíró CSS mellett. Ez tehát a böngészőben fut. Alkalmas bármilyen logika megvalósítására, valamint arra is, hogy megváltoztassa a weboldal tartalmát anélkül, hogy újra kelljen tölteni azt. Mivel több milliárd weboldal létezik, melyek jó részében van JavaScript, és több milliárd böngésző van feltelepítve, a szabványon változtatni gyakorlatilag lehetetlen, annak csak a lassú bővítése lehetséges.

Az írás pillanatában az egyik legkeresettebb programozási nyelv.

A JavaScript helye a HTML oldalon

Mivel a JavaScript a böngészőben fut, nem kell semmit sem telepíteni a használatához. (A böngészőt meglétét adottságnak feltételezem, már csak amiatt is, mert ezt a szöveget valamilyen böngészőn keresztül lehet olvasni.) A kódot valami módon be kell ágyazni a HTML-be. Erre látunk most néhány módszert.

A forrást elvileg bármilyen szövegszerkesztővel elkészíthetjük; én a Visual Studio Code-ot használtam a példák elkészítéséhez. Elvileg elég a böngészőből megnyitni a html oldalt a példák kipróbálásához; én mégis a Live Server nevű beépülő segítségével webszerverként indítom. Ennek előnye az, hogy ha megváltozik a tartalom, azonnal frissül.

HTML attribútumok

JavaScript kódot betehetünk közvetlenül valamelyik HTML tag attribútumaként, értékül. Pl.:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <button onclick="alert('Hello, world!')">Click me</button>
    </body>
</html>

Ebben az esetben a nyomógomb (<button>) elem kattintás (onclick) attribútumához rendeltünk egy JavaScript utasítást, ami egy felugró ablakban kiírja, hogy "Hello, world!". Ez lehetett a JavaScript első felhasználási módja.

A <script> tag

Egy másik lehetőség - különösen, ha egy utasításnál hosszabb a kód - <script> tag-ek közé helyezni. Ez elvileg bárhol elhelyezkedhet; a gyakorlatban célszerű vagy a fejlécbe (head) tenni, vagy a törzs (body) legaljára. Egy példát láthatunk a fejlécbe helyezésre:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script>
            alert('Hello, world!')
        </script>
    </head>
    <body>
    </body>
</html>

Amikor a HTML szabványba beletették a <script> tag-et, akkor meg kellett mondanunk, hogy milyen scriptet helyezünk oda, pl. <script type="text/javascript">. Időközben hivatalosan is a JavaScript a HTML alapértelmezett script nyelve lett, így nem kötelező megadni a type attribútumot.

Külső fájl

A leggyakoribb megoldás az, hogy a HTML és a JavaScript fizikailag is elkülönül; a JavaScript kód külön forrásfájlba kerül. A JavaScript szokásos kiterjesztése .js. Ez esetben hivatkozunk kell a HTML kódból a JavaScript-re a <script> tag src attribútuma segítségével, pl.:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <script src="hello.js"></script>
    </body>
</html>

A példában a body-ba került a script. A hello.js-re történik hivatkozás, ami a html fájl mellett található, a következő tartalommal:

alert('Hello, world!')

Kombinált előfordulás

Egy weboldalon több helyen is lehet JavaScript kód, és ezek tudnak egymásról. Az alábbi példában a fejlécben létrehozunk egy függványt, amit egy HTML elem attribútumában hívunk meg:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script>
            function showHelloWorld() {
                alert('Hello, world!')
            }
        </script>
    </head>
    <body>
        <button onclick="showHelloWorld()">Click me</button>
    </body>
</html>

Konzol log

A programozás oktatásban alapvető fontosságú a konzol, ahova az eredményeket írjuk, ill. ellenőrizni tudjuk, hogy valami tényleg úgy működik, ahogy le van írva. A legtöbb esetben eleve konzolból indítjuk az alkalmazást, és a program oda írja az eredményt. Mivel a JavaScript böngészőben fut, a helyzet itt egy kicsit trükkösebb. Persze mivel a JavaScript képes módosítani a HTML tartalmat (emiatt találták ki), oda is írhatjuk, csakhogy a HTML tartalom módosítása már egy egy haladóbb téma, nem ezzel kezdjük. Viszont a JavaScript-nek is van konzolja, és ez kissé "el van rejtve" a böngészőben. A konzol log elérése a legtöbb böngészőből (pl. Google Chrome és Firefox esetében biztos): F12, és a megjelenő Developer Tools eszközben többnyire a második fül.

Konzolra a console.log('…') utasítással tudunk írni, pl.:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script>
            console.log('Hello, world!')
        </script>
    </head>
    <body>
    </body>
</html>

Ha megnyitjuk az oldalt, nem látunk semmit. De a F12 → Console fülön ott található a kiírt szöveg.

Kapcsolata a Java-val

Adódik a kérdés, hogy van-e a JavaScript-nek bármi kapcsolata a Java-val; egészen pontosan adódik a feltételezés, hogy igen. Erre a válasz csípőből az, hogy dehogy, nem, egyáltalán, a JavaScriptnek semmi köze sincs a Java-hoz, hiszen az előbbi egy böngészőben futó, interpretált script nyelv, a Java pedig egy bájtkódra fordított objektumorientált nyelv. Kismillió keltérés van: pl. a Java típusos, a JavaScript nem stb. stb. stb. A Java fejlesztők kicsit talán le is nézik a JavaScript fejlesztőket, gondolván, hogy a Java az egy komoly programozási nyelv, a JavaScript meg - hát - nem az.

A fentiek részben igazak is, de azért érdemes a képet árnyalni. Létezik a pszichológiában egy olyan jelenség, hogy ha nagyon sokat mondogatunk valakinek valamit, akkor előbb-utóbb olyanná válik; emiatt érdemes a gyereket lehetőleg minél többször megdicsérni, és kerülni az olyan kijelentéseket, hogy "buta vagy". Lehet, hogy a programozásban is ez hat; a több évtizedes megnevezés, amiben benne van a Java, oda hatott, hogy a JavaScript elkezdett sokban hasonlítani a Java-ra. Pl. a feltételkezelési struktúrák, ciklusok, kivételkezelés, osztályok szintaxisa stb. nagyon hasonlít, vagy teljesen ugyanaz, mint a Java esetében. Különösen a 2015-ben megjelent ES6 szabványban jelentek meg olyan dolgok, amelyek olyan közel vitték szintaxisban a JavaScript-et a Java-hoz, hogy már nem lehet elintézni azzal a félmondattal, hogy "semmi köze sincs hozzá". Valójában semmi köze sincs hozzá, ez igaz, de ez a mondat túl sommás, és ma már nem fejti ki az igazság minden apró részletét.

Tananyagok

Igen sok weboldal foglalkozik a JavaScript-tel, mivel az írás pillanatában ez az egyik legnépszerűbb programozási nyelv. Ezek közül az alábbiakat emelem ki:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License