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
Daniel Laxar
February 10, 2015
Programming
0
88
JavaScript for PHP Developers
Talk given at ViennaPHP Meetup in February 2015
Daniel Laxar
February 10, 2015
Tweet
Share
More Decks by Daniel Laxar
See All by Daniel Laxar
MongoDB with PHP
dlaxar
1
350
Scrum
dlaxar
2
170
Other Decks in Programming
See All in Programming
効率的な開発手段として VRTを活用する
ishkawa
0
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Music & Morning Musume
bryan
46
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Navigating Team Friction
lara
187
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Producing Creativity
orderedlist
PRO
346
40k
Statistics for Hackers
jakevdp
799
220k
Transcript
JavaScript for PHP developers
Daniel Laxar @dlaxar
JavaScript for PHP developers
Let’s be honest…
JavaScript is weird.
What this talk is about Showing ways to deal with
JS
What this talk isn’t about Make you like JS Basics
of JS Make you a JS Pro
Today’s Agenda Facts Code Structures Gottchas node.js
JavaScript developed in 10 days first seen in Netscape works
without jQuery Client Side scripting language runs in a VM incompatible as hell
PHP JS obj->prop class::prop obj.prop thing.prop
Code Structures IFFY Namespaces Objects Clojures
IFFY Immediately Invoked Function Expression (IFFY - wait… what?)
Why do that? Avoid polluting global space Enables private variables/functions
IFFY (function() { doStuffAndSoOn(); })(); Function Expression = Anonymous Function
Definition Brackets Function Invocation = Invoke (Brackets = Function)
IFFY in the wild #1 (function(window, document, undefined) {'use strict’;
/* Angular.js defined here */ })(window, document);
IFFY#1 - the point in doing so var undefined =
‘defined’; /* evil code */ var o = {}; if(o.prop === undefined) { /* dead code */ } (function(undefined) { var noPollution = ‘solar-energy’; /* not leaked globally */ if(o.prop === undefined) { /* works */ } })();
IFFY in the wild #2 (function( global, factory ) {
factory(/* … */); })( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { /* jQ defined here */ } );
Namespaces \Human\Brain\Memory vs \Computer\Mainboard\Memory Human.Brain.Memory vs Computer.Mainboard.Memory
Namespaces // sane (i.e. with namespace) window.Human = window.Human ||
{}; window.Human.Brain = window.Human.Brain || {}; window.Human.Brain.Memory = something; // or window.Human.Brain.Memory = window.Human.Brain.Memory || {}; // global (i.e. no namespace) window.Memory = something;
Namespace in the wild #1 goog.require('goog.dom'); function sayHi() { var
newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!'); goog.dom.appendChild(document.body, newHeader); }
Namespace in the wild #2 d3.map = function(object) { var
map = new d3_Map(); /* … bla foo */ };
Objects i.e. Classes
Objects “Classes” are Functions The Functions are the Constructors Every
Object has a Prototype (i.e. is an Instance of a Prototype) A Prototype is the recursive list of methods an object has
Objects var Car = function() { /*this is the constructor*/
}; Car.prototype.drive = function() { /* a ‘method’ */ }; var Ferrari = function() { /* this is another constructor */ }; Ferrari.prototype = new Car(); /* Ferrari inherits Car */
Closures i.e. doing some magic with variable scopes
(function Outer(g) { var string = ‘Hello, World’; function Inner()
{} Inner.prototype.getPrivate = function() { return string; }; g.Inner = Inner; })(window); (new Inner()).getPrivate();
Gottchas JavaScript doesn’t like you. Face it.
var a = 2; function test() { console.log(a); var a
= 5; console.log(a); } test(); // Output?
var a = 2; function test() { var a =
undefined; console.log(a); a = 5; console.log(a); } test(); // Output?
Hoisting var a = 2; function test() { var a
= undefined; console.log(a); a = 5; console.log(a); } test(); // Output: undefined 5
var a = [“a”, “b”, “c”]; for(var i =
0; i < a.length; i++) { setTimeout(function() { console.log(a[i]) }, 10); } // Output?
var a = [“a”, “b”, “c”]; var i =
0; for(; i < a.length; i++) {} console.log(a[i]); console.log(a[i]); console.log(a[i]); // Output?
var a = [“a”, “b”, “c”]; var i =
0; for(; i < a.length; i++) {} console.log(a[i]); console.log(a[i]); console.log(a[i]); // Output: c c c Context
node.js server side JS Google’s V8 going to kill PHP
in 2012 not the first server side JS
node.js
node.js Slideshows suck.
None
JavaScript for PHP developers
JavaScript
JavaScript return this;