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の力を借りて、OSSに初コントリビュートした話
personabb
0
120
20250326_生成AIによる_レビュー承認システムの実現.pdf
takahiromatsui
17
5.7k
ミリしらMCP勉強会
watany
4
460
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
250
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
1k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
440
体得しよう!RSA暗号の原理と解読
laysakura
3
540
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
130
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
150
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
120
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
Featured
See All Featured
Unsuck your backbone
ammeep
670
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
Making Projects Easy
brettharned
116
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Git: the NoSQL Database
bkeepers
PRO
429
65k
The World Runs on Bad Software
bkeepers
PRO
67
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Speed Design
sergeychernyshev
28
870
Raft: Consensus for Rubyists
vanstee
137
6.9k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Facilitating Awesome Meetings
lara
53
6.3k
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!