Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript for PHP developers
Search
stoyan
October 09, 2011
Programming
15
1.3k
JavaScript for PHP developers
stoyan
October 09, 2011
Tweet
Share
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
430
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
テスト駆動Kaggle
isax1015
1
600
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
Goで作る、開発・CI環境
sin392
0
260
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
1
140
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building Applications with DynamoDB
mza
95
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Designing Experiences People Love
moore
142
24k
Visualization
eitanlees
146
16k
Code Review Best Practice
trishagee
69
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Transcript
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 ¤ 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 // 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!