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

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, null0 == "" // true0 === "" // 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); // 12junction.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;

};


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;

};


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 ¤  parseInt()¤  parseFloat()¤  isNaN()¤  isFinite()

¤ 4 to encode/decode URIs ¤  encodeURIComponent()¤  decodeURIComponent()¤  encodeURI()¤  decodeURI()

¤ eval()

PHP: intval()

floatval()is_nan()

is_finite()

urlencode()urldecode()

??()??()

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


¤ array literals// yepvar a = [];// nopevar a = new Array();


¤ regular expression literals// yepvar re = /[a-z]/gmi;// proly nopevar re = new RegExp("[a-z]", "gmi");


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


¤ strings// yepvar s = "confoo";// nopevar s = new String("confoo");s.substr(3); // "foo""confoo".substr(0, 4); // "conf"


¤ numbers// yepvar n = 1.2345;// nopevar n = new Number(1.2345);n.toFixed(2); // 1.23


¤ boolean// yepvar b = true;// nope, why would you evervar b = new Boolean(true);


¤ 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.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; // 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.prototype

a.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.prototype var re = /[a-z]/gmi;re.exec("somestring"); // returns matchesre.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; // 6s.indexOf('o'); // 1s.lastIndexOf('o'); // 5s.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/); // 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.protoype new 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()

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!

javascript for php developers

Technology