-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathlecture-conditionals.html
177 lines (148 loc) · 6.64 KB
/
lecture-conditionals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<title>Lecture: Conditionals</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container">
<div class="container-inner">
<div class="left-sidebar">
<div class="home-anchor">
<h3><a href="index.html">Intro to Programming with JavaScript</a></h3>
</div>
<div class="navigation-links">
<div class="navigation-link-item"><a href="activity-logging.html">Activity: Logging</a></div>
<div class="navigation-link-item"><a href="lecture-variables.html">Lecture: Variables</a></div>
<div class="navigation-link-item"><a href="activity-variables.html">Activity: Variables</a></div>
<div class="navigation-link-item"><a href="lecture-arrays.html">Lecture: Arrays</a></div>
<div class="navigation-link-item"><a href="activity-arrays.html">Activity: Arrays</a></div>
<div class="navigation-link-item"><strong><i><a href="lecture-conditionals.html">Lecture: Conditionals</a></i></strong></div>
<div class="navigation-link-item"><a href="activity-conditionals.html">Activity: Conditionals</a></div>
<div class="navigation-link-item"><a href="assignment-webproposal.html">Assignment: Web App Proposal</a></div>
<div class="navigation-link-item"><a href="lecture-loops.html">Lecture: Loops</a></div>
<div class="navigation-link-item"><a href="activity-arraysadvanced.html">Activity: Arrays (Advanced)</a></div>
<div class="navigation-link-item"><a href="lecture-functions.html">Lecture: Functions</a></div>
<div class="navigation-link-item"><a href="activity-functions.html">Activity: Functions</a></div>
<div class="navigation-link-item"><a href="activity-fizzbuzz.html">Activity: Fizz Buzz</a></div>
<div class="navigation-link-item"><a href="teamchallenge.html">Team Challenge</a></div>
</div>
</div>
<div class="content">
<h1>Lecture: Conditionals</h1>
<p>
So far we've only made the computer do pretty simple stuff, and no matter what it always did the SAME stuff. But how does the computer handle different situations? Let's learn the <code>if</code> statement:
</p>
<pre><code>if (someConditionIsTrue) {
console.log("The condition was true")
} else {
console.log("The condition was false")
}</code></pre>
<p>
You read it like you would english: "If someConditionIsTrue, execute the code in the subsequent block. Else if it's not true execute the code in the else block."
</p>
<h2>Let's try it out:</h2>
<p>
Paste the following code into repl.it, and then re-size the window and click run. What happens?
</p>
<pre><code>let bankBalance = 900;
if (bankBalance > 1000) {
console.log('Treat yo self!')
} else {
console.log('Keep saving.')
}</code></pre>
<p>
Else blocks are not required, it's ok to have an if statement without an else block.
</p>
<pre><code>if (someConditionIsTrue) {
console.log("The condition was true")
}
console.log("This code will ALWAYS run regardless of whether the condition is true or false")</code></pre>
<p>
So what is the "condition" though? It's actually a new type called a <code>boolean</code>. A <code>boolean</code> can have only TWO possible values: <code>true</code> or <code>false</code>. Most of the time booleans are built out of equality and inequality statements. As always <a href="http://www.w3schools.com/js/js_booleans.asp">w3schools has a great reference on booleans</a> that's worth a read. Let's look at some examples:
</p>
<pre><code>const someBoolean = true
const aDifferentBoolean = false
const isZeroEqualToZero = 0 == 0
const isZeroEqualToOne = 0 == 1
const isZeroGreaterThanZero = 0 > 0
const isZeroLessThanOne = 0 < 1
// Try logging these different values to the console.
// You should know which ones are true and which ones are false!
console.log(isZeroLessThanOne)</code></pre>
<p>
Here are a list of the most common ways booleans are made:
</p>
<table border="1">
<tr>
<td>Equals</td>
<td><code>==</code></td>
</tr>
<tr>
<td>Not Equals</td>
<td><code>!=</code></td>
</tr>
<tr>
<td>Greater than</td>
<td><code>></code></td>
</tr>
<tr>
<td>Less than</td>
<td><code><</code></td>
</tr>
<tr>
<td>Greater than or equal to</td>
<td><code>>=</code></td>
</tr>
<tr>
<td>Less than or equal to</td>
<td><code><=</code></td>
</tr>
</table>
<p>
Ok let's combine the boolean type with the <code>if</code> statement to see some real code!
</p>
<pre><code>let userName = "Benno"
if (userName == "Benno") {
console.log("Welcome Benno!")
} else {
console.log("Hi Guest. Have you seen Benno?")
}</code></pre>
<p>
An important strategy is to chain <code>if/else</code> statements. This allows you to conditionally evaluate the <code>else</code> block on whatever condition you want. Let's look at an example:
</p>
<pre><code class="javascript">let userAge = 29
if (userAge >= 21) {
// userAge is 21 or higher
console.log("Let's party tonight")
} else if (userAge >= 18) {
// userAge is 18 or higher but less than 21
console.log("Let's party responsibly tonight")
} else if (userAge >= 13) {
// userAge is 13 or higher but less than 18
console.log("Let's have a LAN party tonight")
} else {
// userAge is less than 13
console.log("Time for bed, isn't it past your bedtime?")
}</code></pre>
<p>
(Optional) <b>Challenge</b>: write the same logic seen above, but going the <i>other</i> way. In other words, start with <code>if (userAge < 13 ) { ... }</code> and handle all the cases with <code>if/else ifelse</code> statements. You should get the same output the code above gets for <code>var userAge = 29</code>.
</p>
<h2>Boolean Operators</h2>
<p>
Another important tool are the <b>boolean operators</b> <code>&&</code>, <code>||</code>, and <code>!</code> which are <b>AND</b>, <b>OR</b>, and <b>NOT</b> respectively. <a href="http://www.columbia.edu/cu/lweb/help/clio/boolean_operators.html">Here is a nice guide</a> to visualize these operators.
</p>
<pre><code>if (userAge >= 25 && userAge < 70) {
console.log("Perfect age to rent a car")
}
if (userAge == 18 || userAge == 21) {
console.log("Congrats on the big milestone year!")
}</code></pre>
</div>
</div>
</div>
</body>
</html>