CSS (22519) Manual

A Laboratory Manual for
Client Side Scripting

Language
(22519)
Semester –V
(CM)
Maharashtra State Board of Technical Education, Mumbai.

Maharashtra State
Board of Technical Education
Certificate
This is to certify that Mr./Ms. Dhanashree Jagadish Chaudhari
Roll No 3135 of Third Semester of Diploma in Computer Technology of
Institute, Government polytechnic vikramgad
(Code : 1547) has completed the term work satisfactorily in course Client Side
Scripting languages (22519) for the academic year 2021 to
2022 as Prescribed in the curriculum.
Place: Vikramgad Enrollment No: 1915470036
Date: …………………………………. Exam. Seat No: …………………………………
Subject Teacher Head of Department Principal
Seal of Institution
Practical No 1: Write simple JavaScript with HTML for arithmetic
expression evaluation and message printing.
❖ Develop a JavaScript program to display ‘Hello World!’ message in

alert box.
<html>
<head>
<title>Message Printing</title>
</head>
<body>
<script>
Alert(“Hello, world!”);
</script>
</body>
Output :
❖ Develop a JavaScript program to perform following arithmetic
operations: addition, subtraction, multiplication and division.
<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body>
<script type=”text/javascript”>
Var a = 12;
Var b = 34;
Var result;
Document.write(“Value of a = “ + a + “ and b = “+ b);
Result = a + b;
Document.write(“<br>Addition of a & b = “ + result );
Result = a – b;
Document.write(“<br>Subtraction of a & b = “ + result );
Result = a * b;
Document.write(“<br>Multiplication of a & b = “ + result );
Result = a / b;
Document.write(“<br>Division of a & b = “ + result );
</script>
</body>
</html>
Output :
Practical No. 2:-Develop JavaScript to use decision making and
looping statements
❖ Develop a JS program to display numbers from 1 to 10.

<html>
<head>
<title>Display Numbers from 1 to 10</title>
</head>
<body>
<h3>Numbers from 1 to 10 are</h3>

<script type=”text/javascript">
var a = 1;
while (a <= 10)

{
document.write(a + "<br />");
a++;
}
</script>
</body>
</html>
Output :
❖ Develop a program to demonstrate working of for…in loop.

<html>
<head>
<title>Demonstrate use of for...in loop</title>
</head>
<body>
<h3>Demonstrate use of for...in loop</h3>
<script type="text/javascript">
// creating an Object
var languages = { first : "C", second : "Java",
third : "Python", fourth : "PHP",
fifth : "JavaScript" };
// iterate through every property of the
// object languages and print all of them
// using for..in loops
for (itr in languages)
{
document.write(languages[itr] + "<br >");
}
</script>
</body>
</html>
Output :
Practical No-3.Develop JavaScript to implements Array
functionalities
❖ Develop a JS program to demonstrate Arrays and its methods.

<html>
<head>
<title>Arrays!!!</title>
var languages = new Array("C", "C++", "HTML", "Java", "VB");
Array.prototype.displayItems=function(){
for (i=0;i<this.length;i++){
document.write(this[i] + "<br />");
}
}
document.write("Programming lanugages array<br />");
languages.displayItems();
document.write("<br />The number of items in languages array is " + languages.length

+ "<br />");
document.write("<br />The SORTED languages array<br />");

languages.sort();
document.write("<br />The REVERSED languages array<br />");

languages.reverse();
document.write("<br />The languages array after REMOVING the LAST item<br />");
languages.pop();
document.write("<br />THE languages array after PUSH<br />");
languages.push("JavaScript");
document.write("<br />The languages array after SHIFT<br />");
languages.shift();
</script>
</head>
<body>
</body>
</html>
Output :
❖ Develop a JavaScript program to display the sum and product of array
elements.
<html>
<head>
<title>Display sum and product of array elements</title>
</head>
<body>
var arr = [13, 56, 7, 23, 1, 7, 8];

var sum=0, product = 1;
for(var i=0; i<arr.length; i++) {
sum += arr[i];
product *= arr[i];
}
document.write("Array elements are " + arr + "<br />");

document.write("<h3>Sum : " + sum + "</h3>");
document.write("<h3>Product : " + product + "</h3>");
</script>
</body>
</html>
Output :
Practical No-4 : Develop javascript to implement functions
❖ Develop a program to create a function sum which takes two

parameters as number and display the addition numbers provided.
<html>
<head>
<script>
function sum(val1, val2) {
var result = val1 + val2;
document.write(result + “<br/>”);
}
</script>
</head>
<body>
<script>
sum(23, 19);
sum(32, 56);
Sum(12, 52);
</script>
</body>
</html>
Output :
❖ Develop a program to convert temperature from Celsius to Fahrenheit

