Robert Bosch – Front end / Javascript developer interview questions and answer

1)explain javascript inheritance ?

JavaScript does not have “methods” in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

var o = { a: 2, m: function(b){ return this.a + 1; } };

console.log(o.m()); // 3 // When calling o.m in this case, ‘this’ refers to o

var p = Object.create(o); // p is an object that inherits from o

p.a = 12; // creates an own property ‘a’ on p console.log(p.m()); // 13 // when p.m is called, ‘this’ refers to p. // So when p inherits the function m of o, ‘this.a’ means p.a, the own property ‘a’ of p

2) Diff b/w $document.ready and window.onload and body onload event ? Windows load event fires when all the content on your page fully loaded including the DOM (document object model) content, asynchronous JavaScript, frames and images, you can also use body onload= both are same just window.onload = func(){} and are different ways of using the same event.

jQuery $document.ready function event executes a bit earlier than window.onload and called once the DOM(Document object model) is loaded on your page. It will not wait for the images, frames to get fully load.

3)explain Javascript static variables and methods ? Static variables and methods

Static variables Static methods

A function is an object. That provides us with a very good way to create static variables or the variables which persist along multiple calls.

For example, we want a variable which counts function calls. Static variables

There are languages which allow to put a static keyword before a variable, and then such variable is not cleared in next calls.

Example of a static variable in PHP language: 1 function f() { // PHP code! 2 static $count = 0; 3 4 echo ++$count; 5 } 6 7 f(); f(); f(); // 1 2 3

In JavaScript, there is no term or keyword static, but we can put such data directly into function object (like in any other object).

1 function f() { 2 f.count = ++f.count || 1 // f.count is undefined at first 3 4 alert(“Call No ” + f.count) 5 } 6 7 f(); // Call No 1 8 f(); // Call No 2

Of course, a global variable can keep the counter, but static variables lead to a better architecture.

We could make the code more universal by replacing f with arguments.callee.

1 function f() { 2 arguments.callee.count = ++arguments.callee.count || 1 3 4 alert(“Called ” + arguments.callee.count + ” times”) 5 }

Now you can safely rename the function if needed Smile Static methods

Static methods, just like variables, are attached to functions. They are used mostly for objects:

01 function Animal(name) { 02 arguments.callee.count = ++arguments.callee.count || 1 03 04 this.name = name 05 } 06 07 Animal.showCount = function() { 08 alert( Animal.count ) 09 } 10 11 var mouse = new Animal(“Mouse”) 12 var elephant = new Animal(“elephant”) 13 14 Animal.showCount() // 2

for more info : http://javascript.info/tutorial/static-variables-methods-decorators

4) If both parent and child element have onclick event , when you click on child , parent onclick event also loads. how to disable it ?

using event.stopPropagation() we can stop the event bubbling up in DOM tree. $( .childelementclass ).click(function( event ) { event.stopPropagation(); // Do something });

For more info : http://api.jquery.com/event. stopPropagation/

5) What does the $ sign mean in Jquery ?

The $ is just a function. It is actually an alias for the function called jQuery, so your code can be written like this with the exact same results:

jQuery(‘#Text’).click(function () { jQuery(‘#Text’).css(‘color’, ‘red’); });

In jQuery the variable is assigned a copy of the jQuery function. This function is heavily overloaded and means half a dozen different things depending on what arguments it is passed. In this particular example you are passing it a string that contains a selector, so the function means “Create a jQuery object containing the element with the id Text”

6) explain javascript namespace ? “what is a namespace?” A namespace is a container and allows you to bundle up all your functionality using a unique name. In JavaScript, a namespace is really just an object that you’ve attached all further methods, properties and objects. Creating a namespace for your code helps prevent the overwriting of existing function names. It’s also a step in the object-oriented direction, which promotes modularity and code re-use.

7) whather Javascript supports block level scope or not ? Blocks do not have scope in Javascript .

There is no difference between the following:

1 var i = 1 2 { 3 i = 5 4 }

…And the following 1 i = 1 2 { 3 var i = 5 4 }

All var declarations are processed before the execution in in both cases.

Unlike languages like Java, C etc, variables in JavaScript survive after a loop.

That’s again, because their scope is a function.

1 for(var i=0; i<5; i++) { } 2 3 alert(i) // 5, variable survives and keeps value

Declaring a variable in the loop is convenient, but doesn’t make the loop it’s scope. for mor einfo : http://javascript.info/tutorial/initialization#blocks-do-not-have-scope

8) why Javascript is loosely typed language ? Loose typing means that variables are declared without a type. This is in contrast to strongly typed languages that require typed declarations. /* JavaScript Example (loose typing) */var a = 13; // Number declaration var b = “thirteen”; // String declaration

