SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    UK
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the best practice?

    Am new to JS and still getting my head around the endless ways of using it.

    Am i right in thinking that unobtrusive javascript (ie good practice?) is basically

    -using external .js files
    -using event listeners as much as possible - to avoid things like onclick="doStuff()" in the html

    There are so many really useful free downloads out there that interfere with the html - eg. a great dropdown menu routine with onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)" on every <li>. Should i avoid them??.

    The book i am learning from uses a start function in the core library to start all the JS stuff after the html has loaded. Seems like a good idea to me, but is this normal practice?. Or is it essential?

    Any other bad habits i should avoid?

  2. #2
    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 treacle0996 View Post
    There are so many really useful free downloads out there that interfere with the html - eg. a great dropdown menu routine with onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)" on every <li>. Should i avoid them??.
    Instead of avoiding them you can improve on them by moving the inline events out to the end of the body, with something like:

    Code javascript:
    var menuOne = document.getElementById('one');
    menuOne.onmouseover = function () {
        ddMenu('one', 1);
    }
    menuOne.onmouseout = function () {
        ddMenu('one', -1);
    }

    Then you can proceed to improve on that so that it takes only one line of code to attach each menu event.

    Code javascript:
    function attachMenuEvent(id) {
        var el = document.getElementById(id);
        el.onmouseover = function (id) {
            return function () {
                ddMenu(id, 1);
            }
        }(id);
        el.onmouseout = function (id) {
            return function () {
                ddMenu(id, -1);
            }
        }(id);
    }
    attachMenuEvent('one');

    If you improve on the ddMenu function so that it uses an element argument instead of a id reference, you can use the this keyword instead which allows you to simplify the code.

    Code javascript:
    function attachMenuEvent(id) {
        var el = document.getElementById(id);
        el.onmouseover = function () {
            ddMenu(this, 1);
        };
        el.onmouseout = function () {
            ddMenu(this, -1);
        };
    }
    attachMenuEvent('one');

    And if you use separate menuMouseover and menuMouseout functions then the code becomes even easier.

    Code javascript:
    function menuMouseover() {
        ddMenu(this, 1);
    }
    function menuMouseout() {
        ddMenu(this, -1);
    }
    function attachMenuEvent(id) {
        var el = document.getElementById(id);
        el.onmouseover = menuMouseover;
        el.onmouseout = menuMouseout;
    }
    attachMenuEvent('one');

    Now you can issue multiple attachMenuEvent commends with great ease.

    So instead of staying stuck with bad code, have a go at making it better.

    Quote Originally Posted by treacle0996 View Post
    The book i am learning from uses a start function in the core library to start all the JS stuff after the html has loaded. Seems like a good idea to me, but is this normal practice?. Or is it essential?
    That's an easy way to get started. Other libraries like jquery have a $(document).ready() method in which you place the code to load.

    The simplest and easiest way though is to place the code at the bottom of the body, just before the </body> tag. Then it'll run when the DOM is ready to use, and before the page finishes loading. Some people load the big libraries up in the head, then work with the page contents from the end of the page. That way you're not looking at an unprocessed page while the libraries are loading.

    Quote Originally Posted by treacle0996 View Post
    Any other bad habits i should avoid?
    Yes, there are many. Douglas Crockford has a good article about code conventions but for the most part, good code practices are a slowly moving target that can change depending on the size of the project, and on the type of work that's being performed.
    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
  •