[JavaScript] Basic JavaScript tutorial

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 Code:

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

<script type="text/JavaScript">
<!--Begin

//-->
</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".

Code:

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

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

Code:

change_colour(document.colour_change.colour.value)

If followed correctly you should end up with the following example.
http://joshjh.pwp.blueyonder.co.uk/b...und_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]

Code:

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

HTML Code:

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

Thread: [JavaScript] Basic JavaScript tutorial

Thread Tools

[JavaScript] Basic JavaScript tutorial

Posting Permissions