Free Javascript Tutorials

home

JavaScript Tutorials

The Document Object (Part One)

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

That Document Thing

 

As was mentioned, document is a part of the Document Object Model. We saw a method that can be used with document, but here's a couple more (Properties and Methods).

Properties

  • bgColor
  • fgColor
  • title
  • location
  • images
  • forms

Methods

  • open()
  • close()
  • write()
  • writeln()

There are quite a few more Properties and Methods you can use with document, but these are enough for us. Let's see how you can use them in your own scripts.

Start a new web page in your HTML Editor (Or use an old one, if you like - waste not, want not!) Then add this to the BODY section of your page:

<BODY>

<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">

<INPUT TYPE = Button VALUE = "Colour Two" Onclick = "document.bgColor = 'Blue'">

<INPUT TYPE = Button VALUE = "Colour Three" Onclick = "document.bgColor = 'Green'">

</BODY>

Remember, when you're typing the OnClick code that this bit

"document.bgColor = "

is surrounded by double quotes, and this bit:

'Green'

is surrounded by single quotes. And the whole thing is a confusion of single and double quotes:

Onclick = "document.bgColor = 'Green'"

When you're done, save your work and view the results in your browser. Click the button and see what happens.

Well, how did you get on? That should impress the neighbours, hey? If it doesn't, you have some very strange people living next-door to you. Try moving house until you find some neighbours who are impressed.

The background colour of your web page should have changed colour when you clicked a button. It did this because of the bgColor poperty of the document object.

document.bgColor =

After the equals sign, you can either type a name of a colour, or better use an Hexadecimal value:

document.bgColor = #FF0000
document.bgColor = #0000FF
document.bgColor = #00FF00

The fgColor property is similar to the bgColor property. Except it will change the colour of any foreground text on your page. Try it out and see how it works. You only need to change the "b" of "bgColor" to an "f". And type some text.

Move on to the Next Part -->

<--Back to the JavaScript Contents Page