• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript for PHP developers
 

JavaScript for PHP developers

on

  • 34,331 views

Ja

Ja

Statistics

Views

Total Views
34,331
Views on SlideShare
13,651
Embed Views
20,680

Actions

Likes
49
Downloads
475
Comments
4

36 Embeds 20,680

http://www.phpied.com 19953
http://css.dzone.com 492
http://omake10.tistory.com 41
http://lanyrd.com 34
http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 22
http://us-w1.rockmelt.com 20
http://translate.googleusercontent.com 19
http://webcache.googleusercontent.com 16
https://twitter.com 12
http://paper.li 10
http://php.dzone.com 8
http://xss.yandex.net 8
https://si0.twimg.com 5
http://www.twylah.com 5
http://twitter.com 4
https://twimg0-a.akamaihd.net 4
http://tugll.tugraz.at 4
http://www.linkedin.com 2
http://static.slidesharecdn.com 2
http://go.openmanga.info 2
http://10.211.55.6 2
http://translate.yandex.net 1
http://dashboard.bloglines.com 1
http://www.fbweb-test.comoj.com 1
http://jeejee2002 1
http://131.253.14.98 1
http://www.phpied.com. 1
https://tornposter.com 1
http://127.0.0.1 1
http://threadic.com 1
http://xianguo.com 1
http://d.hatena.ne.jp 1
http://68.166.223.4 1
http://www.google.com 1
http://www.phpied.com.sixxs.org 1
http://www.netvibes.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
  • thanks Dan, extra semicolons indeed :)
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment

    JavaScript for PHP developers JavaScript for PHP developers Presentation Transcript

    • JavaScript for PHP developersStoyan StefanovMarch 11, 2011Confoo.ca, Montreal
    • Stoyan Stefanov¤  SAP Labs in Montreal¤  Yahoo! Music, Web Performance, Search, YSlow, smush.it¤  Facebook
    • Stoyan Stefanov - Books
    • JavaScript – first impressions
    • DOM/BOM¤  These days libraries can take care of most pains¤  Let’s focus on the core JavaScript (ECMAScript) language
    • JavaScript core¤  C-like syntax¤  Small built-in API ¤  (I’ll show you most of it in 15 minutes)
    • Strange things¤  Functions are objects¤  Functions provide scope¤  Closures (in PHP since 5.3)¤  Prototypes¤  No classes
    • SyntaxMostly the same as PHP
    • Variablesvar n = 1; $n = 1;
    • Variablesvar b = true; $b = true;
    • Variablesvar s = "confoo"; $s = "confoo";
    • Arraysvar a = [1,2,3]; $a = array(1,2,3);
    • Assoc arraysvar o = { "one": 1, "two": 2 }; $o = array( "one" => 1, "two" => 2 );
    • ifif (1 === 1) { universe = "fine"; }; if (1 === 1) { $universe = "fine"; };
    • falsy values0, "", false, undefined, null 0 == "" // true 0 === "" // false
    • switchvar a = 1; var result = ""; switch (a) { case 1: // strict comparison result = "a is 1"; break; default: result = "@#$"; }
    • try-catchtry { throw new Error(ouch); } catch (e) { msg = e.message; } try { throw new Exception(ouch); } catch (Exception $e) { $msg = $e->getMessage(); }
    • whilevar i = 0, out = ; while (i < 100) { out += ++i + ","; } $i = 0; $out = ; while ($i < 100) { $out .= ++$i . ","; }
    • do-whilevar i = 0, out = ; do { out += ++i + ","; } while (i < 100); $i = 0; $out = ; do { $out .= ++$i . ","; } while ($i < 100);
    • forfor (var i = 0, out = ; i < 100; i++) { out += i + ,; } for ($i = 0, $out = ; $i < 100; $i++) { $out .= $i . ,; }
    • for-in/foreachfor (var k in stuff) { keys += k; values += stuff[k]; } foreach ($stuff as $k => $v) { $keys .= $k; $values .= $v; }
    • functionfunction junction(a, b) { return a * b; } function junction($a, $b) { return $a * $b; }
    • functionfunction junction(a, b) { b = b || 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
    • functionfunction junction(a, b) { b = typeof b !== "undefined" ? b : 2; return a * b; } function junction($a, $b = 2) { return $a * $b; }
    • functions are objectsvar junction = function (a, b) { return a * b; }; junction(3, 4); // 12 junction.length; // 2
    • 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));
    • closuresvar junction = function (a, b) { return a * b; }; junction(3, 4); // 12 $junction = function($a, $b) { return $a * $b; }; $junction(3, 4); // 12
    • 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
    • Constructors/Classesvar fido = new Dog(); $fido = new Dog();
    • PHP Classclass Dog { var $name; function __construct($name) { $this->name = $name; } function getName() { return $this->name; } $fido = new Dog("Fido"); } $fido->getName(); // Fido
    • JS constructor functionfunction Dog (name) { this.name = name; this.getName = function () { return this.name; }; } var fido = new Dog("Fido"); fido.getName();
    • JS constructor function¤  Constructors are just functions¤  Functions called with new… ¤  …return this… ¤  …implicitly.
    • Constructor and prototypefunction Dog (name) { this.name = name; } Dog.prototype.getName = function () { return this.name; }; var fido = new Dog("Fido"); fido.getName();
    • Prototypes¤  Every function has a prototype property¤  It’s useless, unless …¤  … the functions is called with new.
    • Constructor and prototypefunction Dog (name) { this.name = name; } Dog.prototype.getName = function () { return this.name; }; var fido = new Dog("Fido"); fido.getName(); // Fido
    • Object literalsvar fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
    • Object literalsvar fido = {};
    • Object literalsvar fido = {}; fido.name = "Fido";
    • Object literalsvar fido = { name: "Fido" }; fido.name; // Fido
    • Object literalsvar fido = { name: "Fido", getName: function() { return this.name; } }; fido.getName(); // Fido
    • Literalsvar fido = {}; fido.name = "Fido"; $fido = (object) array(); $fido->name = "Fido"; $fido = new stdClass(); $fido->name = "Fido";
    • Literals in PHP$fido = (object)array(); $fido->name = Fido; $fido->getName = function() { return $GLOBALS[fido]->name; }; $method = $fido->getName; echo $method();
    • Literals in PHP$fido = new JSObject(); $fido->name = Fido; $fido->getName = function($self) { return $self->name; }; $fido->getName(); // Fido
    • 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); } } }
    • 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
    • The built-in APIIn 15 minutes or less
    • Global object¤  something Like $GLOBALS[] but object¤  May or may not be accessible directly¤  Accessible as window in browsers
    • 3 global properties¤  NaN ¤  Infinity ¤  undefined
    • 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()
    • 9+ constructors¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
    • We don’t need no constructors¤  object literals // yep var o = {}; // nope var o = new Object();
    • We don’t need no constructors¤  array literals // yep var a = []; // nope var a = new Array();
    • We don’t need no constructors¤  regular expression literals // yep var re = /[a-z]/gmi; // proly nope var re = new RegExp("[a-z]", "gmi");
    • 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;");
    • 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"
    • We don’t need no constructors¤  numbers // yep var n = 1.2345; // nope var n = new Number(1.2345); n.toFixed(2); // 1.23
    • We don’t need no constructors¤  boolean // yep var b = true; // nope, why would you ever var b = new Boolean(true);
    • We don’t need no constructors¤  Errors throw new Error("Ouch"); // but you could also throw { name: "MyError", message: "Ouch" };
    • Constructors¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
    • The built-in API (contd.)Properties and methods
    • 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
    • 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]
    • 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()
    • 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
    • Function.prototype¤  length ¤  name // not standard ¤  call() ¤  apply()
    • String.prototypevar s = "confoo"; s.length; // 6 s.indexOf(o); // 1 s.lastIndexOf(o); // 5 s.charAt(1); // "o" s.charCodeAt(1); // 111
    • String.prototypes.toLowerCase(); s.toUppercase(); s.toLocaleLowerCase(); s.toLocaleUpperCase(); s.localeCompare();
    • 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
    • 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
    • Math¤  Not a constructor¤  Constants Math.E, Math.PI... and 6 more ¤  Methods Math.min(), Math.max(), Math.random(), Math.sin() ... and 14 more
    • Error.prototype¤  name ¤  message
    • 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();
    • Constructors¤  Object() ¤  Array() ¤  RegExp() ¤  Function() ¤  String() ¤  Number() + Math ¤  Boolean() ¤  Error(), SyntaxError()… ¤  Date()
    • QuizWhat have we learned today?
    • ¤  JavaScript has classes C
    • ¤  Arrays are objects C
    • ¤  Functions are objects C
    • ¤  Classes have a prototype property C
    • ¤  Objects have a prototype property C
    • ¤  Functions have a prototype property C
    • ¤  Prototype properties are used with new C
    • phpjs.org¤  When you miss a PHP function in JavaScript
    • Learning¤  https://developer.mozilla.org/en/JavaScript/ Reference¤  ECMAScript tweeps: @DmitrySoshnikov, @abozhilov, @kangax, @WebReflection¤  http://jsmentors.com¤  Slides: http://slideshare.net/stoyan/
    • Thank you!