Java Reference
In-Depth Information
Your Second JavaScript Program
We're going to finish the chapter with a second JavaScript program. This example is much
more complicated than the previous one and includes a lot of concepts that will be covered
in later chapters in more depth, so don't worry if you fail to understand them at this stage!
The idea is to show you what JavaScript is capable of doing and introduce some of the im-
portant concepts that will be covered in the upcoming chapters.
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:
rainbow.htm
<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>
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:
js/scripts.js
var button = document.getElementById("button");
var rainbow =
["red","orange","yellow","green","blue","indigo",
