JavaScript for PHP Developers

JavaScript for PHP Developers Ed Finkler @funkatron coj@funkatron.com November 1, 2010 #zendcon #js4php http://joind.in/2289

Goodsie.com Invitation code: zendcon 2 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

What is this? 3 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

A practical overview of JS for the PHP developer Stop c+p'ing, start writing 4 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

NOT CS-oriented I'm too dumb for that 5 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

My experiences and best practices FWIW 6 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

JavaScript dev is opinionated JS devs are kind of dickheads 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 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

"JavaScript" Seemed like a good idea at the time http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704 12 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

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

Baseline is JS 1.5 aka ECMAScript 3, circa 1999 15 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Dynamically typed Hey, I know that! 16 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Object-oriented But not how you think 18 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Functional First class, baby! 19 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Malleable Like giving clay to a monkey 20 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Core is pretty darn small You mean I don't have to memorize 4,500 function names? 21 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Core JS Core Objects Core Global Functions Boolean decodeURI Number decodeURIComponent String encodeURI Array encodeURIComponent Object eval Function isFinite RegExp isNaN Date parseFloat parseInt 22 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

What's missing? All the cool stuff! 23 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

File i/o 24 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

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

DOM Yep, the DOM is not part of JavaScript 27 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

So what's it good for? Please don't leave yet. 28 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Asynchronous actions What? 29 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Like GUI stuff Oh! 30 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Web Runtime Platforms! 32 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Widget engines! Dear God 33 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Server-side platforms 34 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Node.js http://nodejs.org/ 35 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Narwhal http://narwhaljs.org/ 36 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

v8cgi http://code.google.com/p/v8cgi/ 37 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

SSJS isn't terribly mature But it's super fun! 38 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

C/Java-like Like PHP! 40 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Variable names don't start with '$' But they can. 41 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Concatenation with '+' Not dot. 42 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Dot for members. Or [] Not '->'. You will screw this up. 43 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Always case-sensitive You will also screw this up. 44 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Semicolons are optional But you had better always use them 45 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Semicolons! 46 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Data Types "Primitives" 47 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Numbers Integers and ﬂoats 48 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

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

null Not NULL, not Null. 51 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

undefined Declared, but no value set. Not the same as null 52 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

That's it. 53 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Objects MDC: "Named containers for values" 55 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Arrays, Date, RegExp All objects 56 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Functions MDC: "Procedures your application can perform" 57 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Scope Hang on! 58 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

More bleed than PHP Functional scope only 59 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Globals automatically available No need for global declaration 60 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Declaring variables With or without 61 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

With var scope maintained 62 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Without var Oops! Automatically global 63 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Globals are properties of global object window in browsers 64 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME globals! 65 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Closures This is awesome 66 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Using a var from outside function Anything within context of function declaration is fair game 67 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Closures 68 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Numbers Right. 70 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Booleans Yep. 71 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

RegExp Hmmm. 72 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

['a','r','r','a','y','s']; Hey there. 73 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

{object:"literals"}; Oh snap! 74 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Literals 75 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Mostly like PHP + , = == === < > ! && || 77 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

new Remember, no classes in JS 79 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

in Does this key exist? 80 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

instanceof "is X of type Y?" 81 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

typeof Returns string of core type 82 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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" 83 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

parseInt(val, [radix]) Radix is optional, but Douglas Crockford will hate you 85 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

parseFloat(val) Like parseInt, returns NaN if cannot convert 86 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

String(obj) 87 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Number(obj) 88 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Boolean(obj) http://jibbering.com/faq/notes/type-conversion/ 89 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

In the procedural tradition 91 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

As constructors with new 93 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Function arguments An array, kind of 94 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Fun with functions 95 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

As hashes Or associative arrays 97 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

As static modules 98 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Objects as modules 99 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

As instance-able objects Not a word 100 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

No classes Just make the object and have a constructor func 101 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

No visibility levels No public, private, protected 102 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Prototypes & inheritance 103 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Every object has a prototype 104 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Prototype provides attributes of object 105 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Modifying prototype changes all objects that use it 106 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Prototype has .constructor points to constructor function of object 107 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Prototypes and inheritance 108 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Dates Kinda suck in JS 109 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

eval() Almost a necessary evil 110 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Malleability That again 111 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

BREAK TIME Cookies??? 112 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

JS in the browser 113 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Execution model Non-sequential, long-running 114 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

Browser compatibility Oh the humanity 116 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

DOM APIs Woo wee! 117 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Elements and events Words and pictures and movin' stuff! 118 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

These are terrible Trust me 119 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

I'm not going to teach you these They suck 120 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Just use jQuery Basically ﬁxes everything 121 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

The XMLHttpRequest Object GETing and POSTing 123 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

JSON is love 124 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Use JSON2.js 125 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

Newer browsers have native implementations 126 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

CODE TIME Web APIs, woooooooooo! 127 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

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/ 130 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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 131 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

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

References • Mozilla Dev Center: Core JavaScript Guide • Eloquent JavaScript 133 JavaScript for PHP Developers - Ed Finkler - ZendCon - November 1, 2010

http://blog.codestars.eu	229
http://feeds.feedburner.com	4
http://cache.baidu.com	2
http://88.84.129.155	1

JavaScript for PHP Developers

by funkatron on Nov 02, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 236

Statistics

JavaScript for PHP Developers — Presentation Transcript