JavaScript is an object-oriented language - sort of. At this stage that will do. Objects in programming are much the same as objects in the real world. They are things which have characteristics and stuff you can do with them.
Properties
In JavaScript all of the items on the Web page (and potentially in the script) are objects. Each object has properties. An analogy would be a ball. The ball will have properties such as colour and size.
In JavaScript objects might be DIVs, links or any other HTML elements. The properties will be any CSS styles such as colour, width, position etc. and a few other things which come later.
Methods
A ball has methods although normally that is not the word used. The methods include bounce, roll and deflate. HTML elements also have methods. Write is one. It allows you to write to an object. AppendChild is another. It allows you to add elements inside an existing element.
You can think of methods as built in functions which you can use without having to write them first.
DOM
The Document Object Model is how you need to think of a page. There have been a number of conflicting DOMs but currently Web pages should be thought of as a hierarchy of objects. Each object 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. Often window is assumed to be there and is not included in the code. Use it just in case as it will allow your code to work if there are future changes to the standards (or very fussy browsers).
An example of how to point to the BODY element of a page would be:
window.document.body
The dot operator (basically a full stop) is used to separate objects from their child objects, methods and properties.
Putting it together
You can now refer to objects within the DOM and their properties. This code should add a new element to the page and then make the whole page background yellow. Paste it into your function (fred()) to replace the alert line.
window.document.write('<p>hello world</p>');
window.document.body.style.backgroundColor="yellow";
The objects in this code are window, document, body and style. Document has a method write. The code is calling the method (just like calling a funtion). When the method is called it is passed the data it needs to write.
The body has a child object called style which contains all of the in-line styles for the BODY element. Style has a property backgroundColor which is being set to yellow.
Try to get straight in your head what objects, methods and properties are. Those terms come up a lot
Note that the style here is the in-line style of an element and not embedded or external styles.
In JavaScript objects, methods and properties which are made up of more than one word will have the second word (and third, fourth etc.) starting with a capital as with backgroundColor. Everything else will normally be lower case.
