List of Javascript functions

Number Methods

The Number object contains only the default methods that are part of every object's definition.

Method	Description
constructor()	Returns the function that created this object's instance. By default this is the Number object.
toExponential()	Forces a number to display in exponential notation, even if the number is in the range in which JavaScript normally uses standard notation.
toFixed()	Formats a number with a specific number of digits to the right of the decimal.
toLocaleString()	Returns a string value version of the current number in a format that may vary according to a browser's locale settings.
toPrecision()	Defines how many total digits (including digits to the left and right of the decimal) to display of a number.
toString()	Returns the string representation of the number's value.
valueOf()	Returns the number's value.

Boolean Methods

Here is a list of each method and its description.

Method	Description
toSource()	Returns a string containing the source of the Boolean object; you can use this string to create an equivalent object.
toString()	Returns a string of either "true" or "false" depending upon the value of the object.
valueOf()	Returns the primitive value of the Boolean object.

String Methods

Here is a list of each method and its description.

Method	Description
charAt()	Returns the character at the specified index.
charCodeAt()	Returns a number indicating the Unicode value of the character at the given index.
concat()	Combines the text of two strings and returns a new string.
indexOf()	Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
lastIndexOf()	Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found.
localeCompare()	Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
length()	Returns the length of the string.
match()	Used to match a regular expression against a string.
replace()	Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
search()	Executes the search for a match between a regular expression and a specified string.
slice()	Extracts a section of a string and returns a new string.
split()	Splits a String object into an array of strings by separating the string into substrings.
substr()	Returns the characters in a string beginning at the specified location through the specified number of characters.
substring()	Returns the characters in a string between two indexes into the string.
toLocaleLowerCase()	The characters within a string are converted to lower case while respecting the current locale.
toLocaleUpperCase()	The characters within a string are converted to upper case while respecting the current locale.
toLowerCase()	Returns the calling string value converted to lower case.
toString()	Returns a string representing the specified object.
toUpperCase()	Returns the calling string value converted to uppercase.
valueOf()	Returns the primitive value of the specified object.

String HTML wrappers

Here is a list of each method which returns a copy of the string wrapped inside the appropriate HTML tag.

Method	Description
anchor()	Creates an HTML anchor that is used as a hypertext target.
big()	Creates a string to be displayed in a big font as if it were in a <big> tag.
blink()	Creates a string to blink as if it were in a <blink> tag.
bold()	Creates a string to be displayed as bold as if it were in a <b> tag.
fixed()	Causes a string to be displayed in fixed-pitch font as if it were in a <tt> tag
fontcolor()	Causes a string to be displayed in the specified color as if it were in a <font color="color"> tag.
fontsize()	Causes a string to be displayed in the specified font size as if it were in a <font size="size"> tag.
italics()	Causes a string to be italic, as if it were in an <i> tag.
link()	Creates an HTML hypertext link that requests another URL.
small()	Causes a string to be displayed in a small font, as if it were in a <small> tag.
strike()	Causes a string to be displayed as struck-out text, as if it were in a <strike> tag.
sub()	Causes a string to be displayed as a subscript, as if it were in a <sub> tag
sup()	Causes a string to be displayed as a superscript, as if it were in a <sup> tag

Array Methods

Here is a list of each method and its description.

Method	Description
concat()	Returns a new array comprised of this array joined with other array(s) and/or value(s).
every()	Returns true if every element in this array satisfies the provided testing function.
filter()	Creates a new array with all of the elements of this array for which the provided filtering function returns true.
forEach()	Calls a function for each element in the array.
indexOf()	Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
join()	Joins all elements of an array into a string.
lastIndexOf()	Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
map()	Creates a new array with the results of calling a provided function on every element in this array.
pop()	Removes the last element from an array and returns that element.
push()	Adds one or more elements to the end of an array and returns the new length of the array.
reduce()	Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
reduceRight()	Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
reverse()	Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
shift()	Removes the first element from an array and returns that element.
slice()	Extracts a section of an array and returns a new array.
some()	Returns true if at least one element in this array satisfies the provided testing function.
toSource()	Represents the source code of an object
sort()	Sorts the elements of an array.
splice()	Adds and/or removes elements from an array.
toString()	Returns a string representing the array and its elements.
unshift()	Adds one or more elements to the front of an array and returns the new length of the array.

Date Methods:

Here is a list of each method and its description.

Method	Description
Date()	Returns today's date and time
getDate()	Returns the day of the month for the specified date according to local time.
getDay()	Returns the day of the week for the specified date according to local time.
getFullYear()	Returns the year of the specified date according to local time.
getHours()	Returns the hour in the specified date according to local time.
getMilliseconds()	Returns the milliseconds in the specified date according to local time.
getMinutes()	Returns the minutes in the specified date according to local time.
getMonth()	Returns the month in the specified date according to local time.
getSeconds()	Returns the seconds in the specified date according to local time.
getTime()	Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC.
getTimezoneOffset()	Returns the time-zone offset in minutes for the current locale.
getUTCDate()	Returns the day (date) of the month in the specified date according to universal time.
getUTCDay()	Returns the day of the week in the specified date according to universal time.
getUTCFullYear()	Returns the year in the specified date according to universal time.
getUTCHours()	Returns the hours in the specified date according to universal time.
getUTCMilliseconds()	Returns the milliseconds in the specified date according to universal time.
getUTCMinutes()	Returns the minutes in the specified date according to universal time.
getUTCMonth()	Returns the month in the specified date according to universal time.
getUTCSeconds()	Returns the seconds in the specified date according to universal time.
getYear()	Deprecated - Returns the year in the specified date according to local time. Use getFullYear instead.
setDate()	Sets the day of the month for a specified date according to local time.
setFullYear()	Sets the full year for a specified date according to local time.
setHours()	Sets the hours for a specified date according to local time.
setMilliseconds()	Sets the milliseconds for a specified date according to local time.
setMinutes()	Sets the minutes for a specified date according to local time.
setMonth()	Sets the month for a specified date according to local time.
setSeconds()	Sets the seconds for a specified date according to local time.
setTime()	Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC.
setUTCDate()	Sets the day of the month for a specified date according to universal time.
setUTCFullYear()	Sets the full year for a specified date according to universal time.
setUTCHours()	Sets the hour for a specified date according to universal time.
setUTCMilliseconds()	Sets the milliseconds for a specified date according to universal time.
setUTCMinutes()	Sets the minutes for a specified date according to universal time.
setUTCMonth()	Sets the month for a specified date according to universal time.
setUTCSeconds()	Sets the seconds for a specified date according to universal time.
setYear()	Deprecated - Sets the year for a specified date according to local time. Use setFullYear instead.
toDateString()	Returns the "date" portion of the Date as a human-readable string.
toGMTString()	Deprecated - Converts a date to a string, using the Internet GMT conventions. Use toUTCString instead.
toLocaleDateString()	Returns the "date" portion of the Date as a string, using the current locale's conventions.
toLocaleFormat()	Converts a date to a string, using a format string.
toLocaleString()	Converts a date to a string, using the current locale's conventions.
toLocaleTimeString()	Returns the "time" portion of the Date as a string, using the current locale's conventions.
toSource()	Returns a string representing the source for an equivalent Date object; you can use this value to create a new object.
toString()	Returns a string representing the specified Date object.
toTimeString()	Returns the "time" portion of the Date as a human-readable string.
toUTCString()	Converts a date to a string, using the universal time convention.
valueOf()	Returns the primitive value of a Date object.

Date Static Methods:

In addition to the many instance methods listed previously, the Date object also defines two static methods. These methods are invoked through the Date( ) constructor itself:

Method	Description
Date.parse( )	Parses a string representation of a date and time and returns the internal millisecond representation of that date.
Date.UTC( )	Returns the millisecond representation of the specified UTC date and time.

Math Methods

Here is a list of each method and its description.

Method	Description
abs()	Returns the absolute value of a number.
acos()	Returns the arccosine (in radians) of a number.
asin()	Returns the arcsine (in radians) of a number.
atan()	Returns the arctangent (in radians) of a number.
atan2()	Returns the arctangent of the quotient of its arguments.
ceil()	Returns the smallest integer greater than or equal to a number.
cos()	Returns the cosine of a number.
exp()	Returns EN, where N is the argument, and E is Euler's constant, the base of the natural logarithm.
floor()	Returns the largest integer less than or equal to a number.
log()	Returns the natural logarithm (base E) of a number.
max()	Returns the largest of zero or more numbers.
min()	Returns the smallest of zero or more numbers.
pow()	Returns base to the exponent power, that is, base exponent.
random()	Returns a pseudo-random number between 0 and 1.
round()	Returns the value of a number rounded to the nearest integer.
sin()	Returns the sine of a number.
sqrt()	Returns the square root of a number.
tan()	Returns the tangent of a number.
toSource()	Returns the string "Math".

