error: object required when declaring variable

**Richard Cornford** · Jul 23 '05, 01:58 PM

Re: error: object required when declaring variable

fred wrote:[color=blue]
> I don't know if I'm doing this correctly. I have a little
> programming experience in python, c++ and some others but
> this is my first time with javascript. I'm trying have
> my website detect the user's browser[/color]

Don't ever try to detect the user's browsers. If you want to match
script behaviour with the DOM of the environment in which it is
executing use feature detection instead (see the FAQ, particularly <URL:
http://jibbering.com/faq/#FAQ4_26 > and related links).
[color=blue]
> and assign a variable with different items if it's Internet
> Explorer. My code works with firefox, opera and others but
> not IE.[/color]

It only works in Opera and Firefox as you have them configured (and
given a fairly vague definition of "works").
[color=blue]
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1"> <title>Untitl ed Document</title>
>
> <script language="JavaS cript" type="text/javascript">
> </script>
> </head>
>
> There it is, I get the error on:(line
> 10)sizex=docume nt.body.clientW idth[/color]
^^^^^^^^^^^^^
The document.body property is not populated until the BODY element is
created (at the soonest) and the BODY element cannot be created until
the HTML parser sees (or implies) the opening body tag. Script executed
inline within the HEAD will have finished prior to the browser
encountering the opening BODY tag in the HTML source.

Richard.

**Fred Oz** · Jul 23 '05, 01:58 PM

Re: error: object required when declaring variable

What Richard said. Here is a viewport tester that tells you what
properties work for a the user agent it is loaded into.

This has been posted before, but I've done a little extra work and
think this is a better version.

Have fun, Fred.

<html><head>
<title>Viewpo rt Tester</title>
<meta name="author" content="Variou s">
<meta name="keywords" content="">
<meta name="descripti on" content="
This page was orignally from:

404 Not Found

http://www.quirksmode.org/viewport/compatibility.html

and has been modified for a table layout that can be
copied and pasted from different browsers to more easily
compile a browser compatability matrix.

It also report user agent (UA) and platform, however
these are not reliable because some UA's allow the user
to sepcify what will reported, regardless of the actual UA
or platform.">

<style type="text/css">
td,th
{font-size: 14px; padding-right: 5; padding-left: 10;
border-bottom: 1px solid #999999;}
..pass
{font-size: 14px; background-color: green;
font-weight: bold; text-align: center; color: gold;}
..fail
{font-size: 14px; background-color: red;
font-weight: bold; text-align: center; color: darkblue;}
..Yes
{font-size: 14px; background-color: green;
font-weight: bold; text-align: center; color: gold;}
..No
{font-size: 14px; background-color: red;
font-weight: bold; text-align: center; color: darkblue;}
..count
{font-size: 14px; text-align: right; font-weight: bold;
padding-right: 10; padding-left: 10;}
p
{font-family: sans-serif; size: 14px;}
</style>

<script type="text/javascript">
var x = navigator;
var props = new Array(
'self.pageXOffs et',
'self.pageYOffs et',
'self.screenX',
'self.screenY',
'self.innerHeig ht',
'self.innerWidt h',
'self.outerHeig ht',
'self.outerWidt h',
'self.screen.he ight',
'self.screen.wi dth',
'self.screen.av ailHeight',
'self.screen.av ailWidth',
'self.screen.av ailTop',
'self.screen.av ailLeft',
'self.screen.To p',
'self.screen.Le ft',
'self.screenTop ',
'self.screenLef t',
'self.screen.co lorDepth',
'self.screen.pi xelDepth',
'document.body. clientHeight',
'document.body. clientWidth',
'document.body. scrollHeight',
'document.body. scrollWidth',
'document.body. scrollLeft',
'document.body. scrollTop',
'document.body. offsetHeight',
'document.body. offsetWidth',
'document.body. offsetTop',
'document.body. offsetLeft'
);
function uaDetail() {
var p = '<table border=\"0"\>'
+ '<tr><th style=\"text-align: left;\">Propert y</th>'
+ '<th style=\"text-align: left;\">Value</th</tr>';
if (navigator) {
var x = navigator;
p += '<tr><td>CodeNa me</td><td>' + x.appCodeName + ' </td></tr>'
p += '<tr><td>MinorV ersion</td><td>' + x.appMinorVersi on +
' </td></tr>'
p +='<tr><td>Name </td><td>' + x.appName + ' </td></tr>'
p +='<tr><td>Vers ion</td><td>' + x.appVersion + ' </td></tr>'
p +='<tr><td>Cook ieEnabled</td><td>' + x.cookieEnabled +
' </td></tr>'
p +='<tr><td>CPUC lass</td><td>' + x.cpuClass + ' </td></tr>'
p +='<tr><td>OnLi ne</td><td>' + x.onLine + ' </td></tr>'
p +='<tr><td>Plat form</td><td>' + x.platform + ' </td></tr>'
p +='<tr><td>User Agent (UA) </td><td>' + x.userAgent +
' </td></tr>'
p +='<tr><td>Brow serLanguage</td><td>' + x.browserLangua ge +
' </td></tr>'
p +='<tr><td>Syst emLanguage</td><td>' + x.systemLanguag e +
' </td></tr>'
p +='<tr><td>User Language</td><td>' + x.userLanguage + ' </td></tr>'
p +='</table>'
} else {
p = 'Your user agent does not support the navigator object,'
+ '\nso I can\'t determine your viewport properties';
}
return p;
}
function viewportDetail( ) {
var count = 0;
var printstring = '';
var c = '';
printstring += '<table border=\"0\"><t r>'
+ '<th>#</th>'
+ '<th style=\"text-align: left;\">Propert y</th>'
+ '<th>Supported? <br>y/n</th>'
+ '<th>Value</th>'
+ '</tr>';
for (var i=0;i<props.len gth;i++) {
if (!self.screen && props[i].indexOf('self. screen') != -1) continue;
if (!document.body && props[i].indexOf('docum ent.body') != -1)
continue;

(eval(props[i]) || eval(props[i]) == 0 ) ? c = 'Yes' : c = 'No';
++count;
printstring +=
'<tr><td class=\"count\" >' + count
+ '</td><td>' + props[i]
+ '</td><td class=\"' + c + '\">' + c
+ '</td><td>' + eval(props[i])
+ '</td></tr>';
if (props[i].indexOf('docum ent.body') != -1) {
var end = props[i].substring(prop s[i].lastIndexOf('. ')+1);
newprop = 'document.docum entElement.' + end;
if (eval(newprop)) {
(eval(newprop)) ? c = 'Yes' : c = 'No';
++count;
printstring +=
'<tr><td class=\"count\" >' + count
+ '</td><td>' + newprop
+ '</td><td class=\"' + c + '\">' + c
+ '</td><td>' + eval(newprop)
+ '</td></tr>';
} } }
printstring += '</table>'
return printstring;
}
function getUA() {
if (!document.getE lementById) return;
document.getEle mentById('uaDet ail').innerHTML = getUA();
}
function reGet() {
if (!document.getE lementById) return;
document.getEle mentById('viewp ortDetail').inn erHTML = viewportDetail( );
}
</script>
</head>
<body>
<h4>Your user agent's properties<sup> <a href="#note">1</a></h4>
<pre id="uaDetail">
<script type="text/javascript">
document.write( uaDetail());
</script>
</pre>
<h4>These are the properties that work in your browser:</h4>
<pre id="viewportDet ail">
<script type="text/javascript">reG et();</script>
</pre>
<p>(<a href="#" onclick="reGet( ); return false">Refresh</a> list)</p>
<p><a name="note">The user agent values are as reported by your user
agent (browser). Depending upon the UA you are using, you may be able
to change these in a preference setting. Some browsers pretend to
be some other browser by default - please check your UA's settings
to determine if the values are accurate.</a></p>
<div style="margin-left: 50;"><p id="zz" style="padding-left: 20;"><a
href="#" onclick="
var x = document.getEle mentById('zz');
var msg = 'offsetTop: ' + x.offsetTop
+ '\noffsetLeft: ' + offsetLeft;
alert(msg);
return false;
">Set offsetTop/Left</a></p></div>

</body></html>

**Richard Cornford** · Jul 23 '05, 01:59 PM

Re: error: object required when declaring variable

Fred Oz wrote:[color=blue]
> ... . Here is a viewport tester that tells you what
> properties work for a the user agent it is loaded into.[/color]

That isn't strictly true. The script lists a number of properties of the
browser but does nothing towards indicating which of them most closely
relate to the viewport/client-region of any particular browsers.

<snip>[color=blue]
> 'self.screen.he ight',[/color]
<snip>[color=blue]
> 'self.screen.pi xelDepth',[/color]

No screen properties relate in any way to the viewport dimensions (it
wouldn't even be valid to assume they represented an upper limit to the
viewport dimensions).

<snip>[color=blue]
> function uaDetail() {
> var p = '<table border=\"0"\>'
> + '<tr><th style=\"text-align: left;\">Propert y</th>'
> + '<th style=\"text-align: left;\">Value</th</tr>';
> if (navigator) {
> var x = navigator;[/color]
<snip>[color=blue]
> } else {
> p = 'Your user agent does not support the navigator object,'
> + '\nso I can\'t determine your viewport properties';[/color]

This is a bizarre, and slightly ludicrous, comment to be making to the
user. The browser's lack of support for a - navigator - object has
nothing to do with its ability to report viewport dimensions (either in
reality or in any of the rest of the code on this page).

<snip>[color=blue]
> if (props[i].indexOf('docum ent.body') != -1) {
> var end = props[i].substring(prop s[i].lastIndexOf('. ')+1);
> newprop = 'document.docum entElement.' + end;
> if (eval(newprop)) {
> (eval(newprop)) ? c = 'Yes' : c = 'No';[/color]
<snip>

In the event that the expression - eval(newProp) - evaluated as true
then the following conditional expression must always assign "Yes" to
the value of - c -.

The recent thread with the subject "Top warning signs of bad code?"
proposes categorising all uses of - eval - to resolve constructed dot
notation property accessors as 'bad code'. This is a specific example of
where such an abuse could be directly replaced with a bracket notation
property accessor and the - eval - use omitted.

However, the rest of the code also makes extensive use of - eval, - and
because the data has been prepared in the form of full dot notation
property accessor stings their resolution to correspo0nding objects
could not be achieved otherwise (except with the Function constructor).
But the assertion that - eval - use for this task is wrong remains valid
because it is still unnecessary to use - eval - here, it is just a
matter of designing the need for - eval - out of the code.

Directly replacing the - viewportDetail - function and the - props -
array with the following, plus the addition of some additional functions
and arrays, removes the need for - eval - from the design (though it is
not the only way of doing so):-

var objects = [
['self'],
['screen'],
['document', 'body'],
['document', 'documentElemen t']
];
function arToString(){
return this.join('.');
}
for(var c = 0;c < objects.length; c++){
objects[c].toString = arToString;
}
var props = new Array(
'pageXOffset',' pageYOffset',
'screenX','scre enY',
'innerHeight',' innerWidth',
'outerHeight',' outerWidth',
'height','width ',
'availHeight',' availWidth',
'availTop','ava ilLeft',
'Top','Left',
'screenTop','sc reenLeft',
'colorDepth','p ixelDepth',
'clientHeight', 'clientWidth',
'scrollHeight', 'scrollWidth',
'scrollLeft','s crollTop',
'offsetHeight', 'offsetWidth',
'offsetTop','of fsetLeft'
);

function getObjectWithAr ray(ar){
var o = this, c = 0;
while(
(c < ar.length)&&
(
(
(o = o[ar[c++]])&&
(
(typeof o == 'object')||
(typeof o == 'function')
)
)||
(o = null)
)
);
return o;
}

function viewportDetail( ) {
var obj, prop,count = 0;
var outAr = [
'<tr><td class=\"count\" >','',
'<\/td><td>','',
'<\/td><td>','',
'<\/td><\/tr>'
];
var printstring = ('<table border=\"0\"><t r>'
+ '<th>#<\/th>'
+ '<th style=\"text-align: left;\">Propert y<\/th>'
+ '<th>Value<\/th>'
+ '<\/tr>');
for(var c = 0;c < objects.length; c++){
obj = getObjectWithAr ray(objects[c]);
if(obj){
for(var d = 0;d < props.length;d+ +){
if(typeof obj[(prop = props[d])] == 'number'){
outAr[1] = count++;
outAr[3] = objects[c]+'.'+prop;
outAr[5] = obj[prop];
printstring += outAr.join('');
}
}
}
}
return (printstring + '<\/table>');
}

Richard.

**Fred Oz** · Jul 23 '05, 01:59 PM

Re: error: object required when declaring variable

Richard Cornford wrote:
[snip][color=blue]
> Directly replacing the - viewportDetail - function and the - props -
> array with the following, plus the addition of some additional functions
> and arrays, removes the need for - eval - from the design (though it is
> not the only way of doing so):-
>[/color]
[snip]

Thanks Richard, your comments are gratefully received.

Regards, Fred.

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 02:35 PM

Re: error: object required when declaring variable

Fred Oz wrote:
[color=blue]
> [...] Here is a viewport tester that tells you what
> properties work for a the user agent it is loaded into.
>
> This has been posted before, but I've done a little extra work and
> think this is a better version.
> [...][/color]

People might want to try

<http://www.pointedears .de/scripts/test/ObjectInspector/nightly/latest/index>

instead (even if there is still a bug crashing IE on expanding
the "history" property subtree). Comments and bug reports not
covered by the bug list in "About" are welcome.

PointedEars
--
"In christianity neither morality nor religion
come into contact with reality at any point."
-- Friedrich Wilhelm Nietzsche