Scribd
Upload
129 views42 pages

Web Programming: 1. Demonstrate The Collections All With An Example?

The document discusses various JavaScript events and methods for manipulating the DOM. It provides examples of using the onload, onclick, onmouseover, onmouseout and onmousemove events. It also demonstrates accessing properties of the navigator and window objects, and handling errors using the onerror event. The examples change images, display alerts and update text on mouse events or when elements are clicked.

Uploaded by

rafimj13
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
129 views42 pages

Web Programming: 1. Demonstrate The Collections All With An Example?

The document discusses various JavaScript events and methods for manipulating the DOM. It provides examples of using the onload, onclick, onmouseover, onmouseout and onmousemove events. It also demonstrates accessing properties of the navigator and window objects, and handling errors using the onerror event. The examples change images, display alerts and update text on mouse events or when elements are clicked.

Uploaded by

rafimj13
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 42

WEB PROGRAMMING

1. Demonstrate the Collections all with an example?

<html>
<head>
<title>object model (using all collections)</title>

<script type="text/javascript">

var elements="";
function start()
{
for(var i=0;i<document.all.length;++i)
elements+="<br>"+document.all[i].tagName;
pText.innerHTML+=elements;
alert(elements);
}
</script>
</head>
<body onload="start()">
<h2>welcome to MJCET</h2>
<p id="pText">Branch name on this page :</p>
<!-- CSE,ECE,MCA,MBA,EEE-->
<!-- Address :Banjara Hills ,Road no :3-->
</body>
</html>

Output:

ROLL NO:006-09-013 PAGE NO:1


WEB PROGRAMMING
//navigating the object hierarchy using collection children.

