JavaScript for PHP Developers

  • 2,377 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,377
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
39
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. What is this? 2 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. My experiences and best practices FWIW 5 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. History of JavaScript 7 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 8. Brendan Eich 8 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 9. "Mocha" 9 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 10. "LiveScript" 10 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. ECMAScript Yeesh 12 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 13. Core JavaScript 13 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Dynamically typed Hey, I know that! 15 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 16. Object-based 16 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Functional First class, baby! 18 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. 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. What's missing? All the cool stuff! 22 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 23. File i/o 23 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 24. Networking 24 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 25. DB APIs 25 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. 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. Asynchronous actions What? 29 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 30. Like GUI stuff Oh! 30 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 31. Browsers! 31 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 32. Web Runtime Platforms! 32 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 33. Widget engines! Dear God 33 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 34. Server-side platforms 34 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 35. Node.js http://nodejs.org/ 35 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 36. Narwhal http://narwhaljs.org/ 36 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. Syntax 39 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 40. C/Java-like Like PHP! 40 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Concatenation with '+' Not dot. 42 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. 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. CODE TIME Semicolons! 46 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 47. Data Types "Primitives" 47 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 48. Numbers Integers and floats 48 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 49. Booleans Truthy 49 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 50. Strings 50 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 51. null Not NULL, not Null. 51 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. That's it. 53 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 54. Other elements 54 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 55. Objects MDC: "Named containers for values" 55 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 56. Arrays, Date, RegExp All objects 56 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Scope Hang on! 58 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 59. More bleed than PHP 59 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Declaring variables With or without 61 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 62. With var scope maintained 62 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 63. Without var Oops! Automatically global 63 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. CODE TIME globals! 65 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 66. Closures This is awesome 66 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. CODE TIME Closures 68 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 69. Literals Literally 69 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 70. Numbers Right. 70 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 71. Booleans Yep. 71 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 72. RegExp Hmmm. 72 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. {object:"literals"}; Oh snap! 74 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 75. CODE TIME Literals 75 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 76. Operators 76 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 77. Mostly like PHP + , = == === < > ! && || 77 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 78. this 78 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 79. new Remember, no classes in JS 79 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 80. in Does this key exist? 80 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 81. instanceof "is X of type Y?" 81 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 82. typeof Returns string of core type 82 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Type conversion 84 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. String(obj) 87 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 88. Number(obj) 88 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Functions 90 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 91. In the procedural tradition 91 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 92. As objects 92 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 93. As constructors 93 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 94. Function arguments An array, kind of 94 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 95. CODE TIME Fun with functions 95 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 96. Objects 96 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 97. As hashes Or associative arrays 97 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 98. As static modules 98 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 99. CODE TIME Objects as modules 99 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. No visibility levels No public, private, protected 102 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 103. Prototypes & inheritance 103 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 104. Every object has a prototype 104 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 105. Prototype provides attributes of object 105 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. CODE TIME Prototypes and inheritance 108 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 109. Dates Kinda suck in JS 109 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 110. eval() Almost a necessary evil 110 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 111. Malleability That again 111 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 112. BREAK TIME Cookies??? 112 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 113. JS in the browser 113 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 114. Execution model Non-sequential, long-running 114 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 115. Single threaded 115 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 116. Browser compatibility Oh the humanity 116 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 117. DOM APIs Woo wee! 117 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. These are terrible Trust me 119 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. Just use jQuery Basically fixes everything 121 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 122. CODE TIME DOM manipulation and events 122 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 123. HTTP interaction 123 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 124. JSON is love 124 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 125. Use JSON2.js 125 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 126. Newer browsers have native implementations 126 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 127. CODE TIME Web APIs, woooooooooo! 127 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 128. Resources 128 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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. 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. 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. References 132 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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