Your SlideShare is downloading. ×
  • Like
JavaScript for PHP developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript for PHP developers

  • 35,795 views
Published

Ja

Ja

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • On Slide 23, if you do junction(2,0) , the answer is 4 instead of 0. There should be a caveat that users should be careful when they use defaults in that manner.
    Are you sure you want to
    Your message goes here
  • thanks Dan, extra semicolons indeed :)
    Are you sure you want to
    Your message goes here
  • Also, I liked the visual way you represented the colored diffs between the JS and PHP (even a colorblind dude like me appreciated it).
    Are you sure you want to
    Your message goes here
  • There are trailing semi-colons after the if(){} statements on slide 14. They end up being empty statements - but I figured you might wanna know. But maybe you know something I don't, haha? :P
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
35,795
On SlideShare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
485
Comments
4
Likes
48

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!