Javascript Laboratory 3

Internet Programming I

Conditional statements

Assignment 4

Due: October 10, 2006

1. It is often helpful to be able to make choices between several options. For example, you might want to have a form that gets the bill at a restaurant and then a service box that asks if the service was good. If you say it was ok, the script will add a 15% tip to the bill. Otherwise it might only add on 10% or even nothing.

2. Choices are made using if – else statements. These are of the form

if (something is true) do something

else do something else.

3. In our example, we can have a text box that gets a value for the service. It would look like

Was the service good? Yes/No

The value of the variable, service, will either be Yes or No.

4. The if – else statement that uses the service value is

if (service = = "Yes")

tip = bill * 0.15

else tip = bill

5. The complete html page is below. Type it in and test it in a browser.

<html>

<head>

       <title>Conditional Example</title>

<script language="Javascript">



</script></head>

<body>

<form name = "tipForm">

       Bill <input name="bill" type="text" value="" size = "10" /> <br />

       Was the service good? Yes/No

       <input name="service" type="text" value="" size="5" /><br />

       <input name="tip" type="text" value="" size = "10" />

       <p><input type="button" value="Calculate Tip" onClick="calculateTip ()" /></p>

</form></body></html>

6. You might have noticed that in the expression, service = = "Yes", we used two equals signs rather than just one. The two signs are used to distinguish this use of equals from the assignment operator found in statement such as tip = bill * 0.15. When you want to compare two things to see if they are they same, use the double equals. When you want to store something in a named location in the computer, use the single assignment operator equals.

It is very easy to get these two mixed up. If you do, the results can be very confusing. In this script, if you have (service = "Yes"), the tip will always be set at 15%. That means that the expression will always be interpreted as true, whether or not that is what you intended. So be careful to use = = when you mean comparison and = when you mean assignment (storage).

7. We can also compare two things for less than or greater than. For example, if an exam grade is over 90, it is usually an A. This can be expressed by

if (score >= 90) grade = "A"

On the computer, we cannot write ≥. Everything has to be on the same line, so greater than or equals is written as >=. Similarly ≤ is written as <=. Oddly, if you want to say that something is not true, you use the exclamation point, !. So unequal is written as !=. Therefore to test whether the tip is not equal to 0.15, write (tip != 0.15).

8. A script that decides whether or not an exam earned an A might look like the next one. <script language="Javascript">

<!--A function that calculates the grade, given the score.>

function calculateGrade ()

{

var score = eval (document.gradeForm.score.value)

if (score >= 90)

var grade = "A"

document.gradeForm.grade.value = grade

}

//-->

</script>

9. But if we want to evaluate all scores, we need a more complete statement. Scores between 90 and 100 are A’s, between 80 and 89 are B’s, 70 to 79 are C’s, etc. For this we need a series of if – else statements.

if (score >= 90)

var grade = "A"

else if (score >= 80)

grade = "B"

else if (score >= 70)

grade = "C"

else if (score >= 60)

grade = "D"

else grade = "F"

In this series, the first condition that is true is used. For example, if the score is not 90 or above, then the next condition is tested. If that one also fails, the test goes on to the third condition. If all four conditions are false, meaning that the score is below 60, the grade will be assigned an F.

10. Type in the following web page and test it in a browser.

11. Testing a program is always necessary. Errors creep into programs whenever we are not paying really close attention. In some cases, the program seems to work, but it gives the wrong answer. For something like the script that determines the size of a tip, the best way to test it is to calculate a few results by hand (or hand calculator), enter them into the boxes and then observe the result. Errors can be caused by things as simple as using a ‘+’ sign when a ‘*’ sign is indicated.

12. Now create a web page with a box for the temperature and then decides whether it is hot, warm, comfortable, cool or cold. You should determine the limits yourself. For example, some may decide that it is hot when the temperature is 85 or above, while others may feel that 85 is only warm and that it doesn’t get hot until the temperature reaches 90. Most people are comfortable when it is around 70. But that is an individual decision. An elderly person may need a temperature of at least 75 to be comfortable while others find this pretty warm. Decide for yourself.

13. You can enhance your web page by changing the background to some color that corresponds to the temperature. For example, a hot temperature might be accompanied by a red background while a cold one might be blue. This script will require you to do two things for each condition, not just one. Javascript requires you to make this clear by putting the two statements between a set of braces, ‘{‘ and ‘}’. Two conditions might look something like

if (temperature >= 80)

{

document.bgColor = "red"

var comfortLevel = "Warm"

}

else

{

document.bgColor = "cyan"

comfortLevel = "Cool"

}

These are curly braces and not square brackets or parentheses. Using either of the other two will cause an error. Also make sure that you start with an opening brace and end with a closing one. They can be hard to see, and using one when you want the other can cause strange errors. You might also try to see what happens if you leave one of the pairs of braces out.

The rule is that if you have only one thing to do, you do not need the braces. If you want to do more than one thing for each condition, you must have the braces, or it will not work correctly.

14. You can also do loops in Javascript. The easiest is a for loop. It is designed to allow you to do some operation a number of times. It uses a counter that changes its value each time we go through the loop. This counter can be started at 1 and increased by 1 each time through the loop. A typical loop is

for (counter = 1; counter <= 10; counter ++)

The first part, counter = 1;, tells the browser where to begin counting. The second statement, counter <= 10;, tells it where to stop. The statement, counter ++, says that the counter should be increased by 1 each time until the end, 10, is reached. All of these numbers can be changed.

15. An example that calculates and displays increasing tax values might have the following script. Type it in and view it in a browser.

<html>

<head>

<title>Tax Form Example</title>

<!--Sales Tax Table

for (counter = 1; counter <= 10; counter ++)

{

tax = counter * 8.25

document.write ("The tax for ", counter, " is ", tax , "<br>")

}

//-->

</script>

</head>

</html>

16. Data is often displayed in HTML tables, which consist of rows and columns. The tags for the rows are <tr> … </tr> and for the columns within the rows <td> … </td>. Tables begin with the tag <table> and end with </table>. The opening tag may also contain attributes such as border, cellspacing, and font color.

In addition to the main tags, a table can have a caption that is put between the tags <caption> and </caption>. It also can have a heading row. This is given with the tags <thead> … </thead>. Between these, put <th><td>…</td><td> … </td><td> … </td></th>.

So the HTML for a complete table might look like:

…

</table>

17. The following Html file will display a tax table using Html tables. Try it out. Note where the tax was rounded off to the nearest cent.

<html>

<head> <title>Tax Table</title>

</head>

<body>

<!--

document.write ("<table border='1' bordercolor='black'>") // Start table

document.write ("<caption><h4>Tax Table</h4></caption>") // Table caption

document.write ("<thead><th>Bill</th><th>Tax</th></thead>")

for (count = 1; count <= 10; count++)

{

var bill = count * 10

var tax = bill * 0.0825

tax = Math.round (tax * 100) / 100 // Round the tax off to the nearest cent.

document.write ("<tr>") // Start row.

document.write ("<td>", bill, "</td>") // First column

document.write ("<td>", tax, "</td>") // Second column

document.write ("</tr>") // End row

}

document.write ("</table>") // End table tag.

//-->

</script>

</body></html>

18. Now create a web page with a form that collects some data and uses either an if-else statement or a for statement. You could make a list of equivalents for Celsius and Fahrenheit temperatures. Use a table to align your data. Or you could decide whether a movie is good, bad, or just so-so. When done, zip up your web page and send it to me.