/* Java Example (strong typing) */int a = 13; // int declaration String b = “thirteen”; // String declaration

Notice that in the JavaScript example, both a and b are declared as type var. Please note, however, that this does not mean that they do not have a type, or even that they are of type “var”. Variables in JavaScript are typed, but that type is determined internally. In the above example, var a will be type Number and var b will be type String. These are two out of the three primitives in JavaScript, the third being Boolean.

Type coercion is a topic that is closely associated with loose typing. Since data types are managed internally, types are often converted internally as well. 7 + 7 + 7; // = 21 7 + 7 + “7”; // = 147 “7” + 7 + 7; // = 777 In the examples above, arithmetic is carried out as normal (left to right) until a String is encountered. From that point forward, all entities are converted to a String and then concatenated.

for more info : http://blog.jeremymartin.name/2008/03/understanding-loose-typing-in.html

HCL – Web / UI Developer – interview questions and answer – HTML5 , CSS3 , JS & jQuery

1) Explain about HTML5 local storage ?

There are two ways to store data in HTML as objects locally :

  1. localStorage – store data  across session acess
  2. sessionStorage – storing data for current session only

Data will be stored in key/value pair format.

example:

localStorage.empid=”420″;

sessionStorage.companyname = “SHARAG INFOTECH”;

2)  explain CSS media queries ?

CSS media queries are used to develop responsive templates for different layout of screen, print, mobile , tablet or any other resolutions

CSS media queries can be added in 3 ways as like CSS style sheet :

  1. Internal stylesheet :  <style type=”text/css”>
    @media only screen and (max-width: 600px){
    /* rules apply to the device resolution is 480px or less  */
    }
    </style>
  2. Imported stylesheet :   @import “tablet.css”   (min-width: 800px) and (max-width: 1200px);
  3. External stylesheet:  <link rel=”stylesheet” type=”text/css” href=”deskto.css” media=”screen and (min-width: 1200px), print and (min-resolution: 300dpi)” />

3) explain css inheritance ?

Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.

A property can also be explicitly inherited by using the inherit keyword in property.

CSS inheritance example:
class inheritance for an HTML tag :
<div class=”firstClass secondClass thirdClass fourthClass ” > </div >
CSS property inheritance from parent :
p {
color: #000;
}
p a:link {
color: inherit;
}

and using LESS method for inheritance example:
//through variable
@color: #123456;
#emp {
color: @color;
}
div {
color: @color;
}

//through class name calling [MIXINS]

.rounded-corners (@radius: 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#navtable {
.rounded-corners;
}

#maintable {
.rounded-corners(5px);
}

4) what is javascript inheritance ?

In simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else.
Inherited children inherit their parent’s behaviour To say A inherits from B, is saying that A is a type of B.
In JavaScript You must use a special object called prototype.
function Animal() {}; // This is the Animal *Type*
Animal.prototype.eat = function () {
alert(“All animals can eat!”);
};

function Bird() {}; // Declaring a Bird *Type*
Bird.prototype = new Animal(); // Birds inherit from Animal
Bird.prototype.fly = function() {
alert(“Birds are special, they can fly!”);
};

The effect of this is that any Birds you create (called an instance of Bird) all have the properties of Animals
var aBird = new Bird(); // Create an instance of the Bird Type
aBird.eat(); // It should alert, so the inheritance worked
aBird.fly(); // Important part of inheritance, Bird is also different to Animal

var anAnimal = new Animal(); // Let’s check an instance of Animal now
anAnimal.eat(); // Alerts, no problem here
anAnimal.fly(); // Error will occur, since only Birds have fly() in its prototype

5) explain javascript associative array ?

Associative arrays are where we can associate a key string with a value string
JavaScript objects are also associative arrays.
i.e the property  emp.Name can also be read by calling emp[‘Name’]
We can access each property by entering the name of the property as a string into the array
it refers to accessing the DOM elements of HTML also [as object or associative array]
6) explain JS Namespace ?

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace
and also helps to organize blocks of functionality into easily manageable groups that can be uniquely identified.

JavaScript doesn’t  builtin support of namespacing but using objects and closures we can achieve a similar effect.
javascript Namespacing patterns :
1)    Single global variables :
var myApplication =  (function(){
function(){
/*…*/
},
return{
/*…*/
}
})();

2)    Object literal notation :

var myApplication = {
getInfo:function(){ /**/ },
// we can also populate our object literal to support
// further object literal namespaces containing anything
// really:
models : {},
views : {
pages : {}
},
collections : {}
};

3)    Nested namespacing :

var myApp =  myApp || {};
// perform a similar existence check when defining nested
// children
myApp.routers = myApp.routers || {};
myApp.model = myApp.model || {};
myApp.model.special = myApp.model.special || {};
// nested namespaces can be as complex as required

4)    Immediately-invoked Function Expressions :

// an (anonymous) immediately-invoked function expression
(function(){ /*…*/})();
// a named immediately-invoked function expression
(function foobar(){ /*..*/}());
// this is technically a self-executing function which is quite different
function foobar(){ foobar(); }
5)   Namespace injection :

// define a namespace we can use later
var ns = ns || {}, ns2 = ns2 || {};
// the module/namespace creator
var creator = function(val){
var val = val || 0;
this.next = function(){
return val++
};

this.reset = function(){
val = 0;
}
}
creator.call(ns);

// ns.next, ns.reset now exist
creator.call(ns2, 5000);
// ns2 contains the same methods
// but has an overridden value for val
// of 5000
for more details on namespace read http://addyosmani.com/blog/essential-js-namespacing/
7) explain Jquery live and bind methods ?
.bind() attacheds events to elements that exist or match the selector at the time the call is made.
Any elements created afterwards or that match going forward because the class was changed, will not fire the bound event.

$(‘img’).bind(‘click’, function(){…});

.live() works for existing and future matching elements.
Before jQuery 1.4 this was limited to the following events:
click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
$(‘img’).live(‘click’, function(){…});

8) what is bootstrap ?

Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.
More details http://getbootstrap.com
9) type of webservice ?

there are two types of web service….1. SOAP [Simple Object Access Protocol] Webservice and 2. RESTful [REpresentational State Transfer] Webservice.
SOAP is a messaging protocol , REST is a design philosophy , not a protocol.
SOAP:

you define your interface in a .wsdl file, which describes exactly which input parameters are expected and how the return values will look like
there are tools to generate the .wsdl files out of java class hirarchies. JAXB for example
there are also tools to generate java objects/classes as part of eclipse for example (don’t know the name in the moment).
SOAP is very strict. Every request is validatet against the wsdl before processing.

A good but not so easy to start with framework for SOAP WS is Apache CXF

REST (no hands on experience up to now, feel free to correct and improve ;) ):

a way to access a webserver or web application to retrieve data from or send to it.
it’s only negotiated, how it is accessed.
common is something like this http://server.domain.com/app/type/id=123 to retrieve object of type type with id=123
very intuitive, but no automatic validation of requests.

The main advantages of REST web services are:

Lightweight – not a lot of extra xml markup
Human Readable Results
Easy to build – no toolkits required

SOAP also has some advantages:

Easy to consume – sometimes
Rigid – type checking, adheres to a contract
Development tools