">

Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

JavaScript II Összeállította: Kosztyán Zsolt Tibor

Hasonló előadás


Az előadások a következő témára: "JavaScript II Összeállította: Kosztyán Zsolt Tibor"— Előadás másolata:

1 JavaScript II Összeállította: Kosztyán Zsolt Tibor

2 Űrlapok Űrlapokkal gyakran találkozunk az Interneten. Sok oldal ettől nyeri az interaktivitását. Segítségükkel a felhasználók elküldhetik véleményüket egy oldalról, feliratkozhatnak egy játék résztvevői közé, megrendelhetnek különféle tárgyakat, programokat, szolgáltatásokat a világhálón keresztül, kereséseket hajthatnak végre speciális keresőszervereken. Az űrlapokat kitöltésük után legtöbbször elküldjük a hálózaton keresztül egy szerveren lévő CGI programnak, amely feldolgozza a benne lévő adatokat. Problémát jelenthet viszont az, ha az űrlapunk hibás adatot tartalmaz. Mivel járhat ez? Elküldjük a hibás adatot a hálózaton keresztül, ezzel gyakorlatilag feleslegesen növelve a hálózati forgalmat. Ugyanakkor a szerveren lévő program sem tud mit kezdeni az adatunkkal, jobb esetben visszaküld egy hibaüzenetet, ami tájékoztatja a felhasználót, hogy hol rontotta el az űrlap kitöltését. Ezután kezdődhet az egész eljárás elölről. Ez a folyamat sok-sok másodpercet vehet igénybe, igen lassú is lehet. A JavaScript itt is segíthet nekünk. Még a kitöltés fázisában, az űrlap tényleges elküldése előtt ellenőrizhetjük, hogy helyes-e a kitöltés. Ha nem, akkor nem is engedjük meg az űrlap elküldését. Ezzel nem okozunk forgalomnövekedést a hálózaton, valamint a hibaüzenetek is rögtön megjelennek a képernyőkön, hiszen azt nem a szerveren futó program küldi vissza, hanem a gépünkön futó JavaScript program. Általában két helyen szokás az ellenőrzést elvégezni. Minden egyes űrlapelemnél, amint a felhasználó kitölti azt, az onChange, illetve elküldéskor az onSubmit eseménykezelő segítségével. A következőkben több példát is látunk, amelyekben valamilyen adat ellenőrzését végezzük el.

3 Üres mező ellenőrzése

4 cím ellenőrzése

5 Numeikus értékek bevitele

6 Telefonszám bevitele

7 Fókusz állítása űrlapmezőkre

8 Űrlapok elküldése levélben Neved? Hány éves vagy? Telefonszám ellenőrzése: Az urlap a következő címre lesz elkűldve...

11 A képek kezelése A képeket a JavaScript Image (kép) objektumán keresztül kezelhetjük. Ez az objektum a JavaScript 1.1-es verziója óta létezik, így csak az újabb böngészők, pl. Netscape Navigator 3.0-ás vagy 4.0-ás verziója (IE 4.0), vagy annál későbbi változatok ismerik és képesek kezelni. Az Image objektum segítségével megváltoztathatjuk az oldalunkon lévő képek paramétereit, illetve magát a képet is. Hogyan kezeli a JavaScript az oldalakon lévő képeket? Minden kép egy tömbön keresztül érhető el. A tömböt images- nek hívják. Az oldalon lévő képek kapnak egy sorszámot. A legelső kép a 0-ás sorszámmal rendelkezik, a második az 1- essel, és így tovább. Ha a legelső képre akarunk hívatkozni például egy JavaScript programból, akkor az a document.images[0] hivatkozáson keresztül lehetséges. Minden képet az Image objektum egy példányának tekintünk. Az Image objektum rendelkezik bizonyos tulajdonságokkal, amikhez JavaScript programból hozzáférhetünk. Ilyen tulajdonságok például:

12 A képek kezelése name - a kép neve src - a kép helye, az a cím, ahonnan betöltjük width - szélessége (képpontokban) height - magassága (képpontokban) border - keret mérete képpontokban Ezeket a tulajdonságokat kiolvashatjuk. Az első kép szélességét például a document.images[0].width adja meg képpontokban mérve. Természetesen ha neveket adunk a különböző képeknek, akkor azokkal is hivatkozhatunk rájuk. Ez megkönnyíti a programozást, ha sok képet töltünk be egy oldalra.

13 Új képek betöltése A leglátványosabb lehetőség azonban az, ha új képeket tölthetünk be az oldalunkra, illetve az oldalainkon lévő képeket kicserélhetjük újakra. Ehhez a már korábban említett src attribútum szükséges. Ha ugyanis ezt megváltoztatjuk, akkor automatikusan betöltődik az a kép, amelyet az új src attribútum meghatároz. Lássunk erre egy rövid példát! Ez a HTML-ből is ismert utasítás betölti a kep1.jpg nevű képet, miközben az "elso" nevet kapja. Ezen a néven hivatkozhatunk rá. A következő programsor kicseréli ezt a képet a kep2.jpg nevű képre. document.elso.src = "kep2.jpg";Az új kép örökli az előző méreteit, amiket nem is lehet megváltoztatni. Ha a gombra kattintunk, akkor rögtön kipróbálhatjuk a tanultakat. Azonban ennek a megoldásnak van egy szépséghibája. Ugyan a képek kicsi mérete miatt, illetve a gyors betöltésnek köszönhetően a második kép a gomb megnyomása után szinte azonnal megjelenik, de valójában van betöltési idő. Még rosszabb a helyzet, ha a második kép nagy méretű, ráadásul az Interneten keresztül, kis sávszélességű (mondjuk modemes) kapcsolatnál töltődik le. Ez a késés a legtöbb esetben elfogadhatatlan. Erre nyújt megoldást a képek előre történő betöltése.

14 Képek előre történő betöltése Hozzuk létre az Image objektum egy példányát a következő kóddal: rejtett_kep = new Image();rejtett_kep.src = "kep2.gif"; Az első sor létrehozza a rejtett_kep nevű Image objektumot. A második sor beállítja az objektum src attribútumát, gyakorlatilag meghatározza a képet és annak címét. Ez most az aktuális könyvtárban lévő kep2.jpg nevű kép. A kép gyakorlatilag ekkor már betöltődik a memóriába, de még nem jelenik meg. Ezt viszont megtehetjük azzal, hogy egy -az oldalon lévő kép- src attribútumához hozzárendeljük a rejtett_kep.src által meghatározott címet. ducoment.egy_kep.src = rejtett_kep.src; A kép a memóriában van, így azonnal megjelenik, nincs betöltési idő.

15 Felhasználói események által kiváltott képcserék Akkor érhetünk el igazán szép effektusokat az oldalainkon, ha a képekkel végzett manipulációkat felhasználói, pl. egéreseményekhez kapcsoljuk. Szinte minden szebb oldalon megjelennek olyan gombok, amelyek benyomódnak vagy más színben jelennek meg, ha az egér mutatót fölé visszük. Ezt két eseménykezelővel valósíthatjuk meg. Az onMouseOver esetén betöltjük az új képet, míg az onMouseOut eseménynél visszaállítjuk a régit.

16 Felhasználói események által kiváltott képcserék

17 Felhasználói események által kiváltott képcserék onMouseOver="mutat('link1',i2)" onMouseOut="mutat('link1',i1)">

