Solution:
The browser has an event loop which checks the event queue and processes pending events. For example, if an event happens in the background (e.g., a script onload event) while the browser is busy (e.g., processing an onclick), the event gets appended to the queue. When the onclick handler is complete, the queue is checked and the event is then handled (e.g., the onload script is executed).
Similarly, setTimeout() also puts execution of its referenced function into the event queue if the browser is busy.
1 and 4 are displayed first since they are logged by simple calls to console.log() without any delay. 2 is displayed after 3 because 2 is being logged after a delay of 1000 msecs (i.e., 1 second) whereas 3 is being logged after a delay of 0 msecs.
When a value of zero is passed as the second argument to setTimeout(), it attempts to execute the specified function “as soon as possible”. Specifically, execution of the function is placed on the event queue to occur on the next timer tick. Note, though, that this is not immediate; the function is not executed until the next tick.
That’s why in the above example, the call to console.log(4) occurs before the call to console.log(3) (since the call to console.log(3) is invoked via setTimeout, so it is slightly delayed).
javascript has rocketed into prominence as the symbol of new generation web technologies ruling tech world. Web developers rate Javascript as a critical component of HTML5 technologies along with JQuery and CSS. Javascript is ubiquitous and it is impossible to think of a web development arena without Javascript. It has been reported that Javascript is the most used language on GitHub..
As an article published in a web development journal succinctly put it, “Javascript is the number one language in the world. It’s the language of the web and a starting point for so many web developers”. JSON, Ajax, Angular.JS, BackboneJS and Node.js, are the most used Javascript concepts beyond any doubt of dispute.
JSON
JSON stands for Javascript Object Notation and it has become the major technical specification used in the web development arena. As JSON can be used with any programming language, its primary usage is for transmitting data between server and web application. JSON naturally becomes a best choice for web developers to connect to their applications to backend services (developed in Java or PHP or ASP.NET or similar). Mauritius Although JSON is derived from Javascript scripting language, it is a language independent data format. JSON’s basic types are Number, String, Boolean, Array, Object, and Null. It is the primary data format used for asynchronous browser or server communication largely replacing XML.
Ajax
Ajax is the acronym for Asynchronous Java and XML. AJAX helps to update a portion of the webpage without the need to refresh the whole page (for any data updates). It is the prominent technique of single page application. Objective of single page application is to build a website that fits on a single web page to provide a more fluid web experience. Implementation of Single Page Application is done using XMLHttpRequest object from Javascript. Ajax lets developers to write web applications to send and retrieve data from a server asynchronously and they can ensure that it is performed without causing interference to display existing page. AJAX supports various data types such as html,string,json and xml. There have been a number of developments in the technologies used in Ajax application ever since its inception.
Angular.JS
Angular.JS is an open source web development (MVC) framework built by the Internet giant and omnipotent Google. It was introduced for the purpose of simplification of application development and Angular.JS takes care of HTML’s inability to build dynamic views in web applications. With the help of Angular.JS, web development experts can extend HTML dimension for web application. Angular.JS collects data from server and compiles templates locally for presentation through client side MVC framework. Angular JS library works by first reading the HTML page which is embedded into additional custom tag attributes. According to information available from a Javascript analytics service provider, Angular JS is used by many major companies such as Verizon, Apple, Cisco, Etrade, ATT and more. One of the prominent features of AngularJS is two-way data binding which is missing in most of other JS-MVC frameworks.
Backbone.JS
Backbone.JS is an effective Javascript library equipped with JSON interface and it is based on the model view presenter. According to the description given in Backbone.JS website, “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects all to your existing API over a RESTful JSON interface”. Backbone.JS has gained huge popularity among web developer community because it is a robust and scalable platform for building web applications. Web applications of Digg, Foursquare, LinkedIn Mobile, Pandora Radio, and Pinterest are built with Backbone.JS. As Backbone.JS technology is dependent on one Javascript library, it is known for being light weight. It leads to more code and lean MVC framework for organizing Javascript application. Backbone.JS comes with models, collections, views, events, router, and other great features. In the context of Backbone.js, the model is a place where data is kept and the business logic is distributed between the views and main application’s file.
Node.Js
Node.js acts as the backbone of success of Javascript and it is a platform used for building fast network applications. Being based on Google’s V8 Javascript engine and Chrome browser runtime, Node.js has gained immense fame among web development aficionados. A unique feature of Node.js is that it contains a built-in library that allows applications to act as an independent web server. It is to be recalled that other prominent software platforms used for building network applications depend on Apache HTTP server and IIS. Node.js features an event-driven architecture (Software architecture pattern promoting the production and reaction to events) and non blocking I/O API. Web development projects of upcoming years will be based on the uniform web language of Node.js. Node.js can be run within the run time on OSX, Microsoft Windows, Linux, Free BSD and IBM-I. It has been reported that Node.JS is used by multinational corporations including PayPal, Microsoft, Yahoo as well as Walmart. When Node.js was invented in 2009, neither its developer Ryan Dahl nor others thought that it would become a stupendous hit among web developers.
What are advantages and disadvantages of “Use Strict” keyword in JS?
“Use Strict” is a new feature introduced in ECMAScript 5. The purpose of “use strict” is to indicate that the code should be executed in “strict mode”. For example, with strict mode, you cannot use undeclared variables.
“use strict”;
display();
function display() {
info = 30; // This will also cause an error Strict mode helps out in the following ways:
• It catches some common coding bloopers, throwing exceptions.
• It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
• It disables features that are confusing or poorly thought out. Browser support:
• Internet Explorer from version 10.
• Firefox from version 4.
• Chrome from version 13.
• Safari from version 5.1.
• Opera from version 12.
In their simplest form, deferreds allow you to specify what will occur when a computation/task completes or fails. jQuery’s specific implementation allows you to register callback functions that will run if a deferred resolves successfully, if it is rejected with errors, or if it is notified of some “progress” towards a resolved state (more on that later).
The “Deferred” pattern describes an object which acts as a proxy for some unit of computation that may or may not have completed.
The pattern can apply to any asynchronous process: AJAX requests, animations or web workers to name a few.
Important to understand:
Deferreds can be passed around indefinitely, and callbacks can continue to be added during the entire lifetime of the deferred object.
The key to this behavior is callbacks registered with the deferred will run immediately if the deferred is already resolved.
You don’t need to worry if the asynchronous unit of computation (e.g. an AJAX request) is finished or not.
To detect an iPad Mini in HTML5, you can use Javascript by inspecting all properties of the default browser objects. So for this device, the only property unique is :
screen.availWidth = 748
screen.availHeight = 1024
CommonJS is a project to define a common API and ecosystem for JavaScript. A part of CommonJS is the module specification. Node.js is a server-side JavaScript runtime and implements modules based on the CommonJS Module spec.
AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD.
One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously – that means that modules are only loaded as they are needed, as opposed to loading all modules up front.
AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment – for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browse.
Have you ever worked with retina graphics? If so, when and what techniques did you use?
On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:
i) Using alternate high resolution pixels
Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.
ii) Using @face-fonts instead of images icon
Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.
iii) Using SVG images instead of Bitmap images
Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.
iv) Using JavaScript to replace all the images with double sized image
We can use JavaScript to replace all images in a webpage but it will be a difficult task replacing each one of them by writing individual code.
What is the Difference between Grunt, NPM, Package and Bower?
Grunt: A Java Script task runner which can performrepetitive tasks like compilation, unit testing, minification, linting, etc to make our job easier.
NPM: Apackage manager for JavaScript. It manages dependencies for an application. It also allows users to install Node.js applications / modules that are available on the npm registry.
Package.json is a document you need to know about what application/modules you need to install. The most important things are the name and version fields, without whichthe package won’t install without them.
Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
There are three different syntax we can use fordeclaring functionsin java script
i) Function Declaration
function Person(){
console.log(“Hello”);
}
A Function Declaration defines a named function variable without requiring variable assignment. Theyare declared as constructs which are standalone and cannot be nested within non-function blocks.
ii) Function expressions:
var Person = function(){
console.log(“Hello”);
};
A function expression looks similar to function declarations, except that the function is assigned to a variable name. The function name can be optional. If the name isn’t given, then we can term it as an anonymous.
iii) Function constructor:
varmyPerson = new Person();
Such a syntax declaration is used when creating an instance of a Class(Constructor). Here, we pass in an unlimited number of arguments in the front and use the keyword “new”.
