Jsphp 110312161301-phpapp02

JavaScript for PHP developers
Stoyan Stefanov

March 11, 2011
Confoo.ca, Montreal

Stoyan Stefanov
  SAP Labs in Montreal

  Yahoo! Music, Web Performance, Search,
YSlow, smush.it
  Facebook

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

Variables
var n = 1;

$n = 1;

Variables
var b = true;

$b = true;

Variables
var s = "confoo";

$s = "confoo";

Arrays
var a = [1,2,3];

$a = array(1,2,3);

Assoc arrays
var o = {
"one": 1,
"two": 2
};
$o = array(
"one" => 1,
"two" => 2
);

if
if (1 === 1) {
universe = "fine";
};
if (1 === 1) {
$universe = "fine";
};

falsy values
0, "", false, undefined, null

0 == "" // true
0 === "" // false

switch
var a = 1;
var result = "";
switch (a) {
case 1: // strict comparison
result = "a is 1";
break;
default:
result = "@#$";
}

try-catch
try {
throw new Error('ouch');
} catch (e) {
msg = e.message;
}
try {
throw new Exception('ouch');
} catch (Exception $e) {
$msg = $e->getMessage();
}

while
var i = 0, out = '';
while (i < 100) {
out += ++i + ",";
}
$i = 0; $out = '';
while ($i < 100) {
$out .= ++$i . ",";
}

do-while
var i = 0, out = '';
do {
out += ++i + ",";
} while (i < 100);
$i = 0; $out = '';
do {
$out .= ++$i . ",";
} while ($i < 100);

for
for (var i = 0, out = ''; i < 100; i++) {
out += i + ',';
}

for ($i = 0, $out = ''; $i < 100; $i++) {
$out .= $i . ',';
}

for-in/foreach
for (var k in stuff) {
keys += k;
values += stuff[k];
}
foreach ($stuff as $k => $v) {
$keys .= $k;
$values .= $v;
}

function
function junction(a, b) {
return a * b;
}
function junction($a, $b) {
return $a * $b;
}

function
b = b || 2;
return a * b;
}
function junction($a, $b = 2) {
return $a * $b;
}

function
b = typeof b !== "undefined" ? b : 2;
return a * b;
}
function junction($a, $b = 2) {
return $a * $b;
}

functions are objects
var junction = function (a, b) {
return a * b;
};
junction(3, 4); // 12
junction.length; // 2

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));

closures
var 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/Classes
var fido = new Dog();

$fido = new Dog();

PHP Class
class Dog {

var $name;

function construct($name) {

$this->name = $name;

}

function getName() {

return $this->name;

}
$fido = new Dog("Fido");
} $fido->getName(); // Fido

JS constructor function
function 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 prototype

this.name = name;

}

Dog.prototype.getName = function () {

return this.name;

};


fido.getName();

Prototypes
  Every function has a prototype property

  It’s useless, unless …

  … the functions is called with new.

Constructor and prototype

this.name = name;

}

Dog.prototype.getName = function () {

return this.name;

};


fido.getName(); // Fido

Object literals
var fido = {
name: "Fido",
getName: function() {
return this.name;
}
};
fido.getName(); // Fido

Object literals
var fido = {};

Object literals
var fido = {};
fido.name = "Fido";

Object literals
var fido = {
name: "Fido"
};

fido.name; // Fido

Literals
var 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 PHP
class 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 API
In 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();

  array literals

// yep
var a = [];
// nope
var a = new Array();

  regular expression literals

// yep
var re = /[a-z]/gmi;
// proly nope
var re = new RegExp("[a-z]", "gmi");

  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;");

  strings

// yep
var s = "confoo";
// nope
var s = new String("confoo");

s.substr(3); // "foo"
"confoo".substr(0, 4); // "conf"

  numbers

// yep
var n = 1.2345;
// nope
var n = new Number(1.2345);

n.toFixed(2); // 1.23

  boolean

// yep
var b = true;
// nope, why would you ever
var b = new Boolean(true);

  Errors

throw new Error("Ouch");
// but you could also
throw {
name: "MyError",
message: "Ouch"
};

Constructors
  Object()

  Array()

  RegExp()


  String()

  Number()

  Boolean()


  Date()

The built-in API (contd.)
Properties and methods

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

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]

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()

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

Function.prototype
  length

  name // not standard
  call()

  apply()

String.prototype
var s = "confoo";
s.length; // 6
s.indexOf('o'); // 1
s.lastIndexOf('o'); // 5
s.charAt(1); // "o"
s.charCodeAt(1); // 111

String.prototype
s.toLowerCase();
s.toUppercase();
s.toLocaleLowerCase();
s.toLocaleUpperCase();
s.localeCompare();

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

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

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()


  String()

  Number() + Math

  Boolean()


  Date()

Quiz
What 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/

Jsphp 110312161301-phpapp02

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Jsphp 110312161301-phpapp02 (20)

Jsphp 110312161301-phpapp02