by returning value from function.
<html>
<head>
<script>
function toFahrenheit(celsius) {
return (celsius * 9/5 + 32);
}
document.write("Temperature in Fahrenheit is " +
toFahrenheit(45));
</script>
</head>
<body>
</body>
</html>
Output :
Practical No-5 : Develop javascript to implement Strings.
❖ Develop a program to change the case of string.

<html>
<head>
<script>
function toUpper() {
var text = document.getElementById('panel').innerHTML
document.getElementById('panel').innerHTML = text.toUpperCase()
}
function toLower() {
var text = document.getElementById('panel').innerHTML
document.getElementById('panel').innerHTML = text.toLowerCase()
}
</script>
</head>
<body>
<p id="panel">Click on button to change case.</p>

<input type="button" value="UPPERCASE" onclick="toUpper()" />
<input type="button" value="lowercase" onclick="toLower()" />
</body>
</html>
Output :
❖ Develop a JavaScript program to count the number of vowels in a given

string.
<html>
<head>
<title>Count vowels in a string</title>
</head>
<body>
<script>
var str = prompt('Enter the string', '')
var vowels = countVowels(str)
document.write("Given string: " + str)
document.write("<br>Number of Vowels: " + vowels)
function countVowels(s)
{
var i=0, count=0
var ch
for(var i=0; i<s.length; i++)
{
ch = s.charAt(i)
if(ch == 'a' || ch == 'A' || ch == 'e' || ch == 'E' || ch == 'i' || ch == 'I' || ch == 'o' || ch == 'O' ||
ch == 'u' || ch == 'U')
{
count++
}
}
return count
}
</script>
</body>
</html>
Output :
Practical No-6 : Create web page using Form Elements
❖ Create a HTML web page for User Registration Form.

<html>
<head>
<style>
input[type="text"],
input[type="password"],
select {
border: 1px solid red;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
form {
background-color: #f1f1f1;
width: 40%;
padding: 20px;
}
input[type="submit"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: green;
color: white;
font-size: 14;
}
input[type="reset"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: red;
color: white;
font-size: 14;
}
</style>
<script>
function input(e) {
e.style.backgroundColor = "yellow";
}
function reset1(e) {
e.style.backgroundColor = "white";
}
function fullName() {
var f = document.getElementById("fname").value;
var m = document.getElementById("mname").value;
var l = document.getElementById("lname").value;
document.getElementById("sname").value = f + " " + m + " " + l;
}
</script>
</head>
<body>
<center>
<form>
<h1>Registration Form</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="fname" placeholder="Enter first name"
onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="mname" placeholder="Enter middle name"
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="lname" placeholder="Enter last name"
</tr>
<tr>
<td>Full Name</td>
<td><input type="text" id="sname" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<select name="date">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="year">
<option>1990</option>
</select>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="Male">Male</input>

<input type="radio" name="gender" value="Female">Female</input>
</td>
</tr>
<tr>
<td>Contry</td>
<td>
<select name="contry">
<option selected>India</option>
<option>US</option>
<option>UK</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output :
Practical No-7 : Create web page to implement Form Events. Part I
❖ Write program to add click, mouseover and mouseout events to

webpage using JavaScript.
<html>
<body>
<button id=”btn”>Click here</button>
<p id=”para" onmouseover="mouseOver()" onmouseout="mouseOut()">Hover over
this Text !</p>
<b id="output"></b>
<script>
var x = document.getElementById("btn");
x.addEventListener("click", btnClick);
function mouseOver() {
document.getElementById("output").innerHTML += "MouseOver Event" +
"<br>";
}
function mouseOut() {
document.getElementById("output").innerHTML += "MouseOut Event" + "<br>";
}
function btnClick() {
document.getElementById("output").innerHTML += "Click Event" + "<br>";
}
</script>
</body>
</html>
Output :
❖ Write HTML Script that displays three radio buttons red, green, blue.
Write proper JavaScript such that when the user clicks on radio button
the background color of webpage will get change accordingly.
<html>
<head>
<script>
function changeColor(color)
{
var panel = document.getElementById('panel')
document.body.style.backgroundColor = color
panel.innerHTML = "Background color is set to: " + color.toUpperCase()
}
</script>
</head>
<body onload="changeColor('red')">
<p>Select option to change background color of page</p>
<form name="myform">
<input type="radio" name="color" value="red" onchange="changeColor(this.value)"
checked="false">RED<br />
<input type="radio" name="color" value="green"
onchange="changeColor(this.value)">GREEN<br />
<input type="radio" name="color" value="blue"
onchange="changeColor(this.value)">BLUE<br />
</form>
<p id="panel"></p>
</body>
</html>
Output :
Practical No-8 : Create web page to implement Form Events. Part II
Load Events:-
1. onload event
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Output :
Cookies are enabled.
2. Onunload event
<!DOCTYPE html>
<html>
<body onunload="myFunction()">
<h1>Welcome to my Home Page</h1>
<p>Close this window or press F5 to reload the page.</p>

<p><strong>Note:</strong> Due to different browser settings, this event may not always
work as expected.</p>
<script>
function myFunction() {
alert("Thank you for visiting W3Schools!");
}
</script>
</body>
</html>
Output :
Welcome to my Home Page
Close this window or press F5 to reload the page.
Note: Due to different browser settings, this event may not always work as expected.
Key Events
1. onkeypress event
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output :
2. onkeyup event
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user releases a key in the input field. The function
transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Output :
A function is triggered when the user releases a key in the input field. The function
transforms the character to upper case.
Enter your name:

3. onkeydown event
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output :
Other Events
1. onchange event
<html>
<head>
<script>
functionmyFunction() {
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
</body>
</html>
2. onselect event
<html>
<head>
<script>
functionmyFunction()
{
document.write("selected some text");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!" onselect="myFunction()">
</body>
</html>
3. onfocus event
<html>
<head>
<script>
functionmyFunction(x)
{
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
</body>
</html>
4. onblur event
<html>
<head>
<script>
functionmyFunction()
{
}
</script>
</head>
<body>
Enter your name: <input type=”text” id=”fname” onblur=”myFunction()”>
</body>
</html>
5. onreset event
<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
6. onsubmit event
<html>
<head>
<script>
functionconfirmInput()
{
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to My Page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="https://google.com/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Practical No:-9 : Develop a webpage using intrinsic java functions
❖ Write a JavaScript function to insert a string within a string at a

particular position (default is 1).
<html>
<head>
<title>Insert a string within a specific position in another string</title>
</head>
<body>
<script>
function insert(main_string, ins_string, pos) {
if(typeof(pos) == "undefined") {
pos = 0;
}
if(typeof(ins_string) == "undefined") {
ins_string = '';
}
return main_string.slice(0, pos) + ins_string +
main_string.slice(pos);
}
var main_string = "Welcome to JavaScript";
var ins_string = " the world of ";
var pos = 10;
var final_string = insert(main_string, ins_string, pos);
document.write("Main String: <b>" + main_string + "</b><br/>");
document.write("String to insert: <b>" + ins_string + "</b><br/>");
document.write("Position of string: <b>" + pos + "</b><br/>");
document.write("Final string: <b>" + final_string + "</b>");
</script>
</body>
</html>
Output :
Practical No:-10 : Develop a webpage for creating session and
persistent cookies. Observe the effects with browser cookies settings.
❖ Storing Cookies
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
if(document.myform.customer.value == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" >
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
Output :
Enter Name :
Set Cookie
❖ Read a Cookie with JavaScript

<html>
<head>
functionReadCookie() {
varallcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
Output :
Click the following button and see the result:
Get Cookie
❖ Setting Cookies Expiry Date

<html>
<head>
var now = new Date();
now.setMonth(now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Output :
Enter name :
Set Cookie
❖ Delete a Cookie with JavaScript

<html>
<head>
var now = new Date();
now.setMonth(now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Output :
Enter name :
Set Cookie
Practical No.11 : Develop a webpage for placing the window on the
screen and Working with child window.
Program Code :
<html>
<body>
<p>Click the button to open a new window and close the window after three seconds (3000
milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>
Output :
Click the button to open a new window and close the window after three
seconds (3000 milliseconds)
Open ‘my Window”

Practical No.12 : Develop a web page for validation of form fields
using regular expressions.
Program code :
<!DOCTYPE html>
<html>
<head>
<title>creating mailing system</title>
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var user = document.getElementById("e").value;
var user2 = document.getElementById("e");
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (re.test(user)) {
alert("done");
return true;
}
else {
user2.style.border = "red solid 3px";
return false;
}
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text"
placeholder="firstname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="text"
placeholder="lastname"
maxlength="10">
</tr>
<br><br>
<tr>
<input type="email"
placeholder="username@gmail.com" id="e">
</tr>
<br><br>
<tr>
<input type="password" placeholder="password">
</tr>
<br><br>
<tr>
<input type="password" placeholder="confirm">
</tr>
<br><br>
<tr>
<input type="text" placeholder="contact">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr><input type="submit"
onclick="validate()" value="create">
</tr>
</table>
</fieldset>
</form>
</center>
</body>
</html>
Output:
Practical.No.13 : Create web page with Rollovers effect.
Program code :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><img src=”vb2010book.jpg” name=”DisplayBook”/><p>

<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010

Made Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made

Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made
Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>
Output :
View Example 30.4 in action.
Practical.No.14 : Develop a webpage for implementing Menus
Program Code :
<html>
<head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript:
dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Select
status</option></select>')
</script>
<select id="status" name="status">

<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</div>
</body>
</html>
Output :
Select source ^
Source :
OPEN ^
Status :
Practical.No.15 : Develop a webpage for implementing Status bars
and web page protection.
❖ Moving the message along the status bar

<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""
function scrollText(text, milliseconds) {
window.setInterval("displayText('"+text+"')", milliseconds)
}
function displayText(text) {
window.defaultStatus = blanks + text
++scrollPos
blanks += " "
if(scrollPos > maxScroll) {
scrollPos = 0
blanks = ""
}
}
</script>
</head>
<body onload="scrollText('Watch this text scroll!!!', 300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html>
Output :
Watch the text scroll at the bottom of this window!
❖ Protection web page
<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()"
src="http://www.java2s.com/style/logo.png"
alt="www.java2s.com"
width="99"
height="76">
</body>
</html>
Output :
Practical No: 16 : Develop a web page for implementing slideshow,
banner.
❖ Creating Rotating Banner Ads

<html>
<head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Output :
View banner.htm to see the above JavaScript in action
❖ Creating Rotating Banner Ads with URL Links
<html>
<head>
<script language="Javascript">MyBanners=new
Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new
Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://onlinebizguide4yo
u.com/','http://javascript-tutor.net/')
banner=0
function ShowLinks(){
document.location.href="http://www."+MyBannerLinks[banner]
}function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>
Output :
Click Banner Links to see the above JavaScript in action
❖ Slideshow
<html >
<head>
<script language=”Javascript”>
MySlides=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Slide=0
function ShowSlides(SlideNumber){
{ Slide=Slide+SlideNumber
if (Slide>MySlides.length-1){
Slide=0
}
if (Slide<0) {
Slide=MySlides.length-1
}
document.DisplaySlide.src=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align=”center”><img src=”banner1.jpg” name=”DisplaySlide” width=”900″
height=”120″ /><p>
<center>
<table border=0>
<tr>
<td align=center>
<input type=”button” value=”Back” onclick=”ShowSlides(-1)”>
<input type=”button” value=”Forward” onclick=”ShowSlides(1)”>
</td>
</tr>
</table>
</center>
</body>
</html>

CSS (22519) Manual

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

CSS (22519) Manual

Uploaded by

Copyright:

Available Formats

A Laboratory Manual for

Client Side Scripting

Maharashtra State Board of Technical Education, Mumbai.

Roll No 3135 of Third Semester of Diploma in Computer Technology of

Institute, Government polytechnic vikramgad

Scripting languages (22519) for the academic year 2021 to

2022 as Prescribed in the curriculum.

Place: Vikramgad Enrollment No: 1915470036

Date: …………………………………. Exam. Seat No: …………………………………

Subject Teacher Head of Department Principal

❖ Develop a JavaScript program to display ‘Hello World!’ message in

❖ Develop a JS program to display numbers from 1 to 10.

<h3>Numbers from 1 to 10 are</h3>

while (a <= 10)

❖ Develop a program to demonstrate working of for…in loop.

❖ Develop a JS program to demonstrate Arrays and its methods.

var languages = new Array("C", "C++", "HTML", "Java", "VB");

document.write("<br />The number of items in languages array is " + languages.length

document.write("<br />The SORTED languages array<br />");

document.write("<br />The REVERSED languages array<br />");

document.write("<br />THE languages array after PUSH<br />");

document.write("<br />The languages array after SHIFT<br />");

var arr = [13, 56, 7, 23, 1, 7, 8];

for(var i=0; i<arr.length; i++) {

document.write("Array elements are " + arr + "<br />");

❖ Develop a program to create a function sum which takes two

❖ Develop a program to convert temperature from Celsius to Fahrenheit

❖ Develop a program to change the case of string.

<p id="panel">Click on button to change case.</p>

❖ Develop a JavaScript program to count the number of vowels in a given

❖ Create a HTML web page for User Registration Form.

❖ Write program to add click, mouseover and mouseout events to

<h1>Welcome to my Home Page</h1>

<p>Close this window or press F5 to reload the page.</p>

Close this window or press F5 to reload the page.

<input type="text" onkeypress="myFunction()">

Enter your name:

<input type="text" onkeypress="myFunction()">

❖ Write a JavaScript function to insert a string within a string at a

❖ Read a Cookie with JavaScript

❖ Setting Cookies Expiry Date

❖ Delete a Cookie with JavaScript

Open ‘my Window”

<P align=”center”><img src=”vb2010book.jpg” name=”DisplayBook”/><p>

<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010

<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made

<select id="status" name="status">

❖ Moving the message along the status bar

❖ Protection web page

❖ Creating Rotating Banner Ads

You might also like