Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript for PHP developers

40,675 views

Published on

Ja

Published in: Technology

JavaScript for PHP developers

  1. 1. JavaScript for PHP developersStoyan StefanovMarch 11, 2011Confoo.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. SyntaxMostly the same as PHP
  9. 9. Variablesvar n = 1; $n = 1;
  10. 10. Variablesvar b = true; $b = true;
  11. 11. Variablesvar s = "confoo"; $s = "confoo";
  12. 12. Arraysvar a = [1,2,3]; $a = array(1,2,3);
  13. 13. Assoc arraysvar o = { "one": 1, "two": 2 }; $o = array( "one" => 1, "two" => 2 );
  14. 14. ifif (1 === 1) { universe = "fine"; }; if (1 === 1) { $universe = "fine"; };
  15. 15. falsy values0, "", false, undefined, null 0 == "" // true 0 === "" // false
  16. 16. switchvar a = 1; var result = ""; switch (a) { case 1: // strict comparison result = "a is 1"; break; default: result = "@#$"; }
  17. 17. try-catchtry { throw new Error(ouch); } catch (e) { msg = e.message; } try { throw new Exception(ouch); } catch (Exception $e) { $msg = $e->getMessage(); }
  18. 18. whilevar i = 0, out = ; while (i < 100) { out += ++i + ","; } $i = 0; $out = ; while ($i < 100) { $out .= ++$i . ","; }
  19. 19. do-whilevar i = 0, out = ; do { out += ++i + ","; } while (i < 100); $i = 0; $out = ; do { $out .= ++$i . ","; } while ($i < 100);
  20. 20. forfor (var i = 0, out = ; i < 100; i++) { out += i + ,; } for ($i = 0, $out = ; $i < 100; $i++) { $out .= $i . ,; }
  21. 21. for-in/foreachfor (var k in stuff) { keys += k; values += stuff[k]; } foreach ($stuff as $k => $v) { $keys .= $k; $values .= $v; }
  22. 22. functionfunction junction(a, b) { return a * b; } function junction($a, $b) { return $a * $b; }
  23. 23. functionfunction junction(a, b) { b = b || 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
  24. 24. functionfunction junction(a, b) { b = typeof b !== "undefined" ? b : 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
  25. 25. functions are objectsvar junction = function (a, b) { return a * b; }; junction(3, 4); // 12 junction.length; // 2
  26. 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. 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. 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/Classesvar fido = new Dog(); $fido = new Dog();
  30. 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. 31. JS constructor functionfunction 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 prototypefunction 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 prototypefunction Dog (name) { this.name = name; } Dog.prototype.getName = function () { return this.name; }; var fido = new Dog("Fido"); fido.getName(); // Fido
  36. 36. Object literalsvar fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
  37. 37. Object literalsvar fido = {};
  38. 38. Object literalsvar fido = {}; fido.name = "Fido";
  39. 39. Object literalsvar fido = { name: "Fido" }; fido.name; // Fido
  40. 40. Object literalsvar fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
  41. 41. Literalsvar 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 PHPclass 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 APIIn 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.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. 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. 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. 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. 65. Function.prototype¤  length ¤  name // not standard ¤  call() ¤  apply()
  66. 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. 67. String.prototypes.toLowerCase(); s.toUppercase(); s.toLocaleLowerCase(); s.toLocaleUpperCase(); s.localeCompare();
  68. 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. 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. 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. QuizWhat 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!

×