JavaScript for PHP Developers

2,595
-1

Published on

Code: http://github.com/funkatron/JSforPHPDevs

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,595
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript for PHP Developers

  1. 1. JavaScript for PHP Developers Ed Finkler @funkatron coj@funkatron.com May 18, 2010 #tekX #js4php http://joind.in/1564 Wednesday, May 19, 2010
  2. 2. What is this? 2 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  3. 3. A practical overview of JS for the PHP developer Stop c+p'ing, start writing 3 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  4. 4. NOT CS-oriented I'm too dumb for that 4 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  5. 5. My experiences and best practices FWIW 5 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  6. 6. JavaScript dev is opinionated JS devs are kind of dickheads 6 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  7. 7. History of JavaScript 7 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  8. 8. Brendan Eich 8 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  9. 9. "Mocha" 9 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  10. 10. "LiveScript" 10 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  11. 11. "JavaScript" Seemed like a good idea at the time http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704 11 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  12. 12. ECMAScript Yeesh 12 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  13. 13. Core JavaScript 13 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  14. 14. Baseline is JS 1.5 aka ECMAScript 3, circa 1999 14 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  15. 15. Dynamically typed Hey, I know that! 15 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  16. 16. Object-based 16 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  17. 17. Object-oriented But not how you think 17 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  18. 18. Functional First class, baby! 18 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  19. 19. Malleable Like giving clay to a monkey 19 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  20. 20. Core is pretty darn small You mean I don't have to memorize 4,500 function names? 20 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  21. 21. Core JS Core Objects Core Global Functions Boolean decodeURI Number decodeURIComponent String encodeURI Array encodeURIComponent Object eval Function isFinite RegExp isNaN Date parseFloat parseInt 21 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  22. 22. What's missing? All the cool stuff! 22 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  23. 23. File i/o 23 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  24. 24. Networking 24 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  25. 25. DB APIs 25 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  26. 26. DOM Yep, the DOM is not part of JavaScript 26 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  27. 27. So what's it good for? Please don't leave yet. 27 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  28. 28. So what's it good for? Please don't leave yet. 28 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  29. 29. Asynchronous actions What? 29 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  30. 30. Like GUI stuff Oh! 30 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  31. 31. Browsers! 31 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  32. 32. Web Runtime Platforms! 32 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  33. 33. Widget engines! Dear God 33 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  34. 34. Server-side platforms 34 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  35. 35. Node.js http://nodejs.org/ 35 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  36. 36. Narwhal http://narwhaljs.org/ 36 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  37. 37. v8cgi http://code.google.com/p/v8cgi/ 37 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  38. 38. SSJS isn't terribly mature Don't quit your day job 38 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  39. 39. Syntax 39 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  40. 40. C/Java-like Like PHP! 40 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  41. 41. Variable names don't start with '$' But they can. 41 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  42. 42. Concatenation with '+' Not dot. 42 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  43. 43. Dot for members. Or [] Not '->'. You will screw this up. 43 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  44. 44. Always case-sensitive You will also screw this up. 44 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  45. 45. Semicolons are optional But you had better always use them 45 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  46. 46. CODE TIME Semicolons! 46 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  47. 47. Data Types "Primitives" 47 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  48. 48. Numbers Integers and floats 48 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  49. 49. Booleans Truthy 49 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  50. 50. Strings 50 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  51. 51. null Not NULL, not Null. 51 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  52. 52. undefined Declared, but no value set. Not the same as null 52 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  53. 53. That's it. 53 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  54. 54. Other elements 54 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  55. 55. Objects MDC: "Named containers for values" 55 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  56. 56. Arrays, Date, RegExp All objects 56 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  57. 57. Functions MDC: "Procedures your application can perform" 57 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  58. 58. Scope Hang on! 58 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  59. 59. More bleed than PHP 59 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  60. 60. Globals automatically available No need for global declaration 60 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  61. 61. Declaring variables With or without 61 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  62. 62. With var scope maintained 62 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  63. 63. Without var Oops! Automatically global 63 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  64. 64. Globals are properties of global object window in browsers 64 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  65. 65. CODE TIME globals! 65 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  66. 66. Closures This is awesome 66 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  67. 67. Using a var from outside function Anything within context of function declaration is fair game 67 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  68. 68. CODE TIME Closures 68 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  69. 69. Literals Literally 69 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  70. 70. Numbers Right. 70 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  71. 71. Booleans Yep. 71 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  72. 72. RegExp Hmmm. 72 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  73. 73. ['a','r','r','a','y','s']; Hey there. 73 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  74. 74. {object:"literals"}; Oh snap! 74 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  75. 75. CODE TIME Literals 75 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  76. 76. Operators 76 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  77. 77. Mostly like PHP + , = == === < > ! && || 77 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  78. 78. this 78 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  79. 79. new Remember, no classes in JS 79 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  80. 80. in Does this key exist? 80 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  81. 81. instanceof "is X of type Y?" 81 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  82. 82. typeof Returns string of core type 82 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  83. 83. typeof returns typeof {} "object" typeof function() {} "function" typeof new Function(); "function" typeof true "boolean" typeof new Date(); "object" // not "date"; use instanceof typeof [1,2,3] "object" // not "array" typeof NaN "number" typeof null "object" typeof undefined "undefined" 83 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  84. 84. Type conversion 84 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  85. 85. parseInt(val, [radix]) Radix is optional, but Douglas Crockford will hate you 85 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  86. 86. parseFloat(val) Like parseInt, returns NaN if cannot convert 86 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  87. 87. String(obj) 87 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  88. 88. Number(obj) 88 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  89. 89. Boolean(obj) http://jibbering.com/faq/notes/type-conversion/ 89 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  90. 90. Functions 90 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  91. 91. In the procedural tradition 91 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  92. 92. As objects 92 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  93. 93. As constructors 93 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  94. 94. Function arguments An array, kind of 94 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  95. 95. CODE TIME Fun with functions 95 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  96. 96. Objects 96 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  97. 97. As hashes Or associative arrays 97 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  98. 98. As static modules 98 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  99. 99. CODE TIME Objects as modules 99 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  100. 100. As instance-able objects Not a word 100 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  101. 101. No classes Just make the object and have a constructor func 101 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  102. 102. No visibility levels No public, private, protected 102 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  103. 103. Prototypes & inheritance 103 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  104. 104. Every object has a prototype 104 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  105. 105. Prototype provides attributes of object 105 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  106. 106. Modifying prototype changes all objects that use it 106 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  107. 107. Prototype has .constructor points to constructor function of object 107 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  108. 108. CODE TIME Prototypes and inheritance 108 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  109. 109. Dates Kinda suck in JS 109 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  110. 110. eval() Almost a necessary evil 110 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  111. 111. Malleability That again 111 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  112. 112. BREAK TIME Cookies??? 112 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  113. 113. JS in the browser 113 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  114. 114. Execution model Non-sequential, long-running 114 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  115. 115. Single threaded 115 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  116. 116. Browser compatibility Oh the humanity 116 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  117. 117. DOM APIs Woo wee! 117 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  118. 118. Elements and events Words and pictures and movin' stuff! 118 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  119. 119. These are terrible Trust me 119 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  120. 120. I'm not going to teach you these They suck 120 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  121. 121. Just use jQuery Basically fixes everything 121 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  122. 122. CODE TIME DOM manipulation and events 122 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  123. 123. HTTP interaction 123 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  124. 124. JSON is love 124 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  125. 125. Use JSON2.js 125 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  126. 126. Newer browsers have native implementations 126 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  127. 127. CODE TIME Web APIs, woooooooooo! 127 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  128. 128. Resources 128 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  129. 129. Resources:Code • SpazCore http://github.com/funkatron/spazcore • Underscore.js http://documentcloud.github.com/underscore/ • http://delicious.com/funka7ron/javascript 129 <Name of Talk> - <Who> - <Where> - <When> Wednesday, May 19, 2010
  130. 130. Resources:Web • Mozilla Dev Center: Code JavaScript Guide https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide • Mozilla Dev Center: Core JavaScript Reference https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference • Eloquent JavaScript http://eloquentjavascript.net/ • comp.lang.javascript FAQ http://jibbering.com/faq/ • Nicholas C. Zakas' Blog http://www.nczonline.net/ • John Resig's Blog http://ejohn.org/ • http://wtfjs.com/ 130 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  131. 131. Resources:Books • JavaScript: The Definitive Guide David Flanagan • JavaScript: The Good Parts Douglas Crockford • High-Performance JavaScript Various 131 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  132. 132. References 132 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  133. 133. References • Mozilla Dev Center: Core JavaScript Guide • Eloquent JavaScript 133 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×