Java Script alapjai Készítette Csorba Máté fw 0

Java. Script alapjai Készítette: Csorba Máté fw 0 jo 1 Forrás: - Nagy Gusztáv Web programozás I. 0. 7. verzió 2008. szeptember - Webszerkesztés, a web programozás alapjai CSS és Java. Script programozás Szerkesztette: Ember László

Mi a Java. Script? • A Java. Script programozási nyelv, egy objektumalapú szkriptnyelv, amelyet weblapokon elterjedten használnak. • Weboldalak használják űrlapok helyes kitöltésének ellenőrzéséhez, sütik kezeléséhez, a felhasználói élmény növeléséhez. • Interaktivitást (működést) ad a HTML oldalhoz • 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. • Események kezelésére alkalmazható • A neve ellenére nincs szoros kapcsolatba a Java nyelvvel • C++ és Java szintaxisra alapoz • A szabvány leírását az ECMAScript specifikáció tartalmazza

Java. Script története, fejlődése • A Java. Script története egészen 1996 -ig nyúlik vissza, szorosan összekapcsolódva az ismert Netscape böngésző második verziójának megjelenéséhez. A programnyelv ebben a böngészőben jelent meg először. • Eredetileg Mocha majd később Live. Script néven futott, és csak ezután kapta meg "végleges" nevét, a Java. Scriptet. Bár elméletileg volt köze a névadásnál a Java-hoz, főleg marketing okokból, nagyon fontos, hogy a Java. Script-nek semmi köze a Java-hoz. • A nyelv létrejöttének oka, hogy szükség volt egy olyan eszközre, mellyel a megjelenített HTML, XML stb. oldalak programozhatóvá válnak. • A nyelv alapja az úgynevezett ECMA Script szabvány, amely sok szkriptnyelvnek az alapja.

Java. Script verziók: • Java. Script 1. 0 1996 -ban jelent meg a Netscape 2. 0 böngészőben, valamint később az Internet Explorer 3. 0 -s verziójában. A korai ECMA Script szabványra és a DOM Level 0 -ra épült a képelemek kivételével. • Java. Script 1. 1 A Netscape 3. 0 használta. Alapja a korai ECMA Script és a már teljes. DOM Level 0.

Java. Script verziók: • Java. Script 1. 2 1997 júniusában jelent meg a Netscape 4. 0 -ás verziójától. Az ECMA Script szabványra és a DOM kiterjesztett változatára épült (DOM Level 0 + Proprietary DOM vagy Layers DOM), mely leírja hogy az egyes pozícionált elemek és gyermek elemek stílusát hogyan érhetjük el és változtathatjuk meg. • Java. Script 1. 3 1998 október. A Netscape 4. 06 -tól valamint az Internet Explorer 4. 0 -tól. A továbbfejlesztett ECMA Script szabványra és persze a DOM kiterjesztett verziójára épült.

Java. Script verziók: • Java. Script 1. 4 Csakis a Netscape Server változathoz készült. (Server side Java. Script) • Java. Script 1. 5 2000 november. Az ECMA Script harmadik verziójára épül valamint a DOM W 3 C-re mely már teljes egészében leírja az elemek kezelését, elérését, valamint az egyes elemek, objektumok létrehozását, törlését, módosítását az oldal betöltődése után. Ezt a verziót lényegében az összes ma is használt elterjedt böngésző támogatja. A Netscape 6. 0 -ás verziója, az Internet Explorer 5. 5 -től napjainkig (ezekben a böngésző a Microsoft már JScript-nek hívja), az ekkor megjelent Mozilla Firefox 1. 0, az Opera 6. 0 -tól napjainkig, a Safari 3. 0 -tól napjainkig, és a Google Chrome.

Java. Script verziók: • Java. Script 1. 6, 1. 7, 1. 8. 1, 1. 8. 2, 1. 9 Ezek a verziók mind csak az 1. 5 -ös valamilyen fejlesztései melyek csak a Mozilla Firefox új verzióban jelentek meg vagy fognak megjelenni. Sorban az 1. 5, 2. 0, 3. 5, 3. 6, 4. 0. Ennek oka egyszerű. A nyelv fejlesztője Brendan Eich ahogy a fejlődésen is végigkövethető először a Netscape-nél dolgozott, majd részt vett a Mozilla Foundation megalapításában, és a Mozilla fejlesztője lett, ahol napjainkban is tevékenykedik. • Java. Script 2. 0 A Mozilla által tervezett jövőbeli kiadás.

