Eszköztár
99 Kezdőlap - Webszerkesztés - JavaScript - Objektumok hierarchiája
ujdomainek.hu

Objektumok

hierarchiája

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 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 random oldal következő oldal


2022-12-03 23:10:48 Admin Köszönöm, ha Ön lesz az első, aki megírja ide véleményét, észrevételét, kérdését ezzel a lappal kapcsolatban.




Új hozzászólás:
E-mail cím:


Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.

Név:


Ez a név fog megjelenni az Ön hozzászólásai mellett.

Mennyi tizenkettő + kettő?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.


© infojegyzet.hu, 2022. március