Eszköztár
100 Kezdőlap - Webszerkesztés - JavaScript - Objektumlista
ujdomainek.hu

Objektumlista

Hogy készült?

Mintapélda

Az Objektumok hierarchiája című oldalon azt célt fogalmaztuk meg, hogy készítsünk egy olyan programot, ami a következőket tudja: A program eredményeként azt szeretnénk átlátni, hogy miként szerveződnek hierarchikusan egymás alá a JavaScript különböző elnevezésű objektumai - illetve hogy igaz-e az, hogy minden létező objektum megtalálható a window objektum valamely gyermekeként, vagy annak gyermekeként, vagy annak gyermekeként, vagy annak gyermekeként...

Ott, azon az oldalon, a már kész program felhasználásával vizsgáltuk a JavaScript objektumainak hierarchiáját, és igazoltuk a fenti állítást. Ezen az oldalon viszont azt tekintjük át, miként is lehet(ett) elkészíteni ezt a bizonyos programot.

1. Hogyan álljunk neki?

Első lépésként - a lehető legegyszerűbben és leggyorsabban - kellene írnunk egy olyan kódot, ami ömlesztve kilistázza a window objektum elemeit! Ehhez a JavaScript Object.getOwnPropertyNames függvényét hívhatjuk segítségül, mely képes egy objektum saját tulajdonságelemeinek nevét egy tömb elemeiben visszaadni.
<script>1.
        tulajdonsagok = Object.getOwnPropertyNames( window )
        document.write( tulajdonsagok )
</script>
A kapott tartalom kétségtelenül bíztató - csak éppen ebben a formában kezelhetetlen. Szükségszerűnek tűnik például legalább azt megoldani, hogy a listázott elemek egymás alatt, lehetőleg betűrendben jelenjenek meg.

2. Jelenítsük meg az elemeket egymás alatt, betűrendben!

A tömb elemeinek rendezéshez a sort() függvényre, az elemek egyesével történő megjelenítéséhez pedig egy ciklusra lesz szükségünk, mely a tömb elemein szalad végig a sorszámuk szerint.
<script>2.
	tulajdonsagok = Object.getOwnPropertyNames( window )
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
	    document.write( tulajdonsagok[i] + '<br>' )
	}
</script>
Alakul. De vajon hány elemet is látunk a listában?

3. Sorszámozzuk meg a lista elemeit!

A sorszámozás legegyszerűbb módja, ha kihasználjuk a HTML <ol>, illetve <li> tag-jeinek lehetőségeit. Ez esetben akár az előző változatban szereplő sortöréseket is kihagyhatjuk, hiszen a listázás eleve tartalmazza azt.
<ol>3.
<script>
	tulajdonsagok = Object.getOwnPropertyNames( window )
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
	    document.write( '<li>' + tulajdonsagok[i] )
	}
</script>
</ol>
Amennyiben esetleg arra számítottunk, hogy a window objektumhoz nagyjából mindössze egy, vagy legfeljebb néhány tucat saját elem köthető, akkor bizony az eredményként kapott sokkal-sokkal több elem igencsak meglepetésre adhat okot. Pedig a dolog valóban így áll: böngészőtől, és annak verziószámától függően a lista elemszáma akár az ezret is közelítheti, vagy meghaladhatja.

Ám egyben a kérdés is felmerül: ezen rengeteg elem közül melyek lehetnek olyan objektumok, amelyek szintén rendelkezhetnek további saját gyermekekkel. Ennek megállapításához látnunk kellene az egyes elemek típusát is.

4. Jelenítsük meg a lista elemeinek típusát is!

Egy JavaScript változó típusa a typeof operátorral kérdezhető le. A probléma csak az, hogy ha megkérdezzük egy-egy tömbbéli elem típusát, akkor az kivétel nélkül mindre azt fogja mondani, hogy string, hiszen szöveg típusú változóként tároljuk el az elemek neveit. Éppen ezért mivel tehát mi valójában a szövegekben tárolt elemnevek típusára vagyunk kíváncsiak, használnunk kell az eval() függvényt.
<ol>4.
<script>
	tulajdonsagok = Object.getOwnPropertyNames( window )
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
    	    tipus = typeof eval( tulajdonsagok[i] )
	    document.write( '<li>' + tulajdonsagok[i] + " : " + tipus )
	}
