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
75
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
220
Scrum
dlaxar
2
160
Other Decks in Programming
See All in Programming
Snowflakeで眠ったデータを起こそう!
estie
0
120
雑に思考を整理する技術と効能
konifar
60
29k
ゆるい個人開発のススメ
kuroppe1819
10
1k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
新宿ダンジョンを可視化してみた
satoshi7190
2
270
使ってみよう Azure AI Document Intelligence
kosmosebi
2
330
VS Code をプロダクトにどう取り込むか
onomax
1
470
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Fast JSX: Don't clone props object #28768
yossydev
1
130
Milestoner
bkuhlmann
1
410
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
500
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Featured
See All Featured
Done Done
chrislema
178
15k
Typedesign – Prime Four
hannesfritz
36
2.1k
How to name files
jennybc
65
93k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Embracing the Ebb and Flow
colly
80
4.1k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Producing Creativity
orderedlist
PRO
337
39k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Designing for Performance
lara
601
67k
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;