Fejlett Webes Technolgik 103 A mai elads tartalma
Fejlett Webes Technológiák 10/3
A mai előadás tartalma: n n CSS Java. Script
Problémák n n n Tartalom, formázás egyveleg HTML formázó készlet szegényes HTML a dokumentum szerkezetét adja A böngészőre volt bízva a megjelenítés Netscape, IE, új elemek Egységes megoldás CSS
A CSS Előnyei n n n Tartalom, formázás elkülönül Nyílt szabvány Sok böngésző támogatja Stílust definiál Megkönnyíti a munkát
Definiálható n n HTML elemen belül HTML dokumentum fejrészében Külső css fájlban Több külső css fájlban
Érvényesítési sorrend 1. 2. 3. 4. Böngésző alapértelmezett css Külső css Fejrész css Egyes elemekben definiált
Definiálás n Külső oldal: <head> <link rel="stylesheet" type="text/css" href="minta. css" /> </head> n Fejrészben: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20 px} body {background-image: url("images/back 40. gif")} </style> </head> n Az adott elemnél: <p style="color: sienna; margin-left: 20 px"> Ez egy bekezdés</p>
A CSS bejegyzés felépítése n n n Választó Tulajdonság Érték
Példa Body { color: yellow } p { font-family: ”sans serif” } P { text-align: center; color: black; font-family: arial } h 1, h 2, h 3, h 4, h 5, h 6 { color: green}
Hivatkozások: Class p. jobb {text-align: right} p. kozep {text-align: center} … <p class=”jobb”>Ez a bekezdés jobbra lesz igazítva<p> <p class=”bal”>Ez a bekezdés jobbra lesz igazítva<p>
Hivatkozások: Általános. kozep {text-align: center} <input type=”text” class=”kozep”> <p class=”kozep”>Középre igazítva</p>
Hivatkozások: id #intro { font-size: 110%; font-weight: bold; color: #0000 ff; background-color: transparent } p#intro { font-size: 110%; font-weight: bold; color: #0000 ff; background-color: transparent }
Formázási lehetőségek n n n n Háttér Szöveg Betű Keretvonal Margó Listák …
Kliens Oldali Programozás n n n n n Feladata a webszerver tehermentesítése A felhasználói akciók lekezelése A helyszínen ellenőrizni a bevitelt Szervert nem igénylő megoldások (pl. : számológép) Design eszköz Dinamikus weboldal (pl. : óra az oldalon) Java. Script VBScript Java Applet
Java. Script n n n A Netscape és a SUN fejlesztette ki Java-nál egyszerűbb, Netscape böngésző használja Közös tulajdonság a Java-val 4 betű Szintakszisát a C nyelvtől örökölte A kis és a nagy betűket megkülönbözteti A sorok végére pontosvesszőt kell írni Objektum alapú -> lehetőség van objektumok létrehozására de osztályokat típusokat nem definiálhatunk A program szövege kerül interpretálásra (lassú, a kódot nem lehet elrejteni) A váltózók típusa változó Integráns része a HTML lapnak A leggyakrabban használt kliens oldali szkriptnyelv
Java. Script és a HTML n A Java. Script kód helye: n n n HTML törzs HTML fejléc Külső fájl A kódban vegyesen szerepelhet függvény definíció és egyszerű utasítás Célszerű a függvényeket a HTML fejrészébe definiálni Futása: n n Eseményre, függvényhívás (függvények esetén) Betöltéskor (ha nem függvényt írtunk)
Java. Script a HTML-ben <SCRIPT LANGUAGE="Java. Script” type="text/javascript"> <!-- program //--> </SCRIPT> <script language="Java. Script" src="kulso. js" type="text/javascript"> </script> n n Célszerű a HTML megjegyzés elemeket használni (<!-- program //--> ) Több helyen is szerepelhet a <script> </script> elempár
Változók n Típusok: n n n n Szám Szöveg Objektum Logikai Var valtozo = érték Típusa változhat Lehet lokális, globális
Operátorok
Feltételes utasítások
Függvények Definiálás: function fnév(argumentumok) { utasítások return visszatérési érték } Hívás: fnev(arguentumok);
Példa <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN"> <html> <head> <title>Példa</title> </head> <body> <script language="Java. Script" type="text/javascript"> <!-var i= "Globális; function kiir(a) { var s="Lokális"; for (j=0; j<3; j++) alert(j); } //--> </script> </body> </html>
Objektumok n n A Java. Script objektum <tulajdonság, érték> párok halmaza object. property hivatkozás function person (first, last, age) { this. first_name = first; this. last_name = last; this. age = age; } Dezso = new person("Dezsô", "Nagy", 23); Dezso. age = 24; n Asszociatív tömbként működhet Dezso["age"] = 24;
Beépített objektumok
Hivatkozások n n n objektumnév 1. objektumnév 2. tulajdonság objektumnév 1. objektumtípus[név]. tulajdonság objektumnév 1. objektumtípus[sorszám]. tulajdonság
Eseménykezelés: n n n n n on. Load betöltünk egy oldalt a böngészôbe on. Unload kilépünk egy betöltött oldalról on. Focusaz ûrlap valamelyik eleme a fókuszba kerül, azaz a billentyûzetrôl érkezô karaktereket fogadja on. Blura fókusz elmozdul az ûrlap valamelyik elemérôl on. Select az ûrlap valamelyik bemeneti mezôjét kiválasztották on. Change az ûrlap valamelyik elemének (szöveg, választás) értékét megváltoztatták on. Clickrákattintottak egy ûrlap elemre (pl. nyomógombra), vagy hivatkozásra on. Submitelküldenek egy ûrlapot a szerver felé (a submit gombra kattintottak) on. Mouse. Over az egér egy hivatkozás, vagy dokumentum címke fölé kerül
String objektum n Fontosabb tulajdonságai: n n length Fontosabb metódusai: n n n index. Of() replace() to. Lower. Case() to. Upper. Case() concat()
Példa <html><head><title>Teszt</title></head> <body> <script language="Java. Script"> mondat = "Kerekecske gombocska, itt szalad a nyulacska"; kezd = mondat. index. Of("szalad”, 0); alert("A szó kezdő poziciója : " + kezd); mondat = mondat. concat(" ezt is tegyük hozzá") ; kisbetus = mondat. to. Lower. Case(); csere = mondat. replace("itt", "ott"); </script> </body></html>
Array objektum n Fontosabb tulajdonsága: n n length Fontosabb metódusai: n n pop() - utolsó tömbelem törlése (csak Netscape) push() - új tömbelem hozzáfűzése (csak Netscape) sort() – az angol abc szerint rendez, összehasonlító függvény join() - tömbelemek összefűzése sztringgé
Példa 1 <html><head><title>Teszt</title> </head><body> <script language="Java. Script"> Napok=new Array ("Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek"); Napok = Napok. push(”Szombat”) ; document. write("<table border bgcolor=#CCFFFF><b>"); for (i=0; i < Napok. length; ++i) { document. write("<tr><td>"+ Napok[i]+"</td><tr>"); } document. write("</td></table>"); </script> </body></html>
Példa 2 <html><head><title>Teszt</title> </head> <body> <script language="Java. Script"> lanyok = new Array("Ivett", "Éva", "Kati", "Vera", "Juli", "Berta", "Magdi"); document. write("Tánckar tagjai : " + lanyok. join(", ")+ " "); lanyok. sort(); fellepnek = lanyok. join(", "); document. write("Fellépnek : " + fellepnek + " "); function Rendez(a, b) { return a-b; } szamok = new Array(43, 37, 86, 55, 72); szamok. sort(Rendez); Lotto = szamok. join(", "); document. write("A lottó nyertes számai a következők: " + Lotto); </script> </body></html>
Többdimeziós tömbök <html><head><title>Teszt</title> <script language="Java. Script"> a = new Array(3); for (i=0; i < a. length; ++i) { a[i] = new Array(5); for (j=0; j<a[i]. length; ++j) { a[i][j]="Ez a " + i + ". tömb " + j + ". eleme"; } } for (i=0; i < a. length; ++i) { for (j=0; j<a[i]. length; ++j) { document. write( a[i][j] + " "); } } </script> </head><body> </body></html>
Date objektum n Fontosabb metódusok: n n n n n get. Time() - 1970. január 1 -től eltelt idő (numerikus érték) get. Year() get. Month() – január 0. get. Date() get. Day() - vasárnap 0. get. Hours() get. Minutes() get. Seconds() Ugyanezek léteznek set. XXX-el is
Példa <head><title>Teszt</title> <script language="Java. Script"> function Ev 2003() { most = new Date(); var x = most. get. Time() / 1000; k = new Date(2000, 0, 1, 0, 0, 0); k. set. Year(2003) ; var y = k. get. Time() / 1000; var z = Math. floor(y - x); alert("Még " + z + " másodperc a 2003. év beköszöntéig"); } </script> </head><body> <form> <input type=button value="Nyomd meg" on. Click="Ev 2003()"> </form> </body></html>
Math objektum n Fontosabb Tulajdonságok: n n n E - Euler konstans PI - PI Fontosabb Metódusok: n n floor() - Legközelebbi egész szám (lefele kerekít) random() - Véletlenszám generálás abs() - Abszolut érték round() - Kerekítés (kereskedelmi)
Példa <html><head><title>P</title> </head><body> <form name=”b”> <input type=button value="Button" on. Click="alert(Math. random())"> <input name="be"> <input name="ki"> <input type=button value="=” on. Click=”b. ki. value=Math. abs(b. be. value)"> </form> </body></html>
Window Objektum n Fontosabb metódusok: n n n n alert() - Az üzenőablakban megjelenít egy szöveget promt() - Adatbevitel számára megnyit egy üzenőablakot confirm() - Megjelenít egy megerősítést kérő üzenőablakot Igen / Nem választási lehetőséggel. close() – Bezárja az ablakot open(url, név, opciók) – Megnyit egy ablakot set. Interval() - Egy bizonyos Java. Script tevékenység ciklikus végrehajtása, pl. : függvényhívás focus() - Az ablakot aktívvá teszi blur() - Az ablakot inaktívvá teszi
Új ablak <html><head><title>Teszt</title> <script language="Java. Script"> function Hivlak() { Ujablak = window. open("fájl 2. htm", "masik", "width=300, height=200, scrollbars"); this. blur(); Ujablak. focus(); } </script> </head><body> <a href="javascript: Hivlak()">Új ablak</a> </body></html>
Időzítés Példa <html><head><title>Teszt</title> </head><body> <script language="Java. Script"> aktiv = window. set. Interval("ido()", 100); function ido() { t = new Date(); h = t. get. Hours(); m = t. get. Minutes(); s = t. get. Seconds(); a. ido. value=h+": "+m+": "+s; } </script> <form name="a"> <input type="text" name="ido" size="8"> </form> </body></html>
Document objektum n Fontosabb tulajdonságok: n n charset - A böngésző által alkalmazott karakterkészlet megadása last. Modified - Az utolsó módosítás dátuma, ideje URL - A betöltött dokumentum teljes URL címét adja vissza Fontosabb metódusok: n n n close() - Lezárja a szöveg értelmezését, a bufferban lévő adatokat kiírja és minden grafikát kirajzol write(sztring, [sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba writeln()(sztring, [sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba, melyeket soremelés követ
Példa <html> <head> <title>Teszt</title> </head> <body> <script language="Java. Script"> document. open(); document. write(document. URL); document. write(document. last. Modified); document. close(); </script> </body> </html>
Frame Objektum n n n A frame objektum segítségével elérhetjük az ablakokat parent vagy top névvel. A frame objektum a window objektum leszármazottja A framek alárendelt objektumjai is ugyanúgy viselkednek, mint a window objektumnál. Ezért, ha egy űrlap egyik mezejének tartalmára így hivatkoztunk : n n window. document. forms[0]. elements[0]. value = "János Vitéz" akkor, ha ugyanez az űrlap egy frame-ben kerül megjelenítésre, így hivatkozhatunk rá : n parent. frames[1]. document. forms[0]. elements[0]. value = "János Vitéz"
Form Objektum n Fontosabb metódusok: n n n submit() - Űrlap adatok elküldése reset() - Űrlap adatok törlése Fontosabb tulajdonságok: n n name – a neve target – a feldolgozó címe
Példa <html><head><title>Teszt</title><script language="Java. Script"> function ellenor() { if (Math. abs(a. szam. value) < 10) { alert(A számnak 10 -nél kisebbnek kell lennie!); a. reset(); return false; } else { return true; } } </script> </head><body> <form name="a" target="javascript-3. html" on. Submit="return ellenor(); "> <input type="text" name="szam" size="3"> <input type="submit" value="Elküld"> </form></body></html>
History objektum n Fontosabb metódusok: n n n back() - Visszaugrik az előző oldalra forward() - Előreugrik a következő oldalra go() - Egy bizonyos oldalra ugrik
Példa n n history. back(); window. history. go(-3); masikablak. history. forward(); parent. frames[2]. history. back();
Trükkök n Magyarázó szöveg <html><head><title>Teszt</title> </head><body> <A HREF="URL" on. Mouse. Over="window. status = 'magyarázó szöveg'; return true">kapcsolat</A> </body></html>
- Slides: 53