JavaScript for PHP Developers

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

A practical overview of JS
for the PHP developer

Stop c+p'ing, start writing


NOT CS-oriented

I'm too dumb for that


My experiences and best practices

FWIW


JavaScript dev is opinionated

JS devs are kind of dickheads


History of JavaScript


Brendan Eich


"Mocha"


"LiveScript"


"JavaScript"

Seemed like a good idea at the time

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


ECMAScript

Yeesh


Core JavaScript


Baseline is JS 1.5

aka ECMAScript 3, circa 1999


Dynamically typed

Hey, I know that!


Object-based


Object-oriented

But not how you think


Functional

First class, baby!


Malleable

Like giving clay to a monkey


Core is pretty darn small

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


Core JS
Core Objects Core Global Functions
Boolean decodeURI
Number decodeURIComponent
String encodeURI
Array encodeURIComponent
Object eval
Function isFinite
RegExp isNaN
Date parseFloat
parseInt


What's missing?

All the cool stuff!


File i/o


Networking


DB APIs


DOM

Yep, the DOM is not part of JavaScript


So what's it good for?

Please don't leave yet.


Asynchronous actions

What?


Like GUI stuff

Oh!


Browsers!


Web Runtime Platforms!


Widget engines!

Dear God


Server-side platforms


Node.js

http://nodejs.org/


Narwhal

http://narwhaljs.org/


v8cgi

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


SSJS isn't terribly mature

Don't quit your day job


Syntax


C/Java-like

Like PHP!


Variable names don't start with '$'

But they can.


Concatenation with '+'

Not dot.


Dot for members. Or []

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


Always case-sensitive

You will also screw this up.


Semicolons are optional

But you had better always use them


CODE TIME

Semicolons!


Data Types

"Primitives"


Numbers

Integers and ﬂoats


Booleans

Truthy


Strings


null

Not NULL, not Null.


undefined

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


That's it.


Other elements


Objects

MDC: "Named containers for values"


Arrays, Date, RegExp

All objects


Functions

MDC: "Procedures your application can perform"


Scope

Hang on!


More bleed than PHP


Globals automatically available

No need for global declaration


Declaring variables

With or without


With var

scope maintained


Without var

Oops! Automatically global


Globals are properties of
global object

window in browsers


CODE TIME

globals!


Closures

This is awesome


Using a var from outside function

Anything within context of function declaration is fair game


CODE TIME

Closures


Literals

Literally


Numbers

Right.


Booleans

Yep.


RegExp

Hmmm.


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

Hey there.


{object:"literals"};

Oh snap!


CODE TIME

Literals


Operators


Mostly like PHP

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


this


new

Remember, no classes in JS


in

Does this key exist?


instanceof

"is X of type Y?"


typeof

Returns string of core type


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 undeﬁned "undeﬁned"


Type conversion


parseInt(val, [radix])

Radix is optional, but Douglas Crockford will hate you


parseFloat(val)

Like parseInt, returns NaN if cannot convert


String(obj)


Number(obj)


Boolean(obj)

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


Functions


In the procedural tradition


As objects


As constructors


Function arguments

An array, kind of


CODE TIME

Fun with functions


Objects


As hashes

Or associative arrays


As static modules


CODE TIME

Objects as modules


As instance-able objects

Not a word


No classes

Just make the object and have a constructor func


No visibility levels

No public, private, protected


Prototypes & inheritance


Every object has a prototype


Prototype provides
attributes of object


Modifying prototype changes
all objects that use it


Prototype has .constructor

points to constructor function of object


CODE TIME

Prototypes and inheritance


Dates

Kinda suck in JS


eval()

Almost a necessary evil


Malleability

That again


BREAK TIME

Cookies???


JS in the browser


Execution model

Non-sequential, long-running


Single threaded


Browser compatibility

Oh the humanity


DOM APIs

Woo wee!


Elements and events

Words and pictures and movin' stuff!


These are terrible

Trust me


I'm not going to teach you these

They suck


Just use jQuery

Basically ﬁxes everything


CODE TIME

DOM manipulation and events


HTTP interaction


JSON is love


Use JSON2.js


Newer browsers have
native implementations


CODE TIME

Web APIs, woooooooooo!


Resources


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>

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/

Resources:Books
• JavaScript: The Deﬁnitive Guide
David Flanagan
• JavaScript: The Good Parts
Douglas Crockford
• High-Performance JavaScript
Various


References


References
• Mozilla Dev Center: Core JavaScript Guide
• Eloquent JavaScript


JavaScript for PHP Developers

Recommended

More Related Content

Similar to JavaScript for PHP Developers (20)

More from funkatron (8)

Recently uploaded (20)

JavaScript for PHP Developers