Jsphp 110312161301-phpapp02
Upcoming SlideShare
Loading in...5
×
 

Jsphp 110312161301-phpapp02

on

  • 419 views

 

Statistics

Views

Total Views
419
Views on SlideShare
419
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jsphp 110312161301-phpapp02 Jsphp 110312161301-phpapp02 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, null0 == "" // true0 === "" // 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); // 12junction.length; // 2
  • functions are objectsjunction.call(null, 3, 4); // 12junction.apply(null, [3, 4]); // 12call_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// yepvar o = {};// nopevar o = new Object();
  • We don’t need no constructors  array literals// yepvar a = [];// nopevar a = new Array();
  • We don’t need no constructors  regular expression literals// yepvar re = /[a-z]/gmi;// proly nopevar re = new RegExp("[a-z]", "gmi");
  • We don’t need no constructors  functions// yepvar f = function(a, b) {return a + b;};// yepfunction f(a, b) {return a + b;}// nopevar f = new Function("a, b", "return a + b;");
  • We don’t need no constructors  strings// yepvar s = "confoo";// nopevar s = new String("confoo");s.substr(3); // "foo""confoo".substr(0, 4); // "conf"
  • We don’t need no constructors  numbers// yepvar n = 1.2345;// nopevar n = new Number(1.2345);n.toFixed(2); // 1.23
  • We don’t need no constructors  boolean// yepvar b = true;// nope, why would you evervar b = new Boolean(true);
  • We don’t need no constructors  Errorsthrow new Error("Ouch");// but you could alsothrow { 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; // trueo.hasOwnProperty(toString); // falseo.propertyIsEnumerable(toString); // falseo.isPrototypeOf(Array); // falseo.constructor === Object; // true
  • Array.prototypevar a = [1,2,3,4];a.length; // 4a.push(dude); // 5, the lengtha.pop(); // "dude"a.unshift(dude); // 5, the lengtha.shift(); // "dude"a.concat(5,6,7); // [1,2,3,4,5,6,7]
  • Array.prototypea.sort(callback);a.indexOf(3); // 2a.lastIndexOf(3); // 2a.slice(1, 3); // [2, 3]a.splice(...); // remove and adda.reverse(); // [4, 3, 2, 1]a.join( > ); // implode()
  • RegExp.prototypevar re = /[a-z]/gmi;re.exec("somestring"); // returns matchesre.test("somestring"); // returns true|falsere.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; // 6s.indexOf(o); // 1s.lastIndexOf(o); // 5s.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/); // 3s.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+308Number.MIN_VALUE; // 5e-324Number.POSITIVE_INFINITY; // InfinityNumber.NEGATIVE_INFINITY; // -InfinityNumber.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 
  •   Arrays are objects 
  •   Functions are objects 
  •   Classes have a prototype property 
  •   Objects have a prototype property 
  •   Functions have a prototype property 
  •   Prototype properties are used with new 
  • 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!
  • Thank you!
  • Thank you!
  • Thank you!