Sunday, July 8, 2012

Time Example in Java Script

<html>
<head>
<script language="javascript">
var date = new Date();
var hour = date.getHours();

if(hour <= 10){
document.write("<b>Good Morning</b>");
}else if(hour >= 11 && hour <=14){
document.write("<b>Good Afternoon</b>");
}else if(hour >= 15 && hour <=18){
document.write("<b>Good Evening</b>");
}else if(hour >= 19){
document.write("<b>Good Night</b>");
}
</script>
</head>

<body>
<p>
If time on your pc is less then 10AM then you will see the Good Morning Message.<br>
else if time on you PC is from 11AM to 2PM then you will get the Good Afternoon Message.<br>
else if time on you PC is from 3PM to 6PM then you will see Good Evening Message.<br>
else if time on you PC is after 6PM then you will see Good Night Message.
</p>
</body>
</html>

output :

Good Morning

If time on your pc is less then 10AM then you will see the Good Morning Message.

else if time on you PC is from 11AM to 2PM then you will get the Good Afternoon Message.

else if time on you PC is from 3PM to 6PM then you will see Good Evening Message.

else if time on you PC is after 6PM then you will see Good Night Message

Mouse Events Example In java Script

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the pink square.</p>
        <div style="width: 200px; height: 200px; background-color: pink"
             onmouseover="handleEvent(event)"
             onmouseout="handleEvent(event)"
             onmousedown="handleEvent(event)"
             onmouseup="handleEvent(event)"
             onclick="handleEvent(event)"
             ondblclick="handleEvent(event)" id="div1"></div>
        <P><textarea id="txt1" rows="35" cols="50"></textarea></p>
    </body>
</html>

Output :

Event Handlers in Java Script

Event Handlers Examples

An Event Handler executes a segment of a code based on certain events occurring within the application, such as onLoad, onClick. JavaScript Event Handlers can be divided into two parts:

interactive Event Handlers and
non-interactive Event Handlers

An interactive Event Handler is the one that depends on the user interactivity with the form or the document. For example, onMouseOver is an interactive Event Handler because it depends on the users action with the mouse. On the other hand non-interactive Event Handler would be onLoad, because this Event Handler would automatically execute JavaScript code without the user's interactivity. Here are all the Event Handlers available in JavaScript:

EVENT HANDLER	USED WITH
onAbort	image
onBlur	select, text, text area
onChange	select, text, textarea
onClick	button, checkbox, radio, link, reset, submit, area
onError	image
onFocus	select, text, textarea
onLoad	windows, image
onMouseOut	link, area
onMouseOver	link, area
onSelect	text, textarea
onSubmit	form
onUnload	window

onAbort:

An onAbort Event Handler executes JavaScript code when the user aborts loading an image.
See Example:
<HTML>
<HEAD><TITLE>Example of onAbort Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onAbort Event Handler</H3>
<B>Stop the loading of this image and see what happens:</B><P>
<IMG SRC="object.gif" onAbort="alert('You stopped the loading the image!')">
</BODY>
</HTML>
Here, an alert() method is called using the onAbort Event Handler when the user aborts loading the image.

onBlur:

An onBlur Event Handler executes JavaScript code when input focus leaves the field of a text, textarea, or a select option. For windows, frames and framesets the Event Handler executes JavaScript code when the window loses focus. In windows you need to specify the Event Handler in the <BODY> attribute. For example:

<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">

