1. JavaScript for PHP developers
Stoyan Stefanov
March 11, 2011
Confoo.ca, Montreal

2. Stoyan Stefanov
 SAP Labs in Montreal
 Yahoo! Music, Web Performance, Search,
YSlow, smush.it
 Facebook

3. Stoyan Stefanov - Books

4. JavaScript – first impressions

5. DOM/BOM
 These days libraries can take care of most pains
 Let’s focus on the core JavaScript (ECMAScript)
language

6. JavaScript core
 C-like syntax
 Small built-in API
 (I’ll show you most of it in 15 minutes)

7. Strange things
 Functions are objects
 Functions provide scope
 Closures (in PHP since 5.3)
 Prototypes
 No classes

8. Syntax
Mostly the same as PHP

9. Variables
var n = 1;
$n = 1;

10. Variables
var b = true;
$b = true;

11. Variables
var s = "confoo";
$s = "confoo";

12. Arrays
var a = [1,2,3];
$a = array(1,2,3);

13. Assoc arrays
var o = {
"one": 1,
"two": 2
};
$o = array(
"one" => 1,
"two" => 2
);

14. if
if (1 === 1) {
universe = "fine";
};
if (1 === 1) {
$universe = "fine";
};

15. falsy values
0, "", false, undefined, null
0 == "" // true
0 === "" // false

16. switch
var a = 1;
var result = "";
switch (a) {
case 1: // strict comparison
result = "a is 1";
break;
default:
result = "@#$";
}

17. try-catch
try {
throw new Error('ouch');
} catch (e) {
msg = e.message;
}
try {
throw new Exception('ouch');
} catch (Exception $e) {
$msg = $e->getMessage();
}

18. while
var i = 0, out = '';
while (i < 100) {
out += ++i + ",";
}
$i = 0; $out = '';
while ($i < 100) {
$out .= ++$i . ",";
}

19. do-while
var i = 0, out = '';
do {
out += ++i + ",";
} while (i < 100);
$i = 0; $out = '';
do {
$out .= ++$i . ",";
} while ($i < 100);

20. for
for (var i = 0, out = ''; i < 100; i++) {
out += i + ',';
}
for ($i = 0, $out = ''; $i < 100; $i++) {
$out .= $i . ',';
}

21. for-in/foreach
for (var k in stuff) {
keys += k;
values += stuff[k];
}
foreach ($stuff as $k => $v) {
$keys .= $k;
$values .= $v;
}

22. function
function junction(a, b) {
return a * b;
}
function junction($a, $b) {
return $a * $b;
}

23. function
function junction(a, b) {
b = b || 2;
return a * b;
}
function junction($a, $b = 2) {
return $a * $b;
}

24. function
function junction(a, b) {
b = typeof b !== "undefined" ? b : 2;
return a * b;
}
function junction($a, $b = 2) {
return $a * $b;
}

25. functions are objects
var junction = function (a, b) {
return a * b;
};
junction(3, 4); // 12
junction.length; // 2

26. functions are objects
junction.call(null, 3, 4); // 12
junction.apply(null, [3, 4]); // 12
call_user_func('junction', 3, 4);
call_user_func_array('junction', array(3, 4));

27. closures
var junction = function (a, b) {
return a * b;
};
junction(3, 4); // 12
$junction = function($a, $b) {
return $a * $b;
};
$junction(3, 4); // 12

28. function scope
$a = function() {
$c = 3;
$b = function($a, $b) {
return $c * $a * $b;
};
return $b;
};
$b = $a();
$b(1, 2); // 0 in PHP, 6 in JS

29. Constructors/Classes
var fido = new Dog();
$fido = new Dog();

30. PHP Class
class Dog {
var $name;
function construct($name) {
$this->name = $name;
}
function getName() {
return $this->name;
}
$fido = new Dog("Fido");
} $fido->getName(); // Fido

31. JS constructor function
function Dog (name) {
this.name = name;
this.getName = function () {
return this.name;
};
}
var fido = new Dog("Fido");
fido.getName();

32. JS constructor function
 Constructors are just functions
 Functions called with new…
 …return this…
 …implicitly.

33. Constructor and prototype
function Dog (name) {
this.name = name;
}
Dog.prototype.getName = function () {
return this.name;
};
var fido = new Dog("Fido");
fido.getName();

