JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
3. JavaScript
JavaScript is THE scripting language
Born in 1995, it is now of the most famous programming
languages
Heavily used by all major players in web and mobile development
….and remember this…
JavaScript HAS NOTHING TO DO WITH Java!!
4. Essentials
JavaScript is programming code that can be inserted into
HTML pages
à can react to events in the DOM
à can modify the DOM
Interpreted language
à see the eval() function
The HTML5 standard is adding new APIs to JavaScript
Can you list some of them?
5. Essentials
We can use the <script> tag to insert Javascript code into our
web app
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
If you want to execute code when you need it, you have to
create a function
The code in myScript is
executed immediately
We will use a module loader
to load JS
6. Expressions
An expression is any valid unit of code that resolves to a value
Four types of expressions:
• arithmetic: evaluates to a number
• string: evaluates to a sequence of chars
• logical: evaluates to true or false
• object: evaluates to an object
Yes, JavaScript is object-
oriented
7. Statements
A JS program is composed of a set of statements, which can be:
• Conditional
– if
– switch
• Loop
– for
– while, do-while
– break, continue
– for..in, forEach
• Exception handling
– throw
– try, catch
– finally
I assume you all
know these
8. Operators on expressions
Operators perform some action on expressions and may
produce other expressions as output
Five main types of operators:
• assignment
– x = x + y; x*= 3; x %= y, x = x & y
• comparison (always return a logical value)
– x == 3; x != 5; x === y; 5 > 3
• arithmetic (always return a numerical value)
• logical
– && (AND), || (OR), ! (NOT)
• String
– + (string concatenation)
Let’s discuss && and ||
9. Special operators (1)
JavaScript provides the following special operators:
• Conditional operator
condition
?
val1
:
val2
• Comma operator
– evaluates both of its operands and returns the value of the second
operand
• delete
– deletes an object, a property or an array element
delete
window.obj
• in
– checks if a property exists in an object
var
mycar
=
{make:"Opel",
model:"Tigra",
year:1999};
"make"
in
mycar;
//
returns
true
10. Special operators (2)
• instanceof
– similar to the instanceOf method in Java
myObj instanceof Object; //returns true
• new
– creates an instance of an object
var myself = new Person("Ivano Malavolta");
• this
– refers to the current object
this.name;
this[‘name’];
• typeof
– returns the type of an expression
typeof myself.name; // returns string
11. Variables (1)
Variables are declared by using the keyword var
var magicNumber = 42;
var user = App.getCurrentUser();
var loggedUser = (user.isLogged()) ? user.name : undefined
If a variable has no value yet it evaluates to undefined
If a variable has not been defined an exception will be threw:
Uncaught ReferenceError: c is not defined
Global variable: when it is declared OUTSIDE any function
à available to any other code within the app
Local variable: when it is declared INSIDE a function
12. Variables (2)
The scope of Javascript statements is based on functions (not blocks)
If you declare a variable without the var keyword, you are creating a
global variable (!)
In the browser global variables can be accessed by window.varName
this works
13.
14. Constants and Literals
• Array
– var bands = ["NIN", "Kraftwerk", "Rammstein"];
• Boolean
– var logged= true; // false
• Integer and Floating point
– var age = 12;
– var PI = 3.14;
• String
– var hello = ‘hello’;
• Objects
– var band = {name: "NIN", founder: {name: "Trent", surname: "Reznor"}};
– band.name; // NIN
– band.founder["surname"]; // Reznor
15. Function declarations
A function declaration is composed of:
• name
• parameters
• body
Primitive parameters are passed by value
Objects are passed by reference
A function is actually an expression:
This is an example of anonymous function
16. Function Calls
Functions can be called by referring to their name and passing its
parameters
A function can produce a result by means of the return statement
Since function declarations are expressions, a function can be declared
and executed all at once
17. Functional Programming
Functions can be passed as arguments to other functions, or can be
produced as output of another function
function
map(f,a)
{
var
result
=
[],
i;
for(i=0;
i
!=a.length;
i++)
{
result[i]
=
f(a[i]);
}
return
result;
}
map(function(x)
{
return
x*x*x;
},
[0,1,2,5,10]);
result?
18. Closures
A closure is a special kind of object consisting of:
• A function
• The function’s environment
– any local variables that were in-scope at the time that the closure was
created
http://goo.gl/Ya0be
22. JavaScript event loop
Confusion about JavaScript’s asynchronous event model is quite common
Confusion leads to bugs, bugs lead to anger, and Yoda taught us the rest....
http://goo.gl/g3xvY
23. First exploration
Let’s see this piece of code
http://goo.gl/g3xvY
for
(var
i
=
1;
i
<=
3;
i++)
{
setTimeout(function(){
console.log(i);
},
0);
};
Later we will see why
the result is like this
What if a rare event happened
between these two lines of code?
24. Second exploration
Let’s see this piece of code
http://goo.gl/g3xvY
var
start
=
new
Date;
setTimeout(function(){
var
end
=
new
Date;
console.log('Time
elapsed:',
end
-‐
start,
'ms');
},
500);
while
(new
Date
-‐
start
<
1000)
{};
Hint
The setTimeout callback can’t fire until the
while loop has finished running.
25. JavaScript concurrency model
JavaScript has a concurrency model based on an event loop
Intuitively, you can consider as if your code is running from a loop like
this:
runYourScript();
while
(atLeastOneEventIsQueued)
{
fireNextQueuedEvent();
};
The two previous examples make sense now?
27. Stack
Function calls form a stack of frames
Each time a function f is called,
1. a frame f is created with its arguments and local variables
2. the frame f is pushed on top of the stack
3. all the instructions of the function f
are executed
4. when the function f returns, its frame is popped out
The JavaScript engine executes all the frames until the stack is empty
http://goo.gl/0zgXC
28. Heap
The heap stores all the objects created during the execution of
JavaScript functions
The heap is just a name to denote a large mostly unstructured region of
memory
http://goo.gl/0zgXC
29. Queue
The queue contains a list of messages to be processed
Each message has an associated function callback
When the stack is empty:
1. the first message of the queue is taken out
2. its function callback is processed
– basically, a new stack frame is created for callback and it is processed
The message processing ends when the stack becomes empty
http://goo.gl/0zgXC
30. Important remarks about the queue
Each message is processed completely before any other message is
considered
à when a function is running, it cannot be interrupted in any way
à it will always run until full completion
à it can modify data without race conditions
However, if a function takes too long, then it “stops” the app
Solutions:
• make message processing short
• split one message into several messages
• use web workers for multi-threading
http://goo.gl/0zgXC
31. Adding messages to the queue
In web browsers, a message is added when:
• an event occurs
• there is an event listener attached to the event
If an event occurs (eg a touch event), and there is no listener
à the event is lost
Examples of async functions generating messages in the queue:
• DOM interaction (touch, swipe, click…)
• timing functions (setTimeout, setInterval)
• I/O functions (read files, etc.)
• Ajax requests
http://goo.gl/0zgXC
33. Ajax
Ajax lets us fire requests from the browser to the server without
page reload
à you can update a part of the page while the user continues on
working
Basically, you can use Ajax requests to:
• load remote HTML
• get JSON data
34. Load JSON data
JSON is a lightweight alternative to XML, where data is
structured as plain JavaScript objects
36. The Ajax() call
All of jQuery’s Ajax functions are simply wrappers around the
$.ajax() method
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback,
error: callbackError
});
This is equivalent to
$.getJSON(url, callback);
37. Callback Functions
A callback is a function that
1. is passed as an argument to another function
2. is executed after its parent function has completed
– when an effect has been completed
– when an AJAX call has returned some data
$.get('myhtmlpage.html', myCallBack);
function myCallBack(data) {
// do something with data
}
myCallBack is invoked when the '$.get' is done getting the page
38. A note on nested callbacks
Nested callbacks tempt us to add more features by adding more
code, rather than implementing those features in manageable,
reusable pieces
39. Avoid more than two levels of function nesting
Store async results outside of the function making the async call
so that the callback doesn’t have to be nested
passwordHash has a
broader scope here
40. Promises
A promise is an object that represents a task with:
1. two possible outcomes (success or failure)
2. callbacks that fire when one outcome or the other has occurred
//
with
callbacks
$.get('/mydata',
{
success:
onSuccess,
failure:
onFailure,
always:
onAlways
});
//
with
promises
var
promise
=
$.get('/mydata');
promise.done(onSuccess);
promise.fail(onFailure);
promise.always(onAlways);
Where is the difference?
41. Why promises?
If your Ajax request has multiple effects (animation, other Ajax
requests, updating the DOM, etc.), you do not have to mix them with
the part of your app making the request
You can attach multiple callbacks to the same request
For example, you may have a single callback for showing a spinner shared across your app
You can derive new promises from existing ones
Encapsulation
Stacking
Promise derivation
42. Promise derivation
JQuery’s when method allows you to combine multiple promises
when acts as a logical AND for promise resolution and generates a
new promise that:
• is resolved as soon as all of the given Promises are resolved
• or it is rejected as soon as any one of the given Promises is rejected
var
serverData
=
{};
var
getting1
=
$.get('/1')
.done(function(result)
{serverData['1']
=
result;});
var
getting2
=
$.get('/2')
.done(function(result)
{serverData['2']
=
result;});
$.when(getting1,
getting2)
.done(function()
{
//
the
GET
information
is
now
in
serverData...
});
44. The DOM
DOM = Document Object Model
Every web page have a hierarchical structure in which every
element is contained into another: its parent.
Text elements are particular since they never have children
45. The DOM
In Javascript the document global variable stores a reference to
the object corresponding to the <html> tag
Every node of the DOM can be navigated:
document.body.parentNode
document.body.childNodes
document.body.firstChild
document.body.lastChild
document.body.nextSibling
document.body.previousSibling
46. Accessing the DOM
nodeName to get the name of the tag of a node:
document.body.firstChild.nodeName;!
!
nodeValue to get the text of a text node:
document.body.firstChild.firstChild.nodeValue;!
!
innerHTML to get/set the content of a node:
document.body.firstChild.innerHTML = "<div>Hello</div>";!
!
getElementById to get a node by its ID:
document.getElementById("title");!
!
getElementsByTagName to get a node by its type:
document.getElementsByTagName("DIV");!
!
getElementsbyClassName to get a node by its class:
document.getElementsByClassName("listElement");!
!
47. Modifying the DOM
createElement to create a new node:
var myDiv = document.createElement("A");!
!
createTextNode to create a new text node:
document.createTextNode("Hello!");!
!
appendChild to put new nodes into the DOM:
document.body.appendChild(myDiv);!
!
setAttribute to set an attribute of a node:
document.setAttribute("href", "http://www.google.it");!
48. Events
Every time the user interacts with the DOM, a set of events is
triggered in our JS application
We can listen to these events by means of registered
eventHandlers
An eventHandler is a function automatically called by the browser,
where data about the triggered event is available as a parameter
Event handlers can be unregistered
50. Event Bubbling & capturing
When an event is triggered in the DOM,
it can be:
• captured by all the elements
containing the target element
à event capturing
• captured first by the target
and then BUBBLE up through all
the HTML elements containing
the target à event bubbling
51. Event default behaviour
Each element in the DOM has a default behaviour
ex. if you tap on an <a> element, it will make the browser to point to
another location
event.preventDefault();
Cancels the event if it is cancelable, without stopping further
propagation of the event
Usually, this is the last instruction of an event handler
52. Touch events
Touch events are triggered when the user touches the display
The event can describe one or more points of contact
Touches are represented by the Touch object
each touch is described by a position, size and shape, amount of
pressure, and target element.
Lists of touches are represented by TouchList objects
53. Touch events
Main attributes of a touch event:
• TouchEvent.touches
– a TouchList of Touches
• TouchEvent.type
– the type of touch
• TouchEvent.target
– the element in the DOM
• TouchEvent.changedTouches
– a TouchList of all the Touches changed between this event and the
previous one
touchstart
touchend
touchmove
touchenter
touchcancel
54. The Touch and TouchList objects
relative to the
viewport
relative to the
whole display
56. JavaScript objects
An object in JS can be seen as a map of key/value pairs
• key: a JavaScript string
• value: any JavaScript value
Everything in JavaScript is an object, and basically all its operations
involve hash table lookups (which are very fast in our browsers!)
57. Object creation
In JavaScript an object can be created in two ways:
new-value creation
object literal syntax
var
obj
=
new
Object();
obj.name
=
"Ivano";
...
var
obj
=
{
name:
"Ivano",
surname:
"Malavolta",
details:
{
sex:
"male",
address:
”via..."
}
}
These are semantically
equivalent
58. Object properties
In JavaScript an object property can be created in two ways:
dot notation
array-like notation
obj.name
=
“Ivano”;
var
name
=
obj.name;
obj["name"]
=
”Ivano";
var
name
=
obj["name"];
These are semantically equivalent too
In the array-like notation, the property is a string
à it can be computed dynamically
59. Object Orientation (1): the model
JavaScript object model is prototype-based, rather than class-based
No notion of class, everything is an object
An object can be seen as a «template» for other objects, in this case it is
the prototype of the other objects
à it defines an initial set of properties
The inheriting objects can specify their own properties
60. Object Orientation (2): class definitions
In Java I can specify a Class. It can have special methods, Constructors,
which I execute in order to create instances of my class.
In JavaScript I directly define Constructor functions that I call to create
my object by means of the new keyword.
61. The new and this keywords
new is strongly related to 'this'.
It creates a brand new empty object, and then calls the function
specified, with 'this' set to that new object.
The function specified with 'this' does not return a value but
merely modifies the this object. It's new that returns the this
object to the calling site.
Functions that are designed to be called by 'new' are called
constructor functions. Common practise is to capitalise these
functions as a reminder to call them with new.
http://goo.gl/jBTMWX
62. Object Orientation (3): inheritance
In Java I can define a hierarchy of classes by defining subclasses via the
extends keyword
In JavaScript I can define a constructor function X, then I can say that X
acts as the prototype of constructor function Y
à X is a supertype of Y
63. Object Orientation (4): methods
In Java I can specify define methods within my class and call them by
referring to specific instances.
In JavaScript I can define properties which can be functions, then I can
call them directly on the object being used
66. Web Workers
Javascript is a single-threaded language
à If a tasks take a lot of time, users have to wait
Web Workers provide background processing capabilities to web
applications
They typically run on separate threads
à apps can take advantage of multicore CPUs
67. Web Workers
Web Workers can be used to:
• prefetch data from the Web
• perform other ahead-of-time operations to provide a much
more lively UI.
Web Workers are precious on mobile applications because they
usually need to load data over a potentially slow network
68. Web Workers
Any JS file can be launched as a worker
Example of Web Worker declaration:
var worker = new Worker(“worker.js”);
In order to be independent from other workers, each worker
script cannot access:
– the DOM
– the global window object
• (each web worker has its own self global object)
69. Web Workers concurrency model
A web worker has its own
• stack,
• heap
• message queue
Two distinct runtimes can only communicate through sending
messages via the postMessage method
This method adds a message to the other runtime if the latter
listens to message events.
70. Web Workers
The main JS script can communicate with workers via
postMessage() calls:
$(‘#button’).click(function(event) {
$(‘#output’).html(“starting”);
worker.postMessage(“start”);
});
worker.onmessage = function(event) {
$(‘#output’).html(event.data);
}
71. Web Workers
The web worker script can post back messages to the main script:
onmessage = function(event) {
if(event.data === “start”) {
var result;
// do something with result
postMessage(result);
}
}
73. Zepto
The only relevant downside of jQuery is about
PERFORMANCE
However,
1. it is not very noticeable in current class-A mobile devices
2. You can use mobile-suited alternatives to jQuery:
74. Zepto
The goal is to have a ~5-10k modular library that executes fast,
with a familiar API (jQuery)
It can be seen as a
mini-jQuery
without support for
older browsers
77. Underscore.js
A utility library for JavaScript that provides support for the usual
functional suspects (each, map, reduce, filter...)
It provides low-level utilities in the following categories:
• Collections
• Arrays
• Objects
• Functions
• Utilities
http://documentcloud.github.com/underscore/
80. Ratchet
It provides the basic building blocks for realizing well-known
mobile design patterns
Examples:
• Nav bars
• Title bars
• Lists
• Toggles
• Cards
• Popovers
• Sliders
• …
http://goratchet.com
86. Frameworks
jQueryMobile, jQuery, Backbone, etc. are beautiful tools…
However they may impact the performance of your app
à Use a framework only when it is necessary
– Don’t use jQuery only because of the $(selector) syntax!
Solution
• build your own micro-framework
• cut out Cordova plugins you do not use
• use micro-frameworks (http://microjs.com)
87. A final note
JavaScript allows you to do the same thing in many ways
In order to make your code readable (and thus maintainable), you
have to:
• follow as mush as possible known design patterns
– singleton, factory, etc.
• follow conventions
– https://github.com/rwaldron/idiomatic.js/