1) Explain about HTML5 local storage ?
There are two ways to store data in HTML as objects locally :
- localStorage – store data across session acess
- 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 :
- Internal stylesheet : <style type=”text/css”>
@media only screen and (max-width: 600px){
/* rules apply to the device resolution is 480px or less */
}
</style> - Imported stylesheet : @import “tablet.css” (min-width: 800px) and (max-width: 1200px);
- 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