d2740e6d-08dc-4c7e-9899-e40a7416005a (1)

Name: Aniket deshmukh Rollno: 13
Batch: B Sub: CSS
Practical 9
1. JavaScript program for simple intrinsic Function.
<!DOCTYPE html>
<html>
<body>
<form name=”myform”>
Name:<input type=”text” name=”name”/>
<br/>
<br/>
Rollno :<input type=”text” name=”Rollno”/>
<br/>
<br/>
<img src =”submit.gif” onlclik="javascript:document.forms.myform.submit()"/>
<br/>
<br/>
</form>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
2. Javascript program for Disabling Elements.

<!DOCTYPE html>
<html>
<head>
<script type =”text/javascript”>
Function EnableFunction() {
document.forms.myform.name.disabled=false }
Function DisableFunction()
{ document.forms.myform.name.disabled=true Client Side Scripting
Languages (22519) Maharashtra State board of Education Prepared By-
Miss.P.S.Dungarwal }
</script>
</head>
<body>
Username:<input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Disable Name Field” onclick="DisableFunction()"/>
<br/><br/>
<input type=”button” value=”Enable Name Field” onclick="EnableFunction()"/>
</form> </body> </html>
OUTPUT:
Batch: B Sub: CSS
3. JavaScript program for Read-Only Elements.

<!DOCTYPE html>
<html> <head>
<script type =”text/javascript”>
Function ReadOnlyFunction()
{
document.forms.myform.name.readOnly=true
}
</script>
</head>
<body>
Username: <input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Read-only Name Field”
onclick="ReadOnlyFunction()"/>
</form>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
Practical 10
1. Develop a webpage for creating session and persistent
cookies.Observe the effects with browser cookies settings
a. Cookies Examples
<html>
<head>
<script type = "text/javascript">
function WriteCookie() {
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>
OUTPUT:
Batch: B Sub: CSS
b. Reading Cookie
<html>
<head>
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
var cookiearray = allcookies.split(';');
for(var i=0; i<cookiearray.length; i++)
{ var name = cookiearray[i].split('=')
[0]; var value = cookiearray[i].split('=')
[1];
document.write ("<br>Key is : " + "Priyanka"+ " <br>and Value is : " + "101");
}
}
</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:
Batch: B Sub: CSS
c. Setting Cookies
<html>
<head>
function WriteCookie()
{
var now = new Date();
now.setMonth(now.getMonth() + 1
);
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
Practical 11
1. Program to implement window on the screen and working with
child window:-
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that is
200px wide and
100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
2. Program:
<html>
<body>
<p>Click the button to open a new window and close the window after three seconds
(10000 milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin()
{
var myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p> Myself Priyanka Thadke</p>");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
Practical 12
1. Develop a web page for validation of form fields using
regular expressions.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation with Regular Expressions</title>
<script type="text/javascript">
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var password = document.getElementById("password").value;
var nameRegex = /^[A-Za-z ]+$/;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var phoneRegex = /^[0-9]{10}$/;
var passwordRegex = /^.{6,}$/;
if (!nameRegex.test(name)) {
alert("Please enter a valid name (letters only).");
return false;
}
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
return false;
}
if (!phoneRegex.test(phone)) {
alert("Please enter a valid phone number (10 digits).");
return false;
}
if (!passwordRegex.test(password)) {
alert("Password must be at least 6 characters long.");
return false;
}
alert("Form Submitted
Successfully!"); return true;
}
</script>
Batch: B Sub: CSS
</head>
<body>
<h2>Form Validation</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<label for="phone">Phone Number:</label><br>

<input type="text" id="phone" name="phone"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
Practical 13
1. Creating Rollovers using HTML.
<HTML>
<Body>
<textarea rows=”2″ cols=”50″
name=”rollovertext”
onmouseover=”this.value=’What is rollover?'”
onmouseout=”this.value=’Rollover means a webpage changes when the user
moves his or her mouse over an object on the page'”></textarea>
</body>
</html>
We create a rollover effect that can change the color of its text using the style
attribute.
<p onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’blue'”> Move the mouse over this text to
change its color to red. Move the mouse away to change the text color
to blue. </p>
This example shows how to create rollover effect that involves text and
images. When the user places his or her mouse pointer over a book title, the
corresponding book image appears. <html> <head> <title>Rollover
Effect</title>
</head>
<body>
<table>
<tbody> <trvalign=”top”>
<td width=”50″> <a>
<imgsrc=”vb2010book.jpg” name=”book”>
</a> </td>
<td><img height=”1″ width=”10″>
</td>
<td><a onmouseover=”document.book.src=’vb2010book.jpg'”><b>Visual
Basic 2010 Made Easy</b></a> <br> <a
onmouseover=”document.book.src=’vb2008book.jpg'”><b>Visual Basic 2008
Made Easy</b></a> <br> <a
onmouseover=”document.book.src=’vb6book.jpg'”>
<b>Visual Basic 6 Made Easy</b></a> <br> </td> </tr>
</tbody>
</table>
</body>
</html>
Batch: B Sub: CSS
OUTPUT:
Batch: B Sub: CSS
2. Creating Rollovers Using JavaScript.
<!DOCTYPE html >

<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”><imgsrc=”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:
Batch: B Sub: CSS
Practical 14
1. Simple program for implementing menus.
<html>
<body>
<select>
<option value="Airtel">Airtel</option>
<option value="Idea">Idea</option>
<option value="Jio">Jio</option>
<option value="Bsnel">Bsnel</option>
</select>
</body>
</html>
OUTPUT:
Batch: B Sub: CSS
2. Javascript program for Dynamically Changing menu.
<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:
Batch: B Sub: CSS
<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>
Batch: B Sub: CSS
OUTPUT:
Batch: B Sub: CSS
Practical 15
1. Status Bar Example:
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.htmlcenter.com"
onMouseOver="window.status='HTMLcenter';return true"
onMouseOut="window.status='';return true">
HTMLcenter
</a>
</body>
</html>
OUTPUT:
After click :
Batch: B Sub: CSS
2. JavaScript program for protecting 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:
After click:

d2740e6d-08dc-4c7e-9899-e40a7416005a (1)

Uploaded by

Copyright:

Available Formats

d2740e6d-08dc-4c7e-9899-e40a7416005a (1)

Uploaded by

Document Information

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

d2740e6d-08dc-4c7e-9899-e40a7416005a (1)

Uploaded by

Copyright:

Available Formats

Name: Aniket deshmukh Rollno: 13

Batch: B Sub: CSS

2. Javascript program for Disabling Elements.

3. JavaScript program for Read-Only Elements.

<label for="phone">Phone Number:</label><br>

<input type="submit" value="Submit">

2. Creating Rollovers Using JavaScript.

<!DOCTYPE html >

2. Javascript program for Dynamically Changing menu.

2. JavaScript program for protecting Web page.

You might also like