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
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
150
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
160
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
710
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
9
1.7k
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
CSC509 Lecture 04
javiergs
PRO
0
170
メルカリ ハロ アプリの技術スタック
atsumo
2
910
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
200
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
410
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
370
CSC305 Lecture 13
javiergs
PRO
0
110
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Agile that works and the tools we love
rasmusluckow
327
21k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
Designing the Hi-DPI Web
ddemaree
280
34k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
A Philosophy of Restraint
colly
203
16k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Producing Creativity
orderedlist
PRO
341
39k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
350
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
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!