23
Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

  • View
    243

  • Download
    4

Embed Size (px)

Citation preview

Page 1: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Monday, Week 3

Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Page 2: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Conditional Statements

Do action X if condition Y holds: If today is Wednesday at 8:30, then

go to CS 105 class Condition: Wednesday at 8:30 Action: Go to CS 105 class

Page 3: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Conditionals in JavaScript

Not surprisingly, we use the if keyword:

if (Wednesday at 8:30){

go to CS 105 class;}

Condition(s)

Action(s)

Page 4: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Formatting Conditions

Use Boolean Logic: && = AND || = OR ! = NOT ‘==‘ = test for equality Others: >=, <=, !=, <, >

Page 5: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Our Example Revisited

function doSomething(){

var day, time;…if ((day == “Wednesday”) && (time ==

“8:30”)){

go to CS 105 class;}…

}

Page 6: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

DANGER!!!

= is assignment operator == is test for equality So, what would happen if we wrote:

if ((day = “Wednesday”) && (time = “8:30”))

???

Page 7: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

DANGER!!!

This would assign the value of “Wednesday” to our variable day…

if ((day = “Wednesday”) && (time = “8:30”))

Page 8: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

DANGER!!!

…and this would assign the value of “8:30” to our variable time.

if ((day = “Wednesday”) && (time = “8:30”))

Page 9: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

DANGER!!!

That’s not what we want – we want to test to see if the variables have these values. So we need the two-equals!

if ((day == “Wednesday”) && (time == “8:30”))

Page 10: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Another Common Mistake

Logic and English don’t always match:

If today is Saturday or Sunday…

Wrong: if (day == “Saturday” || “Sunday”)

Right: if ((day == “Saturday”) || (day ==“Sunday”))

Page 11: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Alternatively…

Sometimes, we want to do something if our if statement does not hold: If it’s a weekend, go to the bar and

stay up late, otherwise, do homework and get a good night’s sleep.

JavaScript has the keyword else for this…

Page 12: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Alternatively…

if ((day == “Friday”) || (day == “Saturday”)){

go to bar;stay up late;

}else //today is NOT Friday or Saturday{

do homework;get good night’s sleep;

}

Page 13: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Keep in Mind…

When we have both an if and an else, only one of the two actions (or sets of actions) will be done – never both!!!

We can have an if without an else, but never an else without an if

Page 14: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Nested Conditionals

We can have anything inside an if-statement, including other if- statements!if (x == 1){

if (y < 17){

function1(); //When is this done???}else{

function2(); //When is this done???}

}

Page 15: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Trickiness…

In JavaScript, the curly braces are optional if there’s only one statement after an if or an else:if (today == “Saturday”)

sleepIn();

is equivalent to:if (today == “Saturday”){

sleepIn();}

Page 16: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Trickiness…

But, the following are not equivalent:if (tummy == “hungry”)

goToLunch();eat(mysteryMeat); //mmmm!!!

andif (tummy == “hungry”){

goToLunch();eat(mysteryMeat);

} //Why not???

Page 17: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

More Trickiness…

OK, with the optional curly braces, we can have some confusion with if’s and else’s – such as:if (x == 1)if (y == 2)

doSomething();else

doSomethingElse(); //When do we do this?

Page 18: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

More Trickiness…

Ambiguous else’s always go with the closest unmatched if:if (x == 1)

if (y == 2)

doSomething();

else

doSomethingElse(); //When do we do this?

when x is 1 and y is not 2

Page 19: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

More Trickiness…

Hint – figure out where braces should goif (x == 1){

if (y == 2){

doSomething();}else{doSomethingElse();}

}

Page 20: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

One Last Example…

if (x < 4){

if (x > 10){

sleepInClass(); //When do we do this?}else{

payAttention(); //When do we do this?}

}

Page 21: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Mini-Lab 3

Use if-statements to print an appropriate message on the page

Example: If it’s Wednesday at 1:30, we should

print out “Good afternoon, today is Wednesday!”

Page 22: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Mini-Lab 3

This lab also makes use of the Date() function: var dayAndTime = new Date();

dayAndTime now contains an object with all of the important date pieces.

To get the day piece, we want to use: var today = dayAndTime.getDay(); Today now has a number 0 to 6 (0=Sunday,

etc.)

Page 23: Monday, Week 3 Conditional Statements! If-then statements If-then-else statements Nested if-statements Some examples… Mini-Lab 3!

Announcements

Homework 2 – due Monday HTML & Mini-Labs

Lab 3 –Bring lab entrance assignment on

Monday and pre-lab exercise to lab. Programming Project #1 (Due

Week 4 ) Extend Lab 3