Jegyzet
window.open
window.setTimeout
document.write
document.body.style.backgroundColor
document.getElementById.innerHTML
parent.location.href
Math.random
Date.prototype.getFullYear
String.prototype.lastIndexOf
navigator.geolocation
location.search.substr
array.sort
Object.getOwnPropertyNames
Vajon hogyan lehet eligazodni a JavaScipt különböző objektum-elnevezései között? Melyik objektumnak
milyen elemei léteznek? Mi a szülő objektuma az egyes elemeknek? Felfedezhető-e közöttük valamiféle
összefüggést mutató, egyértelmű hierarchia? Vagy esetleg több, egymástól akár teljesen független
objektumokkal állunk szemben?
Aki már kicsit is programozott elmélyültebben JavaScriptben, abban a fenti kérdések nagy valószínűséggel
már biztosan felmerültek. Ilyenkor
kézenfekvő lehetőség rákeresni
valamiféle összefoglaló ábrára az objektumok hierarchiájáról.
Az eredményként kapott ábrák egyrészt ránézésre is feltűnően sematikusak, ráadásul még sokszor
ellentmondásosak is.
Arról viszont azért némi sejtést szerezhetünk, hogy minden objektum őse a
window objektum.
De vajon
hány "gyereke" van a window objektumnak? Ezek mind újabb
objektumok? De akkor
hol kapcsolódnak bele ebbe a rendszerbe az általunk is ismert jacascript
függvények?
És mely elemek "gyerekei" a különféle
változók, vagy
konstansok? Ez a sok elem
miért nem szerepel a fenti keresésünk eredményeként kapott ábrákon?
Az volna a jó, ha a fenti kérdésekre válaszként
létezne egy olyan programunk, ami
- kilistázza a window összes elemét
- szétválogatja őket aszerint, hogy az adott elem objektum, függvény, vagy változó
- a lista minden eleme egyben link is lenne, melyek bármelyikére rákattintva eredményként láthatnánk a kiválasztott elem saját "gyerekeit"
- és ez így folytatódna a lehetséges legnagyobb mélységig.
Ha nem tudunk ilyen program létezéséről, akkor
írjunk egyet!
Hogy miként lehet elkészíteni egy a fentiekben megfogalmazott igényeket
teljesítő programot, arról az
Objektumlista
című írásban találhatóak részletek. Ezen az oldalon végigkövethetjük az alábbiakban
használt program elkészítésének gondolatmenetét, és fázisait - ha úgy tetszik: a program
magyarázatát.
Az elkészült program
itt próbálható ki.
A fenti linkre kattintva a window objektum elemeinek felsorolását láthatjuk. Elsőre is szembetűnő, hogy
nagyságrendileg ezer elem szerepel a listában - a pontos szám böngészőnk típusától és verziójától függ -, és
ez még csak az objektumhierarchia legfelső szintje! Ez mindenképpen magyarázatot ad arra, hogy a különféle
ábrák, amelyeken az objektumok hierarchiáját szerettük volna áttekinteni, miért nem lehetnek teljesek.
Mit tudhatunk meg a program által?
Programunkat tehát úgy készítettük el, hogy az általa megjelenített lista minden eleme kattintható.
Kattintás után az ekképpen kiválasztott elemről tudunk hasonló módon információhoz jutni, és ezen
újonnan vizsgált objektumnak is ismét minden eleme kattintható. Ezzel a módszerrel egyre mélyebbre
és mélyebbre "áshatunk" az objektumok között. A kattintással választott új elemünk mindig a programunk
paraméterét fogja jelenteni az URL-ben, ami azt eredményezi, hogy végső soron minden elemhez önálló
link rendelhető. Például az
infojegyzet.hu/webszerkesztes/javascript/obj/?window.visualViewport
linken a
window.visualViewport
paraméter által megtudhatjuk a böngészőnk belső képernyőjének méretét (pixelben):
window.visualViewport.width =
window.visualViewport.height =
Méretezze át a böngészőablakot, és figyelje a számokat!
A window objektum egy másik elemét is vizsgálat alá vetve azt tapasztalhatjuk, hogy a
window.pageYOffset
értéke azt mondja meg, hány pixellel gördítettük lejjebb az aktuális oldalt a tetejéhez képest:
window.pageYOffset =
Gördítse a képernyőt, és figyelje a számot!
(A példákban szereplő számok folyamatos aktualizálásához természetesen futtatnunk kell a háttérben egy folyamatos frissítést végző
programot, melyet a
setInterval() függvénnyel indítunk.)
Gyakorlatias kérdések és válaszok
Felhasználásként olyan elemeket érdemes keresünk a program segítségével, melyek tanulmányozása
a JavaScript alaposabb megismerésében lehet segítségünkre. De miféle kérdésekre kaphatunk
válaszokat? Nézzünk meg néhány példát!
1. Mekkora számokkal tud dolgozni a JavaScript?
Tekintsük meg a
konstansait. Itt megtaláljuk a lehetséges legkisebb, illetve legnagyobb egész, valamint tört számot,
melyekkel még biztonságosan tud számolni a JavaScript.
2. Milyen matematikai függvények léteznek a JavaScriptben?
JavaScriptes feladatok során hamar belefuthatunk abba, hogy pl. hatványoznunk kell,
négyzetgyököt kell vonnunk, véletlenszámot kell generálnunk, kerekítenünk kell... stb.,
melyeknél mindig a
Math objektumot hívjuk segítségül. De vajon milyen függvényei
vannak összességében ennek az objektumnak? Kiderül az alábbi linken:
Ugyanitt az is megfigyelhető, hogy milyen matematikai konstansok állnak készen a rendelkezésünkre
a programozáshoz.
3. Milyen függvények léteznek a különféle adattípusokhoz?
Nyilvánvalóan másfajta függvények állnak rendelkezésre a sztringek, a dátumok, vagy éppen tömbök
kezelésére. De vajon mennyi van belőlük, és melyek ez? A választ az alábbi objektumokkal való
ismerkedés adhatja meg:
4. Hogyan, vagyis milyen kifejezésekkel lehet HTML elemek CSS tulajdonságait JavaScripttel módosítani?
Nagyon gyakori probléma, hogy egy már kihelyezett HTML elem valamely CSS tulajdonságát szeretnénk
utólag - pl. valamely esemény hatására - megváltoztatni. Ilyenkor zavarba ejtő kérdés tud lenni, hogy
bár CSS-ben ismerjük a stíluselemet meghatározó tulajdonságnevet (pl. a háttérszín a
background-color
kifejezéssel adható meg), de vajon hogyan módosítható ez JS paranccsal. Ezt a
többszáz lehetőséget
láthatjuk összesítve a
elem változói között.
5. Hogyan kérdezhető le egy oldal URL-je, és/vagy paraméterezése?
Egy-egy dinamikus honlap készítése során szintén gyakran belefuthatunk abba a kérdésbe, hogy minként
tudjuk JavaScriptben lekérdezni a weboldal teljes címét, vagy éppen csak a domain nevet, esetleg az
URL-ben a domaint követő aloldal címét, netán kifejezetten a címben átadott paramétereket. A választ a
elem részleteivel való ismerkedés szolgáltatja.
6. ...és még számtalan egyéb kérdés...
A fentieken túl természetesen még jó pár kérdésre választ találhatunk az egyes
objektumok között nézelődve, böngészve - akár random módon, akár tematikusan
keresve is ugrálunk a lehetőségek között. Tegye ezt! Keresgéljen ismert tulajdonságokat!
Fedezzen fel eddig még nem ismert elemeket!
előző oldal
© infojegyzet.hu, 2022. március 