Ilovepdf Merged

Download as pdf or txt
Download as pdf or txt
You are on page 1of 18

Practical No.

11:-Develop a webpage for placing the window on the screen


and working with child window.
Code-1:

<html>

<head>

<title>Open new window</title>

<script>

function openWindow()

myWindow = window.open('pract1.html', 'My Window', 'top=100, left=100, width=250,


height=100,status=1')

</script>

</head>

<body>

<form action="#">

<input type="button" value="Open Window" onclick="openWindow()"/>

</form>

</body>

</html>

Output:
Code-2:

<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:
Code-3:

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

var myWindow = window.open("", "myWin");

myWindow.document.write("<p>Working With Child Window'");

myWindow.document.write("<p>This is 'myWin'");

myWindow.document.write("<br>ScreenX: " + myWindow.screenX);

myWindow.document.write("<br>ScreenY: " + myWindow.screenY + "</p>");

</script>

</head>

<body>

<button onclick="myFunction()">Open "myWin"</button>

</body>

</html>

Output:
Practical No.12:- Develop a web page for validation of form fields using
regular expressions.

Code-1: Write a JavaScript to test if string contains the letter ‘a’ or ‘c’ or both.

<html>

<body>

<script language="javascript">

var input = prompt('Enter some text')

re = /[ac]/

if(re.test(input)) {

alert('The string contains letter a or c or both')

else {

alert('String does not contain a or c or both')

</script>

</body>

</html>

Output:
Code-2: Develop a program to check for valid email id entered by user.

<html>

<head>

<title>Check Email ID</title>

<script>

function checkEmail()

var email = document.getElementById('email').value

var regex = /^([a-zA-Z0-9_\.]+)@([a-zA-Z0-9_\.]+)\.([a-zA-Z]{2,5})$/

var res = regex.test(email)

if(!res) {

alert('Please enter valid email id')

else {

alert('Thank you')

</script>

</head>

<body>

<form name="myform" action="#" method="post">


Enter Email ID <input type="text" id="email" /><br/>

<input type="button" value="Submit" onclick="checkEmail()"/>

</form>

</body>

</html>

Output:
Practical No.13: Create a webpage with Rollover effect.
Code-1: JavaScript to create rollover effect for image.

<!doctype html>

<html>

<head>

<title>How to Make a JavaScript Image Rollover</title>

<script language="javascript">

function MouseRollover(MyImage) {

MyImage.src = "image1.jpg";

function MouseOut(MyImage) {

MyImage.src = "image2.jpg";

</script>

</head>

<body>

<div align="center">

<img src="image1.jpg" boarder="0px" width="400px" height="400px"

onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" />

</div>

</body>

</html>
OUTPUT:
2)JavaScript to Create rollover effect for text

<HTML>

<head>

<title> Rollover Text </title>

</head>

<Body>

<table>

<tr>

<td>

<a>

<IMG src="Java.jpg" name= "lang">

</a>

</td>

<td>

<a

onmouseover="document.lang.src='Java.jpg'">

<b> <u> JAVA Programming </u> </b>

</a>

<br/><br/><br/><br/>

<a

onmouseover="document.lang.src='C++.jpg'">

<b> <u> C++ Programming </u> </b>

</a>

<br/><br/><br/><br/>

<br/><br/><br/><br/>

<a onmouseover="document.lang.src='C.jpg' ">

<b> <u> C Programming </u> </b>


</a>

</td>

</tr>

</table>

</body>

</html>

OUTPUT:
3)JavaScript to create rollover effect for text.

<HTML>

<Body>

<Textarea rows="2" cols="100" 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.</textarea>

</body>

</html>

OUTPUT:
Practical.No.14. Develop a webpage for implementing Menus

Code-1: Develop a JavaScript program to create simple Pulldown menu

<html>

<head>

<title>Pulldown Menu Example</title>

<script>

function displayPage(ch)

page = ch.options[ch.selectedIndex].value

if(page != "")

window.location = page

</script>

</head>

<body>

<form name='form1' action="#">

Select your favourite website:

<select name="mymenu" onchange="displayPage(this)">

<option value="https://www.google.com">Google</option>

<option value="https://www.yahoo.com">Yahoo</option>

<option value="https://www.msbte.org.in">MSBTE</option>

</select>

</form>
</body>

</html>

Output:

Code-2: Develop a JavaScript program to create Context Menu

<html>

<head>

<title>Context Menu Example</title>

<style>

.menu {

width: 150px;

border-style: solid;

border-width: 1px;

border-color: grey;

position: fixed;

display: none;

.menu-item {

height: 20px;

.menu-item:hover {

background-color: #6CB5FF;
cursor: pointer;

</style>

<script>

var menuDisplayed = false

var menuBox = null

window.addEventListener("contextmenu", showMenu, false)

window.addEventListener("click", hideMenu, false)

function showMenu()

var left = arguments[0].clientX

var top = arguments[0].clientY

menuBox = window.document.querySelector('.menu')

menuBox.style.left = left + 'px'

menuBox.style.top = top + 'px'

menuBox.style.display = 'block'

arguments[0].preventDefault()

menuDisplayed = true

function hideMenu()

if(menuDisplayed == true) {

menuBox.style.display = 'none'

}
}

</script>

</head>

<body>

</h2>Right click mouse to view Context Menu</h2>

<div class="menu">

<div class="menu-item">Google</div>

<div class="menu-item">Facebook</div>

<hr>

<div class="menu-item">MSN</div>

<div class="menu-item">Bing</div>

</div>

</body>

</html>

Output:

You might also like