</script>
</ol>
Így tehát bevezetve és kiiratva a tipus változót, már láthatjuk minden elemünk típusát is. Ezek között az alábbi kifejezések fedezhetőek fel: Az volna a jó, ha a programunk szétválogatná a listaelemeket 3 típusba: Lássuk, hogyan oldható ez meg!

5. Válogassuk szét az elemeket típus szerint!

A szétválogatáshoz szakítanunk kell a document.write() függvénnyel való kiiratással. Helyette érdemes kialakítani három blokkot (div-et), melyek közül a megfelelő blokk .innerHTML tartalmának bővítésével helyezhetjük el az aktuálisan megjelenítendő elemet, megtörve ezzel a kényszerű sorrendiséget.
<ol>5.
    <h4>Az elem objektumai:           </h4><div id='blokk1'></div><hr>
    <h4>Az elem függvényei:           </h4><div id='blokk2'></div><hr>
    <h4>Az elem változói, konstansai: </h4><div id='blokk3'></div><hr>
</ol>

<script>
	tulajdonsagok = Object.getOwnPropertyNames( window )
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
	    tipus = typeof eval( tulajdonsagok[i] )
	    if( tipus=="object" )
	    {
		blokk1.innerHTML += "<li> " + tulajdonsagok[i] + " : " + tipus
	    }
	    else if( tipus=="function" )
	    {
		blokk2.innerHTML += "<li> " + tulajdonsagok[i] + " : " + tipus
	    }
	    else
	    {
		blokk3.innerHTML += "<li> " + tulajdonsagok[i] + " : " + tipus
	    }
	}
</script>
Idáig eljutva kétségtelenül örülhetünk eddigi eredményeinknek, ugyanakkor azt is látnunk kell, hogy a programunk jelenlegi állapota még nem alkalmas arra, hogy ne csak a window objektum elemeit tudjuk listázni, hanem annak bármely gyerekének a gyerekeit, sőt azok gyerekeit is. Ehhez ugyanis minden egyes megjelenített elemnek egyben linknek is kellene lennie, hogy bármelyikre is kattintva tovább tudjunk menni, egy szinttel lejjebb.

6. Tegyük linkké a listaelemeket!

Ahhoz, hogy a megjelenített elemek gyermekei is előcsalogathatóak legyenek, minden egyes listaelemet linkké kell alakítani, és ezáltal megoldani, hogy az újonnan betöltődő lista a kattintott elem gyermekeit mutassa ugyanezen program eredményeként. Másként közelítve: paraméterezhetővé kell tennünk a programunkat, ahol a paraméter mindig az az objektum, melynek listázni szeretnénk a gyermekeit. Ha például a window.Math elemeire leszünk kíváncsiak, akkor a paraméterezés az alábbiak szerint alakuljon:
    https://infojegyzet.hu/.../obj/?window.Math
A forráskódban ehhez paraméterváltozót szükséges használnunk az eddig konstans módon szerepeltett window elem helyett. Továbbá meg kell oldanunk, hogy paraméter hiányában a window objektum gyermekeit lássuk, pont úgy, mint eddig, csak hivatkozásként megjelenítve őket. A megvalósítást az alábbi forráskód mutatja:
<ol>6.
    <h4>Az elem objektumai:           </h4><div id='blokk1'></div><hr>
    <h4>Az elem függvényei:           </h4><div id='blokk2'></div><hr>
    <h4>Az elem változói, konstansai: </h4><div id='blokk3'></div><hr>
</ol>

