JavaScript for PHP developers

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

¤  Function()

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

¤  Function()

¤  String()

¤  Number() + Math

¤  Boolean()


¤  Date()

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

JavaScript for PHP developers

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript for PHP developers (20)

More from Stoyan Stefanov (20)

Recently uploaded (20)

JavaScript for PHP developers