JavaScript for PHP developers

Transcript

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 ¤  parseInt() ¤  parseFloat() ¤  isNaN() ¤  isFinite() ¤ 4 to encode/decode URIs ¤  encodeURIComponent() ¤  decodeURIComponent() ¤  encodeURI() ¤  decodeURI() ¤ eval() PHP: intval() floatval() is_nan() is_finite() urlencode() urldecode() ??() ??() 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!