[JavaScript] Basic JavaScript tutorial [Archive]

nets

19-03-2006, 09:01 PM

I've written this tutorial to be used as an introduction to someone without a vast amount of JavaScript knowledge.
Through this tutorial you will be shown how to create a drop-down menu, which when used allows the user to change the background colour of the page.

Step 1.
I've created the basic structure of the HTML page, this includes the drop-down menu and other neccessary HTML.

<html>
<head>
<title>Example</title>

<script type="text/JavaScript">

</script>

</head>
<body>
<fieldset>
<legend>Background colour</legend>
<form name="colour_change">
<select onChange="" name="colour">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</form>
</fieldset>
</body>
</html>

Step 2.
Add this function to the JavaScript. This function (when called) changes the background to the variable "colour".

function change_colour(colour) {
document.bgColor = colour;
}

Step 3.
The folowing code needs to be placed in the "onChange" attribute (inside the "select" element).

change_colour(document.colour_change.colour.value)

If followed correctly you should end up with the following example.
http://joshjh.pwp.blueyonder.co.uk/background_change.htm

craigg.

19-03-2006, 09:08 PM

Very nice, But instead of just having "Red" (etc) Couldn't you just enter a Hex or an image?

- Craig.

nets

19-03-2006, 09:19 PM

You can change any style, just modify the function as needed.

[Example of changing the page margin]

function change_margin(w) {
document.style.margin = w+','+w+','+w+','+w;
}

<option value="1">1 PX</option>