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
Understanding Kotlin Multiplatform
l2hyunwoo
0
110
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
構文解析器入門
ydah
7
1.8k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Porting a visionOS App to Android XR
akkeylab
0
910
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.3k
AI Ramen Fight
yusukebe
0
110
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Experiences People Love
moore
142
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Being A Developer After 40
akosma
90
590k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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;