Week 6   java script loops
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Week 6 java script loops

on

  • 349 views

 

Statistics

Views

Total Views
349
Views on SlideShare
349
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Example: brush teethDon’t have to list out what you do everytime
  • var elms = document.getElementsByName("checkableitems[]"); for (i = 0; i < elms.length; i++) { if (elms[i].type === "checkbox") { elms[i].click(); } }

Week 6 java script loops Presentation Transcript

  • 1. Speaking in CodeIntro to JavaScriptLoops!Brian LeeProfessor Liel Leibovitz
  • 2. Speaking in CodeReview – Functions• Easy way to reuse code• Define a set of statements through one variable var divideByThree = function (number) { var val = number / 3; console.log(val); };
  • 3. Speaking in CodeReview – Functions: Name• The name of the function that will execute var divideByThree = function (number) { var val = number / 3; console.log(val); };• Run the function by calling its name divideByThree(9);
  • 4. Speaking in CodeReview – Functions: Parameters• Parameters are passed in for the function to use• Similar to a variable in math f(x) = x2 + 2• Calling function with x = 3 f(3) = 32 + 2 >> 11
  • 5. Speaking in CodeReview – Functions: Parameters• In JavaScript passing in 3: myFunc(3); var myFunc = function (number) { var val = Math.pow(number, 2) + 2; console.log(val); }; var myFunc = function (3) { var val = Math.pow(3, 2) + 2; console.log(val); };
  • 6. Speaking in CodeReview – Functions: Return Values• What good are functions if all you do is print• A functions return value is similar to a variable var addThree = function (number) { return number + 3; }; var count = addThree(4); console.log(count) >> 7
  • 7. Speaking in CodeReview – Functions: Return Values• You can assign to a variable or use it right away if(addThree(4) > 10) { console.log(“We’re over 10!”); } else { console.log(addThree(4) + “ is not over 10”); } >> “7 is not over 10”
  • 8. Speaking in CodeReview – Functions: Scope (Local)• Where you define your variables matter• Variables defined inside a function ONLY exist there var multiplyThree = function (number) { var multiplier = 3; return multiplier * number; }; console.log(multiplier) >> multiplier is not defined
  • 9. Speaking in CodeReview – Functions: Scope (Global)• Where you define your variables matter• Variables defined outside a function exist globally var multiplier = 3; var multiplyThree = function (number) { return multiplier * number; }; console.log(multiplier) >> 3
  • 10. Speaking in CodeFunctions in other languages• JavaScript var square = function (number) { return number * number; };• Ruby (method) def square(number) return number * number end
  • 11. Speaking in CodeIntro: Loops• Execute same line(s) of code over and over• Fundamental concept in programming• Can be trickier with JavaScript
  • 12. Speaking in CodeIntro: For Loops• Basic Syntax for(var i = 0; i < 10; i++) { console.log(i); }• Initialization: define variable useful to loop• Conditional: keep looping while this is true – is “i” currently less than 10?• Increment: executed at the end of the loop
  • 13. Speaking in CodeIntro: Loop Mechanics• In what order does this loop think? for(var i = 0; i < 10; i++) { console.log(i); }1. Initialization2. Check Conditional: Stop loop if false3. Run Code4. Run Increment: i++ i=i+15. Step 2
  • 14. Speaking in CodeInfinite Loops• Loops with no exit strategy• Will continue to execute until crashing
  • 15. Speaking in CodeInfinite Loops• Why would this loop not work? for(var i = 0; i < 10; i--) { console.log(i); }`
  • 16. Speaking in CodeInfinite Loops• Why would this loop not work? for(var i = 0; i < 10; i--) { console.log(i); }` >> -1 >> -2 >> -3 >> -4 … >> -467389146129
  • 17. Speaking in CodeArrays
  • 18. Speaking in CodeArrays• Collection of items• Like a box (even looks like it) []• Each item has a designated spot var doughnuts= [ , , , ]
  • 19. Speaking in CodeArrays: Accessing Elements• Elements: items in arrays• Index: location of element in array – Starts from 0 not 1 var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +• How to access the value “Boston Creme”
  • 20. Speaking in CodeArrays: Accessing Elements• Elements: items in arrays• Index: location of element in array – Starts from 0 not 1 var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ + 0 1 2• How to access the value “Boston Creme” doughnuts[0]
  • 21. Speaking in CodeLoops and Arrays• Use loops to write less code var doughnuts = *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ ] for(var i = 0; i < doughnuts.length; i++) { console.log(“This box has “ + doughnuts*i]) } >> “This box has Boston Crème” >> “This box has Glazed” >> “This box has Old Fashioned”
  • 22. Speaking in CodeTry it yourself! http://bit.ly/jsloopshttp://jsbin.com
  • 23. Speaking in CodeReal World Example• Facebook: – Ever wanted to select all friends when sending out invites? var elms = document.getElementsByName("checkableitems[]"); for (i = 0; i < elms.length; i++) { if (elms[i].type === "checkbox”) , elms[i].click(); } }