javascript - fzolee.hu zunk és azt a böngészo értelmezi és hajtja végre (ellentétben pl. a...

JavaScript

KSZK, WebProjekt

KIR-dev team

<Webtanfolyam/>

eloadó:Domonkos Balázs,[email protected]

2005. tavasz

TARTALOMJEGYZÉK

Ábrák jegyzéke

1. JavaScript Hello World! példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32. Mozilla FireFox JavaScript konzol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53. A JavaScript objektumtípusainak hierachiája . . . . . . . . . . . . . . . . . . . . . . . . . 114. A leggyakrabban használt böngészok 2004 januártól 2005. márciusig . . . . . . . . . . . . 125. A leggyakrabban használt böngészok 2005. márciusában . . . . . . . . . . . . . . . . . . 12

Tartalomjegyzék

1. Mi ez? mire jó? 31.1. Helye a HTML és Java között . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2. Története . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3. Mire használjuk? Mire ne használjuk? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2. JS alapok, szintaktika 42.1. Beágyazás HTML-be . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2. Hibajelzés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3. A nyelv alapjai röviden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3.1. Változók . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3.2. Adattípusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.3. Speciális konstansok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.4. Függvények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.5. Objektumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.6. Sztring muveletek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4. Eseménykezelés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.4.1. Letöltés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.4.2. Ablak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4.3. Egér . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4.4. Billentyuzet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.4.5. Urlap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.4.6. Kép . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.5. Beépített objektumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3. Böngészo-különbségek 103.1. Böngészo lekérdezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.2. Böngészo specifikus elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4. Document Object Model (DOM) 134.1. A DOM története . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.2. Mit tartalmaznak az egyes DOM szintek? . . . . . . . . . . . . . . . . . . . . . . . . . . 144.3. DHTML micro API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

A. Fogalmak 18

B. Web 18

C. Példák 19

2

1. Mi ez? mire jó?

Mielott bármibe belevágnánk, alapveto HTML ismeretek birtokában érdemes elolvasni az alábbi példaforrását:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<HTML><HEAD>

<TITLE>JavaScript Hello World!</TITLE></HEAD><BODY>

<P><A href="jsexample02.html" onClick="return confirm(’Valóban törli sz oröstül-b oröstül az egész webáruházat?’)">Webáruház törlése</A></P>

</BODY></HTML>

1. ábra. JavaScript Hello World! példa

A példa érzékelteti, mire is jó a JavaScript, hogyan egészíti ki a HTML statikus dokumentum funkci-onalitásait. A linkre kattintva megerosíto ablak ugrik fel és csak az OK gomb megnyomása után navigál aböngészo a törlést végzo oldalra.

Ilyen megerosítés pure-HTML-ben csak megerosíto HTML oldal közbeiktatásával volna lehetséges,ami nehézkes, körülményes megoldás, nem is beszélve arról, hogy lassabb megoldás, mivel a közbülsooldalt külön le kell tölteni a szerverrol.

1.1. Helye a HTML és Java között

A JavaScript, ahogy a neve is mutatja script-nyelv, amelyet közvetlenül a HTML oldal forrásába ágya-zunk és azt a böngészo értelmezi és hajtja végre (ellentétben pl. a Javával, ahol a köztes kódú (byte-code)programot a Java Virtuális gép futtatja). A Java/JavaScript megjelenése elott (a HTML 2.0 és 3.0 ajánlásokidején) nem volt lehetoség lényeges mértéku kliens oldali interaktivitásra.

1.2. Története

JavaScript 1.0 1995 vége: „LiveScript”: a Netscape „LiveWire” projektjének elnevezésébol. A cél a We-ben egy teljes, programozható környezet létrehozása volt. A LiveScript és a Java ötvözésébol alakultki a JavaScript, melyet eloször a Netscape Navigator 2.0- ban implementáltak. Microsoft Interne-tExplorer 3.0 (JScript, gyakorlatilag megegyezik a JavaScript 1.0)

JavaScript 1.1 NN 3.0, IE 4.0

3

2 JS ALAPOK, SZINTAKTIKA

JavaScript 1.2 NN 4.0

JavaScript 1.3 NN 4.06 (ECMAScript). Az ECMAScriptet a JavaScript és JScriptre támaszkodva hoztáklétre, elso verzió 1997.

ECMA-262 3. kiadás NN 6.0: JavaScript 1.5, IE 5.5, 6.0: JScript 5.6

1.3. Mire használjuk? Mire ne használjuk?

Mire használjuk?

• HTML urlap mezoinek ellenorzése elküldés elott

• A felhasználó akcióira vonatkozó válaszlépések (eseményvezérelt módon)

• HTML oldal „futási idoben” (kliens oldalon) történo generálása

• Látványos csilli-villi

• Urlapok helyi feldolgozása

Mire ne használjuk, illetve mire készüljünk fel?

• Mindig ellenorizzük a küldött urlapadatokat szerver oldalon !!!

• A JavaScript csak elvileg platformfüggetlen. Gyakorlatilag szinte minden böngészo olvasata közöttvannak kisebb-nagyobb eltérések. (Ma már szerencsére mondhatni minden grafikus böngészo támo-gatja a JavaScriptet valamilyen módon).

Ezért:

• Csak ott használjunk JavaScriptet, ahol feltétlenül szükséges

• Ha használjuk, teszteljük minél több böngészovel, de legalább a legelterjettebbekkel (MS Explorer,Mozilla, Opera).

• Mindig fel kell tételeznünk, hogy a szkriptünk nem fog lefutni helyesen, ezért ha csak tehetjük stati-kus HTML-lel is biztosítanunk kell a funkciót (pl új ablak nyitása esetén legyen link is).

• a keresorobotok nem foglalkoznak a szkriptünkkel, ezért nem is fogják megtalálni azokat az(al)oldalainkat, amelyek csak szkripten keresztül érhetok el.

2. JS alapok, szintaktika

2.1. Beágyazás HTML-be

A beágyazott szkript kódja a<script></script> tagek között adható meg szinte bár-hol a dokumentumban. Fejlécbe (<head></head> ) célszeru az inicializáló utasításokat, a törzsbe(<body></body> ) csak akkor, olyan objektumokhoz akarunk hozzáférni, ami a statikus HTML értel-mezése során jönnek létre vagy dinamikusan akarunk tartalmat generálni. Egy oldalon több program islehet, ezeket sorban hajtja végre a böngészo. A függvénydefiníciókon (ld. késobb) kívüli utasítások köz-vetlenül a</script> tag beolvasása után lefutnak.

A script tag részletesen:

<script type="MIME type" src="URL"></script>

4

2.2 Hibajelzés

A MIME type alapértelmezés szerint text/javascript (lehet még VBScript(text/vbscript ) is. A régebbi HTML verziókban atype attribútum helyett alanguage att-ribútumot alkalmazták. A validitás érdekében érdemes az elobbit használni. Az URL-ben megadható,hogy a script nem a forrásban található, hanem külön állományból kell betölteni (ilyet a fejlécben szokásmegadni).

Javascript kód megadható a HTML tagek ún. eseménykezelo attribútumai értékeiként. Ilyen eseményekpl az oldal teljes letöltodésekor (onLoad ), objektumra történo kattintáskor (onClick ), urlap mezojénekmegváltozásakor (onChange ) generálódnak. Ilyet alkalmaztunk például a bevezeto hello world példájá-ban.

Link URLjeként is megadhatunk JavaScript kifejezést (ld. 2.1.). Pl.:

<a href="javascript:void(valami())">link, ami akár egy kép is lehet</a>

(Másképp nem is oldható meg „szabványosan” a képre kattintás lekezelése. AzonClick képekre csakExplorerek alatt muködik biztonsággal. A void konverzió a kimenet elnyomására kell.)

2.2. Hibajelzés

Böngészonkként eltéro. Általában a státuszsorban figyelmeztetés jelenik meg, amire kattintva bovebbleírást kapunk. Mozilla FireFox böngészo alatt az oldalon elhelyezett szkriptre vonatkozó hibák, figyal-meztetések, üzenetek a JavaScript konzolon olvashatók (Eszközök | JavaScrtip konzol).

2. ábra. Mozilla FireFox JavaScript konzol

2.3. A nyelv alapjai röviden

Just like Java just like C++ just like C. Csak a különbséget ismertetem.

2.3.1. Változók

A var kulcsszóval definiálhatunk egy vagy több új változót, a láthatóság szempontjából beszélünkglobálisés lokális változókról. Avar elhagyható, ha értéket adunk meg, azonban avar nélkül definiáltváltozók mindig globális változók lesznek. Pl.:

<script type="text/javascript">var myVar = "Global variable";

function Test() {var myVar = "Local variable";

document.writeln(myVar); // localdocument.writeln(this.myVar); // global}</script>

5


2.3.2. Adattípusok

Nem szükséges deklarációkor megadni adattípust. Ha típuskonverzióra van szükség, akkor ez automa-tikusan végrehajtódik. Ha egy kifejezés numerikus és sztring típusú tagokat is tartalmaz akkor a numerikusértéket sztring típusúvá alakítja. Pl.:

var a = "1";var b = 2;

document.writeln(a + b);document.writeln(b + a);

A kimenet12 21 lesz.

2.3.3. Speciális konstansok

• null érték hiányát reprezentálja (numerikus kontextusban0, logikaibanfalse )

• undefined azon változók értéke, amelyeket még nem definiáltunk. Numerikus változüként történofelhasználásuk futási hibát okoz. Ezzel szemben az inicializálatlan tömbelemek tesztelésefalseeredményt ad.

2.3.4. Függvények

A függvénydefinicíó szintaxisa:

function függvénynév (paraméterek, ...){

Utasítások ...}

Egy külön tömbben is elérhetjük az átadadott argumentumokat (függvénynév.arguments ), ígypéldául változó hosszú paraméterlistát is megvalósíthatunk.

2.3.5. Objektumok

Saját objektumtípus is definiálható, de ennek nincs túl nagy gyakorlati jelentossége. Új példány létre-hozása anew operátorral történik. Pl.:

image1 = new Image();

A for..in ciklus szolgál az objektum összes elemváltozóján történo végiglépdelésre.A with kulcsszóval alapértelmetté lehet nyílvánítani egy objektumot az adott utasításblokkban. Pl.:

with(Math){document.writeln(PI);document.writeln(sin(0.5));

}

Az elemváltózók és a tömbök JavaScriptben szorosan kapcsolódnak egymáshoz, ugyanannak az adat-struktúrának más megjelenési formái. Pl.:

kocsim.gyarto = "Ford";kocsim["gyarto"] = "Ford";

Asszociatív tömbök létrehozása:

6

2.3 A nyelv alapjai röviden

var ujKocsi = {gyarto:"Ford",szin:"piros",motor: {

henger:4,terf:2.2

}};

2.3.6. Sztring muveletek

A Javához hasonlóan a+ és+= a sztringkonkatenálás operátora. Sztring kifejezés megadható egyszeres(’ ) és dupla idézojelben (" ) is.

Szám típusról sztring típusra atoString függvény segítségével lehet konvertálni. Pl.:

var c = (16 * 24)/49 + 12;d = c.toString();

Sztringrol szám típusra1-gyel való szorzással lehet áttérni. FUGYULIM! Felszólít! A PHP-ben meg-szokott+0 itt nem célravezeto, mivel azt konkatenálja a sztringhez. Pl.:

Jó (d == 1234 ):

var c = ’1234’;d = c * 1;

Rossz (d == ’12340’ ):

var c = ’1234’;d = c + 0;

A sztring hossza a.length metódus segítségével kérdezheto le. Pl.:

var c = ’Hello world!’.length;

Részsztring keresése. Pl.:

var a = ’Hello world!’;document.writeln(a.indexOf(’o’))document.writeln(a.lastIndexOf(’o’))

Adott karakterpozíció (Az elso karakter indexe 0). Pl.:

var b = ’I am a JavaScript hacker.’document.writeln(b.charAt(5))

Feldarabolás adott karakterek mentén. Pl.:

var b = ’I am a JavaScript hacker.’var temp = new Array();temp = b.split(’ ’);

Az eredmény:

temp[0] = ’I’;temp[1] = ’am’;temp[2] = ’a’;temp[3] = ’JavaScript’;temp[4] = ’hacker.’;

7


Réssztring képzése a .substring(first_index,last_index) vagy a.substr(first_index,length) metódussal történik. Pl.:

var a = ’Hello world!’;document.writeln(a.substring(4,8));document.writeln(a.substr(4,8));

Az eredmény:

’o wo’’o world!’

Kisbetus/nagybetus átalakítás:

var b = ’I am a JavaScript hacker.’;document.writeln(b.toUpperCase());document.writeln(b.toLowerCase());

2.4. Eseménykezelés

A JavaScript fontos felhasználási területe a felhasználó interakcióira történo válaszlépések leprogra-mozására. Adódik, hogy mindez ún. eseményvezérelt vezérlési szerkezettel történik. Az eseményvezérléslényege, hogy a program folyamatosan egy várakozó ciklusban fut, amíg valamilyen felhasználói vagybelso (pl. idozítés) esemény be nem következik. Ekkor lefut az adott eseményhez tartozó eseménykezelorutin, majd a program a várakozó ciklusban folytatódik a következo esemény bekövetkeztéig.

JavaScriptben a különbözo tagekhez kapcsolódó eseménykezelo függvényket a tagekon kezdetu attri-bútumaiban adhatjuk meg (betartva a attribútumértékekre vonatkozó HTML ill. XHTML eloírásokat).

Pl.:


<HTML><HEAD>

<TITLE>JavaScript Hello World!</TITLE></HEAD><BODY onLoad="alert(’Az oldal letölt odött.’)">

<P onDblClick="alert(’Köszi.’)">Kattints ide duplán!</P></BODY>

</HTML>

Az alábbiakban összefoglalom a különbözo eseménykategóriák eseményeit. Az alkalmazhatóság osz-lopában a kisbetus szó JavaScript objektumot, a csupa nagybetus HTML tagek jelöl.

2.4.1. Letöltés

esemény eseménykezelo bekövetkezik alkalmazhatóerror onError dokumentum vagy

kép letöltése hibátokoz

window, IMG

load onLoad a böngészo befejeztea dokumentum (vagyvalamennyi frame)letöltését

IMG, window

unload onUnload a felhasználó „kilép”a dokumentumból

window

8

2.4 Eseménykezelés

2.4.2. Ablak

esemény eseménykezelo bekövetkezik alkalmazhatómove onMove a felhasználó moz-

gatja az ablakotwindow

resize onResize a felhasználó átmére-tezi az ablakot

window

2.4.3. Egér

esemény eseménykezelo bekövetkezik alkalmazhatóclick onClick a felhasználó egy

urlapelemre vagylinkre kattint

Button, document,Checkbox, Link,Radio, Radio, Reset,Submit

doubleclick onDblClick a felhasználó egyurlapelemre vagylinkre duplán kattint

document, Link

dragdrop onDragDrop a felhasználó egy ob-jektumot húz az ab-lakra

window

mousedown onMouseDown a felhasználó le-nyomta az egérgombját

Button, document,Link

mousemove onMouseMove a felhasználó moz-gatja az egeret

Alapértelmezés sze-rint egyetlen objek-tumhoz sem tartozik

mouseout onMouseOut az egérkurzor el-hagyta az objektumfeletti területet

Link

mouseover onMouseOver az egérkurzor el-hagyta az objektumfeletti területre került

Link

mouseup onMouseUp a felhasználó felen-gedi az egér gombját

Button, document,Link

2.4.4. Billentyuzet

esemény eseménykezelo bekövetkezik alkalmazhatókeydown onKeyDown a felhasználó lenyom

egy billentyutdocument, IMG,Link, Textarea

keypress onKeyPress a felhasználó lenyomvagy nyomva tart egybillentyut

document, IMG,Link, Textarea

keyup onKeyUp a felhasználó felen-ged egy billentyut

document, IMG,Link, Textarea

9

3 BÖNGÉSZO-KÜLÖNBSÉGEK

2.4.5. Urlap

esemény eseménykezelo bekövetkezik alkalmazhatóblur onBlur az urlapelem elveszti

a fókusztButton, Checkbox,FileUpload, Pass-word, Radio, Reset,Select, Submit, Text,Textarea, window

change onChange az urlapelem tar-talma megváltozik

FileUpload, Select,Text, Textarea

focus onFocus az urlapelem kivá-lasztódik

Button, Checkbox,FileUpload, Pass-word, Radio, Reset,Select, Submit, Text,Textarea, window

reset onReset az urlap inicializáló-dik

FORM

select onSelect a felhasználó egyszövegbeviteli me-zoben kijelöl egyszöveget

Text, Textarea

submit onSubmit az urlapot elküldi afelhasználó

FORM

2.4.6. Kép

esemény eseménykezelo bekövetkezik alkalmazhatóabort onAbort a felhasználó meg-

szakítja egy kép be-töltését

IMG

2.5. Beépített objektumok

Az ábrán látható a JavaScript objektumtípusainak hierachiája. Ezen kívül fontos beépített objektumokmég:Array , Date , Math , String .

Néhány objektumot (pl.Date , Math ) a JavaScript interpreter eleve elér, mások HTML tageket jelöl-nek, ezeket nevükön kell neveznünk, hogy JavaScriptbol elérhessükoket. Pl.:

<input name="mezoNev" size="20">

Ezeknek az objektumoknak az elemváltozóit elérhetjük, olvashatjuk, írhatjuk. (A verb|document| aBODYtagnek felel meg.)

3. Böngészo-különbségek

Az alábbi tanácsokat érdemes betartani:

• Érdemes „szabványos JavaScriptet” használni.

• A böngészofejlesztok keresztbe-szivatták egymást az inkompatibilis megoldásokkal, és ennek a web-fejlesztok isszák meg a levét (és ez nem csak a JavaScriptre vonatkozik).

• Ha szükség van böngészospecifikus elemfüggvények használatára, akkor érdemes a szkriptet többböngészo szájaízére felkészíteni.

• a W3Schools 2005. januárjára vonatkozó statisztikái alapján a böngészok 11

10

3.1 Böngészo lekérdezése

Window

Frame

Document

Location

History

Link

Image

Area

Anchor

Applet

Form

Textarea

FileUpload

Password

Hidden

Submit

Reset

Radio

Checkbox

Button

Select Option

navigator

Plugin

MimeType

3. ábra. A JavaScript objektumtípusainak hierachiája

3.1. Böngészo lekérdezése

// A böngész o kódnevevar browserCodeName = navigator.appCodeName;// A böngész o nevevar browserName = navigator.appName;// A böngész o verziójavar browserVersion = parseInt(navigator.appVersion);// A useragentvar userAgent = navigator.userAgent;// A böngész o platformjavar platform = navigator.platform;

Például linuxos Mozilla Firefox alatt az eredmény:

A böngész o kódneve: MozillaA böngész o neve: NetscapeA böngész o verziója: 5A useragent: Mozilla/5.0 (X11; U; Linux i686; hu-HU; rv:1.7.6)

11

3 BÖNGÉSZO-KÜLÖNBSÉGEK

Gecko/20050325 Firefox/1.0.2 (Debian package 1.0.2-1)A böngész o platformja: Linux i686

Illetve windows-os Explorer alatt:

A böngész o kódneve: MozillaA böngész o neve: Microsoft Internet ExplorerA böngész o verziója: 4A useragent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2;.NET CLR 1.1.4322)A böngész o platformja: Win32

Kézenfekvo megoldás lenne a böngész neve és verziószáma alapján elágaztatni a JavaScript kódunkatés az adott böngészore optimalizált kódot futtani.

A W3C az alábbi statisztikákat gyujtötte az utóbbi hónapokban a világszerte használt böngészok gya-koriságáról (4. és 5. ábra)

4. ábra. A leggyakrabban használt böngészok 2004 januártól 2005. márciusig

IE 6 IE 5 Opera 7/8 Firefox Mozilla NN 4 NN 763.8% 3.9% 1.8% 21.8% 3.7% 0.2% 1.0%

5. ábra. A leggyakrabban használt böngészok 2005. márciusában

Láthatóan napjainkban IE 6 és Firefox alá érdemes optimalizálni. A böngészo ilyen lekérdezését még-sem szokták alkalmazni, hanem a böngészoket osztályokba sorolják (browser sniffer) az alapján, hogymilyen JavaScript megoldásokat használnak.

A Dynamic Drive JavaScripttel foglalkozó weboldal IE 4+, NS 4, NS 6 kategóriába sorolja a szkripteketmuködésük alapján. [5]

A dynamicdrive.com -on található browser sniffer1 osztályai:

1a sniffert kiegészítettem néhány osztállyal

12

3.2 Böngészo specifikus elemek

változó leírásie Internet Explorer 4+ és IE alapú third-party böngészokie4 . . . Internet Explorer 4ie5 . . . Internet Explorer 5 - 6ie6 . . . Internet Explorer 6ns Netscapens4 Netscape 4ns6 Gecko és KDE-alapú böngészok – Netscape 6 - 7, Mozilla, Konqueror, Safarins7 . . . Netscape 7mz7 . . . minden Gecko alapú böngészo, kivéve a Netscape 7kde . . . Konqueror, KDE 2.2-tolsaf . . . Safariop Operaop5 Opera 5op6 Opera 6op7 Opera 7+nsorop Netscape vagy Operaexclude azonosítatlan böngészo

3.2. Böngészo specifikus elemek

Az oldal nettó méreteinek lekérdezése (szegély, gördítosáv nélkül):

if(ns || op) {doc_width = self.innerWidth;doc_height = self.innerHeight;} else if(ie) {doc_width = document.body.clientWidth;doc_height = document.body.clientHeight;} else {doc_width = 0;doc_height = 0;}

További böngészospecifikus elérés szükséges az ún. DOM alkalmazásához.[3] [4] [2]

4. Document Object Model (DOM)

A Document Object Model (DOM)egy olyan modell, amely leírja, hogy a HTML dokumentumegyes elemei (bekezdések, beviteli mezok, képek) hogyan viszonyulnak a legfelso szintu strukturához:adocument objektumhoz.

A DOM-on keresztül módosíthatuk, törölhetjük az elemeket, ill. új elemeket hozhatunk létre.

4.1. A DOM története

A DOM-nak három történeti szintje van:

1. A Level 0 DOM (Nulladszintu DOM)a Netscape 2 böngészoben jelent meg.

2. A Netscape 4 és Explorer 4 két eltéro ún.Intermediate DOM-ot támogatott.

3. A Level 1 DOM (Elsoszintu DOM)másnévenW3C DOMa Mozillában és az Explorer 5-ben lettbevezetve

Ebben a segédletben az elso két szint vázlatos ismertetése történik meg.

13

4 DOCUMENT OBJECT MODEL (DOM)

4.2. Mit tartalmaznak az egyes DOM szintek?

Level 0 DOM

Ez a DOM szint a Netscape 2-ben a JavaScripttel egyszerre jelent meg. Néhány HTML elem (fokénturlap elemek és késobb képek) elérésére találták ki. Az Explorer 3-ban majd a többi böngészoben ugyanezta DOM-ot írták meg, így a DOM 0 szintegységes.

Urlap példa:

<FORM NAME="loginform" action="http://webtanfolyam.sch.bme.hu">Loginnév: <INPUT name="loginname"><BR>Jelszó: <INPUT name="passwd" type="password"><BR><INPUT type="submit" value="mehet" onClick="return check()">

</FORM>

...

function check(){var has_loginname = document.forms[’loginform’].elements

[’loginname’].value.length != 0;var has_passwd = document.forms[’loginform’].elements

[’passwd’].value.length != 0;

if(!has_loginname && !has_passwd) {alert("A loginnév és a jelszó mez o nincs kitöltve!");return false;

} else if(!has_loginname) {alert("A loginnév mez o nincs kitöltve!");return false;

} else if(!has_passwd) {alert("A jelszó mez o nincs kitöltve!");return false;

}

return true;}

Kép példa:

<IMG alt="kep" id="tobechanged" src="suni.jpg"onMouseOver="rabbit()" onMouseOut="suni()">

...

function rabbit() {document.images[’tobechanged’].src = ’rabbit.jpg’;

}

function suni() {document.images[’tobechanged’].src = ’suni.jpg’;

}

14

4.2 Mit tartalmaznak az egyes DOM szintek?

Intermediate DOM-ok

A 4-es verziószámú böngészok jelentették a DHTML2 hajnalát. Ehhez a dokumentum minden részéhezhozzáférést kellett biztosítani. A Netscape layer-filozófiája miatt adocument.layers -ön keresztül, aMicrosoft megalomán törekvéseinek megfeleloen adocument.all -on át éri el az egyes objektumokat.

<DIV ID="tobechanged">Ezt kell<a href="javascript:eltuntet()">elrejteni...</a></DIV>

...

if(document.layers) {document.layers[’tobechanged’].visibility = ’hidden’;} else if(document.all) {document.all[’tobechanged’].style.visibility = ’hidden’;}

Level 1 DOM

A W3C hozta létre XML dokumentumok „on the fly” módosítására, de HTML dokumentumokra isalkalmas. Ezt az 5-ös verziójú böngészok támogatták.

• a Microsoft úgy döntött, hogy három DOM-ot támogat (Level 0 DOM,document.all , W3CDOM),

• a Mozilla fejleszoi úgy döntöttek, hogy nem támogatják a Netscape 4 nehézkesdocument.layers struktúráját, csak az új Level 1 DOM-ot.

A Level 1 DOM részletes ismertetését itt nem teszem meg. Ízelítoül:

x.parentNodex.childNodes[1]

document.firstChild.firstChild.lastChilddocument.firstChild.childNodes[0].lastChilddocument.firstChild.childNodes[0].childNodes[1]

document.getElementsByTagName(’B’)[0]document.getElementById(’hereweare’)

document.getElementById(’hereweare’).firstChild.nodeValue=’bold bit of text’

A legfontosabb az útóbbi metódus (document.getElementById ). A Level 1 DOM részletes is-merete nélkül ennek segítségével használhatjuk a Mozilla típusú böngészokön az Intermediate DOM-ot.Így az elozo példa:


...

if(document.layers) {

2Dinamikus HTML. A dinamikusságnak többféle olvasata van. Néha ide sorolják a CSS-t is. Ez a jegyzet úgy tárgyalja a DHTML-t, mint olyan HTML oldal, amely újratöltés nélkül változtatja szerkezetét, interaktivitást mutat

15

4 DOCUMENT OBJECT MODEL (DOM)

document.layers[’tobechanged’].visibility = ’hidden’;} else if(document.all) {

document.all[’tobechanged’].style.visibility = ’hidden’;} else if(document.getElementById) {

document.getElementById(’tobechanged’).style.visibility = ’hidden’;

}

4.3. DHTML micro API

A Peter-Paul Koch által írtHTML micro API, az egységes Intermediate DOM elérésre:

function getObj(name){

if (document.getElementById){

this.obj = document.getElementById(name);this.style = document.getElementById(name).style;

}else if (document.all){

this.obj = document.all[name];this.style = document.all[name].style;

}else if (document.layers){

this.obj = document.layers[name];this.style = document.layers[name];

}}

Az elobbi példa a DHTML micro API segítségével:

function eltuntet() {var obj = new getObj(’tobechanged’);obj.style.visibility = ’hidden’;

}

[6]

16

HIVATKOZÁSOK

Hivatkozások

[1] Domonkos Balázs. Javascript eloadás.2004 Nyári KIR fejlesztoi tábor, 2004.

[2] World Wide Web Consortium. Browser statistics.W3 Schools, 2005.

[3] Netscape Communications Corporation. Determining browser vendor, version, and operating systemwith javascript.The Ultimate JavaScript Client Sniffer, Version 3.03, 1999-2001.

[4] Dynamic Drive. Browser sniffer script (version 1.1).DHTML scripts for the real world, 1998-2005.

[5] Dynamic Drive. Dhtml scripts for the real world. 1998-2005.

[6] Peter-Paul Koch. Quirksmode, personal and professional site of peter-paul koch.

[7] The Web Standards Project. Dom, platform issues and cross-browser dhtml.

17

B WEB

A. Fogalmak

WWW World Wide Web

W3C World Wide Web Consortium

HTML HyperText Markup Language

tag jelölo, címke, elem, SGML nyelvi elem, a dokumentum alapveto struktúrájának leírására alkalmas

attribútum egytag tulajdonságát megadó nyelvi elem, melyattribútum-névbolésattribútum-értékboláll

tartalom egy tag-hez tartozó szöveges tartalom vagy gyermek tagjei; amelyik tagnek nincs tartalma aztüres tagneknevezik

dokumentum fa a dokumentumot felépíto tagek áltál meghatározott fa (pontosabban nem fa, mert azelemek sorrendje is számít). Minden tagnek pontosan egy szülotag-je van a gyökérelemet kivéve,mert annak nincs szüloje.

felhasználó az az egyed (személy, robot, stb), amely az oldalt megtekinti

user agent (UA) azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelení-tett tartalmat eloállítja (pl. böngészo).

B. Web

• The Ultimate JavaScript Client Sniffer, Version 3.03: Determining Browser Vendor, Version, andOperating System With JavaScripthttp://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

• W3 Schools: Browser Statisticshttp://www.w3schools.com/browsers/browsers_stats.asp

• Dynamic Drive: DHTML scripts for the real worldhttp://dynamicdrive.com/

• Web Standardshttp://www.webstandards.org/

• QuirksModehttp://www.quirksmode.org/js/

18

C. Példák

jsexample01.html


<HTML><HEAD>

<TITLE>JavaScript Hello World!</TITLE></HEAD><BODY>

<P><A href="jsexample02.html" onClick="returnconfirm(’Valóban törli sz oröstül-b oröstül az egészwebáruházat?’)">Webáruház törlése</A></P>

</BODY></HTML>

jsexample02.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript"></SCRIPT>

</HEAD><BODY>

<P><SCRIPT type="text/javascript"></SCRIPT>

</P></BODY>

</HTML>

jsexample03.html


<HTML><HEAD>

19

C PÉLDÁK

<TITLE>JavaScript</TITLE></HEAD><BODY onLoad="alert(’Az oldal letölt odött.’)">

<P onDblClick="alert(’Köszi.’)">Kattints ide duplán!</P></BODY>

</HTML>

jsexample04.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE></HEAD><BODY>

<P><CODE><SCRIPT type="text/javascript"></SCRIPT>

</CODE></P></BODY>

</HTML>

jsexample05.html

Csak file-ban..

jsexample06.html


20

<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT>

</HEAD><BODY>

<P><CODE><SCRIPT type="text/javascript"></SCRIPT>

</CODE></P></BODY>

</HTML>

jsexample07.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT><SCRIPT type="text/javascript">

<!--function check(){

var has_loginname = document.forms[’loginform’].elements[’loginname’].value.length != 0;var has_passwd = document.forms[’loginform’].elements[’passwd’].value.length != 0;

if(!has_loginname && !has_passwd) {alert("A loginnév és a jelszó mez o nincs kitöltve!");return false;

}else if(!has_loginname) {

alert("A loginnév mez o nincs kitöltve!");return false;

21

C PÉLDÁK

}else if(!has_passwd) {

alert("A jelszó mez o nincs kitöltve!");return false;

}

return true;}//-->

</SCRIPT></HEAD><BODY>

<FORM NAME="loginform" action="http://webtanfolyam.sch.bme.hu">Loginnév: <INPUT name="loginname"><BR>Jelszó: <INPUT name="passwd" type="password"><BR><INPUT type="submit" value="mehet" onClick="return check()">

</FORM></BODY>

</HTML>

jsexample08.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT><SCRIPT type="text/javascript">




<IMG alt="kep" id="tobechanged" src="suni.jpg"onMouseOver="rabbit()" onMouseOut="suni()">

</BODY></HTML>

jsexample09.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT>

22

<SCRIPT type="text/javascript">



</BODY></HTML>

jsexample10.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT><SCRIPT type="text/javascript" src="dhtmlmicroapi.js"></SCRIPT><SCRIPT type="text/javascript">





</BODY></HTML>

jsexample11.html


<HTML><HEAD>

<TITLE>JavaScript</TITLE><STYLE type="text/css">

23

C PÉLDÁK

#tobechanged {position: absolute;top: 400px;left: 400px;font: 18px arial;font-weight: 700;

}</STYLE><SCRIPT type="text/javascript" src="browser_sniffer.js"></SCRIPT><SCRIPT type="text/javascript" src="dhtmlmicroapi.js"></SCRIPT><SCRIPT type="text/javascript">




<DIV ID="tobechanged">Teszt szöveg</DIV><P>Szöveg <A href="javascript:invi(1)">eltüntetése</A>. </P><P>Szöveg <A href="javascript:invi(0)">megjelenítése</A>. </P><HR><P>Szöveg <A href="javascript:move(-50)">50 pixellel fentebbhelyezése</A>. </P>

24

<P>Szöveg <A href="javascript:move(50)">50 pixellel lentebbhelyezése</A>. </P><HR><P>Szöveg legyen <A href="javascript:changeCol(’#CC0000’)">piros</A>. </P><P>Szöveg legyen <A href="javascript:changeCol(’#00CC00’)">zöld</A>. </P><P>Szöveg legyen <A href="javascript:changeCol(’#000000’)">fekete</A>. </P><HR><P>Szöveg legyen <A href="javascript:changeStyle(’italic’)">dolt</A>. </P><P>Szöveg legyen <A href="javascript:changeStyle(’normal’)">normal</A>. </P><HR><P>Szöveg legyen <A href="javascript:changeFamily(’Times’)">Times</A>. </P><P>Szöveg legyen <A href="javascript:changeFamily(’Arial’)">Arial</A>. </P>

</BODY></HTML>

25

javascript - fzolee.hu zunk és azt a böngészo értelmezi és hajtja végre (ellentétben pl. a...

Documents