forked from gdila/gdi-intermediate-js
/
class3.html
389 lines (342 loc) · 15.8 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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>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>
</div>
</section>
<section>
<h3>What is Object-Oriented Programming?</h3>
<ul>
<li>Object Oriented Programming is one of many <strong>programming approaches</strong>: procedural, event-driven, declarative...</li>
<li>All this means is that programs are <strong>organized around objects</strong> (data & functions).</li>
<li>You might choose OOP because Objects make things <strong>easier to understand</strong> and act as a natural way to break your code into modules. When a large code base is composed of many small Objects, it is <strong>easier to maintain</strong> and change.</li>
</ul>
</section>
<section>
<h3>Why use OOP?</h3>
<br>
<p>Easy to Understand</p>
<p>Without seeing my code, you can probably guess what an object called <code>Bike</code> can do (or not do)</p>
<iframe src="https://giphy.com/embed/StWnlQipuBrz2" width="480" height="269" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/electriccyclery-bicycle-trash-panda-StWnlQipuBrz2">via GIPHY</a></p>
</section>
<section>
<h3>Why use OOP?</h3>
<br>
<p>Encapsulation</p>
<p>a fancy way of saying "put all of my properties/behaviors in one place where other objects can't touch them"</p>
<iframe src="https://giphy.com/embed/gpGrAKmOsiD3W" width="480" height="336" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/mc-hammer-gpGrAKmOsiD3W">via GIPHY</a></p>
</section>
<section>
<h3>Why use OOP?</h3>
<br>
<p>Inheritance</p>
<p>Just as you inherited traits from you mom, your objects may inherit traits from other objects</p>
<iframe src="https://giphy.com/embed/3o6EhNI0ycLthisQlW" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/baby-mom-mothersday-3o6EhNI0ycLthisQlW">via GIPHY</a></p>
</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 functions from their prototype.</p>
<p>This is called <strong>prototypal inheritance</strong></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> function</li>
<li>It will have a <code>filter()</code> function</li>
<li>It will have a <code>join()</code> function</li>
</ul>
<p>An array inherits these properties and functions from an <code>Array</code> prototype that defines what an array is (properties) and what it can do (functions)</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 style="margin-bottom:0">Properties:</p>
<ul style="margin-bottom: 1em">
<li>title</li>
<li>author</li>
<li>pages</li>
</ul>
<p style="margin-bottom: 0">Function:</p>
<ul>
<li>read()</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>Kindred</h4>
<p>by Octavia Butler</p>
<p>264 pages</p>
</div>
</div>
<div style="width:33%;float:left;">
<div style="margin:0 0.5em;padding:0.5em;border:5px solid #333;">
<h4>The Handmaid's Tale</h4>
<p>by Margaret Atwood</p>
<p>311 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 <strong>instance</strong> of the <code>Book</code> object prototype.</p>
</section>
<section>
<h3>Defining an object prototype</h3>
<p>Define a <strong>constructor</strong> function with the object prototype's properties and functions:</p>
<pre style="margin-bottom: 2em"><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>
<a href="http://bit.ly/intermediate-js-book" target=blank>http://bit.ly/intermediate-js-book</a>
</section>
<section>
<h3>Instantiating an object</h3>
<p>Now that we have a prototype, we can <strong>instantiate</strong> a new object:</p>
<pre style="margin-bottom: 2em"><code class="javascript">var kindred = new Book('Kindred', "Octavia Butler", 211);
kindred.read(); // Will log "You read 264 pages!" to the console</code></pre>
<p>This creates a new object that inherits the properties and functions from the prototype that we defined.</p>
<iframe src="https://giphy.com/embed/WoWm8YzFQJg5i" width="480" height="351" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/cartoons-comics-sea-reading-WoWm8YzFQJg5i">via GIPHY</a></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 style="margin-bottom: 2em"><code class="javascript">var persepolis = new Book('Persepolis', 'Marjane Satrapi', 160);
var frankenstein = new Book('Frankenstein', 'Mary Shelley', 280);</code></pre>
<p>Let's add a <code>series</code> property to the first book:</p>
<pre style="margin-bottom: 2em"><code class="javascript">persepolis.series = 'Persepolis';</code></pre>
<p>This new property gets added to <span class="green">Persepolis</span>, but not to <span class="green">Frankenstein</span>, and not to any other new objects created from the Book prototype.</p>
</section>
<section>
<h3>Adding new properties and functions to object prototypes</h3>
<p>We can use the prototype property to add new properties and functions to the object prototype:</p>
<p>Adding a property:</p>
<pre style="margin-bottom: 2em"><code class="javascript">Book.prototype.series = '';</code></pre>
<p>Adding a function:</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>Let's use our Book prototype, but let's add a couple of new properties and functions</p>
<ul>
<li><code>rating</code> - a number, rating out of 10</li>
<li><code>genre</code> - a string, the genre of the book</li>
<li><code>getRating()</code> - a function that logs a string to the console, e.g. "You rated this book x out of 10!"</li>
</ul>
<p> </p>
<p>Then instantiate a new <code>Book</code> object and call your new functions on it.</p>
</section>
<section>
<h3>Object-oriented programming</h3>
<p>Object prototypes can inherit properties and functions 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>
</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 style="top:-450px">
<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 function 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>Hardcover</code> that extends <code>Book</code>. The constructor should also take in an <code>edition</code> property.</p>
<p>Instantiate a new <code>Hardcover</code> object and call the <code>read()</code> function on it.</p>
<p>Add a new function to the <code>Hardcover</code> object prototype called <code>getEdition()</code> that logs a message to the console, e.g. "Your book is a first edition!"</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: "Middlemarch",
author: "George Eliot",
numPages: 736
});</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: "In the Woods",
numPages: 464
});</code></pre>
</section>
<section>
<h3>Let's Develop It!</h3>
<p>Building on the exercise from last time, comment out the <code>Hardcover</code> code.</p>
<p>Change the <code>Book</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>Book</code> object and call the <code>read()</code> function 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 -- Dayton --
<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>