Lab 10 - Algorithms: from method to result

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:

To consider:

Hands-on: JavaScript

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?

Learning more

  1. 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.

    • Look at the source code for this lab page and find the part that is displaying the code. Why do you think it looks different from the JavaScript itself? What do you think your web browser is doing when it interprets the HTML markup?
    • What part of the code do you think prints the message into the broswer window? How could you test your guess to see if you're right?
    • Make a note of what the current time is, and refresh the page in your browser that is running the JavaScript. Did the message change? Why or why not?
    • Match the message you see to the script, and look for the words case or default in the line just above it. Is there a number next to that word? Does it match the current hour of the day?

  2. 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

    • Read the script comments (lines that start with "//"). Do they tell you anything you need to know about how the script works?
    • If this script is an algorithm, it requires an input. What is the input to this script? What makes you think so?
    • Let's say the current time is 3:48am. Knowing that information, what do you think the value for currentHour will be?
    • The line: 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?
    • Since 3 does not equal 4, we must go to the next test. Where does our value for currentHour match - which test?
    • In our example, the previous question is a bit tricky. Three doesn't match any of the cases at first glance, but default is a special case. If the value for currentHour doesn't match anything else, then the default is true. How do you think you could test that statement? Try changing currentHour to 3, the value you want to test, like this: 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.

  3. Finally, check what you know about this script against the properties of an algorithm above. Does it adhere to them all? Why or why not?

Moving on

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: