The difference between algorithms and heuristic approaches can sometimes seem to be subtle. After all, don't both of them involve steps to follow? In the case of heuristics, the steps are really guidelines or methods to resolving an issue or completing a task. Each time you follow a heuristic approach, you are not guaranteed of the outcome, and the context of the situation may change what you do at any given step. Algorithms, on the other hand, are not as flexible as heuristics. Think of them as iron-clad rules: they must be followed and followed in order, which will produce the same result every time. This is not to say that a program will always come up with the same result when your run it, but that the result is of the identical type and produced in the identical way each time.
To review, algorithms have 5 properties:
In this tenth lab, we'll modify an existing JavaScript script to help visualize algorithmic steps. If working on this lab gets you interested in working on more in-depth scripting and programming concepts, look ahead to the lab and exercises for Chapter 17. As you explore this lab, review your answers from the To consider: section above. Have you changed your mind about any of them?
JavaScript is a scripting language used all over the Web. It is a powerful tool to change web browser behavior, for example, and it often does so client-side, or on the user's computer. The user's browser interprets the JavaScript locally, then delivers the modified page. In this case, we will be modifying an existing script that we'll be running from our computer, so while we'll be writing the script in our text editors, we'll be able to see the results in our browsers without needing an Internet connection. The ability to run JavaScript scripts locally and accurately view their output in a variety of browsers is very useful to getting started in understanding algorithms.
Try IT: making your own metaphors
On your computer, open up any text editor, like Notepad.
Get the Lab 10 text file (it will open in a new window), then copy and
paste the code into your text editor. You should see something like this:
<html>
<head>
<title>Chapter 10 - Lab</title>
</head>
<body>
<script type="text/javascript">
// Depending on what time it is, you will see a different message in your browser
var currentDateInfo = new Date();
var currentHour = currentDateInfo.getHours();
switch (currentHour)
{
case 4:
document.write('<h2 style="color: brown">GOOD MORNING! It is too early to be awake, you know.</h2>');
break;
case 5:
document.write('<h2 style="color: darkorange">GOOD MORNING! It is STILL too early to be awake, you know.</h2>');
break;
case 6:
document.write('<h2 style="color: orange">Good morning! Time to get a move on.</h2>');
break;
case 7:
document.write('<h2 style="color: blue">Good morning! Are you ready to go?</h2>');
break;
case 8:
document.write('<h2 style="color: red">Come on sleepyhead, not much morning left!</h2>');
break;
default:
document.write('<h2 style="color: green">Is it time to go home yet?</h2>');
}
</script>
</body>
</html>
Save this file with a .html extension, so it will be recognized by your web browser, then double-click on it to open it. You should see a message. What do you see? Now look again at the code. Find the message you saw in your browser in the code.
Now let's look at the algorithm for this script by walking through the script and do some testing to make sure we understand how the script is working. You should have your text editor open looking at the source of the HTML page that contains the script, as well as a browser window open from double-clicking on that same HTML file.
Try IT: Good timing
switch (currentHour)
is a case statement, which is a way JavaScript programmers
can test a single value multiple times with different outcomes. In this
case, the switch function is testing the value of currentHour
against a numeric value and is doing that in the order you see in the
code. The first few lines after the switch statement can be thought of as "
If the current time has an hour that is the same as 4 am, print the
following message to the browser window, then exit. If the hour is not
the same as 4am, go to the next test." Which part of the code
tells the browser to exit?switch (3)
.
Save the HTML file, and refresh the browser window. What did you see? Is it what
you expected? Try other values in the switch statement. Remember that
hours here are expressed using a 24-hour clock, so if you wanted to
test 10pm, you would need to use a value for currentHour of 22.In later labs we'll explore scripts and code in much more detail, but if you'd like to get a headstart, take some time to edit the script above to customize it. You can do a bunch of things just by reusing the code that is already there. For example: