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!