<script>
	if( location.search!="" )  objektum = location.search.substr(1)
	else                       objektum = "window"
	tulajdonsagok = Object.getOwnPropertyNames( eval(objektum) )
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
	    nev  = objektum + "." + tulajdonsagok[i]
	    link = "<a href='./?" + nev + "'>" + nev + "</a>"
	    tipus = typeof eval( nev )
	    if( tipus=="object" )
	    {
		blokk1.innerHTML += "<li> " + link + " : " + tipus
	    }
	    else if( tipus=="function" )
	    {
		blokk2.innerHTML += "<li> " + link + " : " + tipus
	    }
	    else
	    {
		blokk3.innerHTML += "<li> " + link + " : " + tipus
	    }
	}
</script>
Programunk aktuális kiegészítése több ponton is magyarázatot érdemelhet. Kipróbálva a programot, örülhetünk is, és gyanakodhatunk is. Örülhetünk, mert az újonnan kialakított linkjeink szépen működnek, kattintás után a paraméter megjelenik az URL-ben, és a legtöbb esetben az új képernyőtartalom mutatja is a kiválasztott objektumunk saját gyerekeit. Ez volt a cél. Immár megcsodálhatjuk az összes matematikai függvényt és konstanst, ismerős elemeket találhatunk a az window.location saját elemei között, vagy éppen áttekinthetjük az sztringműveletek listáját. De miért csak egy elem található a window.document saját gyermekei között? És miért üres a window.history, vagy a window.navigator listája?

7. Keressünk még elemeket!

Valóban az a helyzet, hogy az Object.getOwnPropertyNames nem minden esetben sorolja fel az összes említhető tulajdonságát (vagyis gyerekét) egy objektumnak. Éppen ezért hajlamosak lehetünk más megközelítés után nézni, amire van is lehetőségünk, hiszen például a
    for( var elem in window )
    {
	document.write( "<li> window." + elem )
    }
programmal is kiirathatjuk a window objektum elemeit. Persze, jogos az észrevétel: ezúttal sokkal kevesebb elem került listázásra, mint a korábbi változattal, tehát mondhatnánk, kicsit sem vagyunk előrébb. Ám a helyzet az, hogy ha ugyanezt a programot nem a window objektumra, hanem a window.document-re próbáljuk ki, akkor az eddigi 1 helyett százas nagyságrendben kapunk eredményt.
    for( var elem in window.document )
    {
	document.write( "<li> window.document." + elem )
    }
Ez pedig arra ösztönözhet, hogy akár a window.history, vagy a window.navigator elemeket is megvizsgáljuk ezzel az új megközelítéssel. Az eredmény pedig önmagáért beszél: ismét találtunk eddig fel nem lelt elemeket. Úgy kell tehát tökéletesítenünk a 6. pontig kialakított programunkat, hogy az abban szereplő Object.getOwnPropertyNames által fémjelzett megközelítést ki kell egészítenünk az imént kipróbált módszerrel. Másként fogalmazva össze kell építenünk a két lehetőséget. Tegyük meg!
<ol>7.
    <h4>Az elem objektumai:           </h4><div id='blokk1'></div><hr>
    <h4>Az elem függvényei:           </h4><div id='blokk2'></div><hr>
    <h4>Az elem változói, konstansai: </h4><div id='blokk3'></div><hr>
</ol>

<script>
	if( location.search!="" )  objektum = location.search.substr(1)
	else                       objektum = "window"
	tulajdonsagok = Object.getOwnPropertyNames( eval(objektum) )
	for( var elem in eval(objektum) )
	{
	    if( ! tulajdonsagok.includes( elem ) )
	          tulajdonsagok.push( elem )
	}
	tulajdonsagok.sort()
	for( i=0; i<tulajdonsagok.length; i++ )
	{
	    nev  = objektum + "." + tulajdonsagok[i]
	    link = "<a href='./?" + nev + "'>" + nev + "</a>"
	    tipus = typeof eval( nev )
	    if( tipus=="object" )
	    {
		blokk1.innerHTML += "<li> " + link + " : " + tipus
	    }
	    else if( tipus=="function" )
	    {
		blokk2.innerHTML += "<li> " + link + " : " + tipus
	    }
	    else
	    {
		blokk3.innerHTML += "<li> " + link + " : " + tipus
	    }
	}
