JavaScript for PHP Developers - Funkatron

JavaScript for PHP Developers Ed Finkler @funkatron [email protected] May 18, 2010 #tekX #js4php http://joind.in/1564

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

3


- get you to stop copying and pasting and start writing JS

NOT CS-oriented I'm too dumb for that

4


- for much smarter people than me - I'm constantly learning new stuff about JavaScript 3 years after

My experiences and best practices FWIW

5


JavaScript dev is opinionated JS devs are kind of dickheads

6


History of JavaScript

7


Brendan Eich

8


"Mocha"

9


"LiveScript"

10


"JavaScript" Seemed like a good idea at the time

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

11


Jesus Christ what a bad name

ECMAScript Yeesh

12


Core JavaScript

13


Baseline is JS 1.5 aka ECMAScript 3, circa 1999

14


There are newer versions and functionality has been added, but you can't necessarily rely on anything beyond 1.5 to be supported everywhere

Dynamically typed Hey, I know that!

15


Object-based

16


Object-oriented But not how you think

17


No classes Prototypal inheritance

Functional First class, baby!

18


Pass functions as parameters Declare functions anywhere Anonymous ("lamba") functions used a lot

Malleable Like giving clay to a monkey

19


you can redefine almost anything, including core objects

Core is pretty darn small You mean I don't have to memorize 4,500 function names?

20


Core JS Core Objects

Core Global Functions

Boolean

decodeURI

Number

decodeURIComponent

String

encodeURI

Array

encodeURIComponent

Object

eval

Function

isFinite

RegExp

isNaN

Date

parseFloat parseInt

21


What's missing? All the cool stuff!

22


File i/o

23


Networking

24


DB APIs

25


DOM Yep, the DOM is not part of JavaScript

26


So what's it good for? Please don't leave yet.

27


So what's it good for? Please don't leave yet.

28


Asynchronous actions What?

29


Like GUI stuff Oh!

30


Browsers!

31


Web Runtime Platforms!

32


Widget engines! Dear God

33


Server-side platforms

34


Node.js http://nodejs.org/

35


Narwhal http://narwhaljs.org/

36


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

37


SSJS isn't terribly mature Don't quit your day job

38


Syntax

39


C/Java-like Like PHP!

40


Variable names don't start with '$' But they can.

41


They can just be '$'. Or '_'

Concatenation with '+' Not dot.

42


Dot for members. Or [] Not '->'. You will screw this up.

43


Always case-sensitive You will also screw this up.

44


Semicolons are optional But you had better always use them

45


CODE TIME Semicolons!

46


Data Types "Primitives"

47


Numbers Integers and floats

48


Booleans Truthy

49


Strings

50


null Not NULL, not Null.

51


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

52


That's it.

53


Other elements

54


Objects MDC: "Named containers for values"

55


Arrays, Date, RegExp All objects

56


Functions MDC: "Procedures your application can perform"

57


Scope Hang on!

58


More bleed than PHP

59


Globals automatically available No need for global declaration

60


Declaring variables With or without

61


With var scope maintained

62


Without var Oops! Automatically global

63


Don't do this

Globals are properties of global object window in browsers

64


CODE TIME globals!

65


Closures This is awesome

66


Using a var from outside function Anything within context of function declaration is fair game

67


Don't need to declare this with "use" as in PHP5.3

CODE TIME Closures

68


Literals Literally

69


Numbers Right.

70


Booleans Yep.

71


RegExp Hmmm.

72


['a','r','r','a','y','s']; Hey there.

73


This is such a pain in the ass to do in PHP. numeric index-only, though

{object:"literals"}; Oh snap!

74


This is even worse in PHP.

CODE TIME Literals

75


Operators

76


Mostly like PHP + , = == === < > ! && ||

77


this

78


Actually like PHP, but scope bleed means it is less predictable

new Remember, no classes in JS

79


Returns an instance of an object Any function can be a constructor

in Does this key exist?

80


instanceof "is X of type Y?"

81


typeof Returns string of core type

82


Less useful than you might think

83

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 undefined

"undefined"


"not a number" is a number, apparently

Type conversion

84


parseInt(val, [radix]) Radix is optional, but Douglas Crockford will hate you

85


parseFloat(val) Like parseInt, returns NaN if cannot convert

86


String(obj)

87


Number(obj)

88


Boolean(obj)

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

89


Functions

90


In the procedural tradition

91


As objects

92


As constructors

93


Function arguments An array, kind of

94


CODE TIME Fun with functions

95


Objects

96


As hashes Or associative arrays

97


As static modules

98


CODE TIME Objects as modules

99


As instance-able objects Not a word

100


No classes Just make the object and have a constructor func

101


No visibility levels No public, private, protected

102


Prototypes & inheritance

103


Every object has a prototype

104


Prototype provides attributes of object

105


Modifying prototype changes all objects that use it

106


Prototype has .constructor points to constructor function of object

107


CODE TIME Prototypes and inheritance

108


Dates Kinda suck in JS

109


eval() Almost a necessary evil

110


Malleability That again

111


- You can dynamically redefine almost any object property in JS - Many JS frameworks extend code objects - I generally don't like this - can cause unexpected behavior (for…in) - can cause compatibility issues - People do this because in many cases they HAVE to - JS code is so small that it, in many ways, forces strong, divergent implementations

BREAK TIME Cookies???

112


JS in the browser

113


- Most common context - Incredibly rich, diverse community - much like PHP

Execution model Non-sequential, long-running

114


- mem leaks become an issue

Single threaded

115


- web workers

Browser compatibility Oh the humanity

116


DOM APIs Woo wee!

117


Elements and events Words and pictures and movin' stuff!

118


These are terrible Trust me

119


I'm not going to teach you these They suck

120


It's not a complete waste of your time, but…

Just use jQuery Basically fixes everything

121


No, it's not the only way, but it's very good, very compatible, and very popular

CODE TIME DOM manipulation and events

122


* Spaz Keyboard Nav Text example; * SpazMenu

HTTP interaction

123


JSON is love

124


Use JSON2.js

125


Newer browsers have native implementations

126


CODE TIME Web APIs, woooooooooo!

127


* TMDB * ShortURL

Resources

128


Resources:Code • SpazCore http://github.com/funkatron/spazcore • Underscore.js http://documentcloud.github.com/underscore/ • http://delicious.com/funka7ron/javascript

129

- - -

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


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

131


References

132


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

133