18 Layerek használata A Netscape Navigator 4.0 egy rendkívül fontos, jól hasznosítható új tulajdonsága volt a layerek (rétegek) használatának bevezetése. Aki már dolgozott valamilyen jobb képfeldolgozó, képretusáló programmal, például az Adobe Photoshoppal, annak nem jelenthet nagy újdonságot a layerek fogalma. A layereket (rétegek) legegyszerűbben fóliáknak képzelhetjük el. Minden egyes ilyen fóliarétegnek más és más lehet a tartalma, egymástól függetlenül kezelhetjük őket. Tehetünk rá képet, szöveget, űrlapelemeket stb., majd a layereket elhelyezhetjük az oldalunkon. Az egyes rétegek egymásra is kerülhetnek, természetesen a felső rétegek takarják az alattuk levő rétegeket, de ahol az egyes rétegek átlátszóak, ott átengedik az alattuk levő rétegek tartalmát. Ezzel például könnyedén megvalósíthatunk pusztán HTML elemek használatával olyan képet, amelyre egy szöveget írunk, vagy az oldalon lévő szöveg is kerülhet takarásba valamely más objektum, például egy kép által.

19 Layerek létrehozása Layereket a illetve a HTML elemekkel készíthetünk. Az alábbi táblázat bemutatja a beállítható tulajdonságokat: A HTML elemmel az oldal tetszőleges pozíciójába elhelyezhetünk layereket. A pozíciót a left és a top attribútumok adják meg. Ezek a layer bal felső pontjának helyét határozzák meg. Amennyiben nem adunk meg ilyen értékeket, akkor az alapértelmezett pozíció az ablak bal felső sarka. Az elem a layer pozícióját nem határozza meg explicit módon, hanem a dokumentum aktuális pozíciójába helyezi el.

20 Layerek létrehozása Layer példa

21 A JavaScript és a layerek kapcsolata A layereket JavaScript-en keresztül is kezelhetjük. Ezt két módon tehetjük meg legegyszerűbben. Adjunk nevet a layernek:... Ekkor a layert elérhetjük a document.layers["layer_neve"] ill. a document.layer_neve hivatkozásokkal. Elérhetjük a layereket a korábbiakban már megismert indexes módszerrel is, bár ennek használata nem túl kényelmes. A legalsó layert a document.layers[0] hivatkozással érhetjük el. A következőt a document.layers[1] néven és így tovább. Vegyük észre, hogy ezen indexelés nem egyezik meg a z-indexeléssel!

22 A JavaScript és a layerek kapcsolata Ez a szöveg a layer része...

23 Mozgó rétegek A layerek left és top attribútumaihoz is rendelhetünk új értékeket JavaScript segítségével. Hatására layerünk új helyen jelenik meg. Például a következő sor 150-re állítja a layer vízszintes pozícióját: document.layers["layer_neve"].left = 150; Ha egy olyan programot írunk, amely folyamatosan változtatja ezeket az értékeket, akkor egyszerű animációt készíthetünk.

24 Mozgó rétegek Layer példa

26 Vágás Minden layernek kijelölhetünk egy téglalap alakú részét úgy, hogy a layerből csak ez a rész lesz látható. Ezt a műveletet nevezzük vágásnak. Az alábbi egyszerű példában egy kép részét vágjuk ki az HTML elem CLIP attribútumának segítségével. Természetesen a elem is rendelkezik ezzel az attribútummal. Kivágtuk a képet tartalmazó layer (70,90) x (210,260) méretű részét. A CLIP attribútummal a kivágandó téglalap bal felső és jobb alsó csúcsainak koordinátáit definiálhatjuk. Természetesen sokkal látványosabb effektusok készíthetők a kivágásnak és a JavaScriptnek a kombinációjával. A kivágás mezőjét JavaScript-tel is módosíthatjuk, mégpedig úgy, hogy módosítjuk a layer objektum clip.left, clip.top, clip.right, clip.bottom mezőit. Ha új értékeket írunk ezekbe a mezőkbe, akkor a kivágás területe is módosulni fog. A következő példa a kivágás tartományának módosításával ér el egy egyszerű hatást:

27 Vágás 1. LAYER 2. LAYER

