Bevezetés a JavaScriptbe. A JavaScript története. Eszközök a JavaScript fejlesztéshez. A JavaScript kód helye. Alapvető JavaScript parancsok.
1995 áprilisában a Netscape cég felkéri Brendan Eich-et, hogy fektesse le egy olyan programozási nyelv alapjait, amellyel a weboldalak interaktívabbakká tehetők. Tudni kell erről az időszakról, hogy a web már 4 éve létezett, az első grafikus böngésző 1993-ban jelent meg, és ennek forráskódját felhasználva a Netscape cég a Netscape Navigator nevű böngészőjét 1994-ben dobta piacra. Ekkoriban már 4 éve dolgoznak a Java nyelven, a Sun éppen 1995-ben jelenti be a Java nyelvet a nagyvilágnak. A böngészők gyorsan reagálnak erre, és hamarosan támogatják a Java appleteket.
A Netscape cég szerette volna, ha böngészőjében a weboldalak interaktívabbá tehetők egy programozási nyelv által. Felmerült, hogy a Java nyelvet használnák az oldalak szkriptelésére is, de a nyelvet túl professzionálisnak és nehéznek találták, ezért inkább egy könnyebben tanulható és alkalmazható szkriptnyelv kidolgozása mellett döntöttek. Ez többek között annak tudható be, hogy akkoriban a weboldalak karbantartását főleg adminisztrátorok végezték, akik inkább szkriptek írásához értettek, nem bonyolultabb programkomponensek építéséhez. Így végül az új nyelv a Java szintaxisát örökölte, de szkriptnyelv lett.
A kliensoldali szkriptnyelv eredetileg a LiveScript névre hallgatott, de a nyelv bejelentésekor (1995 decemberében) – valószínűleg marketinges – okokból JavaScriptként hivatkoztak rá. E mögött a Netscape és a Sun cég együttműködése állhatott, valamint az, hogy minél több Java programozót csábítsanak át a kliensoldalra. A Netscape cég a JavaScriptet úgy pozicionálta a Java mellé, hogy a JavaScript olyan, mint a Microsoft Visual Basic abban az értelemben, hogy könnyű használni kevés programozói tudással is, és viszonylag gyorsan lehet benne összetettebb alkalmazásokat is készíteni. A weboldalak egyszerűbb manipulálásán túl pedig a Java appletek és a weboldalak közötti kommunikációt biztosította volna.
A JavaScript megjelenése a böngészőben hatalmas siker volt a webfejlesztők körében, ugyanis pont azt hozta, mint amire már egy ideje vágytak: hogy túlmenjenek a HTML határain, és egy kis programkóddal dinamikussá tegyék azt, mozgassák az elemeket, reagáljanak a felhasználói cselekvésekre, új ablakot nyissanak, megerősítő kérdést tegyenek fel, stb.
A hatalmas sikert meglovagolva a Microsoft is elkészítette Internet Explorer nevű böngészőjében a JavaScript támogatást, a nevét pedig később szabadalmi okokból JScriptre változtatta. A Netscape cég a nyelv diverzifikálódását megelőzendő aktív szabványosítási kampányba kezdett, végül 1997-ben az Európai Számítógépgyártók Szövetsége (European Computer Manufacturers Association, ECMA) nevű cég szabványosította ECMAScript néven (ECMA-262).
Ezt az időszakot, a 90-es évek második felét jellemzi az első böngészőháború, amely a Netscape Navigator és az Internet Explorer között dúlt. A JavaScript nyelv szempontjából ezt az időszakot ugyanaz jellemzi, mint a HTML nyelvét. A böngészők folyamatosan fejlesztették a nyelvet a szabványon túl is, majd a szabvány következő verziója ezen újításoknak csak egy részét fogadta el. A két böngésző JavaScript támogatottsága, valamint a szabvány között nagy eltérések alakultak ki. A 90-es évek végére az Internet Explorer gyakorlatilag egyeduralkodó lett a böngészőpiacon egy olyan böngészővel, ami a szabványtól történeti okok miatt jelentősen eltért.
A 2000-es évek elején – ahogy azt már az előző fejezet áttekintésében is láthattuk – komolyabb előrelépések a szerveroldalon voltak. A JavaScript kliensoldali felhasználása gyakorlatilag űrlapellenőrzésekre és néhány szemkápráztató hatásra szűkült, és a webes társadalom nagy része nem is látott komolyabb kihívást benne, inkább a lelkes amatőrök játékszere volt. Ha komolyabb alkalmazás készült JavaScriptben, akkor azok nagy része Internet Explorer specifikus kódot tartalmazott, és a többi böngészőben nem igazán futott.
Közben az Internet Explorer árnyékában fejlődésnek indult a böngészők új generációja, amely már a szabvány által lefektetett alapokra épített. Nemcsak a szabványok támogatása volt ezekben az új böngészőkben a csábító, hanem azok az új funkciók, amelyek az egyre divatosabb és szélesebb körben elterjedő böngészést kényelmesebbé és hatékonyabbá tették. Ekkor született meg a Mozilla Firefox, az Opera, a Safari.
A 2000-es évek elejének sötét középkora után a JavaScript nyelv következő nagy fordulópontja egy többéves technológia újranevezésének köszönhető. 2005-ben Jesse James Garret marketing célból új nevet adott annak a technológiának, amely által az oldalak tartalma részlegesen frissíthető a teljes oldal újratöltése nélkül. Az AJAXnak elnevezett technológia nagy forradalmat indított a kliensoldali programozásban. Ennek köszönhetően ugyanis olyan felhasználói élmény nyújtható a weben, mint az asztali alkalmazásokban. A webes alkalmazások korábbi lassú, és szaggatott volta helyett folyamatos, villogásmentes és kényelmesen használható felületek jelentek meg. Ez pedig nyitott kapukat döngetett a felhasználók részéről, akik egyre nagyobb számban használták a webet mindennapos dolgaik intézésére. A folyamat eredményeképpen egyre több JavaScript kód jelent meg az alkalmazásokban, és egyre bonyolultabb dolgokat láttak el ezek a szkriptek. Az addig kialakított ismeretek nem voltak megfelelőek ekkora kódbázisok létrehozására és karbantartására, így a fejlesztők új, jobb megoldásokat kerestek. A webes közösség újra felfedezte a JavaScript nyelvet, és kialakította a modern JavaScript programozási mintákat. A folyamat mind a mai napig tart, a szabvány következő verziója új nyelvi elemeket vezet be, régi tervezési hibákat próbál kiküszöbölni, és számos olyan új pszeudonyelv vagy nyelv jelenik meg, amely JavaScriptre fordul. Manapság a JavaScriptet a web univerzális futtató platformjának tartják.
A JavaScript nyelv folyamatosan fejlődik. Az első verziók hibáit kijavítani és korszerű nyelvi elemeket bevezetni az ECMAScript szabvány következő verziói teszik meg. A 2009 végén megjelent 5-ös verzió már elkezdte ezeket a lépéseket megtenni, a jövőben pedig a következő verziók gyakoribb kiadásai várhatóak.
Források:
Mielőtt elkezdenénk magával a nyelvvel foglalkozni, nézzük meg, hogy mik azok az eszközök, amelyek minimálisan szükségesek a fejlesztéshez.
JavaScript írásához tetszőleges szöveges szerkesztő használható, úgy, mint bármely más nyelv esetén. Így akár a JavaScript forrásunkat szerkeszthetjük sima Jegyzettömbben is, csak ebben kissé nehézkes lesz a fejlesztés. Egy jó szerkesztő program különböző szolgáltatásokkal támogatja a programozót, hogy minél jobban a kód logikájára tudjon koncentrálni, és ne vonja el más a figyelmét. A teljesség igénye nélkül íme néhány szempont, amit érdemes figyelembe venni:
A fenti kritériumok nem kötelezőek, de meglétük segítheti a fejlesztési folyamatot. Az alábbiakban néhány ingyenes szerkesztőprogramot ajánlunk megint csak a teljesség igénye nélkül. Ezek között vannak kisebb, gyorsabb szerkesztők, és vannak nagyobb fejlesztői környezetek.
A megírt JavaScript kódot a HTML dokumentumba ágyazva a böngésző futtatja. Mivel a webes technológiák legtöbbje – így a JavaScript is – szabvány, ezért joggal várhatjuk el, hogy a megírt JavaScript kód minden böngészőben ugyanúgy fog futni. Láttuk azonban a történeti áttekintésben, hogy a böngészők versenye miatt jelentős eltérés alakult ki a különböző böngészők támogatottsága között. A legnagyobb eltérés korábban az Internet Explorer és a többi, szabványokra épülő böngésző között volt, de voltak eltérések ez utóbbiak között is. Szerencsére mára az Internet Explorer újabb verziói jelentős előrelépést tettek a szabvány támogatásában, így a korábbi különbségek elenyészőben vannak.
A webes technológiák azonban folyamatosan és nagyon gyorsan fejlődnek, a szabvány pedig ezekkel általában csak utólag tud lépést tartani. Így bár a kialakult, szabványos technológiáknál tapasztalt eltérések nagyjából megszűntek, a legújabb technológiák támogatásában azonban megint csak nagy eltérések lehetnek az egyes böngészők között. Ilyen például a legújabb CSS3-as tulajdonságok támogatása, de a HTML5-ben megjelenő JavaScript API-k sem egyformán elterjedtek.
Végül azt is figyelembe kell vennünk, hogy az asztali böngészők mellett egyre nagyobb részesedést hasítanak ki az egyes mobil platformon futó böngészőprogramok. Mivel ezeknél sokszor a méret és a sebesség nagyon is számít, ezért JavaScript támogatásuk is eltérhet az asztali változatokétól.
Ez a tananyag általában olyan ismeretek tárgyal, amelyek a mai modern böngészőben egységesen működnek. Ahol mégis eltérés van, vagy történetileg érdemes megemlíteni a különbségeket, ott megfelelő módon jelezzük ezeket. Ilyen szempontból tehát mindegy, hogy fejlesztésünkhöz milyen böngészőt választunk, a programunk nagy eséllyel a többi böngészőben is ugyanolyan jól fut. A fent említett dolgok miatt azonban mindenképpen érdemes több böngészőben is futtatni a kódunkat, és meggyőződni alkalmazásunk helyes működéséről.
Annak eldöntését, hogy milyen böngészővel dolgozzunk, további szempontok befolyásolhatják:
Ezeknek a szempontoknak a legtöbb, széles körben elterjedt böngésző megfelel:
Annak eldöntése, hogy milyen böngészőkben teszteljük az alkalmazásunkat, feladatfüggő. Elképzelhető, hogy adott a támogatandó böngészők listája és verziója. Ha viszont széles körű lefedettség a cél, akkor érdemes azon elgondolkozni, hogy egyes böngészőknek mekkora az elterjedtsége és támogatása mekkora plusz fejlesztési költséggel jár. Az elterjedtség vizsgálatában különböző statisztikák segítenek. Ilyen például a StatCounter GlobalStat szolgáltatása, ahol különböző szempontok szerint vizsgálhatjuk a jelenlegi piaci részesedéseket és tendenciákat. Az alábbi két ábra az asztali és mobil böngészők elterjedtségét mutatja 2008 és 2013 között.
Böngészők elterjedtsége 2008 júliusa és 2013 júliusa között
Mobil böngészők elterjedtsége 2008 decembere és 2013 júliusa közöttSzinte mindegyik böngészőben megtalálhatók olyan eszközök, amelyek a webfejlesztést segítik. Ezek böngészőnként eltérhetnek, de általában van egy közös funkcionalitás, amely általában igaz ezekre az eszközökre.
JavaScript konzol
A HTML szerkezet vizsgálata
JavaScript fájlok forrásának vizsgálata és debugolása
Hálózati forgalmat monitorozó eszköz
Profilozó eszköz
Erőforrások kezelésére szolgáló eszközÉrdemes megjegyezni, hogy Firefox alá sokáig bővítményként voltak elérhetők ezek az eszközök Firebug néven. Ez a kis kiegészítő szolgált később mintául az összes többi webfejlesztői eszköztár kialakításában. A Firefox újabb verzióiban egyre kifinomultabb, beépített webfejlesztői eszköztár kapott helyet.
Manapság a programozási nyelvek nem csupán néhány vezérlési szerkezetből állnak, hanem gazdag objektum és függvénykönyvtár áll rendelkezésre a különböző feladatok egyszerű elvégzésére. Éppen ezért elengedhetetlen, hogy utána tudjunk nézni az egyes nyelvi elemeknek, függvényeknek, lehetőségeknek. A hivatalos referencia az ECMAScript szabvány, de az kevésbé használható a mindennapi fejlesztő számára. Sokkal jobban kezelhető a Mozilla Developer Network JavaScript oldalán közzétett JavaScript referencia. Ugyanezen az oldalon található egy feladatközpontú bemutatása a nyelvnek. Sajnos mindegyikre igaz, hogy angol nyelvű, ugyanakkor a leírások mellett számos példa teszi egyértelművé az adott nyelvi elem használatát.
Érdemes megjegyezni, hogy az itt említett referenciákban Firefox-specifikus dolgok is szerepelnek, de szerencsénkre a referencia ezekre mindig felhívja a figyelmünket.
Fontos hangsúlyozni, hogy ez a tananyag nem szolgál referenciaként. Bemutat majd jó pár nyelvi elemet, de csak olyan szempontból, ami a tananyag megértéséhez szükséges. Néha ezek a bemutatások teljesek lesznek, néha csak részben teljesülnek. Éppen ezért ajánlott a kérdéses elemeknek a referenciában utánanézni.
A JavaScript egy beépített szkriptnyelv, ami azt jelenti, hogy szüksége van egy olyan gazdakörnyezetre, amely biztosítja a futását. Ez kliensoldalon maga a böngésző. A HTML oldalakban megjelenő JavaScript kódot a böngészőbe beépített JavaScript értelmező értelmezi. A kód értelmezése mindig az aktuális ablakban vagy fülben megnyitott dokumentum kontextusában zajlik. Így ha két dokumentum is nyitva van a böngésző ablakában, normális esetben az egyik dokumentumon állva nem tudjuk meghívni a másik dokumentumban definiált függvényeket. (Kivétel, ha a két dokumentum között valamilyen rokoni kapcsolat van, azaz az egyik hozta létre a másikat.)
De hova is írhatunk JavaScript kódot? Az egyik lehetőség a JavaScript konzol parancssora. Ahogy ezt már említettük az ebbe beírt kód az adott dokumentum kontextusában értelmezésre kerül. Ez a megközelítés csak addig hasznos, amíg ki szeretnénk próbálni valamit, de természetesen nem működik akkor, ha a JavaScript állományunkat bárki számára elérhetővé szeretnénk tenni.
Ebben az esetben a HTML kódban kell elhelyezni a JavaScript kódot. Erre két lehetőségünk van. Az egyik az, hogy a JavaScript kódot beágyazzuk a HTML kódba a <script> és </script> elemek közé. Ezeket hívjuk belső (inline) szkripteknek. A másik lehetőség, hogy a JavaScript kódot egy külső, tipikusan .js kiterjesztésű állományba helyezzük, és ezt a külső forrást töltjük be. A betöltés ugyancsak a <script> tag segítségével történik, az src attribútumában kell hivatkozni a külső állományban elhelyezett forrásra.
Az ajánlás szerint a script elemeket a head részben érdemes elhelyezni, de gyakorlatilag az oldal bármely részén elhelyezhetünk script elemeket, ahogy az alább látható.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bevezetés a kliensoldali webalkalmazások készítésébe</title>
<script type="text/javascript">
//JavaScript kód helye
</script>
<script type="text/javascript" src="jskod.js"></script>
</head>
<body>
<script type="text/javascript">
//JavaScript kód helye
</script>
<p>Hello világ!</p>
<script type="text/javascript" src="jskod2.js"></script>
</body>
</html>
A továbbiakban – a nyelvi bevezető részek kivételével – az ajánlást fogjuk követni, és a JavaScript kódokat a head részben helyezzük el.
 |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.