SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what's wrong with window.onload?

    ( I found some info. on this in an old thread, but still don't understand it.) I recently came across this, in lynda.com... I think the idea is to do this as a way to do multiple functions that, you could do in the window.onload, but doing it this way is supposed to be better than doing it in window.onload. First, I don't understand what's wrong with just doing the 3 functions in window.onload?

    Thanks!



    addOnLoad(initOne);
    addOnLoad(initTwo);
    addOnLoad(initThree);

    function addOnLoad(newFunction){
    var oldOnLoad = window.onload;

    if(typeof oldOnLoad == "function"){
    window.onload = function(){
    if(oldOnLoad){
    oldOnLoad();
    }
    newFunction();
    }
    }
    else{
    window.onload = newFunction;
    }
    }

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The reason it is done this way is because you can't simply put 3 methods inside of window.onload itself. So what is commonly done is calling multiple functions from within an anonymous function that is assigned to window.onload, like so:

    Code:
    window.onload = function() {
      doThis();
      doThat();
      doSomethingElse();
    }
    Of course this is assuming you would only want put this definition in once, if you wanted to abstract things out a little and make this more extendible you would use something like the addOnLoad function you posted.

    This allows you to add as many functions to the window.onload event as you want from different places in your script.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I almost didn't get your reply...I thought that I could do a window.unload the way you had it coded, and couldn't see why the "lynda.com" way was better. Then I read your response -- "it allows me to abstract things out a bit and make things more extendible" -- THAT helped a LOT! But, then I read your next paragraph, and that started clearing it up -- at least it clears up the reason for why you want to do this; But, I still don't understand the code, so let me see...

    those first 3 lines...
    addonload(InitOne)
    addonload(InitTwo)
    addonload(initThree)
    ...
    are calling a function, addonload, passing variables (initOne, two & three),
    which have not yet been declared, is that part right?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The reason for coding the window.onload that way is that the script then does not need to know what other scripts are attaching something to onload as well. The same code works whether there is one script using it to attach a function to onload or ten scripts all using it to each attach their own function.

    The alternative means writing code that knows about all the scripts in the page and which needs changing whenever you add or remove a script.
    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="^$">

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It is - but you have to take that within the concept of the example :-)

    Let's say that you have the addOnload function defined already, now you could do something like:

    Code JavaScript:
    function doSomething() {
      //do something here
      alert("doSomething");
    }
    addOnload(doSomething);
     
    // somewhere else in the code:
     
    function doSomethingElse() {
      //do something different here
      alert("doSomethingElse");
    }
    addOnload(doSomethingElse);
    So, you're right that those functions need to be defined somewhere, the following would also work:

    Code JavaScript:
    addOnload(doSomethingElseAgain);
     
    function doSomethingElseAgain() {
      //doing something else again
      alert("doSomethingElseAgain");
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    guys, forgive me, but I'm a REAL novice...Why would there be multiple scripts to the same web page, all wanting to do different things when the window loads...Are you saying that it's common that there may be different people writing scripts against the same page, and they don't need to know about each other? Can you point me to a real world example of this, so I can get an idea of what's going on?

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jefals View Post
    guys, forgive me, but I'm a REAL novice...Why would there be multiple scripts to the same web page, all wanting to do different things when the window loads
    It is most common with novices - they get a script to do A from one site, a script to do B from another site etc and then find that while one works on their web page, trying to add the second one stops it working. This particular code is the fix for those novices to use.

    Experienced JavaScripters will just write all their scripts to start with in a way that will not interfere with one another since they actually know how all the code does what it does.
    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="^$">

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks guys. It would seem to me that you would want to put everything that should happen when the window loads all in one place -- but, that could be because I don't know what I'm talking about yet!
    I plan to finish the lynda.com javascript tutorial and get what I can from it, realizing that there'll be plenty I won't get...Then I'll try learning with a book -- or maybe even an actual class!

    Thanks a lot for your help guys!

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jefals View Post
    It would seem to me that you would want to put everything that should happen when the window loads all in one place
    Yes, you have to if you are using onload but then if the pieces also belong to four separate scripts only some of which will be on some of your pages then you also want to keep the separate scripts as separate as possible and that code is the more primitive of the two ways that you can keep the separate scripts as separate as possible.

    The better but more complicated way is to use event listeners to attach the functionality where you are allowed to attach more than one thing to the same event without the new one automatically detaching the prior one.
    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="^$">

  10. #10
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm actually a little surprised that I haven't seen a single mention of addEventListener or attachEvent yet.

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,398
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Even for me, this was odd way of doing onload method. I'm sure 99.9999% of the developer use this to initialize the page that calls AJAX or doing some dom manipulation. Just wondering why would you sprinkle "addOnLoad" all over the code. Seems like a bad design and should be in centralize method called something like "init" method. Also, I've heard that window.onload acts differently based on which browser. Some activates this method when dom is ready, when html is loaded, or something like..I can't remember.. I just rely on jQuery or other javascript framework's onload method which gurantees that it runs after HTML dom is loaded on all browsers. So, you may need to keep this in mind if you're using window.onload.

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw, does this have something to do with something called "dojo"? I'm finding other references out there to addonload with "dojo"....

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by joebert View Post
    I'm actually a little surprised that I haven't seen a single mention of addEventListener or attachEvent yet.
    I mentioned it in the immediately preceding post.

    Quote Originally Posted by sg707 View Post
    Just wondering why would you sprinkle "addOnLoad" all over the code. Seems like a bad design and should be in centralize method called something like "init" method.
    It is used by newbies who are adding more than one script to their page. You wouldn't use it if you were writing the scripts yourself.

    Quote Originally Posted by jefals View Post
    btw, does this have something to do with something called "dojo"? I'm finding other references out there to addonload with "dojo"....
    The Dojo JavaScript library might provide that as a part of the library but it is not specific to any JavaScript library. Primarily it is a quick way for JavaScript newbies who need to attach more than one script to their page to avoid one of them overwriting the other's onload function.

    Anyone writing the code themselves would either add all the function calls into a single function attached to the onload event handler or would do it properly using eventlisteners/attachEvent.
    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="^$">

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Felgall,

    I understand the purpose of this code now, (even if i still don't quite get the details of the code -- I need to revisit that) -- and your response shed light on this new term "dojo" for me. I've been programming legacy apps in languages like cobol for 40 years -- so, by your response, I take it javascript comes in different "flavors" -- something like IBM Cobol vs Hewlett-Packard Cobol -- and "dojo" would then be one of the different vsns of Javascript..

    Again, I really do appreciate all your help

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jefals View Post
    so, by your response, I take it javascript comes in different "flavors" -- something like IBM Cobol vs Hewlett-Packard Cobol -- and "dojo" would then be one of the different vsns of Javascript..
    No - Dojo is just some code written in JavaScript that performs certain tasks - there are a number of other libraries written in JavaScript that perform similar tasks. It just saves the people who use the library from having to write JavaScript themselves to do those tasks as they can just call the code someone else wrote to do those parts.

    It would be more along the lines of someone providing you with a few dozen Cobol procedures that perform standard processing that you can copy into each of your Cobol programs so as to not have to write the Cobol to perform any of those tasks yourself. It isn't quite as straightforward with a procedural language like Cobol though as it is with an object based one like JavaScript as you don't need statements such as COPY MY_REC REPLACING LS- BY WS-, -X BY -Y. when you want to make multiple copies of objects and can instead just use var obj1 = new myObject(); var obj2 = new myObject(); to create the two copies.
    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="^$">

  16. #16
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm...well, at the risk of getting away from the subject of this thread, is it not a monumental task trying to keep track of what's in all these libraries?

    And does this mean that the "addonload" that we've been talking about since the beginning of this thread, would NOT necessarily be the same as dojo's "addonload"?

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jefals View Post
    hmm...well, at the risk of getting away from the subject of this thread, is it not a monumental task trying to keep track of what's in all these libraries?
    It can be, but good references are an enormous help, such as for example the jQuery documentation or the dojo documentation
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks PMW,,

    I took a quick look at that dojo site. So I see (at least in theory -- no practical experience yet) how useful this can be. But, I'm getting WAY ahead of myself now...gotta get back to the beginners lessons now. btw, I see a course here on sitepoint that looks like something i'd like to take -- I really liked the sales presentation. But, it's live, that's what I really like about it -- except I probably wouldn't be able to fit it in since I'd probably be working during class time. Oh well!

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jefals View Post
    I see a course here on sitepoint that looks like something i'd like to take -- I really liked the sales presentation. But, it's live, that's what I really like about it -- except I probably wouldn't be able to fit it in since I'd probably be working during class time. Oh well!
    There is a free School of Webcraft course starting up shortly, which will include course on JavaScript. That might be worth a look at.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will do...I'd love to take that sitepoint live course, but, as I said, my work schedule will most likely be in the way of any live courses. But I'll check out the Webcraft one. Thanks!

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can take the JavaScript Live course at any time - the only part you miss out on is the interactivity on the once a week live videos. It wasn't too bad apart from trying to cram too much in to too little time - taking several days to do some of the daily lessons will work far better than trying to cram it all in too quickly.
    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="^$">

  22. #22
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh...I got the impression it was live 4 days a week. The live interaction is what I think I would really like. These forums are great, but obviously nothing beats having live give-and-take when I have questions! I'll probably give it a try, though. I have a book by Dori Smith & Tom Negrino, if you're familiar with them, but I don't think it's the right book for me. Yesterday I found a site showing what they claimed were the "top 10" books for beginners -- so, I previewed the 1st one as much as I could on amazon and looked good, so now finishing up the lynda.com course (also by Dori Smith) and then on to the new book. Depending on how I like the book, I may do the class instead.

  23. #23
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jefals View Post
    I have a book by Dori Smith & Tom Negrino, if you're familiar with them, but I don't think it's the right book for me.
    The third edition of their book on JavaScript was one of the first books on JavaScript that I got. I have since reviewed the fifth edition which was better. Many of the other JavaScript books I have seen are a lot better than theirs.

    One of my favourite JavaScript books for beginners is "Head First JavaScript" by Micheal Morrison which is also the only book I have bothered to look at as a PDF rather than as a printed book.

    I have quite a lot of JavaScript book reviews at http://javascript.about.com/od/javas...ript_Books.htm
    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="^$">

  24. #24
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stephen,

    I was able to peruse that one a little on amazon, and from what I could ascertain, it kindof looked like he was trying to be a little too "entertaining", I guess... Anyway, the one I wound up with is called Javascript Step by Step, by Steve Soehring (sp?). We'll see how it goes! ( I guess, if this doesn't work, I can probably always make a living on ebay!

  25. #25
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For those with prior programming experience "JavaScript for Web Developers" by Nicholas Zakas covers a lot of useful material without wasting time teaching you what you would already know.

    "Pragmatic Guide to JavaScript" by Christophe Porteneuve looks at first glance as if it might also be really useful for those with some programming knowledge but it just arrived late yesterday so I haven't had time to review it yet.
    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="^$">


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
  •