By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,381 Members | 1,641 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,381 IT Pros & Developers. It's quick & easy.

How Does One Sleuth/Debug JavaScript

P: n/a
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.

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.

If I could display the results of each function, then I would know which
functions do work and be able to isolate my efforts on just those that dont.

How does use JavaScript to display the results of each of these defined
JavaScript functions?

Here is the full code of of the example 4-6 as I have it keyed;
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<SCRIPT LANGUAGE="JavaScript">
// ** 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"
}
}
// Utility function returns rendered height of object content in pixels
function getObjHeight(obj) {
if (isNav) {
return obj.clip.height
} else {
return obj.clientHeight
}
}
// Utility function returns rendered width of object content in pixels
function getObjWidth(obj) {
if (isNav) {
return obj.clip.width
} else {
return obj.clientWidth
}
}
// Utility function returns the available width space in browser window
function getInsideWindowWidth() {
if (isNav) {
return window.innerWidth
} else {
return document.body.clientWidth
}
{
// Utility function returns the available content height space in browser
window
function getInsideWindowHeight() {
If (isNav) {
return window.innerHeight
} else {
return document.body.clientHeight
}
}
// Utility function to position an element at a specific x,y location
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
}
// ** End Library code ***

// 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)
// 'contentObj' is the element content, necesary for IE 4 to return the
true width
var contentObj = eval("document."+ coll + "banner")
var x = Math.round((getInsideWindowWidth()/2)-(getObjWidth(contentObj)/2))
var y =
Math.round((getInsideWindowHeight()/2)-(getObjHeight(contentObj)/2))
shiftTo(obj, x, y)
obj.visibility = "visible"
}
// Special handing for CSS-P redraw bug in Navigator 4
function handleResize() {
if (isNav) {
// causes extra re-draw, but must do it to get banner object color redrawn
location.reload()
} else {
centerIt()
}
}
</SCRIPT>
</head>

<body onLoad="centerIt()" onResize="handleResize()">
<DIV ID="banner" STYLE="position:absolute; visibility:hidden; left:0; top:0;
background-color:yellow; width:1; height:1">
<P ID="txt" STYLE="position:absolute; left:0; top:0; font-size:36pt;
color:red">
Congratulations!
</P>
</DIV>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:bd*******************@news.demon.co.uk...
"news frontiernet.net" <rf******@rconnect.com> wrote in message
news:S5*****************@news01.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 >

Jul 20 '05 #2

P: n/a
JRS: In article <S5*****************@news01.roc.ny>, seen in
news:comp.lang.javascript, news frontiernet.net <rf******@rconnect.com>
posted at Sat, 28 Jun 2003 21:51:46 :-

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.


Use an editor which displays line numbers. Notepad, for me, does not;
but EDIT (DOS box) does, and so does PFE, DiDa, and the Pascal IDE.
Also, the better file viewers will show line number.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MSIE 4
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.