-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy patheleven.html
230 lines (223 loc) · 13 KB
/
eleven.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Intro to Javascript</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo"><a href="index.html"><img class="img-responsive" src="img/geekwise_owl.png" alt="geekwise owl logo"></a></div>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Days <span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="presentation"><a href="one.html">dayOne</a></li>
<li role="presentation"><a href="two.html">dayTwo</a></li>
<li role="presentation"><a href="three.html">dayThree</a></li>
<li role="presentation"><a href="four.html">dayFour</a></li>
<li role="presentation"><a href="five.html">dayFive</a></li>
<li role="presentation"><a href="six.html">daySix</a></li>
<li role="presentation"><a href="seven.html">daySeven</a></li>
<li role="presentation"><a href="eight.html">dayEight</a></li>
<li role="presentation"><a href="nine.html">dayNine</a></li>
<li role="presentation"><a href="ten.html">dayTen</a></li>
<li role="presentation"><a href="eleven.html">dayEleven</a></li>
<li role="presentation"><a href="final.html">finalProject</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row section">
<aside class="col-sm-3">
<h2>JSON</h2>
</aside>
<main class="col-sm-9">
<ul class="points">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> is the newer verison of XML. It is similar to native JS objects, with a few methods to go along with it.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">JSON.parse()</a> converts raw JSON data to data to we can deal with.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a> allows us to convert JSON to a string.</li>
<li>We've already discussed APIs, but I'd like to do some practice with one.</li>
<li>Let's try it!
<ul>
<li>Clone my repository <a href="https://github.com/ryekerjh/api-practice.git">here</a></li>
<li>Let's look through the JS code.</li>
<li>Do you recognize any of this?</li>
<li>How can we make the second example dynamic?</li>
</ul>
</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Object/JSON Manipulation</h2>
</aside>
<main class="col-sm-9">
<p>Now that we know what Objects look like, let's look at how to effect objects...
<ol>
<!-- TODO: Add details for for in loop and for of loop, how to access them...-->
</ol>
</p>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>API</h2>
</aside>
<main class="col-sm-9">
<ul class="points">
<li><a href="https://github.com/toddmotto/public-apis">This</a> is a comprehensive list of open source projects you can use in your contracts.</li>
<li>These APIs can be used to gather data from several sources, tying multiple datapoints together for one website or application.</li>
<li>Let's try one out!
<ul>
<li>Pick an API from the list (don't pick one that needs auth)</li>
<li>Take about 20 mins and see if you can read through the documentation and get a JSON response</li>
<li>Try to display your data on the DOM</li>
</ul>
</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Closure</h2>
</aside>
<main class="col-sm-9">
<ul class="points">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closure</a> is one of the more complicated peices of JavaScript, but it is also very useful to understand.</li>
<li>Closure, as simply put as possible, is the access to a certain scope block, outside of that scope block.</li>
<li>For brevity, I will demonstrate in code:
<pre>
<code>
function showMeClosure() {
var bestNumber = 42;
function proveClosureExists() {
console.log( bestNumber );
};
return proveClosureExists;
};
var outsideScope = showMeClosure();
outsideScope(); // 42 -- Whoa, closure was just observed, man.
</code>
</pre>
</li>
<li>That was a lot to digest, but let me break it into its component pieces:
<ol>
<li>
<pre><code>
function showMeClosure() { //Here we see a function, declared in the global space.
var bestNumber = 42; //This var is scoped lexically to the inside of this fn.
function proveClosureExists() {//This function is also lexically scoped inside showMeClosure();
console.log( bestNumber ); //Best number is still 42 here, because bestNumber and proveClosureExists() share the scope of showMeClosure();
};
return proveClosureExists; //This will return the value that proveClosureExists() returns (namely, the value of bestNumber.)
};
</code></pre>
</li>
<li>
<pre>
<code>
// In the global scope (outside of the showMeClosure() scope), we assign the value that
// showMeClosure(); returns to us to a global var. This is where we observe the closure because
// even though this is in the global scope, JS allows the reference to that lexical scope (i.e.
// the inner scope of showMeClosure();) to be passed, in this var ONLY, to a global location.
var outsideScope = showMeClosure();
</code>
</pre>
</li>
<li>
<pre><code>
//Finally, we see the result of closure. We call the var outsideScope
// as a function (this is possible because it is a pointer/reference to a function)
// and we see that even though the calling context is the global scope, closure
// has allowed the definition of bestNumber to be passed outside of lexical scope, to the global scope.
// NEAT!
outsideScope(); // 42 -- Whoa, closure was just observed, man.
</code></pre>
</li>
</ol>
</li>
<li>In it's most basic and understandable form, that is closure. There is more to closure, and I highly recommend reading the chapter from You Don't Know JS about <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md">Scope and Closures</a>.</li>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>ES6 Classes</h2>
</aside>
<main class="col-sm-9">
<p>For some reason, JavaScript decided that it needed <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> to fit in with other, older languages. So I'll have to teach it to you, I suppose...</p>
<ul>
<li>The good news is, classes aren't brittle and potentially devestating to your code as they are in other languages. In short they are:</li>
<ol>
<li>Special Functions that are NOT hoisted</li>
<li>Contains a special method named "constructor" that is used to define and initialize the class.</li>
<li>Can be "extended" to be declared as a child of another class, but not as a child of another Object.</li>
<li>Inferior to prototypes...in my humble opinion!</li>
</ol>
</ul>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>What to expect from frameworks</h2>
</aside>
<main class="col-sm-9">
<p>Now that you know JS in all it's introductory glory, you can write anything from a simple, modern website, to entire web applications. You will find that there are many frameworks that make the development of applications much easier for you.</p>
<ul>
<li>In general, expect frameworks to:</li>
<ol>
<li>Have their own syntactic "sugar" that may make them seem like thier own separate language.</li>
<li>Obscure the actual "native" JavaScript they are using behind thier own code.</li>
<li>(In some cases) Cut down on your development time significantly.</li>
<li>Be a major boon when it comes to job searches/hiring.</li>
</ol>
</ul>
<p>Some stats for you, after all this time!</p>
<p><a href="https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm">Bureau of Labor Statistics</a></p>
<p><a href="https://medium.com/javascript-scene/forget-the-click-bait-here-s-what-the-javascript-job-market-really-looks-like-in-2016-ddfe0d39b467">Eric Elliot</a>'s hard-hitting look at the JS job market.</p>
<p><a href="https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm#tab-6">Job Outlook</a> for web devs.</p>
</main>
</div>
<div class="row section">
<aside class="col-sm-3">
<h2>Take Home</h2>
</aside>
<main class="col-sm-9">
<p>This week you should be finishing up your todo application. Hopefully your HTML is complete, including:</p>
<ol>
<li>A checkbox to mark each item as done</li>
<li>An edit button for each item.</li>
<li>A delete button for each item.</li>
<li>Your JavaScript should be functioning at some level. At the least, you should be able to add your todo items, edit them, and delete them.</li>
<li>Don't forget about your Ul that is going to hold all the items on your todo list, and the second that will hold the ones your user has marked complete.</li>
</ol>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>