├── images ├── dom.png ├── meetup.png ├── console.png ├── results.png ├── foursquare.png ├── meetup_open.png ├── client-server.png ├── gdi_logo_badge.png ├── meetup_console.png └── meetup_results.png ├── .gitmodules ├── class3 ├── exercise2 │ ├── style.css │ ├── index.html │ └── javascript.js ├── exercise3 │ ├── style.css │ ├── index.html │ └── javascript.js └── exercise1 │ ├── index.html │ └── javascript.js ├── class1 ├── exercise1 │ ├── index.html │ └── javascript.js ├── exercise2 │ ├── index.html │ └── javascript.js └── exercise3 │ ├── index.html │ └── javascript.js ├── class4 ├── exercise1 │ ├── style.css │ ├── index.html │ └── javascript.js ├── exercise2 │ ├── style.css │ ├── index.html │ └── javascript.js └── exercise3 │ ├── style.css │ ├── index.html │ └── javascript.js ├── class2 ├── exercise1 │ ├── index.html │ └── javascript.js ├── exercise2 │ ├── index.html │ └── javascript.js └── exercise3 │ ├── index.html │ └── javascript.js ├── README.md ├── class4.html ├── class3.html ├── class2.html └── class1.html /images/dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/dom.png -------------------------------------------------------------------------------- /images/meetup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/meetup.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "reveal"] 2 | path = reveal 3 | url = git://github.com/girldevelopit/reveal.js.git 4 | -------------------------------------------------------------------------------- /images/console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/console.png -------------------------------------------------------------------------------- /images/results.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/results.png -------------------------------------------------------------------------------- /class3/exercise2/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #ccc; 5 | } -------------------------------------------------------------------------------- /images/foursquare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/foursquare.png -------------------------------------------------------------------------------- /images/meetup_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/meetup_open.png -------------------------------------------------------------------------------- /images/client-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/client-server.png -------------------------------------------------------------------------------- /images/gdi_logo_badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/gdi_logo_badge.png -------------------------------------------------------------------------------- /images/meetup_console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/meetup_console.png -------------------------------------------------------------------------------- /images/meetup_results.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdi-curriculum-review/gdi-jquery-intro/HEAD/images/meetup_results.png -------------------------------------------------------------------------------- /class1/exercise1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site! 8 | 9 | -------------------------------------------------------------------------------- /class1/exercise2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site! 8 | 9 | -------------------------------------------------------------------------------- /class3/exercise3/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #ccc; 5 | } 6 | 7 | input{ 8 | width: 200px; 9 | padding: 5px; 10 | margin: 5px; 11 | } -------------------------------------------------------------------------------- /class1/exercise1/javascript.js: -------------------------------------------------------------------------------- 1 | var age = 26; 2 | var oldAge = 96; 3 | var perDay = 2; 4 | 5 | var days = (oldAge - age) * 365; 6 | var total = perDay * days; 7 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge); 8 | -------------------------------------------------------------------------------- /class1/exercise3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site! 8 | Calculate life time supply 9 | 10 | -------------------------------------------------------------------------------- /class4/exercise1/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #ccc; 5 | } 6 | 7 | input{ 8 | width: 200px; 9 | padding: 5px; 10 | margin: 5px; 11 | } 12 | .event{ 13 | margin:5px; 14 | padding:5px; 15 | border: 1px solid #ccc; 16 | background-color: #ddd; 17 | } -------------------------------------------------------------------------------- /class4/exercise2/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #ccc; 5 | } 6 | 7 | input{ 8 | width: 200px; 9 | padding: 5px; 10 | margin: 5px; 11 | } 12 | .event{ 13 | margin:5px; 14 | padding:5px; 15 | border: 1px solid #ccc; 16 | background-color: #ddd; 17 | } -------------------------------------------------------------------------------- /class4/exercise3/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #ccc; 5 | } 6 | 7 | input{ 8 | width: 200px; 9 | padding: 5px; 10 | margin: 5px; 11 | } 12 | .event{ 13 | margin:5px; 14 | padding:5px; 15 | border: 1px solid #ccc; 16 | background-color: #ddd; 17 | } -------------------------------------------------------------------------------- /class2/exercise1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site!
8 | Calculate life time supply
9 | See my favorite things 10 | 11 | -------------------------------------------------------------------------------- /class2/exercise2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site!
8 | Calculate life time supply
9 | See my favorite things
10 | My friends 11 | 12 | -------------------------------------------------------------------------------- /class1/exercise2/javascript.js: -------------------------------------------------------------------------------- 1 | var age = 26; 2 | var oldAge = 96; 3 | var perDay = 2; 4 | 5 | var days = (oldAge - age) * 356; 6 | var total = perDay * days; 7 | if(total > 40000){ 8 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 9 | }else{ 10 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 11 | } -------------------------------------------------------------------------------- /class1/exercise3/javascript.js: -------------------------------------------------------------------------------- 1 | function calculate(){ 2 | var age = 26; 3 | var oldAge = 96; 4 | var perDay = 2; 5 | 6 | var days = (oldAge - age) * 356; 7 | var total = perDay * days; 8 | if(total > 40000){ 9 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 10 | }else{ 11 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /class2/exercise3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | My Site!
8 | Calculate life time supply
9 |
10 | 11 |
12 | See my favorite things 13 |
14 | 15 |
16 | My friends 17 | 18 | -------------------------------------------------------------------------------- /class3/exercise1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | My Site!
9 | Calculate life time supply
10 |
11 | 12 |
13 | See my favorite things 14 |
15 | 16 |
17 | My friends 18 | 19 | -------------------------------------------------------------------------------- /class3/exercise2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | 9 | My Site!
10 |
11 |
12 |
13 |
14 | Calculate life time supply
15 |
16 | 17 |
18 | See my favorite things 19 |
20 | 21 |
22 | My friends 23 | 24 | 25 | -------------------------------------------------------------------------------- /class2/exercise1/javascript.js: -------------------------------------------------------------------------------- 1 | function calculate(){ 2 | var age = 26; 3 | var oldAge = 96; 4 | var perDay = 2; 5 | 6 | var days = (oldAge - age) * 356; 7 | var total = perDay * days; 8 | if(total > 40000){ 9 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 10 | }else{ 11 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 12 | } 13 | } 14 | 15 | function favoriteThings(){ 16 | var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; 17 | var result = 'My favorite things are: '; 18 | for (var i = 0; i 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | 9 | My Site!
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 |

My favorite things:

25 |
26 |
27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 | 35 |
36 | 37 | -------------------------------------------------------------------------------- /class4/exercise1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | 9 | My Site!
10 |
11 |
12 |
13 |
14 |
15 | Events I might like: 16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |

My favorite things:

28 |
29 |
30 |
31 | 32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 | 40 | -------------------------------------------------------------------------------- /class4/exercise2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | 9 | My Site!
10 |
11 |
12 |
13 |
14 |
15 | Events I might like: 16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 |

My favorite things:

28 |
29 |
30 |
31 | 32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 | 40 | -------------------------------------------------------------------------------- /class2/exercise2/javascript.js: -------------------------------------------------------------------------------- 1 | function calculate(){ 2 | var age = 26; 3 | var oldAge = 96; 4 | var perDay = 2; 5 | 6 | var days = (oldAge - age) * 356; 7 | var total = perDay * days; 8 | if(total > 40000){ 9 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 10 | }else{ 11 | alert("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 12 | } 13 | } 14 | 15 | function favoriteThings(){ 16 | var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; 17 | var result = 'My favorite things are: '; 18 | for (var i = 0; i 2 | 3 | My Site! 4 | 5 | 6 | 7 | 8 | 9 | My Site!
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | Events you might like: 21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 |

My favorite things:

33 |
34 |
35 |
36 | 37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 | 45 | -------------------------------------------------------------------------------- /class3/exercise1/javascript.js: -------------------------------------------------------------------------------- 1 | function calculate(){ 2 | var age = 26; 3 | var oldAge = 96; 4 | var perDay = 2; 5 | 6 | var days = (oldAge - age) * 356; 7 | var total = perDay * days; 8 | var resultDiv = $('#lifetime-supply') 9 | if(total > 40000){ 10 | resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 11 | }else{ 12 | resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 13 | } 14 | } 15 | 16 | function favoriteThings(){ 17 | var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; 18 | var resultDiv = $('#favorite-things'); 19 | 20 | var resultParagraph = $('

'); 21 | var result = 'My favorite things are: '; 22 | 23 | for (var i = 0; i') 43 | 44 | var introParagraph = $('

My friends are:

'); 45 | resultDiv.append(introParagraph) 46 | 47 | for(var i = 0; i < friends.length; i++){ 48 | var resultParagraph = $('

' + describeFriend(friends[i]) + '

'); 49 | resultDiv.append(resultParagraph); 50 | } 51 | $('body').append(resultDiv); 52 | } 53 | function describeFriend(friend){ 54 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 55 | } -------------------------------------------------------------------------------- /class3/exercise3/javascript.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $('.box').bind({ 3 | click: function() { 4 | $(this).css('background-color', 'green') 5 | $(this).html('Clicked!') 6 | }, 7 | mouseenter: function() { 8 | $(this).css('background-color', 'purple') 9 | $(this).html('Hi!') 10 | }, 11 | mouseleave: function(){ 12 | $(this).css('background-color', 'orange') 13 | $(this).html('Bye!') 14 | } 15 | }); 16 | $('#calculate').submit(function(event){ 17 | var givenAge = $('#age').val(); 18 | var givenSnack = $('#snack').val(); 19 | var givenPerDay = $('#times-per-day').val(); 20 | $('#lifetime-supply').html(calculate(givenAge, givenSnack, givenPerDay)); 21 | return false; 22 | }); 23 | $('#favorites').submit(function(event){ 24 | var givenThing = $('#thing').val(); 25 | favoriteThings(givenThing); 26 | return false 27 | }); 28 | $('#friends').submit(function(event){ 29 | var name = $('#friend-name').val(); 30 | var hair = $('#friend-hair').val() 31 | var friend = {name: name, hair:hair}; 32 | myFriends(friend); 33 | return false; 34 | }); 35 | }) 36 | 37 | function calculate(age, snack, perDay){ 38 | var oldAge = 96; 39 | 40 | var days = (oldAge - age) * 356; 41 | var total = perDay * days; 42 | if(total > 40000){ 43 | return "You will need " + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; 44 | }else{ 45 | return "You will need " + + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; 46 | } 47 | } 48 | 49 | function favoriteThings(thing){ 50 | $('#favorite-things').append('

'+ thing +'

'); 51 | } 52 | function myFriends(friend){ 53 | var resultDiv = $('
') 54 | var resultParagraph = $('

' + describeFriend(friend) + '

'); 55 | resultDiv.append(resultParagraph); 56 | $('body').append(resultDiv); 57 | } 58 | function describeFriend(friend){ 59 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 60 | } -------------------------------------------------------------------------------- /class2/exercise3/javascript.js: -------------------------------------------------------------------------------- 1 | function calculate(){ 2 | var age = 26; 3 | var oldAge = 96; 4 | var perDay = 2; 5 | 6 | var days = (oldAge - age) * 356; 7 | var total = perDay * days; 8 | var resultDiv = document.getElementById('lifetime-supply') 9 | if(total > 40000){ 10 | resultDiv.innerHTML = "You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; 11 | }else{ 12 | resultDiv.innerHTML = "You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; 13 | } 14 | } 15 | 16 | function favoriteThings(){ 17 | var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; 18 | var resultDiv = document.getElementById('favorite-things'); 19 | 20 | var resultParagraph = document.createElement('p'); 21 | var result = 'My favorite things are: '; 22 | 23 | for (var i = 0; i 40000){ 30 | resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"); 31 | }else{ 32 | resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"); 33 | } 34 | } 35 | 36 | function favoriteThings(){ 37 | var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; 38 | var resultDiv = $('#favorite-things'); 39 | 40 | var resultParagraph = $('

'); 41 | var result = 'My favorite things are: '; 42 | 43 | for (var i = 0; i') 63 | 64 | var introParagraph = $('

My friends are:

'); 65 | resultDiv.append(introParagraph) 66 | 67 | for(var i = 0; i < friends.length; i++){ 68 | var resultParagraph = $('

' + describeFriend(friends[i]) + '

'); 69 | resultDiv.append(resultParagraph); 70 | } 71 | $('body').append(resultDiv); 72 | } 73 | function describeFriend(friend){ 74 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 75 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CORE JAVASCRIPT/JQUERY 2 | 3 | This is the official Girl Develop It Core Intro Javascript course. Material based on original material by Sara Chipps, Pamela Fox, Alexis Goldstein, Izzy Johnston and Leo Newball. 4 | 5 | The course is meant to be taught in 4 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience. 6 | 7 | ## Classes 8 | 9 | ### Class 1 10 | 11 | Introduction to Javascript. What is it? Why does it matter? 12 | You will go through a history of JavaScript, what it is and how it interacts with the browser. You will go through basic JavaScript concepts including variables, data types, if/else statements and functions. Students will create a basic calculator with static numbers, incorporating variables, if/else, and lastly functions. 13 | 14 | ### Class 2 15 | Deeper into Javascript. 16 | 17 | You will go through the more complex data types such as objects and arrays. You will also introduce looping logic through while and for. You will introduce the DOM and its role in client side interaction. Students will learn how to loop through objects and arrays and display results on their site 18 | 19 | ### Class 3 20 | 21 | Introduction to jQuery 22 | 23 | Introduce jQuery. Discuss its role as a javascript library (not a different language). You will introduce basic interactive functionalities, including mouse events, toggle, and val. Students will create a basic interactive form to add new results to their site. 24 | 25 | ### Class 4 26 | 27 | Introduce APIs, REST, and AJAX. Students will interact with the Meetup API (chosen because all students are already aware of Meetup and calls can be made without oAuth authentication). Bonus intros to jQuery UI, and the concept of jQuery plugins 28 | 29 | 30 | ## Theme customization 31 | 32 | You can change theme colors by changing the theme css to any of the following options: 33 | ```html 34 | 35 | 36 | 37 | 38 | ``` 39 | You can change the text editor theme by changing the highlight.js css to the following options: 40 | ```html 41 | 42 | 43 | ``` 44 | You can change transition by changing the reveal transition property in Reveal.initialize 45 | ```javascript 46 | Reveal.initialize({ 47 | transition: 'default', // default/cube/page/concave/zoom/linear/none 48 | }); 49 | ``` 50 | -------------------------------------------------------------------------------- /class4/exercise1/javascript.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | getMeetups(); 3 | $('.box').bind({ 4 | click: function() { 5 | $(this).css('background-color', 'green') 6 | $(this).html('Clicked!') 7 | }, 8 | mouseenter: function() { 9 | $(this).css('background-color', 'purple') 10 | $(this).html('Hi!') 11 | }, 12 | mouseleave: function(){ 13 | $(this).css('background-color', 'orange') 14 | $(this).html('Bye!') 15 | } 16 | }); 17 | $('#calculate').submit(function(event){ 18 | var givenAge = $('#age').val(); 19 | var givenSnack = $('#snack').val(); 20 | var givenPerDay = $('#times-per-day').val(); 21 | $('#lifetime-supply').html(calculate(givenAge, givenSnack, givenPerDay)); 22 | return false; 23 | }); 24 | $('#favorites').submit(function(event){ 25 | var givenThing = $('#thing').val(); 26 | favoriteThings(givenThing); 27 | return false 28 | }); 29 | $('#friends').submit(function(event){ 30 | var name = $('#friend-name').val(); 31 | var hair = $('#friend-hair').val() 32 | var friend = {name: name, hair:hair}; 33 | myFriends(friend); 34 | return false; 35 | }); 36 | }); 37 | 38 | function getMeetups(){ 39 | var api_key = "50722e1d56c194e61763a2ee1e4535"; 40 | var url = "https://api.meetup.com/2/"; 41 | var method = "open_events" 42 | $.ajax({ 43 | url: url + method, 44 | data: { 45 | key: api_key, 46 | lat: 40.7143528, 47 | lon: -74.0059731, 48 | topic: 'JavaScript' 49 | }, 50 | crossDomain: true, 51 | dataType: 'jsonp', 52 | type: "GET", 53 | success: function (data) { 54 | console.log(data) 55 | }, 56 | error: function(data) { 57 | console.log("Error", data); 58 | } 59 | }); 60 | } 61 | 62 | function calculate(age, snack, perDay){ 63 | var oldAge = 96; 64 | 65 | var days = (oldAge - age) * 356; 66 | var total = perDay * days; 67 | if(total > 40000){ 68 | return "You will need " + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; 69 | }else{ 70 | return "You will need " + + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; 71 | } 72 | } 73 | 74 | function favoriteThings(thing){ 75 | $('#favorite-things').append('

'+ thing +'

'); 76 | } 77 | function myFriends(friend){ 78 | var resultDiv = $('
') 79 | var resultParagraph = $('

' + describeFriend(friend) + '

'); 80 | resultDiv.append(resultParagraph); 81 | $('body').append(resultDiv); 82 | } 83 | function describeFriend(friend){ 84 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 85 | } -------------------------------------------------------------------------------- /class4/exercise2/javascript.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | getMeetups(); 3 | $('.box').bind({ 4 | click: function() { 5 | $(this).css('background-color', 'green') 6 | $(this).html('Clicked!') 7 | }, 8 | mouseenter: function() { 9 | $(this).css('background-color', 'purple') 10 | $(this).html('Hi!') 11 | }, 12 | mouseleave: function(){ 13 | $(this).css('background-color', 'orange') 14 | $(this).html('Bye!') 15 | } 16 | }); 17 | $('#calculate').submit(function(event){ 18 | var givenAge = $('#age').val(); 19 | var givenSnack = $('#snack').val(); 20 | var givenPerDay = $('#times-per-day').val(); 21 | $('#lifetime-supply').html(calculate(givenAge, givenSnack, givenPerDay)); 22 | return false; 23 | }); 24 | $('#favorites').submit(function(event){ 25 | var givenThing = $('#thing').val(); 26 | favoriteThings(givenThing); 27 | return false 28 | }); 29 | $('#friends').submit(function(event){ 30 | var name = $('#friend-name').val(); 31 | var hair = $('#friend-hair').val() 32 | var friend = {name: name, hair:hair}; 33 | myFriends(friend); 34 | return false; 35 | }); 36 | }); 37 | 38 | function getMeetups(){ 39 | var api_key = "50722e1d56c194e61763a2ee1e4535"; 40 | var url = "https://api.meetup.com/2/"; 41 | var method = "open_events" 42 | $.ajax({ 43 | url: url + method, 44 | data: { 45 | key: api_key, 46 | lat: 40.7143528, 47 | lon: -74.0059731, 48 | topic: 'JavaScript' 49 | }, 50 | crossDomain: true, 51 | dataType: 'jsonp', 52 | type: "GET", 53 | success: function (data) { 54 | parseMeetups(data.results) 55 | }, 56 | error: function(data) { 57 | console.log("Error", data); 58 | } 59 | }); 60 | } 61 | 62 | function parseMeetups(results){ 63 | for(var i = 0; i < results.length; i ++){ 64 | var div = $('
'); 65 | var name = $('
Name: '+ results[i].name+'
'); 66 | var description = $('
Description: '+ results[i].description+'
'); 67 | var group = $('
Group: '+ results[i].group.name+'
'); 68 | var link = $('') 69 | div.append(name, description, group, link); 70 | $('#events').append(div); 71 | } 72 | } 73 | 74 | function calculate(age, snack, perDay){ 75 | var oldAge = 96; 76 | 77 | var days = (oldAge - age) * 356; 78 | var total = perDay * days; 79 | if(total > 40000){ 80 | return "You will need " + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; 81 | }else{ 82 | return "You will need " + + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; 83 | } 84 | } 85 | 86 | function favoriteThings(thing){ 87 | $('#favorite-things').append('

'+ thing +'

'); 88 | } 89 | function myFriends(friend){ 90 | var resultDiv = $('
') 91 | var resultParagraph = $('

' + describeFriend(friend) + '

'); 92 | resultDiv.append(resultParagraph); 93 | $('body').append(resultDiv); 94 | } 95 | function describeFriend(friend){ 96 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 97 | } -------------------------------------------------------------------------------- /class4/exercise3/javascript.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $('.box').bind({ 3 | click: function() { 4 | $(this).css('background-color', 'green') 5 | $(this).html('Clicked!') 6 | }, 7 | mouseenter: function() { 8 | $(this).css('background-color', 'purple') 9 | $(this).html('Hi!') 10 | }, 11 | mouseleave: function(){ 12 | $(this).css('background-color', 'orange') 13 | $(this).html('Bye!') 14 | } 15 | }); 16 | $('#calculate').submit(function(event){ 17 | var givenAge = $('#age').val(); 18 | var givenSnack = $('#snack').val(); 19 | var givenPerDay = $('#times-per-day').val(); 20 | $('#lifetime-supply').html(calculate(givenAge, givenSnack, givenPerDay)); 21 | return false; 22 | }); 23 | $('#favorites').submit(function(event){ 24 | var givenThing = $('#thing').val(); 25 | favoriteThings(givenThing); 26 | return false 27 | }); 28 | $('#friends').submit(function(event){ 29 | var name = $('#friend-name').val(); 30 | var hair = $('#friend-hair').val() 31 | var friend = {name: name, hair:hair}; 32 | myFriends(friend); 33 | return false; 34 | }); 35 | 36 | $('#meetup').submit(function(event){ 37 | 38 | getMeetups($('#topic').val(), $('#zipcode').val()) 39 | return false; 40 | }); 41 | }); 42 | 43 | function getMeetups(topic, zipcode){ 44 | var api_key = "50722e1d56c194e61763a2ee1e4535"; 45 | var url = "https://api.meetup.com/2/"; 46 | var method = "open_events" 47 | $.ajax({ 48 | url: url + method, 49 | data: { 50 | key: api_key, 51 | zip: zipcode, 52 | topic: topic 53 | }, 54 | crossDomain: true, 55 | dataType: 'jsonp', 56 | type: "GET", 57 | success: function (data) { 58 | parseMeetups(data.results) 59 | }, 60 | error: function(data) { 61 | console.log("Error", data); 62 | } 63 | }); 64 | } 65 | 66 | function parseMeetups(results){ 67 | for(var i = 0; i < results.length; i ++){ 68 | var div = $('
'); 69 | var name = $('
Name: '+ results[i].name+'
'); 70 | var description = $('
Description: '+ results[i].description+'
'); 71 | var group = $('
Group: '+ results[i].group.name+'
'); 72 | var link = $('') 73 | div.append(name, description, group, link); 74 | $('#events').append(div); 75 | } 76 | } 77 | 78 | function calculate(age, snack, perDay){ 79 | var oldAge = 96; 80 | 81 | var days = (oldAge - age) * 356; 82 | var total = perDay * days; 83 | if(total > 40000){ 84 | return "You will need " + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!"; 85 | }else{ 86 | return "You will need " + + total + " of " + snack + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable"; 87 | } 88 | } 89 | 90 | function favoriteThings(thing){ 91 | $('#favorite-things').append('

'+ thing +'

'); 92 | } 93 | function myFriends(friend){ 94 | var resultDiv = $('
') 95 | var resultParagraph = $('

' + describeFriend(friend) + '

'); 96 | resultDiv.append(resultParagraph); 97 | $('body').append(resultDiv); 98 | } 99 | function describeFriend(friend){ 100 | return "My friend " + friend.name + " has " + friend.hair + " hair. "; 101 | } -------------------------------------------------------------------------------- /class4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 4 ~ Javascript ~ Girl Develop IT 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |

Beginning Javascript

43 |

Class 4

44 |
45 | 46 | 47 |
48 |

Welcome!

49 |
50 |

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

51 |

Some "rules"

52 |
    53 |
  • We are here for you!
    • 54 |
  • Every question is important
    • 55 |
  • Help each other
    • 56 |
  • Have fun
    • 57 |
58 |
59 |
60 | 61 |
62 |

Warning

63 |
64 | The following few slides have lots of acronyms and jargon. 65 |
66 |
On behalf of developers everywhere, we apologize
67 |
68 | 69 |
70 |

What is an API?

71 |
    72 |
  • Application Programming Interface
    • 73 |
  • Data structure and rules for accessing a web-based application
    • 74 |
  • How we can access information from sites that are not our own (Twitter, Meetup, Facebook, Foursquare)
    • 75 |
76 |
77 | 78 |
79 |

What is an API?

80 |
    81 |
  • Primary role: a channel for applications to work together 82 |
      83 |
    • Your website and the Twitter API
      • 84 |
    • Twitter's mobile app and the Twitter API
      • 85 |
    • Hootsuite's mobile app and the Twitter API
      • 86 | 87 |
    88 |
89 | 90 | 91 |
92 |

What is AJAX?

93 |
    94 |
  • Asynchronous JavaScript and XML
    • 95 |
  • Method to communicate to a server or API
    • 96 |
  • Asynchronous means: 97 |
      98 |
    • I ask Twitter for all the tweets ever!
      • 99 |
    • That will take a while
      • 100 |
    • My whole website could be locked up while I wait!
      • 101 |
    • Or, my call can be 'asynchronous' and my website will just listen for Twitter's response with one ear, but go about normal business until the response arrives. 102 |
    103 |
    • 104 |
  • Requests and results can be in JavaScript or XML
    • 105 |
106 |
107 | 108 | 109 |
110 |

What is REST?

111 |
    112 |
  • Representational State Transfer
    • 113 |
  • REST is a way to ask an API for information by using a URL.
    • 114 |
  • REST Urls are created with the following syntax: 115 |
      116 |
    • http://ApiSite.com/method?parameter=value&parameter=value
      • 117 |
    • Method -- what you want from the API. Defined by API documentations
      • 118 |
    • Parameter -- a type of filter or restraint. Defined by API documentations
      • 119 |
    • Value -- value for parameter. Defined by you!
      • 120 |
    121 |
    • 122 | 123 |
124 |
125 | 126 |
127 |

Where do I learn about an API?

128 |

All (good) APIs have documentation

129 |
135 | 136 | 137 |
138 |

What is JSON?

139 |
    140 |
  • JavaScript Object Notation
    • 141 |
  • Format for data returned from APIs
    • 142 |
  • You've seen it before!
    • 143 |
  • JavaScript objects
    • 144 |
145 |
146 | 147 | 148 |
149 |

Getting started!

150 |

Get an API Key

151 |

A what?

152 |
    153 |
  • Api Key or Developer Key is a way for an API to identify you
    • 154 |
  • More secure for an API (Know who is using their API)
    • 155 |
  • More secure for you -- people can't pretend to be your website
    • 156 |
157 |
158 | 159 | 160 |
161 |

Meetup API

162 |

We will be using the Meetup API

163 |

Documentation

164 | 165 |
166 | 167 |
168 |

Meetup API

169 |

We will be finding interesting Meetups near us

170 |

Open Events

171 | 172 |
173 | 174 |
175 |

Meetup API

176 |

Try it in the meetup console

177 |

Open Events Console

178 | 179 |
180 | 181 |
182 |

Meetup API

183 |

Try it in the meetup console

184 | 185 |
186 | 187 | 188 |
189 |

jQuery Ajax

190 |

jQuery method to perform an AJAX call

191 |
192 | 

193 |     $.ajax({
194 |   		url: 'http://site.com',
195 |   		data: {
196 |   		  parameter: 'value',
197 |   		  parameter: 'value'
198 |   		},
199 |   		crossDomain: true,
200 |   		dataType: 'jsonp',
201 |   		type: "GET",
202 |   		success: function (data) {
203 |   		    // code with data returned
204 |   		},
205 |   		error: function(data) {
206 |   			 // code with error returned
207 |   		}				
208 |   	});
209 |
210 |
211 |
212 | 213 |
214 |

jQuery Ajax

215 |
216 | 

217 |     $.ajax({
218 |   		url: 'http://site.com',
219 |   		...			
220 |   	});
221 |
222 |
223 |
    224 |
  • $.ajax() -- jQuery method for sending AJAX requests
    • 225 |
  • Takes one parameter -- a JavaScript object
    • 226 |
  • Note the {}
    • 227 |
  • url -- first property, the url where you will send the AJAX request
    • 228 |
229 |
230 | 231 |
232 |

jQuery Ajax

233 |
234 | 

235 | 	...
236 | 	data: {
237 | 	  parameter: 'value',
238 | 	  parameter: 'value'
239 | 	},
240 | 	...	
241 |
242 |
243 |
    244 |
  • data -- a JavaScript object with all the parameters for the AJAX request
    • 245 |
  • Some parameters in the Meetup open events 246 |
      247 |
    • key (refers to api key)
      • 248 |
    • city
      • 249 |
    • country
      • 250 |
    • topic
      • 251 |
    252 |
    • 253 |
254 |
255 | 256 |
257 |

jQuery Ajax

258 |
259 | 

260 | 	...
261 |   crossDomain: true,
262 | 	dataType: 'jsonp',
263 | 	type: "GET",
264 | 	...	
265 |
266 |
267 |
    268 |
  • crossDomain -- are you sending the request to a domain that is not your own?
    • 269 |
  • dataType -- how will you evaluate the data returned
    • 270 |
  • type -- what type of request is it? 271 |
      272 |
    • GET -- retrieve data
      • 273 |
    • POST -- post new data
      • 274 |
    275 |
    • 276 |
277 |
278 | 279 | 280 |
281 |

jQuery Ajax

282 |
283 | 

284 | 	...
285 |   success: function (data) {
286 | 	    // code with data returned
287 | 	},
288 | 	error: function(data) {
289 | 		 // code with error returned
290 | 	}
291 | 	...	
292 |
293 |
294 |
    295 |
  • success -- code that will execute if results are sent back successfully
    • 296 |
  • error -- code that will execute if results return an error
    • 297 |
298 |
299 | 300 | 301 |
302 |

Let's Develop It!

303 |
    304 |
  • Create a new div with the id "events"
    • 305 |
  • Create a new function in your javascript that calls Meetup open events method
    • 306 |
  • Add parameters such as city, state or lat, lon to find meetups near you
    • 307 |
  • Add a parameter such as category or topic to find meetups that you would be interested in
    • 308 |
  • For now, just look at the results in the console.log()
    • 309 |
  • Call this new function in document ready
    • 310 |
311 |
312 | 313 |
314 |

Let's Develop It!

315 | 316 |
317 | 318 |
319 |

Let's Develop It!

320 |
    321 |
  • Create a new function that can parse results.
    • 322 |
  • Remember that the results will be an array of objects
    • 323 |
  • Loop through your results
    • 324 |
  • For each result, create a new div
    • 325 |
  • Get the name, description, group name, and url of each event
    • 326 |
  • Append them to your new div
    • 327 |
  • Append the new div to the div "events"
    • 328 |
329 |
330 | 331 |
332 |

Let's Develop It!

333 |
    334 |
  • Create a form for users to enter in their location and a topic of their choosing
    • 335 |
  • On submit, call the same Meetup open events method, but with the user's values
    • 336 |
337 |
338 | 339 |
340 |

Bonus

341 |

Still have time? Can't stop learning?

342 |
343 |

One of the best things about jQuery is the developer community

344 |

They love to build!

345 |

Check out some great plugins:

346 | 351 |
352 |
353 | 354 |
355 |

Questions?

356 |
? 357 |
358 |
359 |
360 |
361 |
362 | Javascript ~ Girl Develop It ~ 363 | Creative Commons License 364 |
365 |
366 |
367 | 368 | 369 | 370 | 371 | 372 | 396 | 397 | 398 | 399 | -------------------------------------------------------------------------------- /class3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 3 ~ Javascript ~ Girl Develop IT 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |

Beginning Javascript

43 |

Class 3

44 |
45 | 46 | 47 |
48 |

Welcome!

49 |
50 |

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

51 |

Some "rules"

52 |
    53 |
  • We are here for you!
    • 54 |
  • Every question is important
    • 55 |
  • Help each other
    • 56 |
  • Have fun
    • 57 |
58 |
59 |
60 | 61 | 62 |
63 |

What is a library?

64 |
    65 |
  • Software libraries hold functions (not books!)
    • 66 |
  • When you include a library, you can use all the functions in that library
    • 67 |
  • That means: you get to take advantage of other people's experience!
    • 68 |
  • And... Save time!
    • 69 |
70 |
71 | 72 | 73 |
74 |

What is jQuery?

75 |

jQuery is a library of JavaScript functions.

76 |

It contains many functions to help simplify your programming, including:

77 |
    78 |
  • HTML element selection & manipulation
    • 79 |
  • CSS manipulation
    • 80 |
  • HTML events
    • 81 |
  • JavaScript effects and animations
    • 82 |
83 |
84 | 85 |
86 |

Why use jQuery?

87 |
    88 |
  • The most popular JavaScript library
    • 89 |
  • jQuery empowers you to "write less, do more."
    • 90 |
  • Great documentation and tutorials
    • 91 |
  • Used by nearly 20 million(!) websites
    • 92 |
93 |
94 | 95 |
96 |

jQuery: A Brief History

97 |
    98 |
  • jQuery was created by John Resig, a JavaScript tool developer at Mozilla.
    • 99 |
  • January 2006: John announced jQuery at BarCampNYC: BarCampNYC Wrap-up
    • 100 |
  • September 2007: A new user interface library is added to jQuery: jQuery UI: Interactions and Widgets
    • 101 |
  • September 2008: Microsoft and Nokia announce their support for jQuery
    • 102 |
  • December 2009: jQuery wins .Net Magazine's Award for Best Open Source Application
    • 103 |
104 |
105 | 106 | 107 |
108 |

Including jQuery

109 | Two ways to include jQuery on your page: 110 |
111 | Download the library, store it locally: 112 | 

113 |   <head>
114 |     <script type="text/javascript" src="jquery.js"></script>
115 |   </head>
116 |
117 |
118 |
119 | Include the the live library: 120 | 

121 |   <head>
122 |     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
123 |     </script>
124 |   </head>
125 |
126 |
127 |
128 | Note: live code can change! It's always best to download 129 |
130 |
131 | 132 | 133 |
134 |

jQuery Selectors

135 |

Remember document.getElementById() and documet.getElementsByTagName()?

136 |

jQuery selectors let you get elements by:

137 |
    138 |
  • Element name (div, p) 139 | 
    
140 |       var divs = $("div"); // All divs on page
141 |
    142 |
    • 143 |
  • ID name (#mainpicture, #results) 144 | 
    
145 | var img = $("#mainpicture"); //img with id mainpicture
146 |
    147 |
    • 148 |
  • Class name (.result, .picture) 149 | 
    
150 | var images = $(".picture"); //All images with class picture 
151 |
    152 |
    • 153 |
154 |
155 | 156 | 157 | 158 |
159 |

jQuery Actions

160 |
161 |

jQuery has hundreds of actions that can be performed on any element

162 |

All the actions are methods

163 |

As methods they are called with dot notation

164 |
165 |
166 | Action format 167 | 

168 |         $(selector).action();     
169 |
170 |
171 |
172 | 173 | 174 |
175 |

Updating attributes and css

176 |
177 | 

178 |   <img id="mainpicture" src="http://girldevelopit.com/assets/pink-logo.png">         
179 |
180 |
181 |
182 | Attribute get and set 183 | 

184 |   var img = $('#mainpicture');
185 |   img.attr('src');
186 |   img.attr('src', 'http://girldevelopit.com/assets/pink-logo.png');
187 |
188 |
189 |
190 | CSS property get and set 191 | 

192 |   var img = $('#mainpicture');
193 |   img.css('width');
194 |   img.css('width', '200px');
195 |
196 |
197 |
198 | 199 | 200 |
201 |

Updating values and html

202 |
203 | 

204 |   <div id = "results">Boo!</div>         
205 |
206 |
207 |
208 | Get and set html value 209 | 

210 |   var div = $('#results');
211 |   div.html();
212 |   div.html('New html!');
213 |
214 |
215 |
216 | 217 | 218 |
219 |

Append and Prepend

220 |
221 | 

222 |   <div id = "results">Boo!</div>         
223 |
224 |
225 |
226 | Append html 227 | 

228 |     var div = $('#results');
229 |     div.append('Additional html');
230 |
231 |
232 |
233 | Prepend html 234 | 

235 |     var div = $('#results');
236 |     div.prepend('Additional html (on top)');
237 |
238 |
239 |
240 | 241 |
242 |

Creating new element

243 |
244 | 

245 |     var newDiv = $('<div></div>');
246 |
247 |
248 |
249 | Seriously. That's it! 250 |
251 |
252 | 253 | 254 |
255 |

Let's Develop It!

256 |

Try to convert last week's DOM interaction into jQuery.

257 |

Don't forget to include jQuery in your html head!

258 |
259 | 260 | 261 |
262 |

Document Ready

263 |
264 |

Webpages take time to load

265 |

Almost always, you don't want the JavaScript to be called until the page is loaded

266 |
267 |
268 | Document ready is a method called when the page is loaded 269 | 

270 |         $(document).ready(function(){
271 |           
272 |         });
273 |
274 |
275 |
276 | Note: The function() inside is an "anonymous function". It has no name, but still performs like a function. 277 |
278 |
279 | 280 | 281 |
282 |

HTML events

283 |

Events occur on a webpage via user interaction

284 |

Common Events:

285 |
    286 |
  • mouseenter -- mouse goes inside an element
    • 287 |
  • mouseleave -- mouse leaves an element
    • 288 |
  • click -- mouse clicks an element
    • 289 |
  • Other events
    • 290 |
291 |
292 | 293 |
294 |

Handling events

295 | 

296 |   $(selector).mouseenter(function(){
297 |     //code when the mouse enters
298 |   })
299 |
300 |
301 | 

302 |   $('.box').mouseenter(function(){
303 |     $(this).css('background-color', 'purple')
304 |   })
305 |
306 |
307 |
308 |
The $(this) selector in jQuery refers to the element on whom the action was called.
309 |
Here $(this) is the $('.box') that the mouse entered. 310 |
311 |
312 | 313 |
314 |

Handling event examples

315 |
316 | 

317 |       $('.box').mouseenter(function(){
318 |         $(this).css('background-color', 'purple')
319 |       })
320 |
321 |
322 |
323 | 

324 |       $('.box').mouseleave(function(){
325 |         $(this).css('background-color', 'orange')
326 |       })
327 |
328 |
329 |
330 | 

331 |       $('.box').click(function(){
332 |         $(this).css('background-color', 'green')
333 |       })
334 |
335 |
336 |
337 | 338 |
339 |

Combining events

340 |

If you want multiple events to happen on the same element, you should use the bind method

341 |
342 | 

343 |       $('.box').bind({
344 |         click: function() {
345 |           $(this).css('background-color', 'green')
346 |         },
347 |         mouseenter: function() {
348 |           $(this).css('background-color', 'purple')
349 |         },
350 |         mouseleave: function(){
351 |           $(this).css('background-color', 'orange')
352 |         }
353 |       });
354 |
355 |
356 |
357 | 358 | 359 |
360 |

Let's Develop It

361 |
    362 |
  • Add a div to your html that is 100px by 200px
    • 363 |
  • Bind events to the div in your javascript file
    • 364 |
  • Don't forget to surround your events with document ready
    • 365 |
  • Try to change size, color, or event the html inside the div
    • 366 |
  • Bonus: change all the onclick events to jQuery click events
    • 367 |
368 |
369 | 370 | 371 |
372 |

HTML forms

373 |

HTML Forms allow users to enter information

374 |
375 | 

376 | <form id ="about-me">
377 |   <input type = "text" id = "name" placeholder = "Enter a name"/>
378 |   <label>Do you like popcorn</label>
379 |   Yes <input type = "radio" name = "popcorn" val = "yes"/>
380 |   No <input type = "radio" name = "popcorn" val = "no"/>
381 |   <label>Favorite Dinosaur</label>
382 |   <select id = "dinosaur">
383 |     <option value = "t-rex">Tyrannosaurus Rex</option>
384 |     <option value = "tri">Triceratops</option>
385 |     <option value = "stego">Stegosaurus</option>
386 |     <option value = "other">Other</option>
387 |   </select>
388 |   <input type = "submit" value = "Go!" style = "padding: 7px; font-size:1em"/>
389 | </form>
390 |
391 |
392 |
393 | 394 |
395 |

HTML forms

396 |

HTML Forms allow users to enter information

397 |
398 |
399 |
400 |
401 | Yes 402 | No
403 |
404 |
410 | 411 |
412 |
413 |
414 | 415 | 416 |
417 |

Values from Forms

418 |

You can use JavaScript to get values from a form

419 |
420 | 

421 |     $('#name').val();
422 |     $('select#dinosaur').val();
423 |     $('input:radio[name=popcorn]:checked').val();
424 |
425 |
426 |
427 | Or set values of a form 428 | 

429 |     $('#name').val('Mitch');
430 |     $('select#dinosaur').val('stego');
431 |     $('input:radio[name=popcorn]:checked').val('no');
432 |
433 |
434 |
435 | 436 |
437 |

Values from Forms

438 |

jQuery has an event for form submission

439 |
440 | 

441 |       $('#about-me').submit(function(event){
442 |             //code to execute after submission
443 |             return false;
444 |         });
445 |
446 | "return false" to prevent the form trying to submit to a server. 447 |
448 |
449 | 450 | 451 |
452 |

Let's Develop It

453 |
    454 |
  • Choose one (or all!) of your functions made so far
    • 455 |
  • i.e. lifetime supply, favorite things, or my friends
    • 456 |
  • Create a form to send dynamic data to the function when you click the button
    • 457 |
  • Don't forget to add parameters to your existing functions!

    458 |
  • This is a little harder than all the other exercises.
    • 459 |
  • Be creative!
    • 460 |
461 |
462 | 463 |
464 |

Questions?

465 |
? 466 |
467 |
468 |
469 |
470 |
471 | Javascript ~ Girl Develop It ~ 472 | Creative Commons License 473 |
474 |
475 |
476 | 477 | 478 | 479 | 480 | 481 | 505 | 506 | 507 | 508 | -------------------------------------------------------------------------------- /class2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 2 ~ Javascript ~ Girl Develop IT 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |

Beginning Javascript

43 |

Class 2

44 |
45 | 46 | 47 |
48 |

Welcome!

49 |
50 |

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

51 |

Some "rules"

52 |
    53 |
  • We are here for you!
    • 54 |
  • Every question is important
    • 55 |
  • Help each other
    • 56 |
  • Have fun
    • 57 |
58 |
59 |
60 | 61 | 62 |
63 |

Loops

64 |

Sometimes you want to go through a piece of code multiple times

65 |

Why?

66 |
    67 |
  • Showing a timer count down
    • 68 |
  • Displaying the results of a search
    • 69 |
  • Adding images to a slideshow
    • 70 |
71 |
72 | 73 |
74 |

The while loop

75 |

The while loop tells JS to repeat statements while a condition is true:

76 | 

 77 |       while (expression) {
 78 |         // statements to repeat
 79 |       }
 80 |
81 | 

 82 |       var x = 0;
 83 |       while (x < 5) {
 84 |         console.log(x);
 85 |         x++;
 86 |       }
 87 |
88 |
89 | Review: '++' means increment by 1! 90 |
91 |
92 |
Danger!!
93 |

What happens if we forget x++;?

94 |

The loop will never end!!

95 |
96 |
97 | 98 |
99 |

The for loop

100 |

The for loop is a safer way of looping

101 | 

102 |           for (initialize; condition; update) {
103 |             // statements to repeat
104 |           }
105 |
106 | 

107 |           for (var i = 0; i < 5; i++) {
108 |             console.log(i);
109 |           }
110 |
111 |
112 | Less danger of an infinite loop. All conditions are at the top! 113 |
114 |
115 | 116 | 117 |
118 |

Array

119 |

An array is a data-type that holds an ordered list of values, of any type:

120 |
121 | 

122 |           var arrayName = [element0, element1, ...];
123 |
124 |
125 |
126 | 

127 | var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
128 | var favoriteNumbers = [16, 27, 88];
129 | var luckyThings = ['Rainbows', 7, 'Horseshoes'];
130 |
131 |
132 |
133 | The length property reports the size of the array: 134 | 

135 |           console.log(rainbowColors.length);
136 |
137 |
138 |
139 | 140 |
141 |

Arrays -- returning values

142 |

You can access items with "bracket notation".

143 |
144 | The number inside the brackets is called an "index" 145 | 

146 |           var arrayItem = arrayName[indexNum];
147 |
148 |
149 |
150 | Arrays in JavaScript are "zero-indexed", which means we start counting from zero. 151 | 

152 |       var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
153 |       var firstColor = rainbowColors[0];
154 |       var lastColor = rainbowColors[6];
155 |
156 |
157 |
158 | 159 |
160 |

Arrays -- updating values

161 |
162 | You can also use bracket notation to change the item in an array: 163 | 

164 |         var awesomeAnimals = ['Corgis', 'Otters', 'Octopi'];
165 |         awesomeAnimals[0] = 'Bunnies';
166 |
167 |
168 |
169 | Or to add to an array: 170 | 

171 |           awesomeAnimals[4] = 'Corgis';
172 |
173 |
174 | 175 |
176 | You can also use the push method: 177 | 

178 |           awesomeAnimals.push('Ocelots');
179 |
180 |
181 |
182 | 183 |
184 |

Loops and Arrays

185 | Use a for loop to easily look at each item in an array: 186 | 

187 | var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
188 | for (var i = 0; i < rainbowColors.length; i++) {
189 |   console.log(rainbowColors[i]);
190 | }
191 |
192 |
193 | 194 | 195 |
196 |

Let's Develop It

197 |
    198 |
  • Add a new link to the exercise from last week
    • 199 |
  • Add an onclick to the link for a function called favoriteThings()
    • 200 |
  • Create a new function called favoriteThings() in the javascript file
    • 201 |
  • In the function, create an array and loop through the results
    • 202 |
  • Post the results in an alert "My favorite things are XX, YY, ZZ'
    • 203 |
  • Bonus -- add an 'and' in the sentence before the last item
    • 204 |
205 |
206 | 207 | 208 |
209 |

Objects

210 |

Objects are a data type that let us store a collection of properties and methods.

211 | 

212 |           var objectName = { 
213 |             propertyName: propertyValue,
214 |             propertyName: propertyValue,
215 |             ...
216 |           };
217 |
218 |
219 | 

220 |       var charlie = {
221 |         age: 8,
222 |         name: "Charlie Brown",
223 |         likes: ["baseball", "The little red-haired girl"],
224 |         pet: "Snoopy"
225 |       };
226 |
227 |
228 |
229 | 230 |
231 |

Objects -- returning values

232 |

Access values of "properties" using "dot notation":

233 |
234 | 

235 |       var charlie = {
236 |         age: 8,
237 |         name: "Charlie Brown",
238 |         likes: ["baseball", "The little red-haired girl"],
239 |         pet: "Snoopy"
240 |       };
241 |
242 |
243 |
244 | 

245 |           var pet = charlie.pet;
246 |
247 |
248 |
249 | 250 |
251 |

Objects -- returning values

252 |
253 | Or using "bracket notation" (like arrays): 254 | 

255 |           var name = charlie['name'];
256 |
257 |
258 |
259 | Non-existent properties will return undefined: 260 | 

261 |           var gender = charlie.gender
262 |
263 |
264 |
265 | 266 |
267 |

Objects -- changing values

268 |

Use dot or bracket notation with the assignment operator to change objects.

269 |
270 | Change existing properties: 271 | 

272 |           charlie.name = "Chuck";
273 |
274 |
275 |
276 | Or add new properties: 277 | 

278 |           charlie.gender = "male";
279 |
280 |
281 |
282 | You can also delete properties: 283 | 

284 |           delete charlie.gender;
285 |
286 |
287 |
288 | 289 |
290 |

Arrays of Objects

291 |

Arrays can hold objects too!

292 |
293 | 

294 |           var peanuts = [
295 |             {name: "Charlie Brown", 
296 |              pet: "Snoopy"},
297 |             {name: "Linus van Pelt",
298 |              pet: "Blue Blanket"}
299 |           ];
300 |
301 |
302 |
303 | That means we can use a for loop! 304 | 

305 |   for (var i = 0; i < peanuts.length; i++) {
306 |     var peanut = peanuts[i];
307 |     console.log(peanut.name + ' has a pet named ' + peanut.pet + '.');
308 |   }
309 |
310 |
311 |
312 | 313 |
314 |

Objects in functions

315 |

You can pass an object into a function as a parameter

316 | 

317 |         var peanut ={
318 |           name: "Charlie Brown", 
319 |           pet: "Snoopy"
320 |           };
321 |
322 |
323 | 

324 |   function describeCharacter(character){
325 |     console.log(character.name + ' has a pet named ' + character.pet + '.');
326 |   }
327 |
328 |
329 |
330 | 

331 |               describeCharacter(peanut);
332 |
333 |
334 |
335 | 336 | 337 |
338 |

Let's Develop It

339 |
    340 |
  • Add another link that calls the function myFriends() onclick
    • 341 |
  • Add a new function to the javascript myFriends
    • 342 |
  • In the function, create an array of friends objects, with their names and hair colors
    • 343 |
  • Use a for loop to go through each friend and describe them
    • 344 |
  • Alert the results
    • 345 |
  • Bonus -- make a separate functions that describe the friends
    • 346 |
347 |
348 | 349 | 350 |
351 |

DOM

352 |
    353 |
  • "Document Object Model"
    • 354 |
  • A way to interact with the HTML elements on a webpage
    • 355 |
  • Chrome and Firefox -- Right click --> Inspect Element
    • 356 |
357 | 358 |
359 | 360 |
361 |

DOM Interaction

362 |

On every webpage, the document object gives us ways of accessing and changing the DOM.

363 |

Every DOM "node" has properties. They are connected like a family tree.

364 |

Parent (parentNode), children (childNodes, firstChild), siblings (prevSibling, nextSibling)

365 |
366 | 

367 |   var bodyNode = document.body; // <body>
368 |   var htmlNode = document.body.parentNode; // <html>
369 |   for (var i = 0; i < document.body.childNodes.length; i++) {
370 |     var childNode = document.body.childNodes[i];
371 |     //could be <p>, <h1>, etc.
372 |     //any html element
373 |   }
374 |
375 |
376 |
377 | 378 |
379 |

DOM Interaction: Easier

380 |

Finding every element on the page by siblings and children is time consuming!

381 |

The document object also provides methods for finding DOM nodes without going one by one

382 |
383 | Find element by id 384 | 

385 | <img id="mainpicture" src="http://girldevelopit.com/assets/pink-logo.png">
386 |
387 | 

388 | var img = document.getElementById('mainpicture');            
389 |
390 |
391 |
392 | 393 |
394 |

DOM Interaction: Easier

395 |
396 | Find element by tag name (p, li, div, etc.) 397 | 

398 |           <li class="peanut">Charlie Brown</li>
399 |           <li class="peanut">Linus van Pelt</li>
400 |
401 | 

402 |       var listItems = document.getElementsByTagName('li');
403 |       for (var i =0; i < listItems.length; i++) {
404 |         var listItem = listItems[i];
405 |       }
406 |
407 |
408 |
409 | 410 | 411 |
412 |

Methods

413 |
    414 |
  • Methods are functions that are associated with an object
    • 415 |
  • The affect or return a value for a specific object
    • 416 |
  • Used with dot notation
    • 417 |
418 |
419 | Previously seen example: 420 | 

421 |             var img = document.getElementById('mainpicture');
422 |
423 |
424 |
425 | 426 | 427 |
428 |

DOM Nodes -- Attributes

429 |

We can use node methods to set and retrieve attributes

430 |
431 | getAttribute/setAttribute 432 | 

433 |  var img = document.getElementById('mainpicture');
434 |  img.getAttribute('src');
435 |  img.setAttribute('src', 'http://girldevelopit.com/assets/pink-logo.png');
436 |
437 | 438 | 

439 |  var img = document.getElementById('mainpicture');
440 |  img.getAttribute('class');
441 |  img.setAttribute('class', 'picture-class');
442 |
443 |
444 |
445 | 446 | 447 |
448 |

DOM innerHTML

449 |

Each DOM node has an innerHTML property:

450 |
451 | 

452 |         document.body.innerHTML;
453 |
454 |
455 |
456 | You can set innerHTML yourself to change the contents of the node: 457 | 

458 | document.body.innerHTML = '<p>I changed the whole page!</p>';
459 |
460 |
461 |
462 | You can also just add to the innerHTML instead of replace everything: 463 | 

464 | document.body.innerHTML += "...just adding this bit at the end of the page.";
465 |
466 |
467 |
468 | 469 | 470 |
471 |

DOM Modifying

472 |

The document object can create new nodes:

473 |
474 | 

475 |               document.createElement(tagName);
476 |               document.createTextNode(text);
477 |               document.appendChild();
478 |
479 |
480 |
481 | 

482 | var newImg = document.createElement('img');
483 | newImg.src = 'http://girldevelopit.com/assets/pink-logo.png';
484 | document.body.appendChild(newImg);
485 |
486 |
487 |
488 | 

489 | var newParagraph = document.createElement('p');
490 | var paragraphText = document.createTextNode('New Paragraph!');
491 | newParagraph.appendChild(paragraphText);
492 | document.body.appendChild(newParagraph);
493 |
494 |
495 | 496 |
497 | 498 | 499 |
500 |

Let's Develop It

501 |
    502 |
  • Put it all together
    • 503 |
  • Modify your existing three functions to add new elements to the screen instead of fire an alert
    • 504 |
  • Keep in mind how to find an element, how to append an element, and how to change the inner html of an element
    • 505 |
  • There are lots of possible solutions! Be creative!
    • 506 |
507 |
508 | 509 |
510 |

Questions?

511 |
? 512 |
513 |
514 |
515 |
516 |
517 | Javascript ~ Girl Develop It ~ 518 | Creative Commons License 519 |
520 |
521 |
522 | 523 | 524 | 525 | 526 | 527 | 551 | 552 | 553 | 554 | -------------------------------------------------------------------------------- /class1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Class 1 ~ Javascript ~ Girl Develop IT 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |

Beginning Javascript

43 |

Class 1

44 |
45 | 46 | 47 |
48 |

Welcome!

49 |
50 |

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

51 |

Some "rules"

52 |
    53 |
  • We are here for you!
    • 54 |
  • Every question is important
    • 55 |
  • Help each other
    • 56 |
  • Have fun
    • 57 |
58 |
59 |
60 | 61 |
62 |

Welcome!

63 |
64 |

Tell us about yourself.

65 |
    66 |
  • Who are you?
    • 67 |
  • What do you hope to get out of the class?
    • 68 |
  • What is your favorite dinosaur?
    • 69 |
70 |
71 |
72 | 73 | 74 | 75 |
76 |

Terms

77 |
    78 |
  • 79 |
    Web design
    80 |
    The process of planning, structuring and creating a website
    81 |
    • 82 |
  • 83 |
    Web development
    84 |
    The process of programming dynamic web applications
    85 |
    • 86 |
  • 87 |
    Front end
    88 |
    The outwardly visible elements of a website or application. 89 | (Javascript goes here!)
    90 |
    • 91 |
  • 92 |
    Back end
    93 |
    The inner workings and functionality of a website or application.
    94 |
    • 95 |
96 |
97 | 98 | 99 |
100 |

Clients and servers

101 |

How your computer accesses websites

102 | 103 |

JavaScript is "client side"

104 |

Your browser understands it!

105 |
106 | 107 | 108 |
109 |

Tools

110 | 128 |
129 | 130 | 131 |
132 |

History of JavaScript

133 |
    134 |
  • Developed by Brendan Eich of Netscape in 1995 (in 10 days!)
    • 135 |
  • Originally called Mocha and then LiveScript
    • 136 |
  • Java -- Actually JavaScript has nothing to do with the language Java. Java was just the cool kid in town at the time.
    • 137 |
  • Script -- Instructions that a computer can run one line at a time
    • 138 |
  • Standardized in 1997
    • 139 |
140 |
141 | 142 | 143 |
144 |

History of JavaScript

145 |
    146 |
  • "AJAX" -- a way to communicate to servers, coined in 2005
    • 147 |
  • jQuery -- a super-popular JavaScript Library debuted 2006
    • 148 |
  • Node.js -- a way for JavaScript to perform back end functions in 2010
    • 149 |
  • 2012 -- spec for JavaScript "nearly" finished
    • 150 |
151 |
152 | 153 | 154 |
155 |

What does JavaScript do?

156 | 163 |
164 | 165 | 166 |
167 |

Statements/Script

168 |
Each line in JavaScript is an instruction or a script
169 |
When the browser reads it, it "executes the script"
170 |
Try it out on repl.it
171 | 

172 |             console.log('Hello');
173 |
174 |
175 | 176 | 177 |
178 |

Variables

179 |
180 |

Variables hold content

181 |

Words, numbers, true/false, basically any kind of content

182 |
183 |
184 |

Declare a variable (Give it a name)

185 | 

186 |               var bananas;
187 |
188 |
189 |
190 |

Initialize variable (Give it a value)

191 | 

192 |               bananas = 5;
193 |
194 |
195 |
196 | 197 |
198 |

Variables

199 |
200 |

Declare and initialize at the same time!

201 | 

202 |               var bananas = 5;
203 |
204 |
205 |
206 |

Change value of variable

207 | 

208 |               bananas = 4;
209 |
210 |

(I ate a banana)

211 |
212 |
213 | 214 | 215 |
216 |

Data types

217 |
218 |

string -- a group of characters in quotes

219 | 

220 |               var fruit = "banana";
221 |
222 |
223 |
224 |

number -- (well, a number)

225 | 

226 |               var pi = 3.14;
227 |               var year = 2013;
228 |               var bananaTally = 200;
229 |
230 |
231 |
232 |

boolean -- yes or no

233 | 

234 |               var skyIsBlue = true;
235 |               var grassIsPink = false;
236 |
237 |
238 |
239 | 240 | 241 |
242 |

Data types

243 |
244 |

undefined -- no value yet

245 | 

246 |               var favoriteDinosaur;
247 |
248 |
249 |
250 |

null -- a purposely empty value (not the same as 0)

251 | 

252 |               var myTigersName = null;
253 |
254 |
255 |
256 | In nerd speak, JavaScript variables are "loosely typed." You don't know the kind of value a variable will have until you assign it. 257 |
258 |
259 | 260 | 261 |
262 |

Naming rules

263 |
264 |

Begin with a letter, _, or $

265 |

Contain letters, numbers, _ and $

266 | 

267 |               var hello;
268 |               var _hello;
269 |               var $hello;
270 |               var hello2;
271 |
272 |
273 |
274 |

Names are case sensitive

275 | 

276 |               var hello;
277 |               var Hello;
278 |               var heLLO;
279 |
280 |
281 |
282 | 283 | 284 |
285 |

Expressions

286 |
287 |

Math-y expressions!

288 | 

289 |           var bananas = 5;
290 |           var oranges = 2;
291 |           var fruit = bananas + oranges;
292 |
293 |
294 |
295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 |
SymbolMeaning
+Addition
-Subtraction
*Multiplication
/Division
%Modulus
++Increment
--Decrement
305 |
306 |
307 | 308 | 309 |
310 |

Expressions

311 |
312 |

Word-y expressions!

313 | 

314 | var name = "Mitch";
315 | var dinosaur = "Stegosaurus";
316 | var sentence = "My dinosaur is a " + dinosaur + ". Its name is " + name + ".";
317 |
318 |
319 |
320 | 321 | 322 |
323 |

Let's Develop It

324 |

Create a new html file

325 | 

326 | <html>
327 |   <head>
328 |     <title>My Site!</title>
329 |   </head>
330 |   <body>
331 |     My site!
332 |   </body>
333 | </html>
334 |
335 |
336 | 337 |
338 |

Let's Develop It

339 |

Create a new javascript file (a file that ends in .js)

340 |

Link it to your html file

341 | 

342 | <html>
343 |   <head>
344 |     <title>My Site!</title>
345 |     <script src="javascript.js"></script>
346 |   </head>
347 |   <body>
348 |     My site!
349 |   </body>
350 | </html>
351 |
352 |
353 | 354 |
355 |

Let's Develop It

356 |

Lifetime supply calculator

357 |

Ever wonder how much a lifetime supply of your favorite snack or drink is?

358 |
    359 |
  • Store your age in a variable
    • 360 |
  • Store your maximum age in a variable
    • 361 |
  • Store an estimated amount per day in a variable
    • 362 |
  • Calculate how many you would eat/drink for the rest of your life.
    • 363 |
  • Output the result in an alert(see below) like so: "You will need NN to last you until your old age of NN"
    • 364 |
365 | 366 | 

367 |   alert(answer);
368 | 
369 |
370 | 371 |
372 | 373 | 374 |
375 |

The if statement

376 |

Javascript can run through code based on conditions

377 |
378 | 

379 |           if (condition here){
380 |             // statement to execute
381 |           }
382 |
383 |
384 |
385 | 

386 |           var bananas = 1;
387 |           if (bananas < 2){
388 |             console.log("You should buy more bananas!")
389 |           }
390 |
391 |
392 |
393 | Note: you can write comments that only you, not the browser reads 394 | 

395 |             // comment on one line
396 |             /* comment on 
397 |               multiple lines
398 |               */
399 |
400 |
401 |
402 | 403 | 404 |
405 |

Comparisons

406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 |
=== Equality
!== Inequality
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to
414 |

Don't confuse = (assign a value)
with === (compare a value)

415 |
416 | 417 | 418 |
419 |

Logic

420 | 421 | 422 | 423 | 424 |
&& AND
|| OR
! NOT
425 |
426 | 

427 |         var bananas = 5;
428 |         var oranges = 2;
429 |         if (bananas > 3 && oranges > 3){
430 |           console.log('Eat fruit!');
431 |         }
432 |         if (bananas < 2 || oranges < 2){
433 |           console.log('Buy fruit!');
434 |         }
435 |         if (!(bananas >= 0)){
436 |           console.log('How do you have negative bananas?');
437 |         }
438 |
439 |
440 |
441 | 442 | 443 |
444 |

If/Else Statement

445 |

You can use else to perform an alternative action if the "if" fails

446 | 

447 |           var bananas = 5;
448 |           if (bananas > 3){
449 |             console.log('Eat a banana!');
450 |           } else {
451 |             console.log('Buy a banana!');
452 |           }
453 |
454 |
455 | 456 |
457 |

If/Else Statement

458 |

You can use else if to have multiple choices

459 | 

460 | var age = 20;
461 | if (age >= 35) {
462 |   console.log('You can vote AND hold any place in government!');
463 | } else if (age >= 25) {
464 |   console.log('You can vote AND run for the Senate!');
465 | } else if (age >= 18) {
466 |   console.log('You can vote!');
467 | } else {
468 |   console.log('You have no voice in government (yet)!');
469 | }
470 |
471 |
472 | 473 | 474 |
475 |

Let's Develop It!

476 |

Add an if/else statement to our lifetime supply calculator so that if the lifetime supply is greater than 40,000, you say "Wow! That's a lot!" otherwise, say "You seem pretty reasonable!"

477 |
478 | 479 | 480 |
481 |

Functions

482 |

Functions are re-usable collections of statements

483 |
484 | Declare a function 485 | 

486 |             function sayHi(){
487 |               console.log('Hi!');
488 |             }
489 |
490 |
491 |
492 | Call the function 493 | 

494 |             sayHi();
495 |
496 |
497 |
498 | 499 | 500 |
501 |

Arguments

502 |

Functions can take named arguments

503 |
504 | 

505 |             function sayHi(name){
506 |               console.log('Hi' + name + '!');
507 |             }
508 |             sayHi('Mitch, the dinosaur');
509 |             sayHi('Harold, the hippo');
510 |             
511 |             var name = 'Pip, the mouse';
512 |             sayHi(name);
513 |
514 |
515 |
516 | 517 | 518 |
519 |

Arguments

520 |

Functions can take MULTIPLE named arguments

521 |
522 | 

523 |             function addNumbers(num1, num2){
524 |               var result = num1 + num2;
525 |               console.log(result);
526 |             }
527 |           
528 |             addNumbers(5, 6);
529 |             
530 |             var number1 = 12;
531 |             var number2 = 15;
532 |             addNumbers(number1, number2);
533 |
534 |
535 |
536 | 537 | 538 |
539 |

Return values

540 |

Functions can return a value

541 |
542 | 

543 |     function addNumbers(num1, num2){
544 |       var result = num1 + num2;
545 |       return result; //Anything after this line won't be read
546 |     }
547 |     var sum  = addNumbers(5, 6);
548 |
549 |
550 |
551 | 552 | 553 |
554 |

Variable Scope

555 |

JavaScript variables have "function scope." They are visible in the function where they are defined

556 |
557 | A variable with "local" scope: 558 | 

559 |   function addNumbers(num1, num2){
560 |     var result = num1 + num2;
561 |     return result; //Anything after this line won't be read
562 |   }
563 |   var sum  = addNumbers(5, 6);
564 |   console.log(result); //will return undefined because result only exists inside the addNumbers function
565 |
566 |
567 |
568 | 569 | 570 |
571 |

Variable Scope

572 |

JavaScript variables have "function scope." They are visible in the function where they are defined

573 |
574 | A variable with "global" scope: 575 | 

576 |    var result;
577 |     function addNumbers(num1, num2){
578 |       result = num1 + num2;
579 |       return result; //Anything after this line won't be read
580 |     }
581 |     var sum  = addNumbers(5, 6);
582 |     console.log(result); //will return 11 because the variable was defined outside the function
583 |
584 |
585 |
586 | 587 | 588 |
589 |

Let's Develop It

590 |
591 |

Wrap the lifetime supply calculator in a function called calculate()

592 |

Add a link to the html that calls the function when it is clicked

593 | 

594 |  <a href = "#" onclick="calculate()">
595 |  Calculate life time supply
596 |  </a>
597 |
598 |
599 |
600 | 601 | 602 |
603 |

Questions?

604 |
? 605 |
606 |
607 |
608 |
609 |
610 | Javascript ~ Girl Develop It ~ 611 | Creative Commons License 612 |
613 |
614 |
615 | 616 | 617 | 618 | 619 | 620 | 644 | 645 | 646 | 647 | --------------------------------------------------------------------------------