-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathlecture-loops.html
139 lines (117 loc) · 5.75 KB
/
lecture-loops.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
<!DOCTYPE html>
<html>
<head>
<title>AC Workshop - Lecture: Arrays</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"><a href="lecture-conditionals.html">Lecture: Conditionals</a></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"><strong><i><a href="lecture-loops.html">Lecture: Loops</a></i></strong></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: Loops</h1>
<p>
Imagine if we wanted to print out ALL the elements of an array. Or the even numbers between 0 and 100. Or even just repeat the same thing - like "text my mom something nice" or "text my ex something mean" - 100 times?
</p>
<pre><code>console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
console.log(7)
console.log(8)
console.log(9)
console.log(10)
console.log(11)
console.log(12)
console.log(13)
console.log(14)
console.log(15)</code></pre>
<p>
That looks pretty tedious! What if we wanted to up to 100, or 1,000, or 1,000,000?!
</p>
<p>
Computers are not very smart, but they are <i>very</i> good at doing repetetive tasks. How? They use <b>loops</b>!
</p>
<pre><code>for (let i = 0; i < 100; i++) {
console.log(i)
}</code></pre>
<p>
So what's going on here? Let's break it down:
</p>
<p>
The loop has four major sections:
<ol>
<li>Initialization: <code>let i = 0</code></li>
<li>Condition: <code>i < 100</code></li>
<li>Increment: <code>i++</code></li>
<li>Body: <code>console.log(i)</code></li>
</ol>
</p>
<p>
These are all just examples, you can put anything you want in any of the four sections (including nothing at all!), but the vast majority of the time all four sections have something in them.
</p>
<h2>Initialization</h2>
<p>
The <b>initialization</b> is where you set up the variables that you need for your loop. The most common is <code>let i = 0;</code> but you can start at anything, for example: <code>1</code> or <code>1000000</code>, depending on what your program is doing.
</p>
<p>
<b>Challenge Question:</b> What would the initialization be if we wanted to start our index at the END of an array and work backwards?
</p>
<h2>Condition</h2>
<p>
The loop will execute the <b>body</b> repeatedly until the <b>condition</b> evaluates to <code>false</code>. Each execution of the body is called an <b>iteration</b>.
</p>
<p>
<b>Challenge Question:</b> What would the condition be if we wanted to start our index at the END of an array and work backwards? What about if we started at the BEGINNING of an array and work forwards to the end?
</p>
<h2>Increment</h2>
<p>
The <b>increment</b> is where you update the variables at the end of each iteration. The most common is <code>i++</code> but you can do anything, for example: <code>i += 2</code> or <code>i *= 2</code>, depending on what your program is doing.
</p>
<p>
<b>Challenge Question:</b> What would the increment be if we wanted to start our index at the END of an array and work backwards?
</p>
<h2>Body</h2>
<p>
The <b>body</b> is the meat of your loop. The rest is just figuring out where you start, where you end, and what the step size is. The body gets executed over and over again until the condition evaluates to <code>false</code>.
</p>
<p>
<b>Challenge Question:</b> Now that we have all the pieces, write a program that iterates through an array from the back to the front and prints out only the values at the odd indices.
</p>
<pre><code>const myArray = [7, 24, 25, 9, 40, 41, 11, 60, 61];
// your program should output: 60,41,9,24</code></pre>
<p>
<b>Challenge Question:</b> write a program that iterates through an array from the front to the back and prints out only the <b>odd</b> values.
</p>
<pre><code>const myArray = [7, 24, 25, 9, 40, 41, 11, 60, 61];
// your program should output: 7,25,9,41,11,61</code></pre>
</div>
</div>
</div>
</body>
</html>