JavaScript for PHP Developers
Upcoming SlideShare
Loading in...5
×
 

JavaScript for PHP Developers

on

  • 3,020 views

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

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

Statistics

Views

Total Views
3,020
Views on SlideShare
3,008
Embed Views
12

Actions

Likes
3
Downloads
35
Comments
0

1 Embed 12

http://www.slideshare.net 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript for PHP Developers JavaScript for PHP Developers Presentation Transcript

  • JavaScript for PHP Developers Ed Finkler @funkatron coj@funkatron.com May 18, 2010 #tekX #js4php http://joind.in/1564 Wednesday, May 19, 2010
  • 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 Stop c+p'ing, start writing 3 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • My experiences and best practices FWIW 5 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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 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
  • ECMAScript Yeesh 12 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Dynamically typed Hey, I know that! 15 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Functional First class, baby! 18 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Malleable Like giving clay to a monkey 19 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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
  • What's missing? All the cool stuff! 22 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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
  • Asynchronous actions What? 29 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Like GUI stuff Oh! 30 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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, 2010
  • Widget engines! Dear God 33 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Narwhal http://narwhaljs.org/ 36 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • v8cgi http://code.google.com/p/v8cgi/ 37 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • Concatenation with '+' Not dot. 42 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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
  • 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
  • CODE TIME Semicolons! 46 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Data Types "Primitives" 47 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Numbers Integers and floats 48 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Booleans Truthy 49 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Arrays, Date, RegExp All objects 56 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Functions MDC: "Procedures your application can perform" 57 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Scope Hang on! 58 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Declaring variables With or without 61 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • With var scope maintained 62 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Without var Oops! Automatically global 63 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • CODE TIME globals! 65 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Closures This is awesome 66 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • CODE TIME Closures 68 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Literals Literally 69 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Numbers Right. 70 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Booleans Yep. 71 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • RegExp Hmmm. 72 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • ['a','r','r','a','y','s']; Hey there. 73 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • {object:"literals"}; Oh snap! 74 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • CODE TIME Literals 75 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Operators 76 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Mostly like PHP + , = == === < > ! && || 77 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • in Does this key exist? 80 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • instanceof "is X of type Y?" 81 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • typeof Returns string of core type 82 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • 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 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 19, 2010
  • 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 PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • CODE TIME Fun with functions 95 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • As instance-able objects Not a word 100 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • No visibility levels No public, private, protected 102 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Prototypes & inheritance 103 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Every object has a prototype 104 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Prototype provides attributes of object 105 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Modifying prototype changes all objects that use it 106 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • CODE TIME Prototypes and inheritance 108 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Dates Kinda suck in JS 109 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • eval() Almost a necessary evil 110 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • Malleability That again 111 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • BREAK TIME Cookies??? 112 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • DOM APIs Woo wee! 117 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • These are terrible Trust me 119 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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
  • Just use jQuery Basically fixes everything 121 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • CODE TIME DOM manipulation and events 122 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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 Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • CODE TIME Web APIs, woooooooooo! 127 JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010
  • 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://documentcloud.github.com/underscore/ • http://delicious.com/funka7ron/javascript 129 <Name of Talk> - <Who> - <Where> - <When> Wednesday, May 19, 2010
  • 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
  • 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
  • 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 Developers - Ed Finkler - tek-X - May 18, 2010 Wednesday, May 19, 2010