WEB Technológiák

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

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

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

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ó)

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;

JAVASCRIPT változók II • változókható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 )

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

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

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ó

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

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

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

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

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 { document.write(i+"<br>"); i+=2; } while (i >=0);

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

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

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> <script language="JavaScript1.3" type="text/javascript1.3"> nev = prompt("Add meg a neved!",""); hello(nev); </script></body></html>

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"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; }

Függvények III else { if (document.lap.femail.value.length < 5) { //e-mail ellenőrzése alert("Nem elég hosszú az e-mail cím!"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; } else { ///email ell meg mindig van_kukac=0; for (x=0; x<document.lap.femail.value.length; x++) { if (document.lap.femail.value.charAt(x)=='@') { van_kukac=1; break; } } if (van_kukac != 1) { alert("Nincs benne kukac!"); document.lap.fpasswd.value=""; document.lap.fp.value=""; return false; }

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; }

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">e-mail cím: </font><th><input type="text" name="femail"><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>

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> <script language="JavaScript1.3" type="text/javascript1.3"> document.write(rand()); </script></body></html>

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

Dátumfüggvények II 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 + 1900; document.write("<center>" + ev); document.write(", " + lmonth + " " + datum + "</center>"); </SCRIPT> </font> </body></html> <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";

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;

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>

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"> <img src="1.jpg" width=100 height=100> </div> <div ID="kep3" STYLE="position:absolute; left:0; top:300; width:100; height:100; visibility:show"> <img src="1.jpg" width=100 height=100> </div> </body> </html>

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()"> • <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> • <input type=text name=eredmeny size=7> • </form> • </center> </body></html>

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>

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>

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>

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>

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

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

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

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

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

Dokumentum Objektum Modell (DOM) II

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

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

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>

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

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

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='http://www.borospince.hu'"> <input type="submit" value="alert" onClick="alert('Ez nem nyert!')"> </center> </body> </html>

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>

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

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

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>

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

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 = 'http://www.borospince.hu'"> </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

WEB Technológiák