JavaScript for PHP Developers

JavaScript for PHP Developers
Ed Finkler
@funkatron
coj@funkatron.com
November 1, 2010
#zendcon #js4php
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 JS
for 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 Functions
Boolean decodeURI
Number decodeURIComponent
String encodeURI
Array encodeURIComponent
Object eval
Function isFinite
RegExp isNaN
Date 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://narwhaljs.org/
Narwhal

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 ﬂoats
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 of
global 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 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

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 provides
attributes of object

Modifying prototype changes
all 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 ﬁxes everything
Just use jQuery

HTTP interaction

The XMLHttpRequest Object
GETing and POSTing

JSON is love

Use JSON2.js

Newer browsers have
native implementations

Web APIs, woooooooooo!
CODE TIME

Resources

<Name of Talk> - <Who> - <Where> - <When>
Resources:Code
129
•SpazCore
http://github.com/funkatron/spazcore
•Underscore.js
http://documentcloud.github.com/underscore/
•http://delicious.com/funka7ron/javascript

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
Nicholas C. Zakas, et al
•JavaScript Patterns
Stoyan Stefanov

References

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

JavaScript for PHP Developers

Recommended

More Related Content

What's hot (16)

Viewers also liked (20)

Similar to JavaScript for PHP Developers (20)

More from funkatron (9)

Recently uploaded (20)

JavaScript for PHP Developers