Your SlideShare is downloading. ×
0
Gran Sasso Science Institute
Ivano Malavolta
JavaScript for real men
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
JavaScript
JavaScript is THE scripting language

Born in 1995, it is now of the most famous programming
languages

Heavily...
Essentials
JavaScript is programming code that can be inserted into
HTML pages
à can react to events in the DOM
à can mo...
Essentials
We can use the <script> tag to insert Javascript code into our
web app


<!DOCTYPE html>
<html>

<body>

<scrip...
Expressions
An expression is any valid unit of code that resolves to a value

Four types of expressions:
•  arithmetic: ev...
Statements
A JS program is composed of a set of statements, which can be:

•  Conditional
–  if
–  switch
•  Loop
–  for
–...
Operators on expressions
Operators perform some action on expressions and may
produce other expressions as output

Five ma...
Special operators (1)

JavaScript provides the following special operators:

•  Conditional operator
	
  condition	
  ?	
 ...
Special operators (2)
•  instanceof
–  similar to the instanceOf method in Java


 
myObj instanceof Object; //returns tru...
Variables (1)
Variables are declared by using the keyword var

var magicNumber = 42;
var user = App.getCurrentUser();
var ...
Variables (2)

The scope of Javascript statements is based on functions (not blocks) 




If you declare a variable withou...
Constants and Literals
•  Array
–  var bands = ["NIN", "Kraftwerk", "Rammstein"];
•  Boolean
–  var logged= true; // false...
Function declarations

A function declaration is composed of:
•  name
•  parameters
•  body
Primitive parameters are passe...
Function Calls

Functions can be called by referring to their name and passing its
parameters


A function can produce a r...
Functional Programming

Functions can be passed as arguments to other functions, or can be
produced as output of another f...
Closures

A closure is a special kind of object consisting of:

•  A function
•  The function’s environment
–  any local v...
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 c...
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
JavaScript event loop
Confusion about JavaScript’s asynchronous event model is quite common 

Confusion leads to bugs, bug...
First exploration
Let’s see this piece of code
http://goo.gl/g3xvY
for	
  (var	
  i	
  =	
  1;	
  i	
  <=	
  3;	
  i++)	
 ...
Second exploration
Let’s see this piece of code
http://goo.gl/g3xvY
var	
  start	
  =	
  new	
  Date;	
  	
  
