SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    learning javascript

    What is "document.body.appendChild(nwdiv);" doing in this function? I would just be guessing.
    HTML Code:
    function creatediv(){
      var nwdiv=document.createElement('div');
        nwdiv.setAttribute("style","float:right;")
        nwdiv.id='mydiv';
        var txt='hello world!';
        document.body.appendChild(nwdiv);
        document.getElementById('mydiv').innerHTML=txt;
    //alert(document.body.innerHTML)
    }

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,001
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    I would add the text before appending the div, but maybe that makes little difference?

    Have you tried the code to see what it does?

    Maybe I've looked at javascript and DOM syntax too much, but everything reads clear to me.

    document
    body
    appendChild
    nwdiv

    Which of those do you not understand? Or am I missing your question?

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm learning JS and just need to be absolutely certain that I know how this function works (I'm using this function purely as a learning tool). Specifically, I haven't found the documentation that's explicit about how "body" gets justified for inclusion in "document.body.appendChild(nwdiv);".

    Working backwards, I found appendChild() in both the html dom & xml dom (I think it's from the html dom, but won't bet the house on that). Anyway, there must be a straight-forward definition of what "document.body" stands for, I'd just like to know exactly where the reference is that spells it out? Someone has to have something like that that's on a page or two. Do you have a link for something like that?

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Mittineague, I'm still reading. What's the difference between the document object and the document property? If they're the same, why list one as a stand alone object and the other a a property of an object?

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,001
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    In my own, not very precise terminology:
    the "document" is everything, i.e. all tags
    the "body" is everything inside the body tags (doesn't include what's inside the head tags)

    Both HTML and XML have tags/nodes, so both can have child nodes added to their DOM.

    An object can contain other objects, but a property is not the same as an object. Do you have a specific example of what you're referring to?

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think what I'm understanding is that the document property of the window object is the same as the document object. What's the advantage of that?

  7. #7
    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)
    All properies of the window object are also available in the global scope.

    e.g.:
    Code:
    window.document.getElementById("someId"); 
    // is analogous to 
    document.getElementById("someId");
    If you're using Firefox (with Firebug), Chrome or Safari you can do a console.log(window) to show the contents of the window object in your debug console.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,001
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Now I see what you mean. eg. from The Window Object
    The table below shows the properties, methods, and events supported by the Window object. The entries in the Properties column that include the string (object) are objects in themselves, accessible through the Window object.
    So it is both a property and an object. I've learned something myself, though I inagine I'll continue to think of it as an object.

  9. #9
    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)
    Yup. It's probably easiest if you thing of it in the following (very basic) terms:

    • An object is a "hash" array, that can contain multiple properties
    • A property is a variable that belongs to an object
    • Properties can themselves be objects and in turn have properties inside of them.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    I think what I'm understanding is that the document property of the window object is the same as the document object. What's the advantage of that?
    Almost everything in the browser and web page are properties of the window object when you run JavaScript in a browser.

    For example the following all reference the same property 'x'.

    var x;
    window.x
    window['x']

    Except when using the third of these ways of referencing a property of window the reference to window can be left off and JavaScript will assume that it is a property of window - since there are only about three or four properties/objects in JavaScript that are not properties of window.
    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="^$">

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    felgall, are you suggesting that everything in the window DOM can be accessed through array notation?

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    felgall, are you suggesting that everything in the window DOM can be accessed through array notation?
    Yes, with the following exceptions.

    The only three properties that don't belong to window are:

    Infinity
    NaN
    undefined

    The only nine methods that don't belong to window are:

    decodeURI
    decodeURIComponent
    encodeURI
    encodeURIComponent
    eval
    isFinite
    isNaN
    parsefloat
    parseint

    Everything else is a property or method of window and so can use the window['propertyname'] notation to reference it.
    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="^$">

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Can you get a dump of everything in the array for a page? If so how?

  14. #14
    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)
    Quote Originally Posted by nichemtktg
    Thanks. Can you get a dump of everything in the array for a page? If so how?
    https://developer.mozilla.org/En/DOM/Window has a pretty extensive list of properties (though I think quite a few of them are Gecko/Mozilla specific).

    If you're using Firefox with Firebug or Chrome with Dev tools (Safari has them too) open you can use the following to show the window object in the debug console:
    Code:
    console.log(window);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not familiar with console.log(window);.

    I didn't see a good candidate on Google's first page of info on console.log(window);. Please recommend a link if possible.

  16. #16
    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)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  17. #17
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I love it how a topic can lead to issues that I didn't even know are questions. That just reminds me that there's plenty out there, that I don't know that I don't know.

    Thanks for your help Mittineague, AussieJohn, and felgall.


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
  •