JavaScript is a scripting language that can be completely processed by a web browser, making it a useful tool to get started in learning programming concepts. All we need to get started is a web browser and a text editor - we don't need to have our JavaScript files hosted anywhere but on our local machines.
<script src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yf/r/l6T5N3jtYlq.js"></script>
.
Take a look at the script you chose by following the link, which
should render the script as text in your browser window. What do you see? Look
for functions, which will have the format functionName(parameter1,
parameter2, ...). Can you tell what any of the functions do?In this seventeenth lab, you'll follow the steps to build a script that will take input values, use if statements to evaluate those inputs, and display an alert based on that evaluation. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?
Before beginning any programming or script-writing project, we need to have a clear sense of what we're being asked to do, so we can determine what the inputs and the outputs need to be. It's a little bit like using a recipe to make something you've never made before, or a road map to get to someplace you've never been before. Once you've decided what you want to eat or where you want to go, you can begin to plan what you need to get there.
For this lab, we want to write a script that tells the user what astrological sign they are. To do that, we will need to know the user's month and day of birth. Those are two of our inputs, because we need to know them to determine the astrological sign. We would like this to be customizable to the user, so we also want to have their name as an input. We also need to know when astrological signs begin and end, so we can accurately assign the correct astrological sign. These dates are fixed and do not change, so we won't need to declare them as variables - they are constants. But we still need to know them before we begin, so those date ranges are also an input.
For an output, we want to show the user a message that has their name and their astrological sign. If we want to do so in the future, we can add things like their horoscope and show that as well. For now, though, just getting their sign right and displaying it with their name will be our output.
Before we move into the coding part of the lab, here are the date ranges we need to make sure our script will output the correct astrological signs:
Try IT: Writing the My Astrologer script
We'll get a framework in place, then adding pieces one at a time so that
we can debug our script as we go.
Let's start with the framework, or the skeleton of what we need to begin writing the script. We can get the html markup and DOCTYPE declarations out of the way, as well as our page title information, the script's name, and the opening and closing script tags. Open your text editor and add these lines of code (or you can get the text file at lab17start.txt - be sure to change the file extension to .html to see it in your browser):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My Astrologer</title>
</head>
<body>
<h1>Welcome to My Astrologer!</h1>
<script language="javascript">
</script>
</body>
</html>
If you open that file with your browser, you should see something like this:
That's the value for the <h1> tag in the code, and it's the only content that should be appearing in the browser window.
var month = 2, day = 23;
var name = "Steve";
if (month == 1){
if (day <= 19)
alert ("Hi " + name + ", you're a Capricorn!");
if (day > 19)
alert ("Hi " + name + ", you're an Aquarius!");
}
Note: If I have added the variables as shown in step 2 above, then added the code from step 3 to my script, should I see any alert when I refresh my browser window? Why or why not?
Now that you've gotten your feet wet with a simple script, think about how you might extend what you've done. How would you find out how to get input directly from the user and put it into your script? Could you add a horoscope to the message telling the users their astrological signs? What other things do you think users of a script like this would want - different message display colors based on their sign, for example? Do you think you could add some of those things to this script, or would you have to create a new one?
Don't worry if you don't feel like you can answer some of these questions yet. We'll get much more in-depth with JavaScript in the next chapter, where you'll build the Bean Counter and its graphical user interface, or GUI, as well as adding user interactions. We'll continue building our JavaScript knowlege and skills in the next 4 labs: Lab 18, Lab 19, Lab 20, and Lab 21.