javascript beginer
TRANSCRIPT
-
8/9/2019 JavaScript beginer
1/49
-
8/9/2019 JavaScript beginer
2/49
CONDITIONAL CANYONLevel 2
-
8/9/2019 JavaScript beginer
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
-
8/9/2019 JavaScript beginer
4/49
OUr current System uses two loops...
LEVEL TWO
for(var stoppedTrain = trainsOperational + 1; stoppedTrain
-
8/9/2019 JavaScript beginer
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
-
8/9/2019 JavaScript beginer
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!*
}
-
8/9/2019 JavaScript beginer
7/49
A basic example of conditional execution
If, and her buddy, Else
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/9/2019 JavaScript beginer
8/49
A basic example of conditional execution
If, and her buddy, Else
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
-
8/9/2019 JavaScript beginer
9/49
LEVEL TWO
Using conditionals for e#ciency
Can If and Else make our trains.js better?
for (var stoppedTrain = trainsOperational + 1; stoppedTrain
-
8/9/2019 JavaScript beginer
10/49
LEVEL TWO
Looping with If and Else controls
Building our new System Status Loop
...
for (var trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
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.
...
for (var trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
12/49
Running our new single loop!
-
8/9/2019 JavaScript beginer
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
-
8/9/2019 JavaScript beginer
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!*
}
-
8/9/2019 JavaScript beginer
15/49
“Else If” can be used when many speci"c scenarios need attent
Checking multiple conditions
if (trainNumber
-
8/9/2019 JavaScript beginer
16/49
if (trainNumber
-
8/9/2019 JavaScript beginer
17/49
LEVEL TWO
Updating our System Status Loop
... for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
18/49
So what does this get us?
Nested conditionals
-
8/9/2019 JavaScript beginer
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
-
8/9/2019 JavaScript beginer
20/49
LEVEL TWO
Splitting results for a single condition
Nested conditionals
We want to color big squares red,and small squares blue... ...while all circles ar
Nested conditionals
-
8/9/2019 JavaScript beginer
21/49
LEVEL TWO
Splitting results for a single condition
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
-
8/9/2019 JavaScript beginer
22/49
if (
else {
if (
else {
) {
}
}
)
}
}
LEVEL TWO
Splitting results for a single condition
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
-
8/9/2019 JavaScript beginer
23/49
if (
else {
if (
else {
) {
}
}
) {
}
}
Splitting results for a single condition
Nested conditionals
trainsOperational > 0
trainsOperational == totalTrains
console.log("All trains are running at the JavaScript Express
for (var trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
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
for (var trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
25/49
var totalTrains = 12;
All trains, or noneLet’s look at how we’d get these situations...
LEVEL TWO
var trainsOperational = 12;
trainsOperational == totalTrains
trainsOperational > 0
All trains are running at the JavaScript Express!
All trains or none
-
8/9/2019 JavaScript beginer
26/49
var totalTrains = 12;
All trains, or noneLet’s look at how we’d get these situations...
LEVEL TWO
var trainsOperational = 0;
trainsOperational > 0
No trains are operational today. Bummer!
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
27/49
1110987
54321
Adding to our list of special trainsAnother train that will start running at noon on its non-operat
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
28/49
Another train that will start running at noon on its non-operat
Adding to our list of special trains
1110987
54321
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
29/49
Another train that will start running at noon on its non-operat
Adding to our list of special trains
1110987
54321
Adding a second condition
-
8/9/2019 JavaScript beginer
30/49
LEVEL TWO
Adding a second condition
*we want something else here*10 begins running at noon."
...
for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
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 ||
Complex conditionals
-
8/9/2019 JavaScript beginer
32/49
LEVEL TWO
Complex conditionals
true
>
true
( 5 10 )>
( 11 >= 11 ) && ( -7 ( 2 >= 0 ) && ( 9 ( 3 > 8 ) || ( 7
-
8/9/2019 JavaScript beginer
33/49
if (trainNumber
-
8/9/2019 JavaScript beginer
34/49
trains.js
Printing based on multiple conditions
Adding a second condition
if (trainNumber
-
8/9/2019 JavaScript beginer
35/49
Our updated status loopAll trains that begin running at noon are now printed!
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
36/49
1110987
54321
Adding to our list of special trainsUsing && for unique conditions
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
37/49
1110987
5421
Adding to our list of special trainsUsing && for unique conditions
Adding to our list of special trains
-
8/9/2019 JavaScript beginer
38/49
1110987
5421
Using && for unique conditions
Adding to our list of special trains
3
Inserting new conditions
-
8/9/2019 JavaScript beginer
39/49
Inserting new conditions
... for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
40/49
Inserting new conditions
... for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
41/49
Train #3 is running.
Lets run it!
Train #1 is running.
Train #2 is running.
Train #4 is running.Train #5 is running.Train #6 is running.
Train #7 is running.
Train #8 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?
-
8/9/2019 JavaScript beginer
42/49
g g s us
Tracing our loop logic
LEVEL TWO
var totalTrains = 12;
var trainsOperational = 8;
trainsOperational == totalTrains
trainsOperational > 0
Train #3 is ru
var dayOfWeek = "Friday";
trainNumber
-
8/9/2019 JavaScript beginer
43/49
,
...
for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
44/49
,
else if (trainNumber == 10 || trainNumber == 12 ) {
console.log("Train # " + trainNumber + " will begin runnin
} else if ( ) {
}
...
for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
45/49
else if (trainNumber == 10 || trainNumber == 12 ) {
console.log("Train # " + trainNumber + " will begin runnin
} else if ( ) {
}
...
for (trainNumber = 1; trainNumber
-
8/9/2019 JavaScript beginer
46/49
Train #3 is not operational.
Train #1 is running.
Train #2 is running.
Train #4 is running.Train #5 is running.Train #6 is running.
Train #7 is running.
Train #8 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.
var dayOfWeek = "Friday";
NOw we get correct printouts!
-
8/9/2019 JavaScript beginer
47/49
Train #3 is running.
Train #1 is running.
Train #2 is running.
Train #4 is running.Train #5 is running.Train #6 is running.
Train #7 is running.
Train #8 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.
var dayOfWeek = "Sunday";
Tracing our complex conditional
-
8/9/2019 JavaScript beginer
48/49
How do we arrive at the di! erent printouts for Train 3?
LEVEL TWO
var totalTrains = 12;
var trainsOperational = 8;
trainsOperational == totalTrains
trainsOperational > 0
Train #3 is no
var dayOfWeek = "Friday";
trainNumber
-
8/9/2019 JavaScript beginer
49/49
How do we arrive at the di! erent printouts for Train 3?
LEVEL TWO
var totalTrains = 12;
var trainsOperational = 8;
trainsOperational == totalTrains
trainsOperational > 0
var dayOfWeek = "Sunday";
trainNumber