LLC-JavaScript/tech_overview.html at master · pearlchen/LLC-JavaScript · GitHub

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
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Ladies Learning Code - JavaScript Oct 13, 2012</title>
<metaname="viewport" content="width=1280">

<!-- CoderDeck core and extension CSS files -->
<linkrel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<linkrel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<linkrel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<linkrel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<linkrel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<linkrel="stylesheet" href="src/css/prettify.css">
<linkrel="stylesheet" href="src/css/deck.coder.css">
<linkrel="stylesheet" href="src/codemirror/lib/codemirror.css">
<linkrel="stylesheet" href="src/codemirror/theme/default.css">

<!-- Custom for LLC -->
<linkhref='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
<linkhref='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>
<linkrel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<styletype="text/css"></style>
</head>

<bodyclass="deck-container">
<scripttype='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<scriptsrc='src/jquery.min.js'>SCRIPTEND</head>
<body>CODE</body>
</html>
</script>

<scripttype='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>CODE</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text &lt;p&gt; here</p>
<divclass='stuff'>I'm a div &lt;div&gt; with class "stuff"</div>
<divid='my-div'>I'm a &lt;div&gt; with id "my-div"</div>
</body>
</html>
</script>

<divid="presentation">
<!-- **************************************** -->

<!-- SLIDE: Development Environment -->
<articleclass='slide slide-subhead'>
<h1>Development Environment</h1>
<p><strikestyle="color: #ccc;">&nbsp;3&nbsp;</strike> 2 tools you need to get started</p>
</article>

<!-- SLIDE: Web Browser -->
<articleclass='slide slide-list'>
<h2>1. Web Browser</h2>
<p>
 Choose a modern web browser that has good, built-in development tools to help make building web pages easier.
</p>
<divclass="centered contains_sidebyside_icons">
<ahref="https://www.google.com/chrome" target="_blank"><imgsrc="assets/new-chrome-logo.png" width="125" height="125" alt="Chrome" /></a>
<br/>
<ahref="https://www.google.com/chrome" target="_blank">Google Chrome</a>
</div>
<brclear="all" />
<br/>
<br/>
<br/>
<pclass="sidenote centered">
 (If you are unable to install Chrome:
<br/>
 install
<ahref="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a><b>and</b>
<ahref="http://getfirebug.com/" target="_blank">Firebug</a>
 .)
</p>
</article>

<!-- SLIDE: Code Editor -->
<articleclass='slide slide-list'>
<h2>2. Code Editor</h2>
<p>
 There are many, many free and paid options* but let's keep it simple for our mentors today and just use one to edit our code.
</p>
<divclass="centered contains_sidebyside_icons">
<ahref="http://www.sublimetext.com" target="_blank"><imgsrc="assets/SublimeTextIcon.jpg" width="125" height="125" alt="Sublime Text 2" /></a>
<br/>
<ahref="http://www.sublimetext.com/" target="_blank">Sublime Text</a>
</div>
<brclear="all" />
<br/>
<br/>
<br/>
<pclass="sidenote centered">
 *Others include: <ahref="http://macromates.com/" target="_blank">TextMate</a>, <ahref="http://notepad-plus-plus.org/" target="_blank">Notepad++</a>, and <ahref="http://www.barebones.com/products/textwrangler/" target="_blank">Text Wrangler</a>.
<br/>
 Ask a group of developers what they use and arguments will ensue -- it's a very personal choice! ;)
</p>
</article>

<!-- SLIDE: FTP -->
<articleclass='slide slide-list'>
<h2>3. File Transfer Program (FTP)</h2>
<pstyle="color: #999;">
 Do you already have your own hosted website? FTP software will let you copy the files you work on today to somewhere where the rest of the world can see them!
</p>
<divclass="centered contains_sidebyside_icons">
<ahref="http://cyberduck.ch/" target="_blank"><imgsrc="assets/Cyberduck_icon.png" width="125" height="125" alt="CyberDuck" /></a>
<br/>
<ahref="http://cyberduck.ch/" target="_blank">CyberDuck</a>
</div>
<brclear="all" />
<br/>
<br/>
<br/>
<pclass="sidenote centered" style="color: #999;">
 Again, there are many, many free and paid options.
<br/>
<ahref="http://filezilla-project.org/" target="_blank">FileZilla</a>
 is good when you're more advanced.
</p>
</article>

<!-- new slide -->
<articleclass='slide slide-subhead'>
<h1>Technology Overview</h1>
<p>Programming and JavaScript</p>
</article>

<!-- SLIDE: What is JavaScript? -->
<articleclass='slide slide-list'>
<h2>What is JavaScript?</h2>
<pclass="centered" style="font-size: 2.5em; margin-top: 2em;">
 It's a
<spanclass="keyword">programming language</span>
<br><br>
 designed to <strong>run in your web browser</strong> to
<br><br>
<strong>manipulate content on web pages</strong>.
</p>
</article>

<!-- SLIDE: What is JavaScript? -->
<articleclass='slide slide-list'>
<h2>What is JavaScript?</h2>
<pclass="centered" style="font-size: 2.5em; margin-top: 2em;">
 It's a
<spanclass="keyword highlight">programming language</span>
<br><br>
 designed to <strong>run in your web browser</strong> to
<br><br>
<strong>manipulate content on web pages</strong>.
</p>
</article>

<!-- SLIDE: What is Programming? -->
<articleclass='slide slide-list'>
<h2>What is Programming?</h2>
<p>
 A
<spanclass="keyword">program</span>
 is a <strong>set of instructions</strong>
 meant for a computer to execute.
</p>
<p>Computers are fast but blind.</p>
<pclass="centered"><imgsrc="assets/blindfold.gif" width="377" height="270" alt="As the first step to our new system integration, please take a blind fold."></p>
</article>

<!-- SLIDE: Instructions -->
<articleclass='slide slide-list'>
<h2>Better Code = Clearer Instructions</h2>
<p>
 Think about a tourist that stops you to ask for directions:</p>
<p>
<strong>The clearer the instructions, the more likely they will get to their destination. </strong></p>
<pclass="centered"><imgsrc="assets/Map.png" width="252" height="222" alt="Give clear directions" /></p>
</article>


<!-- SLIDE: Instructions -->
<articleclass='slide slide-list'>
<h2>Break it down</h2>
<p>Suppose I want a computer to say hello to using my name. </p>
<p><strong>Break down the steps</strong> as much as possible: </p>
<ol>
<li>Allow me to type in my name.</li>
<li>Remember my name.</li>
<li>Say &quot;Hello&quot; and repeat back my name.</li>
</ol>
</p>

</article>


<!-- SLIDE: What is a Programming Language? -->
<articleclass='slide slide-list'>
<h2>What is a Programming Language?</h2>
<p>
 Programming is about having a <strong>conversation</strong> with your computer. </p>
<p>
 Computers only understand things when you speak to them in a certain way. Much like English or any other natural language, programming is about sticking to grammar rules -- this is called
<spanclass="keyword">syntax</span>
 .
</p>
<p><imgsrc="assets/beepbeep.jpg" height="300" alt="Beep beep" align="left" style="margin-right: 40px;" /> Computers have come a long way since their binary days (<code>0 1 0 0 1 0 0 0 0 1 0 0 0 1 0 1 0 1 0 0 1 1 0 0 0 1 0 0 1 1 0 0 0 1 0 0 1 1 1 1</code>) so meet them half-way.</p>
<brclear="all" />
</article>

<!-- SLIDE: What is a Programming Language? -->
<articleclass='slide slide-list'>
<h2>Example Programming Syntaxes</h2>
<p>Different programming languages have different syntax.</p>
<p>Here are two ways a computer could say hi to me:</p>
<p>
<strong>Java</strong></p>
<preclass="prettyprint">Scanner userInput = new Scanner(System.in);
String name;
System.out.print("What's your name? ");
name = userInput.next();
System.out.println("Hello, " + name);</pre>

<p>
<strong>JavaScript</strong> ( <ahref="exercises/hello-javascript.html" target="_blank">Try it out now!</a>
 )</p>

<preclass="prettyprint">var name;
name = window.prompt("What's your name?",'');
document.write("Hello, " + name);</pre>

</article>

<!-- SLIDE: JavaScript versus Java -->
<articleclass='slide slide-list'>
<h2>JavaScript versus Java</h2>
<p>
 They might vaguely look the same (as a lot of programming languages do) but <strong>they are not related at all</strong>. </p>
<pclass="centered">
<imgsrc="assets/llcodedotcom_hamster.gif" width="544" height="220" alt="Java is to JavaScript as ham is to hamster." />
</p>
<pclass="centered sidenote">(Java was really popular at the time so Netscape just hijacked the name.) </p>
</article>


<!-- SLIDE: What is JavaScript? -->
<articleclass='slide slide-list'>
<h2>What is JavaScript?</h2>
<pclass="centered" style="font-size: 2.5em; margin-top: 2em;">
 It's a
<spanclass="keyword">programming language</span>
<br><br>
 designed to <strongclass="highlight">run in your web browser</strong> to
<br><br>
<strong>manipulate content on web pages</strong>.
</p>
</article>

<!-- SLIDE: JavaScript in the Browser -->
<articleclass='slide slide-list'>
<h2>JavaScript in the Browser</h2>
<p>
 C++, Java, and .NET are also programming languages but they can be run directly by the <strong>operating system</strong>
 (e.g. Windows, Mac, Linux).
</p>
<p>
 JavaScript is typically meant to be run in a
<strong>web browser</strong>
 (e.g. Safari, Firefox, Chrome, Internet Explorer).
</p>
<pclass="centered">
<imgsrc="assets/scripting.gif" width="586" height="224" alt="Different programmig languages and the environments they run in" />
</p>
</article>

<!-- SLIDE: Web Programming Languages: Server-side vs Client-side-->
<articleclass='slide slide-list'>
<h2>Web Programming Languages: Server-side vs Client-side</h2>
<p><imgsrc="assets/clientversusserver.gif" width="400" height="400" alt="" align="right" style="margin-left: 30px;" /></p>
<p>
 Java, .NET, PHP or Ruby can be considered <strong>server-side or &quot;back-end&quot;</strong> web technology because the code is typically compiled and executed by the <em>operating system</em> of a computer serving up web pages. </p>
<p>
 JavaScript is referred to as a <strong>client-side or &quot;front-end&quot;</strong> web technology because it's interpreted by the <em>web browser</em>. </p>

</article>

<!-- SLIDE: -->
<articleclass='slide slide-list'>
<h3>Simple Client-Side Code Check</h3>
<p><br>
<imgsrc="assets/llcodedotcom_viewsource.gif" width="468" height="362" alt="Right-click to View Source" align="left" style="margin-right: 50px;" />
</p>
<p>
<br>
At any time, someone can <strong>right-click and &quot;view source&quot;</strong> on a web page to see all the JavaScript that went into it.</p>
<pclass="sidenote">(I suggest that you do this yourself every time you see something you like!)</p>
</p>
<brclear="all" />
<p>
 Whereas for server-side code, it's sometimes a mystery what technology is running on a server.
</p>
</article>


<!-- SLIDE: What is JavaScript? -->
<articleclass='slide slide-list'>
<h2>What is JavaScript?</h2>
<pclass="centered" style="font-size: 2.5em; margin-top: 2em;">
 It's a
<spanclass="keyword">programming language</span>
<br><br>
 designed to <strong>run in your web browser</strong> to
<br><br>
<strongclass="highlight">manipulate content on web pages</strong>.
</p>
</article>

<!-- SLIDE: The Web Triad -->
<articleclass='slide slide-list'>
<h2>The Web Triad</h2>
<p>
 JavaScript was meant to manipulate webpages written in HTML and works in tandem with CSS.
</p>
<tablewidth="100%">
<tr>
<tdwidth="33%" class="centered"><strong>HTML</strong> (Hypertext Markup Language) <br>
 is the markup language.</td>
<tdwidth="33%" class="centered"><strong>CSS</strong> (Cascading Style Sheets) <br>
 is the style sheet language.</td>
<tdwidth="33%" class="centered"><strong>JavaScript</strong><br>
 is the programming language.</td>
</tr>
<tr>
<tdclass="centered"><imgsrc="assets/TRIAD-html.gif" width="267" height="241" alt="content layer"></td>
<tdclass="centered"><imgsrc="assets/TRIAD-css.gif" width="261" height="241" alt="Presentation Layer" /></td>
<tdclass="centered"><imgsrc="assets/TRIAD-js.gif" width="274" height="241" alt="Behaviour Layer" /></td>
</tr>
<tr>
<tdclass="centered">It should define the <strong>content</strong>.</td>
<tdclass="centered">It should define the <strong>presentation</strong></td>
<tdclass="centered">It should define <strong>behaviour</strong>.</td>
</tr>
</table>
</article>

<!-- SLIDE: -->
<articleclass='slide slide-list'>
<h2>JavaScript in Different Browsers</h2>
<pclass="reminders">
 For the most part, JavaScript will run the same in various web browsers but sometimes they say &quot;hi&quot; with different accents.</p><p> Imagine a British accent versus a Texas accent -- it's still English underneath but there's some variations and unique slang.</p>
<p>This is especially noticeable with newer &quot;HTML5&quot; features.<br>
<spanclass="sidenote"><em>Insert Internet Explorer joke here. ;)</em></span></p>

</article>

<!-- SLIDE: -->
<articleclass='slide slide-list'>
<h2>A JavaScript Experiment</h2>
<p>
 JavaScript is essential for &quot;AJAX&quot;, &quot;Web 2.0&quot;, and &quot;HTML5&quot; websites.
</p>
<p>
<strong>Try this experiment:</strong> Turn off JavaScript in your web browser. Go to the JavaScript settings for Chrome (
<code>chrome://settings/content</code>
 ) and select &quot;Do not allow any site to run JavaScript&quot;
</p>
<p>Then visit your daily sites.</p>
<p>
 e.g.
<ahref="http://google.com" target="_blank">Google</a>
 ,
<ahref="http://facebook.com" target="_blank">Facebook</a>
 ,
<ahref="http://twitter.com" target="_blank">Twitter</a>
</p>
<p><em>(Remember to turn JavaScript back on to see this presentation!)</em>
</p>
</article>

<!-- SLIDE: -->
<articleclass='slide slide-list'>
<h2>A JavaScript Experiment: Results</h2>
<p>Note the sometimes subtle and sometimes major differences:</p>
<ul>
<li>
 No search auto-completion and instant page refreshes on google.com
</li>
<li>
 No inline video content or lightboxed photo viewers on facebook.com -- not to mention broken &quot;Like&quot; buttons and inability to comment on posts!
</li>
<li>
 On twitter.com - older tweets don't load at the bottom of the page. Warning message on top of page. Navigation doesn't work. Popups don't work.
</li>
<li>
 And you can't <strong>see</strong> it but most analytics tracking won't work either. </li>
</ul>
<pclass="reminders" style="font-size: 2.2em;">
<strong>The modern web just sort of gives up without JavaScript!</strong>
</p>
</article>

<!-- SLIDE: -->
<articleclass='slide slide-list'>
<h3>JavaScript helps make very nice websites!</h3>
<p>
 Especially &quot;one-page apps&quot; where the experience is very seamless.
</p>
<pclass="centered">
<ahref="http://thenewdesignguidelines.derekevanharms.com/" target="_blank"><imgsrc="assets/thenewdesignguidelines.gif" width="800" height="479" alt="The new web design guidelines" /></a><br>


<spanclass="sidenote">Like
<ahref="http://thenewdesignguidelines.derekevanharms.com/" target="_blank">this one</a></span></p>
</article>

<!-- SLIDE: Next section -->
<articleclass='slide slide-list'>
<pclass="centered vertically_centered"><ahref="js_quick_start.html"><imgsrc="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
</article>


<!-- **************************************** -->
</div>
<!-- END div id=presentation -->

<divclass="centered" style="font-size: 12px; padding-top: 10px;">(Use the left and right arrow keys on your keyboard to navigate.)</div>

<scriptsrc='src/jquery.min.js'></script>
<scriptsrc="src/modernizr.js"></script>

<!-- Update these paths to point to the correct files. -->
<scriptsrc="src/jquery.tmpl.min.js"></script>
<scriptsrc="src/deck.js/core/deck.core.js"></script>

<!-- Code Mirror -->
<scriptsrc="src/codemirror/lib/codemirror.js"></script>
<scriptsrc="src/codemirror/mode/xml/xml.js"></script>
<scriptsrc="src/codemirror/mode/css/css.js"></script>
<scriptsrc="src/codemirror/mode/javascript/javascript.js"></script>
<scriptsrc="src/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<!-- Prettify -->
<scriptsrc="src/prettify.js"></script>

<!-- Deck Core and extensions -->
<scriptsrc="src/deck.js/extensions/status/deck.status.js"></script>
<scriptsrc="src/deck.js/extensions/navigation/deck.navigation.js"></script>
<scriptsrc='src/deck.coder.js'></script>
<scriptsrc="src/deck.js/extensions/hash/deck.hash.js"></script>
<scriptsrc="src/deck.js/extensions/menu/deck.menu.js"></script>
<script>
$(function(){
$.deck('.slide');
});
</script>
</body>
</html>