JavaScript for PHP Developers
-
Upload
funkatron -
Category
Technology
-
view
5.607 -
download
3
description
Transcript of JavaScript for PHP Developers
JavaScript for PHP DevelopersEd Finkler@[email protected]
November 1, 2010
#zendcon #js4phphttp://joind.in/2289
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Goodsie.com
2
Invitation code: zendcon
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
What is this?
3
Stop c+p'ing, start writing
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
A practical overview of JSfor the PHP developer
4
I'm too dumb for that
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
NOT CS-oriented
5
FWIW
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
My experiences and best practices
6
JS devs are kind of dickheads
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
JavaScript dev is opinionated
7
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
History of JavaScript
8
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Brendan Eich
9
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
"Mocha"
10
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
"LiveScript"
11
Seemed like a good idea at the time
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
"JavaScript"
12
http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704
Yeesh
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
ECMAScript
13
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Core JavaScript
14
aka ECMAScript 3, circa 1999
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Baseline is JS 1.5
15
Hey, I know that!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Dynamically typed
16
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Object-based
17
But not how you think
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Object-oriented
18
First class, baby!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Functional
19
Like giving clay to a monkey
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Malleable
20
You mean I don't have to memorize 4,500 function names?
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010
Core is pretty darn small
21
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201022
Core Objects Core Global FunctionsBoolean decodeURINumber decodeURIComponentString encodeURIArray encodeURIComponentObject evalFunction isFiniteRegExp isNaNDate parseFloat
parseInt
Core JS
All the cool stuff!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201023
What's missing?
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201024
File i/o
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201025
Networking
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201026
DB APIs
Yep, the DOM is not part of JavaScript
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201027
DOM
Please don't leave yet.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201028
So what's it good for?
What?
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201029
Asynchronous actions
Oh!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201030
Like GUI stuff
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201031
Browsers!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201032
Web Runtime Platforms!
Dear God
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201033
Widget engines!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201034
Server-side platforms
http://nodejs.org/
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201035
Node.js
http://narwhaljs.org/
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201036
Narwhal
http://code.google.com/p/v8cgi/
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201037
v8cgi
But it's super fun!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201038
SSJS isn't terribly mature
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201039
Syntax
Like PHP!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201040
C/Java-like
But they can.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201041
Variable names don't start with '$'
Not dot.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201042
Concatenation with '+'
Not '->'. You will screw this up.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201043
Dot for members. Or []
You will also screw this up.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201044
Always case-sensitive
But you had better always use them
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201045
Semicolons are optional
Semicolons!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201046
CODE TIME
"Primitives"
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201047
Data Types
Integers and floats
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201048
Numbers
Truthy
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201049
Booleans
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201050
Strings
Not NULL, not Null.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201051
null
Declared, but no value set. Not the same as null
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201052
undefined
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201053
That's it.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201054
Other elements
MDC: "Named containers for values"
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201055
Objects
All objects
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201056
Arrays, Date, RegExp
MDC: "Procedures your application can perform"
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201057
Functions
Hang on!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201058
Scope
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201059
More bleed than PHP
Functional scope only
No need for global declaration
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201060
Globals automatically available
With or without
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201061
Declaring variables
scope maintained
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201062
With var
Oops! Automatically global
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201063
Without var
window in browsers
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201064
Globals are properties ofglobal object
globals!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201065
CODE TIME
This is awesome
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201066
Closures
Anything within context of function declaration is fair game
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201067
Using a var from outside function
Closures
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201068
CODE TIME
Literally
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201069
Literals
Right.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201070
Numbers
Yep.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201071
Booleans
Hmmm.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201072
RegExp
Hey there.
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201073
['a','r','r','a','y','s'];
Oh snap!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201074
{object:"literals"};
Literals
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201075
CODE TIME
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201076
Operators
+ , = == === < > ! && ||
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201077
Mostly like PHP
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201078
this
Remember, no classes in JS
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201079
new
Does this key exist?
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201080
in
"is X of type Y?"
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201081
instanceof
Returns string of core type
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201082
typeof
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201083
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"
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201084
Type conversion
Radix is optional, but Douglas Crockford will hate you
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201085
parseInt(val, [radix])
Like parseInt, returns NaN if cannot convert
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201086
parseFloat(val)
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201087
String(obj)
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201088
Number(obj)
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201089
Boolean(obj)
http://jibbering.com/faq/notes/type-conversion/
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201090
Functions
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201091
In the procedural tradition
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201092
As objects
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201093
As constructors
with new
An array, kind of
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201094
Function arguments
Fun with functions
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201095
CODE TIME
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201096
Objects
Or associative arrays
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201097
As hashes
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201098
As static modules
Objects as modules
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 201099
CODE TIME
Not a word
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010100
As instance-able objects
Just make the object and have a constructor func
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010101
No classes
No public, private, protected
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010102
No visibility levels
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010103
Prototypes & inheritance
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010104
Every object has a prototype
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010105
Prototype providesattributes of object
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010106
Modifying prototype changesall objects that use it
points to constructor function of object
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010107
Prototype has .constructor
Prototypes and inheritance
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010108
CODE TIME
Kinda suck in JS
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010109
Dates
Almost a necessary evil
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010110
eval()
That again
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010111
Malleability
Cookies???
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010112
BREAK TIME
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010113
JS in the browser
Non-sequential, long-running
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010114
Execution model
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010115
Single threaded
Oh the humanity
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010116
Browser compatibility
Woo wee!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010117
DOM APIs
Words and pictures and movin' stuff!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010118
Elements and events
Trust me
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010119
These are terrible
They suck
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010120
I'm not going to teach you these
Basically fixes everything
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010121
Just use jQuery
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010122
HTTP interaction
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010123
The XMLHttpRequest Object
GETing and POSTing
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010124
JSON is love
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010125
Use JSON2.js
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010126
Newer browsers havenative implementations
Web APIs, woooooooooo!
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010127
CODE TIME
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010128
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
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010130
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/
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010131
Resources:Books
•JavaScript: The Definitive GuideDavid Flanagan
•JavaScript: The Good PartsDouglas Crockford
•High-Performance JavaScriptNicholas C. Zakas, et al
•JavaScript PatternsStoyan Stefanov
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010132
References
JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010133
References
•Mozilla Dev Center: Core JavaScript Guide•Eloquent JavaScript