List of All shortcut keys inWindows

  Windows system key combinations

F1: Help 

CTRL+ESC: Open Start menu

ALT+TAB: Switch between open programs

ALT+F4: Quit program

SHIFT+DELETE: Delete item permanently

Windows Logo+L: Lock the computer (without using CTRL+ALT+DELETE)

Windows program key combinations

CTRL+C: Copy
CTRL+X: Cut

CTRL+Z: Undo
CTRL+V: Paste

CTRL+U: Underline
CTRL+B: Bold

Mouse click/keyboard modifier combinations for shell objects
CTRL+I: Italic


SHIFT+right click: Displays a shortcut menu containing alternative commands
SHIFT+double click: Runs the alternate default command (the second item on the

 menu)


SHIFT+DELETE: Deletes an item immediately without placing it in the Recycle Bin


ALT+double click: Displays properties




General keyboard-only commands

F1: Starts Windows Help

F10: Activates menu bar options

SHIFT+F10 Opens a shortcut menu for the selected item (this is the same as right-clicking an object
CTRL+ESC: Opens the Start menu (use the ARROW keys to select an item)


CTRL+ESC or ESC: Selects the Start button (press TAB to select the taskbar, or   press SHIFT+F10 for a context menu)
CTRL+SHIFT+ESC: Opens Windows Task Manager

ALT+DOWN ARROW: Opens a drop-down list box


ALT+TAB: Switch to another running program (hold down the ALT key and then press the TAB key to view the task-switching window) 

SHIFT: Press and hold down the SHIFT key while you insert a CD-ROM to bypass the automatic-run feature

ALT+SPACE: Displays the main window's System menu (from the System menu, you can restore, move, resize, minimize,maximize, or close the window)

ALT+- (ALT+hyphen): Displays the Multiple Document Interface (MDI) child window's System menu (from the MDI child 
window's System menu, you can restore, move, resize, minimize, maximize, or close the child window)



CTRL+TAB: Switch to the next child window of a Multiple Document Interface (MDI) program

ALT+underlined letter in menu: Opens the menu

ALT+F4: Closes the current window

CTRL+F4: Closes the current Multiple Document Interface (MDI) window

ALT+F6: Switch between multiple windows in the same program (for example, when 

the Notepad Find dialog box is 

displayed, ALT+F6 switches between the Find dialog box and the main Notepad 

window)


Shell objects and general folder/Windows Explorer shortcuts

For a selected object:




F2: Rename object


F3: Find all files

CTRL+C: Copy
CTRL+X: Cut


CTRL+V: Paste


SHIFT+DELETE: Delete selection immediately, without moving the item to the 

Recycle Bin

ALT+ENTER: Open the properties for the selected object
To copy a file


Press and hold down the CTRL key while you drag the file to another folder.
To create a shortcut


General folder/shortcut control
Press and hold down CTRL+SHIFT while you drag a file to the desktop or a folder.


F4: Selects the Go To A Different Folder box and moves down the entries in the

 box (if the toolbar is active in Windows Explorer)
F5: Refreshes the current window.

F6: Moves among panes in Windows Explorer

CTRL+G: Opens the Go To Folder tool (in Windows 95 Windows Explorer only)

CTRL+Z: Undo the last command


Numeric Keypad *: Expands everything under the current selection
CTRL+A: Select all the items in the current window

BACKSPACE: Switch to the parent folder
SHIFT+click+Close button: For folders, close the current folder plus all parent 

folders

Windows Explorer tree control



LEFT ARROW: Collapses the current selection if it is expanded, otherwise goes to the parent
Numeric Keypad +: Expands the current selection

Numeric Keypad -: Collapses the current selection.

RIGHT ARROW: Expands the current selection if it is not expanded, otherwise 

goes to the first child

Properties control



Press down and hold the NUM LOCK key for five seconds: Toggles ToggleKeys on and off
CTRL+TAB/CTRL+SHIFT+TAB: Move through the property tabs
Accessibility shortcuts

Press SHIFT five times: Toggles StickyKeys on and off

Press down and hold the right SHIFT key for eight seconds: Toggles FilterKeys 

on and off



SHIFT+Windows Logo+M: Undo minimize all
Left ALT+left SHIFT+NUM LOCK: Toggles MouseKeys on and off

Left ALT+left SHIFT+PRINT SCREEN: Toggles high contrast on and off

Microsoft Natural Keyboard keys

Windows Logo: Start menu

Windows Logo+R: Run dialog box

Windows Logo+M: Minimize all


Windows Logo+F1: Help


CTRL+Windows Logo+TAB: Moves focus from Start, to the Quick Launch toolbar, to 

the system tray (use RIGHT ARROW or LEFT 
Windows Logo+E: Windows Explorer

Windows Logo+F: Find files or folders

Windows Logo+D: Minimizes all open windows and displays the desktop

CTRL+Windows Logo+F: Find computer


ARROW to move focus to items on the Quick Launch toolbar and the system tray)

Windows Logo+TAB: Cycle through taskbar buttons

Windows Logo+V: Starts Clipboard
Windows Logo+Break: System Properties dialog box

Application key: Displays a shortcut menu for the selected item

Microsoft Natural Keyboard with IntelliType software installed

Windows Logo+L: Log off Windows

Windows Logo+P: Starts Print Manager

Windows Logo+C: Opens Control Panel



Dialog box keyboard commands
Windows Logo+K: Opens Keyboard Properties dialog box


Windows Logo+I: Opens Mouse Properties dialog box

Windows Logo+A: Starts Accessibility Options (if installed)

Windows Logo+SPACEBAR: Displays the list of Microsoft IntelliType shortcut keys

Windows Logo+S: Toggles CAPS LOCK on and off



ENTER: Equivalent to clicking the selected button (the button with the outline)
TAB: Move to the next control in the dialog box

SHIFT+TAB: Move to the previous control in the dialog box
SPACEBAR: If the current control is a button, this clicks the button. If the 

current control is a check box, this 
toggles the check box. If the current control is an option, this selects the 

option.



ALT+underlined letter in dialog box item: Move to the corresponding item


ESC: Equivalent to clicking the Cancel button

List of all methods properties and events for HTML5 Video/Audio tag

HTML Audio/Video Methods

Method	Description
addTextTrack()	Adds a new text track to the audio/video
canPlayType()	Checks if the browser can play the specified audio/video type
load()	Re-loads the audio/video element
play()	Starts playing the audio/video
pause()	Pauses the currently playing audio/video

HTML Audio/Video Properties

Property	Description
audioTracks	Returns an AudioTrackList object representing available audio tracks
autoplay	Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered	Returns a TimeRanges object representing the buffered parts of the audio/video
controller	Returns the MediaController object representing the current media controller of the audio/video
controls	Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin	Sets or returns the CORS settings of the audio/video
currentSrc	Returns the URL of the current audio/video
currentTime	Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted	Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate	Sets or returns the default speed of the audio/video playback
duration	Returns the length of the current audio/video (in seconds)
ended	Returns whether the playback of the audio/video has ended or not
error	Returns a MediaError object representing the error state of the audio/video
loop	Sets or returns whether the audio/video should start over again when finished
mediaGroup	Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
muted	Sets or returns whether the audio/video is muted or not
networkState	Returns the current network state of the audio/video
paused	Returns whether the audio/video is paused or not
playbackRate	Sets or returns the speed of the audio/video playback
played	Returns a TimeRanges object representing the played parts of the audio/video
preload	Sets or returns whether the audio/video should be loaded when the page loads
readyState	Returns the current ready state of the audio/video
seekable	Returns a TimeRanges object representing the seekable parts of the audio/video
seeking	Returns whether the user is currently seeking in the audio/video
src	Sets or returns the current source of the audio/video element
startDate	Returns a Date object representing the current time offset
textTracks	Returns a TextTrackList object representing the available text tracks
videoTracks	Returns a VideoTrackList object representing the available video tracks
volume	Sets or returns the volume of the audio/video

HTML Audio/Video Events

Event	Description
abort	Fires when the loading of an audio/video is aborted
canplay	Fires when the browser can start playing the audio/video
canplaythrough	Fires when the browser can play through the audio/video without stopping for buffering
durationchange	Fires when the duration of the audio/video is changed
emptied	Fires when the current playlist is empty
ended	Fires when the current playlist is ended
error	Fires when an error occurred during the loading of an audio/video
loadeddata	Fires when the browser has loaded the current frame of the audio/video
loadedmetadata	Fires when the browser has loaded meta data for the audio/video
loadstart	Fires when the browser starts looking for the audio/video
pause	Fires when the audio/video has been paused
play	Fires when the audio/video has been started or is no longer paused
playing	Fires when the audio/video is playing after having been paused or stopped for buffering
progress	Fires when the browser is downloading the audio/video
ratechange	Fires when the playing speed of the audio/video is changed
seeked	Fires when the user is finished moving/skipping to a new position in the audio/video
seeking	Fires when the user starts moving/skipping to a new position in the audio/video
stalled	Fires when the browser is trying to get media data, but data is not available
suspend	Fires when the browser is intentionally not getting media data
timeupdate	Fires when the current playback position has changed
volumechange	Fires when the volume has been changed
waiting	Fires when the video stops because it needs to buffer the next frame

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