Fejlett Webes Technológiák 10/3. A mai előadás tartalma: CSS JavaScript.

Az előadások a következő témára: "Fejlett Webes Technológiák 10/3. A mai előadás tartalma: CSS JavaScript."— Előadás másolata:

1 Fejlett Webes Technológiák 10/3

2 A mai előadás tartalma: CSS JavaScript

3 Problémák 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

4 A CSS Előnyei 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

5 Definiálható HTML elemen belül HTML dokumentum fejrészében Külső css fájlban Több külső css fájlban

6 Érvényesítési sorrend 1. Böngésző alapértelmezett css 2. Külső css 3. Fejrész css 4. Egyes elemekben definiált

7 Definiálás Külső oldal: <link rel="stylesheet" type="text/css" href="minta.css" /> Fejrészben: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Az adott elemnél: Ez egy bekezdés

8 A CSS bejegyzés felépítése Választó Tulajdonság Érték

9 Példa Body { color:yellow } p { font-family:”sans serif” } P { text-align: center; color: black; font-family: arial } h1, h2, h3, h4, h5, h6 { color: green}

10 Hivatkozások: Class p.jobb {text-align: right} p.kozep {text-align: center} … Ez a bekezdés jobbra lesz igazítva

11 Hivatkozások: Általános.kozep {text-align: center} Középre igazítva

12 Hivatkozások: id #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }

13 Formázási lehetőségek Háttér Szöveg Betű Keretvonal Margó Listák …

14

15

16

17

18

19

20 Kliens Oldali Programozás 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) JavaScript VBScript Java Applet

21 JavaScript 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

22 JavaScript és a HTML A JavaScript kód helye: 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: Eseményre, függvényhívás (függvények esetén) Betöltéskor (ha nem függvényt írtunk)

23 JavaScript a HTML-ben <!-- program //--> Célszerű a HTML megjegyzés elemeket használni ( ) Több helyen is szerepelhet a elempár

24 Változók Típusok: Szám Szöveg Objektum Logikai Var valtozo = érték Típusa változhat Lehet lokális, globális

25 Operátorok

26 Feltételes utasítások

27 Függvények Definiálás: function fnév(argumentumok) { utasítások return visszatérési érték } Hívás: fnev(arguentumok);

28 Példa Példa <!-- var i= "Globális; function kiir(a) { var s="Lokális"; for (j=0;j<3;j++) alert(j); } //-->

29 Objektumok A JavaScript objektum 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; Asszociatív tömbként működhet Dezso["age"] = 24;

30 Beépített objektumok

31 Hivatkozások objektumnév1. objektumnév2.tulajdonság objektumnév1. objektumtípus[név].tulajdonság objektumnév1. objektumtípus[sorszám].tulajdonság

32 Eseménykezelés: onLoad betöltünk egy oldalt a böngészôbe onUnload kilépünk egy betöltött oldalról onFocusaz ûrlap valamelyik eleme a fókuszba kerül, azaz a billentyûzetrôl érkezô karaktereket fogadja onBlura fókusz elmozdul az ûrlap valamelyik elemérôl onSelect az ûrlap valamelyik bemeneti mezôjét kiválasztották onChange az ûrlap valamelyik elemének (szöveg, választás) értékét megváltoztatták onClickrákattintottak egy ûrlap elemre (pl. nyomógombra), vagy hivatkozásra onSubmitelküldenek egy ûrlapot a szerver felé (a submit gombra kattintottak) onMouseOver az egér egy hivatkozás, vagy dokumentum címke fölé kerül

33 String objektum Fontosabb tulajdonságai: length Fontosabb metódusai: indexOf() replace() toLowerCase() toUpperCase() concat()

34 Példa Teszt mondat = "Kerekecske gombocska, itt szalad a nyulacska"; kezd = mondat.indexOf("szalad”,0); alert("A szó kezdő poziciója : " + kezd); mondat = mondat.concat(" ezt is tegyük hozzá") ; kisbetus = mondat.toLowerCase(); csere = mondat.replace("itt","ott");

35 Array objektum Fontosabb tulajdonsága: length Fontosabb metódusai: 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é

36 Példa1 Teszt Napok=new Array ("Vasárnap","Hétfő","Kedd","Szerda","Csütörtök","Péntek"); Napok = Napok.push(”Szombat”) ; document.write(" "); for (i=0; i < Napok.length; ++i) { document.write(" "+ Napok[i]+" "); } document.write(" ");

37 Példa2 Teszt 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);

38 Többdimeziós tömbök Teszt 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] + " "); } }

39 Date objektum Fontosabb metódusok: getTime() - 1970. január 1-től eltelt idő (numerikus érték) getYear() getMonth() – január 0. getDate() getDay() - vasárnap 0. getHours() getMinutes() getSeconds() Ugyanezek léteznek setXXX-el is

40 Példa Teszt function Ev2003() { most = new Date(); var x = most.getTime() / 1000; k = new Date(2000,0,1,0,0,0); k.setYear(2003) ; var y = k.getTime() / 1000; var z = Math.floor(y - x); alert("Még " + z + " másodperc a 2003. év beköszöntéig"); }

41 Math objektum Fontosabb Tulajdonságok: E - Euler konstans PI - PI Fontosabb Metódusok: 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)

42 Példa P <input type=button value="=” onClick=”b.ki.value=Math.abs(b.be.value)">

43 Window Objektum Fontosabb metódusok: 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 setInterval() - Egy bizonyos JavaScript 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

44 Új ablak Teszt function Hivlak() { Ujablak = window.open("fájl2.htm","masik","width=300,height=200,scrollbars"); this.blur(); Ujablak.focus(); } Új ablak

45 Időzítés Példa Teszt aktiv = window.setInterval("ido()",100); function ido() { t = new Date(); h = t.getHours(); m = t.getMinutes(); s = t.getSeconds(); a.ido.value=h+":"+m+":"+s; }

46 Document objektum Fontosabb tulajdonságok: charset - A böngésző által alkalmazott karakterkészlet megadása lastModified - 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: 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

47 Példa Teszt document.open(); document.write(document.URL); document.write(document.lastModified); document.close();

48 Frame Objektum 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 : 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á : parent.frames[1].document.forms[0].elements[0].value = "János Vitéz"

49 Form Objektum Fontosabb metódusok: submit() - Űrlap adatok elküldése reset() - Űrlap adatok törlése Fontosabb tulajdonságok: name – a neve target – a feldolgozó címe

50 Példa Teszt 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;} }

51 History objektum Fontosabb metódusok: back() - Visszaugrik az előző oldalra forward() - Előreugrik a következő oldalra go() - Egy bizonyos oldalra ugrik

52 Példa history.back(); window.history.go(-3); masikablak.history.forward(); parent.frames[2].history.back();

53 Trükkök Magyarázó szöveg Teszt <A HREF="URL" onMouseOver="window.status = 'magyarázó szöveg'; return true">kapcsolat