<HTML>
<HEAD><TITLE>Object Model(Using collection children)</TITLE>
<SCRIPT TYPE="text/javascript">
var elements= "<UL>";
function start(object)
{
var i=0;
elements+="<LI>"+object.tagName+"<UL>";
for(i=0;i<object.children.length;i++)
{
if(object.children[i].children.length)
start(object.children[i]);
else

elements+="<LI>"+object.children[i].tagName+"</LI>";
}
elements+="</UL>"+"</LI>";
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="start(document.all[0]);
myp.outerHTML+=elements;
myp.outerHTML+='</UL>';">
<!--this program will display all elements in page-->
<!--List will be an unordered list-->
<H2>Welcome to our <STRONG>WEB PAGE</STRONG></H2>
<P id="myp">Elements on this Web Page:</P>
</BODY>
</HTML>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:2


WEB PROGRAMMING
2.Write a JavaScript program to demonstrate the children frames?

FILENAME:2a.html
<html>
<head>
<title>Demonstrate the children frames</title>
<script type="text/javascript">
</script>
</head>
<frameset rows="100,*,*">
<frame src="2b.html" name="upper">
<frame src="" name="middle">
<frameset cols="50%,*">
<frame src="" name="lowerL">
<frame src="" name="lowerR">
</frameset>
</frameset>
</html>
FILENAME:2b.html

<html>
<head>
<title>frames collections</title>
<script type="text/javascript">
function start()
{
var text=prompt("what is your name?","");
parent.frames("lowerL").document.write("<h1>hello,"+text+"</h1>");
parent.frames("lowerR").document.write("<h1>welcome to MJCET"+"</h1>");
parent.frames("middle").document.write("<h1>your name is "+text+"</h1>");
}
</script>
</head>
<body onload="start()">
<h1>cross-frame scripting</h1>
<h1>user details with images</h1>
</body>
</html>

ROLL NO:006-09-013 PAGE NO:3


WEB PROGRAMMING
OUTPUT:

ROLL NO:006-09-013 PAGE NO:4


WEB PROGRAMMING
3.Demonstrate the Navigator Object with an example?

//main
<HTML>
<HEAD><TITLE>Navigator Object</TITLE>
<SCRIPT TYPE="text/javascript">
function start()
{
if(navigator.appName=="Microsoft Internet Explorer")
{
if(navigator.appVersion.substring(1,0)>="4")
document.location="Q3newIEversion.html";
else
document.location="Q3oldIEversion.html";
}
else
document.location="Q3NSversion.html";
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="start()">
<P>Displays the information about the web browser</P>
</BODY>
</HTML>

//NSversion
<HTML>
<HEAD>
<TITLE>Netscape Version</TITLE>
</HEAD>
<BODY>
<H1><BR><BR><BR><BR>
<CENTER>
You are currently using netscape navigator<BR>
newer Version!
</CENTER>
</H1>
</BODY>
</HTML>

//newIEversion
<HTML>
<HEAD>
<TITLE>Internet Explorer Version</TITLE>
</HEAD>
<BODY>
<H1><BR><BR><BR><BR>
<CENTER>
You are currently using Internet Explorer<BR>
newer Version!
</CENTER>
</H1>

ROLL NO:006-09-013 PAGE NO:5


WEB PROGRAMMING
</BODY>
</HTML>

//oldIEversion
<HTML>
<HEAD>
<TITLE>Internet Explorer Version</TITLE>
</HEAD>
<BODY>
<H1><BR><BR><BR><BR>
<CENTER>
You are currently using Internet Explorer<BR>
older Version!
</CENTER>
</H1>
</BODY>
</HTML

OUTPUT:

ROLL NO:006-09-013 PAGE NO:6


WEB PROGRAMMING
4.Demonstrate the ONCLICK and ONLOAD Events with an example?

<HTML>
<HEAD><TITLE>Demonstrating ONCLICK & ONLOAD</TITLE>
<SCRIPT TYPE="text/javascript" >
alert("Hii......!");
var sec=0;
function start()
{

window.setInterval("updateTime()",1000);
}
function updateTime()
{
sec++;
soFar.innerText=sec;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="start()">
<P><H1>Seconds u have spent viewing this page so far :
<STRONG id="soFar">0</STRONG></H1></P>
<P><H1>Click on below button to demonstrate onclick event.</H1></P>
<INPUT TYPE="button" VALUE="Click Me!" ONCLICK="alert('Hi Again!')">
</BODY>
</HTML>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:7


WEB PROGRAMMING

ROLL NO:006-09-013 PAGE NO:8


WEB PROGRAMMING
5.Demonstrate the DHTML Error handling with OnError event?
<HTML>
<HEAD><TITLE>Event Model-ONERROR</TITLE>
<SCRIPT TYPE="text/javascript">
window.onerror=handleError;
function doThis()
{
document.write("Error Statement displayed on Status Bar ");
aleet("hi");
}
function handleError(errType,errURL,errLineNum)
{
window.status="Error:"+errType+" on line "+errLineNum;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT ID="mybutton" TYPE="button" VALUE="click me!"

ONCLICK="doThis()">
</BODY>
</HTML>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:9


WEB PROGRAMMING

6.Dmonstrate the OnMouseMove event?


<HTML>
<HEAD><TITLE>Event Model-ONMOUSEMOVE</TITLE>
<SCRIPT TYPE="text/javascript">
function update()
{
coordinates.innerText=event.srcElement.tagName+"
("+event.offsetX+", +event.offsetY+")";
}
</SCRIPT>
</HEAD>
<BODY ONMOUSEMOVE= "update()">
<SPAN ID="coordinates">(0, 0)</SPAN><BR>
<IMG SRC="maze3.jpg" STYLE="position:absolute;top:100;left:100"
HEIGHT="300" WIDTH="300">
</BODY>
</HTML>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:10


WEB PROGRAMMING
7.Demonstrate the OnMouseOver and OnmouseOut?

<HTML>
<HEAD>
<TITLE>Event Model-ONMOUSEOVER,ONMOUSEOUT</TITLE>
<SCRIPT LANGUAGE="javascript">

image1=new Image();
image1.src=" al.jpg";

image2=new Image();
image2.src="Cute.jpg";

function mover()
{
if(event.srcElement.id=="image")
{
event.srcElement.src="image2.src";
return;
}
}
function mout()
{
if(event.srcElement.id=="image")
{
event.srcElement.src="image1.src";
return;
}
}
document.onmouseover=mover;
document.onmouseout=mout;
</SCRIPT>
</HEAD>
<BODY STYLE="background-color:wheat">
<H3>Observe this web page ,whenever the mouse is on the image it is
displaying one image & when the mouse cursor is moving out of the image another image is
displayed.
<P>This is the effect of Event Models OMMOUSEOVER & ONMOUSEOUT.<BR>
</H3>
<IMG SRC="al.jpg" id="image" HEIGHT="300" WIDTH="300">

</BODY>
</HTML>

ROLL NO:006-09-013 PAGE NO:11


WEB PROGRAMMING
OUTPUT:

8.Demonstrate the Onfocus and onBlur event?

<HTML>
<HEAD><TITLE>Event Model - ONFOCUS & ONBLUR</TITLE>
<SCRIPT TYPE="text/javascript">
var helpArray=["Enter your name in this input box.","
This box text is explaining about what to enter in the boxes provided","Enter
some text",""];
function helpText(num)
{
myForm.helpBox.value=helpArray[num];
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="myForm">
Name:<INPUT TYPE="text" NAME="name" ONFOCUS="helpText(0)"
ONBLUR="helpText(3)"><BR>
Text:<TEXTAREA NAME="comments" ROWS="5" COLS="20"
ONFOCUS="helpText(2)" ONBLUR="helpText(3)">
</TEXTAREA>

<TEXTAREA NAME="helpBox" ROWS="5" COLS="45"


STYLE="position:absolute;top:0;right:0" ONBLUR="helpText(1)"

ROLL NO:006-09-013 PAGE NO:12


WEB PROGRAMMING
ONFOCUS="helpText(1)" >
</TEXTAREA>
</FORM>
</BODY>
</HTML>

OUTPUT:

9.Demonstrate the flip filter and wave filter?

//flipfilters

<html>
<head>
<title>The flip filter</title>

<style type = "text/css">


body { background-color: #CCFFCC }

table { font-size: 3em;


font-family: Arial, sans-serif;
background-color: #FFCCCC;
border-style: ridge ;
border-collapse: collapse }

td { border-style: groove; padding: 1ex }


</style>
</head>
<body>

<table>

<tr>
<!-- Filters are applied in style declarations -->

ROLL NO:006-09-013 PAGE NO:13


WEB PROGRAMMING
<td style = "filter: fliph">WELCOME</td>
<td>WELCOMET</td>
</tr>

<tr>
<!-- More than one filter can be applied at once -->
<td style = "filter: flipv fliph">WELCOME</td>
<td style = "filter: flipv">WELCOME</td>
</tr>

</table>

</body>
</html>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:14


//wave filter WEB PROGRAMMING
<html >
<head>
<title>Wave Filter</title>
<script type = "text/javascript">
<!--
var wavePhase = 0;
function start()
{
window.setInterval( "wave()", 5 );
}
function wave()
{
wavePhase++;
flag.filters( "wave" ).phase = wavePhase;
}
// -->
</script>
</head>
<body onload = "start();">
<span id = "flag"
style = "align: center; position: absolute;
left: 30; padding: 15;
filter: wave(add = 0, freq = 1, phase = 0, strength = 10);
font-size: 2em">
Here is some waaaavy text
</span>
</body>
</html>

OUTPUT:

10.Demonstrate the chroma filter?


ROLL NO:006-09-013 PAGE NO:15
WEB PROGRAMMING
<html>
<head>
<title>Chroma Filter</title>

<script type = "text/javascript">


<!--
function changecolor( theColor )
{
if ( theColor ) {
// if the user selected a color, parse the
// value to hex and set the filter color.
chromaImg.filters( "chroma" ).color = theColor;
chromaImg.filters( "chroma" ).enabled = true;
}
else // if the user selected "None",
// disable the filter.
chromaImg.filters( "chroma" ).enabled = false;
}
// -->
</script>
</head>
<body>
<h1>Chroma Filter:</h1>
<img id = "chromaImg" src = "trans.gif" style = "position: absolute; filter: chroma" alt =
"Transparent Image" />

<form action = "">


<!-- The onchange event fires when -->
<!-- a selection is changed -->
<select onchange = "changecolor( this.value )">
<option value = "">None</option>
<option value = "#00FFFF">Cyan</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#FF00FF">Magenta</option>
<option value = "#000000" selected = "selected">
Black</option>
</select>
</form>

</body>
</html>

OUTPUT:
ROLL NO:006-09-013 PAGE NO:16
WEB PROGRAMMING

11.Demonstrate the Shadow filter ?


<html>
<head>
<title>Shadow Filter</title>

<script type = "text/javascript">


<!--
var shadowDirection = 0;

function start()
{
window.setInterval( "runDemo()", 500 );
}

function runDemo()
{
shadowText.innerText =
"Shadow Direction: " + shadowDirection % 360;
shadowText.filters( "shadow" ).direction = ( shadowDirection % 360 );
shadowDirection += 45;
}
// -->
</script>
</head>

<body onload = "start()">

<h1 id = "shadowText" style = "position: absolute; top: 25; left: 25; padding: 10;
filter: shadow( direction = 0, color = red )">WELCOME .... shadow Direction:
0</h1>
</body>
</html>

ROLL NO:006-09-013 PAGE NO:17


OUTPUT: WEB PROGRAMMING

12Demonstrate the image filters: invert, gray and xray?

<html>
<head>
<title>Implementation of Miscellaneous image filter</title>
<style type="text/css">
cap{font-weight:bold;background-color:green;text-align:center}
</style>
</head>
<body>
<table border=2>
<tr class="cap">
<td>Normal</td>
<td>Grayscale</td>
<td>Xray</td>
<td>Invert</td>
</tr>
<tr>
<td><img src="very-cute-baby-on-mobile.jpg "></td>
<td><img src="very-cute-baby-on-mobile.jpg "style="filter:gray"></td>
<td><img src="very-cute-baby-on-mobile.jpg"style="filter:xray"></td>
<td><img src="very-cute-baby-on-mobile.jpg "style="filter:invert"></td>
</tr>
</table>
</body>
</html>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:18


WEB PROGRAMMING

13.Demonstrate the Blur filter?


ROLL NO:006-09-013 PAGE NO:19
<html> WEB PROGRAMMING
<head>
<title>Blur Filter</title>
<script type = "text/javascript">
<!--
var strengthIndex = 1;
var blurDirection = 0;
var upDown = 0;
var timer;

function reBlur()
{
blurImage.filters( "blur" ).direction =
document.forms( "myForm" ).Direction.value;
blurImage.filters( "blur" ).strength =
document.forms( "myForm" ).Strength.value;
blurImage.filters( "blur" ).add =
document.forms( "myForm" ).AddBox.checked;
}

function startDemo()
{
timer = window.setInterval( "runDemo()", 5 );
}

function runDemo( )
{
document.forms( "myForm" ).Strength.value =
strengthIndex;
document.forms( "myForm" ).Direction.value =
( blurDirection % 360 );

if ( strengthIndex == 35 || strengthIndex == 0 )
upDown = !upDown;

blurImage.filters( "blur" ).strength =


( upDown ? strengthIndex++ : strengthIndex-- );

if ( strengthIndex == 0 )
blurImage.filters( "blur" ).direction =
( ( blurDirection += 45 ) % 360 );
}
// -->
</script>
</head>

<body>
<form name = "myForm" action = "">

<table border = "1" style = "background-color: #CCFFCC">


<caption>Blur filter controls</caption>

<tr>
ROLL NO:006-09-013 PAGE NO:20
<td>Direction:</td> WEB PROGRAMMING
<td><select name = "Direction">
<option value = "0">above</option>
<option value = "45">above-right</option>
<option value = "90">right</option>
<option value = "135">below-right</option>
<option value = "180">below</option>
<option value = "225">below-left</option>
<option value = "270">left</option>
<option value = "315">above-left</option>
</select></td>
</tr>

<tr>
<td>Strength:</td>
<td><input name = "Strength" size = "3" type = "text"
maxlength = "3" value = "0" /></td>
</tr>

<tr>
<td>Add original?</td>
<td><input type = "checkbox" name = "AddBox" /></td>
</tr>

<tr>
<td align = "center" colspan = "2">
<input type = "button" value = "Apply"
onclick = "reBlur();" /></td>
</tr>

<tr>
<td colspan = "2">
<input type = "button" value = "Start demo"
onclick = "startDemo();" />
<input type = "button" value = "Stop demo"
onclick = "window.clearInterval( timer );" /></td>
</tr>

</table>
</form>

<div id = "blurImage" style = "position: absolute;


top: 0; left: 300; padding: 0; filter: blur(
add = 0, direction = 0, strength = 0 );
background-color: white;">
<img align = "middle" src = "shapes.gif"
alt = "Shapes" />
</div>

</body>
</html>

ROLL NO:006-09-013 PAGE NO:21


OUTPUT: WEB PROGRAMMING

14.Demonstrate the BlendTrans?


<html>
<head>
<title>Using blendTrans</title>
<script type = "text/javascript">
<!--
function blendOut()
{
textInput.filters( "blendTrans" ).apply();
textInput.style.visibility = "hidden";
textInput.filters( "blendTrans" ).play();
}
// -->
</script>
</head>
<body> <div id = "textInput" onclick = "blendOut()" style = "width: 300;
filter: blendTrans( duration = 2 )">
<h1>Some fading text</h1>
</div>

ROLL NO:006-09-013 PAGE NO:22


</body> WEB PROGRAMMING
</html>

OUTPUT:

Text Disappeared after 2min of duration..

15.Demonstrate the revealTrans?

<html>
<head>
<title>rEVEAL Transitions</title>

<script type = "text/javascript">


<!--
var transitionName =
["Box In", "Box Out",
"Circle In", "Circle Out",
"Wipe Up", "Wipe Down", "Wipe Right", "Wipe Left",
"Vertical Blinds", "Horizontal Blinds",
"Checkerboard Across", "Checkerboard Down",
"Random Dissolve",
"Split Vertical In", "Split Vertical Out",
"Split Horizontal In", "Split Horizontal Out",
"Strips Left Down", "Strips Left Up",
"Strips Right Down", "Strips Right Up",

ROLL NO:006-09-013 PAGE NO:23


WEB PROGRAMMING
"Random Bars Horizontal", "Random Bars Vertical",
"Random"];

var counter = 0;
var whichImage = true;

function blend()
{
if ( whichImage ) {
image1.filters( "revealTrans" ).apply();
image1.style.visibility = "hidden";
image1.filters( "revealTrans" ).play();
}
else {
image2.filters( "revealTrans" ).apply();
image2.style.visibility = "hidden";
image2.filters( "revealTrans" ).play();
}
}

function reBlend( fromImage )


{
counter++;

if ( fromImage ) {
image1.style.zIndex -= 2;
image1.style.visibility = "visible";
image2.filters("revealTrans").transition =
counter % 24;
}
else {
image1.style.zIndex += 2;
image2.style.visibility = "visible";
image1.filters("revealTrans").transition =
counter % 24;
}

whichImage = !whichImage;
blend();
transitionDisplay.innerHTML = "Transition " +
counter % 24 + ": " + transitionName[ counter % 24 ];
}
// -->
</script>
</head>

<body style = "color: white; background-color: lightcoral"


onload = "blend()">

<img id = "image2" src = "icontext.gif"


style = "position: absolute; left: 10; top: 10;

ROLL NO:006-09-013 PAGE NO:24


WEB PROGRAMMING
width: 300; z-index:1; visibility: visible;
filter: revealTrans( duration = 2, transition = 0 )"
onfilterchange = "reBlend( false )" alt =
"Programming Tips" />

<img id = "image1" src = "icons2.gif"


style = "position: absolute; left: 10; top: 10;
width: 300; z-index:1; visibility: visible;
filter: revealTrans( duration = 2, transition = 0 )"
onfilterchange = "reBlend( true )" alt = "Icons" />

<div id = "transitionDisplay" style = "position: absolute;


top: 70; left: 80">Transition 0: Box In</div>

</body>
</html>
OUTPUT:

16.demonstrate binding to image using tabular data control.?


ROLL NO:006-09-013 PAGE NO:25
WEB PROGRAMMING
/*image.txt
image
numbers/0.gif
numbers/1.gif
numbers/2.gif
numbers/3.gif
numbers/4.gif
numbers/5.gif
numbers/6.gif
numbers/7.gif
numbers/8.gif
numbers/9.gif
*/
<html>
<head>
<title>Binding to a img</title>

<object id = "Images"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value = "images.txt" />
<param name = "UseHeader" value = "True" />
</object>

<script type = "text/javascript">


<!--
recordSet = Images.recordset;

function move( whereTo )


{
switch( whereTo ) {

case "first":
recordSet.MoveFirst();
break;

case "previous":

recordSet.MovePrevious();

if ( recordSet.BOF )
recordSet.MoveLast();

break;

case "next":

recordSet.MoveNext();

if ( recordSet.EOF )

recordSet.MoveFirst();
ROLL NO:006-09-013 PAGE NO:26
WEB PROGRAMMING
break;

case "last":
recordSet.MoveLast();
break;
}
}
// -->
</script>
</head>
<body>

<img datasrc = "#Images" datafld = "image" alt = "Image"


style = "position: relative; left: 45px" /><br />

<input type = "button" value = "First"


onclick = "move( 'first' );" />

<input type = "button" value = "Previous"


onclick = "move( 'previous' );" />

<input type = "button" value = "Next"


onclick = "move( 'next' );" />

<input type = "button" value = "Last"


onclick = "move( 'last' );" />

</body>
</html>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:27


WEB PROGRAMMING
17demonstrate binding to table using tabular data control?

<html >
<head>
<title>Data Binding and Tables</title>
<object id = "Colors"
classid =

"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" />
<param name = "FieldDelim" value = "|" />
</object>
</head>

<body style = "background-color: darkseagreen">

<h1>Binding Data to a <code>table</code></h1>

<table datasrc = "#Colors" style = "border-style: ridge;


border-color: darkseagreen;
background-color: lightcyan">

<thead>
<tr style = "background-color: mediumslateblue">
<th>Color Name</th>
<th>Color RGB Value</th>
</tr>
</thead>

<tbody>
<tr style = "background-color: lightsteelblue">
<td><span datafld = "ColorName"></span></td>
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
</tr>
</tbody>

</table>

</body>
</html>

ROLL NO:006-09-013 PAGE NO:28


WEB PROGRAMMING
OUTPUT:

ROLL NO:006-09-013 PAGE NO:29


WEB PROGRAMMING
18) Demonstrate structured graphics using example.

<html >
<head>
<title>Structured Graphics - Shapes</title>
</head>

<body>

<object id = "shapes" style = "background-color: #CCCCFF;


width: 500; height: 400"
classid =

"CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">

<param name = "Line0001"


value = "SetLineColor( 0, 0, 0 )" />
<param name = "Line0002"
value = "SetLineStyle( 1, 1 )" />
<param name = "Line0003"
value = "SetFillColor( 0, 255, 255 )" />
<param name = "Line0004"
value = "SetFillStyle( 1 )" />

<param name = "Line0005"


value = "Oval( 0, -175, 25, 50, 45 )" />
<param name = "Line0006"
value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" />
<param name = "Line0007"
value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" />
<param name = "Line0008"
value = "Polygon(5, 0, 0, 10, 20, 0, -30,
-10, -10, -10, 25)" />
<param name = "Line0009"
value = "Rect( -185, 0, 60, 30, 25 )" />
<param name = "Line0010"
value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" />

<param name = "Line0011"


value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" />
<param name = "Line0012"
value = "Text( 'Shapes', -200, 200 , -35 )" />

<param name = "Line0013"


value = "SetLineStyle( 2,1 )" />
<param name = "Line0014"
value = "PolyLine( 5, 100, 0, 120, 175, -150, -50, -75, -75, 75, -75)" />

</object>

ROLL NO:006-09-013 PAGE NO:30


</body WEB PROGRAMMING

</html>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:31


WEB
19.Demonstrate VB script PROGRAMMING
using date and time.

<html>

<body bgcolor="aliceblue">

<script type="text/vbscript">

document.write("Today's date is " & Date())

document.write("<br />")

document.write("The time is " & Time())

</script>

</body>

</html>

OUTPUT:

20.Demostrate VB script using arrays.

ROLL NO:006-09-013 PAGE NO:32


WEB PROGRAMMING
<html>

<head>

<title>Arrays</title>

<script language="vbscript">

Option Explicit

Public sub displayArray(x,s)

Dim j

document.write(s & ":")

for j=0 to UBound(x)

document.write(x(j) & " ")

next

document.write("<br>")

end sub

Dim fixedSize(3),fixedArray,dynamic(),k

ReDim dynamic(3)

fixedArray=Array("A","B","C")

for k=0 to UBound(fixedSize)

fixedSize(k)=50-k

dynamic(k)=chr(75+k)

next

call DisplayArray(fixedSize,"fixedSize")

call DisplayArray(fixedArray,"fixedArray")

call DisplayArray(dynamic,"dynamic")

ReDim Preserve dynamic(5)

dynamic(3)=3.343

dynamic(4)=77.37443

ROLL NO:006-09-013 PAGE NO:33


WEB PROGRAMMING
call DisplayArray(dynamic,"dynamic after ReDim preserve")

</script>

</head>

</html>

OUTPUT:

21.Demonstrate VB script using string.

ROLL NO:006-09-013 PAGE NO:34


<html> WEB PROGRAMMING
<head>

<title>Using VBScript String Functions</title>

<script type = "text/vbscript">

Option Explicit

Public Function TranslateToPigLatin( englishPhrase )

Dim words ' Stores each individual word

Dim k, suffix

words = Split( englishPhrase )

For k = 0 to UBound( words )

If InStr( 1, "aeiou", _

LCase( Left( words( k ), 1 ) ) ) Then

suffix = "y"

Else

suffix = "ay"

End If

words( k ) = Right( words( k ), _

Len( words( k ) ) - 1 ) & _

Left( words( k ), 1 ) & suffix

Next

TranslateToPigLatin = Join( words )

End Function

Sub cmdButton_OnClick()

Dim phrase

phrase = Document.Forms( 0 ).txtInput.Value

ROLL NO:006-09-013 PAGE NO:35


WEB PROGRAMMING
Document.forms( 0 ).txtPigLatin.Value = _

TranslateToPigLatin( phrase )

End Sub

</script>

</head>

<body bgcolor="blueslate">

<form> Enter a sentence

<input type = "text" name = "txtInput" size = "50" />

<p>Pig Latin

<input type = "text" name = "txtPigLatin" size = "70" />

</p><p>

<input type = "button" name = "cmdButton"

value = "Translate" /></p>

</form>

</body>

</html>

ROLL NO:006-09-013 PAGE NO:36


OUTPUT: WEB PROGRAMMING

22.Demonstrate VB script using class.

<html>

<head>

<title>Using a VBScript Class</title>

<script type = "text/vbscript">

Option Explicit

Class Person

Private name, yearsOld, ssn

Public Property Let FirstName( fn )

name = fn

End Property

Public Property Get FirstName()

FirstName = name

ROLL NO:006-09-013 PAGE NO:37


End Property WEB PROGRAMMING
Public Property Let Age( a )

yearsOld = a

End Property

Public Property Get Age()

Age = yearsOld

End Property

Public Property Let SocialSecurityNumber( n )

If Validate( n ) Then

ssn = n

Else

ssn = "000-00-0000"

Call MsgBox( "Invalid Social Security Format" )

End If

End Property

Public Property Get SocialSecurityNumber()

SocialSecurityNumber = ssn

End Property

Private Function Validate( expression )

Dim regularExpression

Set regularExpression = New RegExp

regularExpression.Pattern = "^\d{3}-\d{2}-\d{4}$"

If regularExpression.Test( expression ) Then

Validate = True

Else

Validate = False

End If

End Function

Public Function ToString()

ROLL NO:006-09-013 PAGE NO:38


WEB PROGRAMMING
ToString = name & Space( 3 ) & age & Space( 3 ) _

& ssn

End Function

End Class

Sub cmdButton_OnClick()

Dim p

Set p = New Person

With p

.FirstName = Document.Forms(0).txtBox1.Value

.Age = CInt( Document.Forms(0).txtBox2.Value )

.SocialSecurityNumber =_

Document.Forms(0).txtBox3.Value

Call MsgBox( .ToString() )

End With

End Sub

</script>

</head>

<body bgcolor="powderblue">

<form action = "">Enter first name

<input type = "text" name = "txtBox1" size = "10" />

<p>Enter age

<input type = "text" name = "txtBox2" size = "5" /></p>

<p>Enter social security number

<input type = "text" name = "txtBox3" size = "10" />

</p><p>

<input type = "button" name = "cmdButton"

value = "Enter" /></p>

</form>

ROLL NO:006-09-013 PAGE NO:39


</body> WEB PROGRAMMING

</html>

OUTPUT:

ROLL NO:006-09-013 PAGE NO:40


WEB PROGRAMMING

ROLL NO:006-09-013 PAGE NO:41


WEB PROGRAMMING

ROLL NO:006-09-013 PAGE NO:42

You might also like