JavaScript för Javautvecklare

JavaScript för
Javautvecklare
John Wilander, Handelsbanken
@johnwilander
Jfokus 2012

Java
Typer
Primitiva:
byte, short, int, long, float, double,
boolean, char

Resten är objekt, s.k. referenstyper
JavaScript

Primitiva:
string, number, boolean, function,
undefined

Resten är object

Java
Typer
Primitiva:
boolean, charinte
Strängar är
generella objekt
Resten är objekt, s.k.typ
utan en egen referenstyper
JavaScript

Primitiva:
undefined

Resten är object

Java
Typer
Primitiva: ﬁnns bara en
Det
typ för tal,
boolean, char det
oavsett om
är heltal eller
Resten är objekt, s.k. referenstyper
decimaltal
JavaScript

Primitiva:
undefined

Resten är object

Java
Typer
Primitiva:
boolean, char Funktioner är
fullödiga objekt
Resten är objekt, s.k. referenstyper med en egen typ
JavaScript

Primitiva:
undefined

Resten är object

Java
Typer
Primitiva:
boolean, charJavaScripts
version av
Resten oinitialiserad är
är objekt, s.k. referenstyper
JavaScript
undefined
Primitiva:
undefined

Resten är object

JavaScript
Låt oss testa
typeof 10
typeof 10.3
typeof Math.LN2
typeof Infinity
typeof NaN

typeof ”tutorial”
typeof ””
typeof (typeof 10)

JavaScript
Låt oss testa
typeof 10
typeof 10.3
typeof Math.LN2
typeof Infinity
typeof NaN
typeof Number(10)

typeof ”tutorial”
typeof ””
typeof (typeof 10)
typeof String(”tutorial”)

JavaScript
Låt oss testa
typeof undefined
typeof tutorial

typeof {}
typeof []
typeof [4, 6, 2]
typeof new Date()

JavaScript
Låt oss testa
typeof undefined
typeof tutorial

typeof {}
typeof []
typeof [4, 6, 2]
typeof new Date()

typeof new Boolean(true)
typeof new Number(10)
typeof new String(”tutorial”)

Statisk vs dynamisk typning
Java

Statisk typning:
String name; Variabler har typer
name = ”John”; Värden har typer
name = 34; Variabler kan inte byta typ

JavaScript

Dynamisk typning:
var name; Variabler har inga typer
name = ”John”; Värden har typer
name = 34; Variabler byter typ dynamiskt

Dynamisk typning
JavaScript

var name = ”John”;

Variabler har Värden har typer
inga typer

Stark vs svag typning

Stark !== bra
Svag !== dålig

Java
Stark vs svag typning
int intVar = 4; Ganska stark typning
intVar + ””; Implicit typkonvertering
intVar + 0.0; Implicit, breddande typkonv.
intVar + (int)0.0; Explicit typkonvertering
intVar + null; Inte tillåtet
JavaScript

var dynVar = 4; Mycket svag typning
dynVar + ””; Implicit typkonvertering
dynVar + null; Implicit typkonvertering
dynVar + []; Implicit typkonvertering
dynVar + [0]; Implicit typkonvertering

Typsäkert
≈
inga typfel vid körning

Johns slutsats

Java är ett statiskt, starkt typat språk
med hyfsat god typsäkerhet

JavaScript är ett dynamiskt, svagt typat språk
med hyfsat god typsäkerhet

Java: Klasser och objekt
Objekt
Klass Objekt
Exekverande
Källkod Objekt kod

Singleton
Klass
-instans

JavaScript: Funktioner,
objekt och prototyper
Objekt
Prototyp Objekt
Exekverande
Källkod Objekt kod

Funktion Funktion

JavaScript: Funktioner,
objekt och prototyper
Objekt
Prototyp

Objekt
Exekverande
Källkod Objekt kod
Funktion
Anonyma
closures Funktion
Moduler

Java: Utökning med arv
Subklass

extends

Superklass

Java: Subtypning med arv
Supertyp

extends

Subtyp

Javaklasser blir
funktionsmässigt större
och
typmässigt mindre
(mer speciﬁka)
via arv

I JavaScript så är
utökning
och
subtypning
skilda saker

JavaScript: Utökning via prototyp
JavaScript

JW = {}; log = console.log;

