Category: JQUERY

Javascript Framework

UI(User Interface) developmet Interview Questions with Answers which are mostly asked.


How to create a JQuery Plugin?

JQUERY PLUGIN

(function($) {

$.fn.helloWorld = function( options ) {

// Establish our default settings

var settings = $.extend({

text         : ‘Hello, World!’,

color        : null,

fontStyle    : null

}, options);

        return this.each( function() {
        $(this).text( settings.text );
 
    if ( settings.color ) {
        $(this).css( 'color', settings.color );
    } 

    if ( settings.fontStyle ) {
        $(this).css( 'font-style', settings.fontStyle );
    }
});

}

}(jQuery));

$('h2').helloWorld({
    text        : 'Salut, le monde!',
    color       : '#005dff',
    fontStyle   : 'italic'
});

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 well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed 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.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&gt;

What is Anchor Pseudo-classes?

Links can be displayed in different ways in a CSS-supporting browser:

Example

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 */

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: Pseudo-class names are not case-sensitive.

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
  • New Elements
  • New Attributes
  • Full CSS3 Support
  • Video and Audio
  • 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
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search
  • 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.

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;”>

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById(“myCanvas”);

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);

</script>

Give an example of a Circle.

<canvas id=”myCanvas” width=”400″ height=”400″ style=”border:1px solid #d3d3d3;”>

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>

What is CSS3 box-shadow Property?

box-shadow: h-shadow v-shadow blur spread color inset;

div

{

width:300px;

height:100px;

background-color:yellow;

box-shadow: 10px 10px 10px #888888;

}

10px 10px black

50px 50px black

50px 50px 5px black

50px 50px 10px black

50px 50px 20px black

50px 50px 50px black

50px 50px 50px 5px black

50px 50px 50px 10px black

50px 50px 50px 20px black

50px 50px 50px 20px red

50px 50px 50px 20px blue

50px 50px 50px 20px pink

40px 40px 50px 20px pink

20px 20px 50px 20px pink

10px 10px 50px 20px pink inset

10px 10px 30px 20px pink inset

10px 10px 5px 20px pink inset

10px 10px 5px 10px pink inset

10px 10px 5px 5px pink inset

CSS3 Animations

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.

Chrome and Safari requires the prefix -webkit-.

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

</style>

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.

$(“p”).bind(“click”,function(){
alert(“The paragraph was clicked.”);
});

The live()

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).

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:

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

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

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:

$(“.test”)

jQuery – Chaining

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);

this

In JavaScript, as in most object-oriented programming languages, this is a special keyword that is used in methods to refer to the object on which a method is being invoked.

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
$(this) Selects the current HTML element
$(“p.intro”) Selects all <p> elements with
$(“p:first”) Selects the first <p> element
$(“ul li:first”) Selects the first <li> element of the first <ul>
$(“ul li:first-child”) Selects the first <li> element of every <ul>
$(“[href]”) Selects all elements wh an href attribute
$(“a[target=’_blank’]”) Selects all <a> elements with a target attribute value equal to “_blank”
$(“a[target!=’_blank’]”) Selects all <a> elements with a target attribute value NOT equal to “_blank”
$(“:button”) Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”) Selects all even <tr> elements
$(“tr:odd”)What is $(document).ready()?The $(document).ready() method allows us to 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

What if you wish to use other frameworks on your pages, while still using jQuery?

 

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.

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() 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

$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery is still working!”);
});
});

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!”);
});
});

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”:

Example

$.noConflict();
jQuery(document).ready(function($){
$(“button”).click(function(){
$(“p”).text(“jQuery is still working!”);
});
});

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 code the value string is converted to a number to be able to increase the counter:

clickcount

Example

if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + localStorage.clickcount + ” time(s).”;

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.

The following example counts the number of times a user has clicked a button, in the current session:

Example

if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
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.  The result of the query is true if the media type specified in the media query matches the 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" />
 
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }

What is CSS3 Box Shadow?

box-shadow: left  top  opacity  color;

In CSS3, the box-shadow property is used to add shadow to boxes:

<style>

0px;

height:100px;

background-codiv

{

width:30lor:yellow;

box-shadow: 10px 10px 5px #888888;

}

</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.

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 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?

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:

 

Css

bootstrap.css

bootstrap.min.css

bootstrap-responsive.css

bootstrap-responsive.min.css

img  

glyphicons-halflings.png

glyphicons-halflings-white.png

js

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 “font-size” property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

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 font-weight is set to bold, both on screen and on paper:

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.

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 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" />
 
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

 

 Selects all odd <tr> elements