Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.

Hasonló előadás


Az előadások a következő témára: "WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem."— Előadás másolata:

1 WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem

2 JAVASCRIPT JAVASRIPT története, kialakulása JAVASCRIPT használata Változók, kifejezések, operátorok vezérlési szerkezetek – elágazások – ciklusok speciális JAVASCRIPT elemek Függvények (matematikai és dátumfüggvények) Stíluslapok CSS Dokumentum objektum modell

3 JAVASRIPT nyelv, története, kialakulása a HTML dokumentumok kezdetben statikusak voltak nem lehetett eseményt kiváltani JavaScript ezt azonban lehetővé teszi Netscape fejlesztette ki JavaScript egy parancsnyelv JavaScript egy interpretált nyelv (forrást a futtató közeg futás közben értelmezi és hajtja végre ) – az előnye: egyszerűbb a fejlesztés és minden olyan gépen fog futni, ahol az interpreter megtalálható – hátránya: programok lassabban futnak, mivel futás közben értelmeződnek

4 JAVASCRIPT haználata tag-ek között script forrásszöveg – language és a type paraméterrel a JavaScript verziószámát adhatjuk meg – fejrészben és törzsrészben is használható eseménykezelőként más HTML tag-ek paramétereként (erről egy későbbi részben lesz majd részletesen szó)

5 JAVASCRIPT változók I A változónevek választásánál szabályok: – a változónevekben az angol abc kis- és nagybetűit, a 0-9 számjegyeket és az ”_” karaktert használhatjuk – a változónevekben nem szerepelhet se szóköz se írásjel (például: ”.”, ”?”, ”!”) – a változónév első karaktere nem lehet szám – a változónév hossza nem lehet hosszabb, mint egy sor – a változónevekben a kis- és nagybetűket különbözőnek tekintjük változó deklarálása: – var a=5; – b=12;

6 JAVASCRIPT változók II változók hatóköre: – általános változók (globális): az egész programra kiterjed a hatókörük, tehát bárhol lehet hivatkozni rájuk, vagy az értéküket bármelyik függvényben meg lehet változtatni – helyi változók (lokális): hatókörük csak egyetlen programra terjed ki, csak abban a függvényben lehet használni, melyben létrehozták őket Helyi változó létrehozásához mindig használni kell a ”var” kulcsszót. A JavaScript akkor is helyi változót hoz létre, ha az adott néven már létezik általános változó A JavaScript gyengén típusos nyelv (változó típusa gyengén kötött )

7 JAVASCRIPT operátorok I JAVASCRIPT operátorok típusai: – aritmetikai – logikai – összehasonlító aritmetikai – egyoperandusu aritmetikai operátorok ++ :változó értéket lehet növelni eggyel -- : változó értékét lehet csökkenteni eggyel – kétoperandusu operátorok +, -, /, * +=, -=, /=, *= : rendre bal oldal növelése csökkentése, szorzása, osztása jobb oldallal

8 JAVASCRIPT operátorok II logikai – && : logikai és – || : logikai vagy – ! : logikai nem összehasonlító – == egyenlőség vizsgálata – != nem egyenlőség vizsgálata – <= kisebb vagy egyenlő – >= nagyobb vagy egyenlő – < kisebb – > nagyobb

9 JAVASCRIPT utasítások JavaScript-ben egyszerűsége miatt kevés az utasítás break: – a switch, while vagy a for vezérlési szerkezetben használható; – hatására a program futása a ciklus utáni első utasítás végrehajtásával folytatódik continue: – cikluson belül használható – az adott ciklus hátralévő utasításait átugorja, és ismét a ciklus elejére kerül a vezérlés function: függvények eljárások deklarálására használható; var: változók deklarálására használható kulcsszó

10 JAVASCRIPT vezérlési szerkezetek Elágazások – IF – SWITCH Ciklusok – elöltesztelő: FOR WHILE – hátultesztelő DO… WHILE

11 Elágazások Elágazások – IF – SWITCH IF if ( nev==”Józsi” ) { window.alert(”Helló Józsi! ”); nev=””; } else { window.alert(”Te nem vagy Józsi! ”); } SWITCH – A mintának megfelelően hajt végre utasításokat

12 SWITCH elágazás nev = prompt("Add meg a neved!",""); switch (nev) { case "Józsi": window.alert("Helló "+nev+"!"); break; case "Géza": window.alert("Helló "+nev+"!"); break; case "Béla": window.alert("Helló "+nev+"!"); break; default: window.alert("Helló még nem ismerlek!"); }

13 Ciklusok I egy meghatározott utasítássort hajtathatunk végre bármennyiszer (végtelen ciklus) a programmal i, j, k FOR ciklus – kezdőérték: i=1; a ciklusváltózónak értéket adunk hogy ”honnan” induljon – végérték: i<=10 addig hajtja végre a ”{}” zárójelek közötti utasítást, amíg ez a kifejezés igaz – növekménnyel történő módosulás: ebben az esetben i++ for (i=1;i<=10;i++) { document.write(i+" "); }

