How Does One Sleuth/Debug JavaScript

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • news frontiernet.net

    How Does One Sleuth/Debug JavaScript

    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="Micros oft FrontPage 5.0">
    <meta name="ProgId" content="FrontP age.Editor.Docu ment">
    <SCRIPT LANGUAGE="JavaS cript">
    // ** 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(navig ator.appVersion ) >=4){
    if (navigator.appN ame == "Netscape") {
    isNav = true
    } else {
    isIE = true
    coll = "all."
    styleObj = ".style"
    }
    }
    // Utility function returns rendered height of object content in pixels
    function getObjHeight(ob j) {
    if (isNav) {
    return obj.clip.height
    } else {
    return obj.clientHeigh t
    }
    }
    // 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 getInsideWindow Width() {
    if (isNav) {
    return window.innerWid th
    } else {
    return document.body.c lientWidth
    }
    {
    // Utility function returns the available content height space in browser
    window
    function getInsideWindow Height() {
    If (isNav) {
    return window.innerHei ght
    } else {
    return document.body.c lientHeight
    }
    }
    // 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((get InsideWindowWid th()/2)-(getObjWidth(co ntentObj)/2))
    var y =
    Math.round((get InsideWindowHei ght()/2)-(getObjHeight(c ontentObj)/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="centerI t()" onResize="handl eResize()">
    <DIV ID="banner" STYLE="position :absolute; visibility:hidd en; 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>


  • news.frontiernet.net

    #2
    Re: How Does One Sleuth/Debug JavaScript


    "Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
    news:bdl8lt$gc7 $1$8300dec7@new s.demon.co.uk.. .[color=blue]
    > "news frontiernet.net " <rfrohrer@rconn ect.com> wrote in message
    > news:S5oLa.2244 $TK5.1464@news0 1.roc.ny...[color=green]
    > >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.[/color]
    >
    > 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.
    >[color=green]
    > >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.[/color]
    >
    > 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.
    >[/color]

    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.
    [color=blue]
    > <snip>[color=green]
    > > <SCRIPT LANGUAGE="JavaS cript">[/color]
    >
    > The language attribute of script tags has been deprecated in favour of
    > the type attribut:-
    >
    > <script type="text/javascript">
    >[/color]

    Thank you.
    [color=blue][color=green]
    > > // ** 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(navig ator.appVersion ) >=4){
    > > if (navigator.appN ame == "Netscape") {
    > > isNav = true
    > > } else {
    > > isIE = true
    > > coll = "all."
    > > styleObj = ".style"
    > > }
    > > }[/color]
    >
    > 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.
    >[/color]

    This is well over my head at this point of my familiarity with JavaScript.
    [color=blue]
    > <snip>[color=green]
    > > // Utility function returns the available content height space in[/color]
    > browser[color=green]
    > > window
    > > function getInsideWindow Height() {
    > > If (isNav) {[/color]
    >
    > 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.
    >[/color]

    Oh Thank You, so very much. These syntax errors are soooooo hard for human
    eyes to detect.
    [color=blue][color=green]
    > > return window.innerHei ght
    > > } else {
    > > return document.body.c lientHeight
    > > }
    > > }[/color]
    >
    > The window.innerHei ght/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.innerHei ght 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.docuem entElement 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.co mpatMode)&&
    > (document.compa tMode == 'CSS1Compat')&&
    > (document.docum entElement)){
    > return document.docume ntElement.clien tHeight;
    > }else if(document.bod y){
    > return document.body.c lientHeight;
    > }
    > }
    >
    > - 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.
    >[/color]

    This is well over my head at this point.
    [color=blue]
    > <snip>[color=green]
    > > // center an element named banner in the current window/frame, and[/color]
    > show it[color=green]
    > > function centerIt() {
    > > // 'obj' is the positionable object
    > > var obj = eval("document. " + coll + "banner" + styleObj)[/color]
    > <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 >[/color]

    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[color=blue]
    >
    > 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 >
    >
    >[/color]


    Comment

    • Dr John Stockton

      #3
      Re: How Does One Sleuth/Debug JavaScript

      JRS: In article <S5oLa.2244$TK5 .1464@news01.ro c.ny>, seen in
      news:comp.lang. javascript, news frontiernet.net <rfrohrer@rconn ect.com>
      posted at Sat, 28 Jun 2003 21:51:46 :-[color=blue]
      >
      >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.[/color]

      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.demo n.co.uk/js-index.htm> JS maths, dates, sources.
      <URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.

      Comment

      Working...