JavaScript beginer

8/9/2019 JavaScript beginer

1/49


2/49

CONDITIONAL CANYONLevel 2


3/49

Our system currently prints both operational and non-operatio

The current build for our train status syste

1 2 3 4 5

7 8 9 10 11


4/49

OUr current System uses two loops...

LEVEL TWO

for(var stoppedTrain = trainsOperational + 1; stoppedTrain


5/49

LEVEL TWO

So how do we run di! erent lines of code based on speci"c cond

lets use one loop instead of two

...

for (var trainNumber = 1; trainNumber


6/49

If and Else allow us to execute certain code based on speci"c co

If, and her buddy, Else

If the conditional evaluates to

true, the code block is executed.

else {

*OTHERWISE, do this code instead!*

}

Else follows up with code to execute ONLY when the If conditi

satisfied. It is ignored otherwise.

if (*some condition is true*) {

*do this code!*

}


7/49

A basic example of conditional execution


We aren’t sure whether it’s strictly

greater than, only that it is not less than.

else {

}

4 is le

var value1 = 4;

var value2 = 9;

console.log(value1 + " is less than " + value2);

if ( value1


8/49

A basic example of conditional execution


Now, this conditional will evaluate tofalse, and so the ‘else’ block will trigg

else {

}

var value1 = ;

var value2 = 9;

console.log(value1 + " is less than " + value2);

if ( value1


9/49

LEVEL TWO

Using conditionals for e#ciency

Can If and Else make our trains.js better?

for (var stoppedTrain = trainsOperational + 1; stoppedTrain


10/49

LEVEL TWO

Looping with If and Else controls

Building our new System Status Loop

...



11/49

Looping with If and Else controls

Building our new System Status Loop

As soon as trainNumber is no longer within the amount of operational trains, the If block is s

Else block begins printing in each new loop.

...



12/49

Running our new single loop!


13/49

Let’s add a train that isn’t operational yet, but starts at noon.

Adding a special train that starts later

1 2 3 4 5

7 8 9 10 11


14/49

LEVEL TWO

When two conditions just isn’t enough!

The Else-If syntax

else {

*IN ALL OTHER CASES, do this code instead!*

}

Rememberas a conditany block, t

skipped en

if (*some condition is true*) {

*do this code!*

} else if (*some OTHER condition is true*) {

*do something for this condition!*

}


15/49

“Else If” can be used when many speci"c scenarios need attent

Checking multiple conditions

if (trainNumber


16/49

if (trainNumber


17/49

LEVEL TWO

Updating our System Status Loop

... for (trainNumber = 1; trainNumber


18/49

So what does this get us?

Nested conditionals


19/49

LEVEL TWO

Splitting results for a single condition

Nested conditionals

We have two sizes for squares... ...but only one size f

Let’s say we had some shapes.

Nested conditionals


20/49

LEVEL TWO


Nested conditionals

We want to color big squares red,and small squares blue... ...while all circles ar

Nested conditionals


21/49

LEVEL TWO


Nested conditionals

*it must be a small square, so make it blue!*

if ( *it’s a square* ) {

} else {

}

*make it red!*

if (*it’s big*) {

} else {

}

*since its not a square, it must be a circle, so make it purple!*

This Else ONLY reacts to a failure ofthe most recently encountered Ifstatement

This Else ONLY triggers if the very first If does not.

Nested conditionals


22/49

if (

else {

if (

else {

) {

}

}

)

}

}

LEVEL TWO


Nested conditionals

*just execute our existing loop code covering the status of train

*print out to passengers that all trains are running!*

*there must be no running trains, so print that out!*

*there are ANY running trains*

*the amount of running trains equals the amount of total trains*

Nested conditionals


23/49

if (

else {

if (

else {

) {

}

}

) {

}

}


Nested conditionals

trainsOperational > 0

trainsOperational == totalTrains

console.log("All trains are running at the JavaScript Express



24/49

Updating trains.js with new conditionsNow passengers will know if all trains are running, or if none are

if ( trainsOperational > 0 ) {

} else {

}

if (trainsOperational == totalTrains) {

} else {

}

console.log("All trains are running at the JavaScript Expr



25/49

var totalTrains = 12;

All trains, or noneLet’s look at how we’d get these situations...

LEVEL TWO

var trainsOperational = 12;



All trains are running at the JavaScript Express!

All trains or none


26/49


All trains, or noneLet’s look at how we’d get these situations...

LEVEL TWO



No trains are operational today. Bummer!

Adding to our list of special trains


27/49

1110987

54321

Adding to our list of special trainsAnother train that will start running at noon on its non-operat



28/49

Another train that will start running at noon on its non-operat


1110987

54321



29/49

Another train that will start running at noon on its non-operat


1110987

54321

Adding a second condition


30/49

LEVEL TWO


*we want something else here*10 begins running at noon."

...

for (trainNumber = 1; trainNumber


31/49

LEVEL TWO

Complex conditionals

Binary ‘And’ returns true if BOTH values are true

Binary ‘Or’ returns true if EITHER value is true

&&

| |

false

> true && false

true

> false || true

true

> true && true

false

> false || false

false

> false &

true

> true ||



32/49

LEVEL TWO


true

>

true

( 5 10 )>

( 11 >= 11 ) && ( -7 ( 2 >= 0 ) && ( 9 ( 3 > 8 ) || ( 7


33/49

if (trainNumber


34/49

trains.js

Printing based on multiple conditions


if (trainNumber


35/49

Our updated status loopAll trains that begin running at noon are now printed!



36/49

1110987

54321

Adding to our list of special trainsUsing && for unique conditions



37/49

1110987

5421

Adding to our list of special trainsUsing && for unique conditions



38/49

1110987

5421

Using && for unique conditions


3

Inserting new conditions


39/49




40/49




41/49

Train #3 is running.

Lets run it!



Train #4 is running.Train #5 is running.Train #6 is running.



Train #9 is not operational.Train #10 will begin running at noon.

Train #12 will begin running at noon.Train #11 is not operational.

Womp, womp...

Why didn’t we get the right status?


42/49

g g s us

Tracing our loop logic

LEVEL TWO





Train #3 is ru

var dayOfWeek = "Friday";

trainNumber


43/49

,

...



44/49

,

else if (trainNumber == 10 || trainNumber == 12 ) {

console.log("Train # " + trainNumber + " will begin runnin

} else if ( ) {

}

...



45/49

else if (trainNumber == 10 || trainNumber == 12 ) {

console.log("Train # " + trainNumber + " will begin runnin

} else if ( ) {

}

...



46/49

Train #3 is not operational.









NOw we get correct printouts!


47/49









var dayOfWeek = "Sunday";

Tracing our complex conditional


48/49

How do we arrive at the di! erent printouts for Train 3?

LEVEL TWO





Train #3 is no


trainNumber


49/49

How do we arrive at the di! erent printouts for Train 3?

LEVEL TWO





var dayOfWeek = "Sunday";

trainNumber

JavaScript beginer

Documents

Transcript of JavaScript beginer