JavaScript for PHP Developers

6,050 views
5,938 views

Published on

Code is available here: http://github.com/funkatron/JSforPHPDevs

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
6,050
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
224
Comments
1
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 November 1, 2010 #zendcon #js4php http://joind.in/2289
  2. 2. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Goodsie.com 2 Invitation code: zendcon
  3. 3. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 What is this? 3
  4. 4. Stop c+p'ing, start writing JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 A practical overview of JS for the PHP developer 4
  5. 5. I'm too dumb for that JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 NOT CS-oriented 5
  6. 6. FWIW JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 My experiences and best practices 6
  7. 7. JS devs are kind of dickheads JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 JavaScript dev is opinionated 7
  8. 8. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 History of JavaScript 8
  9. 9. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Brendan Eich 9
  10. 10. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 "Mocha" 10
  11. 11. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 "LiveScript" 11
  12. 12. Seemed like a good idea at the time JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 "JavaScript" 12 http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704
  13. 13. Yeesh JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 ECMAScript 13
  14. 14. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Core JavaScript 14
  15. 15. aka ECMAScript 3, circa 1999 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Baseline is JS 1.5 15
  16. 16. Hey, I know that! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Dynamically typed 16
  17. 17. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Object-based 17
  18. 18. But not how you think JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Object-oriented 18
  19. 19. First class, baby! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Functional 19
  20. 20. Like giving clay to a monkey JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Malleable 20
  21. 21. You mean I don't have to memorize 4,500 function names? JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010 Core is pretty darn small 21
  22. 22. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201022 Core Objects Core Global Functions Boolean decodeURI Number decodeURIComponent String encodeURI Array encodeURIComponent Object eval Function isFinite RegExp isNaN Date parseFloat parseInt Core JS
  23. 23. All the cool stuff! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201023 What's missing?
  24. 24. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201024 File i/o
  25. 25. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201025 Networking
  26. 26. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201026 DB APIs
  27. 27. Yep, the DOM is not part of JavaScript JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201027 DOM
  28. 28. Please don't leave yet. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201028 So what's it good for?
  29. 29. What? JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201029 Asynchronous actions
  30. 30. Oh! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201030 Like GUI stuff
  31. 31. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201031 Browsers!
  32. 32. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201032 Web Runtime Platforms!
  33. 33. Dear God JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201033 Widget engines!
  34. 34. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201034 Server-side platforms
  35. 35. http://nodejs.org/ JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201035 Node.js
  36. 36. http://narwhaljs.org/ JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201036 Narwhal
  37. 37. http://code.google.com/p/v8cgi/ JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201037 v8cgi
  38. 38. But it's super fun! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201038 SSJS isn't terribly mature
  39. 39. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201039 Syntax
  40. 40. Like PHP! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201040 C/Java-like
  41. 41. But they can. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201041 Variable names don't start with '$'
  42. 42. Not dot. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201042 Concatenation with '+'
  43. 43. Not '->'. You will screw this up. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201043 Dot for members. Or []
  44. 44. You will also screw this up. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201044 Always case-sensitive
  45. 45. But you had better always use them JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201045 Semicolons are optional
  46. 46. Semicolons! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201046 CODE TIME
  47. 47. "Primitives" JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201047 Data Types
  48. 48. Integers and floats JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201048 Numbers
  49. 49. Truthy JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201049 Booleans
  50. 50. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201050 Strings
  51. 51. Not NULL, not Null. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201051 null
  52. 52. Declared, but no value set. Not the same as null JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201052 undefined
  53. 53. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201053 That's it.
  54. 54. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201054 Other elements
  55. 55. MDC: "Named containers for values" JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201055 Objects
  56. 56. All objects JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201056 Arrays, Date, RegExp
  57. 57. MDC: "Procedures your application can perform" JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201057 Functions
  58. 58. Hang on! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201058 Scope
  59. 59. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201059 More bleed than PHP Functional scope only
  60. 60. No need for global declaration JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201060 Globals automatically available
  61. 61. With or without JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201061 Declaring variables
  62. 62. scope maintained JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201062 With var
  63. 63. Oops! Automatically global JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201063 Without var
  64. 64. window in browsers JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201064 Globals are properties of global object
  65. 65. globals! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201065 CODE TIME
  66. 66. This is awesome JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201066 Closures
  67. 67. Anything within context of function declaration is fair game JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201067 Using a var from outside function
  68. 68. Closures JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201068 CODE TIME
  69. 69. Literally JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201069 Literals
  70. 70. Right. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201070 Numbers
  71. 71. Yep. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201071 Booleans
  72. 72. Hmmm. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201072 RegExp
  73. 73. Hey there. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201073 ['a','r','r','a','y','s'];
  74. 74. Oh snap! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201074 {object:"literals"};
  75. 75. Literals JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201075 CODE TIME
  76. 76. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201076 Operators
  77. 77. + , = == === < > ! && || JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201077 Mostly like PHP
  78. 78. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201078 this
  79. 79. Remember, no classes in JS JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201079 new
  80. 80. Does this key exist? JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201080 in
  81. 81. "is X of type Y?" JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201081 instanceof
  82. 82. Returns string of core type JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201082 typeof
  83. 83. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201083 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"
  84. 84. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201084 Type conversion
  85. 85. Radix is optional, but Douglas Crockford will hate you JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201085 parseInt(val, [radix])
  86. 86. Like parseInt, returns NaN if cannot convert JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201086 parseFloat(val)
  87. 87. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201087 String(obj)
  88. 88. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201088 Number(obj)
  89. 89. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201089 Boolean(obj) http://jibbering.com/faq/notes/type-conversion/
  90. 90. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201090 Functions
  91. 91. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201091 In the procedural tradition
  92. 92. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201092 As objects
  93. 93. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201093 As constructors with new
  94. 94. An array, kind of JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201094 Function arguments
  95. 95. Fun with functions JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201095 CODE TIME
  96. 96. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201096 Objects
  97. 97. Or associative arrays JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201097 As hashes
  98. 98. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201098 As static modules
  99. 99. Objects as modules JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201099 CODE TIME
  100. 100. Not a word JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010100 As instance-able objects
  101. 101. Just make the object and have a constructor func JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010101 No classes
  102. 102. No public, private, protected JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010102 No visibility levels
  103. 103. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010103 Prototypes & inheritance
  104. 104. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010104 Every object has a prototype
  105. 105. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010105 Prototype provides attributes of object
  106. 106. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010106 Modifying prototype changes all objects that use it
  107. 107. points to constructor function of object JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010107 Prototype has .constructor
  108. 108. Prototypes and inheritance JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010108 CODE TIME
  109. 109. Kinda suck in JS JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010109 Dates
  110. 110. Almost a necessary evil JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010110 eval()
  111. 111. That again JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010111 Malleability
  112. 112. Cookies??? JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010112 BREAK TIME
  113. 113. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010113 JS in the browser
  114. 114. Non-sequential, long-running JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010114 Execution model
  115. 115. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010115 Single threaded
  116. 116. Oh the humanity JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010116 Browser compatibility
  117. 117. Woo wee! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010117 DOM APIs
  118. 118. Words and pictures and movin' stuff! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010118 Elements and events
  119. 119. Trust me JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010119 These are terrible
  120. 120. They suck JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010120 I'm not going to teach you these
  121. 121. Basically fixes everything JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010121 Just use jQuery
  122. 122. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010122 HTTP interaction
  123. 123. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010123 The XMLHttpRequest Object GETing and POSTing
  124. 124. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010124 JSON is love
  125. 125. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010125 Use JSON2.js
  126. 126. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010126 Newer browsers have native implementations
  127. 127. Web APIs, woooooooooo! JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010127 CODE TIME
  128. 128. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010128 Resources
  129. 129. <Name of Talk> - <Who> - <Where> - <When> Resources:Code 129 •SpazCore http://github.com/funkatron/spazcore •Underscore.js http://documentcloud.github.com/underscore/ •http://delicious.com/funka7ron/javascript
  130. 130. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010130 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/
  131. 131. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010131 Resources:Books •JavaScript: The Definitive Guide David Flanagan •JavaScript: The Good Parts Douglas Crockford •High-Performance JavaScript Nicholas C. Zakas, et al •JavaScript Patterns Stoyan Stefanov
  132. 132. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010132 References
  133. 133. JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010133 References •Mozilla Dev Center: Core JavaScript Guide •Eloquent JavaScript

×