javascript for php developers

JavaScript for PHP DevelopersEd Finkler@[email protected]

May 18, 2010

#tekX #js4phphttp://joind.in/1564

Wednesday, May 19, 2010

mailto:[email protected]

mailto:[email protected]

http://joind.in/1564

http://joind.in/1564

JavaScript for PHP Developers - Ed Finkler - tek-X - May 18, 2010

What is this?

2Wednesday, May 19, 2010

Stop c+p'ing, start writing


A practical overview of JSfor the PHP developer


I'm too dumb for that


NOT CS-oriented


FWIW


My experiences and best practices


JS devs are kind of dickheads


JavaScript dev is opinionated



History of JavaScript



Brendan Eich



"Mocha"



"LiveScript"


Seemed like a good idea at the time


"JavaScript"

11

http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704




Yeesh


ECMAScript



Core JavaScript


aka ECMAScript 3, circa 1999


Baseline is JS 1.5


Hey, I know that!


Dynamically typed



Object-based


But not how you think


Object-oriented


First class, baby!


Functional


Like giving clay to a monkey


Malleable


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


Core is pretty darn small



Core Objects Core Global FunctionsBoolean decodeURINumber decodeURIComponentString encodeURIArray encodeURIComponentObject evalFunction isFiniteRegExp isNaNDate parseFloat

parseInt

Core JS


All the cool stuff!


What's missing?



File i/o



Networking



DB APIs


Yep, the DOM is not part of JavaScript


DOM


Please don't leave yet.


So what's it good for?


What?


Asynchronous actions


Oh!


Like GUI stuff



Browsers!



Web Runtime Platforms!


Dear God


Widget engines!



Server-side platforms


http://nodejs.org/


Node.js


http://nodejs.org

http://nodejs.org

http://narwhaljs.org/


Narwhal


http://narwhaljs.org

http://narwhaljs.org

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


v8cgi




Don't quit your day job


SSJS isn't terribly mature



Syntax


Like PHP!


C/Java-like


But they can.


Variable names don't start with '$'


Not dot.


Concatenation with '+'


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


Dot for members. Or []


You will also screw this up.


Always case-sensitive


But you had better always use them


Semicolons are optional


Semicolons!


CODE TIME


"Primitives"


Data Types


Integers and floats


Numbers


Truthy


Booleans



Strings


Not NULL, not Null.


null


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


undefined



That's it.



Other elements


MDC: "Named containers for values"


Objects


All objects


Arrays, Date, RegExp


MDC: "Procedures your application can perform"


Functions


Hang on!


Scope



More bleed than PHP


No need for global declaration


Globals automatically available


With or without


Declaring variables


scope maintained


With var


Oops! Automatically global


Without var


window in browsers


Globals are properties ofglobal object


globals!


CODE TIME


This is awesome


Closures


Anything within context of function declaration is fair game


Using a var from outside function


Closures


CODE TIME


Literally


Literals


Right.


Numbers


Yep.


Booleans


Hmmm.


RegExp


Hey there.


['a','r','r','a','y','s'];


Oh snap!


{object:"literals"};


Literals


CODE TIME



Operators


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


Mostly like PHP



this


Remember, no classes in JS


new


Does this key exist?


in


"is X of type Y?"


instanceof


Returns string of core type


typeof



typeof returnstypeof {} "object"typeof function() {} "function"typeof new Function(); "function"typeof true "boolean"typeof new Date(); "object" // not "date"; use instanceoftypeof [1,2,3] "object" // not "array"typeof NaN "number"typeof null "object"typeof undefined "undefined"



Type conversion


Radix is optional, but Douglas Crockford will hate you


parseInt(val, [radix])


Like parseInt, returns NaN if cannot convert


parseFloat(val)



String(obj)



Number(obj)



Boolean(obj)

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





Functions



In the procedural tradition



As objects



As constructors


An array, kind of


Function arguments


Fun with functions


CODE TIME



Objects


Or associative arrays


As hashes



As static modules


Objects as modules


CODE TIME


Not a word


As instance-able objects


Just make the object and have a constructor func


No classes


No public, private, protected


No visibility levels



Prototypes & inheritance



Every object has a prototype



Prototype providesattributes of object



Modifying prototype changesall objects that use it


points to constructor function of object


Prototype has .constructor


Prototypes and inheritance


CODE TIME


Kinda suck in JS


Dates


Almost a necessary evil


eval()


That again


Malleability


Cookies???


BREAK TIME



JS in the browser


Non-sequential, long-running


Execution model



Single threaded


Oh the humanity


Browser compatibility


Woo wee!


DOM APIs


Words and pictures and movin' stuff!


Elements and events


Trust me


These are terrible


They suck


I'm not going to teach you these


Basically fixes everything


Just use jQuery


DOM manipulation and events


CODE TIME



HTTP interaction



JSON is love



Use JSON2.js



Newer browsers havenative implementations


Web APIs, woooooooooo!


CODE TIME



Resources


<Name of Talk> - <Who> - <Where> - <When>

Resources:Code

129

•SpazCorehttp://github.com/funkatron/spazcore

•Underscore.jshttp://documentcloud.github.com/underscore/

•http://delicious.com/funka7ron/javascript


http://github.com/funkatron/spazcore

http://github.com/funkatron/spazcore

http://documentcloud.github.com/underscore/

http://documentcloud.github.com/underscore/

http://delicious.com/funka7ron/javascript

http://delicious.com/funka7ron/javascript


Resources:Web

•Mozilla Dev Center: Code JavaScript Guidehttps://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

•Mozilla Dev Center: Core JavaScript Referencehttps://developer.mozilla.org/en/Core_JavaScript_1.5_Reference

•Eloquent JavaScripthttp://eloquentjavascript.net/

•comp.lang.javascript FAQhttp://jibbering.com/faq/

•Nicholas C. Zakas' Bloghttp://www.nczonline.net/

•John Resig's Bloghttp://ejohn.org/

•http://wtfjs.com/


https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference

http://eloquentjavascript.net

http://eloquentjavascript.net

http://jibbering.com/faq/

http://jibbering.com/faq/

http://www.nczonline.net

http://www.nczonline.net

http://ejohn.org

http://ejohn.org

http://wtfjs.com

http://wtfjs.com


Resources:Books

•JavaScript: The Definitive GuideDavid Flanagan

•JavaScript: The Good PartsDouglas Crockford

•High-Performance JavaScriptVarious



References



References

•Mozilla Dev Center: Core JavaScript Guide•Eloquent JavaScript


javascript for php developers

Technology