JavaScript Tutorial Part 3 : 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s