JavaScript Part 3

Making decisions with conditionals

Conditional Statements

Let's pretend to be your wise but nagging grandmother right now:

I hear it's cold out: bring a sweater!
The weather network says it's going to rain: take your umbrella!
It's cold and snowing: wearing your warm boots!

All these things make logical sense to us as grown up humans but computers are a blank slate.

As a programmer, you try to give the computer the smarts to act on its own based on possible circumstances or events by using CONDITIONALS.

`If` Conditionals

...

A basic conditional test looks like this:

IF the weather is raining
THEN bring an umbrella

In JavaScript,
it might look like this:

if ( weather == rain ) {
    bringUmbrella();
}

The round brackets () group together a condition to test.

The curly braces {} group together a set of statements to execute.

Important!
Assignment is not the same as equality

Drill this into your head. Tattoo it to your arm! So many errors happen because of this key difference:

=
assignment

Store a value to a variable:

var kitten = "Fluffy";

==
equality

Compare a value to another value:

if ( kitten == cat )

Using Several `If` Conditionals

Sometimes it can be rainy but warm, or rainy and cold. You react to each thing individually.

Use several if statements when you're testing mutually inclusive scenarios.

IF the weather is raining
THEN bring an umbrella

IF the temperature is below 10°C
THEN wear a sweater

In JavaScript...

if ( weather == rain ) {
    bringUmbrella();
}

if ( temperature < 10 ) {
    wearSweater();
}

`if/else` Conditionals

Sometimes there's a catch-all state that you want to happen if your previous tests don't happen.

IF the weather is raining
THEN bring an umbrella

OTHERWISE
dress normally

In JavaScript...

if ( weather == rain ) {
    bringUmbrella();
}else{
    dressNormally();
}

`if/else if/else` Conditionals

It shouldn't snow and rain at the same time so sometimes these conditions are mutually exclusive.

IF the weather is raining
    THEN bring an umbrella

BUT IF the weather is snowing
    THEN wear warm boots

OTHERWISE
    dress normally

In JavaScript...

if ( weather == rain ) {
    bringUmbrella();
}else if ( weather == snow ) {
    wearWarmBoots();
}else{
    dressNormally();
}

Conditionals used for UI elements

A basic conditional that your browser does internally is a react to mouse clicks on a HTML element.

<button onclick="animate()">Pull</button>

IF a user has clicked on a button
THEN call the animate() function.

...And Interactivity

Notice how the brush acts when you speed up / slow down, or get close to other lines. You can even change brushes.

Procedural Drawing by Mr. Doob

http://mrdoob.com/projects/harmony/

...And Games!

(Notice how the birds fly differently based on how far you pull them back in the slingshot, and in what direction.)

Angry Birds

http://chrome.angrybirds.com/

Conditional Statements Summary

If Statement	If...else statement	If...else if...else statement