</script>
Azt tettük tehát, hogy az új módszerünket jelentő ciklussal végignéztük az objektumunk elemeit, és azok mindegyikéről meghatároztuk, hogy az szerepelt-e már a tulajdonsagok nevű tömbünkben. Amelyek még nem szerepeltek benne, azokat a push() tömbfüggvény segítségével belehelyeztük. Így programunk most már még teljesebb, még részletesebb. De vajon nem lehetne-e informatívabb, ha a harmadik blokkban a változók, és konstansok részben nemcsak az elemek típusát, hanem az értékét is megjelenítenénk?

8. Jelenítsük meg a változók és konstansok értékeit is a típusuk után!

Mint láttuk fentebb már többször is, ha egy elem nevét egy változóban tároljuk, akkor ennek az elemnek az értékéhez az eval() függvénnyel férhetünk hozzá, ahol a függvény paramétere az az változó, aminek az értéke a kérdéses értékű elem neve.
	ertek = eval(nev) ;
Az elképzelés túl szép volna, ha ennyire egyszerű volna. Ám több kritikus pontja is van a dolognak: Éppen ezért, ezen problémák kivédésére hozzunk létre egy értékíró függvényt, mely megelőzi a hibás értékkiolvasást, illetve kiírható állapotba hozza a kritikus tartalmú, vagy hosszúságú szöveges adatokat is. Ennek az elkészítendő függvénynek az eredményét fogjuk megjeleníteni a programunkban.
A fentiek alapján elkészült új ertekiro() függvényünk így néz ki:
    function ertekiro( tipus , nev )
    {
	try{ ertek = eval(nev) }  catch(error) { ertek = "[" + error + "]" }

	if( tipus == "string" )
	{
	  while( ertek.indexOf("<") > -1 )  ertek = ertek.replace("<","&lt;")
	  while( ertek.indexOf(">") > -1 )  ertek = ertek.replace(">","&gt;")
	}

	if( tipus == "string" && ertek.length>256 )
	  roviden = ertek.substr(0,60) + "..."
	else
	  roviden = ertek

	e = "<span title='" + ertek + "'>" + roviden + "</span>"

	return e
    }
A függvény felhasználásával pedig csupán egyetlen sort kell kiegészítenünk a 7. pontban szereplő programváltozatunkban. (A kiegészítést sortörés nélkül, az eredeti sor folytatásaként kell a kódban megvalósítani!)
8.
	  ... ...

	  else
	  {
	     blokk3.innerHTML += "<li> " + link + " : " + tipus
	                                       + " : " + ertekiro(tipus,nev)
	  }

	  ... ...
Bár a programunk e változata már mindent tud azon célok közül, amiket az oldal tetején megfogalmaztunk, ennek ellenére bántó lehet, hogy eljutva valamelyik "legalsó" szintre már semmi tájékoztatást nem kapunk arról, hogy hova jutottunk, és ott mi van. Illetve az sem feltétlenül elegáns, hogy nincs a képernyőnek egy fejléce, mely alapján tájékozódhatnánk, hogy éppen merre járunk, mit látunk.
Ennyi finomítást talán még megérdemel a művünk.

9. Utolsó simítások

Végül tehát a jobb követhetőség kedvéért adjunk egy fejlécet a programunk listája elé, melyben kiírjuk a vizsgált elem nevét, típusát, ha lehetséges, akkor az értékét is, és feltüntetjük a felsorolt gyermek elemek számát! Valamint oldjuk meg, hogy ha esetleg nincs listázott objektum, függvény, vagy változó, akkor ezt jelöljük egy-egy "nincsenek" szóval! Az oldal legtetején biztosítsunk lehetőséget az egy szinttel feljebb lépéshez! A kész program forráskódja az alábbi képre kattintva tekinthető meg.
előző oldal random oldal következő oldal


2022-12-03 23:04:15 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 tizenhárom + hét?
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