JavaScript objektum elemző


Aki írt már javascript kódot tudja, hogy a nyelv rengeteg objektummal dolgozik, és minden objektumnak vannak böngésző-specifikus tulajdonságai, metódusai. Ilyen káoszban nem nehéz eltévedni, ráadásul nem mindig találjuk meg a Neten az adott objektum leírását.

Ebben a helyzetben segíthet ez a kis script, ami Mozilla alatt kiírja az objektum tulajdonságait és metódusait.
Explorer alatt (a function típus hiánya miatt) a függvényeket is tulajdonságként listázza, ezért ajánlott az FX használata.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
function lister(obj)
	{
	function isNumeric(value)
		{
		for(var i = 0; i < value.length; i++)
			{
			if(value.charCodeAt(i) < 48 || value.charCodeAt(i) > 57)
				{
				return false;
				}
			}
		return false;
		}
 
	if(typeof obj != 'object')
		{
		return;
		}
	try
		{
		objName = obj.toString();
		}
	catch(e)
		{
		return;
		}
 
	var methods = new Array();
	var properties = new Array();
	for(var i in obj)
		{
		try
			{
			if(typeof obj[i] == 'function')
				{
				methods[methods.length] = i;
				continue;
				}
			else
				{
				try
					{
					properties[properties.length] = new Array(i, obj[i]);
					}
				catch (e)
					{
					/* alert(e); */
					}
				}
			}
		catch(e)
			{
			/* alert(e) */
			}
		}
	methods.sort();
	properties.sort();
	methodsString = '';
	propertiesString = '';
	for(var i in methods)
		{
		methodsString += objName + '.' + methods[i] + '()\n';
		}
	for(var i in properties)
		{
		if(isNumeric(properties[i][0]) == false)
			{
			propertiesString += objName + '.' + properties[i][0] + ' = ' + properties[i][1] + '\n';
			}
		}
	var w = window.open("", "w", "width=560,height=450,resizable=yes,scrollbars=yes");
	w.document.write("<h1>Methods</h1>< pre >" + methodsString + "</ pre ><h1>Properties</h1>< pre >" + propertiesString + "</ pre >");
	w.document.close();
	}

Megjegyzés: a kód végén lévő < pre > kacsacsőreihez nem kell a space (72. sorban), sajnos a wordpress-hez használt “geshi syntax higlight” úgy értelmezi máskülönben, hogy vége a mintakódnak.

Ezt a rövid kódot egy fájlba elmentve (és a HTML fájlunkban valahol meghívva) máris használhatjuk a lister() függvény meghívásával. Pl.:

1
2
x = document.createElement('span');
lister(x);

Az ennek hatására megnyíló ablakban a következőt találjuk:

Methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
[object HTMLSpanElement].appendChild()
[object HTMLSpanElement].blur()
[object HTMLSpanElement].cloneNode()
[object HTMLSpanElement].compareDocumentPosition()
[object HTMLSpanElement].dispatchEvent()
[object HTMLSpanElement].focus()
[object HTMLSpanElement].getAttribute()
[object HTMLSpanElement].getAttributeNS()
[object HTMLSpanElement].getAttributeNode()
[object HTMLSpanElement].getAttributeNodeNS()
[object HTMLSpanElement].getElementsByTagName()
[object HTMLSpanElement].getElementsByTagNameNS()
[object HTMLSpanElement].getFeature()
[object HTMLSpanElement].getUserData()
[object HTMLSpanElement].hasAttribute()
[object HTMLSpanElement].hasAttributeNS()
[object HTMLSpanElement].hasAttributes()
[object HTMLSpanElement].hasChildNodes()
[object HTMLSpanElement].insertBefore()
[object HTMLSpanElement].isDefaultNamespace()
[object HTMLSpanElement].isEqualNode()
[object HTMLSpanElement].isSameNode()
[object HTMLSpanElement].isSupported()
[object HTMLSpanElement].lookupNamespaceURI()
[object HTMLSpanElement].lookupPrefix()
[object HTMLSpanElement].normalize()
[object HTMLSpanElement].removeAttribute()
[object HTMLSpanElement].removeAttributeNS()
[object HTMLSpanElement].removeAttributeNode()
[object HTMLSpanElement].removeChild()
[object HTMLSpanElement].removeEventListener()
[object HTMLSpanElement].replaceChild()
[object HTMLSpanElement].setAttribute()
[object HTMLSpanElement].setAttributeNS()
[object HTMLSpanElement].setAttributeNode()
[object HTMLSpanElement].setAttributeNodeNS()
[object HTMLSpanElement].setUserData()

Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
[object HTMLSpanElement].ATTRIBUTE_NODE = 2
[object HTMLSpanElement].CDATA_SECTION_NODE = 4
[object HTMLSpanElement].COMMENT_NODE = 8
[object HTMLSpanElement].DOCUMENT_FRAGMENT_NODE = 11
[object HTMLSpanElement].DOCUMENT_NODE = 9
[object HTMLSpanElement].DOCUMENT_POSITION_CONTAINED_BY = 16
[object HTMLSpanElement].DOCUMENT_POSITION_CONTAINS = 8
[object HTMLSpanElement].DOCUMENT_POSITION_DISCONNECTED = 1
[object HTMLSpanElement].DOCUMENT_POSITION_FOLLOWING = 4
[object HTMLSpanElement].DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32
[object HTMLSpanElement].DOCUMENT_POSITION_PRECEDING = 2
[object HTMLSpanElement].DOCUMENT_TYPE_NODE = 10
[object HTMLSpanElement].ELEMENT_NODE = 1
[object HTMLSpanElement].ENTITY_NODE = 6
[object HTMLSpanElement].ENTITY_REFERENCE_NODE = 5
[object HTMLSpanElement].NOTATION_NODE = 12
[object HTMLSpanElement].PROCESSING_INSTRUCTION_NODE = 7
[object HTMLSpanElement].TEXT_NODE = 3
[object HTMLSpanElement].attributes = [object NamedNodeMap]
[object HTMLSpanElement].baseURI = file:///c:/www/test.html
[object HTMLSpanElement].childNodes = [object NodeList]
[object HTMLSpanElement].className = 
[object HTMLSpanElement].clientHeight = 0
[object HTMLSpanElement].clientWidth = 0
[object HTMLSpanElement].dir = 
[object HTMLSpanElement].firstChild = null
[object HTMLSpanElement].id = 
[object HTMLSpanElement].innerHTML = 
[object HTMLSpanElement].lang = 
[object HTMLSpanElement].lastChild = null
[object HTMLSpanElement].localName = SPAN
[object HTMLSpanElement].namespaceURI = null
[object HTMLSpanElement].nextSibling = null
[object HTMLSpanElement].nodeName = SPAN
[object HTMLSpanElement].nodeType = 1
[object HTMLSpanElement].nodeValue = null
[object HTMLSpanElement].offsetHeight = 0
[object HTMLSpanElement].offsetLeft = 0
[object HTMLSpanElement].offsetParent = null
[object HTMLSpanElement].offsetTop = 0
[object HTMLSpanElement].offsetWidth = 0
[object HTMLSpanElement].ownerDocument = [object HTMLDocument]
[object HTMLSpanElement].parentNode = null
[object HTMLSpanElement].prefix = null
[object HTMLSpanElement].previousSibling = null
[object HTMLSpanElement].scrollHeight = 0
[object HTMLSpanElement].scrollLeft = 0
[object HTMLSpanElement].scrollTop = 0
[object HTMLSpanElement].scrollWidth = 0
[object HTMLSpanElement].style = [object CSSStyleDeclaration]
[object HTMLSpanElement].tabIndex = -1
[object HTMLSpanElement].tagName = SPAN
[object HTMLSpanElement].textContent = 
[object HTMLSpanElement].title =

Azért így valamivel könnyebb, mint fejben tartani ezt mind ;)

Kapcsolódó bejegyzések:

A cikket beküldte: BlackY ()

6 hozzászólás

  1. Lala says:

    Szia BlackY!

    Nekem a script úgy jelenik meg, hogy kettévágja egy reklám. Tudnátok ez ellen tenni valamit?
    Pont ilyesmiben vagyok érdekelt és sokat segítene nekem a scripted.

    Köszi,
    Lala

  2. BlackY says:

    Szia!

    Sajnos az oldal frissítése óta nincs jogom módosítani a régi cikkeket. Úgyhogy copy-pasteld ki a kódot a szövegdobozból, aztán azonnal utána ezt:
    Properties” + propertiesString);
    w.document.close();
    }
    Így ha jól látom mennie kell, ha mégsem, akkor szólj!

    Itt amúgy a Google-n kívül a WordPress is hibás ebbent, azt hiszi, hogy csak azért, hogy van egy h1 egy pre-ben, már az író a hülye, és ő tudja jobban, kijavítja (így megszakad a pre), innentől kezdve a Google reklámot meg simán beszúrhatja oda (mert ugye minden html tagon kívül van így…)

    BlackY

  3. Lala says:

    Szia!

    Köszi, hogy megnézted, akkor jófelé indultam el :)
    Lassan összeáll a kép.

    Lala

  4. BlackY says:

    Megint rosszul copy-pasteltem, úgy tűnik WP lecserélte a “-t ”-re (pár fokban utóbbi meg van döntve), úgyhogy a hibámat javítandó:
    http://blacky.extra.hu/tutorialhu/lister.html

    (A végén levő “lister(document);”-el csak mutatom, hogy működik :), az kiszedhető )

    BlackY

  5. Harder says:

    Javítottam a cikket, most nézzétek meg.

  6. BlackY says:

    Így ok, köszi :)

    BlackY

Szólj hozzá
a JavaScript objektum elemző c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>