Scribd
Upload
213 views13 pages

Data Validation: Dodda - Venkata Reddy

Uploaded by

manoj prabhakar darsi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
213 views13 pages

Data Validation: Dodda - Venkata Reddy

Uploaded by

manoj prabhakar darsi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

UNIT-V

DHTML with JavaScript


Data validation, opening a new window, messages and confirmations, the status bar, different frames, rollover
buttons, moving images, multiple pages in single download, text only menu system.
-----------------------------------------------------------------------------------------------------------------------------------------------------------

1. Data validation

Validation is a simple process ensuring some data might be correct for a particular application. Broadly speaking
data validation is a process of ensuring that users submit only the set of characters which you require. It is the
process of ensuring that the data is in any way accurate.

Example1:

One common request is for a way validating email address. We can validate the email by the help of JavaScript.
There are many criteria that need to be following to validate the email id such as:
 Email id must contain the @ and . character
 There must be at least one character before and after the @.
 There must be at least two characters after . (dot).

Let's see the simple example to validate the email field.


<html>
<body>
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

1 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


Example2: Form validation

In this example, we are going to validate the name and password. The name can’t be empty and password can’t
be less than 6 characters long.

Here, we are validating the form on form submit. The user will not be forwarded to the next page until given
values are correct.

<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

2 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


2. Opening a new window

A new window can be open which contains a URL identified resources and the attributes of that window can be
tailored to suit the application.

To open a new window we usually resort to certain predefined JavaScript functions. Following is the syntax in
this regard.

Window.open (‘URL’, ‘window name’,’attaribute1’,’attribute2’, ……….);