RegExp Methods:

Here is a list of each method and its description.

Method	Description
exec()	Executes a search for a match in its string parameter.
test()	Tests for a match in its string parameter.
toSource()	Returns an object literal representing the specified object; you can use this value to create a new object.
toString()	Returns a string representing the specified object.

Canvas drawing

This is the output for previous post

Choose Color

Eraser

Drawing with mouse using HTML5 canvas

HI friends i find a code for drawing with mouse using HTML5 canvas below is the code.


<html>
<script type="text/javascript">
var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "black",
    y = 2;

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

function color(obj) {
    switch (obj.id) {
        case "green":
            x = "green";
            break;
        case "blue":
            x = "blue";
            break;
        case "red":
            x = "red";
            break;
        case "yellow":
            x = "yellow";
            break;
        case "orange":
            x = "orange";
            break;
        case "black":
            x = "black";
            break;
        case "white":
            x = "white";
            break;
    }
    if (x == "white") y = 14;
    else y = 2;

}

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}

function erase() {
    var m = confirm("Want to clear");
    if (m) {
        ctx.clearRect(0, 0, w, h);
        document.getElementById("canvasimg").style.display = "none";
    }
}

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}
</script>
<body onload="init()">
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
    <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
    <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
    <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
    <div style="position:absolute;top:20%;left:43%;">Eraser</div>
    <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
<br>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>

Copy the code to view output it is amazing...

Thanks for visiting..please leave your comments

How to make a Dynamic website without using a backend technology

Basicallly there are two types of websites you can design 

1.Static website

2.Dynamic website


Static website:

Static website contains only static data,it means every time we can see the same data which contain static content with html pages and some images.
there is no interaction with database.(here we can provide dynamic responsive nature with javascript with static data).


Dynamic website:

The website which can interact with database is known as dynamic website.if there is any update in database it will be show in UI.


So if we need to make a dynamic website then we need a serverside technologies like java ,php,.Net which are having interaction with database



Why do we are unable to interact db with javascript?

Because security issues


So how can we develop dynamic websites with frontend technology?


Its simple we can use other websites data who can share their API's or RSS feed,this data will be in the form of JSON or XML.

We can get the data by reading API documents and Calling Urls using 'AJAX'.After getting the response we can parse the response and display data in UI.


the following are some url's for getting data

1.getting news in asia

https://in.news.yahoo.com/rss/asia




2.getting cricket news in india


http://www.espncricinfo.com/rss/content/story/feeds/6.xml


3.Get show times

http://data.tmsapi.com/v1.1/movies/showings?startDate=2015-08-19&zip=78701&api_key=(APIKEY needed)

Is Javascript Multithreaded?

Javascript is single threaded

The JavaScript code that you write will usually execute in a single thread. A thread is like a big todo list. Each statement that you write is added to the list as a task and the browser works its way through this list executing each task one at a time. The problem with a single-threaded architecture is that if a particular task takes a long time to complete everything else is held up until that task finishes. This is known as blocking. In the world of client-side JavaScript applications, using a single-threaded architecture can lead to your app becoming slow or even completely unresponsive.

A web worker is a JavaScript running in the background, without affecting the performance of the page.Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface

Web workers Bring Threading to JavaScript

Web Workers allow you to do things like  long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.


Web Workers run in an isolated thread. As a result, the code that they execute needs to be contained in a separate file. But before we do that, the first thing to do is create a new Worker object in your main page. The constructor takes the name of the worker script

var worker = new Worker('mytask.js');



After creating the worker, start it by calling the postMessage() method:

/*to start the worker*/


To send some data from your main application to a web worker you call the postMessage()

worker.postMessage();



you now need to write some code in your worker script that will listen for, and process, messages coming from the main application. Inside your worker script you would setup an event listener for the message event.

/* File: respond.js */

// Setup an event listener that will handle messages sent to the worker.
self.addEventListener('message', function(e) {
  // Send the message back.
  self.postMessage('You said: ' + e.data);
}, false);




