Successfully reported this slideshow.

JavaScript for PHP developers

50

Share

Upcoming SlideShare
JavaScript Growing Up
JavaScript Growing Up
Loading in …3
×
1 of 84
1 of 84

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

JavaScript for PHP developers

  1. 1. JavaScript for PHP developers Stoyan Stefanov March 11, 2011 Confoo.ca, Montreal
  2. 2. Stoyan Stefanov ¤  SAP Labs in Montreal ¤  Yahoo! Music, Web Performance, Search, YSlow, smush.it ¤  Facebook
  3. 3. Stoyan Stefanov - Books
  4. 4. JavaScript – first impressions
  5. 5. DOM/BOM ¤  These days libraries can take care of most pains ¤  Let’s focus on the core JavaScript (ECMAScript) language
  6. 6. JavaScript core ¤  C-like syntax ¤  Small built-in API ¤  (I’ll show you most of it in 15 minutes)
  7. 7. Strange things ¤  Functions are objects ¤  Functions provide scope ¤  Closures (in PHP since 5.3) ¤  Prototypes ¤  No classes
  8. 8. Syntax Mostly the same as PHP
  9. 9. Variables var n = 1; $n = 1;
  10. 10. Variables var b = true; $b = true;
  11. 11. Variables var s = "confoo"; $s = "confoo";
  12. 12. Arrays var a = [1,2,3]; $a = array(1,2,3);
  13. 13. Assoc arrays var o = { "one": 1, "two": 2 }; $o = array( "one" => 1, "two" => 2 );
  14. 14. if if (1 === 1) { universe = "fine"; }; if (1 === 1) { $universe = "fine"; };
  15. 15. falsy values 0, "", false, undefined, null 0 == "" // true 0 === "" // false
  16. 16. switch var a = 1; var result = ""; switch (a) { case 1: // strict comparison result = "a is 1"; break; default: result = "@#$"; }
  17. 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. 18. while var i = 0, out = ''; while (i < 100) { out += ++i + ","; } $i = 0; $out = ''; while ($i < 100) { $out .= ++$i . ","; }
  19. 19. do-while var i = 0, out = ''; do { out += ++i + ","; } while (i < 100); $i = 0; $out = ''; do { $out .= ++$i . ","; } while ($i < 100);
  20. 20. for for (var i = 0, out = ''; i < 100; i++) { out += i + ','; } for ($i = 0, $out = ''; $i < 100; $i++) { $out .= $i . ','; }
  21. 21. for-in/foreach for (var k in stuff) { keys += k; values += stuff[k]; } foreach ($stuff as $k => $v) { $keys .= $k; $values .= $v; }
  22. 22. function function junction(a, b) { return a * b; } function junction($a, $b) { return $a * $b; }
  23. 23. function function junction(a, b) { b = b || 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
  24. 24. function function junction(a, b) { b = typeof b !== "undefined" ? b : 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
  25. 25. functions are objects var junction = function (a, b) { return a * b; }; junction(3, 4); // 12 junction.length; // 2
  26. 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. 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. 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. 29. Constructors/Classes var fido = new Dog(); $fido = new Dog();
  30. 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. 31. JS constructor function function Dog (name) { this.name = name; this.getName = function () { return this.name; }; } var fido = new Dog("Fido"); fido.getName();
  32. 32. JS constructor function ¤  Constructors are just functions ¤  Functions called with new… ¤  …return this… ¤  …implicitly.
  33. 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. 34. Prototypes ¤  Every function has a prototype property ¤  It’s useless, unless … ¤  … the functions is called with new.
  35. 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. 36. Object literals var fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
  37. 37. Object literals var fido = {};
  38. 38. Object literals var fido = {}; fido.name = "Fido";
  39. 39. Object literals var fido = { name: "Fido" }; fido.name; // Fido
  40. 40. Object literals var fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
  41. 41. Literals var fido = {}; fido.name = "Fido"; $fido = (object) array(); $fido->name = "Fido"; $fido = new stdClass(); $fido->name = "Fido";
  42. 42. Literals in PHP $fido = (object)array(); $fido->name = 'Fido'; $fido->getName = function() { return $GLOBALS['fido']->name; }; $method = $fido->getName; echo $method();
  43. 43. Literals in PHP $fido = new JSObject(); $fido->name = 'Fido'; $fido->getName = function($self) { return $self->name; }; $fido->getName(); // Fido
  44. 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. 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. 46. The built-in API In 15 minutes or less
  47. 47. Global object ¤  something Like $GLOBALS[] but object ¤  May or may not be accessible directly ¤  Accessible as window in browsers
  48. 48. 3 global properties ¤  NaN ¤  Infinity ¤  undefined
  49. 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. 50. 9+ constructors ¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
  51. 51. We don’t need no constructors ¤  object literals // yep var o = {}; // nope var o = new Object();
  52. 52. We don’t need no constructors ¤  array literals // yep var a = []; // nope var a = new Array();
  53. 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. 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. 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. 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. 57. We don’t need no constructors ¤  boolean // yep var b = true; // nope, why would you ever var b = new Boolean(true);
  58. 58. We don’t need no constructors ¤  Errors throw new Error("Ouch"); // but you could also throw { name: "MyError", message: "Ouch" };
  59. 59. Constructors ¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
  60. 60. The built-in API (contd.) Properties and methods
  61. 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. 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. 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. 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. 65. Function.prototype ¤  length ¤  name // not standard ¤  call() ¤  apply()
  66. 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. 67. String.prototype s.toLowerCase(); s.toUppercase(); s.toLocaleLowerCase(); s.toLocaleUpperCase(); s.localeCompare();
  68. 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. 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. 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. 71. Error.prototype ¤  name ¤  message
  72. 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. 73. Constructors ¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() + Math ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
  74. 74. Quiz What have we learned today?
  75. 75. ¤  JavaScript has classes C
  76. 76. ¤  Arrays are objects C
  77. 77. ¤  Functions are objects C
  78. 78. ¤  Classes have a prototype property C
  79. 79. ¤  Objects have a prototype property C
  80. 80. ¤  Functions have a prototype property C
  81. 81. ¤  Prototype properties are used with new C
  82. 82. phpjs.org ¤  When you miss a PHP function in JavaScript
  83. 83. Learning ¤  https://developer.mozilla.org/en/JavaScript/ Reference ¤  ECMAScript tweeps: @DmitrySoshnikov, @abozhilov, @kangax, @WebReflection ¤  http://jsmentors.com ¤  Slides: http://slideshare.net/stoyan/
  84. 84. Thank you!

×