JavaScript for PHP Developers

JavaScript for PHP DevelopersEd Finkler@[email protected]

November 1, 2010

#zendcon #js4phphttp://joind.in/2289

mailto:[email protected]

mailto:[email protected]

http://joind.in/2289

http://joind.in/2289

JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Goodsie.com

2

Invitation code: zendcon


What is this?

3

Stop c+p'ing, start writing


A practical overview of JSfor the PHP developer

4

I'm too dumb for that


NOT CS-oriented

5

FWIW


My experiences and best practices

6

JS devs are kind of dickheads


JavaScript dev is opinionated

7


History of JavaScript

8


Brendan Eich

9


"Mocha"

10


"LiveScript"

11

Seemed like a good idea at the time


"JavaScript"

12

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



Yeesh


ECMAScript

13


Core JavaScript

14

aka ECMAScript 3, circa 1999


Baseline is JS 1.5

15

Hey, I know that!


Dynamically typed

16


Object-based

17

But not how you think


Object-oriented

18

First class, baby!


Functional

19

Like giving clay to a monkey


Malleable

20

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


Core is pretty darn small

21


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



But it's super fun!


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

Functional scope only

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

with new

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


HTTP interaction


The XMLHttpRequest Object

GETing and POSTing


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 JavaScriptNicholas C. Zakas, et al

•JavaScript PatternsStoyan Stefanov


References


References

•Mozilla Dev Center: Core JavaScript Guide•Eloquent JavaScript

Technology

JavaScript for PHP Developers