Terminating a Worker

Once you are done with a worker you can terminate it by calling the terminate() function on your worker object. To have a worker terminate itself you need to call the close() function on self.

// Terminate a worker from your application.
worker.terminate();

// Have a worker terminate itself.
self.close();

Limited Access

Due to the fact that your Web Workers run outside of the main application thread they do not have the same access to JavaScript features as your main application does. Your workers do not not have access to:

The DOM

The document object

The window object

The parent object




Example:


<html>
   <head>
     
   
      <script>
         var worker = new Worker('Myworker.js');
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
       
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
     
   </head>
   <body>
     
      <input type="button" onclick="sayHello();" value="Say Hello"/>
     
   </body>
</html>



Place  the below code in  Myworker.js

for (var i = 0; i <= 1000; i += 1){
   var j = i;
}
postMessage(j);



After 1000 iterations  "completed 1000 iterations" alert will come so without distrubing the other UI interactions this webworker can work in background.




so this concept of web workers are used to provide Multi threading to javscript.but tis will be work with modern browsers only

Difference between onkeyDown,onkeyUp and onkeyPress

In JavaScript, pressing a key triggers events which can be captured and handled. Three events are triggered when a key is pressed and released:

Many of us confusing regarding these key events,here we have the clarification

The KeyDown event is triggered when the user presses a Key.

The KeyUp event is triggered when the user releases a Key.

The KeyPress event is triggered when the user presses & releases a Key. (onKeyDown followed by onKeyUp)


The following code will elaborate you exactly  how these threee events are different 


<!doctype html>
<html lang="en">
 <head>

  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
  var i=0;
 function change1(){

    
  document.getElementById('text2').value= "onkeyDown";

 }
 function change2(){

    
  document.getElementById('text2').value= "onkeyUp";

 }
 function change3(){

      i++;
  document.getElementById('text3').value= "keyPressed "+i+" stimes";
 

 }
 </script>
 </head>
 <body bgcolor="white">
  <input type="text" onkeyDown="change1()" onkeyUp="change2()"onkeyPress="change3()" id="text1" >
 </body>
 <input type="text" id='text2'/>
 <input type="text" id='text3'/>
</html>


Output:

How to find Your Android mobile stolen by someone.

There are three steps needed to find your Mobile

1.Search Term Android Device Manager and click on the first link

2.Then login with your gmail which is already logged in your Android mobile.

3.After login you will see the following screen.

In third step google will  ask you to accept to bring your mobile location. after your acceptance yo have three options

1.Ring  --> Ring your mobile.

2.Lock  --> To lock your mobile

3.Erase  --> This is used when you lost hopes on your mobile .

Thanks for visiting ...please leave your comments...

JavaScript Prototypes.

What is a prototype?

-->A prototype is an object from which other objects inherit properties.

-->The prototype property is initially an empty object, and can have members added to it - as you would any other object.



var myObject = function(name){
    this.name = name;
    return this;
};

console.log(typeof myObject.prototype); // object

myObject.prototype.getName = function(){
    return this.name;
};



the above code will simple return an object

Can any object be a prototype?

Yes.

Which objects have prototypes?

Every object has a prototype by default. Since prototypes are themselves objects, every prototype has a prototype too. (There is only one exception, the default object prototype at the top of every prototype chain. More on prototype chains later)



 what is an object ?

An object in JavaScript is any unordered collection of key-value pairs. If it’s not a primitive (undefined, null, boolean, number or string) it’s an object.


Secret property

Every object within JavaScript has a “secret” property added to it when it is defined or instantiated, named __proto__;
this is how the prototype chain is accessed. However, it is not a good idea to access __proto__ within your application,
as it is not available in all browsers.



What is the use of prototype:

If we are planing to design the application which needs a lot of operations in a single page (like canvas games,Mobile supported apps etc..) then we have to create alot of object instances in that case we need to go for prototype based programming..

JavaScript object oriented programming

Prototype-based programming

Prototype-based programming is an OOP model it will not uses Classes but rather it first accomplishes the behavior of any class and then reuse it.

the class-less programming style grows increasingly popular lately, and has been adopted for programming languages such as JavaScript, 


Namespace

A namespace is a container which allows developers to bundle up functionality under a unique, application-specific name. In JavaScript a namespace is just another object containing methods, properties, and objects.


we can create global namespace 


var FirstAPP = FirstAPP || {};


we can create sub namespaces also like as fllowing

Firstapp.handle={};

we can create and add variable and fuctions to the name space also the following syntax will make you easily understand the syntax for adding elements to name space.


FirstAPP.basic= {
  Name: "", // define regex for name validation
  mobile: "", // define regex for phone no validation
email:"",
  validateMobile: function(number){


 },

  validateEmail: function(phoneNo){
  
}
} 


There are plenty Built-in objects for example, there are objects like following

String, Number, Operators, Statements, Math, Date, Array, Boolean, RegExp, Global, Conversion..etc..

Every object in JavaScript is an instance of the object Object and therefore inherits all its properties and methods.


Except these we can create our own Custom objects.


Custom objects


JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called Person.

var info= function{} //so here we have creates a class

Now we can create two instances(objects) for that class 


var info1=new info();

var info2=new info();


The constructor

The constructor is called at the moment when the object instance is created. The constructor is a method of the class. In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

Example


<script>
var i=0;
  var Person = function () {
document.getElementById("p1").innerHTML="instance"+i+"created";
i++;
};
setTimeOut("fun1",1000)
function fun1(){
var person1 = new Person();
setTimeOut("fun2",1000)

}
function fun2(){

var person2 = new Person();

} 
</script>


property (object attribute)


Properties are variables contained in the class; every instance of the object has those properties. Properties are set in the constructor (function) of the class so that they are created on each instance.

In the example below, we define the naame property for the Person class at 

<script>
var i=0;
  var Person = function (name) {
 this.name=name;
 if(i==0){
document.getElementById("p1").innerHTML=this.name;
}else{
document.getElementById("p2").innerHTML=this.name;
document.getElementById("p1").style.color="green";

}
i++;

};

var person1 = new Person("raj");
setTimeout('fun()',2000);
function fun(){
var person2 = new Person("sharuk");
}
  </script>


in the above code the instance person2 will call after 2seconds...


In the next post i will continue this concept....

Thank you for visiting...please leave your comments and doubts

Difference between Canvas and SVG

The HTML <canvas> element is used to draw graphics using scripting langungage like javascript

canvas tag is used like as container we can use the script to draw the graphics.

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).


The following table elaborates the difference between svg and Canvas

Canvas	SVG
Resolution dependent	Resolution independent
Canvas Uses Pure Scripting	SVG Relies on Files
Canvas Manipulates Pixels	SVG Is Vector-based,
Canvas is a bitmap with an “immediate mode” graphics application programming interface (API) for drawing on it	SVG is known as a “retained mode” graphics model persisting in an in-memory model
Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.	SVG builds an object model of elements, attributes, and styles. When the svg element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.
Single HTML element similar to img in behavior	Object Model-based (SVG elements are similar to HTML elements)
Well suited for graphic-intensive games	Not suited for game applications

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <!DOCTYPE html>
<html>
<body>
<p style='color:white'>SVG</p>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

<p style='color:white'>Canvas</p>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>


<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

 </BODY>
</HTML>

OUTPUT:

SVG

Canvas

Your browser does not support the canvas element.

Drawing Indian flag colours with SVG

HI All today i will give introduction to SVG in HTML5

->SVG stands for Scalable Vector Graphics

->SVG is used to define graphics for the Web

The HTML <svg> element (introduced in HTML5) is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

we have circle ,rectangle etc tags in svg


The following code is to show Indian flag colours in different circles

<!DOCTYPE html>
<html>

<body>

    <svg width="150" height="150" >
        <circle id='cir' cx="75" cy="75" r="30" stroke="blue" stroke-width="4" fill="orange" />
    </svg><br>
<span id="content" style="background-color:white;font-size:23px;">
Indicating the strength and courage of the country

