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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
240
TypeScriptでDXを上げろ! Hono編
yusukebe
3
650
20250708_JAWS_opscdk
takuyay0ne
2
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf 2023
tenderlove
30
1.1k
Making Projects Easy
brettharned
116
6.3k
Gamification - CAS2011
davidbonilla
81
5.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
30
14k
Building an army of robots
kneath
306
45k
How STYLIGHT went responsive
nonsquared
100
5.6k
Docker and Python
trallard
45
3.5k
Music & Morning Musume
bryan
46
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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!