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

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

Syntax
Mostly the same as PHP

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
function junction(a, b) {
b = b || 2;
return a * b;
}
function junction($a, $b = 2) {
return $a * $b;
}

function
function junction(a, b) {
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
function 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 prototype
function Dog (name) {
this.name = name;
}
Dog.prototype.getName = function () {
return this.name;
};
var fido = new Dog("Fido");
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

Object literals
var fido = {
name: "Fido",
getName: function() {
return this.name;
}
};
fido.getName(); // 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();

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.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()
¤ Error(), SyntaxError()…
¤ 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/

Thank you!