Introduction to programming via JavaScript
Handout 3

In this modification of the first exercise we are going to move our script into the header. Note also the modified style statement, no external CSS file is being used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="AUTHOR" content="Dana Lee Ling">
<title>Script Scrap 3</title>

<style type="text/css">body {font-family:verdana}</style>

<script type="text/javascript">
function setColorScheme() {
  var userBg=document.userChoice.userText.value;
  if (userBg=="low") {
   document.bgColor="saddlebrown"
   document.fgColor="peru" }
else {
   document.bgColor="white"
   document.fgColor="black" };
}
</script>

</head>
<body>
<h1>Script Scrap 3</h1>

<p>Enter one of the following words and then click on the button to change the contrast of
this page:<br>
<span style="font-size:larger">low normal</span></p>

<form name="userChoice" action="">
<p>
    <input type="text" name="userText" size="20">
    <input type="button" name="setScheme"
value="Set Color Scheme" onClick="setColorScheme()">
    </p>
</form>

</body>
</html>

This exercise introduces the use of a form to capture user input and then react to that input. The JavaScript uses a full if-then-else construction. Note that any word other than "low" returns the page to the "normal" colors.

The form consists of two parts: an text input box called userText and an input button called setScheme that starts the JavaScript program.

To see some more variations of the above concept:
More color choices: http://shark.comfsm.fm/~dleeling/cis/script_bgchanger.html
The use of a single button: http://shark.comfsm.fm/~dleeling/cis/script_silly.html
The use of a series of buttons: http://shark.comfsm.fm/~dleeling/cis/script_button_style_changer.html
The use of drop down list boxes to select color combinations: http://shark.comfsm.fm/~dleeling/cis/dropdown_style.html

IS 201 Course Page Lee Ling Courses Page College of Micronesia-FSM Home Page