URL: Here we supply the web address of the page that we wish to be displayed in our window.
Window Name: Here a name can be given to the window.
Attributes: These are various attributes defined for a given window. Such as width, height, scrollbars, status,
menu bar ext…
<!DOCTYPE html>
<html>
<head>
<title>window open and close method</title>
<script>
var Window;
// Function that open the new Window
function windowOpen()
{
Window = window.open("https://www.geeksforgeeks.org/", "_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose()
{
Window.close();
}
</script> </head>
<body>
<button onclick="windowOpen()">Open GeeksforGeeks</button>
<button onclick="windowClose()">Close GeeksforGeeks</button>

3 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


</body> </html>

3. Messages and confirmations


JavaScript provides three built-in types that can be used from application code. These are useful when you need
information from visitors to your site.
1. confirm(message)
The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button.
A confirm box is often used if you want the user to verify or accept something.

2. prompt(text, defaultText)
The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you
want the user to input a value before entering a page.

3. alert(message)
The alert() method displays an alert box with a specified message and an OK button. An alert box is often used if
you want to make sure information comes through to the user.

4 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


Example:
<html>
<head>
<script language=”JavaScript”>
<!---------
prompt(“ Enter your name”,” “);
confirm(“ are you sure”);
alert(“ A warning”);
//------>
</script>
</head>
</html>

4. The status Bar


The browsers status bar as part of the site. Text strings can be displayed in the status bar but should be used with
car. The status bar usually displays helpful information about the operation of the browser.
To write to the status do:

<html>
<head>
<script language="javascript">
<!--
function Init(){
self.status = "Some Message";
}
//-->

5 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


</script>
</head>
<body onLoad="Init()">
<h1>And the Status Bar Says...</h1>
</body>
</html>

5. Writing to a different frame

One single window can be occupied by multiple frames and also the way elements of one frame can be used to
manipulate elements of other frames etc. is show in following example.

1. The frameset
The whole page is built around a simple frameset. When the page is initially loaded, It displays the form in the
lower window and empty window and an empty HTML page in the upper Window.

Frame.html
<html>
<head>
<title> program to introduce frames</title>
<form>
<frameset rows=”50%, 50%”>
<frame src=”frame1.html name=”fd1”>
<frame src=”frame2.html name=”fd2”>
</frameset>
</form>
<body>
</body>
</html>
frame1.html
<html>
<head>
<title> Frame One</title>

6 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


<script language=”text/JavaScript”>
function display()
{
document.writeln(“ Data written on different frame”);
}
</script>
</head>
<body></body></html>

frame2.html
<html>
<head>
<title>frame 2</title>
</head>
<body>
<h1> this is frame2 </h1>
</body>
<form>
<input type=”button” value=”display” onClick=parent.fd1.display()”>
</form>
</body>
</html>

6. Rollover Buttons
What is an Image Rollover?
 An image rollover occurs when a graphic is moused over (no clicking is involved) and that graphic is
replaced by another graphic.
 This is typically done for navigation buttons.
 If just the navigation button changes, it is referred to as a single rollover. If the button changes and
another graphic elsewhere on the page also changes, it is referred to as a multiple rollover.
 JavaScript is commonly used to create these rollover effects, using the onmouseover event handler to
trigger the rollover graphic and the onmouseout event handler to return the graphic to its original state.

7 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


Advantages of JavaScript Image Rollovers
 Broad support - Brower support is not an issue. This functionality has been available in browsers for many
years.
 Acceptable degradation - Images function normally (just without the rollover effect) if JavaScript support
is absent or disabled. The user experience is not harmed / negatively impacted.
 Rollovers indicate to the user what button is being selected - A more general advantage, for all
implementations (not just JavaScript). The visual change signifies to the user that a given button is 'active'.
If buttons are closely grouped and the user has muscle tremors this visual notification can prevent them
from accidentally clicking the wrong button.
 Accessibility options exist - The onfocus and onblur event handlers provide support for keyboard input;
supplementing this with tab index can also prove beneficial

Disadvantages of JavaScript Image Rollovers


 Code bloat and clutter - Most implementations of image rollovers involve a significant amount of
JavaScript code, which slows downloads/rendering and increases bandwidth usage. Site
maintenance/updates also take more time. Our goal will be to streamline image rollover code as much as
possible.
 Slow loading for dial-up users - Even with preloading of images, a dial-up user can click a navigation
button before its rollover image has loaded into memory or a dial-up user can watch as the rollover
slowly occurs for an image (it is not a pretty sight).

<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley"
width="32" height="32">
<p>Roll Over Buttons </p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}

8 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>

7. Moving Images
The moving images is the actually is a layer of content. Images (Layers) can move around reputedly but doing so
takes up processor cycles. If our images only move for a restricted amount of time such as when the page is first
loaded or when the user specifically triggers the event. Each layer can be positioned on the screen by changing
the offset of the top left corner of the layer.
Example
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p>

9 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>

function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>

10 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


8. Multiple Pages in Single Download
DHTML opens up some interesting possibilities. Instead of using a separate file for each page, it uses a separate
layer and switches between those layers. This technique will not work of the layer have too much content or too
many images.

Example:
<html>
<head>
<script language=”JavaScript”>
function one()
{
con1.style.visibility=”hidden”;
}
function two()
{
con2.style.visibility=”visible”;
}

function three()
{
con2.style.visibility=”hidden”;
con3.style.visibility=”visible”;
}
</script>
</head>
<body>
<p>
<a href=”#” onClick=one()>one</a>
<a href=”#” onClick=two()>one</a>
<a href=”#” onClick=three()>one</a>
</p>
<div id=:con1” style=”visibility:visible”>

11 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


<h1> we are in layer One </h1>
</div>
<div id=:con2” style=”visibility:hidden; top:40;left=0;position:absolute”>
<h1> we are in layer Two </h1>
</div>
<div id=:con3” style=”visibility:hidden; top:40;left=0;position:absolute”>
<h1> we are in layer Two </h1>
</div>
</body>
</html>

9. Text Only Menu system


The most common use of JavaScript is the site menu. There are many ways of providing navigation but
allowing menu to hyperlinks is one of the most popular.
The menu system will contain a simple three categories. The basic principle is that when a mouse is over to a
menu item it highlighted and it shows its sub categories. Here is an example of text only menu system which
consists of 3 file.

Example:
<html>
<head>
<link rel=”style sheet” href=”./style.css”>
<script language=”JavaScript” src=”./menu.js”>
</script>
</head>
<body>

<div id=”menu” style=”top:”; left:5; visibility:visible;position:absolute;z-index:5;”>


<p class=”SWITCH”>
<a href=”#” onmouseover=”Highlight(0)” onmouseout=”UnHighlight(0)”>one</a>
<a href=”#” onmouseover=”Highlight(1)” onmouseout=”UnHighlight(1)”>one</a>
<a href=”#” onmouseover=”Highlight(2)” onmouseout=”UnHighlight(2)”>one</a>
</div>

12 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM


<div id=”menuob” style=”top:”; left:5; visibility:hidden;position:absolute;z-index:5;”>
<p class=”SWITCH”>
<span class=”OVER”><a href=”#”>one</a></span>
<a href=”#”>two</a>
<a href=”#”>three</a>
</div>

<div id=”menu1b” style=”top:”; left:5; visibility:hidden;position:absolute;z-index:5;”>


<p class=”SWITCH”>
<span class=”OVER”><a href=”#”>one</a></span>
<a href=”#”>two</a>
<a href=”#”>three</a>
</div>

<div id=”menu2b” style=”top:”; left:5; visibility:hidden;position:absolute;z-index:5;”>


<p class=”SWITCH”>
<span class=”OVER”><a href=”#”>one</a></span>
<a href=”#”>two</a>
<a href=”#”>three</a>
</div>
</body>
</html>

13 © www.anuupdates.org – Prepared by DODDA.VENKATA REDDY B.TECH, M.TECH, PGDTTM

You might also like