Re: How Does One Sleuth/Debug JavaScript

"Richard Cornford" <Richard (AT) litotes (DOT) demon.co.uk> wrote

"news frontiernet.net" <rfrohrer (AT) rconnect (DOT) com> wrote in message
news:S5oLa.2244$TK5.1464 (AT) news01 (DOT) roc.ny...
I have key entered and tried to run example 4-6 from Dany Goodmans
DYNAMIC HTML book, version one that is on pages 94-96. This is part
of my effort to learn JavaScript.

From the code presented below I would recommend that you stop trying to
learn anything from that book, it is out of date and you will eventually
have to un-learn nearly everything it teaches you.

I checked each byte and position back against the book for syntax
errors but still cannot get this script to work.

I tells me that;
1. Line 49 has a missing ";" at bye 13
2. Line 89 has a missing object at byte 1

How do I find the problems with this script? I am guessing at
the line numbers and 49 does not seem to be even near anything
with a ";" in it in the book.

The error messages produced by IE are never the most useful. Opera 7 or
Mozilla/Netscape 7/Firebird/Gecko browsers produce much more informative
error messages.

Thank you for alerting me to tryin the other browsers. However, Opera told
me nothing and Netscape 7 told me that the centerIt() function was not
defined. So, I was left puzzled by those browsers too.

snip
SCRIPT LANGUAGE="JavaScript"

The language attribute of script tags has been deprecated in favour of
the type attribut:-

script type="text/javascript"

Thank you.

// ** Begin library code better placed in an external API ***
// set global variable for browser detection and references building
var isNav, isIE
var coll = ""
var styleObj = ""
if (parseInt(navigator.appVersion) >=4){
if (navigator.appName == "Netscape"){
isNav = true
} else {
isIE = true
coll = "all."
styleObj = ".style"
}
}

Browser detecting based on the properties of the navigator object is
completely unreliable as years of scripts taking this approach has
resulted in numerous of browsers either pretending to be other browsers
from the outset or offering the user the choice to have their browser
spoof a number of other browsers. As a result the same browser could
take either branch as a result of this - if - statement.

The preferred approach is to use feature and object detecting to
directly ascertain the browser's support for the features that the
script would like to use.

This is well over my head at this point of my familiarity with JavaScript.

snip
// Utility function returns the available content height space in
browser
window
function getInsideWindowHeight() {
If (isNav) {

This will be line 49! The initial letter of the - if - statement is a
capital. JavaScript is case sensitive so - if - is a JavaScript
statement and - If - is not. This error will render the function invalid
and result in any reference to it complaining that no object can be
found.

Oh Thank You, so very much. These syntax errors are soooooo hard for human
eyes to detect.

return window.innerHeight
} else {
return document.body.clientHeight
}
}

The window.innerHeight/Width properties are supported on many more
browsers that just Netscape 4, and it must be the preferred option as it
is much less trouble to asses than the various clientHeight/Width
properties. A more meaningful test for a browsers support for a
window.innerHeight property is to perform a - typeof - test on it:-

if(typeof innerHeight == 'number'){
// read the innerHeight in preference to clientHeight.
return innerHeight;
}else{

- and on IE browsers from version 5.5 the clentHeight property should be
read from the document.docuementElement property when the browser is in
standards compliant mode (as you would normally expect it to be when
presented with correct/valid HTML). So:-

if((document.compatMode)&&
(document.compatMode == 'CSS1Compat')&&
(document.documentElement)){
return document.documentElement.clientHeight;
}else if(document.body){
return document.body.clientHeight;
}
}

- completes the function and takes into account the various behaviours
on IE browsers.

Notice that this function is no longer interested in what browser it is
running on it is only interested in making its decision based on the
features of that browser.

This is well over my head at this point.

snip
// center an element named banner in the current window/frame, and
show it
function centerIt() {
// 'obj' is the positionable object
var obj = eval("document." + coll + "banner" + styleObj)
snip

The - eval - function is almost never (if not actually never) needed in
JavaScript. It certainly should not be used to resolve constructed dot
notation property accessors. See:-

URL: http://www.litotes.demon.co.uk/js_info/sq_brackets.html

I was following an example to pick up on the structure and syntax of
JavaScript as it is used,from what I thought to be a world class solid
source. I can see now that thing have changed since 1998 and I need the new
version of his book.

I thank you for your help.

Bob Rohrer

Richard.

--

Example JavaScript DOM listings for: Opera 7.11,
Mozilla 1.2 and ICEbrowser 5.4
URL: http://www.litotes.demon.co.uk/dom_root.html