Interview Questions

HTML5
Intermediate Questions
What are the new tags introduced in HTML5 ?
<article> , <aside> , <figure> , <figcaption>, <meter>,<summary>,<footer> etc
What are the new form controls introduced in HTML5?
Color,dateDatetime,datetime-local,email,month,number,range,search,tel,time,url,week,
What are semantic elements? Give Example
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
What is Character Encoding? What is the default Encoding in HTML5 ?
It defines 127 different alphanumeric characters that could be used on the internet.
The default encoding in HTML5 is UTF-8
What is the use of required attribute in HTML5?
The required attribute is a boolean attribute. It is specified in the input field of forms. The fields specified with
required must be filled out before submitting the form.
Advance Questions
Why is the default Character Encoding in HTML5 set to UTF-8?
Character Encoding defines 127 different alphanumeric characters that could be used on the internet.
ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set. It supported 256 different character codes.
ISO-8859-1 was the default character set for HTML 4. It also supported 256 different character codes.
Because ANSI and ISO was limited, the default character encoding was changed to UTF-8 in HTML5.
Why is data- attributes used in HTML?
The HTML5 data- attribute is a new addition that assigns custom data to an element. It was built to store sensitive or
private data that is exclusive to a page or application, for which there are no other matching attributes or elements.
What is Audio tag in HTML5? Please write the syntax.
Before HTML5, there was no standard for playing audio files on a web page. Before HTML5, audio files could only be
played with a plug-in (like flash). In HTML5 <audio> element specifies a standard way to embed audio in a web page.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

What is <object> element in HTML5 ?

The <object> element is supported by all browsers. The <object> element defines an embedded object within an HTML
document. It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.
Ex 1: <object width="400" height="50" data="bookmark.swf"></object>
Ex 2 : <object width="100%" height="500px" data="snippet.html"></object>

