Week 5 java script functions

368 views
310 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
368
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Example, if some condition then this else that
  • Example, refreshing pages. Javascript is just one language to learn programming
  • Example, refreshing pages. Javascript is just one language to learn programming
  • Do you remember from week 1?
  • Week 5 java script functions

    1. 1. Speaking in CodeIntro to JavaScriptFunctions!Brian LeeProfessor Liel Leibovitz
    2. 2. Speaking in CodeLogistics• Spring Break – no class next week
    3. 3. Speaking in Code
    4. 4. Speaking in CodeBig Picture: HTML/CSS vs. JavaScript• HTML/CSS are computer languages that define content, structure, and how things look• JavaScript is a programming language where you give the computer instructions – Set of directions such as for recipes
    5. 5. Speaking in CodeBig Picture: Programming• Learning JavaScript – programming language• Widely-applicable concepts
    6. 6. Speaking in CodeProgramming Language Similarities• JavaScript if (x < 10) { console.log("x is less than 10!"); }• Ruby if x < 10 puts "x is less than 10!"• Python if x < 10: print "x is less than 10!"
    7. 7. Speaking in CodeProgramming Language Similarities• JavaScript if (x < 10) { console.log("x is less than 10!"); }• Java if(x < 10) { System.out.println("x is less than 10!"); }
    8. 8. Speaking in CodeBig Picture: What we’re learning now• Using JavaScript to tell browser what to do• “Front-end” language
    9. 9. Speaking in CodeBig Picture: How it all fits in (HTML)<!DOCTYPE html><html> <head> <title>HTML title</title> </head> <body> <p>paragraph</p> </body></html>
    10. 10. Speaking in CodeBig Picture: How it all fits in (CSS)<!DOCTYPE html><html> <head> <title>HTML title</title> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> </head> <body> <p id=“color-me”>paragraph</p> </body></html>
    11. 11. Speaking in CodeBig Picture: How it all fits in (JavaScript)<!DOCTYPE html><html> <head> <title>HTML title</title> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <p id=“color-me”>paragraph</p> </body></html>
    12. 12. Speaking in CodeJavaScript• Each line is read one at a time• Comments // These won’t be read in JavaScript• Most lines are ended with ; – Like a period at the end of a sentence
    13. 13. Speaking in CodeJavaScript• Print to the screen (console) console.log(‘Hello World’); console.log(9482301);• Try it in your browser console – Right-click -> Inspect Element -> Console
    14. 14. Speaking in CodeRecap: Types• Everything is associated with a type• Numbers 254• Strings “Hi there!”• Booleans true false
    15. 15. Speaking in CodeRecap: Types – Strings• You can concatenate strings “Brian” + “ Lee” >> Brian Lee “1” + “ 1” >> “11”
    16. 16. Speaking in CodeRecap: Conditionals• Arithmetic expressions compute to a Number 4 * 5; >> 20• Conditionals compute to a Boolean 20 > 15; >> true 13 >= 15; >> false
    17. 17. Speaking in CodeRecap: Conditionals• Operators > < >= <= ===
    18. 18. Speaking in CodeRecap if statements• Execute code based on a set of conditions• English: If you are older than 21, then you can drink• JavaScript: (try in JSbin) var i = 18; if ( i >= 21) { console.log(“you can drink!”); }else { console.log(“better wait another year”); }
    19. 19. Speaking in CodeVariables• Very similar to variables in algebra• Begin with var to instantiate var firstName = “Brian” var lastName = “Lee” console.log(firstName + “ “ + lastName) >> “Brian Lee”• Common practice to camelCase
    20. 20. Speaking in CodeVariables• Should be lowercase first (otherwise Objects)• Cannot start with numbers, no spaces var 1stName = “Brian” var LastName = “Lee”
    21. 21. Speaking in CodeCommon Gotchas• Important: var taxRate = 1.089; var tax rate = 1.089; //error no spaces between variable names vartaxRate = 1.089; //error need space between var and variable name• Not as important var taxRate = 1.089; var taxRate = 1.089; if(10 > 5) { console.log("Hello!"); }
    22. 22. Speaking in CodeIndenting• Similar to the principals for HTML• Makes it easier for you!• No set standard, but just stick to it! var i = 18; if (i >= 21) { console.log(‘you can drink!’); }else { console.log(‘better wait another year’); }
    23. 23. Speaking in CodeGotcha’s: Read line by line• This won’t work: var cost = 24.99; var total = cost * taxRate; var taxRate = 1.089;
    24. 24. Speaking in CodeIntro to Functions: Name• No need to repeat same code• Set of instructions var drinking = function(age) { if (age >= 21) { console.log(‘you can drink!’); }else { console.log(‘better wait another year’); } }; drinking(21);
    25. 25. Speaking in CodeIntro to Functions: Syntax• No need to repeat same code• Set of instructions var drinking = function(age) { if (age >= 21) { console.log(‘you can drink!’); }else { console.log(‘better wait another year’); } }; drinking(21);
    26. 26. Speaking in CodeIntro to Functions: Parameters• No need to repeat same code• Set of instructions var drinking = function(age) { if (age >= 21) { console.log(‘you can drink!’); }else { console.log(‘better wait another year’); } }; drinking(21);
    27. 27. Speaking in Code
    28. 28. Speaking in CodeFunctions === Microwave Buttons?• Each button has a purpose
    29. 29. Speaking in CodeFunctions === Microwave Buttons?• Each button has a purpose• Same as a function var minutes = 5 var addTime = function(minutes, additionalMinutes) { minutes = minutes + additionalMinutes; return minutes; }; addTime(minutes, 10); >> 15
    30. 30. Speaking in CodeTry it yourselfhttp://bit.ly/jsfunctionshttp://jsbin.com
    31. 31. Speaking in CodeSync-Up!• Using return var minutes = 5 var addTime= function(minutes, additionalMinutes) { minutes = minutes + additionalMinutes; return minutes; }; console.log(addTime(minutes, 10) + 2); >> 17
    32. 32. Speaking in CodeSync-Up!• Using return var minutes = 5 var addTime= function(minutes, additionalMinutes) { minutes = minutes + additionalMinutes; return minutes; }; console.log(15 + 2); >> 17
    33. 33. Speaking in CodeSync-Up!• Calling functions: Name var drinking = function(age) { if (age >= 21) { console.log(‘you can drink!’); }else { console.log(‘better wait another year’); } }; drinking(21); drinking(18); drinking(25);

    ×