Upload
seri-moth
View
247
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
JavaScript for PHPStoyan StefanovMarch 11, 2011Confoo.ca, Montreal
Stoyan
SAP Labs in Montreal
Yahoo! Music, Web Performance, YSlow, smush.it
Search
StoyanStefanov -
JavaScript – first
DOM/BOM
These days libraries can take care of most pains
Let’s focus on the core JavaScript (ECMAScript)
JavaScript core
C-like syntax
Small built-in API (I’ll show you most of it in 15 minutes)
Strange
Functions are objects
Functions provide scope
Closures (in PHP since 5.3)
Prototypes
No classes
SyntaMostly the same as PHP
Variable
var
n = 1;
$n = 1;
Variable
var
b = true;
$b = true;
Variable
var
s = "confoo";
$s = "confoo";
Array
var
a = [1,2,3];
$a = array(1,2,3);
Assoc
var o =
=
{
"one":
"two":
};
array(
1,
2
$o
"one"
"two"
);
=>
=>
1,
2
if (1 === 1) {
$universe = "fine";
};
i
if (1 === 1) {
"fine"; universe
};
=
falsy
0,
"", false, undefined, null
0
0
== "" //
//
true
false === ""
switc
var
var
a = 1;
result = "";
switch
case
(a)
1:
{
// strict comparison
result
break;
default:
result
= "a is 1";
= "@#$";
}
try-try {
throw
catch
new
(e)
Error('ouch');
{ }
msg
}
= e.message;
try {
throw
catch
new Exception('ouch');
} (Exception $e) {
$msg = $e->getMessage();
}
$i = 0; $out = '';
while ($i < 100) {
$out .= ++$i . ",";
}
whil
var i =
(i
0,
<
out = '';
while
out
}
100) {
+= ++i + ",";
$i = 0; $out = '';
do {
$out .= ++$i . ",";
} while ($i < 100);
do-
var i = 0, out = '';
do {
out += ++i + ",";
} while (i < 100);
for ($i = 0, $out = ''; $i < 100; $i++) {
$out .= $i . ',';
}
fo
for (var i
i
=
+
0, out = ''; i < 100; i++) {
out += ',';
}
for-in/
for (var k in stuff) {
keys += k;
values += stuff[k];
}
foreach
$keys
($stuff as $k => $v) {
.= $k;
$values .= $v;
}
function junction($a, $b) {
return $a * $b;
}
functio
function
return
}
junction(a, b) {
a * b;
function junction($a, $b = 2) {
return $a * $b;
}
functio
function junction(a, b) {
b = b || 2;
return a * b;
}
functio
function junction(a, b) {
b = typeof b !== "undefined" ? b : 2;
return a * b;
}
function
return
}
junction($a, $b = 2) {
$a * $b;
functionsare
var junction = function (a, b) {
return
};
a * b;
junction(3, 4); // 12
junction.length; // 2
call_user_func('junction', 3, 4);
call_user_func_array('junction', array(3, 4));
functionsare
junction.call(null, 3, 4); // 12
junction.apply(null, [3, 4]); // 12
$junction = function($a, $b) {
return $a * $b;
};
$junction(3, 4); // 12
closure
var 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
$fido = new Dog();
Constructors/
var
fido = new Dog();
PHPclass Dog {
var $name;
function construct($name)
{
$this->name = $name;
}
function getName() {
return $this->name;
} $fido = new Dog("Fido");
} $fido->getName(); // Fido
JS constructorfunction Dog (name) {
this.name = name;
this.getName = function () {
return this.name;
};
}
var fido = new Dog("Fido");
fido.getName();
JS constructor
Constructors are just functions
Functions called with new…
…return this…
…implicitly.
Constructo and prototypfunction Dog (name) {
this.name = name;
}
Dog.prototype.getName = function () {
return this.name;
};
var fido = new Dog("Fido");
fido.getName();
Prototype
Every function has a
It’s useless, unless
prototype property
… the functions is called with new.
Constructo and prototypfunction Dog (name) {
this.name = name;
}
Dog.prototype.getName = function () {
return this.name;
};
var fido = new Dog("Fido");
fido.getName(); // Fido
Object
var fido = {
name: "Fido",
getName:
return
}
};
function()
this.name;
{
fido.getName(); // Fido
Object
var fido = {};
Object
var fido = {};
"Fido"; fido.name =
Object
var fido = {
name:
};
"Fido"
fido.name; // Fido
Object
var fido = {
name: "Fido",
getName:
return
}
};
function()
this.name;
{
fido.getName(); // Fido
$fido = (object) array();
$fido->name = "Fido";
$fido = new stdClass();
$fido->name = "Fido";
Literal
var fido = {};
"Fido"; fido.name
=
Literals in
$fido = (object)array();
$fido->name = 'Fido';
$fido->getName = function() {
return
};
$GLOBALS['fido']->name;
$method = $fido->getName;
echo $method();
Literals in
$fido = new JSObject();
$fido->name = 'Fido';
$fido->getName = function($self) {
return
};
$self->name;
$fido->getName(); // Fido
Literals inclass JSObject {
function call($name, $args) {
if (is_callable($this->$name)) {
array_unshift($args, $this);
return call_user_func_array($this->$name, $args);
}
}
}
Funny
typeoftypeof 1; // "number"
typeof(1);
instanceof([1,2])
([1,2])
instanceof
instanceof
Array; // true Object; // true
deletevar o = {a: 1}; delete o.a; o.a; // undefined
voidreturns undefined whatever the operand
The built-in 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 propertie
NaN
Infinity
undefined
9 global
4 number-related parseInt()
parseFloat()
isNaN()
isFinite()
PHP:intval()
floatval()
is_nan()
is_finite()
4 to encode/decode URI encodeURIComponent()
decodeURIComponent()
encodeURI()
decodeURI()
urlencode()
urldecode()
??()
??()
eval() eval()
9+
Object()
Array()
RegExp()
Function()
String()
Number()
Boolean()
Error(),
Date()
SyntaxError()…
We need no constructor
object literals
// yep
var o = {};
// nope
var o = new Object();
We need no constructor
array literals
// yep
var a = [];
// nope
var a = new Array();
We don’t need no constructor
regular expression literals // yep
var re = /[a-z]/gmi;
nope // proly
var re = new RegExp("[a-z]", "gmi");
We don’t need no
functions
// yep
var f = function(a, b) {return a + b;};
// yep
function f(a, b) {return a + b;}
//
var
nope
f
= new
Function("a, b",
"return a + b;");
We don’t need no constructor
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 constructor
numbers
// yep
var n = 1.2345;
// nope
var
n = new Number(1.2345);
n.toFixed(2); // 1.23
We need no constructor
boolean
// yep
var b = true;
// nope, why would you ever
var b = new Boolean(true);
We don’t need no
Errors
throw new Error("Ouch");
// but you could also
throw {
name: "MyError",
message:
};
"Ouch"
ConstructorObject()
Array()
RegExp()
Function()
String()
Number()
Boolean()
Error(), SyntaxError()…
Date()
The built-in API Properties and methods
Object.prototype
var o = {};
o.toString(); // "[object Object]"
o.toLocaleString(); // "[object Object]"
o.valueOf() === o; // true
o.hasOwnProperty('toString'); // false
false o.propertyIsEnumerable('toString'); //
o.isPrototypeOf(Array); // false
o.constructor === Object; // true
Array.prototyp
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.prototyp
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.prototypvar re = /[a-z]/gmi;
re.exec("somestring");
re.test("somestring");
re.lastIndex;
re.source; // "[a-z]"
//
//
returns
returns
matches
true|false
/[0-9]/g.global;
/[0-9]/m.multiline;
/[0-9]/i.ignoreCase;
//
//
//
true
true
true
Function.prototyp
length
name // not standard
call()
apply()
String.prototyp
var s = "confoo";
s.length; // 6
s.indexOf('o'); // 1
s.lastIndexOf('o'); // 5
s.charAt(1); // "o"
s.charCodeAt(1);
// 111
String.prototyp
s.toLowerCase();
s.toUppercase();
s.toLocaleLowerCase();
s.toLocaleUpperCase();
s.localeCompare();
String.prototyp
s.split(/f/); // ["con", "oo"]
s.concat('.ca');
s.search(/foo/);
//
//
"confoo.ca"
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.protoypnew Number(123).toFixed(2); // "123.00"
(1000000000000).toExponential();
(1000000000000).toPrecision(3);
//
//
"1e+12"
"1.00e+12"
Number.MAX_VALUE;
Number.MIN_VALUE;
//
//
1.7976931348623157e+308
5e-324
Number.POSITIVE_INFINITY;
Number.NEGATIVE_INFINITY;
//
//
Infinity
-Infinity
Number.NaN; // NaN
Math
Not a constructor
Constants
Math.E,
Methods
Math.PI... and 6 more
Math.min(), Math.max(),
Math.random(), Math.sin()
... and 14 more
Error.prototyp
name
message
Date.prototyp
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.getUTCMonth();d.setFullYear();
d.getUTCMilliseconds(); d.getUTCMinutes();d.getUTCSeconds(); d.getYear(); d.setDate();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();
Constructor
Object()
Array()
RegExp()
Function()
String()
Number() + Math
Boolean()
Error(), SyntaxError()…
Date()
QuiWhat have we learned today?
JavaScript ha classe
Arrays object
Function are object
Classeshave a propertprototype
Objects have a propertprototype
Functions property
have a prototype
Prototype
propertie are use wit
phpjs.or
When you miss a PHP function in JavaScript
Learnin
https://developer.mozilla.org/en/JavaScript/Reference
ECMAScript tweeps: @DmitrySoshnikov,@abozhilov, @kangax,
http://jsmentors.com
n
http://slidesha r e.ne t /stoya n /
Thank