</span>
    <script>
        var i = 30;
        var j = 0;
        setInterval("inter()", 3000);

        function inter() {


            switch (j) {
                case 0:

if (i == 40) {
document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth ";
                   
                   
}
if (i == 50) {
document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
                   
                    
                        j = 1;
                    }

                    document.getElementById('cir').style.r = i;
                    i = i + 10;

                    

                    return true;
                case 1:

                                        i = i - 10;
                    if (i == 30) {

document.getElementById('cir').style.fill="orange";
document.getElementById('content').innerHTML="Indicating the strength and courage of the country";
                   
                        j = 0;
                    }
if (i == 40) {

document.getElementById('cir').style.fill="white";
document.getElementById('content').innerHTML="Indicates peace and truth  ";
                   
                        
                    }
if (i == 50) {

document.getElementById('cir').style.fill="green";
document.getElementById('content').innerHTML="Indicates fertility, growth and auspiciousness of the land";
                        
                    }


document.getElementById('cir').style.r = i;

            }

            return true;
        


        }
    </script>
</body>


</html>

ADVANCED HAPPY INDEPENDENCE DAY

OUTPUT











Indicating the strength and courage of the country

Progress bar with bootstrap

The following code is used to show progress of the progress bar for every second 


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap progressbar Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
  <div class="progress-bar" id ="progress" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    0%
  </div>
  </div>
  <script>
  setInterval("repeat()",1000)
  function repeat(){
 
var width=document.getElementById("progress").style.width;
width=width.replace(/[^\w\s]/gi, '');

  document.getElementById("progress").style.width=parseInt(width)+1+"%";
 if(parseInt(document.getElementById("progress").style.width)>99)
 document.getElementById("progress").style.width="0%"

  document.getElementById("progress").innerHTML=  document.getElementById("progress").style.width;

  
  }
  </script>
</div>
</body>
</html>

output

0%

Creating Form with Bootstrap

We can create an attractive form with Bootstrap framework. the following code will elaborate how to create a simple form with Bootstrap

Example:



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="signup" method='post' action=''>
<fieldset>

<legend>Registration Form</legend>

<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter Your name." data-original-title="Full Name">
</div>
</div>


<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>


<div class="control-group">
<label class="control-label">Date of Birth</label>
<div class="controls">
<input type="date" class="input-xlarge" id="dob" name="dob" rel="popover" data-content="your email" data-original-title="dob">
</div>
</div>

<div class="control-group">
<label class="control-label">Gender</label>
<div class="controls">
Male<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">

FeMale<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">
</div>

</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Sign Up</button>
</div>
</div>


</fieldset>
</form>

</body>

</html>

Output

Registration Form

Name

Email

Date of Birth

Gender

Male FeMale

Bootstrap Interview Questions

Who developed the Bootstrap?

Mark Otto and Jacob Thornton at Twitter


What are the key components of Bootstrap?

Plenty of CSS files
Scaffolding
List of layout components
JavaScript Plugins
Customize your components

 Why Use Bootstrap?

Easy to use
Responsive features
Mobile-first approach
Browser compatibility
Fluide & Fixed Layout available


From where we can download the Bootstrap?

http://getbootstrap.com/



Can we include bootstrap CDN instead of download the Bootstrap?

Yes sure, we can do from following
<!-- Latest compiled and minified CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link>
Question: What is class loaders in Bootstrap?
Class loader is a part of Java Runtime Environment which loads Java classes into Java virtual environment.

What are different types of layout available in Bootstrap?

Fluid Layout
Fixed Layout



 What is Fluid Layout in Bootstrap?

Fluid layout adapts itself to different browser. Means design automatic adjust according to browser size.


What is Fixed Layout in Bootstrap?

Fixed layout doesn't adapts itself to different browser but it can be responsive. 



What is responsive layout?

Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.


What is difference between Fluid Layout and responsive Layout?

Fluid layout adapts itself to different browser window sizes, all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized.

Responsive layout is able to adapt itself to different sizes as well. When resizing, the number of columns changes according to the available space.



What function you can use to wrap a page content?

.container 


How to classified pagination in bootstrap?

Add class "pagination" on your page for pagination.

.disabled, .active are available

.pagination-Ig, .pagination-sm to get different sizes



What is Jumbotron?

Jumbotron is used for content that you want to highlight like some slogan OR marketing headline.


What to display code in bootstrap?

you can use following tags
<code></code>



 What is Modal plugin used for in Bootstrap?

Modal Plugin is a child window that is layered over its parent window


What is Bootstrap Container in Bootstrap?

Bootstrap container is a class which is useful and creating a centred area in the page for display.


 What is Bootstrap collapsing elements?