Note: On a Windows platform, the onBlur event does not work with <FRAMESET>.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onBlur Event Handler</TITLE>
<SCRIPT>
function validate(value) {
if (value < 0) alert("Please input a value that is greater or equal to 0");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onBlur Event Handler</H3>
Try inputting a value less than zero:<BR>
<FORM>
<INPUT TYPE="text" onBlur="validate(this.value)">
</FORM>
</BODY>
</HTML>
In this example, 'data' is a text field. When a user attempts to leave the field, the onBlur Event Handler calls the valid() function to confirm that 'data' has a legal value. Note that the keyword this is used to refer to the current object.

onChange:

The onChange Event Handler executes JavaScript code when input focus exits the field after the user modifies its text.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onChange Event Handler</TITLE>
<SCRIPT>
function valid(input) {
alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<FORM>
<INPUT TYPE="text" VALUE="10" onChange="valid(this.value)">
</FORM>
</BODY>
</HTML>
In this example, 'data' is a text field. When a user attempts to leave the field after a change of the original value, the onChange Event Handler calls the valid() function which alerts the user about value that has been inputted.

onClick:

In an onClick Event Handler, JavaScript function is called when an object in a button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is checked or an image map area is selected. Except for the regular button and the area, the onClick Event Handler can return false to cancel the action. For example:

<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit"
onClick="return confirm(`Are you sure you want to submit the form?')">

Note: On Windows platform, the onClick Event Handler does not work with reset buttons.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onClick Event Handler</TITLE>
<SCRIPT>
function valid(form) {
    var input = form.data.value;
    alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting your name into the text box:<BR>
<FORM>
     <INPUT TYPE="text" NAME="data">
     <INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)">
</FORM>
</BODY>
</HTML>
In this example, when the user clicks the button "Click Here", the onClick Event Handler calls the function valid().

onError:

An onError Event Handler executes JavaScript code when an error occurs while loading a document or an image. With onError event now you can turn off the standard JavaScript error messages and have your own function that will trace all the errors in the script. To disable all the standard JavaScript error messages, all you need to do is set window.onerror = null. To call a function when an error occurs all you need to do is this: onError = "myerrorfunction()".
See Example:
<HTML>
<HEAD>
<TITLE>Example of onError Event Handler</TITLE>
<SCRIPT>
window.onerror = ErrorSetting;
var e_msg = "";
var e_file = "";
var e_line = "";
document.form[8].value = "myButton"; // This is the error
function ErrorSetting(msg, file_loc, line_no) {
     e_msg = msg;
     e_file = file_loc;
     e_line = line_no;
   return true;
}
function display() {
     var   error_d = "Error in file: " + e_file +
                              "\nline number:" + e_line +
                              "\nMessage:" + e_msg;
     alert("Error Window:\n" + error_d);
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onError Event Handler </H3>
<FORM>
     <INPUT TYPE="button" VALUE="Show the error" onClick="display()">
</FORM>
</BODY>
</HTML>
Notice that the function ErrorSetting() takes three arguments: message text, URL and Line number of the error line. So all we did was invoke the function when an error occurred and set these values to three different variables. Finally, we displayed the values via an alert method.
Note: If you set the function ErrorSetting() to false, the standard dialog will be seen.

onFocus:

An onFocus Event Handler executes JavaScript code when input focus enters the field either by tabbing in or by clicking but not selecting input from the field. For windows, frames and framesets the Event Handler executes JavaScript code when the window gets focused. In windows you need to specify the Event Handler in the <BODY> attribute. For example:

<BODY BGCOLOR="#ffffff" onFocus="document.bgcolor='#000000'">

Note: On a Windows platform, the onFocus Event Handler does not work with <FRAMESET>.
See Example:
<HTML>
<HEAD><TITLE>Example of onFocus Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onFocus Event Handler</H3>
Click your mouse in the text box:<BR>
<FORM>
<INPUT TYPE="text" onFocus='alert("You focused in the textbox!!")'>
</FORM>
</BODY>
</HTML>
In the above example, when you put your mouse on the text box, an alert() message displays a message.

onLoad:

An onLoad event occurs when a window or image finishes loading. For windows, this Event Handler is specified in the <BODY> attribute of the window. In an image, the Event Handler will execute handler text when the image is loaded. For example:

<IMG SRC="images/object.gif" NAME="jsobjects"
onLoad="alert('You loaded myimage')">

See Example:
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
alert("Hello there...\n\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
The example shows how the function hello() is called by using the onLoad Event Handler.

onMouseOut:

JavaScript code is called when the mouse leaves a specific link or an object or area from outside that object or area. For area object the Event Handler is specified with the <AREA> tag.
See Example:
<HTML>
<HEAD><TITLE> Example of onMouseOut Event Handler </TITLE></HEAD>
<BODY>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over
<A HREF="javascript:void('');"
onMouseOut="window.status='You left the link!'; return true;">
here
</A>
and then take the mouse pointer away.
</BODY>
</HTML>
In the above example, after pointing your mouse and leaving the link , the text "You left the link!" appears on your window's status bar.

onMouseOver:

JavaScript code is called when the mouse is placed over a specific link or an object or area from outside that object or area. For area object the Event Handler is specified with the <AREA> tag. For example:

<MAP NAME="mymap">
<AREA NAME="FirstArea" COORDS="0,0,49,25" HREF="mylink.html"
onMouseOver="self.status='This will take you to mylink.html'; return true">
</MAP>

See Example:
<HTML>
<HEAD><TITLE>Example of onMouseOver Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onMouseOver Event Handler</H3>
Put your mouse over
<A HREF="javascript:void('');"
onMouseOver="window.status='Hello! How are you?'; return true;">
here
</A>
and look at the status bar
(usually at the bottom of your browser window).
</BODY>
</HTML>
In the above example when you point your mouse to the link, the text "Hello! How are you?" appears on your window's status bar.

onReset:

A onReset Event Handler executes JavaScript code when the user resets a form by clicking on the reset button.
See Example:
<HTML>
<HEAD><TITLE>Example of onReset Event Handler</TITLE></HEAD>
<BODY>
<H3> Example of onReset Event Handler </H3>
Please type something in the text box and press the reset button:<BR>
<FORM onReset="alert('This will reset the form!')">
<INPUT TYPE="text">
<INPUT TYPE="reset" VALUE="Reset Form" >
</FORM>
</BODY>
</HTML>
In the above example, when you push the button, "Reset Form" after typing something, the alert method displays the message, "This will reset the form!"

onSelect:

A onSelect Event Handler executes JavaScript code when the user selects some of the text within a text or textarea field.
See Example:
<HTML>
<HEAD><TITLE>Example of onSelect Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<FORM>
<INPUT TYPE="text" VALUE="Select This"
onSelect="alert('This is an example of onSelect!!')">
</FORM>
</BODY>
</HTML>
In the above example, when you try to select the text or part of the text, the alert method displays the message, "This is an example of onSelect!!".

onSubmit:

An onSubmit Event Handler calls JavaScript code when the form is submitted.
See Example:
<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE></HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<BR>
<FORM NAME="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')">
<INPUT TYPE="text" NAME="data">
<INPUT TYPE="submit" VALUE="Submit this form">
</FORM>
</BODY>
<HTML>
In this example, the onSubmit Event Handler calls an alert() function when the button "Submit this form" is pressed.

onUnload:

An onUnload Event Handler calls JavaScript code when a document is exited.
See Example:
<HTML>
<HEAD><TITLE>onUnLoad Example</TITLE>
<SCRIPT>
function goodbye() {
alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye();">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
In this example, the onUnload Event Handler calls the Goodbye() function as user exits a document.
NOTE: You can also call JavaScript code via explicit Event Handler call. For example say you have a function called myfunction(). You could call this function like this:

document.form.mybotton.onclick = myfunction

Notice that you don't need to put the () after the function and also the Event Handler has to be spelled out in lowercase.

Saturday, July 7, 2012

LoginPage Validation

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Page</title>
<script type="text/javascript">
function validation()
{
    var ml="6";
    var mx="12";
    valid=true;
    if(document.login.name.value=="")
        {
        alert("Please enter yor user id");
        valid=false;
        }
    else if(document.login.pwd.value=="")
            {
            alert("Please enter a valid password");
            valid=false;
            }
    else if(document.login.pwd.value.length<ml)
        {
        alert("Password should be more than 6 charachters");
        valid=false;
        }
    else if(document.login.pwd.value.length>mx)
        {
        alert("Password should be less than 12 charachters");
        valid=false;
        }

    return valid;
}
</script>
</head>
<body bgcolor="pink" >
<center><h1 text="green">MULTIPLEX AUTOMATION SYSTEM</h1></center>
<marquee> Welcome to the world of Entertainment! Unlimited joy!</marquee>
<hr>
<form name="login" action="events_frame.html" method="post" onSubmit=" return validation()">
<center>
<fieldset>
<legend align="right">Login</legend>
<table>
<tr>
<td>User Id:</td>

<td><input type="text" name="name" size="30" id="1"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="pwd" size="30" id="2"></td>
<tr>
</tr>
<td><input type="submit" value="Submit"/></td>
<td><input type="reset" value="Reset"/></td>
</tr>
</table>
<a href="forgotpassword.html">Forgot Userid/Password?</a>
</center>
</fieldset>
</form>
</body>
</html>

Friday, July 6, 2012

Date and Textarea validation using JavaScripy in HTML

<html>
<title>Event Creation in MULTIPLEX AUTOMATION SYSTEM</title>
<head>
<script language = "Javascript">
/**
* DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/datevalidation.asp)
*/
// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
    var i;
    for (i = 0; i < s.length; i++){
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
    var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary (year){
    // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
    for (var i = 1; i <= n; i++) {
        this[i] = 31
        if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
        if (i==2) {this[i] = 29}
   }
   return this
}

function isDate(dtStr){
    var daysInMonth = DaysArray(12)
    var pos1=dtStr.indexOf(dtCh)
    var pos2=dtStr.indexOf(dtCh,pos1+1)
    var strMonth=dtStr.substring(0,pos1)
    var strDay=dtStr.substring(pos1+1,pos2)
    var strYear=dtStr.substring(pos2+1)
    strYr=strYear
    if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
    if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
    for (var i = 1; i <= 3; i++) {
        if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
    }
    month=parseInt(strMonth)
    day=parseInt(strDay)
    year=parseInt(strYr)
    if (pos1==-1 || pos2==-1){
        alert("The date format should be : mm/dd/yyyy")
        return false
    }
    if (strMonth.length<1 || month<1 || month>12){
        alert("Please enter a valid month")
        return false
    }
    if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
        alert("Please enter a valid day")
        return false
    }
    if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
        alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
        return false
    }
    if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
        alert("Please enter a valid date")
        return false
    }
return true
}

function ValidateForm()
{
    var dt=document.f1.date;

    valid=true;

if(document.f1.n1.value=="")

{
        alert("Name cannot be Null!");

valid=false;
}
else if(document.f1.desc.value=="")

{
        alert("Please provide Description for the event!");

valid=false;
}
else if(isDate(dt.value)==false){
        dt.focus();
        valid=false;
    }

    return valid;
}

</script>

</head>
<body bgcolor="Oldlace">
<center><h1>Event Creation in Multiplex Automation System </h1>
<hr>

<form name="f1" action="createsuccess.html" method="post" onSubmit="return ValidateForm()">

<fieldset>
    <legend align="right">Event Creation</legend>

<center>
<table border="0">

<tr>
<td>Event Name:</td>
<td>
<input type="text" name="n1" />
</td>
</tr>
<tr>
<td>Event Time </td>
<td>
<input type="text" name="date" />
</td>
<tr>
<td>Description:</td>

<td>

<textarea name="desc" rows=10 cols=40> </textarea>
</td>
</tr>

<tr><td><input type="submit" value="Create" size=50 /></td>
<td><input type="reset" value="Reset" size=50/></td>
</table>
</fieldset>

</table>
</form>

<marquee><img src="advt1.png"/></marquee>
</body>
</html>

HTML and JAVA SCRIPT Tutorials