[2015/2016] JavaScript

Gran Sasso Science Institute

Ivano Malavolta

JavaScript

Roadmap

JavaScript basics

JavaScript event loop

Ajax and promises

DOM interaction

JavaScript object orientation

Web Workers

Useful Microframeworks

JavaScript

JavaScript is THE scripting language

Born in 1995, it is now one of the most famous programminglanguages

Heavily used by all major players in web and mobile development

….and remember this…

JavaScript HAS NOTHING TO DO WITH Java!!

Essentials

JavaScript is the programming code that can be inserted intoHTML 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?

Essentials

We can use the <script> tag to insert JavaScript code into ourweb 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 isexecuted immediately

We will use a module loaderto load JS

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

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

• Exception handling– throw

– try, catch

– finally

I assume you allknow these

Operators on expressions

Operators perform some actions 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)

Special operators (1)

JavaScript provides the following special operators:

• Conditional operatorcondition ? 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 objectvar myCar = {make:’Opel’, model:’Corsa’, year:2014};‘make’ in myCar; // returns true

Special operators (2)

• instanceof– similar to the instanceOf keyword in Java

myObj instanceof Car; //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

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

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

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: ‘The Smiths’, founder: {name: ‘Steven’, surname: ‘Morrissey’}};

– band.name; // The Smiths

– band.founder[‘surname’]; // Morrissey

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

Function Calls

Functions can be called by referring to their name and passing itsparameters

A function can produce a result by means of the return statement

Since function declarations are expressions, a function can be declaredand executed all at once

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?

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

Closures with the same function def

http://goo.gl/Ya0be

Closures with the same environment

http://goo.gl/Ya0be

wow... makeCounter looks like a class... What do you think about changeBy?

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers



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

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?

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) {};

HintThe setTimeout callback can’t fire until the while loop has finished running.

JavaScript concurrency model

JavaScript has a concurrency model based on an event loop

Intuitively, you can consider as if your code is always running in a loop like this:

runYourScript();while (atLeastOneEventIsQueued) {

fireNextQueuedEvent(); };

The two previous examples make sense now?

JavaScript concurrency model

The JavaScript concurrency model is composed of three main entities

http://goo.gl/0zgXC

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

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

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

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

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

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

If an event occurs (e.g. a touch event), and there is no listener?

à the event is lost

http://goo.gl/0zgXC

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers


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

Load JSON data

JSON is a lightweight alternative to XML, where data is structured as plain JavaScript objects

Load JSON Data

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

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 promisesvar promise = $.get('/mydata'); promise.done(onSuccess); promise.fail(onFailure); promise.always(onAlways);

Where is the difference?

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

Promise derivationJQuery’swhen 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... });

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers


The DOM

DOM = Document Object Model

Every web page have a hierarchical structure in which everyelement is contained into another: its parent.

Text elements are particular since they never have children

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

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");

Modifying the DOM

createElement to create a new node:

var myDiv = document.createElement(”a");

createTextNode to create a new text node:var textNode = document.createTextNode("Hello!");

setAttribute to set an attribute of a node:

myDiv.setAttribute("href", "http://www.google.it");

appendChild to put new nodes into the DOM:

myDiv.appendChild(textNode);document.body.appendChild(myDiv);

Events

Every time the user interacts with the DOM, a set of events istriggered in our JS application

We can listen to these events by means of registeredeventHandlers

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

Example

document.getElementbyId("myDiv").addEventListener("touchend", manageTouch, false);

function manageTouch(event) {console.log("touched " + event.target);

}

name of the event

callback function

handle the event in the capture phase

data about the event

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

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

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

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

touchstarttouchend

touchmovetouchentertouchcancel

The Touch and TouchList objects

relative to the viewport

relative to the whole display

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers


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 operationsinvolve hash table lookups (which are very fast in our browsers!)

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 semanticallyequivalent

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

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 isthe prototype of the other objects

à it defines an initial set of properties

The inheriting objects can specify their own properties

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.

The new and this keywords

new is strongly related to 'this'.

It creates a brand new empty object, and then calls the functionspecified, with 'this' set to that new object.

The function specified with 'this' does not return a value butmerely modifies the this object. It's new that returns the thisobject to the calling site.

Functions that are designed to be called by 'new' are calledconstructor functions. Common practise is to capitalise thesefunctions as a reminder to call them with new.

http://goo.gl/jBTMWX

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 an object created with X acts as the prototype of constructor function Y

à X is a supertype of Y

Object Orientation (4): methods

In Java I can define methods in 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

OO Summary

JavaScript object model is prototype-based, rather than class-based

see here: http://jsfiddle.net/6kdBa/10/

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers


Web Workers

Javascript is a single-threaded language

à If a task takes 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

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

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 workerscript cannot access:

– the DOM– the global window object

• (each web worker has its ownself global object)

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.

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); }

Web Workers

The web worker script can post back messages to the main script:

self.onmessage = function(event) {

if(event.data === “start”) {

var result;// do something with result

self.postMessage(result);}

}

Roadmap

JavaScript basics


Ajax and promises

DOM interaction


Web Workers


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:

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

Zepto Modules

Zepto Usage

Simply replace the reference to jQuery with the one to Zepto

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

• Utilitieshttp://documentcloud.github.com/underscore/

iceCream

Minimal grid system for your layouts, pure CSS3 only

https://github.com/html5-ninja/icecream

iceCream

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

Ratchet examples

Ratchet examples

Ratchet examples

Spin JS

It allows you to dynamically create a spinning loading indicator

Pure CSS à resolution-independent

http://fgnass.github.io/spin.js/

Spin JS

Frameworks

jQueryMobile, jQuery, etc. are beautiful libraries…

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)

A final note

JavaScript allows you to do the same thing in many ways

In order to make your code readable (and thus maintainable), youhave to:

• follow as mush as possible known design patterns– singleton, factory, etc.

• follow conventions– https://github.com/rwaldron/idiomatic.js/

References

http://eloquentjavascript.net

https://developer.mozilla.org/en-US/docs/JavaScript

http://www.w3schools.com

http://www.microjs.com

Exercises

1. create a set of classes representing the domain of Loveitaly, like:– Product

– Seller

– User

2. develop a simple view for showing a list of products1. HTML, CSS, JavaScript

2. user interaction management

3. develop a view for showing the details about a specific product of Loveitaly– here you have to reason about how to implement a navigation in JavaScript

Technology

[2015/2016] JavaScript