Obtaining a list of an object properties and methods

[Norm]

Is there a way in Javascript to obtain a list of the methods and properties of an object? Like what can be obtained in Java by using the Reflection classes.

Thanks,
Norm

[PeejAvery]

Every JavaScript object, unless overwritten, contains a hidden toString() method. By calling this, the whole object can be shown as a comma delimited string.

That's about as good as you're going to get.

[Xeel]

If you just need a good reference personally I find these very usefull:

http://www.howtocreate.co.uk/tutorials/javascript/domstructure - great website with schemes, lists and all you need to understand DHTML and DOM structure;

http://krook.org/jsdom/ - great Java-style JS API doc;

http://codepunk.hardwar.org.uk/css2js.htm - javascript equivalents to access CSS properties;

http://htmldog.com/reference/htmltags/ - list of all the XHTML tags with properties and attributes of each and every one;


And if it's something generic you want to write, not sure it can be done with pure js.

[Xeel]

Never thought about the subject btw, so I googled it. Found some interesting articles:

http://pietschsoft.com/post/2008/02/Simple-JavaScript-Object-Reflection-API-(NET-Style).aspx (http://pietschsoft.com/post/2008/02/Simple-JavaScript-Object-Reflection-API-%28NET-Style%29.aspx)
http://blogs.msdn.com/coding4fun/archive/2007/07/26/4073227.aspx

[PeejAvery]

Xeel, I believe you misunderstood the question. The author wanted to know how to list all methods and properties of a specific object.

[Xeel]

yup, that's exactly what I understood. And there could be two purposes: 1. Norm wanted to know actual methods and properties just for a reference, 2. or wanted to write some wild generics stuff (Norm loves generics, believe me! :D).

In the first case, I just gave some reference pages.

For the second case it would not be about reference but code requirements. So I posted two examples of object reflecion in JS.

[Norm]

Thanks for the references.
I'm sitting in on a web design class here at UNA part of which is on javascript, which I have very little experience in. I notice that there are differences between browsers on what is supported. I thought that if when in a specific browser, I could ask what methods and properties it uses with an object, that would help when coding where there are differences between the browsers. The browser itself would tell you what it was using and you wouldn´t have to rely on some documentation that might be out of date.

thanks to all,
Norm

[Xeel]

About JS and cross-browser compatibility

Actually it's good to know what exists out there these days, so every web developer could decide what browser to support. A pretty full comparison tables can be found here (http://en.wikipedia.org/wiki/Comparison_of_web_browsers).

After several articles on this subject and years and years of experiments I would give a brief list of things to avoid if you are trying to make it work almost everywhere (except text browsers of course):

- in some cases it's imperative not to specify the js version in script tag. If you define one depending on version some properties or methods will not work even if the browser support them. If I remember right the property was even declared deprecated. And despite that it's already v1.9 out there only Firefox 3.1 gets it right and Opera v10 will do as well when final release comes out. Considering this report (http://en.wikipedia.org/wiki/JavaScript#Versions) - v1.5 would be the most compatible version for this day, so be careful when using some neat methods of the latest APIs.

- some CSS properties are tricky too. For example to change opacity of a an element the most compatible way would be:<script type="text/javascript">
function changeOpacity(){
var el = document.getElementById("myElement");
el.style.opacity = 0.5; //the CSS3 way (Opera 9, Firefox 3, Safari 1.2+)
el.style.filter = "alpha(opacity='50')"; //older IE way
el.style.MozOpacity = 0.5; //old GRE browsers way (Mozilla)
el.style.KHTMLOpacity = 0.5; //older Safari and Konqueror
}
</script>
<form>
<input type="button" value="test" onclick="changeOpacity();" />
</form>
<div id="myElement" style="width:200px; height:200px; background-color:#036;"></div>The sad thing is that to make it work in most of the browsers you would need to run all these four lines always. Each browser will take its own property, the others will be ignored.

- use generic ways to walk through the DOM defined by W3C, especially when working with frames.

- same for handling events and their properties. IE still has its own way to work with events, so it's necessary to check if the browser is capable of handling an event before altering one:<script type="text/javascript">
function onlyNumbers(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
</script>

<form>
<input type="text" value="" size="20" onkeypress="return onlyNumbers(event);" /></td>
</form>

- do not use deprecated property values. A common error these days happens when people use true/false values for disabled or readonly properties, or document.all to access elements. The only correct way to do it is:document.getElementById("el1").disabled = "disabled"; //ON
document.getElementById("el2").disabled = ""; //OFF
document.getElementById("el3").readOnly = "readonly"; //ON
document.getElementById("el4").readOnly = ""; //OFFAnd document.all is deprecated. To find an element there are getElementById(), getElementsByTagName() and getElementsByTagNameNS() methods. Also you can access an element by a reference from another parent or child element.

- do not use browser specific properties/methods unless you provide equivalents of these for other browsers (like in the opacity case).

- use attribute name only for forms (form, input, select, textfield, etc.). For the rest of the elements use id.


I can talk all day about it, but that would be it I suppose. Hope I helped :p

[Norm]

Thanks again.
Lots of good stuff to consider. I`m a "visiting professor" for a web design course here at UNA and really only know java. So I'm a little light on the HTML and javascript part of the class.
Norm