Kód beillesztése a HTML oldalba • beillesztése a <script> tag segítségével • <head> elemen belül – függvények, változók deklarációja – látható kimenete itt ne legyen – az itt lévő kódot meg kell hívni • <body> elemen belül – végrehajtás a feldolgozás során – függvényeket itt is meg kell hívni • Java. Script kód külső fájlban is elhelyezhető <script type="text/javascript" src="szkript. js"></script>

Adattípusok A Java. Script változói és konstansai alapvetően három adattípust használhatnak: • stringek: karakterláncok A stringek karakterláncok, amelyeket egyszeres (’) vagy kétszeres (”) idézőjelek között kell megadnunk. • numerikus értékek: egész és valós számok A numerikus értékek (számok) mind egész (integer), mind pedig valós (floating point vagy real) számok lehetnek. • boolean: igaz vagy hamis logikai értékek A boolean típusú (logikai) adatok csak true (igaz) illetve false (hamis) értéket vehetnek fel.

Változók A Java. Script-ben a változókat kétféleképpen hozhatjuk létre. • értékadással Ha értékadással hozzuk létre a változót, akkor rendelkezni fog értékkel is és az abból következtetett típussal is. Például: szoveg=”Nagy Liza virágot szed”; • a var kulcsszó használatával nem kötelező neki kezdőértéket adni. Például: var szoveg; Ekkor a változónak még nem lesz értéke, de típusa lényegében már lesz, méghozzá a definiálatlan típus (undefinied).

Operátorok Az operátorok olyan programnyelvi elemek melyek elvégzik a műveletek végrehajtását. Több csoportba sorolhatjuk őket aszerint, hogy milyen műveleteket végeznek.

Aritmetikai operátorok A példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 5. operátor példa új eredmény Összeadás: + a=a+4 9 Kivonás: - a=a-3 2 Szorzás: * a=a*4 20 Osztás: / a=a/2 2. 5 Maradékszámítás: % a=a%4 1 Inkrementálás: (növelés 1 -el) ++ a++ 6 Dekrementálás: (csökkentés 1 - -- a-- 4 el)

Összehasonlító operátorok A példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 10. operátor példa eredmény Egyenlő: == a==10 igaz Pontosan egyenlő: (értéket és típust is vizsgál) === a==="10" hamis Nem egyenlő: != a!=10 hamis Nagyobb mint: > a>10 hamis Kisebb mint: < a<10 hamis Nagyobb vagy egyenlő: >= a>=10 igaz Kisebb vagy egyenlő: <= a<=10 Igaz

Logikai operátorok A példák miatt említsük meg hogy az "a" változónk jelenlegi értéke 20, „b” változónk jelenlegi értéke pedig 15. operátor példa && (a>=5) && (b<=20) Logikai VAGY kapcsolat: || (a<5) || (b==20) hamis Tagadás: (egyoperandusú) ! !(a>5) hamis Logikai ÉS kapcsolat: eredmény igaz

String operátorok String típusú értékek, azaz szövegek összefűzésére is használunk operátort. Ekkor hasonlóan az aritmetikai összeadáshoz a + jelet használjuk, de abban az esetben, ha a két operandus egyike string, a végeredmény a két érték összefűzéséből álló karaktersorozat lesz. • • • ”alma”+”körte” = ”almakörte” ” 46” + ” 57” = ” 4657” ” 46” + 57 = ” 4657” 46 + 57 = 103 ”Helló”+(5>4) = ”Helló true”

Feltételes operátor A háromoperandusú feltételes operátor egyszerű esetekben egy ifelse utasítást is kiválthat. Szintaxis: változónév=(feltétel)? kifejezéshaigaz: kifejezéshahamis A feltétel teljesülése esetén változónév értéke kifejezéshaigaz értéke lesz, különben pedig kifejezéshahamis értéke. A következő példa a Jó reggelt újabb verziója: <script type="text/javascript"> var d=new Date() var time=d. get. Hours() var message = "Jó " + ((time<9)? "reggelt": "napot") + "!" document. write(message) </script>

Típuskényszerítés A Java. Script 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

Elágazások (if utasítás) Akkor használjuk, ha egy adott feltétel beteljesülése esetén szeretnénk valamit végrehajtani. Szintaxis: if (feltétel) { utasítás } A következő kód Jó reggelt kíván, ha még nincs 9 óra. <script type="text/javascript"> var d=new Date() var time=d. get. Hours() if (time<9) { document. write("<strong>Jó reggelt!</ strong >") } </script>

