Variables Assignment And Operators

1,316 views

Published on

Introduction to variables, assignment and operators in JavaScript.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Variables Assignment And Operators

  1. 1. variables, assignment and operators Thursday, September 10, 2009
  2. 2. variables containers to store information that can be used later http://www.w3schools.com/JS/js_variables.asp Thursday, September 10, 2009
  3. 3. Remember Algebra? 5=x+3 Thursday, September 10, 2009
  4. 4. var var a; var age = 5; var name = 'John Nunemaker'; Thursday, September 10, 2009
  5. 5. declaring variables only need var once, but multiple times won’t hurt you // good var age = 15; age // 15 age = 16; age // 16 age = 17; age // 17 // no point var age = 15; age // 15 var age = 16; age // 16 var age = 17; age // 17 Thursday, September 10, 2009
  6. 6. undeclared variables automatically declare, but don’t do this x = 10; foo = 'bar'; x // 10 foo // "bar" Thursday, September 10, 2009
  7. 7. variables can store anything var age = 15; var name = 'John'; var colors = ['red', 'green', 'blue']; var person = {name:'John', age:15}; var cool = true; var foo = function() { return 'bar'; } Thursday, September 10, 2009
  8. 8. naming variables case sensitive var car = 'Ford'; var cAr = 'Toyota'; car // "Ford" cAr // "Toyota" Thursday, September 10, 2009
  9. 9. naming variables must begin with letter or underscore var car; // good! var car9; // good! var _car; // good! var 9car; // bad! SyntaxError Thursday, September 10, 2009
  10. 10. naming variables can be short or descriptive var x; // short var field; // descriptive Thursday, September 10, 2009
  11. 11. naming variables separate words with underscores var section_field_name; // good idea var sectionfieldname; // bad idea Thursday, September 10, 2009
  12. 12. naming variables general formatting rules for easier reading var age = 15; // good idea var age=15; // bad idea var age = 15; // bad idea Thursday, September 10, 2009
  13. 13. (pause for review and applause) Thursday, September 10, 2009
  14. 14. good or bad? var section; Thursday, September 10, 2009
  15. 15. good or bad? var section; Thursday, September 10, 2009
  16. 16. good or bad? var 10thingsihateaboutyou; Thursday, September 10, 2009
  17. 17. good or bad? var 10thingsihateaboutyou; variables cannot start with numbers and should have underscores between words Thursday, September 10, 2009
  18. 18. good or bad? var fieldname; Thursday, September 10, 2009
  19. 19. good or bad? var fieldname; Should be: var field_name; Thursday, September 10, 2009
  20. 20. good or bad? var section_field_name; Thursday, September 10, 2009
  21. 21. good or bad? var section_field_name; Thursday, September 10, 2009
  22. 22. operators assignment and comparison http://www.w3schools.com/JS/js_operators.asp Thursday, September 10, 2009
  23. 23. arithmetic operators operator meaning example result + addition 5+5 10 - subtraction 5-4 1 * multiplication 2*5 10 / division 1/4 0.25 % modulus 5%4 1 ++ increment x++ x+1 -- decrement x-- x-1 Thursday, September 10, 2009
  24. 24. assignment operators operator example result same as = var a = 5; 5 += a += 5; 10 a = a + 5; -= a -= 5; 0 a = a - 5; *= a *= 2; 10 a = a * 2; /= a /= 2; 2.5 a = a / 2; %= a %= 4; 1 a = a % 4; Thursday, September 10, 2009
  25. 25. comparison operators http://www.w3schools.com/JS/js_comparisons.asp operator meaning example result == equal to value 5 == 5 TRUE equal to value === true === 1 FALSE and type != not equal 5 != 4 TRUE > greater than 5>4 TRUE < less than 5<4 FALSE greater than >= 5 >= 5 TRUE or equal to less than <= 5 <= 5 TRUE or equal to Thursday, September 10, 2009
  26. 26. logical operators operator meaning example result && and 5 == 5 && 4 != 6 TRUE || or 4 == 6 || 5 == 5 TRUE ! not !(5 == 4) TRUE Thursday, September 10, 2009
  27. 27. putting it all together Thursday, September 10, 2009
  28. 28. var a = 5; a += 3; a Thursday, September 10, 2009
  29. 29. var a = 5; a += 3; a // 8 Thursday, September 10, 2009
  30. 30. var a = 2; var b = 5; a * b; Thursday, September 10, 2009
  31. 31. var a = 2; var b = 5; a * b; // 10 Thursday, September 10, 2009
  32. 32. var a = 2; var b = 3; var c = a + b; var d = c * a; d Thursday, September 10, 2009
  33. 33. var a = 2; var b = 3; var c = a + b; var d = c * a; d // 10 Thursday, September 10, 2009
  34. 34. var blue = 'blue'; var red = 'red'; var colors = [blue, red]; colors Thursday, September 10, 2009
  35. 35. var blue = 'blue'; var red = 'red'; var colors = [blue, red]; colors // ["blue","red"] Thursday, September 10, 2009
  36. 36. var a = 5; a = 6; a = 7; a -= 2; a Thursday, September 10, 2009
  37. 37. var a = 5; a = 6; a = 7; a -= 2; a // 5 Thursday, September 10, 2009
  38. 38. var person = {name:'Peyton Manning'} person.name Thursday, September 10, 2009
  39. 39. var person = {name:'Peyton Manning'} person.name // "Peyton Manning" Thursday, September 10, 2009
  40. 40. var tv_shows = ['Wipeout', 'How I Met Your Mother', 'Big Bang Theory']; tv_shows[1] == 'How I Met Your Mother' Thursday, September 10, 2009
  41. 41. var tv_shows = ['Wipeout', 'How I Met Your Mother', 'Big Bang Theory']; tv_shows[1] == 'How I Met Your Mother' // true Thursday, September 10, 2009
  42. 42. var a = 5; var b = 4; var check = a == 5 && b == 3 check Thursday, September 10, 2009
  43. 43. var a = 5; var b = 4; var check = a == 5 && b == 3 check // false Thursday, September 10, 2009
  44. 44. var a = 5; var b = 4; var check = a == 3 || b > 3 check Thursday, September 10, 2009
  45. 45. var a = 5; var b = 4; var check = a == 3 || b > 3 check // true Thursday, September 10, 2009
  46. 46. var a = 5 - 1; a > 4 Thursday, September 10, 2009
  47. 47. var a = 5 - 1; a > 4 // false Thursday, September 10, 2009
  48. 48. time to program + - * / % = == === != && || ! += -= /= *= http://www.w3schools.com/JS/tryit.asp?filename=tryjs_intro Thursday, September 10, 2009

×