Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
KiadtaAntal Lakatos Megváltozta több, mint 9 éve
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 …
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
Hasonló előadás
© 2024 SlidePlayer.hu Inc.
All rights reserved.