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.
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
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
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
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
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
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
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
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
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