This repository was archived by the owner on Dec 9, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathjquery-indepth.html
More file actions
479 lines (400 loc) · 18.4 KB
/
jquery-indepth.html
File metadata and controls
479 lines (400 loc) · 18.4 KB
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
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ladies Learning Code - JavaScript March 18, 2012</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>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<!-- SLIDE: -->
<article class='slide slide-subhead'>
<h1>jQuery Hands-on</h1>
<p>Intro to jQuery and External JavaScript Files</p>
</article>
<!-- SLIDE: jQuery -->
<article class='slide slide-subhead'>
<p style="background:#0f1923;width:250px;padding-top:25px;margin:150px auto 40px;"><img src="assets/logo_jquery.gif" /></p>
<p>The Write Less, Do More, JavaScript Library</p>
</article>
<!-- SLIDE: jQuery Intro -->
<article class='slide slide-list'>
<h2>jQuery: A brief introduction</h2>
<p>jQuery is a cross-browser JavaScript library designed to simplify client-side scripting, manipulating HTML pages, animating and handling events.</p>
<p>jQuery is still JavaScript. It is a library of functions built on top of JavaScript to simplify your program. It does, however, have it's own syntax as well.</p>
<p>The library contains many, many built-in functions and methods. It's not an easy task to remember them all. Never fear, jQuery has documented their API here: <a href="http://api.jquery.com/" target="_blank">http://api.jquery.com</a>.</p>
<p>Let dive in and see how jQuery methods compare to using just JavaScript alone.</p>
</article>
<!-- SLIDE: jQuery vs JavaScript : How to run the code-->
<article class='slide slide-list'>
<h2>jQuery vs JavaScript</h2>
<p>Including inline JavaScript into your web page only requires the code to be written between the <code><script></script></code> tags.</p>
<p>In jQuery, the document needs to be "ready". This bit of code needs to wrap all of your jQuery: <code>$(document).ready(function(){});</code>. Your code goes between the curly braces <code>{}</code>, and will only run once the DOM is ready.</p>
<pre class="prettyprint">
<script type="text/javascript">
// JavaScript code here
</script>
<script type="text/javascript">
$(document).ready(function(){
//jQuery code here
});
</script>
</pre>
</article>
<!-- SLIDE: More on document.ready -->
<article class='slide slide-list'>
<h2>More on $(document).ready</h2>
<p>Remember <code>document.write()</code>? The functionality is similar. <code>document</code> is the object, <code>write()</code> is the method we use to pass in parameters. (<a href="js_dom.html#slide-4" target="_blank">see slide</a>)</p>
<p>In jQuery syntax, the <code>$</code> is simply a shorcut for a function called <code>jQuery</code>. It is how you access all of the functionality in the library. To select the <code>document</code> jQuery style, it looks like this:</p>
<pre class="prettyprint">
$(document)
</pre>
<p><code>.ready()</code> specifies a function to execute when the DOM is loaded.</p>
<pre class="prettyprint">
$(document).ready();
</pre>
<p>An "anonymous function" needs to be passed into the above code to execute the jQuery code.</p>
<pre class="prettyprint">
//syntax for anonymous function
function(){
code goes here
}
// pass the anonymous function in the ready() method
$(document).ready(function(){
jQuery code here
});
</pre>
</article>
<!-- SLIDE: jQuery vs JavaScript - DOM reference-->
<article class='slide slide-list'>
<h2>jQuery vs JavaScript (cont)</h2>
<p>Remember <code>document.getElementById</code>?<br />
<strong>jQuery</strong> makes it easier to reference objects in the DOM.</p>
<pre class="prettyprint">
<div <strong>id="status"</strong>>
<p>Loading...</p>
<p><img src="assets/loading.gif"></p>
</div>
</pre>
<pre class="prettyprint">
// JavaScript
document.getElementById("status")
// jQuery
$("#status")
</pre>
<div class="reminders">
<p>Your HTML tag must have an <code>id</code> attribute in order to do this!<br />
Use <code>#name</code> to reference and <code>ID</code> and <code>.name</code> to reference a <code>class</code></p>
</div>
</article>
<!-- SLIDE: jQuery vs JavaScript - Replacing text -->
<article class='slide slide-list'>
<h2>jQuery vs JavaScript (cont)</h2>
<p>Let's see how the JavaScript <code>innerHTML</code> example can be done with jQuery
to replace what's already in an element.</p>
<textarea class='coder-editor coder-editor-full'>
<div id="javascript">Replace this text with JavaScript</div>
<div id="jquery">Replace this text with jQuery</div>
<script>
// The JavaScript way
var statusDiv = document.getElementById("javascript");
//statusDiv.innerHTML = "NEW TEXT! Done with JavaScript."
// The jQuery way
$(document).ready(function(){
var statusDiv = $("#jquery");
// NOTE: when using a variable as the selector,
// it does not have to be contained in quotes
//$(statusDiv).html("NEW TEXT! Done with jQuery.");
});
</script>
<style>
div {
border: 1px solid #666;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 20px auto;
padding: 10px;
width: 200px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
</style></textarea>
</article>
<!-- SLIDE: jQuery vs JavaScript (cont) - dot notation -->
<article class='slide slide-list'>
<h2>jQuery vs JavaScript (cont)</h2>
<p>You can also use "dot notation" to write the statement in one line instead of declaring a variable.</p>
<textarea class='coder-editor coder-editor-full'>
<div id="javascript">Replace this text with JavaScript</div>
<div id="jquery">Replace this text with jQuery</div>
<script>
// The JavaScript way
document.getElementById("javascript").innerHTML = "NEW TEXT! Done with JavaScript."
// The jQuery way
$(document).ready(function(){
$("#jquery").html("NEW TEXT! Done with jQuery.");
});
</script>
<style>
div {
border: 1px solid #666;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 20px auto;
padding: 10px;
width: 200px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
</style></textarea>
</article>
<!-- SLIDE: EXTERNAL JS FILES -->
<article class='slide slide-subhead'>
<h1>External JavaScript</h1>
<p>Keeping it organized, working with others<br> and adding libraries</p>
</article>
<!-- SLIDE: SCRIPT TAG-->
<article class='slide slide-list'>
<h2><script src=""></h2>
<p>As you write bigger pieces of JavaScript, you will want to start putting your code into their own files so they are easier to manage. Or you might want to enlist the help of others to write JavaScript for your website so you can work on different sections separately. A big site could have thousands of lines of code written by many different people!</p>
<p>To link to an external JavaScript file:</p>
<pre class="prettyprint">
<html>
<head>
<title>JavaScript example!</title>
<strong><script type="text/javascript" src="scripts.js"></script></strong>
</head>
<body>
<div id="example">This is an example.</div>
</body>
</html>
</pre>
</article>
<!-- SLIDE: EXTERNAL FILES -->
<article class='slide slide-list'>
<h2>In the external file</h2>
<p>In the <a href="http://pchen.github.com/LLC-JavaScript/exercises/scripts.js" target="_blank">external JavaScript file (scripts.js)</a> you don't include script tags; just JavaScript code. </p>
<p>View this example: <a href="http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html" target="_blank">http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html</a></p>
</article>
<!-- SLIDE: SCRIPT TAG GOTCHAS -->
<article class='slide slide-list'>
<h2>script tag gotchas</h2>
<p>Even though you're not writing JavaScript between the script tags, you must use a closing <code></script></code> tag. A self-closing tag such as <code><script src="scripts.js" /></code> will <strong>not</strong> work. The correct way is highlighted below:</p>
<pre class="prettyprint">
<script type="text/javascript" src="scripts.js"></script>
</pre>
</article>
<!-- SLIDE: Included jQuery -->
<article class='slide slide-list'>
<h2>jQuery: Getting started</h2>
<p>To make use of the jQuery library, it needs to be included on your web page using an external file. There are two ways to include the file.</p>
<p>1. <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">Download</a> the jQuery library and include it with the rest of your files.</p>
<pre class="prettyprint">
<script type="text/javascript" src="jquery.js"></script>
</pre>
<p>2. Link directly to the CDN (Content Delivery Network) hosted copies.</p>
<pre class="prettyprint">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</pre>
<div class="hint single-line">
<p>Download instructions: <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">http://docs.jquery.com/Downloading_jQuery</a></p>
</div>
</article>
<!-- SLIDE: Including jQuery Gotchas -->
<article class='slide slide-list'>
<h2>Gotchas!</h2>
<p>When adding your own custom-written jQuery/JavaScript files, make sure to include it <strong>after</strong> the jQuery file to ensure that the library loads first.</p>
<pre class="prettyprint">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</pre>
</article>
<!-- SLIDE: jQuery Selectors: Syntax Review -->
<article class='slide slide-list'>
<h2>jQuery Selectors: Syntax Review</h2>
<p>Selectors are always surrounded by single or double quotes, except when referencing a variable.</p>
<pre class="prettyprint">
<div class="name">Class selector<div>
<div id="name">ID selector<div>
$(".name") - referencing a class
$("#name") - referencing an ID
$("div") - referencing an HTML element
var selector = $("name");
$(selector) - referencing a variable
</p>
</article>
<!-- SLIDE: jQuery Events - Click-->
<article class='slide slide-list'>
<h2>jQuery Events</h2>
<p>Just like <a href="js_functions.html#slide-4" target="_blank">Javascript functions</a>, we can execute the code on an event. A very common event is the <code>click</code> event.</p>
<pre class="prettyprint">
$(selector).click(function(){
//code to execute
});
</pre>
<p><code>click()</code> triggers a click event, the <code>selector</code> is the element to be clicked and <code>function</code> goes between the parenthesis to run a function, containing one more commands.</p>
<textarea class='coder-editor coder-editor-full'>
<a href="#">click me!</a>
<p>click me again!</p>
<script>
$(document).ready(function(){
// replace 'selector' with the element to add the click event to
$(selector).click(function(){
alert("clicked!");
});
});
</script>
</textarea>
<script type="coder-solution">
<a class="target" href="#">click me!</a>
<p class="target">click me again!</p>
SCRIPT
$(document).ready(function(){
$("p").click(function(){
alert("Click event on a paragraph.");
});
$("a").click(function(){
alert("Click event on a link.");
});
$(".target").click(function(){
alert("Click event on a class.");
});
});
SCRIPTEND
</script>
</article>
<!-- SLIDE: jQuery and JavaScript-->
<article class='slide slide-list'>
<h2>jQuery AND JavaScript</h2>
<p>jQuery may have its own syntax and methods but it's still JavaScript at<br /> its core. Let's look at a previous example and see how jQuery and JavaScript work together.</p>
<p>In the exercises folder, open <a href="exercises/jquery-javascript.html" target="_blank">jquery-javascript.html</a> and <a href="exercises/jquery-javascript.js" target="_blank">jquery-javascript.js</a>.</p>
<p>While it works using pure JavaScript, the functions are currently being called "inline" by adding an <code>onclick</code> directly in the element. It's best practice to avoid inline event handlers.</p>
<p>Let's use the jQuery <code>click()</code> method instead and use it to select the element and pass the related function.</p>
</article>
<!-- SLIDE: jQuery Effects -->
<article class='slide slide-list'>
<h2>jQuery Effects</h2>
<p>There are many handy built in methods that make it simpler to add effects. The full list is available <a href="http://api.jquery.com/category/effects/" target="_blank">here</a>. It's searchable and provides explanations and examples.</p>
<p>Here's an example of how to use the <code>.hide()</code> and <code>.show()</code> methods.</p>
<textarea class='coder-editor coder-editor-full'>
<a class="hide" href="#">Hide</a> | <a class="show" href="#">Show</a>
<div id="box">
<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
</div>
<script>
$(document).ready(function(){
// Click event on the anchor link with a class of 'hide'
$('.hide').click(function(){
// code to be executed - hide the "box" div
$('#box').hide();
});
$('.show').click(function(){
$('#box').show();
});
});
</script>
<style>
#box {
background-color: #B1009A;
padding: 20px;
margin-top: 10px;
font: 18px verdana, arial, sans-serif;
}
a {
font: 14px verdana, arial, sans-serif;
text-decoration: none;
}
</style>
</textarea>
</article>
<!-- SLIDE: jQuery Effects -->
<article class='slide slide-list'>
<h2><span class="smaller">Mini-exercise (20 mins)</span><br>jQuery Effects</h2>
<p>Let's practice adding some more jQuery effects and using external javascript files.</p>
<ol>
<li>In the exercises folder, open the <a href="exercises/jquery-effects.html" target="_blank">jquery-effects.html</a> into your text editor. HTML and CSS is already provided.</li>
<li>Include the jQuery library using one of the CDN hosted links listed <a href="http://jquery.com/download/" target="_blank">here</a>.</li>
<li>Create your own external file called 'jquery-effects.js' to write your own jQuery and included it in the HTML page.</li>
<li>Reference the previous example and add click events using the classes supplied in the <code><a></code> links, to add the following effects:
<ul>
<li><code>show()</code></li>
<li><code>hide()</code></li>
<li><code>slideDown()</code></li>
<li><code>slideToggle()</code></li>
<li><code>fadeOut()</code></li>
<li><code>fadeIn()</code></li>
</ul>
</li>
</ol>
<div class="hint">
<p>jQuery effects documentation: <a href="http://docs.jquery.com/Effects" target="_blank">http://docs.jquery.com/Effects</a><br>
jQuery click event documentation: <a href="http://api.jquery.com/click/" target="_blank">http://api.jquery.com/click/</a><br>
Solutions posted in the solutions folder.</p>
</div>
</article>
<!-- SLIDE: Next section -->
<article class='slide slide-list'>
<p class="centered vertically_centered"><a href="resources.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 -->
<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>