1.
JavaScript for PHP developersStoyan StefanovMarch 11, 2011Confoo.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.
SyntaxMostly the same as PHP

9.
Variablesvar n = 1; $n = 1;

10.
Variablesvar b = true; $b = true;

11.
Variablesvar s = "confoo"; $s = "confoo";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26.
functions are objectsjunction.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.
closuresvar 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/Classesvar fido = new Dog(); $fido = new Dog();

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

31.
JS constructor functionfunction 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 prototypefunction 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 prototypefunction Dog (name) { this.name = name; } Dog.prototype.getName = function () { return this.name; }; var fido = new Dog("Fido"); fido.getName(); // Fido

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

37.
Object literalsvar fido = {};

38.
Object literalsvar fido = {}; fido.name = "Fido";

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

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

41.
Literalsvar 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 PHPclass 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 APIIn 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.prototypevar 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.prototypevar 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.prototypea.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.prototypevar 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.prototypevar s = "confoo"; s.length; // 6 s.indexOf(o); // 1 s.lastIndexOf(o); // 5 s.charAt(1); // "o" s.charCodeAt(1); // 111

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

68.
String.prototypes.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.protoypenew 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.
QuizWhat 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!