A presentation on the programming language JavaScript. It covers types, object orientation, variables and scope, closures, the Crockford Module Pattern, loading and executing, imports and namespacing, and more. The language features are compared to Java throughout the slides.

1. JavaScript Beyond
jQuery
John Wilander
@johnwilander

2. shouldilearnjavascript.com
@johnwilander

3. Part 1: Typing
@johnwilander

4. Java
Types
Primitive:
byte, short, int, long, float, double,
boolean, char
The rest is objects, so called reference types
JavaScript
Primitive:
string, number, boolean, function,
undefined
The rest is object
@johnwilander

5. Java
Types
Primitive:
byte, short, int, long, float, double,
boolean, char
JavaScript
Primitive:
string, number, boolean, function,
undefined
@johnwilander

6. Java
Types
Primitive:
byte, short, int, long, float, double,
boolean, charnot
Strings are
general objects,
they're a type
JavaScript
Primitive:
string, number, boolean, function,
undefined
@johnwilander

7. Java
Types
Primitive:Only one type
byte, for numbers, i.e. long, float, double,
short, int,
no difference
boolean, char
between integers
or decimals
JavaScript
Primitive:
string, number, boolean, function,
undefined
@johnwilander

8. Java
Types
Primitive:
byte, short, int, long, float, double,
boolean, char Functions are full
objects with their
own type
JavaScript
Primitive:
string, number, boolean, function,
undefined
@johnwilander

9. Java
Types
Primitive:
byte, short, int, long, float, double,
JavaScript's
boolean, char
version of
uninitialized is
JavaScript
undefined
Primitive:
string, number, boolean, function,
undefined
@johnwilander

10. Java
Static vs Dynamic Typing
Static typing:
String name; Variables have types
name = ”John”; Values have types
name = 34; Variables cannot change type
JavaScript
Dynamic typing:
var name; Variables have no types
name = ”John”; Values have types
name = 34; Variables change type dynamically
@johnwilander

11. Dynamic Typing
JavaScript
var name = ”John”;
Variables have Values have types
no types
@johnwilander

12. Strong vs Weak Typing
@johnwilander

13. Strong vs Weak Typing
Strong !== good
Weak !== bad
@johnwilander

14. Java
Strong vs Weak Typing
int intVar = 4; Pretty strong typing
"" + intVar; Implicit type conversion
intVar + 0.0; Implicit, widening type conv.
intVar + (int)0.0; Explicit type conversion
intVar + null; Not allowed
JavaScript
var dynVar = 4; Very weak typing
dynVar + ""; Implicit type conversion
dynVar + null; Implicit type conversion
dynVar + []; Implicit type conversion
dynVar + [0]; Implicit type conversion
@johnwilander

15. Type Safe
≈
no type errors at runtime
@johnwilander

16. John's Conclusion
Java is a statically, strongly typed
language with decent type safety
JavaScript is a dynamically, weakly typed
language with decent type safety
@johnwilander

17. Object Orientation
@johnwilander

18. Java: Classes & Objects
Object
Class Object
Executing
Source Object code
Class Singleton
@johnwilander

19. JavaScript: Functions,
Object & Prototypes
Object
Prototype Object
Executing
Source Object code
Function Function
@johnwilander

20. JavaScript: Functions,
Object & Prototypes
Object
Prototype
Object
Executing
Source Object code
Function
Anonymous
closures Function
Modules
@johnwilander

21. Keywords in JavaScript
Statistics from:
jQuery
jQuery.Mobile
Prototype
Ext JS
MooTools
Backbone
Underscore
http://ariya.ofilabs.com/2012/03/most-popular-javascript-keywords.html @johnwilander

22. Keywords in JavaScript
Functions,
functions,
functions
Seldom new
Almost never
classes as types
@johnwilander

23. Java: Extension by
Inheritance
Subclass
extends
Super
class
@johnwilander

24. Java: Subtyping by
Inheritance
Super
type
extends
Subtype
@johnwilander

25. Through inheritance
Java classes get larger
in terms of functions
and
smaller in terms of type
(more specific)
@johnwilander

26. In JavaScript
extension
and
subtyping
are separate things
@johnwilander

27. Why do we want to
subtype?
Because we think in
terms of
static typing and
is-a-relations
@johnwilander

28. Static Typing and
Subtyping
Java
public void doPurchase(Item item)
Accepts Item
or subtypes to Item
@johnwilander

29. Dynamic Typing
JavaScript
public void doPurchase(Item item)
@johnwilander

