Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
´ Attekint´ es
Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
´ Attekint´ es
Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
´ Attekint´ es
Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
´ Attekint´ es
Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
´ Attekint´ es
Bevezet´es HTML DOM JavaScript besz´ ur´asa JavaScript szintaxis JavaScript esem´enyek Egy´eb JavaScript be´ep´ıtett objektumok
Esem´ enyek
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JavaScript
a JavaScript a Web-en haszn´alt legn´epszer˝ ubb script nyelv az elterjedtebb b¨ ong´esz˝ ok nagyr´esze ismeri (Internet Explorer, Mozilla, Firefox, Chrome, Opera) ´ertelmez˝ o (interpreter) nyelv – a k´ od ´ertelmez´ese dinamikusan t¨ ort´enik szintaxisa hasonl´ıt a Java programoz´asi nyelv´ehez a Netscape vezette be (kezdetben LiveScript n´even) hivatalos v´altozata ECMAScript (ECMA-262 – standard)
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JavaScript amit ny´ ujt: a HTML oldalak k´esz´ıt˝ oi sz´am´ara egy programoz´asi eszk¨ozt biztos´ıt (haszn´alata egyszer˝ u) m´ odos´ıthatja a HTML tartalm´at, kin´ezet´et (a HTML DOM objektumaihoz val´ o hozz´af´er´es ´altal) esem´enyekre tud reag´alni (pl. oldal bet¨ olt´ese, kattint´as egy elemre, stb.) a bevitt adat helyess´eg´enek ellen˝ orz´es´ere ad lehet˝ os´eget (miel˝ott elk¨ ulden´enk a szerverre) megvizsg´alhatjuk a b¨ ong´esz˝ o t´ıpus´at, ´es ennek f¨ uggv´eny´eben m´as-m´as, b¨ ong´esz˝ o-specifikus tartalmat t¨ olthet¨ unk be s¨ utiket (cookies) hozhatunk l´etre a kliens g´ep´en val´o inform´aci´ o-t´arol´as ´erdek´eben
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
HTML Document Object Model
A HTML Dokumentum Objektum Modell (HTML DOM) lehet˝ os´eget teremt a dokumentum elemeihez val´ o hozz´af´er´esre ´es ezek m´ odos´ıt´as´ara A DOM platform- ´es nyelvf¨ uggetlen interf´esz a DOM a HTML dokumentumnak egy fa-szerkezetet feleltet meg. Csom´ opontok: dokumentum csom´ opont – a teljes dokumentum elem csom´ opont – minden HTML elem (tag) sz¨ oveg csom´ opont – az egyes HTML elemek t¨ orzse attrib´ utum csom´ opont – a HTML attrib´ utumok megjegyz´es csom´ opontok – HTML kommentek
DOM objektum modell r´eszei (alap, HTML DOM, XML DOM)
DOM DOM objektumok k¨ ozti kapcsolat: sz¨ ul˝ o (parent) gyerek (child) testv´er (sibling) el˝ od (ancestor) ut´ od (descendant) csom´ opontokhoz val´ o hozz´af´er´es: getElementById(), getElementsByTagName() met´odusok seg´ıts´eg´evel egy elem csom´ opont parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling, attributes, . . . mez˝oit haszn´alva saj´atos csom´ opont: document.body
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
DOM
egy csom´ opont standard mez˝ oi: – inform´aci´ ot ny´ ujtanak az illet˝ o csom´ opontr´ ol nodeName – csom´ opont neve (tag-n´ev, attrib´ utumn´ev, #text, #document, #comment) nodeValue – sz¨ oveg- illetve attrib´ utum csom´ opontok eset´en a sz¨ oveget illetve attrib´ utum ´ert´ek´et tartalmazza nodeType – csom´ opont t´ıpusa – megj.: egy-egy csom´ opont sz´amos m´as mez˝ ovel is rendelkezik, illetve hozz´arendelt met´ odusokkal
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
DOM (JavaScript) objektumok window – a JavaScript hierarchi´aban a legfels˝ o szinten lev˝o objektum. A b¨ ong´esz˝ oablaknak felel meg. kollekci´ o: frames[] mez˝ ok: document, history, location; (outerHeight, outerWidth); statusbar, scrollbars, toolbar (l´ athat´ oak legyenek vagy sem); self, top, status met´ odusok: blur(),focus(); alert(), confirm(), prompt(); open(), close(); setTimeout(), clearTimeout(), setInterval(), clearInterval(); scrollBy(), scrollTo(); moveBy(), moveTo(); resizeTo(), resizeBy()
el˝ ougr´ o ablakok (a window objektum met´ odusai) figyelmeztet˝ o ablak (alert box): alert("szoveg") ink´ abb hibakeres´es (debug) c´elj´ ab´ ol haszn´ alj´ ak j´ ov´ ahagy´ o ablak (confirm box): confirm("szoveg") j´ ov´ ahagy´ as k´er´ese “fontosabb” m˝ uvelet v´egrehajt´ asa el˝ ott adatbek´er˝ o ablak (prompt box): prompt("szoveg","alapertelmezett") pl. adatbek´er´es az oldal bet¨ olt´ese el˝ ott (ritk´ an haszn´ alt)
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
DOM (JavaScript) objektumok
a window objektum alobjektumai: history – az illet˝ o b¨ ong´esz˝ oablakb´ ol megl´atogatott URL-ket tartalmazza (window.history) mez˝ ok, met´ odusok: length, back(), forward(), go() location – inform´aci´ o az aktu´alis URL-r´ ol (window.location) mez˝ ok, met´ odusok: href (teljes URL), protocol, hostname, port, pathname, hash (# ut´ani r´esz), search (? ut´ani r´esz); assign(), reload(), replace() document . . . →
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
DOM objektumok document objektum a teljes HTML dokumentumhoz val´ o hozz´af´er´est teszi lehet˝ov´e a window JavaScript-objektum r´esze (window.document) kollekci´ ok: anchors[], forms[], images[], links[]
HTML elemeknek megfelel˝ o objektumok eset´en: be´all´ıthat´ o, ´at´all´ıthat´ o b´armely attrib´ utum ´ert´eke az elem t¨ orzse az innerHTML mez˝ on kereszt¨ ul ´erhet˝o el l´asd: Peldak/csere.htm b˝ ovebb inform´aci´ o´ert → HTML DOM referencia
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
JavaScript be´agyaz´asa HTML oldalba <script type="text/javascript"> ... JavaScript-et nem haszn´al´ o r´egebbi b¨ ong´esz˝ ok eset´en: <script type="text/javascript"> K¨ uls˝ o script-´allom´any besz´ ur´asa <script src="kulso.js"> t¨ obb HTML oldal is haszn´alhatja ´atl´athat´ obb k´ od: HTML illetve JavaScript sz´etv´alaszt´asa
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JavaScript elhelyez´ese: elvileg b´arhova elhelyezhet˝ o (script elembe ´agyazva) a script ki´ert´ekel´ese az oldal bet¨ olt´ese k¨ ozben t¨ ort´enik. f¨ uggv´enyek, glob´alis v´altoz´ ok deklar´al´asa a head elemben aj´anlott – az itt meg´ırt f¨ uggv´enyeket pl. megh´ıvhatjuk a body egy elem´enek valamilyen esem´eny´ere
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
a nyelv szintaxisa Java-hoz hasonl´ o (if, if else, while, switch, for, while, do while, break, continue, stringkezel´es . . . ) v´altoz´ ok a v´altoz´ ok t´ıpus´anak meghat´aroz´asa dinamikusan t¨ort´enik a JavaScript k¨ ul¨ onbs´eget tesz kis ´es nagybet˝ uk k¨ ozt a v´altoz´ ok deklar´al´asa nem k¨ otelez˝ o (de megtehet˝o a var kulcssz´o seg´ıts´eg´evel, t´ıpus megad´asa n´elk¨ ul) a v´altoz´ ok neve bet˝ uvel vagy a (“ ”) karakterrel kell kezd˝odj¨on a glob´alis v´altoz´ ok hat´ ok¨ ore deklar´al´asukt´ ol (els˝ o haszn´alatukt´ol) a HTML oldal bez´ar´as´aig tart
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
f¨ uggv´enyek function fuggvenynev (valtozo1, valtozo2,...) { . . . return(ertek ) // nem k¨ otelez˝ o } megh´ıvhat´ oak – a HTML oldal b´armely pontj´ar´ ol – egy esem´eny bek¨ ovetkeztekor deklar´al´asa – a head elemben aj´anlott
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
Objektumok, t¨omb¨ok haszn´alata t¨omb l´etrehoz´asa az Array be´ep´ıtett objektum seg´ıts´eg´evel: var sorozat=new Array(); sorozat[0]="p´ aros"; sorozat[1]="p´ aratlan"; var sorozat=new Array("p´ aros","p´ aratlan") a JavaScipt t¨ omb¨ ok tulajdonk´eppen index-el ell´atott mez˝okkel rendelkez˝ o objektumokk´ent vannak t´arolva ´altal´anos objektum l´etrehoz´asa var obj=new Object(); // l´etrej¨ on egy “¨ ures” objektum a mez˝ oket hozz´aadhatjuk menet k¨ ozben (ha eddig nem volt ilyen mez˝ o, ´ert´ek-hozz´arendel´eskor automatikusan l´etre lesz hozva): obj.nev="M´ oricka" obj.eletkor=21 a mez˝ okre az al´abbi szintaxissal is hivakozhatunk (“t¨omb jelleg”): obj[’nev’]="M´ oricka" el˝ ony: a sz¨ ogletes z´ar´ ojelen bel¨ ul haszn´alhatunk kifejez´est is
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
u ´j f¨ uggv´eny hozz´aad´asa az objektumhoz: inline m´ odon: obj.hanyEves=function(){ alert(this.nev+" "+this.eletkor+" eves") } el˝ oz˝ oleg defini´alt f¨ uggv´eny hozz´aad´asa: function koszon(){ alert("Szia "+this.eletkor) } ... obj.koszon=koszon // vigy´azat, nem obj.koszon=koszon()
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
alobjektum hozz´arendel´ese az objektumhoz: var myLibrary= new Object(); myLibrary.books=new Array(); myLibrary.books[0]=new Object(); myLibrary.books[0].title="K´ et´ evi vak´ aci´ o"; myLibrary.books[0].authors=new Array(); var vernegyula=new Object(); vernegyula.name="Jules Verne"; vernegyula.foglalkozas="ifj´ us´ agi reg´ eny´ ır´ o"; myLibrary.books[0].authors[0]=vernegyula; . . . bonyolultabb strukt´ ura fel´ep´ıt´ese kiss´e neh´ezkes . . . gyorsabb megold´as: JSON (JavaScript Object Notation)
Be´ ep´ıtett objektumok
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JSON – JavaScript Object Notation t¨ omb eset´en myLibrary.books=[konyv1, konyv2, konyv3] objektum eset´en (kapcsos z´ar´ ojelben felsorolt “kulcs:´ert´ek” p´arosok): myLibrary.books={ mese : konyv1, regeny : konyv2, zoldsegpucolo: konyv3 } komplex objektumhierarchia ´ep´ıthet˝ o fel ilyen m´ odon a mez˝ oknek val´ o ´ert´ekad´askor kifejez´est is hasz´alhatunk (dinamikus tartalom)
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JSON –f¨ uggv´eny-mez˝ o megad´asa egy objektumnak: var barkacskonyv={ cim: "Csinald magad "+kotetszam+". kotet", szerzok:[{nev:"Valaki",ev:25},{nev:"Barki", ev:50}], megj: function(hossz){ if(!hossz){hossz=10} var szov=this.cim+", "+this.szerzok[0].nev+" konyve n" for(i=0; i
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
Saj´at objektum l´etrehoz´asa
Saj´at objektum l´etrehoz´asa “konstruktor”-szer˝ u f¨ uggv´eny seg´ıts´eg´evel: function MyObject(name, size){ this.name=name this.size=size } k´es˝ obb ennek seg´ıts´eg´evel l´etrehozhatjuk a MyObject t´ıpus´ u objektumot: var myobj= new MyObject("nadragszij","5m"); alert("a(z) "+myobj.name+" merete "+myobj.size); a konstruktoron bel¨ ul b´armilyen mez˝ ot rendel¨ unk hozz´a a this-hez, az el´erhet˝ o lesz az objektum mez˝ ojek´ent
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
Saj´at objektum + f¨uggv´eny f¨ uggv´eny-t´ıpus´ u mez˝ o hozz´aad´asa az objektumhoz a prototype (az objektumokhoz rendelt speci´alis mez˝o) seg´ıts´eg´evel aj´anlott MyObject.prototype.tellSize=function(){ alert("a(z) "+this.name+" merete "+this.size) } ... var myobj= new MyObject("nadragszij","5m"); myobj.tellSize() p´eld´ak Objektum JSON.htm, SajatObjektum.htm, SajatObjektum fuggvenymezo.htm, SajatObjektum prototype.htm Objekum mez˝ oinek v´egigj´ar´asa for in ciklus seg´ıts´eg´evel: mezovegigjaras.htm
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JavaScript esem´enyek
JavaScript esem´enyek: a JavaScript ´altal felismert t¨ ort´en´esek dinamikus (id˝ oben v´altoz´ o tartalm´ u) HTML oldalak l´etrehoz´as´at teszik lehet˝ ov´e minden egyes HTML elemhez vannak hozz´arendelt esem´enyek, melyek hat´as´ara JavaScript f¨ uggv´enyt futtathatunk le a HTML tag-ben adjuk meg ezeket: pl.
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
JavaScript esem´enyek n´eh´any esem´eny (XHTML eset´en csupa kisbet˝ uvel kell ´ırni): onLoad, onUnload: oldal vagy k´ep bet¨ olt´ese, oldal elhagy´asa (pl. b¨ ong´esz˝ o t´ıpus´anak ellen˝ orz´ese, s¨ utik t´arol´asa) l´asd: informaciok.htm, cookie.htm onClick (tipikusan gombnyom´as vagy m´as HTML elemre -pl. k´ep- val´o kattint´asra megh´ıvunk egy JavaScript f¨ uggv´enyt) onFocus, onBlur, onChange (pl. form elem ´ert´ek´enek ellen˝ orz´ese, ha v´altozott a tartalma) onSubmit (pl. a form ¨ osszes adatainak ellen˝ orz´ese a szerverre val´o k¨ uld´es el˝ott) onMouseOver, onMouseOut (pl. anim´alt gombok)
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
Egy´eb JavaScript be´ep´ıtett objektumok
Navigator – inform´aci´ o a kliens b¨ ong´esz˝ oj´er˝ ol (window.navigator) mez˝ ok: navigator.appName (b¨ ong´esz˝ o t´ıpusa), navigator.appVersion (b¨ ong´esz˝ o verzi´ osz´ama) Screen – inform´aci´ o a kliens k´eperny˝ oj´er˝ ol (window.screen) mez˝ ok: screen.width (k´eperny˝ o sz´eless´ege), screen.height (magass´aga)
Bevezet´ es
DOM
Script besz´ ur´ as
Szintaxis
Esem´ enyek
Be´ ep´ıtett objektumok
Egy´eb JavaScript be´ep´ıtett objektumok String – minden string t´ıpusu v´altoz´ o tk´eppen String t´ıpus´ u objektum a JavaScriptben mez˝ o: length met´ odusok: toUpperCase(), toLowerCase(); substring(), charAt(), indexOf(); toString() (sz´am ´atalak´ıt´asa String-´e) Date – d´atum/id˝ o be´all´ıt´as/lek´erdez´es objektum l´etrehoz´asa: birthday = new Date(); birthday = new Date("June 20, 1996 08:00:00"); met´ odusok: setDate(), getDate(), set/get: Month Year Time Hours Minutes Seconds Math – automatikusan l´etre van hozva (explicit Math objektum l´etrehoz´asa n´elk¨ ul haszn´alhat´ o) met´ odusok: kerek´ıt´es – ceil(), floor(), round(); v´eletlensz´am gener´al´as (0 ´es 1 k¨ oz¨ ott) – random()
