Unit Iv

III BSC VI SEM Web Technologies
UNIT-IV
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" 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>
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;
Page 1
III }BSC
} VI SEM Web Technologies
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascri ptpages/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. 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…
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open("https://aknu.edu.in");
}
</script>
</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.
i. 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.
Example:
<html>
<head>
<title>Confirm box</title>
<script>
window.confirm("Are you Really want to delete this file");
</script>
</head>
<body>
</body>
</html>
ii. 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.
Example:
<html>
<head>
<title>Prompt box</title>
Page 2
<script>
window.prompt("Enter your name");
</script>
</head>
<body>
</body>
</html>
iii. 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.
Example:
<html>
<head>
<title>alert box</title>
<script>
window.alert("Are you Really want to delete this file");
</script>
</head>
<body>
</body>
</html>
4. 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:
Example:
<html>
<body>
<h3> This property does not work in default configuration of IE, Firefox, Chrome, Safari or Opera 15+.</h3>
<script>
window.status = "Some text in the status bar!!";
</script>
</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>
<frameset rows="10%,80%,10%">
<frame></frame>
<frameset cols="20%,80%">
<frame src="frame1.html"></frame>
<frame src="frame2.html"></frame>
</frameset>
<frame></frame>
</frameset>
</html>
frame1.html
<html>
<body>
<h2>My First Web Page</h2>
<p id="demo"></p>
Page 3
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
frame2.html
<html>
<body>
<h2>My Second Web page</h2>
<script>
document.write(5+6);
</script>
</body>
</html>
6. Rollover Buttons
A rollover button is a dynamic Web button that changes appearance depending on the location of the user's mouse pointer. It contains
three states: normal, over and down.
Rollover is a JavaScript technique used by Web developers to produce an effect in which the appearance of a graphical image changes
when the user rolls the mouse pointer over it. Rollover also refers to a button on a Web page that allows interactivity between the user
and the Web page.
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.
Advantages of JavaScript Image Rollovers
 Browser 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.
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).
Example:
<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";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Page 4
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
<html>
<script type="text/javascript">
function moveleft()
{
document.getElementById('image').style.position="absolute";
document.getElementById('image').style.left="0";
}
</script>
<body>
<img id="image" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" width="190px"
onclick="moveleft()">
</body>
</html>
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>
<title>Multiple Pages</title>
<script type="text/javascript">
function one()
{
con1.style.visibility="visible";
}
function two()
{
}
function three()
{
con2.style.visibility="hidden";
}
</script>
</head>
<body>
<p>
<a href="#" onclick=one()>one</a>
<a href="#" onclick=two()>two</a>
<a href="#" onclick=three()>three</a>
</p>
<div id="con1" style="visibility:visible">
<h2>We are in layer one</h2></div>
<div id="con2" style="visibility:hidden">
<h2>We are in layer two</h2></div>
<div id="con3" style="visibility:hidden">
<h2>We are in layer three</h2></div>
</body>
</html>
Page 5
III
9. BSC
TextVI SEM
Only Websystem
Menu Technologies
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>
<script>
function Highlight(id)
{
if(id==0)
{
document.getElementById("menu0").style.visibility="visible";
document.getElementById("menu1").style.visibility="hidden";
}
elseif(id==1)
{
}
else
{
}
}
</script>
</head>
<body>
<div id="menua" style="top:5; left:5; visibility:visible; position:absolute; z-index:5;">
<a href="#" onMouseOver="Highlight(0)"> Search</a>
<a href="#" onMouseOver="Highlight(1)"> Social</a>
<a href="#" onMouseOver="Highlight(2)"> Three</a>
</div>
<div id="menu0" style="top:40; left:5; visibility:hidden; position:absolute; z-index:5;">
<a href="https://www.google.com">Google</a><br>
<a href="https://www.yahoo.com">Yahoo</a><br>
<a href="https://www.bing.com">Bing</a><br>
</div>
<a href="https://www.twitter.com">Twitter</a><br>
<a href="https://www.facebook.com">facebook</a><br>
<a href="https://www.whatsapp.com">Whatsapp</a><br>
</div>
<a href="#"></a>page 1<br>
</div>
</body>
</html>
UNIT – IV
Important Questions
Page 6
IIIShort
BSC Questions
VI SEM Web Technologies
1. Explain about status bar.
2. Data validation.
3. Write about text-only menu system.
4. Rollover buttons in javascript.
5. write about message & confirmation in javascript
Essay Questions
1. Frames
2. Moving images
Page 7

Unit Iv

Uploaded by

Document Information

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

Unit Iv

Uploaded by

Copyright:

Available Formats

III BSC VI SEM Web Technologies

8. Multiple Pages in Single Download

You might also like