Scribd
Upload
65 views

Ilovepdf Merged

Uploaded by

rathodharshalr1905
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

Ilovepdf Merged

Uploaded by

rathodharshalr1905
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy