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">  </SCRIPT> <script language="Java. Script" src="kulso. js" type="text/javascript"> </script> n n Célszerű a HTML megjegyzés elemeket használni ( ) 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>