SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Coding and Breathing CoderMaya's Avatar
    Join Date
    Feb 2008
    Location
    Atlit, Israel
    Posts
    470
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Seperating Javascript from HTML Strict

    Hey everyone,

    what I want to do is only link the JS file to the HTML page and do all the rest inside the JS - including setting onclick, onload event handlers.

    I tried doing something like this:

    <script>element.onclick = function(){myfunc()}</script>

    but that doesn't work.

    The only thing I did that made it work was when I put it all inside a function and called it from the body onload, like this:



    <script>
    function onLoadFunc() {
    element.onclick = function(){myfunc()}
    }
    </script>
    <body onload="onLoadFunc()">

    But that goes against the idea of completely separating the JS from the HTML. It could still work and be kind of true and keep its flexibility... But it just wouldn't be as pro.

    Help?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have a look on Google for "unobtrusive javascript". This article is a good start.

    The piece you're missing is that if you put that script in the <head>, element doesn't exist yet because the browser hasn't got to the <body> yet, so that will cause an error. You need to instruct the browser to process the script only when the DOM has finished loading. This is normally done by using the window object's onload event (which is the same as <body onload="func()">). Look in the article I linked to and they explain how window.onload is used.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Another very good way to access elements when they are available in the DOM is to place the script at the very bottom of the body. Then the script doesn't even need to worry about using onload events, and can access the elements directly.

    You may want to take a look at a recent series of posts where I was going through a whole range of optimisations.

    http://www.sitepoint.com/forums/showthread.php?t=530964
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Sydney, Australia
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to try a javascript library such as jquery.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by CoderMaya View Post
    <script>
    function onLoadFunc() {
    element.onclick = function(){myfunc()}
    }
    </script>
    <body onload="onLoadFunc()">

    But that goes against the idea of completely separating the JS from the HTML. It could still work and be kind of true and keep its flexibility... But it just wouldn't be as pro.
    There are more modern techniques where you use addEventListener or addEvent so that you can add a function to the onload handler.

    Despite that though, I'm happier with placing the scripts at the bottom of the page because then they fall in line with the code conventions from Douglas Crockford as well as the Yahoo Best Practices for Speeding Up You Web Page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Get rid of the onload from the body tag and assign it to window.onload in the JavaScript instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Assigning it to window.onload is likely to overwrite some other onload process.
    If the script is placed at the end of the document, the script can then run the function directly, without interfering with the rest of the system.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •