forked from pearlchen/LLC-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtech_overview.html
459 lines (410 loc) · 18.4 KB
/
tech_overview.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
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>
<meta charset="utf-8">
<title>Ladies Learning Code - Intro to JavaScript</title>
<meta name="viewport" content="width=1280">
<!-- CoderDeck core and extension CSS files -->
<link rel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<link rel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="src/css/prettify.css">
<link rel="stylesheet" href="src/css/deck.coder.css">
<link rel="stylesheet" href="src/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/default.css">
<!-- Custom for LLC -->
<link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>
<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<style type="text/css"></style>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND</head>
<body>CODE</body>
</html>
</script>
<script type='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 <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<!-- SLIDE: Development Environment -->
<article class='slide slide-subhead'>
<h1>Development Environment</h1>
<p><strike style="color: #ccc;"> 3 </strike> 2 tools you need to get started</p>
</article>
<!-- SLIDE: Web Browser -->
<article class='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>
<div class="centered contains_sidebyside_icons">
<a href="https://www.google.com/chrome" target="_blank"><img src="assets/new-chrome-logo.png" width="125" height="125" alt="Chrome" /></a>
<br/>
<a href="https://www.google.com/chrome" target="_blank">Google Chrome</a>
</div>
<br clear="all" />
<br />
<br />
<br />
<p class="sidenote centered">
(If you are unable to install Chrome:
<br />
install
<a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> <b>and</b>
<a href="http://getfirebug.com/" target="_blank">Firebug</a>
.)
</p>
</article>
<!-- SLIDE: Code Editor -->
<article class='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 the same editor.
</p>
<div class="centered contains_sidebyside_icons">
<a href="http://www.sublimetext.com" target="_blank"><img src="assets/SublimeTextIcon.jpg" width="125" height="125" alt="Sublime Text 2" /></a>
<br />
<a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a>
</div>
<br clear="all" />
<br />
<br />
<br />
<p class="sidenote centered">
*Others include: <a href="http://macromates.com/" target="_blank">TextMate</a>, <a href="http://notepad-plus-plus.org/" target="_blank">Notepad++</a>, and <a href="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 -->
<article class='slide slide-list'>
<h2>3. File Transfer Program (FTP)</h2>
<p style="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>
<div class="centered contains_sidebyside_icons">
<a href="http://cyberduck.ch/" target="_blank"><img src="assets/Cyberduck_icon.png" width="125" height="125" alt="CyberDuck" /></a>
<br />
<a href="http://cyberduck.ch/" target="_blank">CyberDuck</a>
</div>
<br clear="all" />
<br />
<br />
<br />
<p class="sidenote centered" style="color: #999;">
Again, there are many, many free and paid options.
<br />
<a href="http://filezilla-project.org/" target="_blank">FileZilla</a>
is good when you're more advanced.
</p>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>Technology Overview</h1>
<p>Programming and JavaScript</p>
</article>
<!-- SLIDE: What is JavaScript? -->
<article class='slide slide-list'>
<h2>What is JavaScript?</h2>
<p class="centered" style="font-size: 2.5em; margin-top: 2em;">
It's a
<span class="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? -->
<article class='slide slide-list'>
<h2>What is JavaScript?</h2>
<p class="centered" style="font-size: 2.5em; margin-top: 2em;">
It's a
<span class="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? -->
<article class='slide slide-list'>
<h2>What is Programming?</h2>
<p>
A
<span class="keyword">program</span>
is a <strong>set of instructions</strong>
meant for a computer to execute.
</p>
<p>Computers are fast but blind.</p>
<p class="centered"><img src="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 -->
<article class='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>
<p class="centered"><img src="assets/Map.png" width="252" height="222" alt="Give clear directions" /></p>
</article>
<!-- SLIDE: Instructions -->
<article class='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 "Hello" and repeat back my name.</li>
</ol>
</p>
</article>
<!-- SLIDE: What is a Programming Language? -->
<article class='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
<span class="keyword">syntax</span>
.
</p>
<p><img src="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>
<br clear="all" />
</article>
<!-- SLIDE: What is a Programming Language? -->
<article class='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>
<pre class="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> ( <a href="exercises/hello-javascript.html" target="_blank">Try it out now!</a>
)</p>
<pre class="prettyprint">var name;
name = window.prompt("What's your name?",'');
document.write("Hello, " + name);</pre>
</article>
<!-- SLIDE: JavaScript versus Java -->
<article class='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>
<p class="centered">
<img src="assets/llcodedotcom_hamster.gif" width="544" height="220" alt="Java is to JavaScript as ham is to hamster." />
</p>
<p class="centered sidenote">(Java was really popular at the time so Netscape just hijacked the name.) </p>
</article>
<!-- SLIDE: What is JavaScript? -->
<article class='slide slide-list'>
<h2>What is JavaScript?</h2>
<p class="centered" style="font-size: 2.5em; margin-top: 2em;">
It's a
<span class="keyword">programming language</span>
<br><br>
designed to <strong class="highlight">run in your web browser</strong> to
<br><br>
<strong>manipulate content on web pages</strong>.
</p>
</article>
<!-- SLIDE: JavaScript in the Browser -->
<article class='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>
<p class="centered">
<img src="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-->
<article class='slide slide-list'>
<h2>Web Programming Languages: Server-side vs Client-side</h2>
<p><img src="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 "back-end"</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 "front-end"</strong> web technology because it's interpreted by the <em>web browser</em>. </p>
</article>
<!-- SLIDE: -->
<article class='slide slide-list'>
<h3>Simple Client-Side Code Check</h3>
<p><br>
<img src="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 "view source"</strong> on a web page to see all the JavaScript that went into it.</p>
<p class="sidenote">(I suggest that you do this yourself every time you see something you like!)</p>
</p>
<br clear="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? -->
<article class='slide slide-list'>
<h2>What is JavaScript?</h2>
<p class="centered" style="font-size: 2.5em; margin-top: 2em;">
It's a
<span class="keyword">programming language</span>
<br><br>
designed to <strong>run in your web browser</strong> to
<br><br>
<strong class="highlight">manipulate content on web pages</strong>.
</p>
</article>
<!-- SLIDE: The Web Triad -->
<article class='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>
<table width="100%">
<tr>
<td width="33%" class="centered"><strong>HTML</strong> (Hypertext Markup Language) <br>
is the markup language.</td>
<td width="33%" class="centered"><strong>CSS</strong> (Cascading Style Sheets) <br>
is the style sheet language.</td>
<td width="33%" class="centered"><strong>JavaScript</strong><br>
is the programming language.</td>
</tr>
<tr>
<td class="centered"><img src="assets/TRIAD-html.gif" width="267" height="241" alt="content layer"></td>
<td class="centered"><img src="assets/TRIAD-css.gif" width="261" height="241" alt="Presentation Layer" /></td>
<td class="centered"><img src="assets/TRIAD-js.gif" width="274" height="241" alt="Behaviour Layer" /></td>
</tr>
<tr>
<td class="centered">It should define the <strong>content</strong>.</td>
<td class="centered">It should define the <strong>presentation</strong></td>
<td class="centered">It should define <strong>behaviour</strong>.</td>
</tr>
</table>
</article>
<!-- SLIDE: -->
<article class='slide slide-list'>
<h2>JavaScript in Different Browsers</h2>
<p class="reminders">
For the most part, JavaScript will run the same in various web browsers but sometimes they say "hi" 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 "HTML5" features.<br>
<span class="sidenote"> <em>Insert Internet Explorer joke here. ;)</em></span></p>
</article>
<!-- SLIDE: -->
<article class='slide slide-list'>
<h2>A JavaScript Experiment</h2>
<p>
JavaScript is essential for "AJAX", "Web 2.0", and "HTML5" 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 "Do not allow any site to run JavaScript"
</p>
<p>Then visit your daily sites.</p>
<p>
e.g.
<a href="http://google.com" target="_blank">Google</a>
,
<a href="http://facebook.com" target="_blank">Facebook</a>
,
<a href="http://twitter.com" target="_blank">Twitter</a>
</p>
<p> <em>(Remember to turn JavaScript back on to see this presentation!)</em>
</p>
</article>
<!-- SLIDE: -->
<article class='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 "Like" buttons and inability to comment on posts!
</li>
<li>
On twitter.com - the "more" link doesn't work, can't expand tweets inline, the media gallery doesn't show.
</li>
<li>
And you can't <strong>see</strong> it but most analytics tracking won't work either. </li>
</ul>
<p>
<strong>The modern web just sort of gives up without JavaScript!</strong>
</p>
</article>
<!-- SLIDE: -->
<article class='slide slide-list'>
<h3>JavaScript helps make very nice websites!</h3>
<p>
Especially "one-page apps" where the experience is very seamless.
</p>
<p class="centered">
<a href="http://thenewdesignguidelines.derekevanharms.com/" target="_blank"><img src="assets/thenewdesignguidelines.gif" width="800" height="479" alt="The new web design guidelines" /></a> <br>
<span class="sidenote">Like
<a href="http://thenewdesignguidelines.derekevanharms.com/" target="_blank">this one</a></span></p>
</article>
<!-- SLIDE: Next section -->
<article class='slide slide-list'>
<p class="centered vertically_centered"><a href="js_quick_start.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
</article>
<!-- **************************************** -->
</div>
<!-- END div id=presentation -->
<div class="centered" style="padding:5px;">(Use the left and right keyboard arrow keys to navigate within sections. Click the "next" arrow to move to the next section.)</div>
<script src='src/jquery.min.js'></script>
<script src="src/modernizr.js"></script>
<!-- Update these paths to point to the correct files. -->
<script src="src/jquery.tmpl.min.js"></script>
<script src="src/deck.js/core/deck.core.js"></script>
<!-- Code Mirror -->
<script src="src/codemirror/lib/codemirror.js"></script>
<script src="src/codemirror/mode/xml/xml.js"></script>
<script src="src/codemirror/mode/css/css.js"></script>
<script src="src/codemirror/mode/javascript/javascript.js"></script>
<script src="src/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- Prettify -->
<script src="src/prettify.js"></script>
<!-- Deck Core and extensions -->
<script src="src/deck.js/extensions/status/deck.status.js"></script>
<script src="src/deck.js/extensions/navigation/deck.navigation.js"></script>
<script src='src/deck.coder.js'></script>
<script src="src/deck.js/extensions/hash/deck.hash.js"></script>
<script src="src/deck.js/extensions/menu/deck.menu.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>