This document provides an overview of JavaScript for PHP developers. It compares the syntax and core concepts between the two languages. Some of the key points covered include: variables and data types are similar, functions are objects in JavaScript, JavaScript uses prototypes instead of classes, and functions provide scope. The document also summarizes the built-in global functions and properties, common methods for objects like Array and String, and emphasizes that constructor functions are often not needed in JavaScript.

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
C

76. ¤ Arrays are objects
C

77. ¤ Functions are objects
C

78. ¤ Classes have a prototype property
C

79. ¤ Objects have a prototype property
C

80. ¤ Functions have a prototype
property
C

81. ¤ Prototype properties are used with
new
C

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!