CSS3
Intermediate Questions
What are the new elements introduced in CSS3?
Border-radius, box-shadow, gradients, text-shadow, word-warp, Transformation, transition, animation etc
Write syntax to create a curve edge for a box in CSS3?
div {
border-radius: 25px; /* This is very important thing required. Rest is not mandatory */
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
What are gradients? What are 2 types of gradient in CSS3?
CSS3 gradients let you display smooth transitions between two or more specified colors.
Ex:

CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Write syntax to create text-effect as follow:

h1 {
text-shadow: 5px 5px 5px #FF0000;
}

What is word-warp in CSS3?

If a word is too long to fit within an area, it expands outside the given area. In CSS3, the word-wrap property allows you
to force the text to wrap - even if it means splitting it in the middle of a word:

Advance Questions
What is font-face is CSS3? What is the different format supported?
Web font-face allows Web designers to use fonts that are not installed on the user's computer.
Following are the different format supported:
TrueType Fonts (TTF)
OpenType Fonts (OTF)
The Web Open Font Format (WOFF)
SVG Fonts/Shapes
Embedded OpenType Fonts (EOT)
What is the use of CSS3 transformation? What are the different 2D transformations available?
With CSS3 transform, we can move, scale, turn, spin, and stretch elements. A transformation is an effect that lets an
element change shape, size and position. You can transform your elements using 2D or 3D transformation.
Following are the different 2D transformation available:
translate()
rotate()
scale()
skew()
matrix()
What is the use of CSS3 Transitions? What are the different Transitions properties available?
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or
Javascripts. Below is the list of transition properties
Transition
transition-delay
transition-duration
transition-property
transition-timing-function
What is different between background:

-moz-linear-gradient(red, blue);

&

background: linear-gradient(red,

blue); ?
background: linear-gradient(red, blue);

//Works in all the browser

// Works only in firefox

background: -moz-linear-gradient(red, blue);

What is box model in CSS? How do you calculate the total width & height of a box ?
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding,
and the actual content. The box model allows us to add a border around elements, and to define space between
elements.
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom
margin

Javascript
Intermediate Questions
What are the different date methods in javascript?
Date methods let you get and set date values (years, months, days, minutes, seconds, milliseconds).Different date
methods are:
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
How to generate random number between 0 to 20 ?
Math.floor(Math.random() * 21);

// returns a random number between 0 and 20

What are the different math constants in javascript?

Math.E;
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

//
//
//
//
//
//
//
//

returns
returns
returns
returns
returns
returns
returns
returns

Euler's number
PI
the square root of 2
the square root of 1/2
the natural logarithm of 2
the natural logarithm of 10
base 2 logarithm of E
base 10 logarithm of E

What is the output of the following?

If(null == undefined)
console.log(true);
else
console.log(false);
Output is true. In javascript null & undefined are both false values.
What is difference between == & ===
== // Checks for equality in value
=== //Checks for equality in type
For example:
null === undefined will return false at the same time
null == undefined will return true . Because == checks for value, where both are false value in JS.

Advance Questions
What is JS Hoisting?
In Js, variable declarations are processed before any code is executed. Declaring a variable anywhere in the code is
equivalent to declaring it at the top. This also means that a variable can be used before it's declared. This behavior is
called "hoisting".
What are the 2 types which contain value in javascript?
Following are the 2 types which cannot contain values in it:
null
undefined
What are the different types available in javascript? What are the 3 objects types?
In JavaScript there are 5 different data types that can contain values:
string
number
boolean
object
function
There are 3 types of objects:
Object
Date
Array
What is the output of the following?
1. console.log(typeof null)
2. console.log(typeof undefined)
3. console.log(typeof [1,2,3])
Answers:
1. object
2. undefined
3. object
What is the output of the following?
var x
var y
var z
if (z

= 0.1;
= 0.2;
= x + y
== 0.3)

Answer: false
What is local storage? Can google.com access localstorage of facebook.com. Why ?
With local storage, web applications can store data locally within the user's browser. Local storage is more secure, and
large amounts of data can be stored locally, without affecting website performance.
No. Local storage is per domain. All pages, from one domain, can store and access the same data.

JQuery
Intermediate Questions
Can JQuery replace javascript? Why?
No. jQuery is a JavaScript Library. Which means JQuery is built on top of javascript. jQuery greatly simplifies JavaScript
programming.
Write one line code to add/remove class applied to a html element. i.e if the class is applied remove it & vice versa.
Without using if statement?
$("h1").toggleClass("MyClass");
toggleclass method in JQuery toggle between the class for a selected element. i.e removes the class if applied and
vice versa
Why do you need callback in JQuery?
JavaScript statements are executed line by line. However the next line of code can be run even though the effect is not
finished. This can create errors. To prevent this, you can create a callback function. A callback function is executed after
the current effect is finished.
What is chaining in JQuery?
Chaining allows us to run multiple jQuery commands, one after the other, on the same element(s).
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to
red, then it slides up, and then it slides down:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Is there any difference between body onload() and document.ready() function?
document.ready() function is different from body onload() function for 2 reasons.
1. We can have more than one document.ready() function in a page where we can have only one
bodyonload function.
2. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when
everything gets loaded on the page that includes DOM, images and all associated resources of the page.
What is the difference between .js and .min.js?
jQuery library comes in 2 different versions Production and Deployment. The deployment version is also known as
minified version. So .min.js is basically the minified version of jQuery library file. Both the files are same as far as
functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth.
Advance Questions
How jQuery selectors are executed?
Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements
with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".
$("p #elmID .myCssClass");

What is the difference between jquery.size() and jquery.length?

jQuery .size() method returns number of element in the object. But it is not preferred to use the size()method as jQuery
provide .length property and which does the same thing. But the .length property is preferred because it does not have
the overhead of a function call.
How can add margin, in all elements?
$("*").css("margin", "2px");

Which of the two lines of code below is more efficient? Explain your answer.
document.getElementById( "logo" );
or
$( "#logo" );
The first line of code, which is pure JavaScript without jQuery, is more efficient and faster. Executing the second line of
code, which is jQuery, will trigger a call to the JavaScript version.
jQuery is built on top of JavaScript and uses its methods under the hood to make DOM manipulation easier, at the cost
of some performance overhead. It is a good idea to remember that jQuery is not always better than plain old
JavaScript. Always consider whether using jQuery really provides a useful advantage for your project.

What is the difference between event.stopPropagation and event.stopImmediatePropagation?

event.stopPropagation() allows other handlers on the same element to be executed, while
event.stopImmediatePropagation() prevents every event from running. For example, see below jQuery code block.
You get "jquery is not defined" or "$ is not defined" error. What could be the reason?
There could be many reasons for this.
You have forgot to include the reference of jQuery library and trying to access jQuery.
You have include the reference of the jQuery file, but it is after your jQuery code.
The order of the scripts is not correct. For example, if you are using any jQuery plugin and you have placed the
reference of the plugin js before the jQuery library then you will face this error.
What is .siblings() method in jQuery?

When we want to fetch siblings of every elements in the set of matched elements then we can use siblings()
method.We filter the elements fetched by an optional selector.