31 A "sütik" Mire jók ezek? Tudjuk, hogy a HyperText Transfer Protocoll-t (HTTP) nem alkalmas arra, hogy kapcsolatot teremtsen két felhasználói (kliens) kérés között. Tegyük fel például, hogy egy olyan oldalt szeretnénk készíteni, amely felismeri azt, hogy ha valaki már nem az első alkalommal látogatja meg, és ismerve azt, hogy előzőleg milyen témákat tartalmazó oldalakat járt be az illető, most máshová küldi. A sütik segítségével adatokat tárolhatunk a felhasználó gépén. Persze nem kell megijedni, ezek lényegében veszélytelen információk, mégpedig a cookies.txt állományban megjelenő szöveges bejegyzések. Formátumuk a következő: név=érték;expires=dátum;

32 A "sütik" Először megadjuk az adat nevét, majd az egyenlőség másik oldalán az adat értéke áll. Ha a név ill. az érték tartalmaz vessző, pontosvessző vagy szóköz karaktereket, akkor az escape() függvényt kell felhasználni, hogy megfelelő formában kódoljuk, és az unescape() függvényt, hogy visszakódolhassuk. Az expires mező tartalmazza az érvényesség dátumát. A dátumot GMT formátumban kell megadni, amely a következő: Nap, NN-HHH-ÉÉ ÓÓ:PP:MP GMT Például: Wed, 12- Mar-98 12:23:45 GMT Ez március 12-ét, egy szerdai napot (Wed) ad meg, egészen pontosan 12 óra 23 perc 45 másodpercet. Egyszerűbben úgy adhatunk meg ilyen formátumú időt. hogy a Date által visszaadott dátumot a toGMTString() függvénnyel ilyen formátumúra hozzuk.

33 A "sütik" Megszorítások 1.A "sütikre" az alábbi korlátozások érvényesek: 2.legfeljebb 300 ilyen bejegyzés lehet a cookies.txt file-ban 3.egy bejegyzés mérete legfeljebb 4Kb 4.Szerverenként vagy domain-enként legfeljebb 20 "süti" lehet A "sütik" és a JavaScript A dokument objektum cookies mezője egy sztring, amely tartalmazza a Netscape Navigator összes bejegyzését, ami a cookies.txt állományban található. 1.A "sütikkel" a következőket tehetjük: 2.beállíthatjuk az értékét illetve az érvényességi idejét 3.megkaphatjuk az értékét a megadott nevű "sütinek"

34 A "sütik" A Netscape dokumentációja a következő függvényeket javasolja ezen műveletek elvégézséhez: 1. az érték és az opcionális érvényességi idő beállítása: function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))} A függvény működése rendkívül egyszerű. Paraméterként adjuk át a cookie nevét, értékét, érvényességi dátumát. A függvény a name (név) paraméternek olyan sztringet vár, amelyben nincs az előzőekben említett speciális karakter. A value sztringet kódoljuk az escape() függvénnyel, hogy a sztringben lévő pontosvesszők, vesszők, szóközök helyesen kerüljenek tárolásra, majd hozzáfűzzük a name sztringhez. Ha nem adtunk meg dátumot (azaz a paraméter értéke null), akkor egy üres sztringet, ellenkező esetben a toGMTString() függvénnyel GMT formátumra hozott sztringet fűzzük az előzőekhez.

35 A "sütik" 2. adott nevű cookie értékének visszaadása function getCookie(Name){ var search = Name + "="; if (document.cookie.length > 0){ // megvizsgáljuk, hogy vannak-e cookie-k offset = document.cookie.indexOf(search);// ha igen, megkeressük az adott nevű elejét if (offset != -1){ // ha van ilyen akkor: offset += search.length; end = document.cookie.indexOf(";", offset); // az end egyenlő a vizsgált cookie végét lezáró ; helyével if (end == -1) end = document.cookie.length; // ha nincs pontosvessző akkor end egyenlő a cookie sztring hosszával return unescape(document.cookie.substring(offset, end)); } }}

36 Példa a "süti" használatára

37 Példa a "süti" használatára

38 Köszönöm a figyelmet!

39 Felhasznált irodalom bp.sulinet.hu/seged/javas.ziphttp://www.egressy- bp.sulinet.hu/seged/javas.zip


Letölteni ppt "JavaScript II Összeállította: Kosztyán Zsolt Tibor"

Hasonló előadás


Google Hirdetések