Picture

Hi, I'm Travis Faas.

Teacher.

Conditional Execution

Logic

  • The building blocks of interactivity
  • Computers can do basic logical checks
    • Greater than / greater than or equal to
    • Less than / less than or equal to
    • Equal to
    • Not equal to
  • These checks all turn out to be true or false

Less than

var resultOne = 5 < 7; //true
var resultTwo = 7 < 5; //false

Greater than

var resultOne = 5 > 7; //false
var resultTwo = 7 > 5; //true

Equal to

var resultOne = 5 == 5; //true
var resultTwo = 7 == 5; //false

Not equal to

var resultOne = 5 != 5; //false
var resultTwo = 7 != 5; //true

The if statement

  • Only runs a block of code if something is true

  • A block of code is anything inside of curly brackets { }

  • An example:

if(true)
{
	//this code runs
}

Else

  • The else statement only runs if the thing within the if statement is false
if(4<5) {
	alert("All is right with the world.");
}
else
{
	alert("Something has gone terribly wrong");
}

Confirms

These are awful. Never use them in real development. And yet, for our purposes here, they can be useful.

In short, using the confirm method in JavaScript pops up a window that displays some text and lets the user respond with a yes or a no.

This response turns into a boolean true or false.

var yesOrNoHmmm = confirm("Yes or no?");

console.log(yesOrNoHmmm); //will be either true or false

Nesting conditionals

  • It is entirely possible to have if statements within if statements
//get user's input if they want to read a book
var readAbook = confirm("Do you want to read a book?");
var doHomework = confirm("Do you also want to do you homework?")

if(readABook == true)
{
	//if the user wants to read a book
	if(doHomework==true)
	{
		//if the user wants to do their homework
		alert("Excellent!");
	}
}
else
{
	//if the user does not want to read a book
	alert("Your mind will rot!")
}

Quick question

  • With the code above, is there a chance the user will not see a final alert?

Logical operators

  • The previous example can be simplified down a bit using logical operators
&& //('AND')
|| //('OR')

How the logical operators work

  • looks for a true/false one either side
  • Turns into a single true/false
true 	|| false 	// true
true 	|| true 	// true
false	|| false 	// false

true 	&& true		// true
true 	&& false	// false
false	&& false	// false

Simplifying our previous if/else statement

//get user's input if they want to read a book
var readAbook = confirm("Do you want to read a book?");
var doHomework = confirm("Do you also want to do you homework?")

if(readABook == true && doHomework == true)
{
	//if the user wants to read a book AND do their homework
	alert("Excellent!");
}
else
{
	//if the user does not want to read a book
	alert("Your mind will rot!")
}

Else if

Else ifs will only run if the previous if does not evaluate to true. They come after a closing curly bracket, and you can have also many as you want.

var grade:number = 85;

if(grade >= 90) {
	console.log("Hooray.");
} else if (grade >= 80) {
	console.log("good enough.");
} else if (grade >=70) {
	console.log("I am avergae.");
} else {
	console.log("Count have done better...");
}

A brief note about formatting

  • Note that every time a { appears, the next line is tabbed in
  • And once that block exits with a }, the following lines are not longer tabbed in
  • Get in the habit of doing this
    • Yes, it will be worth points