Elágazások (if-else utasítás) Akkor van szükségünk erre az utasításra, ha a feltételünk teljesülése mellett a nem teljesülés esetén is kell valamilyen feladatot ellátni. Szintaxis: if (feltétel) { utasítás ha igaz } else { utasítás ha hamis } Kiegészítsük ki a „Jó reggelt” példát: <script type="text/javascript"> var d=new Date() var time=d. get. Hours() if (time<9) { document. write("<strong>Jó reggelt!</ strong >") } else { document. write("Jó napot!") } </script>

Elágazások (switch utasítás) Ez az utasítás akkor alkalmazható nagyszerűen, ha egy adott kifejezés különböző értékei esetén más-más feladatot kell a kódnak végrehajtani. Szintaxis: switch(n) { case 1: utasítás 1 break case 2: utasítás 2 break default: utasítás }

Függvények • A Java. Script-ben is rendkívül fontos szerepet kapnak a függvények • Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetőbb részekre bontsuk • Készítsünk olyan programot, amely bekér egy nevet, majd egy alert ablakban kiírja: Szia <NÉV>!

BODY rész • • • <BODY> <FORM NAME="urlap 1"> Add meg a neved: <BR> <INPUT TYPE="text" NAME="nev"><BR> <INPUT TYPE="button" VALUE="Köszönés" on. Click="koszon()"> • </FORM> • </BODY> • </HTML>

HEAD rész • • • <HTML> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function koszon(){ var x = document. urlap 1. nev. value; alert("Szia "+x+" !"); } </SCRIPT> </HEAD>

Függvénydeklaráció • A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg • A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat function függvénynév(par 1, par 2, . . . , par. X) { függvénytörzs } • A Java. Script programok változókban tárolják az információkat, adatokat

Visszatérési érték Egyes függvények visszatérési értéket is előállíthatnak. A visszatérési érték a return utasítással adható meg. A kód a return hatására a függvényből kilépve a vezérlést is visszaadja az őt hívó kódnak. A következő egyszerű függvény a két paramétere szorzatát adja vissza: function prod(a, b) { return a*b } A függvényt például a következő módon tudjuk meghívni: product=prod(2, 3) A függvény 6 -os visszatérési értéke bekerül a product változóba.

Ciklusok • Ha ugyanazon, vagy hasonló programrészleteket ismételnünk kell a programunkban akkor valószínű azokat egy jól szervezett ciklusba illeszthetjük. • Négyféle ciklusfajtát ismer a Java. Script. Kettőt a while utasítás kettőt pedig a for utasítással írhatunk le. A for utasítás olyan esetekben használható hatékonyan, amikor tudjuk, hogy a ciklus hányszor fog végrehajtódni, vagy legalábbis ez az érték valahol megtalálható lesz a program végrehajtódása közben.

for ciklus Szintaktikája : for (változó=kezdőérték ; feltétel ; változó=változó+érték){. . . utasítások. . . } A változót ciklusváltozónak hívjuk. A ciklusváltozó felvesz egy kezdőértéket, a feltételben a ciklus megvizsgálja minden egyes lépés előtt hogy a ciklusváltozónk értéke még megfelel-e, ha igen, akkor végrehajtja az utasításokat majd növeli a ciklusváltozó értékét a megadott értékkel. A feltételt ciklusban maradási feltételnek hívjuk, hisz amíg igaz addig fogja végre hajtani a ciklus az utasításokat. Egy példa: egytől tízig a számok összege var ossz=0; for (var i=1 ; i<=10 ; i++){ ossz=ossz+i; }

for-in ciklus Másik fajta felhasználása a for ciklusnak, amikor segítségével bejárjuk egy tömb összes elemét vagy egy objektum összes tulajdonságát. for (változó in objektum){. . . utasítások. . . } A ciklus pontosan annyiszor fog végrehajtódni ahány elemű a tömb vagy ahány tulajdonsága van az objektumnak. A változó maga pedig tömb esetén felveszi az index értékét, azaz, hogy hányadik elemnél járunk, objektum esetén pedig a tulajdonság nevét fogja magába hordozni. Például így tudjuk kiíratni a document objektum összes tulajdonságát: for (a in document){ document. write(a); }

while ciklus Ezt a ciklust akkor szokás alkalmazni, ha nem tudjuk előre, hányszor kell a ciklusmagnak lefutnia. Általában ciklusváltozóra nincs is szükség, a ciklus futási feltétele valamilyen más módon áll össze. A while ciklus magja addig fut, amíg a feltétel igaz. (Akár „végtelen” ciklus is lehet logikailag. Gyakorlatilag a böngésző egy idő után leállítja a túl sokáig futó szkriptet. ) while (feltétel) { cikusmag }