34. Prototypes
 Every function has a prototype property
 It’s useless, unless …
 … the functions is called with new.

35. Constructor and prototype
function Dog (name) {
this.name = name;
}
Dog.prototype.getName = function () {
return this.name;
};
var fido = new Dog("Fido");
fido.getName(); // Fido

36. Object literals
var fido = {
name: "Fido",
getName: function() {
return this.name;
}
};
fido.getName(); // Fido

37. Object literals
var fido = {};

38. Object literals
var fido = {};
fido.name = "Fido";

39. Object literals
var fido = {
name: "Fido"
};
fido.name; // Fido

40. Object literals
var fido = {
name: "Fido",
getName: function() {
return this.name;
}
};
fido.getName(); // Fido

41. Literals
var fido = {};
fido.name = "Fido";
$fido = (object) array();
$fido->name = "Fido";
$fido = new stdClass();
$fido->name = "Fido";

42. Literals in PHP
$fido = (object)array();
$fido->name = 'Fido';
$fido->getName = function() {
return $GLOBALS['fido']->name;
};
$method = $fido->getName;
echo $method();

43. Literals in PHP
$fido = new JSObject();
$fido->name = 'Fido';
$fido->getName = function($self) {
return $self->name;
};
$fido->getName(); // Fido

44. Literals in PHP
class JSObject {
function call($name, $args) {
if (is_callable($this->$name)) {
array_unshift($args, $this);
return call_user_func_array($this->$name, $args);
}
}
}

45. Funny operators
 typeof
 typeof 1; // "number"
 typeof(1);
 instanceof
 ([1,2]) instanceof Array; // true
 ([1,2]) instanceof Object; // true
 delete
 var o = {a: 1}; delete o.a; o.a; // undefined
 void
 returns undefined whatever the operand

46. The built-in API
In 15 minutes or less

47. Global object
 something Like $GLOBALS[] but object
 May or may not be accessible directly
 Accessible as window in browsers

48. 3 global properties
 NaN
 Infinity
 undefined

49. 9 global functions
 4 number-related PHP:
 parseInt() intval()
 parseFloat() floatval()
 isNaN() is_nan()
 isFinite() is_finite()
 4 to encode/decode URIs
 encodeURIComponent() urlencode()
 decodeURIComponent() urldecode()
 encodeURI() ??()
 decodeURI() ??()
 eval() eval()

50. 9+ constructors
 Object()
 Array()
 RegExp()
 Function()
 String()
 Number()
 Boolean()
 Error(), SyntaxError()…
 Date()

51. We don’t need no constructors
 object literals
// yep
var o = {};
// nope
var o = new Object();

52. We don’t need no constructors
 array literals
// yep
var a = [];
// nope
var a = new Array();

53. We don’t need no constructors
 regular expression literals
// yep
var re = /[a-z]/gmi;
// proly nope
var re = new RegExp("[a-z]", "gmi");

54. We don’t need no constructors
 functions
// yep
var f = function(a, b) {return a + b;};
// yep
function f(a, b) {return a + b;}
// nope
var f = new Function("a, b",
"return a + b;");

55. We don’t need no constructors
 strings
// yep
var s = "confoo";
// nope
var s = new String("confoo");
s.substr(3); // "foo"
"confoo".substr(0, 4); // "conf"

56. We don’t need no constructors
 numbers
// yep
var n = 1.2345;
// nope
var n = new Number(1.2345);
n.toFixed(2); // 1.23

57. We don’t need no constructors
 boolean
// yep
var b = true;
// nope, why would you ever
var b = new Boolean(true);

58. We don’t need no constructors
 Errors
throw new Error("Ouch");
// but you could also
throw {
name: "MyError",
message: "Ouch"
};

59. Constructors
 Object()
 Array()
 RegExp()
 Function()
 String()
 Number()
 Boolean()
 Error(), SyntaxError()…
 Date()

60. The built-in API (contd.)
Properties and methods

61. Object.prototype
var o = {};
o.toString(); // "[object Object]"
o.toLocaleString(); // "[object Object]"
o.valueOf() === o; // true
o.hasOwnProperty('toString'); // false
o.propertyIsEnumerable('toString'); // false
o.isPrototypeOf(Array); // false
o.constructor === Object; // true

