Guide for Developers: JavaScript

Showing posts with label JavaScript. Show all posts

Sunday, 8 December 2013

Drawing Charts with JavaScript

Friday, 13 September 2013

Login Check using HTML and JavaScript

<html>
<head>
<title></title>
<script type="text/javascript">

function validate()
{
var username=document.getElementById('txtname').value;
var password=document.getElementById('txtpass').value;
if(username=="abc" && password=="abc")
{
window.location="http://www.google.com";
}
else
{
alert("Login Failed");
document.getElementById("txtpass").value="";
document.getElementById("txtpass").focus();
}
}
</script>


</head>
<body>

    <div>
        <table>
            <tr>

                <td>
                UserName
                </td>
                <td>
                <input type="text" name="txtname" size="20" id="txtname"/>
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <input type="text" name="txtpass" size="20" id="txtpass" />
                </td>
            </tr>
             <tr>
                <td>
                     
                </td>
                <td>
                <input type="button" value="Submit" onclick="validate()" id="btnsubmit" />

                </td>
            </tr>
        </table>
    </div>

</body>
</html>

Thursday, 22 August 2013

JavaScript code examples

JavaScript code examples - Table of contents

Operators
- . (property access)
- [ ] (array index)
- ( ) (function call)
- new (object creation)
- ++ (unary increment)
- -- (unary decrement)
- - (negation)
- ~ (bitwise complement operation)
- ! (logical complement operation)
- delete (property deletion)
- typeof (data type return)
- void (undefined value return)
- * (multiplication)
- / (division)
- % (division remainder return)
- + (addition)
- - (subtraction)
- + (string concatenation)
- << (left shift)
- >> (right shift with sign preservation)
- >>> (right shift with zero fill)
- < ("less than" comparison)
- < ("comes before" lexicographical comparison)
- <= ("less than or equal to" comparison)
- <= ("comes before or is equal to" lexicographical comparison)
- > ("greater than" comparison)
- > ("comes after" lexicographical comparison)
- >= ("greater than or equal to" comparison)
- >= ("comes after or is equal to" lexicographical comparison)
- instanceof (object type check)
- in (property existence check)
- == (equality test)
- != (inequality test)
- === (identity test)
- !== (non-identity test)
- & (bitwise conjunction
- ^ (bitwise exclusive disjunction)
- | (bitwise disjunction)
- && (logical conjunction)
- || (logical disjunction)
- ? : (conditional assignment)
- = (assignment)
- *= (assignment with multiplication)
- /= (assignment with division)
- %= (assignment with division and return of remainder)
- += (assignment with addition)
- -= (assignment with substraction)
- += (assignment with string concatenation)
- <<= (assignment with left shift)
- >>= (assignment with right shift with sign preservation)
- >>>= (assignment with right shift with zero fill)
- &= (assignment with bitwise conjunction)
- ^= (assignment with bitwise exclusive disjunction)
- |= (assignment with bitwise disjunction)
- , (multiple evaluation)
Methods and properties
- decodeURI(string)
- decodeURIComponent(string)
- encodeURI(string)
- encodeURIComponent(string)
- escape(string) (deprecated)
- eval(string)
- Infinity
- isFinite(number)
- isNaN(value)
- NaN
- parseFloat(string)
- parseInt(string)
- parseInt(string, int)
- undefined
- unescape(string) (deprecated)
- Array
  - ()
  - (size)
  - (value, ...)
  - concat(value, ...)
  - join()
  - join(separator)
  - length
  - pop()
  - push(value, ...)
  - reverse()
  - shift()
  - slice(start)
  - slice(start, end)
  - sort()
  - sort(function)
  - toLocaleString()
  - toString()
  - unshift(value, ...)
- EvalError
  - EvalError()
  - EvalError(string)
  - message
  - name
- Function
  - (arg1, arg2, ..., argN, body)
  - length
  - prototype
  - toString()
- Number
  - NaN
  - NEGATIVE_INFINITY
  - POSITIVE_INFINITY
- Object
  - ()
  - constructor
- String
  - charAt(position)
  - charCodeAt(position)
  - concat(text)
  - fromCharCode(code1, code2, ...,codeN)
  - indexOf(text)
  - indexOf(text, start)
  - lastIndexOf(text)
  - lastIndexOf(text, start)
  - length
  - match(regexp)
  - slice(from)
  - slice(from, to)
  - split(delimiter)
  - split(delimiter, limit)
  - substring(from)
  - substring(from, to)
- SyntaxError
  - SyntaxError()
  - SyntaxError(string)
  - message
  - name
- window
  - alert(message)
  - blur()
  - clearInterval(intervalId)
  - close()
  - closed
  - confirm(message)
  - defaultStatus
  - document
  - frames[]
  - history
  - location
  - Math
  - name
  - navigator
  - opener
  - parent
  - prompt(message)
  - screen
  - self
  - setTimeout(code, delay)
  - status
  - top
  - window
- window.document
  - anchors[]
  - getElementById(id)
  - getElementsByTagName(name)
  - lastModified
  - title
  - URL
  - write(value, ...)
  - writeln(value, ...)
- window.Math
  - abs(number)
  - acos(number)
  - asin(number)
  - atan(number)
  - ceil(number)
  - cos(angle)
  - E
  - exp(number)
  - floor(number)
  - LN10
  - LN2
  - LOG10E
  - LOG2E
  - PI
  - pow(number1, number2)
  - random()
  - round(number)
  - sin(angle)
  - sqrt(number)
  - SQRT1_2
  - SQRT2
  - tan(angle)
Miscellaneous useful examples
- Simulating a static variable

Saturday, 13 July 2013

Disable Back Button in Browser using JavaScript

Sometimes we have requirement in developing a website to disable the Back button effect from Browser. This is common in Online Banking Websites and other sites where security is of principal concern. User may hit back and navigate from the page and forget to logout.

Hence sometime it is required that we disable the functionality of Back button. But unfortunately this is not an easy task. There is no direct way of dealing with this problem. We can do few hacks to ensure that user does not get back in the browser.

Following are few tricks that can be used to disable the back button in browser. Please note that we do not literally “disable” the back button, but just nullify its effect is some case and hide it altogether in others.

Open A New Window without Back Button

This one is very crude technique. But in some case it works like charm. All you have to do is to open the webpage in a new window. This window doesn’t have back button at all because we have hide the toolbar.
This technique does work in some case but user has still a workaround to navigate to previous page. Most of the browser have options of Back in context menu. Thus user can still right click on the page and click Back to go to previous page. We will shortly see the workaround for this issue also.

Following is the code to open webpage in a new window have no toolbar (Back/Next buttons).

window.open ("http://viralpatel.net/blogs/",
"mywindow","status=1,toolbar=0");

Also it is possible to disable the right click on any webpage using Javascript. Add following code in the webpage.

 <body oncontextmenu="return false;">

Disable Back functionality using history.forward

This is another technique to disable the back functionality in any webpage. We can disable the back navigation by adding following code in the webpage. Now the catch here is that you have to add this code in all the pages where you want to avoid user to get back from previous page. For example user follows the navigation page1 -> page2. And you want to stop user from page2 to go back to page1. In this case all following code in page1.

<SCRIPT type="text/javascript">
	window.history.forward();
	function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();" 
	onpageshow="if (event.persisted) noBack();" onunload="">

The above code will trigger history.forward event for page1. Thus if user presses Back button on page2, he will be sent to page1. But the history.forward code on page1 pushes the user back to page2. Thus user will not be able to go back from page1.

Warn User if Back is Pressed

You may want to warn user if Back button is pressed. This works in most of the cases. If you have some unsaved form data, you might want to trigger a warning message to user if Back button is pressed.

Following Javascript snippet will add a warning message in case Back button is pressed:

window.onbeforeunload = function() { return "You work will be lost."; };

Include this in your HTML page to popup a warning message.

Wednesday, 12 June 2013

Confirm Box on Window Close Event