Bootstrap collapsing elements enables you to collapse any element without using external JavaScript.


How to add badge to list group in Bootstrap?

 in LI Tag



What is Media Object?

Media objects in Bootstrap enables to put media object like image, video or audio


How do we create a table using bootstrap ?

Bootstrap contains predefined CSS of all functions to make user easy to design.Here we create a table using bootstrap. 


<table class="table">
   <thread>
          <tr>
               <th>S/no.</th>
                <th>Name</th> 
                <th>Details</th>
                <th>Contact</th>
           </tr> 
   </thread>
        <tbody>
                 <tr>
                     <td>1</td>
                     <td>DotNetFunda</td>
                     <td>Fundamentals of .Net</td>
                     <td>support@dotnetfunda.com</td>
                 </tr>
       </tbody>




How do we create button group in Vertical manner in Bootstrap ?

There is btn-group-vertical to arrange and group them in vertical manner. 
Example of Vertical Button Groups 

<div class="btn-group-vertical">
     <button type="button" class="btn btn-primary">Home</button>
     <button type="button" class="btn btn-primary">Settings</button>
     <button type="button" class="btn btn-info">Contact us</button>
     <button type="button" class="btn btn-danger">Testimonials</button>
 </div> 

How do we create large button groups in bootstrap ?

There are different sizes of btn-group classes. They are btn-group-lg (forlarge button group), btn-group-sm (for small button group) and btn-group-xs (for extra small buttons). 
Here, we will create on for large button group. 
Example : 

<div>
     <div class="btn-group btn-group-lg">
         <button type="button" class="btn btn-primary">Home</button>
         <button type="button" class="btn btn-primary">Settings</button>
         <button type="button" class="btn btn-info">Contact us</button>
         <button type="button" class="btn btn-danger">Testimonials</button>
     </div>
</div>

In the same way we can create small button and extra small button groups by changing "btn-group btn-group-(lg)/(sm)/(xs)"

How do we create Block Buttons in Bootstraps ?

Here we added btn-block class which is responsible to create the block buttons in our web page. 

Example: 

<div>
     <button type="button" class="btn btn-success btn-block">Accept</button>
     <button type="button" class="btn btn-danger btn-block">Decline</button>
 </div> 

Different types of predefined button in Bootstraps ?

We have some predefined types of buttons such as primary, success, warning, danger and info which are of different types in terms of colors. 
Here are shown in the example 


<div>
     <button type="button" class="btn btn-default">Default</button>
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-link">Link Button</button>
 </div> 

These are visible with different colors in the browser.

Write a program to use pop overs in Bootstraps ?


To use pop overs in Bootstrap, We have to write little JavaScript code to create Popovers for HTML elements. 
Example : 
Javascript : 

<script type="text/javascript">
 $(document).ready(function ()
 {  
   $(".popover-pop a").popover() 
});
 </script>

Here is HTML Elements . '
HTML : 

<div> 
    <ul class="popover-pop list-inline">
         <li><a href="#" class="btn btn-primary" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
     </ul>
 </div>

Run the combination code to get pop over link

Write a program to show the Pop overs with Delay ?

In Bootstraps we can also set some delay to the popovers. For that, we have to use delay property of Bootstrap.We need to write the code combination of Javascript and HTML. 

Example 
Javascript : 

<script type="text/javascript">
 $(document).ready(function ()
 {   
  $(".popover-pop a").popover({ 
       delay: { show : 1000 }   
    });
 });
 </script>
HTML element: 

<div>
     <ul class="popover-pop list-inline">
         <li><a href="#" class="btn btn-success" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
     </ul>
 </div> 

Write a program to show a dropdown with Javascript ?

in bootstraps we can also give action to the drop menu using javascript. 

Example : 
Javascript 

<script type="text/javascript">
 $(document).ready(function ()
 {  
   $(".menuDrop").dropdown(); 
     });
 </script> 

HTML element 
Drop down page is : 

<div class="dropdown">
     <a href="#" class="btn btn-primary menuDrop">Menu<b class="caret"></b></a>
     <ul class="dropdown-menu">
         <li><a href="#">Option1</a></li>
         <li><a href="#">Option2</a></li>
         <li class="divider"></li>
         <li><a href="#">Settings</a></li>
     </ul>
 </div>



Thanks for visiting.......