-
Notifications
You must be signed in to change notification settings - Fork 7
/
class3.html
358 lines (315 loc) · 13.6 KB
/
class3.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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript 201: Intermediate JavaScript</title>
<meta name="description" content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Forked from Hakim El Hattab's reveal.js">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor --><link rel="stylesheet" href="lib/css/light.css">
<!-- dark editor <link rel="stylesheet" href="lib/css/dark.css">-->
<!-- <link rel="stylesheet" href="lib/css/zenburn.css"> -->
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- OOP with JavaScript -->
<section>
<h3>Object-Oriented Programming (OOP)</h3>
<div class="fragment">
<p>…in JavaScript is really</p>
<h3>“Object-oriented” JavaScript</h3>
<p>JavaScript is not a strict OO language like Java, but we can still use it in an object-oriented way.</p>
<p>Future versions of JavaScript are already in the works with more OO features built into the language.</p>
</div>
</section>
<section>
<h3>JavaScript Object Prototypes</h3>
<p>Every object in JavaScript has a prototype.</p>
<p>All JavaScript objects inherit their properties and their methods from their prototype.</p>
<p>This is called <span class="blue">prototypal inheritance</span></p>
</section>
<section>
<h3>Object Prototypes</h3>
<p>We know that when we create a new array:</p>
<ul>
<li>It will have a <code>length</code> property</li>
<li>It will have a <code>map()</code> method</li>
<li>It will have a <code>filter()</code> method</li>
<li>It will have a <code>join()</code> method</li>
</ul>
<p>An array inherits these properties and methods from an <code>Array</code> prototype that defines what an array is (properties) and what it can do (methods)</p>
</section>
<section>
<h3>Object Prototype Example</h3>
<p>Let's use a book as an example of an object prototype.</p>
<div style="width:50%;margin-left:auto;margin-right:auto;border:5px solid #333;padding:0.5em;">
<h4>Book prototype</h4>
<p>Properties:</p>
<ul>
<li>title</li>
<li>author</li>
<li>pages</li>
</ul>
<p>Methods:</p>
<ul>
<li>read()</li>
<li>buy()</li>
</ul>
</div>
</section>
<section>
<h3>Object Prototype Instances</h3>
<p>There can be many <code class='blue'>instances</code> of object prototypes:</p>
<div style="overflow:hidden;">
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>The Giver</h4>
<p>by Lois Lowry</p>
<p>179 pages</p>
</div>
</div>
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>Fox in Sox</h4>
<p>by Dr. Seuss</p>
<p>62 pages</p>
</div>
</div>
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>A Wrinkle in Time</h4>
<p>by Madeline L'Engle</p>
<p>211 pages</p>
</div>
</div>
</div>
<p>Each is an <span class="blue">instance</span> of the <code>Book</code> object prototype.</p>
</section>
<section>
<h3>Defining an object prototype</h3>
<p>Define a <span class="blue">constructor</span> function with the object prototype's properties and methods:</p>
<pre><code class="javascript">function Book(title, author, numPages) {
this.title = title;
this.author = author;
this.numPages = numPages;
this.currentPage = 0;
this.read = function() {
this.currentPage = this.numPages;
console.log("You read " + this.numPages + " pages!");
};
}</code></pre>
<p>Conventionally, object prototype names are capitalized.</p>
</section>
<section>
<h3>Instantiating an object</h3>
<p>Now that we have a prototype, we can <span class="blue">instantiate</span> a new object:</p>
<pre><code class="javascript">var book = new Book("Robot Dreams", "Isaac Asimov", 320);
book.read(); // Will log "You read 320 pages!" to the console</code></pre>
<p>This creates a new object that inherits the properties and methods from the prototype that we defined.</p>
</section>
<section>
<h3>What does <code>new</code> do?</h3>
<ol>
<li>Creates a new <code>Object</code></li>
<li>Creates and binds a new <code>this</code> to that object</li>
<li>Sets the new Object's <code>prototype</code> property to be the constructor function's <code>prototype</code> object</li>
<li>Executes the constructor function</li>
<li>Returns the newly created object</li>
</ol>
</section>
<section>
<h3>Adding new properties to objects</h3>
<p>Let's say we've created two book objects using the Book prototype we set up earlier:</p>
<pre><code class="javascript">var myBook1 = new Book('The Boxcar Children', 'Gertrude Chandler Warner', 160);
var myBook2 = new Book('Around the World in 80 Days', 'Jules Verne', 315);</code></pre>
<p>Let's add a <code>series</code> property to the first book:</p>
<pre><code class="javascript">myBook1.series = 'The Boxcar Children';</code></pre>
<p>This new property gets added to <span class="green">The Boxcar Children</span>, but not to <span class="green">Around the World in 80 days</span>, and not to any other new objects created from the Book prototype.</p>
</section>
<section>
<h3>Adding new properties and methods to object prototypes</h3>
<p>We can use the prototype property to add new properties and methods to the object prototype:</p>
<p>Adding a property:</p>
<pre><code class="javascript">Book.prototype.series = '';</code></pre>
<p>Adding a method:</p>
<pre><code class="javascript">Book.prototype.buy = function(){
console.log('You bought ' + this.name);
}</code></pre>
</section>
<section>
<h3>Let's Develop It!</h3>
<p>Create a <code>Video</code> object prototype. The <code>Video</code> object prototype should have the following properties and methods:</p>
<ul>
<li><code>title</code> - a string</li>
<li><code>uploader</code> - a string, the person who uploaded the video</li>
<li><code>seconds</code> - a number, the duration of the video</li>
<li><code>watch()</code> - a method that logs a string to the console, e.g. "You watched all 76 seconds of Maru in a box!"</li>
</ul>
<p> </p>
<p>Then instantiate a new <code>Video</code> object and call the <code>watch()</code> method on it.</p>
</section>
<section>
<h3>Object-oriented programming</h3>
<p>Object prototypes can inherit properties and methods from other object prototypes.</p>
<div style="overflow:hidden;">
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>Book</h4>
<ul>
<li><code>title</code></li>
<li><code>author</code></li>
<li><code>pages</code></li>
<li><code>read()</code></li>
<li><code>buy()</code></li>
</ul>
</div>
</div>
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>Ebook</h4>
<p>Inherits from book, but also has:</p>
<ul>
<li><code>filesize</code></li>
<li><code>download()</code></li>
</ul>
</div>
</div>
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>Paperback</h4>
<p>Inherits from book, but also has:</p>
<ul>
<li><code>cover</code></li>
<li><code>burn()</code></li>
</ul>
</div>
</div>
</div>
</section>
<section>
<h3>Extending object prototypes</h3>
<p>First, define a constructor function</p>
<pre><code class="javascript">function PaperBack(title, author, numPages, cover) {
Book.call(this, title, author, numPages);
this.cover = cover;
}</code></pre>
<p>Extend the Book object prototype</p>
<pre><code class="javascript">PaperBack.prototype = Object.create(Book.prototype);</code></pre>
<p>Define a new method on this object prototype</p>
<pre><code class="javascript">PaperBack.prototype.burn = function() {
console.log("Omg, you burnt all " + this.numPages + " pages");
this.numPages = 0;
}</code></pre>
<p>Instantiate a new object</p>
<pre><code class="javascript">var paperback = new PaperBack("1984", "George Orwell", 250, "cover.jpg");
paperback.read();
paperback.burn();</code></pre>
</section>
<section>
<h3>Inheritance</h3>
<img src="img/book-ebook.png" height="400" width="400" alt="">
<p>All Ebooks are Books, but not all Books are Ebooks.</p>
</section>
<section>
<h3>Let's Develop It!</h3>
<p>Building on the exercise from last time, create a new object prototype <code>MusicVideo</code> that extends <code>Video</code>. The constructor should also take in an <code>artist</code> property.</p>
<p>Instantiate a new <code>MusicVideo</code> object and call the <code>watch()</code> method on it.</p>
<p>Add a new method to the <code>MusicVideo</code> object prototype called <code>rockOut()</code> that logs a message to the console, e.g. "You just rocked out to Shake it Off by Taylor Swift!"</p>
</section>
<section>
<h3>Clearer Constructors</h3>
<p>By passing in a config object, we can make our code easier to read and understand:</p>
<pre><code class="javascript">function Book(config) {
this.title = config.title;
this.author = config.author;
this.numPages = config.numPages;
this.currentPage = 0;
}</code></pre>
<p>Then we pass in an object instead of a series of arguments to instantiate a new object:</p>
<pre><code class="javascript">var book = new Book({
title: "Robot Dreams",
author: "Isaac Asimov",
numPages: 320
});</code></pre>
</section>
<section>
<h3>Optional Arguments</h3>
<p>Use the <code>||</code> operator to define a default value for properties.</p>
<pre><code class="javascript">function Book(config) {
this.title = config.title || "Untitled";
this.author = config.author || "Unknown";
this.numPages = config.numPages || 100;
this.currentPage = 0;
}
var book = new Book({
title: "Robot Dreams",
numPages: 320
});</code></pre>
</section>
<section>
<h3>Let's Develop It!</h3>
<p>Building on the exercise from last time, comment out the <code>MusicVideo</code> code.</p>
<p>Change the <code>Video</code> constructor function to accept an object literal instead of multiple arguments.</p>
<p>Define a default value for every property.</p>
<p>Finally, instantiate a new <code>Video</code> object and call the <code>watch()</code> method on it.</p>
</section>
<section>
<h2>Questions?</h2>
<p>Any questions on object prototypes or inheritance?</p>
</section>
</div>
<footer>
<div class="copyright">
JavaScript 201 -- Los Angeles --
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/accessibility-helper/js/accessibility-helper.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>