30. Dynamic Typing
JavaScript
public void doPurchase(Item item)
@johnwilander

31. Dynamic Typing
JavaScript
public void doPurchase(Item item)
@johnwilander

32. Dynamic Typing
JavaScript
public void doPurchase(Item item)
@johnwilander

33. Dynamic Typing
JavaScript
function doPurchase(item)__
Accepts anything
... or nothing
@johnwilander

34. Dynamic Typing
JavaScript
function doPurchase(item)__
Can return anything
... or nothing
@johnwilander

35. Part 2: To start a
JavaScript program
@johnwilander

36. <html>
JavaScript and Web
<head>
<script src=”js/main.js”></script>
<script>
var JW = {};
// More code
</script>
</head>
<body>
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy text</button>
<div>
Some information
</div>
<script>
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

37. JavaScript and Web
<html>
<head>
Script from file in <head>
<script src=”js/main.js”></script> Synchronous loading and
<script>
var JW = {}; execution
// More code
</script>
</head>
<body>
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy text</button>
<div>
Some information
</div>
<script>
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

38. <html>
JavaScript and Web
<head>
<script src=”js/main.js”></script> Inlined script in <head>
<script>
var JW = {}; Synchronous execution
// More code
</script>
before DOM is loaded
</head>
<body>
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy text</button>
<div>
Some information
</div>
<script>
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

39. <html>
JavaScript and Web
<head>
<script src=”js/main.js”></script>
<script>
var JW = {};
// More code
</script> Script directly in HTML,
</head>
<body> executed on click event
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy text</button>
<div>
Some information
</div>
<script>
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

40. <html>
JavaScript and Web
<head>
<script src=”js/main.js”></script>
<script>
var JW = {};
// More code
</script>
</head>
<body>
<button onclick="document.getElementById('field2').value=
Inlined script in <body>
document.getElementById('field1').value">Copy text</button>
<div>
Some information Executed when the
</div>
<script> parser gets here
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

41. <html>
JavaScript and Web
<head>
<script src=”js/main.js”></script>
<script>
var JW = {};
// More code
</script>
</head>
<body>
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy text</button>
<div>
Some information Script from file in <body>
</div>
<script> Loaded and executed
synchronously
JW.calcPrice = function(price, vat) { //… };
</script>
<script src=”http://3rdparty.com/trackUsers.js”></script>
</body>
</html>
@johnwilander

42. Good Practice:
1. All JavaScript on file.
2. All statically loaded
JavaScript in one block.
@johnwilander

43. Dynamic Loading
(function(){
var oldFirstScript =
document.getElementsByTagName('script')[0];
newScript =
document.createElement('script'),
newScript.async = true;
newScript.src = 'js/script.js';
oldFirstScript.parentNode.insertBefore(
newScript, oldFirstScript);
}());
@johnwilander

44. OK, that's loading.
But I want to start.
@johnwilander

45. Java
In the Beginning
public static void main(String[] args)
JavaScript
(function(){}());
window.someGlobalFunction();
@johnwilander

46. Self-Invoking Functions
Anonymous, self-invoking with parameter
(function(me) {
// Code
}('John'));
Anonymous, self-invoking without parameter
(function() {
// Code
}());
@johnwilander

47. Part 4: Variables
@johnwilander

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

49. JavaScript
Scope
var GLOB = {};
GLOB.func = function(array) {
var local = …, i, temp;
…
for (i=0; i<array.length; i++){
…
temp = array[i];
}
};
@johnwilander

50. JavaScript
Scope
var GLOB = {};
GLOB.func = function(array) {
var local = …, i, temp;
…
for (i=0; There are only two variable scopes:
i<array.length; i++){
… Global or local function scope.
temp = array[i];
} All local variables are hoisted to
}; the top of the function.
@johnwilander

51. JavaScript
Closure
(function(array) {
var i, temp;
…
for (i=0; i<array.length; i++){
…
temp = array[i];
}
}([1, 2, 3]));
@johnwilander

52. JavaScript
Closure
(function(array) {
var i, temp;
…
for (i=0; i<array.length; i++){
…
temp =Aarray[i]; its scope and its
closure keeps
} context during its life span.
}([1, 2, 3]));
A reference ending up inside the
closure (array above) will keep
its value inside the closure.
@johnwilander

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

54. JavaScript
Closure Pitfall
for(i=0; i<pages.length; i++) {
var page = pages[i];
pageElement.load(page.url,
function() {
launchForm(page.form);
});
Callback function since
}
pageElement.load()
is asynchronous
@johnwilander

55. JavaScript
Closure Pitfall
for(i=0; i<pages.length; i++) {
var page = pages[i];
pageElement.load(page.url,
function() {
page is hoisted and thus gets
launchForm(page.form);
}); a new value for each iteration
}
@johnwilander

56. JavaScript
Closure Pitfall
var page;
for(i=0; i<pages.length; i++) {
page = pages[i];
pageElement.load(page.url,
page is hoisted and thus gets
function() {
launchForm(page.form);iteration
a new value for each
});
}
@johnwilander

57. JavaScript
Closure Pitfall
var page;
for(i=0; i<pages.length; i++) {
page = pages[i];
pageElement.load(page.url,
function() {
launchForm(page.form);
}); When the callback is run page
} will refer to
pages[pages.length-1]
or at least another value than
intended.
@johnwilander

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

59. Making Use of Closures
JavaScript
var page;
for(i=0; i<pages.length; i++) {
page = pages[i];
(function(page) {
pageElement.load(page.url,
function() {
launchForm(page.form);
}
});
})(page);
}
@johnwilander