setTimeout(f...
JavaScript concurrency model
JavaScript has a concurrency model based on an event loop

Intuitively, you can consider as i...
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 argumen...
Heap



The heap stores all the objects created during the execution of
JavaScript functions

The heap is just a name to d...
Queue
The queue contains a list of messages to be processed

Each message has an associated function callback	
  
	
  
Whe...
Important remarks about the queue
Each message is processed completely before any other message is
considered

à when a f...
Adding messages to the queue
In web browsers, a message is added when:
•  an event occurs
•  there is an event listener at...
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
Ajax
Ajax lets us fire requests from the browser to the server without
page reload

à  you can update a part of the page w...
Load JSON data
JSON is a lightweight alternative to XML, where data is
structured as plain JavaScript objects
Load JSON Data
The Ajax() call
All of jQuery’s Ajax functions are simply wrappers around the
$.ajax() method

$.ajax({
url: url,
dataType...
Callback Functions
A callback is a function that 
1.  is passed as an argument to another function 
2.  is executed after ...
A note on nested callbacks
Nested callbacks tempt us to add more features by adding more
code, rather than implementing th...
Avoid more than two levels of function nesting 
Store async results outside of the function making the async call
so that ...
Promises
A promise is an object that represents a task with:
1.  two possible outcomes (success or failure) 
2.  callbacks...
Why promises?

If your Ajax request has multiple effects (animation, other Ajax
requests, updating the DOM, etc.), you do ...
Promise derivation
JQuery’s when method allows you to combine multiple promises

when acts as a logical AND for promise re...
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
The DOM
DOM = Document Object Model

Every web page have a hierarchical structure in which every
element is contained into...
The DOM
In Javascript the document global variable stores a reference to
the object corresponding to the <html> tag

Every...
Accessing the DOM
nodeName to get the name of the tag of a node:
document.body.firstChild.nodeName;!
!
nodeValue to get th...
Modifying the DOM
createElement to create a new node:
var myDiv = document.createElement("A");!
!
createTextNode to create...
Events
Every time the user interacts with the DOM, a set of events is
triggered in our JS application

We can listen to th...
Example
document.getElementbyId("myDiv").addEventListener(!
"touchend", manageTouch, false);!
!
!
!
!
!
function manageTou...
Event Bubbling & capturing
When an event is triggered in the DOM, 
it can be:

•  captured by all the elements
containing ...
Event default behaviour
Each element in the DOM has a default behaviour

ex. if you tap on an <a> element, it will make th...
Touch events
Touch events are triggered when the user touches the display

The event can describe one or more points of co...
Touch events
Main attributes of a touch event:

•  TouchEvent.touches
–  a TouchList of Touches
•  TouchEvent.type
–  the ...
The Touch and TouchList objects
relative to the
viewport
relative to the
whole display
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
JavaScript objects

An object in JS can be seen as a map of key/value pairs

•  key: a JavaScript string
•  value: any Jav...
Object creation

In JavaScript an object can be created in two ways:


new-value creation 


 


 

object literal syntax
...
Object properties

In JavaScript an object property can be created in two ways:


dot notation 




 


 

 
array-like no...
Object Orientation (1): the model

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

No notion of class...
Object Orientation (2): class definitions

In Java I can specify a Class. It can have special methods, Constructors,
which ...
The new and this keywords
new is strongly related to 'this'. 

It creates a brand new empty object, and then calls the fun...
Object Orientation (3): inheritance

In Java I can define a hierarchy of classes by defining subclasses via the
extends keyw...
Object Orientation (4): methods

In Java I can specify define methods within my class and call them by
referring to specific...
OO Summary
!
JavaScript object model is prototype-based, rather than class-based
see here: 
http://jsfiddle.net/6kdBa/10/
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
Web Workers
Javascript is a single-threaded language
à If a tasks take a lot of time, users have to wait


Web Workers pr...
Web Workers
Web Workers can be used to:
•  prefetch data from the Web
•  perform other ahead-of-time operations to provide...
Web Workers
Any JS file can be launched as a worker


Example of Web Worker declaration:


var worker = new Worker(“worker....
Web Workers concurrency model
A web worker has its own 
•  stack,
•  heap
•  message queue
Two distinct runtimes can only ...
Web Workers
The main JS script can communicate with workers via
postMessage() calls:


$(‘#button’).click(function(event) ...
Web Workers
The web worker script can post back messages to the main script:


onmessage = function(event) {
if(event.data...
Roadmap
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction 
JavaScript object orientation
Web Worke...
Zepto
The only relevant downside of jQuery is about 
PERFORMANCE

However,
1.  it is not very noticeable in current class-...
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 ...
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,...
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
•  ...
Ratchet examples
Ratchet examples
Ratchet examples
Spin JS
It allows you to dynamically create a spinning loading indicator









Pure CSS à resolution-independent

http...
Spin JS
Frameworks
jQueryMobile, jQuery, Backbone, etc. are beautiful tools…

However they may impact the performance of your app
...
A final note
JavaScript allows you to do the same thing in many ways

In order to make your code readable (and thus maintai...
References
https://developer.mozilla.org/en-US/docs/JavaScript
http://www.w3schools.com
http://www.microjs.com
https://git...
+ 39 380 70 21 600
Contact
Ivano Malavolta | 
Gran Sasso Science Institute
iivanoo
ivano.malavolta@univaq.it
www.ivanomala...
JavaScript for real men
Upcoming SlideShare
Loading in...5
×

JavaScript for real men

1,982

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,982
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
74
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript for real men"

  1. 1. Gran Sasso Science Institute Ivano Malavolta JavaScript for real men
  2. 2. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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?
  17. 17. 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
  18. 18. Closures with the same function def http://goo.gl/Ya0be
  19. 19. Closures with the same environment http://goo.gl/Ya0be wow... makeCounter looks like a class... What do you think about changeBy?
  20. 20. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  21. 21. 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
  22. 22. 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?
  23. 23. 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.
  24. 24. 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?
  25. 25. JavaScript concurrency model The JavaScript concurrency model is composed of three main entities http://goo.gl/0zgXC
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  32. 32. 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
  33. 33. Load JSON data JSON is a lightweight alternative to XML, where data is structured as plain JavaScript objects
  34. 34. Load JSON Data
  35. 35. 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);
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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?
  40. 40. 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
  41. 41. 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...     });    
  42. 42. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  43. 43. 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
  44. 44. 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
  45. 45. 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");! !
  46. 46. 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");!
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. The Touch and TouchList objects relative to the viewport relative to the whole display
  54. 54. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  55. 55. 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!)
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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.
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. OO Summary ! JavaScript object model is prototype-based, rather than class-based see here: http://jsfiddle.net/6kdBa/10/
  64. 64. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  65. 65. 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
  66. 66. 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
  67. 67. 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)
  68. 68. 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.
  69. 69. 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); }
  70. 70. 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); } }
  71. 71. Roadmap JavaScript basics JavaScript event loop Ajax and promises DOM interaction JavaScript object orientation Web Workers Useful Microframeworks
  72. 72. 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:
  73. 73. 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
  74. 74. Zepto Modules
  75. 75. Zepto Usage Simply replace the reference to jQuery with the one to Zepto
  76. 76. 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/
  77. 77. iceCream Minimal grid system for your layouts, pure CSS3 only https://github.com/html5-ninja/icecream
  78. 78. iceCream
  79. 79. 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
  80. 80. Ratchet examples
  81. 81. Ratchet examples
  82. 82. Ratchet examples
  83. 83. Spin JS It allows you to dynamically create a spinning loading indicator Pure CSS à resolution-independent http://fgnass.github.io/spin.js/
  84. 84. Spin JS
  85. 85. 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)
  86. 86. 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/
  87. 87. References https://developer.mozilla.org/en-US/docs/JavaScript http://www.w3schools.com http://www.microjs.com https://github.com/iivanoo/cordovaboilerplate
  88. 88. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×