Скачать презентацию Java Script alapjai Készítette Csorba Máté fw 0 Скачать презентацию Java Script alapjai Készítette Csorba Máté fw 0

bb0cec218e25c3736c2dab408dcf022d.ppt

  • Количество слайдов: 43

Java. Script alapjai Készítette: Csorba Máté fw 0 jo 1 Forrás: - Nagy Gusztáv 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 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, 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 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 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. 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. 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 Kód beillesztése a HTML oldalba • beillesztése a

Adattípusok A Java. Script változói és konstansai alapvetően három adattípust használhatnak: • stringek: karakterláncok 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 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 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 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 Ö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 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 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: 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:

Típuskényszerítés A Java. Script esetében könnyű az átmenet a változó típusok között. Ha a 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. 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.

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

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

Add meg a neved:
" src="http://present5.com/presentation/bb0cec218e25c3736c2dab408dcf022d/image-23.jpg" alt="BODY rész • • • Add meg a neved:
" /> BODY rész • • • Add meg a neved:

• • •

function koszon(){ var x" src="http://present5.com/presentation/bb0cec218e25c3736c2dab408dcf022d/image-24.jpg" alt="HEAD rész • • •

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

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

Egyszerű adatbevitel • A prompt függvénnyel egysoros szöveg bevitelét kérhetjük a felhasználótól. A függvény 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. )

Eseménykezelés Java. Script segítségével készíthetünk dinamikus weblapokat. Alapvetően ez azt jelenti, hogy a honlap 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 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!

" src="http://present5.com/presentation/bb0cec218e25c3736c2dab408dcf022d/image-38.jpg" alt="

" />

on. Click • ha a felhasználó megnyomja a gombot • végrehajtja az alert('Hello!') Java. 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 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 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 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! Köszönöm a figyelmet!