JW.Base = function(x, y) {
this.x = x; this.y = y;
};
JW.Base.prototype.sum = function() {
return this.x + this.y;
}
JW.instance = new JW.Base(1, 2);

log(JW.instance instanceof JW.Base);
log(JW.instance.sum());

JavaScript
Användning av new innebär att:
1) ett nytt objekt skapas med
JW.Base = function(x,JW.Base och att
prototypen för y) {
this.x 2) funktionen JW.Base()
= x; this.y = y;
}; anropas med this pekandes på
den nya instansen
}


JavaScript


};
}


JavaScript


};
JW.instance vi inte har skapat någon ny subtyp.
Notera att = new JW.Base(1, 2);
JW.Base.prototype.sumbeﬁntliga (proto-)typen.
Vi har bara utökat den = function() {
}


JavaScript
JavaScript: Subtypning
this.x = x; this.y = y; };
JW.Extension = function(x, y, z) {
JW.Base.call(this, x, y);
this.z = z;
};
JW.Extension.prototype =
Object.create(JW.Base.prototype);
JW.Extension.prototype.constructor =
JW.Extension;
JW.instance = new JW.Extension(1, 2, 3);

JavaScript
JavaScript: Subtypning
this.x = x; this.y = y; };
JW.Extension = function(x, y, z) {
JW.Base.call(this, x, y);
this.z = z; ju bara programmera Java
Nu försöker vi
}; i JavaScript. Ni ser ju själva vilket elände det blir.
JW.Extension.prototype =
Nåja, låt oss gå igenom det i alla fall.
Object.create(JW.Base.prototype);
JW.Extension.prototype.constructor =
JW.Extension;
JW.instance = new JW.Extension(1, 2, 3);

Varför vill vi subtypa?
Jo, för att vi tänker i
statisk typning och
is-a-relationer

Statisk typning och
subtypning
Java

public void doPurchase(List<Item> items)

Kan ta emot en lista av Items
eller subtyper till Item

Dynamisk typning
JavaScript

public void doPurchase(List<Item> items)

Dynamisk typning
JavaScript

function doPurchase(items)

Kan ta emot vad som helst
... eller ingenting

Dynamisk typning
JavaScript

function doPurchase(items)

Kan returnera vad som helst
... eller ingenting

Vad är sant och falskt i
JavaScript?

Truthiness is a ”truth” that a person claims to
know intuitively ”from the gut” or because it ”feels
right” without regard to evidence, logic, intellectual
examination, or facts.
http://en.wikipedia.org/wiki/Truthiness