62. Array.prototype
var a = [1,2,3,4];
a.length; // 4
a.push('dude'); // 5, the length
a.pop(); // "dude"
a.unshift('dude'); // 5, the length
a.shift(); // "dude"
a.concat(5,6,7); // [1,2,3,4,5,6,7]

63. Array.prototype
a.sort(callback);
a.indexOf(3); // 2
a.lastIndexOf(3); // 2
a.slice(1, 3); // [2, 3]
a.splice(...); // remove and add
a.reverse(); // [4, 3, 2, 1]
a.join(' > '); // implode()

64. RegExp.prototype
var re = /[a-z]/gmi;
re.exec("somestring"); // returns matches
re.test("somestring"); // returns true|false
re.lastIndex;
re.source; // "[a-z]"
/[0-9]/g.global; // true
/[0-9]/m.multiline; // true
/[0-9]/i.ignoreCase; // true

65. Function.prototype
 length
 name // not standard
 call()
 apply()

66. String.prototype
var s = "confoo";
s.length; // 6
s.indexOf('o'); // 1
s.lastIndexOf('o'); // 5
s.charAt(1); // "o"
s.charCodeAt(1); // 111

67. String.prototype
s.toLowerCase();
s.toUppercase();
s.toLocaleLowerCase();
s.toLocaleUpperCase();
s.localeCompare();

68. String.prototype
s.split(/f/); // ["con", "oo"]
s.concat('.ca'); // "confoo.ca"
s.search(/foo/); // 3
s.replace(/o/g, "@"); // c@nf@@
s.match(/[a-z]/g); // ["c", "o", "n", ..
s.slice(3, 6); // "foo"
s.substring(0, 3); // "con", substr() too

69. Number.protoype
new Number(123).toFixed(2); // "123.00"
(1000000000000).toExponential(); // "1e+12"
(1000000000000).toPrecision(3); // "1.00e+12"
Number.MAX_VALUE; // 1.7976931348623157e+308
Number.MIN_VALUE; // 5e-324
Number.POSITIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity
Number.NaN; // NaN

70. Math
 Not a constructor
 Constants
Math.E, Math.PI... and 6 more
 Methods
Math.min(), Math.max(),
Math.random(), Math.sin()
... and 14 more

71. Error.prototype
 name
 message

72. Date.prototype
 You’re on your own!
var d = new Date(2011, 3, 11);
d.getDate(); d.getDay(); d.getFullYear(); d.getHours();
d.getMilliseconds(); d.getMinutes(); d.getMonth();
d.getSeconds(); d.getTime(); d.getTimezoneOffset();
d.getUTCDate(); d.getUTCDay(); d.getUTCFullYear();
d.getUTCHours(); d.getUTCMilliseconds(); d.getUTCMinutes();
d.getUTCMonth(); d.getUTCSeconds(); d.getYear(); d.setDate();
d.setFullYear(); d.setHours(); d.setMilliseconds();
d.setMinutes(); d.setMonth(); d.setSeconds(); d.setTime();
d.setUTCDate(); d.setUTCFullYear(); d.setUTCHours();
d.setUTCMilliseconds(); d.setUTCMinutes(); d.setUTCMonth();
d.setUTCSeconds(); d.setYear(); d.toDateString();
d.toGMTString(); d.toLocaleDateString(); d.toLocaleFormat();
d.toLocaleTimeString(); d.toString(); d.toTimeString();
d.toUTCString();
Date.now(); Date.parse(); Date.UTC();

73. Constructors
 Object()
 Array()
 RegExp()
 Function()
 String()
 Number() + Math
 Boolean()
 Error(), SyntaxError()…
 Date()

74. Quiz
What have we learned today?

75.  JavaScript has classes


76.  Arrays are objects


77.  Functions are objects


78.  Classes have a prototype property


79.  Objects have a prototype property


80.  Functions have a prototype
property


81.  Prototype properties are used with
new


82. phpjs.org
 When you miss a PHP function in JavaScript

83. Learning
 https://developer.mozilla.org/en/JavaScript/
Reference
 ECMAScript tweeps: @DmitrySoshnikov,
@abozhilov, @kangax, @WebReflection
 http://jsmentors.com
 Slides: http://slideshare.net/stoyan/

84. Thank you!

85. Thank you!

86. Thank you!

87. Thank you!