• 1. JavaScriptAn quick overview on html5 & javascript By Arunraj natarajan, on aug 21, 2015
  • 2. indexJavaScript – Now & Future Types Scope & Closure Singleton Namespaces this; Who is s(he)? Bind, Call & Apply HTML5 JS APIs JavaScript MVC Q & A
  • 3. Javascript – now & futureHTML5JAVASCRIPT APIsEverybody says HTML5 is awesome! But, few of them knows, it’s all because of JavaScript
  • 4. Typesfunction null | array | object string | number | boolean | undefinedPrimitive typesObject typesFunction Typevar theNumber = 123; var theString = 'foobar'; var theBoolean = true; var anArray = [1, 2, 'abc']; var aFunction = function(a, b) { return a + b; }; var anObject = {a: '123', b: aFunction, c: anArray}; Use typeof to get the type. For Ex. typeof(null); returns  "object"
  • 5. Scopes & closuresScopes – Meant as Scopes are nested by functions all the way to the global scope. An element in the scope chain is basically a Map with a pointer to its parent scope.Global Scope var a = 1; function one() { alert(a); }Local Scope var a = 1; function three() { var a = 3; alert(a); }Local Scope var a = 1; function four() { if (true) { var a = 4; } alert(a); // alerts '4', not ‘1’. }
  • 6. Scopes & closuresClosures – Thanks to Douglas Crockford “An inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.”function showName (firstName, lastName) { var nameIntro = "Your name is "; // this inner function has access to the outer function's variables, including the parameter function makeFullName () { return nameIntro + firstName + " " + lastName; } return makeFullName (); } showName ("Michael", "Jackson"); // Your name is Michael Jackson
  • 7. NamespaceIs an object literal encapsulating your own functions and variables. It avoids colliding with global functions or objects or variables and other libraries.Classic Example: var MyApplication = { var1: "asda", var2: "asa", myFunc: function() {alert(this.var1) }}; MyApplication.myFunc(); As in Our EMEA Application: if (typeof CWM == 'undefined') { var CWM = {}; } if (typeof CWM.appts == 'undefined') { CWM.appts = {}; } CWM.appts.getRelationshipData = function(opt_data, opt_sb) { var output = opt_sb || new soy.StringBuilder(); output.append('\t
    LIST OF RELATIONSHIPS
    '); var itemList23 = opt_data.relationshipData; var itemListLen23 = itemList23.length; for (var itemIndex23 = 0; itemIndex23 < itemListLen23; itemIndex23++) { var itemData23 = itemList23[itemIndex23]; } return opt_sb ? '' : output.toString(); };
  • 8. SingletonThe singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. Code from – Essential JavaScript Design Patterns. (Addy Osmani)var mySingleton = (function () { var instance; // Instance stores a reference to the Singleton function init() { // Singleton function privateMethod(){ // Private methods and variables console.log( "I am private" ); } var privateVariable = "Im also private"; return { publicMethod: function () { // Public methods and variables console.log( "The public can see me!" ); }, publicProperty: "I am also public" }; }; return { // Get the Singleton instance if one exists, or create one if it doesn't getInstance: function () { if ( !instance ) { instance = init(); } return instance; } }; })(); // Usage: var singleA = mySingleton.getInstance(); var singleB = mySingleton.getInstance(); console.log( singleA === singleB ); // true
  • 9. This; who is (s)he?this; means context or subject.The this reference refers to an object and it is usually used inside a function or a method, although it can be used outside a function in the global scope.var person = { firstName :“Jhonny", lastName :“Depp", showFullName:function () { console.log (this.firstName + " " + this.lastName); } } ​ person.showFullName (); // Jhonny Depp$ ("button").click (function (event) { // $(this) will have the value of the button ($("button")) object​ ​// because the button object invokes the click () method​ console.log ($ (this).prop ("name")); });
  • 10. Bind, Call & applyExample: 2 function greet (gender, age, name) { var salutation = gender === "male" ? "Mr. " : "Ms. "; if (age > 25) { return "Hello, " + salutation + name + "."; } else { return "Hey, " + name + "."; } } var greetAnAdultMale = greet.bind (null, "male", 45); greetAnAdultMale(“Arun”); // Returns "Hello, Mr. Arun.“ var greetAYoungster = greet.bind (null, "", 16); greetAYoungster("Kavin"); // Returns "Hey, Kavin."Example: 1 var myObj = { specialFunction: function () { }, anotherSpecialFunction: function () { }, getAsyncData: function (cb) { cb(); }, render: function () { this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }.bind(this)); } }; myObj.render();Bind is useful where we need to keep the ‘this’ context alive. And, we can do the partial function call using Bind as shown in second example.Bind
  • 11. Bind, Call & applyCalls a function with a given this value and arguments provided individually.Call()In the nutshell, call and apply invoke the function and switch the function context with the first argument. The main difference between these two is:Calls a function with a given this value and arguments provided as an array (or an array like object).Apply()var numersToCompare = [45, 34, 23, 109, 345, 567]; var maxNumber = Math.max.apply(null, numersToCompare); console.log(maxNumber); // output is 567var maxNumber = Math.max.call(null, 45, 34, 23, 109, 345, 567); document.write(maxNumber)​ // output is 567We can use Apply method where we don’t know no. of arguments to be passed on.
  • 12. Html5 js api’sOffline? Yes. We can check whether the user is online or offline. It enables us to kickoff our offline functionality. For Example: function isUserOnline () { return navigator.onLine; }Storage Here Storage means passing the data to browser’s storage API, which stores in the device itself. The API lets us to store, retrieve data and helps to search and manipulate. Below are the APIs currently available. Web Storage (localStorage & sessionStorage) Web SQL (Structured SQL Relational DB) Indexed DB (We can store object structured data) File Access (Helps to read the file content in front-end itself)
  • 13. Html5 js api’sGeoLocation The GeoLocation API allows you to get the user’s location using the positioning capabilities of their device. The API has three methods: getCurrentPosition() | watchPosition() | clearWatch() Device Orientation The Device Orientation API helps us to get the physical position of the device. We can get the data in the mode of degress (alpha, beta, gamma). Media Capture and Stream (with help of webRTC) Vibration API Device Light API Proximity Events API Battery Status API, Contacts, Message, WebNFC …
  • 14. Html5 js api’sWeb Workers Web Workers are the best to do the multi thread request between server and browser. Since it will run completely on background, does not impact the UI.Web Socket Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing bandwidth.WebRTC Enables to do real time communication in the modes of chat, audio and video. It has inbuilt APIs as below: Media Stream | RTCPeerConnection | RTCDataChannel
  • 15. Html5 js api’sPerformance It has been called as User Timing API to get the time information from the application. Helps to get time spent information in between functional execution of the script. It returns the data in milliseconds format. window.performance.now(); window.performance.mark('mark_start_loading'); window.performance.measure('mark_start_loading ', 'domComplete', 'mark_fully_loaded');
  • 16. Javascript mvcReusable and extendable code. Separation of view logic from business logic. Allow simultaneous work between developers who are responsible for different components (such as UI layer and core logic). Easier to maintain.
  • 17. Thank You!