We’ll follow the practice of unobtrusive JavaScript mentioned earlier and keep our JavaScript code in a separate file. Start by creating a folder called rainbow. Inside that folder create a file called rainbow.htm and another folder called js that contains a file inside it called scripts.js.
Let’s start with the HTML. Open up rainbow.htm and enter the following code:
<head>
<meta charset="utf-8">
<title>I Can Click A Rainbow</title>
</head>
<body>
<button id="button">click me</button>
<script src="js/scripts.js"></script>
</body>
</html>
<meta charset="utf-8">
<title>I Can Click A Rainbow</title>
</head>
<body>
<button id="button">click me</button>
<script src="js/scripts.js"></script>
</body>
</html>
This file is a fairly standard HTML5 page that contains a button with an ID of button. The ID attribute is very useful for JavaScript to use as a hook to access different elements of the page. At the bottom is a script tag that links to our JavaScript file inside the js folder.
Now for the JavaScript. Open up scripts.js and enter the following code:
var button = document.getElementById("button");
var rainbow = ["red","orange","yellow","green","blue","indigo",➥"violet"];
function change() {
document.body.style.background = rainbow[Math.floor(7*Math.➥random())];
}
button.addEventListener("click", change) ;
var rainbow = ["red","orange","yellow","green","blue","indigo",➥"violet"];
function change() {
document.body.style.background = rainbow[Math.floor(7*Math.➥random())];
}
button.addEventListener("click", change) ;
Our first task in the JavaScript code is create a variable called button (we cover variables in Chapter 2).
We then use the document.getElementById function to find the HTML element with the ID of button (covered in Chapter 6). This is then assigned to the button variable.
We now create another variable called rainbow. This is assigned to an array containing a list of trings of different colors (we cover strings and variables in Chapter 2 and arrays in Chapter 3).
Then we create a function called change (we cover functions in Chapter 4). This sets the background color of the body element to one of the colors of the rainbow (changing the style of a page will be covered in Chapter 6). This involves selecting a random number using the built-in Math object (covered in Chapter 5) and selecting the corresponding color from the rainbow array.
Last of all, we create an event handler, which checks for when the button is clicked on. When this happens it calls the change function that we just defined (event handlers are covered in Chapter 7).
Open rainbow.htm in your favourite browser and try clicking on the button a few times. If everything is working correctly the background should change to every color of the rainbow, such as in the screenshot in Figure.
 |
| Figure I Can click a rainbow |
0 Response to "Your Second JavaScript Program"
Post a Comment