Learning javascript

What is “document.body.appendChild(nwdiv);” doing in this function? I would just be guessing.

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)
}

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.

Firebug and Logging : Firebug

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.

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 [URL=“http://code.google.com/chrome/devtools/”]Dev tools (Safari has [URL=“http://developer.apple.com/technologies/safari/developer-tools.html”]them too) open you can use the following to show the window object in the debug console:


console.log(window);

Thanks. Can you get a dump of everything in the array for a page? If so how?

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.

felgall, are you suggesting that everything in the window DOM can be accessed through array notation?

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.

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.

All properies of the window object are also available in the global scope.

e.g.:


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.

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.

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?

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?

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?

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?

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?