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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript for PHP developers

37,048

Published on

Ja

Ja

Published in: Technology
4 Comments
50 Likes
Statistics
Notes
No Downloads
Views
Total Views
37,048
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
493
Comments
4
Likes
50
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!

×