Your SlideShare is downloading. ×
0
JavaScript for PHP Developers
                   Ed Finkler
                   @funkatron
                   coj@funkatron...
What is this?




  2     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
A practical overview of JS
                             for the PHP developer

                                           ...
NOT CS-oriented

                                                       I'm too dumb for that




  4     JavaScript for P...
My experiences and best practices

                                                                 FWIW




  5     JavaS...
JavaScript dev is opinionated

                                                JS devs are kind of dickheads




  6     J...
History of JavaScript




  7     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Brendan Eich




  8     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
"Mocha"




  9     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
"LiveScript"




 10     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
"JavaScript"

                                            Seemed like a good idea at the time




                        ...
ECMAScript

                                                                 Yeesh




 12     JavaScript for PHP Develope...
Core JavaScript




 13     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Baseline is JS 1.5

                                                aka ECMAScript 3, circa 1999




 14     JavaScript fo...
Dynamically typed

                                                          Hey, I know that!




 15     JavaScript for ...
Object-based




 16     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Object-oriented

                                                      But not how you think




 17     JavaScript for PH...
Functional

                                                         First class, baby!




 18     JavaScript for PHP Dev...
Malleable

                                                 Like giving clay to a monkey




 19     JavaScript for PHP De...
Core is pretty darn small

                           You mean I don't have to memorize 4,500 function names?




 20     ...
Core JS
               Core Objects                                           Core Global Functions
               Boolean...
What's missing?

                                                          All the cool stuff!




 22     JavaScript for ...
File i/o




 23     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Networking




 24     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
DB APIs




 25     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
DOM

                                          Yep, the DOM is not part of JavaScript




 26     JavaScript for PHP Devel...
So what's it good for?

                                                     Please don't leave yet.




 27     JavaScrip...
So what's it good for?

                                                     Please don't leave yet.




 28     JavaScrip...
Asynchronous actions

                                                                 What?




 29     JavaScript for PH...
Like GUI stuff

                                                                   Oh!




 30     JavaScript for PHP Deve...
Browsers!




 31     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Web Runtime Platforms!




 32     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 20...
Widget engines!

                                                               Dear God




 33     JavaScript for PHP De...
Server-side platforms




 34     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Node.js

                                                          http://nodejs.org/




 35     JavaScript for PHP Devel...
Narwhal

                                                       http://narwhaljs.org/




 36     JavaScript for PHP Devel...
v8cgi

                                               http://code.google.com/p/v8cgi/




 37     JavaScript for PHP Devel...
SSJS isn't terribly mature

                                                     Don't quit your day job




 38     JavaS...
Syntax




 39     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
C/Java-like

                                                               Like PHP!




 40     JavaScript for PHP Devel...
Variable names don't start with '$'

                                                            But they can.




 41    ...
Concatenation with '+'

                                                                Not dot.




 42     JavaScript fo...
Dot for members. Or []

                                                Not '->'. You will screw this up.




 43     Java...
Always case-sensitive

                                                  You will also screw this up.




 44     JavaScri...
Semicolons are optional

                                           But you had better always use them




 45     JavaScr...
CODE TIME

                                                             Semicolons!




 46     JavaScript for PHP Develop...
Data Types

                                                              "Primitives"




 47     JavaScript for PHP Deve...
Numbers

                                                        Integers and floats




 48     JavaScript for PHP Develop...
Booleans

                                                                 Truthy




 49     JavaScript for PHP Developer...
Strings




 50     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
null

                                                        Not NULL, not Null.




 51     JavaScript for PHP Developer...
undefined

                                  Declared, but no value set. Not the same as null




 52     JavaScript for P...
That's it.




 53     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Other elements




 54     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Objects

                                           MDC: "Named containers for values"




 55     JavaScript for PHP Deve...
Arrays, Date, RegExp

                                                              All objects




 56     JavaScript for...
Functions

                                  MDC: "Procedures your application can perform"




 57     JavaScript for PHP...
Scope

                                                               Hang on!




 58     JavaScript for PHP Developers -...
More bleed than PHP




 59     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Globals automatically available

                                               No need for global declaration




 60    ...
Declaring variables

                                                           With or without




 61     JavaScript for...
With var

                                                         scope maintained




 62     JavaScript for PHP Develop...
Without var

                                                  Oops! Automatically global




 63     JavaScript for PHP D...
Globals are properties of
                                  global object

                                               ...
CODE TIME

                                                                globals!




 65     JavaScript for PHP Develop...
Closures

                                                          This is awesome




 66     JavaScript for PHP Develop...
Using a var from outside function

                           Anything within context of function declaration is fair game...
CODE TIME

                                                               Closures




 68     JavaScript for PHP Develope...
Literals

                                                                Literally




 69     JavaScript for PHP Develop...
Numbers

                                                                  Right.




 70     JavaScript for PHP Developer...
Booleans

                                                                   Yep.




 71     JavaScript for PHP Developer...
RegExp

                                                                Hmmm.




 72     JavaScript for PHP Developers - ...
['a','r','r','a','y','s'];

                                                              Hey there.




 73     JavaScrip...
{object:"literals"};

                                                               Oh snap!




 74     JavaScript for P...
CODE TIME

                                                                 Literals




 75     JavaScript for PHP Develo...
Operators




 76     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Mostly like PHP

                                                     + , = == === < > ! && ||




 77     JavaScript for ...
this




 78     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
new

                                                 Remember, no classes in JS




 79     JavaScript for PHP Developers...
in

                                                       Does this key exist?




 80     JavaScript for PHP Developers ...
instanceof

                                                          "is X of type Y?"




 81     JavaScript for PHP Dev...
typeof

                                                  Returns string of core type




 82     JavaScript for PHP Devel...
typeof                                                 returns
               typeof {}                                   ...
Type conversion




 84     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
parseInt(val, [radix])

                               Radix is optional, but Douglas Crockford will hate you




 85     ...
parseFloat(val)

                                       Like parseInt, returns NaN if cannot convert




 86     JavaScrip...
String(obj)




 87     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Number(obj)




 88     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Boolean(obj)




                                                  http://jibbering.com/faq/notes/type-conversion/




 89...
Functions




 90     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
In the procedural tradition




 91     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 1...
As objects




 92     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
As constructors




 93     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Function arguments

                                                          An array, kind of




 94     JavaScript for...
CODE TIME

                                                        Fun with functions




 95     JavaScript for PHP Devel...
Objects




 96     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
As hashes

                                                      Or associative arrays




 97     JavaScript for PHP Deve...
As static modules




 98     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
CODE TIME

                                                       Objects as modules




 99     JavaScript for PHP Develo...
As instance-able objects

                                                              Not a word




100     JavaScript ...
No classes

                                  Just make the object and have a constructor func




101     JavaScript for ...
No visibility levels

                                                 No public, private, protected




102     JavaScrip...
Prototypes & inheritance




103     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, ...
Every object has a prototype




104     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May ...
Prototype provides
                                       attributes of object




105     JavaScript for PHP Developers -...
Modifying prototype changes
                             all objects that use it




106     JavaScript for PHP Developers...
Prototype has .constructor

                                          points to constructor function of object




107    ...
CODE TIME

                                                  Prototypes and inheritance




108     JavaScript for PHP Dev...
Dates

                                                          Kinda suck in JS




109     JavaScript for PHP Developer...
eval()

                                                    Almost a necessary evil




110     JavaScript for PHP Develop...
Malleability

                                                              That again




111     JavaScript for PHP Deve...
BREAK TIME

                                                             Cookies???




112     JavaScript for PHP Develop...
JS in the browser




113     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Execution model

                                                 Non-sequential, long-running




114     JavaScript for ...
Single threaded




115     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Browser compatibility

                                                          Oh the humanity




116     JavaScript fo...
DOM APIs

                                                               Woo wee!




117     JavaScript for PHP Developer...
Elements and events

                                           Words and pictures and movin' stuff!




118     JavaScrip...
These are terrible

                                                               Trust me




119     JavaScript for PHP...
I'm not going to teach you these

                                                              They suck




120     Java...
Just use jQuery

                                                   Basically fixes everything




121     JavaScript for P...
CODE TIME

                                                DOM manipulation and events




122     JavaScript for PHP Deve...
HTTP interaction




123     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
JSON is love




124     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Use JSON2.js




125     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Newer browsers have
                                native implementations




126     JavaScript for PHP Developers - Ed ...
CODE TIME

                                                   Web APIs, woooooooooo!




127     JavaScript for PHP Develo...
Resources




128     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
Resources:Code
      • SpazCore
        http://github.com/funkatron/spazcore
      • Underscore.js
        http://document...
Resources:Web
      • Mozilla Dev Center: Code JavaScript Guide
        https://developer.mozilla.org/en/Core_JavaScript_1...
Resources:Books
      • JavaScript: The Definitive Guide
        David Flanagan
      • JavaScript: The Good Parts
        ...
References




132     JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010
Wednesday, May 19, 2010
References
      • Mozilla Dev Center: Core JavaScript Guide
      • Eloquent JavaScript




133     JavaScript for PHP De...
Upcoming SlideShare
Loading in...5
×

JavaScript for PHP Developers

2,509

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,509
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

Transcript of "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.

×