60. Making Use of Closures
JavaScript
var page;
for(i=0; i<pages.length; i++) {
page = pages[i];
(function(page) {
pageElement.load(page.url,
function() {
launchForm(page.form);
}
We bind page to a new closure
});
})(page); so that the callback refers
} correctly
@johnwilander

61. With self-invoking functions,
scope, and closures we are ready for
the most important design pattern:
Part 5: The Crockford
Module
or
Module Pattern
@johnwilander

62. JavaScript
JW.cache = (function(){}());
@johnwilander

63. JavaScript
JW.cache = (function(){
return {};
}());
@johnwilander

64. JavaScript
JW.cache = (function(){
return {
getPatient:
function(personnummer) {
}
};
}());
@johnwilander

65. JavaScript
JW.cache = (function(){
var cache = {};
return {
getPatient:
function(personnummer) {
}
};
}());
@johnwilander

66. JavaScript
JW.cache = (function(){
var cache = {};
return {
getPatient:
function(personnummer) {
var res=cache[personnummer];
// Check if fresh
// Return
}
};
}());
@johnwilander

67. JavaScript
JW.cache = (function(){
var cache = {};
return {
getPatient:
function(personnummer) {
var res=cache[personnummer];
if(_isValid(res)) {
return res.patient;
} else {
// Handle cache miss
}
}
};
}());
@johnwilander

