Internet Technologies6

Internet Technologies..
6
Data validation
• Javascript can be used for client-side validation of data entered

in HTML forms.
➢Data entered can be extracted and accessed.
➢Checks can be made on the data entered.
▪Non-alphabetic characters in name.
▪Non-numeric characters in roll number, age, etc.
▪Bid amount less than minimum permissible.

Data validation
• A data validation example:
⦿ ➢A student registration form.
⦿ ➢A function checks whether the roll number is a 7-digit numeric
value.
▪Invoked when the form is submitted.
▪Check performed before form data are transmitted to
server-side CGI script.
Data validation
<SCRIPT LANGUAGE="JavaScript">
function validRoll (theField)
{
var nsize = theField.length;
var nval = theField.value;
var valid = true;
for (var i=0; i<7; i++)
{
var nxtchar = nval.substring (i,i+1);
if (nxtchar < "0" || nxtchar > "9")
valid = false;
}
if (valid == false)
alert ("Invalid roll number: " + nval);
}
</SCRIPT>
<H3> Student Registration Form </H3>
<FORM METHOD="POST" ACTION="/cgi/feedback">

<P> Name: <INPUT NAME="name" TYPE="TEXT" SIZE="30"
MAXLENGTH="50">
<P> Roll Number: <INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
<P> Courses:
<INPUT NAME="courseno1" TYPE="TEXT" SIZE="6">
<P> <INPUT TYPE="BUTTON" VALUE="Submit"
onClick="validRoll(this.form.rollno)">
<INPUT TYPE="RESET">
</FORM>
Student Registration Form
Roll Number
After entering the name and 6 digit number/alphabet and press the submit button
Invalid Roll Number

123456
After entering the name and 7 digit number and press the submit button
Simple Animation
•This example illustrates simple animation by displaying a number
of images in sequence.
➢Four line images “1.gif”, “2.gif”, “3.gif”, and “4.gif” are
considered.
➢Speed of changeover (rotation) can be controlled by the user.

➢Uses the setTimeout() method of the window object.
▪Schedules a piece of Javascript code to run at some specified time
in the future.
▪Time specified in milliseconds.
▪Commonly used to perform animation or other kinds of repetitive
operations.
Example 11 :: simple animation
delay = 200;
number = 1;
image_seq = new Array(); for (i=1;i<5;i++)
{
image_seq[i] = new Image();
image_seq[i].src = i + ".gif";
}
number = 1;
function animate()
{
document.line_rotate.src = image_seq[number].src;
number ++;
if (number > 4) number = 1;
}
function slow()
{
delay = delay + 25;
if (delay > 2000) delay = 2000;
}
function fast()
{
delay = delay - 25;
if (delay < 0) delay = 0;
}
</SCRIPT>
<BODY>
<IMG NAME="line_rotate" SRC="1.gif" onLoad="setTimeout
('animate()', delay)" >
<FORM>
<INPUT TYPE="button" VALUE="Slow"
onClick="slow()" >
<INPUT TYPE="button" VALUE="Fast"
onClick="fast()" >
</FORM>
</BODY>
Slow Fast
Scrolling Text Message
•This example generates a scrolling message that appears on

the bottom of the page.
•Uses window.scroll() method.
Example 12 :: text scrolling
message = "THIS IS A WELCOME MESSAGE !!!";
swidth = 100; delay = 100;
function scroll (start)

{
var statmsg = " ";
if (start > swidth)
{
start --;
window.setTimeout ("scroll("start")", delay);
}
else if (start <= swidth && start > 0)
{
for (var i=0; i<start; i++) statmsg += " ";
statmsg += message;
start --;
window.status = statmsg;
window.setTimeout ("scroll("start")", delay); }
else if (start <= 0)
{
if (-start < message.length)
{
statmsg += message.substring (-start, message.length); start --;
window.status = statmsg;
window.setTimeout ("scroll("start")", delay);
}
else
{
window.status = " ";
window.setTimeout ("scroll(swidth)", delay);
}
}
}
</SCRIPT>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"
onLoad="window.setTimeout
('scroll(swidth)', delay);" >
<H2> Look at the status bar at the bottom of the page. You
will see a scrolling message </H2>
</BODY>
Look at the status bar at the bottom of the page. You will see
a scrolling message
History Back / Forward
•Use the history object.

➢Call the back() and forward() methods to scroll through the
recently visited pages.
Example 13 :: Move back/forward
<BODY>
<H1> Move backward and forward in history </H1>
<FORM>
<INPUT TYPE="button" VALUE="BACK"
onClick="history.back()">
<INPUT TYPE="button" VALUE="FORWARD"
onClick="history.forward()">
</FORM>
</BODY>
Browser Detection
•This feature allows one to find out what type of browser is being
used.
•There are two objects used for this:
➢navigator.appName : returns the name of the browser.
➢navigator.appVersion : returns the version of the browser.
Example 14 :: browser detection
<SCRIPT language="JavaScript">
var browserName = navigator.appName; var
browserVersion = navigator.appVersion;
if (browserName=="Netscape")
alert ("Hi Netscape User!" + browserVersion); else
if (browserName=="Microsoft Internet Explorer") alert
("Hi, Explorer User!" + browserVersion);
else
alert ("Unrecognized browser!");
</SCRIPT>
HI, Explorer User 4.0 Compatible MSI 5.01
windows NT 5.0

Internet Technologies6

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internet Technologies6

Uploaded by

Copyright:

Available Formats

Internet Technologies..

• Javascript can be used for client-side validation of data entered

▪Non-numeric characters in roll number, age, etc.

▪Bid amount less than minimum permissible.

<FORM METHOD="POST" ACTION="/cgi/feedback">

Invalid Roll Number

➢Speed of changeover (rotation) can be controlled by the user.

•This example generates a scrolling message that appears on

function scroll (start)

•Use the history object.

You might also like