14 Ciklusok II WHILE ciklus (elöltesztelő) – ciklus addig fut, amíg a while utasítás utáni kifejezés értéke igaz i=20; while (i >= 0) { document.write(i+" "); i-=2; } DO.. WHILE ciklus (hátultesztelő) i=20; do { document.write(i+" "); i+=2; } while (i >=0);

15 Speciális JAVASCRIPT elemek null – speciális null értéket képviseli – egyes függvények visszatérési értéke lehet hiba esetén – nem definiált változók értéke szintén null this – a hívó, az aktuális objektumot reprezentálja – eseménykezelő paraméterekben hasznos undefined – a változó amire hivatkozunk nincs deklarálva – nem hibaüzenetet kapunk, hanem a böngésző az undefined felirattal helyettesíti a változó értékét NaN (Not A Number) – amennyiben az argumentum nem értelmezhető számként

16 Függvények bevezetés Gyakran ismétlődő utasítássorozat Egységként kezelhetjük Átláthatóvá teszi a programot

17 Függvények I Helló function hello(nev) { window.alert("Helló "+nev+"!"); } nev = prompt("Add meg a neved!",""); hello(nev);

18 Függvények II Regisztrációs oldal function ellenorzes() { if (document.lap.fnev.value.length < 4) { alert("Nem adta meg a nevét"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; } else { if (document.lap.fcim.value=="") { //cím mező ellenőrzése alert("Nem adta meg a címét"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; }

19 Függvények III else { if (document.lap.f .value.length < 5) { // ellenőrzése alert("Nem elég hosszú az cím!"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; } else { /// ell meg mindig van_kukac=0; for (x=0; x

20 Függvények IV if (document.lap.felhnev.value.length < 4) { //felhasználónév 4 kar alert("Legalább 4 karakter a felhasználónév!"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; } else { if (document.lap.fpasswd.value=="") { //jelszo mező ellenőrzése alert("Nem adta meg a jelszavát"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; }

21 Függvények V else { if (document.lap.fpasswd.value != document.lap.fp.value) { alert("Nem egyezik meg a két jelszava!"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; } else { return true; } } } } } }//else }//fgv Regisztráció név: cím: cím: felhasználónév: jelszó: jelszó ismétlése:

22 Matematikai függvények Beépített függvények Megkönnyítik a felhasználó munkáját – Math.round(): a számot a legközelebbi egész számra kerekíti – random(): egy véletlen számot ad vissza 0 és 1 között random function rand() { return Math.round(Math.random() * 100); } document.write(rand());

23 Dátumfüggvények I a ”Date” objektum metódusain keresztül kezelhetjük getDate(): napot kérdezi le getMonth(): hónapot kérdezi le getYear(): az évet kérdezi le getTime: időt és a dátumot kérdezi le

24 Dátumfüggvények II datum var honapok=new Array(13); honapok[1]="Január"; honapok[2]="Február"; honapok[3]="Március"; honapok[4]="Április"; honapok[5]="Május"; honapok[6]="Június"; honapok[7]="Július"; honapok[8]="Augusztus"; honapok[9]="Szeptember"; honapok[10]="Október"; honapok[11]="November"; honapok[12]="December"; var time=new Date(); var lmonth=honapok[time.getMonth() + 1]; var datum=time.getDate(); var ev=time.getYear(); if (ev < 2000) ev = ev ; document.write(" " + ev); document.write(", " + lmonth + " " + datum + " ");

26 DHTML-Dinamikus HTML oldalak II function next() { poz1+=sebesseg1; poz2+=sebesseg2; poz3+=sebesseg3; if (poz1 > 1000) poz1= -100; if (poz2 > 1000) poz2= -100; if (poz3 > 1000) poz3= -100; document.getElementById("kep1").style.left=poz1; document.getElementById("kep2").style.left=poz2; document.getElementById("kep3").style.left=poz3; window.setTimeout("next();",10); }

27 DHTML-Dinamikus HTML oldalak III

28 DHTML-Dinamikus HTML oldalak III Számok összeadása select, műveletek végrehajtása! function szamol() { with (document.lap) eredmeny.value = eval((lista1.selectedIndex+1)+ (muvelet.options[muvelet.selectedIndex].text)+(lista2.selectedIndex+1)); } egy kettő három négy öt hat hét + - / * egy kettő három négy öt hat hét

29 DHTML-Dinamikus HTML oldalak IV Szövegdoboz tartalmának megváltoztatása A textboxban lévő számot csökkent, növeli.

30 DHTML-Dinamikus HTML oldalak V

31 Stíluslapok (CSS) használata I a dokumentumszerkezet megváltoztatása nélkül lehet befolyásolni a megjelenést és az elrendezést fejrészbe kerül, mivel nem képez semmiféle kimenetet szabályok halmaza B, H2, H4 {color: green; font-size: 13px; text-align: center;}

32 Stíluslapok (CSS) használata II Szabályok részei: – a HTML elem neve, melyre a szabály vonatkozik – egy vagy több tulajdonságnévből (ez itt a color) – a tulajdonsághoz tartozó értékből (green) Egyedi szabályok készítése: #stilus1 {color: green;} Ez az első stíluslapom

33 Stíluslapok (CSS) használata III Stíluslapokkal befolyásolható tulajdonságok: – Térköz – Színek – Betűtípusok – Margók, keretek

34 Stíluslapok (CSS) használata III Szöveg igazítása – letter-spacing: betűk közötti távolság megadása – text-decoration: vonalakat helyezhetünk el a szöveg alatt, felett, vagy a szöveg belsejében – text-align: a szöveg igazítását határozhatjuk meg vele – vertical-align: feljebb, vagy lejjebb tolhatjuk az elemeket a vele egy sorban elhelyezett elemekhez képes – text-transform: kis és nagybetűk használatát szabályozza – line-height: az aktuális sor teteje és a következő sor teteje közötti távolságot állíthatjuk be segítségével háttérszíneket és háttérképeket – color: egy elem szövegének színét határozhatjuk meg vele – background-color: egy elem háttérszínét határozza meg – background-image: az elem hátteréül használt háttérkép kiválasztására szolgál – background: gyors megoldást kínál az előbb felsorolt háttérbeállítások meghatározására

35 Stíluslapok (CSS) használata IV betűtípusok – font-style: a betűkészlet stílusát határozza meg – font-family: a szöveg betűtípusát határozhatjuk meg segítségével – font-variant: a normal érték a kisbetűket a hagyományos módon, a small –caps érték pedig kiskapitális formájában jeleníti meg – font-size: a betűkészlet pontmérete – font-weight: a szöveg vastagságát határozhatjuk meg általános elrendezés – margin: ugyanazt azt értéket rendeli mind a négy margószélességhez – width: egy elem szélességét határozza meg – height: egy elem magasságát határozza meg – float: egy elem szöveggel történő körbefuttatására szolgál – clear: ezzel a tulajdonsággal fejezhetjük be az elemek szövegekkel történő körbefuttatását

36 Stíluslapok (CSS) használata V Mértékegységek használata stíluslapoknál – px: képpont; a számítógép kijelzőjének és más eszközöknek a legkisebb megcímezhető egységei – pt: pont; a betűkészletek méretének szabványos mértékegysége – ex: az x karakter hozzávetőleges magassága az adott betűkészletben Külső stíluslapok használata – Dokumentum átláthatósága érdekében –

37 Dokumentum Objektum Modell (DOM) I JavaScript nagy előnye a HTML-lel szemben, hogy a programokkal a webdokumentumot és a tartalmat egyaránt módosíthatjuk a JavaScript a böngészővel és a dokumentumokkal való együttműködés érdekében a gyermek – szülő kapcsolatban álló objektumok rendszerét a DOM-ot használja hierarchikus struktúrát alkotnak egy dokumentum teljes tartalmát és minden összetevőjét magukban foglalják DOM története: – Netscape 2.0 – kezdetben az egyes objektumok nem egyeztek meg böngészőnként – ma már HTML dokumentum minden részéhez kapcsol valamilyen objektumot

38 Dokumentum Objektum Modell (DOM) II

39 Dokumentum Objektum Modell (DOM) III objektumok: – metódusok – tulajdonságok – document.lap.fnev.value.length objektumrendszer fő kiinduló pontja a window objektum window képviseli a böngészőablakot – window.alert() – window.prompt() document objektum egy webdokumentumot (weboldalt) jelképez – document.open; document.close

40 DOCUMENT objektum I document objektum tulajdonságai: – document.url: a weboldal URL-jét határozza meg; (nem módosíthatjuk) – document.title: az aktuális oldal címét adja meg, melyet a elem határoz meg – document.referrer: az érkezése előtti oldal címét tartalmazza – document.lastModified: a dokumentum utolsó módosításának a dátuma – document.cookie: segítségével a sütiket (cookie) kezelhetjük; sütit elhelyezhetünk, vagy a meglévőt olvashatjuk – document.bgColor, document.fgColor: ez a két tulajdonság a dokumentum háttérszínét és szövegszínét adja meg; – document.linkColor, document.alinkColor, document.vlinkColor: a linkeknek a színét lehet meghatározni velük

41 DOCUMENT objektum II Egy új ablakot lök ki. function ablak() { newwin=open("segedlet.html","win","location=0,width=320,height=2 00"); } Ha megnyomod a gombot akkor kinyílik egy új ablak!

42 HISTORY objektum látogatott oldalak URL-jével kapcsolatos adatokat lehet megszerezni előre vagy hátra lapozhatunk az előzménylistában lévő oldalak között history.length: az előzmény lista hosszát adja meg (egyetlen tulajdonsága) history objektum metódusai: – history.go(): URL-t nyit meg az előzménylistából egy megadott szám alapján; a zárójelben pozitív és negatív számot egyaránt meg lehet adni – history.back(): az előzménylista előző URL-jét tölti vissza – history.forward():az előzménylista következő URL-jét tölti vissza

43 LOCATION objektum I Segítségével URL-t lehet betölteni az aktuális ablakba location objektum tulajdonságai: – location.href: az ablakban lévő oldal url-jét tartalmazza – location.protocol: az URL protokollt meghatározó rész, – location.hostname: az URL-nek a gépnevet meghatározó része – location.port: az URL kapuszámot meghatározó rész – location.pathname: az URL útvonalat és fájlnevet meghatározó rész – location.search: az URL lekérdezési része, ha van ilyen – location.hash: az URL-ben lévő hivatkozás neve, ha van ilyen

44 LOCATION objektum II location objektum

45 Események kezelése események: – billentyűzet által kiváltott – egér által kiváltott eseménymodell: – event (esemény) objektum – Evenet Capturing (esemény átvétel) Böngészőnként az event objektum elérhető tulajdonságai eltérnek

46 EVENT objektum I.E. által támogatott tulajdonságai event.button: lenyomott egér gomb; bal oldali gomb – 1; jobb gomb –2 event.clientX: az esemény bekövetkeztének X koordinátája képpontban event.clientY: az esemény bekövetkeztének Y koordinátája képpontban event.altkey: az Alt billentyűt az esemény során lenyomták-e vagy sem; event.ctrlkey: a Ctrl billentyűt lenyomták-e az esemény során; event.shiftkey: a Shift billentyűt lenyomták-e az esemény során; event.keyCode: a lenyomott billentyű kódját adja Unicode formátumban event.srcElement: az objektumot adja meg, ahol az esemény bekövetkezett

47 EVENT objektum Netscape által támogatott tulajdonságai event.modifiers: azt jelzi, hogy az esemény során melyik módosítóbillentyűt (Shift, Alt, Ctrl) nyomták le; event.pageX: az esemény bekövetkeztének X koordinátája képpontban event.pageY: az esemény bekövetkeztének Y koordinátája képpontban event.which: a lenyomott billentyű vagy egérgomb kódja, Unicode formátumban event.target: az objektumot adja meg, ahol az esemény bekövetkezett

48 Egér eseményei onMouseOver: hivatkozás, vagy objektum felé kerül az egér onMouseOut: hivatkozás, vagy objektumról elkerül az egér onMouseMove: az egérmutató mozog egy hivatkozás, vagy objektum felett onClick: az egér az objektum, vagy hivatkozás felett áll és kattint onDbClick: az egér az objektum, vagy hivatkozás felett áll és duplán kattint onMouseDown: az egérgomb lenyomásakor következik be az esemény onMouseUp: az egérgomb felengedésekor következik be az esemény

49 Billentyűzet eseményei onKeyPress: a billentyűzet megnyomását és felengedését érzékeli onKeyUp: a billentyű lenyomásakor következik be az esemény onKeyDown: a billentyű felengedésekor következik be az esemény Lenyomott billentyű ASCII kódja: –Internet Explorerben pedig az event.keyCode –Netscape-ben az event.which tulajdonság

50 További események I onLoad: az esemény akkor következik be, amikor az aktuális oldal letöltődik a kiszolgálóról onUnload: az esemény akkor következik be, amikor a felhasználó bezárja az ablakot, vagy új oldalt tölt be onSubmit: a felhasználó a submit gombot megnyomja onFocus: text, textarea, password, vagy select objektumhoz kerül a fókusz (kijelölés) onBlur: a fókusz (kijelölés) elkerül egy objektumról

51 További események II onChange: a text, textarea, password, vagy select objektumok értékét megváltoztatjuk és a fókusz elkerül róluk onSelect: amikor egy text, textarea, vagy password objektumban egy szövegrészt kijelölnek onDragDrop: a ”húzd és vidd” műveletben például a böngészőablakba ejtett állományt, vagy Internet-címet rögtön betölti. Működése operációs rendszer függő. onMove: a felhasználó, vagy egy JavaScript program elmozdítja az ablakot. A screenX és screenY változók tartalmazzák az ablak bal felső sarkának koordinátáit. onResize: esemény pedig akkor következik be, amikor a felhasználó átméretezi az ablakot


Letölteni ppt "WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem."
Google Hirdetések