68. JavaScript
JW.cache = (function(){
var cache = {},
_isValid = function(res) {
}
return {
getPatient:
function(personnummer) {
var res=cache[personnummer];
if(_isValid(res)) {
return res.patient;
} else {
// Handle cache miss
}
}
@johnwilander

69. JavaScript
JW.cache = (function(){
var cache = {},
_isValid(res) {
return !res ? false :
(Date.now() - res.timestamp)
<= 60000; // One minute
}
return {
getPatient:
function(personnummer) {
var res=cache[personnummer];
if(_isValid(res)) {
return res.patient;
} else {
// Handle cache miss
@johnwilander

70. JavaScript
JW.cache = (function(){
var cache = {},
_isValid(res) {
return !res ? false :
(Date.now() - res.timestamp)
<= 60000; // One minute
}
return { We can have (closure) private
variables and functions
getPatient:
function(personnummer) {
var res=cache[personnummer];
if(_isValid(res)) {
return res.patient;
} else {
// Handle cache miss
@johnwilander

71. JavaScript
Crockford = (function(initParam) {
var privVar1, privVar2,
_privFunc1 = function() {
},
_privFunc2 = function() {
};
return {
pubVar1: ”value”,
pubFunc1: function() {
}
};
}(initParam));
@johnwilander

72. Part 6:
Named Parameters
@johnwilander

73. Java
Method Signatures
public void execPurchase(int, String,
String, boolean, User)
JavaScript
function execPurchase(price, item,
discountCode, wantsSpam, user)
@johnwilander

74. Java
Method Signatures
builder = new Purchase.Builder();
Purchase purchase =
builder.setPrice(9900)
.setItem(”cap”).wantsSpam(false)
.setUser(user).build();
JavaScript
function execPurchase(purchase) {
purchase.price …
purchase.item …
purchase.wantsSpam …
purchase.user …
@johnwilander

75. Part 7: Asynchronous
Module Definition
(AMD) with require.js
@johnwilander

76. Concatenate
and minify
@johnwilander

77. Concatenate
and minify
You may want to separate
third party code to be able
to cache it harder.
@johnwilander

78. Concatenate
and minify
The goal is to mimimize the
number of HTTP requests and
the size of data over the wire.
@johnwilander

79. Tools for Concatenation
and Minification
• Google Closure Compiler
• UglifyJS
• require.js
Concatenates and minifies with Closure
Compiler or UglifyJS
@johnwilander

80. require.js – import and
namespace in JavaScript
@johnwilander

81. require([
"backbone",
"underscore",
"models/CartModel",
"text!templates/CartItem.html"],
function (Backbone, _, CartModel,
cartItemTemplate) {
// Code dependent on Backbone etc
});
@johnwilander

82. paths : {
jquery : "vendor/jquery.min",
backbone : "../components/backbone/backbone-min",
underscore : "../components/underscore/underscore"
}
main.js
require([
"backbone",
"underscore",
"models/CartModel",
"text!templates/CartItem.html"],
function (Backbone, _, CartModel,
cartItemTemplate) {
// Code dependent on Backbone etc
});
@johnwilander

83. File system, like Java packages
require([
"backbone",
"underscore",
"models/CartModel",
"text!templates/CartItem.html"],
function (Backbone, _, CartModel,
cartItemTemplate) {
// Code dependent on Backbone etc
});
@johnwilander

84. require([
"backbone", Local name, like
"underscore", dependency injection
"models/CartModel",
"text!templates/CartItem.html"],
function (Backbone, _, CartModel,
cartItemTemplate) {
var model = new CartModel();
});
@johnwilander

85. Define new modules
define([
"backbone",
"underscore",
"models/CartModel",
"text!templates/CartItem.html"],
function (Backbone, _, CartModel,
cartItemTemplate) {
var CartItemView = …;
…
return CartItemView;
});
@johnwilander

86. CartItemView.js
@johnwilander

87. index.html without
require.js or the like
<head>
<script src="js/lib/jquery-1.9.0.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>
… manually, in the right order.
@johnwilander

88. index.html with
require.js
<head>
<script data-main="scripts/main" src="scripts/require.js" >
</script>
</head>
@johnwilander

89. index.html with
require.js
<head>
<script data-main="scripts/main" src="scripts/require.js" >
</script>
</head>
require.config({
…
paths : {
jquery : "vendor/jquery.min",
backbone : "../components/backbone/backbone-min",
underscore : "../components/underscore/underscore"
}
});
require(["app"], function (App) {
App.start();
});
main.js
@johnwilander

90. Reference
Documentation
Always
developer.mozilla.org
Never
www.w3schools.com
Why?
w3fools.com
@johnwilander

91. The Stream
http://javascriptweekly.com/
@javascript_news
@BrendanEich @littlecalculist
@addy_osmani @addyosmani
@paul_irish @badass_js
@rwaldron @slicknet
@kangax @unscriptable
@sthlmjs
@johnwilander

92. dojo-release-1.8.3.zip 11 Mb
ext-4.1.1a-gpl.zip 45,7 Mb
ext-all.js 1 Mb
yui_3.8.1.zip 28,1 Mb
@joakimkemeny & @johnwilander

93. Simplified
Dom api Templates
& shims
Widgets MVC
@joakimkemeny & @johnwilander

94. underscore
Modernizr
jQuery Simplified
Dom api Templates
& shims
Widgets MVC
@joakimkemeny & @johnwilander

95. Handlebars
Mustach
Simplified
Dom api Templates
& shims
Widgets MVC
@joakimkemeny & @johnwilander

96. Simplified
Dom api Templates
& shims
Ember
Backbone
angular
Widgets MVC
@joakimkemeny & @johnwilander

97. Simplified
Dom api Templates
& shims
Widgets MVC
Spine
@joakimkemeny & @johnwilander

98. Simplified
Dom api Templates
& shims
Widgets MVC
Bootstrap
jQuery UI
@joakimkemeny & @johnwilander

99. Simplified
Dom api Templates
& shims
Ext JS
Dojo
YUI
Widgets MVC
@joakimkemeny & @johnwilander

100. All-in-one frameworks are
best suited for newly
written single-purpose
applications without
mashup behavior.
@joakimkemeny & @johnwilander

101. Micro frameworks are
better if you need to
integrate legacy code, some
nifty CMS product, or if you
have logic/content from
third parties.
Micro frameworks don't
”take over” you application.
@joakimkemeny & @johnwilander