Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem

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

1 Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
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 <SCRIPT> </SCRIPT> tag-ek között
<SCRIPT [language=”JavaScript1.3” type=”text/javascript1.3”]> script forrásszöveg </SCRIPT> 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ó 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 ( nev==”Józsi” ) {
window.alert(”Helló Józsi! ”); nev=””; } else { window.alert(”Te nem vagy Józsi! ”); } 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": case "Béla": 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+"<br>"); }

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+"<br>"); i-=2; } DO.. WHILE ciklus (hátultesztelő) i=20; <!– végtelen ciklus vagyok --> do { 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <title>Helló</title> <script language="JavaScript1.3" type="text/javascript1.3"> function hello(nev) { window.alert("Helló "+nev+"!"); } </script></head> <body> nev = prompt("Add meg a neved!",""); hello(nev);  </script></body></html>

18 Függvények II <html><head>
<title>Regisztrációs oldal</title> <script language="Javascript"> 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");

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<document.lap.f .value.length; x++) { if { van_kukac=1; break; if (van_kukac != 1) { alert("Nincs benne kukac!");

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");

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 </script> </head><body><center> <form name="lap" onSubmit="return ellenorzes()" action="reg1.php" > <table> <caption><b><font face="arial">Regisztráció</font></b></caption> <tr><th><font face="arial">név:</font><th> <input type="text" name="fnev"> <tr><th><font face="arial">cím: </font><th><input type="text" name="fcim"> <tr><th><font face="arial"> cím: </font><th><input type="text" name="f "><th> <tr><th><font face="arial">felhasználónév: </font><th><input type="text" name="felhnev"> <tr><th><font face="arial">jelszó: </font><th><input type="password" name="fpasswd"> <tr><th><font face="arial">jelszó ismétlése: </font><th><input type="password" name="fp"> <tr><th><th><input type="reset" value=" Törlés "><input type="submit" value=" Mehet "> </table></form><center></body></html>

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 <html><head> <title>random</title> <script language="JavaScript1.3" type="text/javascript1.3"> function rand() { return Math.round(Math.random() * 100); } </script> </head><body> document.write(rand()); </script></body></html>

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 <html><head> <title>datum</title> </head> <body text="#52C6FF" bgcolor="#000000"> <font size="4"> <SCRIPT LANGUAGE="JavaScript1.2">  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("<center>" + ev); document.write(", " + lmonth + " " + datum + "</center>"); </SCRIPT> </font> </body></html>

25 DHTML-Dinamikus HTML oldalak I
Mozgás megvalósítása <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <title>képek mozgatása</title> <script language="JavaScript1.3" type="text/javascript1.3"> var poz1=-100; var poz2=-100; var poz3=-100; var sebesseg1 = Math.floor(Math.random()*10)+2; var sebesseg2 = Math.floor(Math.random()*10)+2; var sebesseg3 = Math.floor(Math.random()*10)+2;

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); } </script></head>

27 DHTML-Dinamikus HTML oldalak III
<body onLoad="next();"> <div ID="kep1" STYLE="position:absolute; left:0; top:100; width:100; height:100; visibility:show"> <img src="1.jpg" width=100 height=100> </div> <div ID="kep2" STYLE="position:absolute; left:0; top:200; width:100; height:100; visibility:show"> <div ID="kep3" STYLE="position:absolute; left:0; top:300; width:100; height:100; visibility:show"> </body> </html>

28 DHTML-Dinamikus HTML oldalak III
Számok összeadása <html><head> <title>select, műveletek végrehajtása!</title> <script language="JavaScript"> function szamol() { with (document.lap) eredmeny.value = eval((lista1.selectedIndex+1)+ (muvelet.options[muvelet.selectedIndex].text)+(lista2.selectedIndex+1)); } </script></head> <body> <center><br><br><br> <form name="lap"> <select name=lista1 onChange="szamol()"> <option selected>egy</option><option>kettő</option><option>három</option> <option>négy</option><option>öt</option><option>hat</option><option>hét</option> </select> <select name=muvelet onChange="szamol()"> <option selected>+</option><option>-</option><option>/</option> <option> * </option> <select name=lista2 onChange="szamol()"> <input type=text name=eredmeny size=7> </form> </center> </body></html>

29 DHTML-Dinamikus HTML oldalak IV
Szövegdoboz tartalmának megváltoztatása <html> <head> <title>A textboxban lévő számot csökkent, növeli.</title> </head> <body> <center> <form name="lap"> <table> <tr><th height=50></th></tr> <tr><th><input type=button value=" " size=5 onMouseOver= "document.lap.szam.value++"></th> <th><input type=button value=" " size=5 onMouseOver ="document.lap.szam.value--"><br></th></tr>

30 DHTML-Dinamikus HTML oldalak V
<tr><th height=30></th></tr> <tr><th colspan=2><input type=text name="szam" size=10 onMouseOver="document.lap.szam.value=1"></th></tr> </table> </form> </center> </body></html>

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 <STYLE> </STYLE> fejrészbe kerül, mivel nem képez semmiféle kimenetet szabályok halmaza <styleTYPE=”text / css” > B, H2, H4 {color: green; font-size: 13px; text-align: center;} </style>

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: <styleTYPE=”text / css” > #stilus1 {color: green;} </style> <p ID=”stilus1”>Ez az első stíluslapom</p>

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 <link REL=STYLESHEET TYPE=”text/css” HREF=”index.css”>

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 <TITLE> 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 <html>
<head> <title>Egy új ablakot lök ki.</title> <script language="JavaScript"> function ablak() { newwin=open("segedlet.html","win","location=0,width=320,height=200"); } </script> </head> <body bgcolor="#FFFFFF"><center> Ha megnyomod a gombot akkor kinyílik egy új ablak!<br><br> <input type=button value="nyomj meg" onclick="ablak()"> </center></body></html>

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <title>location objektum</title> </head> <body>  <center><br><br>  <input type="submit" value="borospince" onClick="window.location.href=' <input type="submit" value="alert" onClick="alert('Ez nem nyert!')">  </center> </body> </html>

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 <form name="lap"> <input type="text" size=30 onMouseDown="alert('Lenyomtad a gombot az objektum felett!')"> </form>

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 <form name="lap"> <input type="text" onDblClick="alert(Kettőt kattintottál az objektum felett! '+event.type);"> </form>

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 <body onLoad="alert('Az oldal betöltődött!');"> onUnload: az esemény akkor következik be, amikor a felhasználó bezárja az ablakot, vagy új oldalt tölt be <body onUnload="alert('Viszont látásra!');"> <input type="submit" value="borospince" onClick="window.location.href = ' </body> 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