do-while ciklus Ezt a ciklust is akkor szokás alkalmazni, ha nem tudjuk előre, hányszor kell a ciklusmagnak lefutnia. A do-while ciklus logikája csak abban mása while ciklushoz képest, hogy mindenképpen lefut egyszer a ciklusmag, és csak ez után értékelődik ki a feltétel: do { cikusmag } while (feltétel);

Dialógusablakok • A felhasználó figyelmét ráirányítjuk valamilyen fontos információra egy dialógusablak segítségével. Lehet: -Üzenetablak -Kérdés -Egyszerű adatbevitel

Üzenetablak Az üzenetablak csupán egyszerű információt közöl, ezért az alert függvénynek is csak egy paramétert kell megadnunk. A felhasználó mindössze tudomásul veheti a közölt üzenetet. <head> <script type="text/javascript"> function figyelmeztet() { alert("Figyelmeztetés!") } </script> </head> <body> <form> <input type="button" onclick="figyelmeztet()" value="Gomb"> </form> </body>

Kérdés • A felhasználótól külön dialógus-ablakból kérünk választ egy eldöntendő kérdésre. • A confirm függvény visszatérési értéke jelzi, hogy a felhasználó melyik gombot választotta. <head> <script type="text/javascript"> function kerdes() { if (confirm("Kérdés")) {document. write("OK") } else { document. write("Mégse") } } </script> </head><body> <form> <input type="button" onclick="kerdes()" value="Gomb"> </form> </body>

Egyszerű adatbevitel • A prompt függvénnyel egysoros szöveg bevitelét kérhetjük a felhasználótól. A függvény első paramétere az üzenet szövege, a második pedig az alapértelmezett válasz (nem kötelező megadni). Itt is a függvény visszatérési értékén keresztül juthatunk a felhasználó válaszához. (Ha a felhasználó a Mégse gombot választotta, null a visszaadott érték. ) <head> <script type="text/javascript"> function disp_prompt() { var name=prompt( "Add meg a neved", "Névtelen") if (name!=null && name!=""){ document. write( "Szia " + name + "!") } } </script> </head><body> <form> <input type="button" onclick="disp_prompt()" value="Gomb"> </form></body>

Eseménykezelés Java. Script segítségével készíthetünk dinamikus weblapokat. Alapvetően ez azt jelenti, hogy a honlap különböző felhasználói (és böngésző) eseményeket képes érzékelni, és azokra valamilyen módon reagálni. Jellemző események a következők: (A teljesség igénye nélkül) • • • egérkattintás a weboldal vagy egy objektum letöltődése az egeret érzékeny területen mozgatjuk listából egy elem kiválasztásra kerül űrlap elküldés vagy alaphelyzetbe állítás billentyűleütés

Események • A programoknak gyakran kell reagálnia olyan eseményekre, mint billentyű lenyomása, vagy az egér mozgatása • Készítsük el a következő weblapot!

on. Click • ha a felhasználó megnyomja a gombot • végrehajtja az alert('Hello!') Java. Script kódot • Ez egy függvény, amely létrehoz egy üzenetablakot, melyben a zárójelen belül idézőjelek közé írt szöveget jeleníti meg • lehet idézőjelen belül idézőjelet használni!

Gyakran használt eseménykezelők • weboldal betöltésekor, elhagyásakor – on. Load, - böngésző típusának lekérdezése on. Load – on. Unload, - kilépés kezelése on. Unload • űrlap kezelés – on. Focus – belépés egy űrlap elembe – on. Blur – űrlap elem elhagyása – on. Change – űrlap elem tartalma megváltozik – on. Submit – űrlap elküldése

Gyakran használt eseménykezelők • egérmozgás – on. Mouse. Over – egér felö kerül egy elemnek – on. Mouse. Out – egér elhagyja az elemet • időzítő események – get. Hours(), get. Minutes(), get. Seconds() – set. Timeout

Befejezés • Sajnos a Java. Script is küszködik egy betegséggel, azzal, hogy az egyes böngészők nem teljesen egyformán kezelik a nyelvet. • több böngészőben is teszteljük le az oldalainkat és az azokba ágyazott programokat! • Sajnos amíg a legelterjedtebb böngészők egymással csatáznak, addig csak újabb és újabb eltérések várhatók

Köszönöm a figyelmet!