if (condition) { // do something }	if (condition) { // do something } else { // otherwise do this }	if (condition) { // do something } else if (condition2) { // do something else } else { // otherwise do this }

If Statement

If...else statement

If...else if...else statement

if (condition) {

 // do something

}

if (condition) {

  // do something

} else {

  // otherwise do this

}

if (condition) {

  // do something

} else if (condition2) {

  // do something else

} else {

  // otherwise do this

}

Testing Conditions

What does a condition actually look like?

if ( condition ) { ... }

Let's try also comparing Booleans using variables, Numbers, and Strings.

SCRIPT

// PURE BOOLEANS
if ( true ) {  
  document.write( "#1 this works. <br />" );
} 

if ( false ) {  
  document.write( "#2 will not work. <br />" );
}

SCRIPTEND

Cheat Sheet: Comparison and Logical Operators

Here's a cheat sheet of different operators that can be used in conditional statements.

Using these two variables, var two = 2 and var ten = 10 , the examples below show how the statements would return true using the various operators.

Comparison operators
==	is equal to	ten == two * 5
===	is exactly equal to (value and type)	ten === 10 ten === "10" (false)
!=	is not equal to	ten !== two
>	greater than	ten > two
<	less than	two < ten
>=	greater than or equal to	ten >= two * 5 ten >= two * 5 + 1
<=	less than for equal to	two <= ten two <= 2

Logical operators
&&	and	(ten < 11 && ten > 9)
\|\|	or	(ten == 10 \|\| two == 2)
!	not	!(ten == two)

More Conditional Examples

Let's look at some examples. What do you think the output will be? Uncomment the code to be executed for each condition to see if the result is what you expected. Try changing the variable values too!

<script>
var regularPrice = 200;
var salePrice = 19.99;

if ( salePrice < regularPrice ) {
  //document.write("#1 You've got to buy that robot! <br />");
} 


if ( salePrice > regularPrice ) {
  //document.write("#2 Don't buy that robot <br />");
} else {
  //document.write("#2 Buy two in different colours! <br />");
}

if ( salePrice > regularPrice ) {
  //document.write("#3 Don't buy that robot");
} else if ( salePrice == regularPrice) {
  //document.write("#3 Only buy it if you reeeaallly want it! <br />");
} else {
  //document.write("# Buy two in different colours! <br />");
}
</script>

Variables, Operators, Concatenation and Conditionals

Now that we know what variables, operators and conditionals are, let's put them all into action using dynamic content.

<script>

  var yourBudget = 100; // all you've got is $100
  var robotPrice = 20;  // a default price of $20 for now

  /* Instead of a fixed value, get a dynamic price via a prompt popup: */
  //var robotPrice = prompt("How much is that robot?");

  if ( robotPrice <= yourBudget ) {
    document.write("$" + robotPrice + " fits into my budget. Buy it!");
  } else {
    document.write("$" + robotPrice + "? Good Lawd! I can't afford that!");
  }

</script>

Mini-exercise (10 minutes)
Quantity Check

Uh-oh! Someone can attempt to put a negative number of products in their shopping cart! (This is based on the previous Quantity mini-exercise so it should look very familiar!)

1. Use a conditional test to avoid a negative quantity. Typically this involves comparing against the number 0 and you can go about it in a few ways with the same result.
2. Similarly, warn the user that they are attempting to check out with an empty basket.
3. Bonus: Practice your concatention and display the price using a dollar sign.

<script>

  var quantity = 0;   

  function addItem(){ 
    quantity = quantity + 1;
    refreshTotal();
  }
  
  function removeItem(){
    /* 1. Use a conditional if or if/else statement on the "quantity" variable 
          to avoid having negative products. */
    /* *** YOUR CODE _BELOW_ HERE **** */

    quantity = quantity - 1; 

    /* *** YOUR CODE ^ABOVE^ HERE **** */
    refreshTotal();
  }  

  function checkout() {
    /* 2. Use a conditional if/else statement on the "quantity" variable 
          to determine if the shopping cart is (or is not) empty, then
          show the correct popup message. */
    /* *** YOUR CODE _BELOW_ HERE **** */

    alert( "Sorry, you don't have anything in your cart!" );
    alert( "Thank you for your order!" );
    
    /* *** YOUR CODE ^ABOVE^ HERE **** */
  } 
  
  function refreshTotal() {       

    // calculate the totalCost with a fixed price of $20.  
    var totalCost = quantity * 20;

    // then update the quantity text field
    document.getElementById('updateQuantity').value = quantity;

    // update the total cost text field
    // 3. A nice to have: Put a dollar sign in front of the total cost
    /* *** YOUR CODE _BELOW_ HERE **** */

    document.getElementById('updateTotal').value = totalCost;

    /* *** YOUR CODE ^ABOVE^ HERE **** */
  }
</script>

<div id="exercise2" style="text-align: center;">
  <img src="http://gavinuhma.github.io/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
  <br />
  <button onclick="addItem();">Add</button>
  <button onclick="removeItem();">Remove</button>
  <br />
  Quantity
  <input type="text" id="updateQuantity" value="0" readonly style="text-align:center; width: 20px; border: 1px solid #ccc;"/>
  <br />
  <br />
  Total Cost:
  <input type="text" id="updateTotal" value="" readonly style="border: 1px solid #ccc;"/>
  <br />
  <br />
  <button onclick="checkout();">Check out now!</button>
</div>

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

Mini-exercise (5-10 minutes)
Form validation

Let's revisit the shipping information form again -- however you don't want someone to be able to submit their order if they haven't filled out their address!

You have been supplied with 1 variable (address). After you press the "Check out now!" button, address which will automagically update to what is typed into the text field.

1. Use a conditional test so someone cannot supply a blank address.
Hint: If you don't type anything into the address field, you get an empty string. Remember that an empty string is simply two quotes with nothing inbetween them. e.g. var emptyString = "";)

<script>
  function validateForm() {

    // automagically get the typed values from the form
    var address = document.getElementById("address").value;

    /* 1. Use a conditional if/else statement on the "address" variable 
       to determine if the address field is (or is not) blank, 
       then show the proper error or confirmation alert message. */

    /* *** YOUR CODE _BELOW_ HERE **** */

    alert( "Sorry there are errors. Form fields cannot be blank!" );
    alert( "Thank you for your order!" );

    /* *** YOUR CODE ^ABOVE^ HERE **** */
  }
</script>

Address:
<input type="text" id="address" />
<br />
<br />
<button onclick="validateForm()">Check out now!</button>

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

Mini-exercise (15-20 minutes)
Complex form validation

Now here's a more complex shipping form that require four fields to be filled in. You have been supplied with 3 additional variables: name, city, and postal.

Similiar to the previous exercise, use a conditional test so someone cannot supply any blank fields.
Alert the right message to the user. (Hint: How do you test for something AND something else OR another thing at one time? Try looking at the cheatsheet on Slide #12 of this section.)

<script>
function validateForm() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var city = document.getElementById("city").value;
  var postal = document.getElementById("postal").value;

  // Use conditional if/else statements on
  //  the variables "name", "address", "city", and "postal"
  //  to determine if any field is blank.

  // show this message if any fields are blank
  alert( "Sorry there are errors. Form fields cannot be blank!" );

  // otherwise, show this message
  alert( "Thank you for your order!" );
}
</script>

Name: <input type="text" id="name" /><br />
Address: <input type="text" id="address" /><br />
City: <input type="text" id="city" /><br />
Postal Code:<input type="text" id="postal" /><br />
<br />
<button onclick="validateForm()">Check out now!</button>

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

JavaScript Part 3

Conditional Statements

If Conditionals

Important! Assignment is not the same as equality

Using Several If Conditionals

if/else Conditionals

if/else if/else Conditionals

Conditionals used for UI elements

...And Interactivity

...And Games!

Conditional Statements Summary

Testing Conditions

Cheat Sheet: Comparison and Logical Operators

More Conditional Examples

Variables, Operators, Concatenation and Conditionals

Mini-exercise (10 minutes) Quantity Check

Mini-exercise (5-10 minutes) Form validation

Mini-exercise (15-20 minutes) Complex form validation

`If` Conditionals

Important!
Assignment is not the same as equality

Using Several `If` Conditionals

`if/else` Conditionals

`if/else if/else` Conditionals

Mini-exercise (10 minutes)
Quantity Check

Mini-exercise (5-10 minutes)
Form validation

Mini-exercise (15-20 minutes)
Complex form validation