JavaScript
Låt oss testa
log = console.log;
if(!false) { log("false"); }
if(!"false") { log(""false""); }
if(!0) { log("0"); }
if(!-1) { log("-1"); }
if(!"") { log(""""); }
if(!null) { log("null"); }
if(!undefined) { log("undefined"); }
if(![]) { log("[]"); }
if(!{}) { log("{}"); }

Hur kan denna falskhet
drabba oss?

Först ett par saker …
JavaScript

JW.obj = {drinks: "coffee"};
JW.obj.drinks; => "coffee"
JW.obj["drinks"]; => "coffee"

Objekts properties (≈medlemsvariabler)
går att komma åt som array-referenser

Först ett par saker …
JavaScript

o = JW.obj;
o.toString; // Finns
o.hasOwnProperty(”drinks”) ?
o.hasOwnProperty(”toString”) ?

JavaScript
Vad gör koden?
JW = {};
JW.apply=function(applyTo,applyWith){
for(var prop in applyWith) {
if(applyWith.hasOwnProperty(prop)
&& !applyTo[prop]) {
applyTo[prop] = applyWith[prop];
}
}
}
JW.obj = {preselected: 3};
JW.apply(JW.obj,{country: 'Sweden'});

JavaScript
Ser ni buggen?
JW = {};
}
}
}
JW.apply(JW.obj,{country: 'Sweden'});

JavaScript
Ser ni buggen?
JW = {};
}
}
}
JW.apply(JW.obj,{preselected: 5});

Hur startar man ett
JavaScript-program?

<html>
JavaScript och webb
<head>
<script src=”js/main.js”></script>
<script>
var JW = {};
// Mer kod
</script>
</head>
<body>
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Kopiera text</button>
<div>
Lite information
</div>
<script>
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>

<html>
JavaScript och webb
<head> Skript från ﬁl i <head>
<script>
var JW = {};
// Mer kod
</script>
</head>
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
JavaScript och webb
<script>
var JW = {}; Inline:at skript i <head>
// Mer kod
</script>
</head>
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
JavaScript och webb
<script>
// Mer kod
</script>
</head> Skript, direkt i HTML
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
JavaScript och webb
<script>
// Mer kod
</script>
<body>
<div>
Lite information
</div> Inline:at skript i <body>
<script>
</script>
</body>
</html>

<html>
JavaScript och webb
<script>
// Mer kod
</script>
<body>
<div>
Lite information
</div> Inline:at skript i <body>
<script>
</script>
</body>
</html> Skript från ﬁl i <body>

<html>
Laddning och körning
<head>
<script>
var JW = {};
// Mer kod
</script>
</head>
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
<head> Synkron laddning och körning
<script>
var JW = {};
// Mer kod
</script>
</head>
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
<script>
var JW = {}; Körs synkront, dvs innan
// Mer kod
</script>
DOM:en har laddats
</head>
<body>
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
<script>
// Mer kod
</script>
DOM:en har laddats
</head>
<body> Körs vid klick-eventet
<div>
Lite information
</div>
<script>
</script>
</body>
</html>

<html>
<script>
// Mer kod
</script>
DOM:en har laddats
</head>
<div>
Lite information
</div> Körs när parsern kommit hit
<script>
</script>
</body>
</html>

<html>
<script>
// Mer kod
</script>
DOM:en har laddats
</head>
<div>
Lite information
</div> Körs när parsern kommit hit
<script>
</script>
</body>
</html> Laddas och körs synkront

Asynkron laddning
(function(){
var oldFirstScript =
document.getElementsByTagName('script')[0];
newScript =
document.createElement('script'),

newScript.async = true;
newScript.src = 'js/script.js';

oldFirstScript.parentNode.insertBefore(
newScript, oldFirstScript);
}());

Synkron, blockerande laddning
<script src=”js/script.js”></script>
Kör
Ladda
Html

Asynkron, icke-blockerande laddning
<script defer src=”js/script.js”></script>
Kör
Ladda
Html

Asynkron, blockerande laddning
<script async src=”js/script.js”></script>
Kör
Ladda
Html

Java
In the Beginning

public static void main(String[] args)

JavaScript

(function(){}());

window.someGlobalFunction();

Självinvokerande
funktioner
Anonym, självinvokerande med parameter
(function myFunc(me) {
// Kod
}('John'));

Anonym, självinvokerande utan parameter
(function myFunc() {
// Kod
}());

Självinvokerande
funktioner
Anonym, namnlös och självinvokerande
(function() {
// Kod
}());

Namngiven, självinvokerande, icke-anropsbar
var myFunc = function(me) {
// Kod
}('John');

JavaScript
Scope
var GLOB = {};

GLOB.func = function(array) {
var local = …;
…
for (var i=0; i<array.length; i++){
…
var temp = array[i];
}
};

JavaScript
Scope
var GLOB = {};

var local = …, i, temp;
…
for (i=0; i<array.length; i++){
…
temp = array[i];
}
};

JavaScript
Scope
var GLOB = {};

var local = …, i, temp;
…
for (i=0; Det ﬁnns bara två variabel-scope:
i<array.length; i++){
… Globalt eller lokalt funktions-scope.
temp = array[i];
} Alla lokala variabler ”hissas” till
}; toppen av funktionen (hoisting).

Statiska variabler?
Medlemsvariabler?

JavaScript

JW.Personnummer =
function (personnummerStr) {
this.personnummer = personnummerStr;
var checksum =
personnummerStr.substring(11,12);
};
JW.Personnummer.prototype.regexp =
/[0-9]+/;
JW.Personnummer.OLDEST_DATE =
new Date(1880, 0, 1);
JW.obj = new
JW.Personnummer("191212121212");
JW.obj.personnummer;
JW.obj.checksum;
JW.obj.regexp;
JW.Personnummer.OLDEST_DATE

JavaScript

JW.Personnummer =
function (personnummerStr) {
this.personnummer = personnummerStr;
var checksum =
personnummerStr.substring(11,12);
};
JW.Personnummer.prototype.regexp =
/[0-9]+/;
JW.Personnummer.OLDEST_DATE =
new Date(1880, 0, 1);
JW.obj = new
JW.Personnummer("191212121212");
JW.obj.personnummer;
JW.obj.checksum;
JW.obj.regexp;
JW.Personnummer.OLDEST_DATE;

JavaScript
Closure (hölje)
(function(array) {
var i, temp;
…
…
temp = array[i];
}
}([1, 2, 3]));

JavaScript
Closure (hölje)
(function(array) {
var i, temp;
…
… Ett closure håller sitt scope och sin
temp =kontext under hela sin livslängd.
array[i];
}
}([1, 2, 3]));
En referens som kommit innanför
höljet (array i exemplet) lever alltså
kvar och håller sitt värde inom
”höljet”.

JavaScript
Closure-exempel
for(i=0; i<pages.length; i++) {
var page = pages[i];
pageElement.load(page.url,
function() {
launchForm(page.form);
});
}

JavaScript
Closure-exempel
function() {
});
Callback-funktion eftersom
}
pageElement.load()
är asynkron

JavaScript
Closure-exempel
function() {
page hissas och får alltså ett
}); nytt värde för varje iteration
}

JavaScript
Closure-exempel
var page;
page = pages[i];
page hissas och får alltså ett
function() {
nytt värde för varje iteration
});
}

JavaScript
Closure-exempel
var page;
page = pages[i];
function() {
}); När väl callbacken anropas så
} kommer page referera till
pages[pages.length-1]
eller åtminstone ett annat
element än det var tänkt.

JavaScript
Closure-exempel
var page;
page = pages[i];
function() {
});
}

JavaScript
Closure-exempel
var page;
page = pages[i];
(function(page) {
function() {
}
});
})(page);
}

JavaScript
Closure-exempel
var page;
page = pages[i];
(function(page) {
function() {
}
Vi binder page till ett nytt hölje
});
})(page); så att callbacken refererar rätt
}

JavaScript
Closure-exempel
var page;
page = pages[i];
(function(myPage) {
pageElement.load(myPage.url,
function() {
launchForm(myPage.form);
} Om man mår dåligt av sånt
}); så kan man döpa om höljets
})(page); variabel :)
}

Med självinvokerande funktioner,
scope och closures är vi redo för
det viktigaste designmönstret:

Crockford-modulen
eller
Module Pattern

JavaScript

JW.cache = (function(){}());

JavaScript

JW.cache = (function(){
return {};
}());

JavaScript

return {
getPatient:
function(personnummer) {

}
};
}());

JavaScript

var cache = {};
return {
getPatient:

}
};
}());

JavaScript

var cache = {};
return {
getPatient:
var res=cache[personnummer];
// Check if fresh
// Return
}
};
}());

JavaScript

var cache = {};
return {
getPatient:
if(_isValid(res)) {
return res.patient;
} else {
// Handle cache miss
}
}
};
}());

JavaScript

var cache = {},
_isValid = function(res) {

}
return {
getPatient:
if(_isValid(res)) {
return res.patient;
} else {
}
}

JavaScript

var cache = {},
_isValid(res) {
return !res ? false :
(Date.now() - res.timestamp)
<= 60000; // One minute
}
return {
getPatient:
if(_isValid(res)) {
return res.patient;
} else {

JavaScript

var cache = {},
_isValid(res) {
return !res ? false :
(Date.now() - res.timestamp)
<= 60000; // One minute
}
return { Vi kan alltså ha (closure-)privata
variabler och funktioner
getPatient:
if(_isValid(res)) {
return res.patient;
} else {

JavaScript

Crockford = (function(initParam) {
var privVar1, privVar2,
_privFunc1 = function() {

},
_privFunc2 = function() {

};
return {
pubVar1: ”value”,
pubFunc1: function() {

}
};
}(initParam));

För att möjliggöra enhetstester
använder man någon form av

Revealing
Module Pattern

JavaScript

var _privFunc = function() {

};
return {
unitTestHandle: {
privFunc: _privFunc
}
};
}(initParam));

JavaScript

var _privFunc = function() {

};
return {
unitTestHandle: {
privFunc: function() {
log(”Only use in unit test”);
return _privFunc();
}
}
};
}(initParam));

Java
Metodsignaturer
public void execPurchase(int, String,
String, boolean, User)

JavaScript

function execPurchase(price, item,
discountCode, wantsSpam, user)

Java
Metodsignaturer
builder = new Purchase.Builder();
Purchase purchase =
builder.setPrice(9900)
.setItem(”keps”).wantsSpam(false)
.setUser(user).build();
JavaScript

function execPurchase(purchase) {
purchase.price …
purchase.item …
purchase.wantsSpam …
purchase.user …

Vad innebär ett
JavaScript-bygge?

JavaScript-bygge
• Hantering av ramverk och bibliotek
• Beroendehantering egna filer/moduler/
klasser
• Enhetstester och statisk analys
• Konkatenering och minifiering
• final.html

Hantering av ramverk

• Vill ofta cache:a tredjepartsbibliotek hårt
• Ibland hotlink:a till CDN eller dylikt
• Därför sällan slå ihop med egen kod
• Vill sällan ha i sitt eget repo

Beroendehantering
egen kod

• AMD – Asynchronous Module Deﬁnition
• Bundlat i större ramverk såsom YUI och
Ext JS
• Fristående require.js m.ﬂ.

Enhetstester och
statisk analys
• Enhetstester med Jasmine, JSTestDriver etc.
• phantom.js – webbläsare utan GUI
• sinon.js – mockramverk
• Statisk analys med JSHint eller JSLint

Konkatenering och
miniﬁering
• Google Closure Compiler
• YUI Compressor
• uglify.js
• require.js utför konkatenering och
miniﬁering med Closure Compiler och
uglify.js

Utan beroendehantering
HTML
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery-encoder-0.1.0.js"></script>
<script src="js/base.js"></script>
<script src="js/JW/util/util.js"></script>
<script src="js/JW/personnummer/Personnummer.js"></script>
<script src="js/JW/patient/Patient.js"></script>
<script src="js/JW/cache/cache.js"></script>
<script src="js/JW/proxy/proxy.js"></script>
<script src="js/JW/gui/gui.js"></script>
</head>

Med beroendehantering
HTML
<head>
<script data-main="js/base"
src="js/lib/require-1.0.5/require.js"></script>
</head>

java -classpath /path/to/rhino/
js.jar:/path/to/Closure_Compiler/
compiler.jar
org.mozilla.javascript.tools.shell.
Main ../../r.js -o name=base
out=min.js baseUrl=.
paths.jquery=empty: paths.jquery-
encoder=empty:

ﬁnal.html
HTML
<head>
<script src="js/lib/require-1.0.5/require.js"></script>
<script>
require.config({
paths: {
"base": "js/min",
"jquery": "js/lib/jquery-1.7.1.min",
"jquery-encoder": "js/lib/jquery-encoder-0.1.0"
}
});
require(["base"]);
</script>
</head>

Strict Mode (ES5)
• Inled JavaScript-ﬁl eller funktions-scope
med ”use strict”;

• Omöjliggör ofrivilliga globala variabler
• Inget läckage av globala objektet till this
• Omöjliggör”keps”,i objekt à la
{ item:
duplikat
item: ”boll”}

• Ingen skuggning via eval(”var x;”)

JavaScript
seal (ES5)
JW = {name: "John"};

JW.name = "Joe";
JW.job = "coder";

console.log(JW.name + ", " + JW.job);

JavaScript
seal (ES5)

Object.seal(JW);

JW.name = "Joe";
JW.job = "coder";


JavaScript
freeze (ES5)

Object.freeze(JW);

JW.name = "Joe";
JW.job = "coder";


JavaScript
freeze (ES5)
Men … obj.prototype kan
Object.freeze(JW);
fortfarande ändra på förseglade och frysta
JW.name = "Joe";testat att frysa prototypen
objekt. Jag har
JW.job =det verkar fungera men det måste
och "coder";
förstås analyseras för sidoeffekter.

JavaScript
arguments
JW = function() {
console.log(arguments.length);
for(var i=0; i<arguments.length; i++) {
console.log(arguments[i]);
}
return "done";
}

JW(1, "Joe", [2, 3, 4]);

Referensdokumentation
Alltid
developer.mozilla.org
Aldrig
www.w3schools.com
Varför?
w3fools.com

Att följa
http://javascriptweekly.com/

@javascript_news
@BrendanEich @littlecalculist
@addy_osmani @addyosmani
@paul_irish @badass_js
@rwaldron @slicknet
@kangax @unscriptable
@sthlmjs

JavaScript för Javautvecklare

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von johnwilander

Mehr von johnwilander (7)

JavaScript för Javautvecklare