JavaScript for PHP Developers

Transcription

1 JavaScript for PHP Developers Ed May 18, 2010 #tekx #js4php

2 What is this? 2

3 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

4 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

5 My experiences and best practices FWIW 5

6 JavaScript dev is opinionated JS devs are kind of dickheads 6

7 History of JavaScript 7

8 Brendan Eich 8

9 "Mocha" 9

10 "LiveScript" 10

11 "JavaScript" Seemed like a good idea at the time 11 Jesus Christ what a bad name

12 ECMAScript Yeesh 12

13 Core JavaScript 13

14 Baseline is JS 1.5 aka ECMAScript 3, circa There are newer versions and functionality has been added, but you can't necessarily rely on anything beyond 1.5 to be supported everywhere

15 Dynamically typed Hey, I know that! 15

16 Object-based 16

17 Object-oriented But not how you think 17 No classes Prototypal inheritance

18 Functional First class, baby! 18 Pass functions as parameters Declare functions anywhere Anonymous ("lamba") functions used a lot

19 Malleable Like giving clay to a monkey 19 you can redefine almost anything, including core objects

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

21 Core JS Core Objects Boolean Number String Array Object Function RegExp Date Core Global Functions decodeuri decodeuricomponent encodeuri encodeuricomponent eval isfinite isnan parsefloat parseint 21

22 What's missing? All the cool stuff! 22

23 File i/o 23

24 Networking 24

25 DB APIs 25

26 DOM Yep, the DOM is not part of JavaScript 26

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

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

29 Asynchronous actions What? 29

30 Like GUI stuff Oh! 30

31 Browsers! 31

32 Web Runtime Platforms! 32

33 Widget engines! Dear God 33

34 Server-side platforms 34

35 Node.js 35

36 Narwhal 36

37 v8cgi 37

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

39 Syntax 39

40 C/Java-like Like PHP! 40

41 Variable names don't start with '$' But they can. 41 They can just be '$'. Or '_'

42 Concatenation with '+' Not dot. 42

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

44 Always case-sensitive You will also screw this up. 44

45 Semicolons are optional But you had better always use them 45

46 CODE TIME Semicolons! 46

47 Data Types "Primitives" 47

48 Numbers Integers and floats 48

49 Booleans Truthy 49

50 Strings 50

51 null Not NULL, not Null. 51

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

53 That's it. 53

54 Other elements 54

55 Objects MDC: "Named containers for values" 55

56 Arrays, Date, RegExp All objects 56

57 Functions MDC: "Procedures your application can perform" 57

58 Scope Hang on! 58

59 More bleed than PHP 59

60 Globals automatically available No need for global declaration 60

61 Declaring variables With or without 61

62 With var scope maintained 62

63 Without var Oops! Automatically global 63 Don't do this

64 Globals are properties of global object window in browsers 64

65 CODE TIME globals! 65

66 Closures This is awesome 66

67 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

68 CODE TIME Closures 68

69 Literals Literally 69

70 Numbers Right. 70

71 Booleans Yep. 71

72 RegExp Hmmm. 72

73 ['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

74 {object:"literals"}; Oh snap! 74 This is even worse in PHP.

75 CODE TIME Literals 75

76 Operators 76

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

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

79 new Remember, no classes in JS 79 Returns an instance of an object Any function can be a constructor

80 in Does this key exist? 80

81 instanceof "is X of type Y?" 81

82 typeof Returns string of core type 82 Less useful than you might think

83 typeof typeof {} typeof function() {} typeof new Function(); typeof true typeof new Date(); typeof [1,2,3] typeof NaN typeof null typeof undefined returns "object" "function" "function" "boolean" "object" // not "date"; use instanceof "object" // not "array" "number" "object" "undefined" 83 "not a number" is a number, apparently

84 Type conversion 84

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

86 parsefloat(val) Like parseint, returns NaN if cannot convert 86

87 String(obj) 87

88 Number(obj) 88

89 Boolean(obj) 89

90 Functions 90

91 In the procedural tradition 91

92 As objects 92

93 As constructors 93

94 Function arguments An array, kind of 94

95 CODE TIME Fun with functions 95

96 Objects 96

97 As hashes Or associative arrays 97

98 As static modules 98

99 CODE TIME Objects as modules 99

100 As instance-able objects Not a word 100

101 No classes Just make the object and have a constructor func 101

102 No visibility levels No public, private, protected 102

103 Prototypes & inheritance 103

104 Every object has a prototype 104

105 Prototype provides attributes of object 105

106 Modifying prototype changes all objects that use it 106

107 Prototype has.constructor points to constructor function of object 107

108 CODE TIME Prototypes and inheritance 108

109 Dates Kinda suck in JS 109

110 eval() Almost a necessary evil 110

111 Malleability That again 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

112 BREAK TIME Cookies??? 112

113 JS in the browser Most common context - Incredibly rich, diverse community - much like PHP

114 Execution model Non-sequential, long-running mem leaks become an issue

115 Single threaded web workers

116 Browser compatibility Oh the humanity 116

117 DOM APIs Woo wee! 117

118 Elements and events Words and pictures and movin' stuff! 118

119 These are terrible Trust me 119

120 I'm not going to teach you these They suck 120 It's not a complete waste of your time, but

121 Just use jquery Basically fixes everything 121 No, it's not the only way, but it's very good, very compatible, and very popular

122 CODE TIME DOM manipulation and events 122 * Spaz Keyboard Nav Text example; * SpazMenu

123 HTTP interaction 123

124 JSON is love 124

125 Use JSON2.js 125

126 Newer browsers have native implementations 126

127 CODE TIME Web APIs, woooooooooo! 127 * TMDB * ShortURL

128 Resources 128

129 Resources:Code SpazCore Underscore.js <Name of Talk> - <Who> - <Where> - <When>

130 Resources:Web Mozilla Dev Center: Code JavaScript Guide Mozilla Dev Center: Core JavaScript Reference Eloquent JavaScript comp.lang.javascript FAQ Nicholas C. Zakas' Blog John Resig's Blog

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

132 References 132

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