UI Developmet Interview Questions With Answers PDF

How to create a JQuery Plugin?
JQUERY PLUGIN
(function($) {
m
$.fn.helloWorld = function( options ) {
// Establish our default settings
var settings = $.extend({
.co
text : ‘Hello, World!’,
color : null,
fontStyle : null
}, options);
return this.each( function() {
$(this).text( settings.text );

if ( settings.color ) {
m
$(this).css( 'color', settings.color );
ar
}
if ( settings.fontStyle ) {
$(this).css( 'font‐style', settings.fontStyle );
}
er
});
}(jQuery));
re
$('h2').helloWorld({
text : 'Salut, le monde!',
color : '#005dff',
fontStyle : 'italic'
});
Ca
What are the DOCTYPE Declaration?
<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated
elements (like font). Framesets are not allowed. The markup must also be written as wellformed XML.
<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
m
strict.dtd”&gt;
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like
.co
font). Framesets are not allowed. The markup must also be written as wellformed XML.
<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd”&gt;
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
frameset.dtd”&gt;
XHTML 1.1
m
<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for
ar
EastAsian languages).
<!DOCTYPE html PUBLIC “//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;
What is Anchor Pseudoclasses?
er
Links can be displayed in different ways in a CSSsupporting browser:
Example
re
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Ca
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudoclass names are not casesensitive.
What are the Features of HTML5 ?
New features based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 is device independent
m
New Elements
New Attributes
Full CSS3 Support
Video and Audio
.co
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
Some of the most interesting new features in HTML5:
The <canvas> element for 2D drawing
Support for local storage
m
The <video> and <audio> elements for media playback
New contentspecific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search
ar
The <canvas> element is used to draw graphics, on the fly, on a web page.
Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:
What is canvas?
The <canvas> element is used to draw graphics, on the fly, on a web page.
er
Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:
Rectangle
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>
re
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById(“myCanvas”);
Ca
var ctx=c.getContext (“2d”);
// Create gradient
var grd=ctx.createLinearGradient (0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
m
</script>
Give an example of a Circle.
<canvas id=”myCanvas” width=”400″ height=”400″ style=”border:1px solid #d3d3d3;”>
.co
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,150,80,0,2*Math.PI);
ctx.stroke();
</script>
m
ar
What is CSS3 boxshadow Property?
boxshadow: hshadow vshadow blur spread color inset;
er
div
width:300px;
re
height:100px;
backgroundcolor:yellow;
boxshadow: 10px 10px 10px #888888;
Ca
10px 10px black
50px 50px black
50px 50px 5px black
50px 50px 10px black
50px 50px 50px 5px black
m
50px 50px 50px 20px red
.co
50px 50px 50px 20px blue
50px 50px 50px 20px pink
10px 10px 50px 20px pink inset
m
ar
CSS3 Animations
er
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in
many web pages.
Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.
re
Chrome and Safari requires the prefix webkit.
<style>
div
{
Ca
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
webkitanimation:myfirst 5s; /* Safari and Chrome */
@keyframes myfirst
m
{
from {background:red;}
to {background:yellow;}
.co
}
@webkitkeyframes myfirst /* Safari and Chrome */
from {background:red;}
to {background:yellow;}
</style>
m
ar
bind() Definition and Usage
The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when
the event occurs.
er
$(“p”).bind(“click”,function(){
alert(“The paragraph was clicked.”);
});
The live()
re
The live() method attaches one or more event handlers for selected elements, and specifies a function to run when
the events occur.
Event handlers attached using the live() method will work for both current and FUTURE elements matching the
selector (like a new element created by a script).
Ca
Tip: To remove event handlers, use the die() method.
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.
.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.
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
m
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
.co
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique
element.
To find an element with a specific id, write a hash character, followed by the id of the element:
$(“#test”)
The .class Selector
m
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
ar
$(“.test”)
jQuery – Chaining
er
With jQuery, you can chain together actions/methods.
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);
re
this
In JavaScript, as in most objectoriented programming languages, this is a special keyword that is used in

methods to refer to the object on which a method is being invoked.
Ca
What is clone() method?
The clone() method makes a copy of selected elements, including child nodes, text and attributes.
$(“button”).click(function(){
$(“p”).clone().appendTo(“body”);
});
Selects all
$(“*”) elements
Selects the
$(this) current HTML
m
element
Selects all
$(“p.intro”) <p> elements
with
.co
Selects the
$(“p:first”) first <p>
element
Selects the
first <li>
$(“ul li:first”)
element of
the first <ul>
$(“ul li:firstchild”)
m Selects the
first <li>
element of
every <ul>
ar
Selects all
elements wh
$(“[href]”)
an href
attribute
er
Selects all
<a> elements
with a target
$(“a[target=’_blank’]”)
attribute
re
value equal
to “_blank”
Selects all
<a> elements
with a target
Ca
$(“a[target!=’_blank’]”) attribute
value NOT
equal to
“_blank”
Selects all
<button>
elements and
$(“:button”) <input>
elements of
type=”button”
m
Selects all
$(“tr:even”) even <tr>
elements
$(“tr:odd”)What is $(document).ready()?The $(document).ready() method allows us to
.co
execute a function when the document is fully loaded.
What is the bind() method?
The bind() method attaches one or more event handlers for selected elements, and
specifies a function to run when the event occurs.
$(“p”).bind(“click”,function(){
alert(“The paragraph was clicked.”);
});
The noConflict() Method
m
ar
What if you wish to use other frameworks on your pages, while still using jQuery?

er
What if other JavaScript frameworks also use the $ sign as a shortcut?
Some other popular JavaScript frameworks are: MooTools, Backbone, Sammy,
Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember,
Batman, and Ext JS.
re
Some of the other frameworks also use the $ character as a shortcut (just like jQuery),
and then you suddenly have two different frameworks using the same shortcut, which
might result in that your scripts stop working.
The jQuery team have already thought about this, and implemented the noConflict()
Ca
method.
The jQuery noConflict() Method
The noConflict() method releases the hold on the $ shortcut identifier, so that other
scripts can use it.
You can of course still use jQuery, simply by writing the full name instead of the shortcut:
Example
m
$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery is still working!”);
});
.co
});
You can also create your own shortcut very easily. The noConflict() method returns a
reference to jQuery, that you can save in a variable, for later use. Here is an example:
Example
var jq = $.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery is still working!”);
});
});
m
ar
If you have a block of jQuery code which uses the $ shortcut and you do not want to
change it all, you can pass the $ sign in as a parameter to the ready method. This allows
you to access jQuery using $, inside this function – outside of it, you will have to use
“jQuery”:
er
Example
$.noConflict();
jQuery(document).ready(function($){
re
$(“button”).click(function(){
$(“p”).text(“jQuery is still working!”);
});
});
Ca
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be
deleted when the browser is closed, and will be available the next day, week, or year.
Example
localStorage.lastname=”Smith”;
document.getElementById(“result”).innerHTML=”Last name: ”
+ localStorage.lastname;
The following example counts the number of times a user has clicked a button. In this
m
code the value string is converted to a number to be able to increase the counter:
clickcount
.co
Example
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
} m
document.getElementById(“result”).innerHTML=”You have clicked the button ” +
localStorage.clickcount + ” time(s).”;
ar
What is The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the
data for only one session. The data is deleted when the user closes the browser window.
er
The following example counts the number of times a user has clicked a button, in the
current session:
Example
re
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
Ca
else
{
sessionStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” +
sessionStorage.clickcount + ” time(s) in this session.”;
What is Media queries?
Media queries consist of a media type and can, as of the CSS3 specification, contain one
or more expressions, expressed as media features, which resolve to either true or false.
Selects all
The result of the query is true if the media type specified in the media query matches the
odd <tr>
type of device the document is being displayed on and all expressions in the media
elem
query are true.
m
<!‐‐ CSS media query on a link element ‐‐>
<link rel="stylesheet" media="(max‐width: 800px)" href="example.css" />

<!‐‐ CSS media query within a style sheet ‐‐>
.co
<style>
@media (max‐width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
@media (min‐width: 700px) { ... }
m
@media (min‐width: 700px) and (orientation: landscape) { ... }
What is CSS3 Box Shadow?
ar
boxshadow: left top opacity color;
In CSS3, the boxshadow property is used to add shadow to boxes:
<style>
er
0px;
height:100px;
background-codiv
re
width:30lor:yellow;
boxshadow: 10px 10px 5px #888888;
Ca
</style>
Define detach(), remove(), empty().
The detach() method removes the selected elements, including all text and child nodes.
However, it keeps data and events.
This method also keeps a copy of the removed elements, which allows them to be
reinserted at a later time.
Tip: To remove the elements and its data and events, use the remove() method instead.
Tip: To remove only the content from the selected elements, use the empty() method.
m
What is bootstrap?
Bootstrap is an opensource Javascript framework developed by the team at Twitter. It is
a combination of HTML, CSS, and Javascript code designed to help build user interface
.co
components. Bootstrap was also programmed to support both HTML5 and CSS3.
Important! Bootstrap is a CSS and Javascript framework that is used within your HTML.
Bootstrap provides more advanced functionality to your web site. Generally, if you are not
a developer you do not need to worry about bootstrap.
Best explained: http://en.wikipedia.org/wiki/Bootstrap_%28front-
end_framework%29
What is included with Bootstrap?
m
If you were to download bootstrap, you would find that it includes css files, javascript
files, and images. Here’s a sneak peak at the files included:
ar

Css
bootstrap.css
bootstrap.min.css
er
bootstrap-responsive.css
bootstrap-responsive.min.css
img
re
glyphicons-halflings.png
glyphicons-halflings-white.png
js
Ca
bootstrap.js
bootstrap.min.js
What is Media Queries and how to use it?
By using the @media rule, a website can have a different layout for screen, print, mobile
phone, tablet, etc.
Media Types
Some CSS properties are only designed for a certain media. For example the “voice
family” property is designed for aural user agents. Some other properties can be used for
different media types. For example, the “fontsize” property can be used for both screen
m
and print media, but perhaps with different values. A document usually needs a larger
fontsize on a screen than on paper, and sansserif fonts are easier to read on the
screen, while serif fonts are easier to read on paper.
.co
The @media Rule
The @media rule allows different style rules for different media in the same style sheet.
The style in the example below tells the browser to display a 14 pixels Verdana font on
the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the
fontweight is set to bold, both on screen and on paper:
m
A media query consists of a media type and at least one expression that limits the style
sheets’ scope by using media features, such as width, height, and color. Media queries,
added in CSS3, let the presentation of content be tailored to a specific range of output
devices without having to change the content itself.
ar
Syntax
Media queries consist of a media type and can, as of the CSS3 specification, contain one
or more expressions, expressed as media features, which resolve to either true or false.
The result of the query is true if the media type specified in the media query matches the
er
type of device the document is being displayed on and all expressions in the media
query are true.
<!‐‐ CSS media query on a link element ‐‐>
<link rel="stylesheet" media="(max‐width: 800px)" href="example.css" />
re

<!‐‐ CSS media query within a style sheet ‐‐>
<style>
@media (max‐width: 600px) {
.facet_sidebar {
display: none;
Ca
}
}
</style>

UI Developmet Interview Questions With Answers PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UI Developmet Interview Questions With Answers PDF

Uploaded by

Copyright:

Available Formats

How to create a JQuery Plugin?

In JavaScript, as in most objectoriented programming languages, this is a special keyword that is used in

You might also like

UI Developmet Interview Questions With Answers PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UI Developmet Interview Questions With Answers PDF

Uploaded by

Copyright:

Available Formats

How to create a JQuery Plugin?

In JavaScript, as in most object­oriented programming languages, this is a special keyword that is used in

You might also like

In JavaScript, as in most objectoriented programming languages, this is a special keyword that is used in