This repository has been archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcallbacks-and-constructors.html
225 lines (224 loc) · 15.3 KB
/
callbacks-and-constructors.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<title>Callbacks and Constructors</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,400,400i,700" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css">
<link rel='stylesheet' type='text/css' href="../css/prism.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css">
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:2.5vw; line-height:0.7em; letter-spacing: -0.33em; font-weight:100;'>
:'######:::::'###::::'##:::::::'##:::::::'########:::::'###:::::'######::'##:::'##::'######:::::::'####::::
'##... ##:::'## ##::: ##::::::: ##::::::: ##.... ##:::'## ##:::'##... ##: ##::'##::'##... ##:::::'##. ##:::
##:::..:::'##:. ##:: ##::::::: ##::::::: ##:::: ##::'##:. ##:: ##:::..:: ##:'##::: ##:::..::::::. ####::::
##:::::::'##:::. ##: ##::::::: ##::::::: ########::'##:::. ##: ##::::::: #####::::. ######::::::'####:::::
##::::::: #########: ##::::::: ##::::::: ##.... ##: #########: ##::::::: ##. ##::::..... ##::::'##. ##'##:
##::: ##: ##.... ##: ##::::::: ##::::::: ##:::: ##: ##.... ##: ##::: ##: ##:. ##::'##::: ##:::: ##:. ##:::
. ######:: ##:::: ##: ########: ########: ########:: ##:::: ##:. ######:: ##::. ##:. ######:::::. ####. ##:
:......:::..:::::..::........::........::........:::..:::::..:::......:::..::::..:::......:::::::....::..::
:'######:::'#######::'##::: ##::'######::'########:'########::'##::::'##::'######::'########::'#######::'########:::'######::
'##... ##:'##.... ##: ###:: ##:'##... ##:... ##..:: ##.... ##: ##:::: ##:'##... ##:... ##..::'##.... ##: ##.... ##:'##... ##:
##:::..:: ##:::: ##: ####: ##: ##:::..::::: ##:::: ##:::: ##: ##:::: ##: ##:::..::::: ##:::: ##:::: ##: ##:::: ##: ##:::..::
##::::::: ##:::: ##: ## ## ##:. ######::::: ##:::: ########:: ##:::: ##: ##:::::::::: ##:::: ##:::: ##: ########::. ######::
##::::::: ##:::: ##: ##. ####::..... ##:::: ##:::: ##.. ##::: ##:::: ##: ##:::::::::: ##:::: ##:::: ##: ##.. ##::::..... ##:
##::: ##: ##:::: ##: ##:. ###:'##::: ##:::: ##:::: ##::. ##:: ##:::: ##: ##::: ##:::: ##:::: ##:::: ##: ##::. ##::'##::: ##:
. ######::. #######:: ##::. ##:. ######::::: ##:::: ##:::. ##:. #######::. ######::::: ##::::. #######:: ##:::. ##:. ######::
:......::::.......:::..::::..:::......::::::..:::::..:::::..:::.......::::......::::::..::::::.......:::..:::::..:::......:::
</pre>
<h2 class='date'> August 11th, 2018</h2>
</header>
<article class='container'>
<section id="todo">
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Practive: Application Development</li>
<li>Callbacks</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good morning, everyone! Today, you'll be putting your constructor knowledge to work by building a large, multi-part application,
among some smaller ones. Your goals for the day will include sketching the architecture of small applications (and implementing
them), using objects to consolidate related information, creating them with constructors, and articulating the relationship
between callbacks and functions. This seems like a lot when written out but will come to you naturally as you build robust,
data-driven applications.
</p>
<p>Any questions before we begin?</p>
</section>
<section>
<h1>Application Development</h1>
<p>Today's class will be largely focused on creating an application that uses the
<a href="https://www.tvmaze.com/api" target="_blank">TV Maze API</a> to search for TV shows using command line arguments.
It will also take input for cast members as well, also using command line arguments. Searches will be logged to a
<span class="monospace accent">log.txt</span> file. I'll demo this application for you shortly by using the
<code>show</code> and <code>actor</code> arguments and a show and actor to search for, respectively.</p>
<p>For this application, you will:</p>
<ul>
<li>Write out a high-level application architecture</li>
<li>Implement logic for parsing command-line args and running the corresponding functionality in a file called
<span class="monospace accent">cli.js</span>
</li>
<li>Implement logic to search for both shows and actors using an object generated by a constuctor in a file called
<span class="monospace accent">tv.js</span> file
</li>
</ul>
<p>It is highly recommended that you have a partner for the multiple parts of this activity, but it is not required.</p>
<div class="student-activity">
<h2>Partner activity!</h2>
<h3>Application Architecture</h3>
<p>Grab a partner and we'll get to the very beginning of the application: sketching it out. This should always
be your first step before you start writing code, just like with HTML/CSS.
</p>
<p>For this exercise, start by describing what your application does. Do this in a bulleted list.</p>
<p>Next, decide how you might divvy up these responsibilities. Would you write a single module that handles all of them? Would
you write one module for each bullet list? Something else? Be sure to justify your decision.</p>
<p>Finally, draw a diagram describing the flow of your application. Don't worry about being
<span class="italic">too</span> precise here, but include
enough detail where you can use it as a guide to explain it to someone else. You can do this either by using pencil and paper
or flowchart generation software like <a href="https://www.draw.io/" target="_blank">draw.io</a>
or <a href="https://docs.google.com/" target="_blank">Google Docs</a> <span class="italic muted">(not nearly as robust,
but works in a pinch)</span>.</p>
<p>Recall that this application also prints the logged data to a file named <span class="monospace accent">log.txt</span>.</p>
</div>
<div class="review">
<h2>Application Architecture Review</h2>
<p>Let's get a group or two to share their bulleted list, components defined, and methodology behind the design.</p>
<p>There are myriad ways to write a JavaScript application—there is no one correct way. The solution we have is
recommended but not necessary.
</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Command-Line Interface</h3>
<p>We'll be working on the <abbr title="Command-Line Interface">cli</abbr> module, since it's the starting point for our application.</p>
<p>When the completed <span class="monospace accent">cli.js</span> file is run with Node,
it should be able to handle command line arguments similar to those below:</p>
<pre><code class="language-bash"># Search for The Andy Griffith Show
node cli show The Andy Griffith Show
# Search for the actor Andy Griffith
node cli actor Andy Griffith</code></pre>
<p>In these examples, the cli expects input in the following format:</p>
<code class="language-bash">node cli <show-or-actor> <actor-or-show-name></code>
<p>To begin, open <span class="monospace accent">cli.js</span> and write code to store the
<span class="monospace accent"><show-or-actor></span> command line argument in a variable named <span class="monospace accent">search</span>.</p>
Store the <span class="monospace accent"><actor-or-show-name></span> command line argument in a variable named <span class="monospace accent">term</span>.
Keep in mind that this argument may contain spaces so it may span multiple
indexes of <span class="monospace accent">process.argv</span>. Use <code class="language-JavaScrip">slice()</code> for this.
<p>Then, write an if/else statement to print to the console whether a show or actor is being searched for.</p>
<p>We will add some functionality to actually perform the API calls in the next activity.</p>
<p><span class="bonus">Bonus:</span> Write logic to set up a default search type and default term if either are missing.</p>
</div>
<div class="review">
<h2>CLI Review</h2>
<p>Let's go over the code for the CLI.</p>
</div>
<hr>
<div class="student-activity">
<h2>Partner activity!</h2>
<h3>Implement Find Show</h3>
<p>Open the <span class="monospace accent">tv.js</span> file. This file contains a constructor function that will be used to create a TV object capable of searching
the TV Maze API for shows and actors.</p>
<p>Install the <code>request</code> package by running <code>npm install request</code> in your terminal. We will use the <code>request</code> module to make
AJAX requests to the TV Maze API. Require the <code>request</code> package and the built-in <code>fs</code> package at the top of the <span class="monospace accent">tv.js</span> file.</p>
<p>Inside of the <code>TV</code> constructor function's <code>findShow</code> method, use the <code>request</code> package to hit the TV Maze API for the <span class="monospace accent">URL</span>
string.</p>
<p>Once you have the response body of the AJAX request, use <code>JSON.parse</code> to convert it to JSON (it comes back as a string).</p>
<p>After getting the JSON response from the AJAX request, create a string containing the following information from the returned
show data:</p>
<ul>
<li>The name of the show</li>
<li>The show's genre(s)</li>
<li>The show's average rating</li>
<li>The show's network name</li>
<li>The show's summary</li>
</ul>
<p>Save this string to the <span class="monospace accent">log.txt</span> file using the <code>fs.appendFile</code> method.
If the file does not already exist, <code>fs.appendFile</code> will create it.</p>
<p>After saving the data to the <span class="monospace accent">log.txt</span> file, print this information to the console.</p>
<p>Verify your code works by running the cli file and passing in the name of a TV show, e.g. <code>node cli show Scrubs</code>. This should
print the specified information to the console and save it to the <span class="monospace accent">log.txt</span> file.</p>
</div>
<div class="review">
<h2>Find Show Review</h2>
<p>Let's check out the solution to get TV shows from the TV Maze API.</p>
</div>
<hr>
<div class="student-activity">
<h2>Partner activity!</h2>
<h3>Implement Find Actor</h3>
<p>Open <span class="monospace accent">tv.js</span> and update the constructor function's <code>findActor</code> method. It should use the <code>request</code> package to search the
TV Maze API using the provided URL.</p>
<p>Once the data has been retrieved from the API, parse it as JSON (it should be a string initially) and grab only the first
result (it should be an array of JSON objects).</p>
<p>Save the following information about the actor to the <span class="monospace accent">log.txt</span> file using the <code>fs.appendFile</code> method:</p>
<ul>
<li>Name</li>
<li>Birthday</li>
<li>Gender</li>
<li>Country</li>
<li>TV Maze URL</li>
</ul>
<p>Once the data has been saved to the <span class="monospace accent">log.txt</span> file, print it to the console.</p>
<p>Test that your code works properly by running the <code>cli.js</code> file with arguments. e.g. <code>node cli actor Kyle McLaughlin</code>.</p>
<p><span class="hint">Hint:</span> this should be very similar to the <code>findShow</code> method.</p>
</div>
<div class="review">
<h2>Implement Find Actor Review</h2>
<p>Let's go over this functionality, then demonstrate the completed application. The finished product
is very close to possibly being a very useful NPM package someone else may want to use.
</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>Callbacks</h1>
<p>By this point, you should all be very familiar with the concept of a callback function—more or less, they are just
values passed as arguments to functions. These began cropping up around our jQuery lessons, then slowly began to become a
vitally important JavaScript paradigm. Every time we use <code>fs</code>, event listeners, <code>inquirer</code>—they
are practically inescapable, and this is for the better.
</p>
<p>Callback functions are also known as <span class="bold accent">lambda</span> functions in some other programming languages.
The concept itself is quite useful, as it allows a function to do one thing then synchronously offload the results onto
that other function, allowing us to clean up and condense our code. Let's do a practice activity
implementing our own callback functions.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Callbacks</h3>
<p>Write a function that accepts a string and a function as arguments. It should log the string, and then run the function.</p>
<p>Write a function that accepts a boolean value and a function as arguments. It should run the function if and only if the
boolean argument is true.</p>
<p>rite a function that accepts a function (F) and a value (V), and returns a function that returns the result of running F
on V. This sounds tricky, but it's easier than it sounds—just take it step by step!</p>
<p>Finally, write a short message to a file using <code>fs.writeFile</code>. Does this function use callbacks? If so, identify them.</p>
</div>
<div class="review">
<h2>Callbacks Review</h2>
<p>Let's do a deep dive into these callback functions—unlike other instances, we are equally interested in methodology
as implementation, the former of which we usually take for granted. We are formalizing our rather stripped-down concept of
callbacks.
</p>
</div>
</section>
<section>
<h1>Node Checkpoint</h1>
<p>Our last activity of the day will be a Node checkpoint. As usual, this is ungraded and does not affect your grades or ability
to complete the program. It's just a nice way for us to gauge your progress.
</p>
</section>
<div class="page-break">
<h1>That's all for today, see you Monday!</h1>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>