Objects in programming are much the same as objects in the real world. They are things.  They have characteristics and you can do stuff with them.  An analogy in the real world would be a ball. The ball will have properties such as colour and size.  It can do things such as bounce.

On a Web page a paragraph is an object and so is a link.  A link has certain characteristics including the colour of the text and that it is underlined.  It includes the built-in ability to tell the browser to take you to another page.  Not quite true but close enough.

The next few bits explain the words you need to understand and then at the bottom you will be told what to do (using those words).

Properties

The properties of HTML objects are the attributes inside the opening tags as well as their styles from external style sheets and from browser defaults.  For example a div might have a class, an id and a style with background colour and a height.  You can read and change all of these in JavaScript.

Methods

HTML elements when accessed within JavaScript also have methods. You have not tried any yet but write is one. It allows you to write new text to an object (to the element).  AppendChild is another. It allows you to add new HTML elements inside an existing element.  You will use these and others soon for now make sure you understand what a method is.

You can think of methods as built in functions attached to a specific thing in HTML.

DOM

The Document Object Model is how you need to think of a page. Each object on a page has child objects and (normally) a parent object. The top of the hierarchy is the browser window which is referred to as just window and has no parent.

An example of how to point to the body element of a page would be:

window.document.body

This says to the browser "Look inside the browser window for the document being displayed and inside that will be the body element".  Then you keep doing that to get to the object you want to change or access with JavaScript.

The dot operator (a full stop) is used to separate objects from their child objects (and their methods and properties).

Putting it together (at last)

Open your jsfunction.html and save it as jsobject.html.

You will now refer to objects within the page and to their properties.  Delete the existing alert line from inside your function and paste paste this into that spot:

window.document.write('<p>hello world</p>');
alert(window.document.body.style.backgroundColor);
window.document.body.style.backgroundColor="yellow";
alert(window.document.body.style.backgroundColor);

This code should add a new HTML element to the page and then make the whole page background yellow.  Try it by saving, refreshing and clicking.

The objects in this code are window, document, body and style. The object style is the in-line style attribute for the body element.  The first alert will be blank because there is not an in-line style when the page is first loaded.  The third line adds an in-line style to the body opening tag just like you have done. The second alert line is there to show you that you can read properties as well as change them.  This is what should happen when you try the page although in some browsers the new paragraph and style may not be shown until you have dealt with the alerts which seems to be wrong and is:

  1. a new paragraph appears and then ...
  2. ...immediately (to our eyes) an alert message appears which shows the current in-line style for the background colour (none)
  3. when you OK the alert dialog the background colour changes
  4. the second alert tells you the new background colour

Look at the four lines of code to see what each one does and spend some time on it because you need to understand:

  1. the object document has a method called write and the first line of code is calling that method and sending a parameter (just like calling a function - it even has the same brackets as a function)
  2. the alert is displaying the current backgroundColor property (none)
  3. the object style is the same as the in-line style attribute in HTML and the rule we are setting within the in-line style attribute is background-color
  4. the second alert shows the style we just set