SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Noob to Javascript

    Hi ya'll, I am a newbie to Javascripting and have been using Simply Javascript to guide me in my travels. The book is great but I am having a problem trying to get the examples to work. The simple "alert" functions are not a problem but none of the "document.getElementById or Class or whatever" seem to work. If I put an "if else" phrase in such as

    var target = document.getElementById("berenger");

    if (target != null)
    {
    alert(target.nodeName);
    }
    else
    {
    alert("not here!");
    }

    I get -not here!- in an alert box everytime. There has to be something I am missing but I don't know what it is. The examples are very clear - they just won't work for me. Thanks for the help. You guys are the best. By the way the browser I am using is IE 7.0. Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The book will mention that you need to run the code after the page elements are available.
    Pages 58 and 59 take you through that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for the help Paul, but I am still not following how to get the code to work after the page loads. I downloaded the core.js file from the site thinking I need the code from it to make the get.ElementById call work. I know I am doing this incorrectly but I simply linked to the core.js file in the head of my html file like this

    <head>
    <title>DOMinating JavaScript</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    <script type="text/javascript" src="testscript.js"></script>
    <script type="text/javascript" src="core.js"></script>
    </head>
    <body>
    The testscript.js file is my working file that has the code

    var target = document.getElementById("berenger");
    alert(target.nodeName);

    Should I be copying snippets of code from the core.js file and pasteing them in my working js file or am I totally confused and off track? If I should be copying and pasteing code where do I start and stop? Thanks again.

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You only need the core.js file if you are actually using the functions in it, like (if I remember correctly) init();
    For your test example, just move your <script>block to the bottom of the page, before the closing </body> tag.
    Code:
    <script type="text/javascript" src="testscript.js"></script>
    </body>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Placing the scripts at the bottom of the page is a best practice for speeding up your web site.
    http://developer.yahoo.com/performance/rules.html

    With the Simply Javascript book though, that still has you placing the scripts in the head, so they have a different solution.

    Their solution is to place the code in an init() function and use Core.ready() which runs that init() function when the DOM is ready

    Code javascript:
    // prepare the code
    var testCode = {
        init: function () {
            doStuffWithBerenger();
            // more init stuff as need be
        },
        doStuffWithBerenger: function () {
            var target = document.getElementById("berenger");
            if (target != null)
            {
                alert(target.nodeName);
            } else {
                alert("not here!");
            }
        }
    }
    // run the code when DOM is ready
    Core.ready(testCode);
    Last edited by paul_wilkins; Jul 31, 2008 at 15:40.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ya'll for the help. When I place the <script> tag at the bottom of my html code it worked!! I am still really confused about what all this stuff is doing but at least I can move forward in my state of dazed confusion. Chapter 4 here we come!!

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the browser parses your page code, it will execute any instructions it is told to. If you ask it to get an element on the page before it has reached that element in its parsing of the page, it will have no idea what you're talking about and say so.

    Say the parser is working its way through the page and meets this code
    Code:
    <script type="text/javascript">
      var element = document.getElementById("findMe");
    </script>
    <p id="findMe">D'oh!</p>
    The parser will read and execute the script before the paragraph has been added to the page. So it will go looking for an element with an id of "findMe" in the page code is has met so far. D'oh!

    Alternatively
    Code:
    <p id="findMe">Woo hoo!</p>
    <script type="text/javascript">
      var element = document.getElementById("findMe");
    </script>
    This time, when the parser goes looking, it will find the element because it has already been added to the page's document tree; it turned up before the script.

    Putting the script at the bottom of the page guarantees that all your html elements are in place before any code tries to find them.

    Simply JavaScript uses a different approach. It collects functions that you want to run and sets them going once the page has finished loading, again insuring that all the html has been parsed before trying to manipulate it.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    One of the benefits of placing the script at the bottom of the page is that it can more easily find and attach onto elements on the page.

    Another large benefit is that the web page becomes visible more quickly because it's putting off loading the javascript until the page elements are there.

    With the converse, where scripts are in the head, the web page can appear to take longer to load because it has to load the scripts as it comes across them and run them, before carrying on to load the rest of the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, for all your help. It is starting to get a little clearer now but, I am sure I will have more confusion and more challenges as I move through learning Javascripting so I hope you can come to may aid again later.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •