1. Mi ez? mire jó? Miel˝ott bármibe belevágnánk, alapvet˝o HTML ismeretek birtokában érdemes elolvasni az alábbi példa forrását: <TITLE>JavaScript Hello World!
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 funkcionalitásait. A linkre kattintva meger˝osít˝o ablak ugrik fel és csak az OK gomb megnyomása után navigál a böngész˝o a törlést végz˝o oldalra. Ilyen meger˝osítés pure-HTML-ben csak meger˝osít˝o 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üls˝o oldalt külön le kell tölteni a szerverr˝ol.
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 ágyazunk és azt a böngész˝o é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 el˝ott (a HTML 2.0 és 3.0 ajánlások idején) nem volt lehet˝oség lényeges mérték˝u kliens oldali interaktivitásra.
1.2.
Története
JavaScript 1.0 1995 vége: „LiveScript”: a Netscape „LiveWire” projektjének elnevezéséb˝ol. A cél a Weben egy teljes, programozható környezet létrehozása volt. A LiveScript és a Java ötvözéséb˝ol alakult ki a JavaScript, melyet el˝oször a Netscape Navigator 2.0- ban implementáltak. Microsoft InternetExplorer 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ák létre, els˝o 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 u˝ rlap mez˝oinek ellen˝orzése elküldés el˝ott • A felhasználó akcióira vonatkozó válaszlépések (eseményvezérelt módon) • HTML oldal „futási id˝oben” (kliens oldalon) történ˝o generálása • Látványos csilli-villi ˝ • Urlapok helyi feldolgozása Mire ne használjuk, illetve mire készüljünk fel? • Mindig ellen˝orizzük a küldött u˝ rlapadatokat szerver oldalon !!! • A JavaScript csak elvileg platformfüggetlen. Gyakorlatilag szinte minden böngész˝o olvasata között vannak kisebb-nagyobb eltérések. (Ma már szerencsére mondhatni minden grafikus böngész˝o támogatja 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ész˝ovel, 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 statikus HTML-lel is biztosítanunk kell a funkciót (pl új ablak nyitása esetén legyen link is). • a keres˝orobotok nem foglalkoznak a szkriptünkkel, ezért nem is fogják megtalálni azokat az (al)oldalainkat, amelyek csak szkripten keresztül érhet˝ok el.
2. JS alapok, szintaktika 2.1. Beágyazás HTML-be A beágyazott szkript kódja a <script> tagek között adható meg szinte bárhol a dokumentumban. Fejlécbe () célszer˝u az inicializáló utasításokat, a törzsbe () csak akkor, olyan objektumokhoz akarunk hozzáférni, ami a statikus HTML értelmezése során jönnek létre vagy dinamikusan akarunk tartalmat generálni. Egy oldalon több program is lehet, ezeket sorban hajtja végre a böngész˝o. A függvénydefiníciókon (ld. kés˝obb) kívüli utasítások közvetlenül a tag beolvasása után lefutnak. A script tag részletesen: <script type="MIME type" src="URL"> 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 a type attribútum helyett a language attribútumot alkalmazták. A validitás érdekében érdemes az el˝obbit 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ás megadni). Javascript kód megadható a HTML tagek ún. eseménykezel˝o attribútumai értékeiként. Ilyen események pl az oldal teljes letölt˝odésekor (onLoad), objektumra történ˝o kattintáskor (onClick), u˝ rlap mez˝ojének megváltozásakor (onChange) generálódnak. Ilyet alkalmaztunk például a bevezet˝o hello world példájában. Link URLjeként is megadhatunk JavaScript kifejezést (ld. 2.1.). Pl.: link, ami akár egy kép is lehet (Másképp nem is oldható meg „szabványosan” a képre kattintás lekezelése. Az onClick képekre csak Explorerek alatt m˝uködik biztonsággal. A void konverzió a kimenet elnyomására kell.)
2.2. Hibajelzés Böngész˝onkként eltér˝o. Általában a státuszsorban figyelmeztetés jelenik meg, amire kattintva b˝ovebb leírást kapunk. Mozilla FireFox böngész˝o alatt az oldalon elhelyezett szkriptre vonatkozó hibák, figyalmezteté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ünk globális és lokális változókról. A var elhagyható, ha értéket adunk meg, azonban a var nélkül definiált vá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); // local document.writeln(this.myVar); // global }
5
2 JS ALAPOK, SZINTAKTIKA
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 automatikusan 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 kimenet 12 21 lesz. 2.3.3.
Speciális konstansok
• null érték hiányát reprezentálja (numerikus kontextusban 0, logikaiban false) • undefined azon változók értéke, amelyeket még nem definiáltunk. Numerikus változüként történ˝o felhasználásuk futási hibát okoz. Ezzel szemben az inicializálatlan tömbelemek tesztelése false eredmé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), így pé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 jelent˝ossége. Új példány létrehozása a new operátorral történik. Pl.: image1 = new Image(); A for..in ciklus szolgál az objektum összes elemváltozóján történ˝o 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 adatstruktúrának más megjelenési formái. Pl.: kocsim.gyarto = "Ford"; kocsim["gyarto"] = "Ford"; Asszociatív tömbök létrehozása: 6
A Javához hasonlóan a + és += a sztringkonkatenálás operátora. Sztring kifejezés megadható egyszeres (’) és dupla idéz˝ojelben (") is. Szám típusról sztring típusra a toString függvény segítségével lehet konvertálni. Pl.: var c = (16 * 24)/49 + 12; d = c.toString(); Sztringr˝ol szám típusra 1-gyel való szorzással lehet áttérni. FUGYULIM! Felszólít! A PHP-ben megszokott +0 itt nem célravezet˝o, 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érdezhet˝o 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 els˝o 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] temp[1] temp[2] temp[3] temp[4]
= = = = =
’I’; ’am’; ’a’; ’JavaScript’; ’hacker.’; 7
2 JS ALAPOK, SZINTAKTIKA
Réssztring képzése a .substring(first_index,last_index) .substr(first_index,length) metódussal történik. Pl.:
vagy
a
var a = ’Hello world!’; document.writeln(a.substring(4,8)); document.writeln(a.substr(4,8)); Az eredmény: ’o wo’ ’o world!’ Kisbet˝us/nagybet˝us á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én˝o válaszlépések leprogramozására. Adódik, hogy mindez ún. eseményvezérelt vezérlési szerkezettel történik. Az eseményvezérlés lényege, hogy a program folyamatosan egy várakozó ciklusban fut, amíg valamilyen felhasználói vagy bels˝o (pl. id˝ozítés) esemény be nem következik. Ekkor lefut az adott eseményhez tartozó eseménykezel˝o rutin, majd a program a várakozó ciklusban folytatódik a következ˝o esemény bekövetkeztéig. JavaScriptben a különböz˝o tagekhez kapcsolódó eseménykezel˝o függvényket a tagek on kezdet˝u attribútumaiban adhatjuk meg (betartva a attribútumértékekre vonatkozó HTML ill. XHTML el˝oírásokat). Pl.: <TITLE>JavaScript Hello World!
Kattints ide duplán!
Az alábbiakban összefoglalom a különböz˝o eseménykategóriák eseményeit. Az alkalmazhatóság oszlopában a kisbet˝us szó JavaScript objektumot, a csupa nagybet˝us HTML tagek jelöl. 2.4.1. Letöltés
8
esemény error
eseménykezel˝o onError
load
onLoad
unload
onUnload
bekövetkezik dokumentum vagy kép letöltése hibát okoz a böngész˝o befejezte a dokumentum (vagy valamennyi frame) letöltését a felhasználó „kilép” a dokumentumból
alkalmazható window, IMG
IMG, window
window
2.4
Eseménykezelés
2.4.2. Ablak esemény move
eseménykezel˝o onMove
resize
onResize
bekövetkezik a felhasználó mozgatja az ablakot a felhasználó átméretezi az ablakot
bekövetkezik a felhasználó egy u˝ rlapelemre vagy linkre kattint
doubleclick
onDblClick
dragdrop
onDragDrop
mousedown
onMouseDown
mousemove
onMouseMove
a felhasználó egy u˝ rlapelemre vagy linkre duplán kattint a felhasználó egy objektumot húz az ablakra a felhasználó lenyomta az egér gombját a felhasználó mozgatja az egeret
mouseout
onMouseOut
mouseover
onMouseOver
mouseup
onMouseUp
az egérkurzor elhagyta az objektum feletti területet az egérkurzor elhagyta az objektum feletti területre került a felhasználó felengedi az egér gombját
window
Button, Link
document,
Alapértelmezés szerint egyetlen objektumhoz sem tartozik Link
Link
Button, Link
document,
2.4.4. Billentyuzet ˝ esemény keydown
eseménykezel˝o onKeyDown
keypress
onKeyPress
keyup
onKeyUp
bekövetkezik a felhasználó lenyom egy billenty˝ut a felhasználó lenyom vagy nyomva tart egy billenty˝ut a felhasználó felenged egy billenty˝ut
bekövetkezik a felhasználó megszakítja egy kép betöltését
alkalmazható 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 objektumok még: Array, Date, Math, String. Néhány objektumot (pl. Date, Math) a JavaScript interpreter eleve elér, mások HTML tageket jelölnek, ezeket nevükön kell neveznünk, hogy JavaScriptb˝ol elérhessük o˝ ket. Pl.: Ezeknek az objektumoknak az elemváltozóit elérhetjük, olvashatjuk, írhatjuk. (A verb|document| a BODY tagnek felel meg.)
3. Böngész˝o-különbségek Az alábbi tanácsokat érdemes betartani: • Érdemes „szabványos JavaScriptet” használni. • A böngész˝ofejleszt˝ok keresztbe-szivatták egymást az inkompatibilis megoldásokkal, és ennek a webfejleszt˝ok isszák meg a levét (és ez nem csak a JavaScriptre vonatkozik). • Ha szükség van böngész˝ospecifikus elemfüggvények használatára, akkor érdemes a szkriptet több böngész˝o szájaízére felkészíteni. • a W3Schools 2005. januárjára vonatkozó statisztikái alapján a böngész˝ok 11 10
3.1
Böngész˝o lekérdezése
Textarea
Window
Frame
Document
Link
FileUpload
Image
Password
Area
Hidden
Anchor
Submit
Location
Applet
Reset
History Form Radio
navigator Checkbox
Plugin Button
MimeType Select
Option
3. ábra. A JavaScript objektumtípusainak hierachiája
3.1.
Böngész˝o lekérdezése
// A böngész˝ o kódneve var browserCodeName = navigator.appCodeName; // A böngész˝ o neve var browserName = navigator.appName; // A böngész˝ o verziója var browserVersion = parseInt(navigator.appVersion); // A useragent var userAgent = navigator.userAgent; // A böngész˝ o platformja var platform = navigator.platform; Például linuxos Mozilla Firefox alatt az eredmény: A A A A
böngész˝ o kódneve: Mozilla böngész˝ o neve: Netscape böngész˝ o verziója: 5 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: Mozilla A böngész˝ o neve: Microsoft Internet Explorer A böngész˝ o verziója: 4 A 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ézenfekv˝o 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ész˝ore optimalizált kódot futtani. A W3C az alábbi statisztikákat gy˝ujtötte az utóbbi hónapokban a világszerte használt böngész˝ok gyakoriságáról (4. és 5. ábra)
4. ábra. A leggyakrabban használt böngész˝ok 2004 januártól 2005. márciusig
IE 6 63.8%
IE 5 3.9%
Opera 7/8 1.8%
Firefox 21.8%
Mozilla 3.7%
NN 4 0.2%
NN 7 1.0%
5. ábra. A leggyakrabban használt böngész˝ok 2005. márciusában Láthatóan napjainkban IE 6 és Firefox alá érdemes optimalizálni. A böngész˝o ilyen lekérdezését mégsem szokták alkalmazni, hanem a böngész˝oket osztályokba sorolják (browser sniffer) az alapján, hogy milyen JavaScript megoldásokat használnak. A Dynamic Drive JavaScripttel foglalkozó weboldal IE 4+, NS 4, NS 6 kategóriába sorolja a szkripteket m˝uködésük alapján. [5] A dynamicdrive.com-on található browser sniffer1 osztályai: 1a
12
sniffert kiegészítettem néhány osztállyal
3.2
változó ie ie4 ie5 ie6 ns ns4 ns6 ns7 mz7 kde saf op op5 op6 op7 nsorop exclude
Böngész˝o specifikus elemek
leírás Internet Explorer 4+ és IE alapú third-party böngész˝ok . . . Internet Explorer 4 . . . Internet Explorer 5 - 6 . . . Internet Explorer 6 Netscape Netscape 4 Gecko és KDE-alapú böngész˝ok – Netscape 6 - 7, Mozilla, Konqueror, Safari . . . Netscape 7 . . . minden Gecko alapú böngész˝o, kivéve a Netscape 7 . . . Konqueror, KDE 2.2-t˝ol . . . Safari Opera Opera 5 Opera 6 Opera 7+ Netscape vagy Opera azonosítatlan böngész˝o
3.2. Böngész˝o specifikus elemek Az oldal nettó méreteinek lekérdezése (szegély, gördít˝osá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ész˝ospecifikus 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 dokumentum egyes elemei (bekezdések, beviteli mez˝ok, képek) hogyan viszonyulnak a legfels˝o szint˝u strukturához: a document 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 (Nulladszint˝u DOM) a Netscape 2 böngész˝oben jelent meg. 2. A Netscape 4 és Explorer 4 két eltér˝o ún. Intermediate DOM-ot támogatott. 3. A Level 1 DOM (Els˝oszint˝u DOM) másnéven W3C DOM a Mozillában és az Explorer 5-ben lett bevezetve Ebben a segédletben az els˝o 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 (f˝oként u˝ rlap elemek és kés˝obb képek) elérésére találták ki. Az Explorer 3-ban majd a többi böngész˝oben ugyanezt a DOM-ot írták meg, így a DOM 0 szint egységes. ˝ Urlap példa:
... 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:
... 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ész˝ok jelentették a DHTML2 hajnalát. Ehhez a dokumentum minden részéhez hozzáférést kellett biztosítani. A Netscape layer-filozófiája miatt a document.layers-ön keresztül, a Microsoft megalomán törekvéseinek megfelel˝oen a document.all-on át éri el az egyes objektumokat.
... 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 is alkalmas. Ezt az 5-ös verziójú böngész˝ok támogatták. • a Microsoft úgy döntött, hogy három DOM-ot támogat (Level 0 DOM, document.all, W3C DOM), • a Mozilla fejlesz˝oi úgy döntöttek, hogy nem támogatják document.layers struktúráját, csak az új Level 1 DOM-ot.
a
Netscape
4
nehézkes
A Level 1 DOM részletes ismertetését itt nem teszem meg. Ízelít˝oül: x.parentNode x.childNodes[1] document.firstChild.firstChild.lastChild document.firstChild.childNodes[0].lastChild document.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 ismerete nélkül ennek segítségével használhatjuk a Mozilla típusú böngész˝okön az Intermediate DOM-ot. Így az el˝oz˝o példa:
... if(document.layers) { 2 Dinamikus 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 DHTMLt, mint olyan HTML oldal, amely újratöltés nélkül változtatja szerkezetét, interaktivitást mutat
4.3. DHTML micro API A Peter-Paul Koch által írt HTML 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 el˝obbi 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 el˝oadás. 2004 Nyári KIR fejleszt˝oi tábor, 2004. [2] World Wide Web Consortium. Browser statistics. W3 Schools, 2005. [3] Netscape Communications Corporation. Determining browser vendor, version, and operating system with 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öl˝o, címke, elem, SGML nyelvi elem, a dokumentum alapvet˝o struktúrájának leírására alkalmas attribútum egy tag tulajdonságát megadó nyelvi elem, mely attribútum-névb˝ol és attribútum-értékb˝ol áll tartalom egy tag-hez tartozó szöveges tartalom vagy gyermek tagjei; amelyik tagnek nincs tartalma azt üres tagnek nevezik dokumentum fa a dokumentumot felépít˝o tagek áltál meghatározott fa (pontosabban nem fa, mert az elemek sorrendje is számít). Minden tagnek pontosan egy szül˝otag-je van a gyökérelemet kivéve, mert annak nincs szül˝oje. 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 el˝oállítja (pl. böngész˝o).
B.
Web • The Ultimate JavaScript Client Sniffer, Version 3.03: Determining Browser Vendor, Version, and Operating System With JavaScript http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html • W3 Schools: Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp • Dynamic Drive: DHTML scripts for the real world http://dynamicdrive.com/ • Web Standards http://www.webstandards.org/ • QuirksMode http://www.quirksmode.org/js/
18
C. Példák jsexample01.html <TITLE>JavaScript Hello World!
... function rabbit() { document.images[’tobechanged’].src = ’rabbit.jpg’; } function suni() { document.images[’tobechanged’].src = ’suni.jpg’; } 14