-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (157 loc) · 8.39 KB
/
index.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gaining Insight into JS using DevTools</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="dev-tools" class="screen">
<h2>Dev Tools Intro</h2>
<ul>
<li>I'll be using <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly" target="_blank">Firefox Nightly</a> for this presentation, but other versions of Firefox as well as <a href="https://www.google.com/intl/en/chrome/" target="_blank">Chrome</a> have similar dev tools</li>
<li>We'll be working mostly with a combination of the "Debugger" ("Sources" in Chrome) and "Console" tabs:
<ol><li>Keyboard open "Console" command in Firefox
<ul>
<li>Mac: <kbd>cmd-opt-k</kbd> / <kbd>⌘⌥k</kbd></li>
<li>Windows: <kbd>ctrl-shift-k</kbd></li>
</ul>
<li>Keyboard open "Console" command in Chrome
<ul>
<li>Mac: <kbd>cmd-opt-j</kbd> / <kbd>⌘⌥j</kbd></li>
<li>Windows: <kbd>ctrl-shift-j</kbd></li>
</ul>
</li>
<li><kbd>cmd + ]</kbd> to shift right from the "Console" tab to the "Debugger"/"Sources" tab</li>
<li><kbd>esc</kbd> to toggle the "Console" view in a Dev Tools tab other than the "Console" tab
</ol>
</li>
<li>
In Firefox's "Console" tab, press <kbd>cmd-b</kbd> to show the multi-line editor.
</li>
<li>
In Chrome's "Sources" tab, click the <ide-button>>></ide-button> to the right of "Page" & "Filesystem", then select the "Snippets" tab, then create a "+ New Snippet".
</li>
<!-- <li>We need to tell Chrome where our local directory is, and give it permission to make modifications:
<ol>
<li>Click the "Filesystem" tab.</li>
<li>Click the "+ Add folder to workspace" button.</li>
<li>Navigate down to your cloned directory of the repo.</li>
<li>Click the "Select" button.</li>
<li>In the yellow toaster, click the "Allow" button.</li>
<li>Ensure you're showing the "index.html" file's contents.</li>
<li>Hide the Navigator sidebar.</li>
<li><span class="has-ide-button"><img class="ide-button" src="imgs/hide-left.png"></img>/<img class="ide-button" src="imgs/show-left.png"></img>/<img class="ide-button" src="imgs/hide-right.png"></img>/<img class="ide-button" src="imgs/show-right.png"></img> - expand/collapse panels</span></li>
</ol>
</li> -->
<li><kbd>cmd-enter</kbd> will run your program.</li>
</ul>
<a href="#debugging-intro" class="next">Next</a>
</div>
<div id="debugging-intro" class="screen">
<h2>Debugging Intro</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger" target="_blank"><code>debugger</code></a> - code execution is paused at the <code>debugger</code> statement</li>
<li><span class="has-ide-button"><img class="ide-button" src="imgs/firefox-debugger-buttons-play.png"></img> <img class="ide-button" src="imgs/chrome-debugger-buttons-play.png"></img> <kbd>⌘\</kbd> resumes script</span></li>
<li><span class="has-ide-button"><img class="ide-button" src="imgs/firefox-debugger-buttons-step-into.png"></img> <img class="ide-button" src="imgs/chrome-debugger-buttons-step-into.png"></img> <kbd>⌘;</kbd> runs the next executable statement</span></li>
<li><span class="has-ide-button"><img class="ide-button" src="imgs/firefox-debugger-buttons-step-out-of.png"></img> <img class="ide-button" src="imgs/chrome-debugger-buttons-step-out-of.png"></img> <kbd>⌘⇧</kbd> run the remaining executable statements in the current function, then stop at the next executable statement outside of this function</span></li>
<li><span class="has-ide-button"><img class="ide-button" src="imgs/firefox-debugger-buttons-step-over.png"></img> <img class="ide-button" src="imgs/chrome-debugger-buttons-step-over.png"></img> <kbd>⌘'</kbd> run the next function and then stop at the next executable function</span></li>
</ul>
<pre>
debugger;
console.log('Hello World!');</pre>
<a href="#scope-global" class="next">Next</a>
</div>
<div id="scope-global" class="screen">
<h2>Scope - Global</h2>
<pre>
debugger;
function aFunction () {
console.log('Hello World from aFunction');
};
var aVar = 'Hello World from aVar';
let aLet = 'Hello World from aLet';
const aConst = 'Hello World from aConst';</pre>
<ul>
<li>scope - the current context of the code </br>
(e.g. "Cleopatra" is recognized globally, </br>
"fry sauce" is recognized within Utah, </br>
"Sean" is recognized within Myriad Genetics' SLC Tech group)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting" target="_blank">hoisting</a> "...variable and function declarations are put into memory during the compile phase, but stays exactly where you typed it in your coding."
</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" target="_blank"><code>undefined</code></a> - (a) A variable that exists but has not been assigned a value yet, or (b) the return value of a function without an assigned return value.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let" target="_blank">temporal dead zone</a> / "not defined" - <code>let</code> & <code>const</code> must be <a href="https://stackoverflow.com/a/31222689" target="_blank">initialized</a> before they can be used.</li>
</ul>
<a href="#scope-local" class="next">Next</a>
</div>
<div id="scope-local" class="screen">
<h2>Scope - Local</h2>
<pre>
debugger;
function aGreeting (greeting, greetingName) {
return function () {
const msg = greeting + ' ' + greetingName + '!';
return msg
}
};
const aGreet = (greetName) => {
return aGreeting('Hello', greetName)
}
let aGreetWorld = aGreet('World');
var aWholeGreeting = aGreetWorld();
console.log(aWholeGreeting);</pre>
<ul>
<li>anonymous functions</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#The_function_declaration_function_statement" target="_blank">function declaration</a> vs. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#The_function_expression_function_expression" target="_blank">function expression</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" target="_blank">fat arrow functions</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" target="_blank">closures</a></li>
</ul>
<a href="#call-stack" class="next">Next</a>
</div>
<div id="call-stack" class="screen">
<h2>Call Stack</h2>
<ul>
<li><a href="https://goo.gl/bMPysg" target="_blank">Alternate Perspective</a></li>
<li>Call Stack</li>
</ul>
<a href="#scope-block" class="next">Next</a>
</div>
<div id="scope-block" class="screen">
<h2>Scope - Function vs Block</h2>
<pre>
debugger
var things = [];
for (var i = 0; i < 3; i++) {
things[i] = function() {
console.log(i);
};
}
things[0]();
things[1]();
things[2]();</pre>
<ul>
<li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/ch3.md" target="_blank">Function vs. Block Scope</a></li>
</ul>
<a href="#" class="next">Next</a>
</div>
<div id="one" class="screen template">
<h2>Slide Title</h2>
<pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>
<a href="#" class="next">Next</a>
</div>
<script>
/* Put all of the code that you want to run inside this
<script> element. This, and the next, comment block
should help you easily find where your active code
should be.
*/
/* Put all of the code that you want to run inside this
<script> element. This, and the previous, comment block
should help you easily find where your active code
should be.
*/ </script>
</body>
</html>