forked from canadalearningcode/llc-intro-to-jquery
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1858 lines (1410 loc) · 83.4 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
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
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ladies Learning Code</title>
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<!-- Theme-specific styles -->
<link href='http://fonts.googleapis.com/css?family=Quicksand%7CPacifico%7COpen+Sans:400italic,400,300' rel='stylesheet' type='text/css' data-noprefix>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="framework/css/highlightjs-themes/monokai.css" data-noprefix>
<link rel="stylesheet" href="framework/css/theme-llc.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Workshop-specific styles -->
<link rel="stylesheet" href="framework/css/workshop.css" data-noprefix>
<!-- Takes care of CSS3 prefixes! -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body data-duration="360">
<!-- First/Intro slide -->
<header class="intro slide">
<img class="logo" src="framework/img/logo-llc-white.png">
<div class="info">
<h1>
<span class="title-bg">jQuery</span><br>
<span class="title-bg">for Beginners</span>
</h1>
<!-- <h2><span>with</span> Instructor Name</h2>
<img class="instructor-img" src="framework/img/workshop/" alt="Your Name">
<ul>
<li><i class="fa fa-envelope"></i> <a href="">youremail@domain.com</li>
<li><i class="fa fa-desktop"></i> <a href="">your-site.com</a></li>
<li><i class="fa fa-twitter"></i> <a href="http://twitter.com/">@your-twitter</a></li>
</ul> -->
</div>
</header>
<main>
<section class="slide centered" data-markdown>
## Today's project
Follow this [link](project/final/index.html) to see the project in action!
</section>
<section class="slide" data-markdown>
## Getting Started
You will need:
1. **[Sublime Text](http://www.sublimetext.com)** - a text editor with colour highlighting and other helpful features. If you are unable to install Sublime Text, try installing: [Notepad++](http://notepad-plus-plus.org/) (Windows), [Atom](https://atom.io/) (Mac) or [Text Wrangler](http://www.barebones.com/products/textwrangler/) (Mac).
1. **[Google Chrome](https://www.google.com/intl/en-CA/chrome/browser/)** - Choose a modern web browser that supports current web standards and has good development tools. To set Chrome as your default browser, follow [these instructions](https://support.google.com/chrome/answer/95417?hl=en). Visit [browsehappy.com](http://browsehappy.com) for more info about modern browsers.
1. A sense of adventure!!!
**Bonus:** One of the great things about Sublime Text it that you can add extra functionality to it with *plugins*. [Go here](https://github.com/infn8/LLC-Intro-To-jQuery/blob/master/sublime-text-setup.md) to learn more about adding some cool functionality to your Sublime Text editor.
</section>
<section class="slide basic-web-page">
<h2>HTML, CSS & JavaScript</h2>
<p>JavaScript was meant to manipulate web pages written in HTML and also works with CSS.</p>
<p><strong>HTML (Hypertext Markup Language)</strong> is used to define the content.</p>
<div class="example">
<p>I'm just a paragraph.</p>
</div>
<p><strong>CSS (Cascading Style Sheets)</strong> is used to create the presentation and look of a site.</p>
<div class="example" style="color:green;font-weight:bold;">
<p>I'm a paragraph with <span>style</span>.</p>
</div>
<p><strong>JavaScript</strong> is a <em>programming</em> language used to define the behavior and add functionality to a website.</p>
<div class="example">
<p onclick="alert('clicked!');">I'm a paragraph that can be clicked. Try it!</p>
</div>
</section>
<section class="slide" data-markdown>
## HTML overview
HTML (HyperText Markup Language) is the **content** of your document/web page. Using `<tags>` we can create **elements** that represent items on our page. Below are just a few examples.
####Paragraphs
```xml
<p>Paragraph.</p>
<p>Another paragraph.</p>
```
####Lists
```xml
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
```
####Images
```xml
<img src="http://www.fillmurray.com/300/300" alt="Placeholder Image">
```
</section>
<section class="slide">
<h2>HTML tags & the browser</h2>
<p> By placing these items together on a page we get something that looks like this in the browser: </p>
<p>Paragraph.</p>
<p>Another paragraph.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p><img src="http://www.fillmurray.com/300/300" alt="Placeholder Image" /></p>
</section>
<section class="slide" data-markdown>
##CSS overview
CSS (Cascading Style Sheets) defines the *style* and controls the look and feel of the HTML document. **Selectors** are used to determine which **HTML elements** to apply the style to and then rules (aka **declarations**) are specified in the form of `property: value` pairs, wrapped in curly braces `{}`.
```css
selector {
property: value;
}
```
**Properties** determine the *type* of style to be applied to the element (e.g. color). **Values** are specific to the property. Declarations must end with a semi-colon (`;`) to indicate that the instruction is complete.
</section>
<section class="slide">
<h2>CSS selectors: HTML tag, class & id</h2>
<p>Let's look at the different ways to select an element. To select an HTML tag, just use the HTML tag name without the angled brackets.</p>
<pre class="xml"><code><div>Select all div elements.</div></code></pre>
<textarea class="snippet" data-subject="#element">div {
color: red;
}</textarea>
<div class="example" id="#element">
<div>Select all div elements.</div>
</div>
<p>For classes, the attribute must be added to the HTML and denoted by a leading period in the CSS.</p>
<pre class="xml"><code><div class="special">Select ANY element with this class.</div></code></pre>
<textarea class="snippet" data-subject="#class">.special {
color: blue;
}</textarea>
<div class="example" id="#class">
<div class="special">Select ANY element with this class.</div>
</div>
<p>For an id, the attribute is also added to the HTML but is denoted by a leading number symbol. Note that ids can only be used <strong>once</strong> per page.</p>
<pre class="xml"><code><div id="special">Select ANY element with this id.</div></code></pre>
<textarea class="snippet" data-subject="#id">#special {
color: green;
}</textarea>
<div class="example" id="#id">
<div id="special">Select ANY element with this id.</div>
</div>
<div class="presenter-notes">
<p>Change the values with the students to give them a small hands-on exercise.</p>
</div>
</section>
<section class="slide" data-markdown>
## What Is JavaScript?
JavaScript controls the **behavior** of your document. It allows you to do things such as animate items, hide or show items, react to user input and even process data. Here's what JavaScript looks like:
var myVariable = "Hello World";
function sayHello(){
alert(myVariable);
}
sayHello();
The structure and syntax of JavaScript is more complex than either HTML or CSS because neither HTML nor CSS are full fledged programming languages. They do not have **variables**, **functions**, **objects** or **control structures** such as **if** statements or **loops**, which are the basic building blocks of programming.
JavaScript has *all* of these.
</section>
<section class="slide">
<h2>What is jQuery?</h2>
<p><strong>jQuery <em>is</em> JavaScript.</strong> </p>
<p>jQuery is a cross-browser JavaScript <em>library</em> designed to simplify your program. Though it has its own syntax, it is still JavaScript at its core so it's important to have an understanding of traditional JavaScript principles.</p>
<p>Before we get into the nitty-gritty details of these JavaScript principles, let’s take a quick look at a tool called the console.</p>
<div class="presenter-notes">
<p>It might be a good idea to explain that unlike HTML & CSS, it takes a lot more to see results in JS. Though it might be hard to see the bigger picture at first, it's important to learn how all the different pieces work and learn the syntax. A lot of the upcoming exercises will be focused on getting used to writing programs in general and getting used to the syntax.</p>
</div>
</section>
<section class="slide" data-markdown>
## The Console
The console is an interactive tool, built into the browser. We can use this tool to enter commands and interact directly with a web page, log diagnostic information and check for errors. We'll be using it today to practice writing some JavaScript code. The console in Chrome looks like this:
**Note the ```>``` symbol.** It is used by the console to represent a space for you to enter your input but you don't have to actually type it.
</section>
<section class="slide">
<h2>Accessing the Console</h2>
<p>In Chrome, there are a couple ways to open the Console tab.</p>
<p>Use the keyboard shortcut: <br>
<code>COMMAND + OPTION + J</code> (MAC) <br>
<code>CONTROL + SHIFT + J</code> (WINDOWS/LINUX).</p>
<p>OR</p>
<p>Select: <code>View > Developer > JavaScript Console</code>.</p>
<p>You can open the console when viewing <em>any</em> HTML page but let’s use this blank HTML page, <a href="framework/console.html">console.html</a> so we can have a blank slate to practice with throughout the day. </p>
<p>Open <a href="framework/console.html">console.html</a> now and take a moment to practice opening and closing the console until you’re comfortable with it.</p>
<div class="presenter-notes">
<p>Re-iterate to the class to keep console.html open in a tab to refer back to for the console exercises. A blank document was created rather than opening the console in the slide deck so any errors showing won't confuse the learners and take away from the lesson explaining things not needed for the task at hand.</p>
</div>
</section>
<section class="slide" data-markdown>
## Mini-exercise
Let's experiment with typing some input into the console. Return to **console.html** and open the console. After the `>` symbol, type your favorite number and press the enter/return key.
You will see something like this:
The ```>``` symbol is used by the console to represent a space for your input.
The ```<``` symbol is used by the console to represent the **returned value** of your input.
You can also input text BUT when using text, make sure you put it in quotes (more on this soon).
The command you input into the console gets *evaluated* and a value is returned back to you.
</section>
<section class="slide title">
<h1>JavaScript Overview</h1>
<h2>Variables & Functions</h2>
<div class="presenter-notes">
<p>Let the learners know that these concepts are the building blocks of the language and it's important to understand the syntax, how each concept works and together all of this will be needed to create interactions with JS/jQuery. It may be hard to see the bigger picture at first, we just have to go through the fundamental concepts to understand how to build a program to create different types of interactions.</p>
</div>
</section>
<section class="slide" data-markdown>
## What *is* a variable?
A variable is a named memory location which contains some known or unknown quantity or information.
**In *English*, please.**
Variables are like containers or a box. They are used to **store** values that can be used at any time, whenever you need them. At its most basic, we make a variable when we give a **name** to a **value**.
When creating or *declaring* a variable, you must use the keyword `var` but you can name the variable anything you want. End the command with a semi-colon (`;`) so JavaScript knows you're done.
Let's look at the below example.
```javascript
var myVariable = "Hello World";
/* | | |
keyword | value given to variable
|
variable name created by you
*/
```
We are taking the value ```Hello World``` and giving it the name ```myVariable```.
This is referred to as *assigning* a value to the *variable*. Evaluate everything to the right of the equals sign, then assign this value to the variable on the left side.
</section>
<section class="slide" data-markdown>
##Naming a Variable
Variables can't contain spaces so a convention called camel case is generally used. Every new word is capitalized and the result looks kind of `likeCamelHumps`.
JavaScript is case sensitive (uppercase and lowercase letters are treated differently) so variable names are also case sensitive.
Use a descriptive name to make it easier to see, what kind of value that variable is going to hold.
`var firstName;` ← Clear that first name will go here.
`var fn;` ← Not as obvious as firstName.
`var x; ` ← Not clear at all.
</section>
<section class="slide" data-markdown>
## Variable Types: Strings
When you store any amount of text, like words or sentences, the variable type is a **string** value and must be contained in quotes.
```javascript
var myVariable = "Hello World";
```
You can *add* strings together to make longer strings. This is called `concatenation`.
```javascript
var first = "Hello";
var second = "World";
var wholePhrase = first + " " + second;
```
The JavaScript above **concatenates** the three items together:
1. the variable `first` with the value `"Hello"`
* the **anonymous** string value `" "` to add a space.
* the variable `second` with the value `"World"`
So the results of the variable `wholePhrase` is:
var wholePhrase = first + " " + second;
= "Hello" + " " + "World"
= "Hello World"
</section>
<section class="slide">
<h2>Class exercise</h2>
<p>Create a variable called <code>favFood</code> and give it a value. What is the syntax for creating a variable and assigning a string value?</p>
<pre class="delayed"><code>var favFood = "pizza";</code></pre>
<p class="delayed">Try adding the above code into the console on <strong>console.html</strong>. What value gets returned? <code class="delayed">undefined</code></p>
<div class="delayed">
<p>That is perfectly fine. Remember, variables are used to <strong>store</strong> values until you're ready to use them. <code>favFood</code> is still holding on to the value so it returns nothing (undefined). But now, JavaScript now knows that you've assigned a value to a variable. To actually <strong>use</strong> the variable, just type <code>favFood</code> into the console. It will now <strong>return</strong> the value that it was storing.</p>
<img src="framework/img/workshop/console-fav-food.gif" alt="">
</div>
</section>
<section class="slide">
<h2>Class exercise (continued)</h2>
<p>Let’s try <strong>concatenating</strong> some strings with the <code>favFood</code> variable. In the console, try typing this command:</p>
<pre><code>"My favorite food is " + favFood;</code></pre>
<p><img src="framework/img/workshop/console-concatenate.gif" alt="concatenate example" title=""></p>
<p>Note that when we execute a command without <code>var</code>, the assigned value of the variable gets returned instead of <code>undefined</code>. Reminder, <code>var</code> is used to a <em>declare</em> and create a variable and will hold the value, until used.</p>
<p><strong>Challenge!</strong> How would you add a period to the end of the sentence?</p>
<div class="presenter-notes">
<p>Give some real world of examples of why or how variables can be used. Ex. form values can be used to create shipping labels.</p>
</div>
</section>
<section class="slide" data-markdown>
## Variable Types: Strings and Quotes
JavaScript understands strings as values that are wrapped in either 'single quotes' or "double quotes." You can use either style but you must start and end the string with the same mark.
```javascript
var works = "This string value's the bomb!!!";
var fails = 'This string value's the bomb!!!';
```
```javascript
/* ^ ^
|_________________|
|
Javascript thinks the string ends with the second apostrophe.
It is then expecting the command to end with a semicolon (;)
and will return an error.
*/
```
```
var alsoWorks = "Then I said: 'That string value was the bomb!!!' ";
var alsoFails = "Then I said: "That string value was the bomb!!!" ";
```
Try copying each line and putting it into your console to check for errors.
</section>
<section class="slide" data-markdown>
## Variable Types: Strings and Quotes
To get around the issue shown in the previous slide, you can put a backslash (`\`) in front of the quote to *escape* the quote so it does not end the string.
```javascript
var totallyWorks = "Then I said, \"No way you can do that!!!\" ";
/* ^ ^
| |
|___________________________________________|
|
JavaScript now sees a string starting and ending with the same symbol.
The variable 'totallyWorks' is assigned a string value of:
Then I said, "No way you can do that!!!"
*/
```
Another option is to use single quotes to enclose the entire string.
```javascript
var alsoWorks = 'Then I said, "Yes you can!!!" ';
```
</section>
<section class="slide" data-markdown>
## Variable Types: Numbers
Variable **values** can be one of several different **types**. The most basic is a **number**.
var meaningOfLife = 42; // Whole numbers are called 'integers'
JavaScript can also do math. Use `+` for addition, `-` for subtraction, `*` for multiplication and `/` for division.
```javascript
var endingValue = 5 * 2;
// This will return the value of 10.
```
The calculations work the same whether the values are numbers, or values stored in a variable:
```javascript
var startingValue = 5;
var multiplier = 2;
var endingValue = startingValue * multiplier;
// 'endingValue' is still 10.
```
</section>
<section class="slide" data-markdown>
## Class Exercise
Let's practice using numbers & arithmetic operators.
`+` for addition, `-` for subtraction, `*` for multiplication and `/` for division.
Now, try using these operators with variables. Let's create a program for finding a person's age. Create two variables, one for `currentYear` and one for `birthYear` and subtract the values.
</section>
<section class="slide" data-markdown>
## Exercise (5-10 mins)
Create a program using the concepts covered so far: variables & arithmetic operators.
How many seconds are there per day?
* Create variables for `secondsPerMinute`, `minutesPerHour` and `hoursPerDay`.
* Use those values to calculate `secondsPerDay`.
Feel free to use your own variable names or abbreviations. Just make sure to adhere to best practices for naming variables.
**Extra Challenge!**
Use concatenation to output "There are x seconds per day."
(Advance to the next slide to see the solution.)
</section>
<section class="slide" data-markdown>
## Exercise Solution
```javascript
var secondsPerMinute = 60;
var minutesPerHour = 60;
var hoursPerDay = 24;
var secondsPerDay = secondsPerMinute * minutesPerHour * hoursPerDay;
// This command will output the value of secondsPerDay
secondsPerDay;
// Concatenating strings with the secondsPerDay variable.
var sentence = "There are " + secondsPerDay + " seconds per day.";
// This command will output the value of sentence.
sentence;
```
</section>
<section class="slide" data-markdown>
## Variable Types: Booleans
Variables that only contain a `true` or `false` value are called **booleans**
var isTenGreaterThanZero = true;
var isTwoLessThanOne = false;
</section>
<section class="slide" data-markdown>
## Variable Types: Arrays
Variables can also hold a *list* of values (the values themselves being **types** like strings, numbers or booleans) in what is called an **array**. Note the syntax; the entire array value needs to be enclosed in square brackets `[ ]`, with each value separated by a comma *except* the last value.
```javascript
// Declaring the array and assigning values.
var myFavoriteThings = [ "Raindrops On Roses", "Whiskers On Kittens" ];
```
You can also write each value on its own line for readability. JavaScript will ignore the line break.
```javascript
// Declaring the array and assigning values.
var myFavoriteThings = [
"Raindrops On Roses",
"Whiskers On Kittens"
];
```
</section>
<section class="slide" data-markdown>
##Array values
To access the value of a variable, use the variable name. For **arrays**, the values are accessed by their array name and **numerical index**, also contained in square brackets, which always **starts at ```0```**. To get the value of the first item in an array, the syntax will look like this:
```javascript
myFavoriteThings[0];
```
Think of arrays as egg cartons. All the eggs are in one carton but each egg has its own slot.
An alternative way to declare and assign values to an array is to use the square bracket notation with the index number. This will give the same results as the example above.
```javascript
// Declaring an empty array.
var myFavoriteThings = [];
// Assigning values to the array.
myFavoriteThings[0] = "Raindrops On Roses";
myFavoriteThings[1] = "Whiskers On Kittens";
```
</section>
<section class="slide" data-markdown>
## Variable Types: Objects
Another type of variable that can hold multiple values and types is an **object**. To *declare* an object, use the curly brackets `{}`. The values are written in property name and value pairs like this:
```javascript
var myObject = {
propertyName: propertyValue,
anotherPropertyName: anotherPropertyValue
}
```
You can even use an array as a property value.
```javascript
var vonTrappFamily = {
father : "Captain Georg von Trapp",
stepmother : "Maria von Trapp",
children : [
"Liesl von Trapp",
"Friedrich von Trapp",
"Louisa von Trapp",
"Brigitta von Trapp",
"Marta von Trapp",
"Gretl von Trapp"
]
};
```
In the example above the object has 3 **properties**: ```father, stepmother & children```.
Notice how we use the curly braces ```{ }``` to denote an object and the square braces ```[ ]``` for an array.
</section>
<section class="slide" data-markdown>
## Variable Types: Objects (continued)
```javascript
var vonTrappFamily = {
father : "Captain Georg von Trapp", //The value of the property 'father' is a string of text.
stepmother : "Maria von Trapp", //The value of the property 'stepmother' is a string of text.
children : [ //The value of the property 'children' is an array of items.
"Liesl von Trapp", //Each array item is a string of text.
"Friedrich von Trapp",
"Louisa von Trapp",
"Brigitta von Trapp",
"Marta von Trapp",
"Gretl von Trapp"
]
};
```
The pattern of an object is like this:
```javascript
var variableName = { propertyName : propertyValue, anotherPropertyName : another Value };
/* | | | | | | | |
| | | | | |_________________| curly brace
| | | | | | closes object
| | | | | This can repeat for
| | | | | as many properties as you like.
| | | | └ A comma (,) separates properties
| | | └ The property value follows the colon.
| | └ A colon (:) is used to separate name from value
| └ The property name must start with a letter and contain no spaces
└ The curly brace starts the object.
*/
```
</section>
<section class="slide" data-markdown>
## Variable Types: Accessing an Object
Object values are accessed or set via a syntax called **dot notation**. To access the value for the `father` property, it would look like this:
```javascript
vonTrappFamily.father = "Captain Georg von Trapp";
```
To get the value of one of the children, by accessing an array value *inside* of the object property, it would look like this:
```javascript
var notAllowedChampagne = vonTrappFamily.children[0];
```
This would set the value of the variable ```notAllowedChampagne``` to the string value of the first child in the array, ```Liesl von Trapp```. (Remember, array indexes always start at 0!)
**The variables that live inside objects are called ```properties```.** They are still variables, but when they are contained within an object, they are then referred to as **properties**.
</section>
<section class="slide" data-markdown>
##Class exercise: Objects
Using the object below, let's add this entire code block into our console and practice accessing various property values.
```javascript
var vonTrappFamily = {
father : "Captain Georg von Trapp",
stepmother : "Maria von Trapp",
children : [
"Liesl von Trapp",
"Friedrich von Trapp",
"Louisa von Trapp",
"Brigitta von Trapp",
"Marta von Trapp",
"Gretl von Trapp"
]
};
```
</section>
<section class="slide" data-markdown>
## Variable Types
As you've just seen, there are *many* different variable types in JavaScript and many rules about how to write them.
It will take practice getting used to all different rules but it is important to understand that variables are used to hold values and the values themselves have different types.
</section>
<section class="slide" data-markdown>
## Ok, now what?
We have been practicing writing lines of JavaScript. These lines of JavaScript can now be used to write software which are just a series of commands for a computer to follow. Now... we write code.
### What code?
That depends. What do you want your **program** to do? Let's look at [this menu example](framework/example-menu.html). Using JavaScript, we write out step by step instructions on how to do the following things:
* Pay attention to the links in the main menu of a page.
* Whenever someone hovers over one of those menu items, move a line to highlight the hovered item.
* When the mouse leaves, move the line back to where it was.
This example illustrates a short series of commands. When these series of commands are repetitive, rather than writing the same line(s) of code many times throughout our program, we can create a `function`.
</section>
<section class="slide" data-markdown>
## Functions
If a `variable` is a name for a value, then a `function` is a name for a **set** of commands or instructions. When we invoke a variable, it just returns the value. When we invoke a function, it executes all the commands contained within, making it easier to make the code "do things."
Let's look at two functions, `alert()` and `prompt()`. These come built into JavaScript, for free!
Go back to the console and type both functions in, one at a time, and see what happens. Note the syntax for functions, the parentheses `()`, must be included.
</section>
<section class="slide" data-markdown>
##Functions and Arguments
We've seen now that the `alert()` and `prompt()` functions create a pop-up in the browser but the pop-ups are blank. We can also *pass* an **argument** *into* these functions by adding a value within the parentheses `()`. Try this in the console:
```javascript
alert("Hello!");
```
```javascript
prompt("What day is it today?");
```
Whatever value you put within the parentheses will get passed into the function.
</section>
<section class="slide" data-markdown>
## Make your own functions!
You can create your own functions that can contain any number of instructions that you need, including other functions. Use the `function` keyword to declare a new function.
Let's look at this example:
```javascript
function sayAnything(){
alert("Hello World");
}
```
The above example creates a new **function** called `sayHello` but similar to variables, nothing will happen until the function is **called**.
We've already had practice calling a function. Remember `alert();` and `prompt();`? Simply **call** the function by using the function name plus parentheses `()`. Let's add the above function declaration into the console and then execute it by calling it.
</section>
<section class="slide" data-markdown>
##Functions, Arguments & Parameters
Functions can be used to make your life a LOT easier once you get used to how to write them. A function should be used when you have something you need to do time and again in your project.
Just like with the built-in functions, you can also pass *arguments* into your own functions too.
Let's take another look at the function from the previous example.
```javascript
function sayAnything(){
alert("Hello World");
}
```
Notice that the ```sayAnything()``` function has empty parentheses `()` while the ```alert()``` function has the **string** value "Hello World" in the parentheses `()`.
We can create a **parameter** to pass an argument into the function.
</section>
<section class="slide" data-markdown>
## Creating Functions with Parameters
**Parameters** are data that are passed into a function as variables.
Instead of saying "Hello World" every time you call a function, you might want to say something different each time it is called. Let's see what that might look like:
```javascript
// Declaring the function with a parameter of 'message'
function sayAnything(message){
alert(message);
}
// Calling the function
sayAnything("Welcome to the LLC jQuery workshop!");
```
Now, when we call the function, we can pass an argument in the parentheses (`"Welcome to the LLC jQuery workshop!"`). That argument now becomes the value of `message` which will now populate the `message` in `alert(message)`.
Let's try it out in the console. First add the function, then call it. You can call the function as many times as you want with different arguments.
</section>
<section class="slide" data-markdown>
##Multiple Parameters
JavaScript allows for multiple parameters. When you call the function, add the values in the same order as the parameters declared in the function.
```javascript
function myCustomFunction(parameter1, parameter2, parameterN) {
/* | | | |
| | | └ You can have as many parameters as you need.
| | └ The second parameter of the function.
| └ The first parameter of the function.
└ The name of your function.
*/
}
// Call the function with arguments in the same order
myCustomFunction(parameter1, parameter2, parameterN);
```
</section>
<section class="slide" data-markdown>
##Objects, Functions and Methods
What's the difference between these two? The second one kind of looks like a function right?
``` javascript
alert();
console.log();
```
`alert()` is a **function**, it works on its own.
`log()` is a **method** because it's attached to an **object**, `console`. It will log a message (the argument passed into `log()`) and will only show in the console tool.
This is much easier for testing and debugging than using `alert()`. No more pesky pop-ups!
</section>
<section class="slide" data-markdown>
##Objects & Methods
Pretty much everything in JavaScript is an object. Here's another example:
```javascript
// array object
var fruits = ["apples", "oranges", "pears"];
// accessing the 'length' property of the array object to find out how many there are.
var typesOfFruits = fruits.length;
// Output into the console the number of items and concatenated into a sentence.
console.log("There are " + typesOfFruits + " types of fruit.");
```
Try it out in the console.
</section>
<section class="slide">
<h2>Functions & jQuery</h2>
<p>A function is one of the most powerful tools in JavaScript and one of the most powerful functions you will ever use is this one:</p>
<pre class="delayed"><code>jQuery();</code></pre>
<div class="delayed">
<p>Remember, jQuery is a <strong>JavaScript library</strong>. It is a library of functions/methods used to simplify your program. You can download it and use in your projects. </p>
</div>
</section>
<section class="slide centered">
<h2>Phew!</h2>
<br>
<img style="max-width:500px" src="http://33.media.tumblr.com/2466ab981143fb18653f8f09bce061c7/tumblr_n982qbvyFQ1s5lf2ro1_400.gif">
<p>And that is JavaScript in a nutshell.</p>
</section>
<section class="slide title">
<h1>Guess what? You already know how to use jQuery.</h1>
</section>
<section class="slide" data-markdown>
## Using jQuery
You know how to use jQuery because you know how to select **HTML elements** with **CSS selectors**.
```css
.menu-item { color: blue; }
/* | | |
| | └ The value of the CSS property.
| └ The CSS property.
└ HTML elements with a class of 'menu-item' are selected.
*/
```
That same code in jQuery is done like this:
```javascript
jQuery('.menu-item').css('color', 'blue');
/* ^ ^ ^ ^ ^
| | | | └ The second parameter sets the css value.
| | | |
| | | └ The first parameter sets the css property.
| | |
| | └ The jQuery 'css' method is called and will change
| | the css of the element selected in the previous step.
| |
| └ The argument sent to the jQuery function is a 'string' value
| that takes the form of a css selector.
|
└ The jQuery function. This is super important because this makes everything else work.
*/
```
</section>
<section class="slide" data-markdown>
## Shortcut: The Dollar Sign
```javascript
var $ = jQuery;
```
Anytime you want to write ```jQuery```, just use ```$``` instead. It saves time and is the convention in most cases.
```javascript
jQuery('.myClass');
```
is the same as:
```
$('.myClass');
```
That's what we'll be doing going forward.
</section>
<section class="slide" data-markdown>
## What else can jQuery do?
* Animate items
* Perform interactions with your users
* Create rich user experiences with components like:
* Tabs
* Accordions
* Draggable & droppable items
* Image Rotators
* Serve a random background image each time a page loads.
* Create an 'infinite scroll' effect by loading more items when a user reaches the bottom of the page
* Create complex layouts that are not possible with CSS alone.
* Detect the capabilities of a browser before serving up functionality like CSS Animations.
The library contains many, many built-in functions and methods. View the documentation here: [http://api.jquery.com](http://api.jquery.com).
</section>
<section class="slide">
<h2>jQuery Examples:</h2>
<p>Here is an example of a single animation and a <em>chained</em> animation (they run one after another).</p>
<p data-height="268" data-theme-id="0" data-slug-hash="dcmxw" data-default-tab="result" data-user="learningcode" class='codepen'>See the Pen <a href='http://codepen.io/learningcode/pen/dcmxw/'>jQuery Animation Example</a> by Ladies Learning Code (<a href='http://codepen.io/learningcode'>@learningcode</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="http://codepen.io/assets/embed/ei.js"></script>
<p>Have a look at the HTML, CSS, & JS tabs as well as the Result tab.</p>
<p>You can rerun the animations, when in the Results tab, by hovering over the example and clicking the "RERUN" button in the bottom right corner.</p>
<div class="presenter-notes">
<p>Get the learners to change a couple values so they can see how things change but just give a high level overview about the concepts. They will be discussed in more detail in the next few slides.</p>
</div>
</section>
<section class="slide">
<h2>jQuery Examples</h2>
<p>Each button below has been given different instructions to follow when clicked.</p>
<p data-height="425" data-theme-id="0" data-slug-hash="sgaEh" data-default-tab="result" data-user="learningcode" class='codepen'>See the Pen <a href='http://codepen.io/learningcode/pen/sgaEh/'>jQuery Event and Method Examples</a> by Ladies Learning Code (<a href='http://codepen.io/learningcode'>@learningcode</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="http://codepen.io/assets/embed/ei.js"></script>
<p>The <strong>HTML</strong> consists of several <code><button></code> elements, to click and add the jQuery action to. The <code><div class="stage"></div></code> is being used as the <em>selector</em>. The <code><div class="player"></div></code> is the square.</p>
<p>The <strong>CSS</strong> sets the colour and size of the squares and floats them so they sit side by side.
</p>
<p>The jQuery is where all the cool stuff is happening.</p>
</section>
<section class="slide">
<h2>jQuery Examples</h2>
<p>You can even <em>extend</em> the capabilities of jQuery with <strong>plugins</strong> like the jQuery UI plugin used below. You can drag and re-order the items using the jQuery UI sortable plugin.</p>
<p data-height="268" data-theme-id="0" data-slug-hash="fAmbJ" data-default-tab="result" data-user="learningcode" class='codepen'>See the Pen <a href='http://codepen.io/learningcode/pen/fAmbJ/'>jQuery UI Draggable Sortable Example</a> by Ladies Learning Code (<a href='http://codepen.io/learningcode'>@learningcode</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="http://codepen.io/assets/embed/ei.js"></script>
<p>When editing a Codepen, you can select the gear icon in the JS box and it will show you if/what library it's using. In the example above, you can see it's using jQuery & jQuery UI.</p>
<img src="framework/img/workshop/codepen.png">
</section>
<section class="slide title" data-markdown>
#Let's write some jQuery!
</section>
<section class="slide" data-markdown>
##Setting up our work flow
For the rest of the day, you'll be working with the files included in the <strong>project</strong> folder. Let's take a moment to set up the work flow.
Inside of the folder you downloaded today (**llc-intro-to-jquery-master**), there are many folders and files that contain different content.
llc-intro-to-jquery-master
|-- framework // Contains files needed for slide presentation. Do not edit!
|-- project // Contains files for today's workshop.
|-- css // Only CSS files here.
|-- final // A complete example of today's project for your reference.
|-- images // Images for your project. You can also add your images here.
|-- js // All your js files go here.
|-- index.html // The homepage of your site.
|-- index.html // This is the file you're viewing right now (slides)!
</section>
<section class="slide" data-markdown>
##Setting up our work flow
Let's open the project files in the browser and text editor.
* Open Sublime Text, then go to **File > Open**.
* Navigate to the **project** folder (inside the folder you downloaded with today's slides).
* With the entire folder selected, select **Open**.
* The folder will appear in the side bar. Double click on **index.html** in the sidebar to open it in the editor.
* Right click or two finger tap in Sublime and select Open in Browser. This will open the HTML file in your default browser.
* If Chrome is not your default browser, go to your Window/Finder and navigate to the **project** folder, right-click/two-finger tap on **index.html** and choose **Open With > Chrome**
You should see this in Sublime Text:
</section>
<section class="slide">
<h2>Using jQuery</h2>
<p>To use jQuery on your HTML page, you'll have to link to the jQuery file. There are two ways to do that.</p>
<p>1. <strong>Include the jQuery files with your project files:</strong></p>
<ul>
<li><a href="http://jquery.com/download/">Download the latest version of jQuery</a> and use the latest, compressed version. </li>
<li>Save it within your projects files. It’s common to create a separate <strong>js</strong> folder for all JavaScript files for organization (similar to how there are separate images and css folders.)</li>
<li>Link it to your HTML document using a script tag. The <code>src</code> should point to the path to where the file is saved in your project’s folder structure.<br>
Your project folder already has the jQuery file included so no need to download anything today.
</li>
</ul>
<pre><code class="xml"><script src="js/jquery-1.11.1.min.js"></script></code></pre>
<p><strong>Important</strong>: Unlike CSS, which always has to be included within the <code><head></code> tags, JavaScript can be included pretty much anywhere on the page, in the <code><head></code> or the <code><body></code>. Often, it is included just before the closing <code></body></code> to allow the page document to load first.</p>
<p>2. <strong>Use a CDN:</strong></p>
<p>CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe.</p>
<p>To use the jQuery CDN (also listed on the download page), reference the file directly from the hosted file, rather than pointed to a file in your directory. Be sure to include the "http://" when viewing the site locally (on your computer).</p>
<pre><code class="xml"><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></code></pre>
<p>Insert it into your <strong>index.html</strong> page now.</p>
<div class="presenter-notes">