Skip to content

Programming Conditionals

Jump to bottom
Professor F edited this page Feb 3, 2017 · 1 revision

Lecture Notes on Conditional Programming (aka if-then-else programming)

This lecture assumes you’ve done last week’s assignment on equation programming. We ended with the following code:

<!doctype html>
<html>
<head>
<script>
function calculateSales()
{
var price, taxrate, tax, total;
// INPUT
price=parseFloat(inPrice.value);            // was price=100
taxrate=parseFloat(inTaxRate.value); // was taxrate=7.5%
// PROCESS
tax = price*taxrate; 
total = price+tax; 
// OUTPUT
spTax.innerHTML=tax; 
spTotal.innerHTML= total; 
}
</script>
</head>
<body>
<span>Price? </span><input id="inPrice" type="text"><br />
<span>Tax Rate? </span><input id="inTaxRate" type="text"><br />
<span>Your tax is:  </span><span id="spTax"></span><br />
<span>Your total is: </span><span id="spTotal"></span><br />
<input type="button" value="Calculate Sales" onClick="calculateSales()" />
</body>
</html>

The Need for Using Conditionals

You rarely see programs that allow a user to type in prices and tax rates. Why? Because you simply can’t trust the user to enter it accurately, and unscrupulous users may set prices and taxrates to zero (free!) Instead, you see apps that allow a user to select types of products (like shirts, and pants), and depending on the type of product that the user selects, your code automatically assigns a price. So let’s see how this works. Generally, adding conditionals requires two steps.

Step 1. Change User Interface to Ask for Category

Change the user interface above so that instead of asking for the price, you let the user enter an item, like “shirt” or “pants”:

<!doctype html>
<html>
<head>
<script>
function calculateSales()
{
var price, taxrate, tax, total;
// INPUT
price=parseFloat(inPrice.value);            // was price=100
taxrate=parseFloat(inTaxRate.value); // was taxrate=7.5%
// PROCESS
tax = price*taxrate; 
total = price+tax; 
// OUTPUT
spTax.innerHTML=tax; 
spTotal.innerHTML= total; 
}
</script>
</head>
<body>
<span>Price? </span><input id="inPrice" type="text"><br />
<span>Item? </span><input id="inItem" type="text"><br />
<span>Tax Rate? </span><input id="inTaxRate" type="text"><br />
<span>Your tax is:  </span><span id="spTax"></span><br />
<span>Your total is: </span><span id="spTotal"></span><br />
<input type="button" value="Calculate Sales" onClick="calculateSales()" />
</body>
</html>

Step 2. Use Conditional Code (if-then-else) to Change Category into Value

So in the code below, you check what the user selected, then assign a value. The specific syntax for conditional code is: if (check) {action(s)}. And you can chain these using else.

<!doctype html>
<html>
<head>
<script>
function calculateSales()
{
var price, taxrate, tax, total;
// INPUT
price=parseFloat(inPrice.value);            // was price=100
if (inItem.value == “shirt”)
{
    price=50;
}
else if (inItem.value == “pants”) // add as many as you need
{    
    price=25;
} 
else // You usually need a final else without any condition
{
    price=0; // free!
}
taxrate=parseFloat(inTaxRate.value); // was taxrate=7.5%
// PROCESS
tax = price*taxrate; 
total = price+tax; 
// OUTPUT
spTax.innerHTML=tax; 
spTotal.innerHTML= total; 
}
</script>
</head>
<body>
<span>Price? </span><input id="inPrice" type="text"><br />
<span>Item? </span><input id="inItem" type="text"><br />
<span>Tax Rate? </span><input id="inTaxRate" type="text"><br />
<span>Your tax is:  </span><span id="spTax"></span><br />
<span>Your total is: </span><span id="spTotal"></span><br />
<input type="button" value="Calculate Sales" onClick="calculateSales()" />
</body>
</html>

Test & Reinforce Your Knowledge

Just like we don’t want the user to enter the price. We don’t want the user to enter the tax rate. To test and reinforce what you’ve learned:

  1. Modify the user interface to ask for “State? (2-letter code)” Instead of “Tax Rate?”
  2. Modify the code to check the state that the user enters, and then set the tax rate accordingly. Use 7.5% for NM, 10% for CA, and 8% for everything else. If you’d like to add more states, go for it!

Bonus User Inteface: Using Drop Down (select) Boxes Instead of Text Boxes

<!doctype html>
<html>
<head>
<script>
function calculateSales()
{
var price, taxrate, tax, total;
// INPUT
price=parseFloat(inPrice.value);            // was price=100
if (inItem.value == “shirt”)
{
    price=50;
}
else if (inItem.value == “pants”) // add as many as you need
{    
    price=25;
} 
else // You usually need a final else without any condition
{
    price=0; // free!
}
taxrate=parseFloat(inTaxRate.value); // was taxrate=7.5%
// PROCESS
tax = price*taxrate; 
total = price+tax; 
// OUTPUT
spTax.innerHTML=tax; 
spTotal.innerHTML= total; 
}
</script>
</head>
<body>
<span>Price? </span><input id="inPrice" type="text"><br />
<span>Item? </span><input id="inItem" type="text"><br />
<span>Item? </span><select id="inItem" type="text">
<option>shirt</option><option>pants</option></select><br />
<span>Tax Rate? </span><input id="inTaxRate" type="text"><br />
<span>Your tax is:  </span><span id="spTax"></span><br />
<span>Your total is: </span><span id="spTotal"></span><br />
<input type="button" value="Calculate Sales" onClick="calculateSales()" />
</body>
</html>
Clone this wiki locally