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
91
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
360
Scrum
dlaxar
2
170
Other Decks in Programming
See All in Programming
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
400
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
880
CSC305 Lecture 03
javiergs
PRO
0
230
CSC509 Lecture 01
javiergs
PRO
1
430
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Building Flexible Design Systems
yeseniaperezcruz
329
39k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Side Projects
sachag
455
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Speed Design
sergeychernyshev
32
1.1k
Building Adaptive Systems
keathley
43
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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;