WT prc4

Assignment No.
4: JAVASCRIPT
SET A
Q1.Write a JavaScript function to create an alert Box.
alert.html
<html>
<head>
<script type="text/javascript">
function Hello(){
alert("Hello javascript user");
}</script>
</head>
<body bgcolor=pink>
<h3>Alert Box</h3>
<input type="button" onclick="Hello()" value="say hello">
</body>
</html>
Q2.Write a JavaScript function to create a Confirm Box.
confirm.html
<html>
<head>
function Hello(){
var text;
if(confirm("pressed button"))
{
text="You pressed ok";
}
else{
text="you press cancel";
}
document.getElementById("cnfrm").innerHTML=text;
}
</script>
</head>
<body bgcolor=lightgreen>
<h3>Javascript Confirm Box</h3>
<button onclick="Hello()">Try it</button>
<p id="cnfrm"></p>
</body>
</html>
Q3.Write a JavaScript function to create a Prompt Box.

prompt.html
<html>
<head>
function promptbox(){
var p=prompt("Please enter Best IT company","Accenture");
if(p!=null && p!=""){
document.write("Hello, "+p+" is the best IT company");
}
}
</script>
</head>
<body bgcolor=lightblue>
<h4>Javascript prompt Box</h4>
<input type="button" onclick="promptbox()" value="Display prompt box">
</html>
Q4.Write a JavaScript program to replace a specific value with another value in a string. [Hint: Use
replace() method]
replace.html
<html>
<head>
function chng(){
var s=document.getElementById("change").innerHTML;
var r=s.replace("Nirali Prakashan","Pragati");
document.getElementById("change").innerHTML=r;
}
</script>
</head>
<body bgcolor=mangocolor>
<h3>Replace function</h3>
<p>Click the button to replace "Nirali Prakashan" with "Paragati" in the paragraph
below:</p>
<p id="change">please visit Nirali Prakashan</p>
<button onclick="chng()">Click it</button>
</body>
</html>
Q5.Write a JavaScript program to convert lowercase string to uppercase string using onChange
event. [Hint: Use to UpperCase() method]
//cases.html
<html>
<head><title>Function to convert text to uppercase</title>
</head>
<script>
function myfunction(){
var x=document.getElementById('name');
x.value=x.value.toUpperCase();
}
</script>
<body bgcolor="lightgreen">
Enter your name:
<input type="text" id="name" onchange="myfunction()">
<p>When we leave the input field , a function is triggered </br>
which transforms the input text to upper case.</p>
</body>
</html>
SET B
Q1.Write a JavaScript to display message ‘Exams are near ,have you started preparing for?’using
alert ,prompt and confirm boxes. Accept proper input from user and display message accordingly.
<html>
<head>
alert("Your exams are near,Have you started preparing for?");
var p=prompt("","Sana");
if(p!=null && p!=""){
document.write("<font size=20px color=blue>Hello, "+p+" start preparing for exams");
}
window.confirm("Exams are near");
</script>
</head>
<body bgcolor=lightblue>
</body>
</html>
Q2.Write a JavaScript function to validate username and password for a membership form.
<html>
<head>
<title>Membership form Validation</title>
<style>
.error{
color:red;
}
label{
color:white;
}
</style>
</head>
<body bgcolor="grey">
<h2 style="color:white">Membership Form Validation</h2>
<form id="membershipForm" action="p1.html">
<label for="username">Username:</label><input type="text" id="username"
name="username">
<span id="usernameError" class="error"></span>
<br><br><br>
<label for="password">Password:</label><input type="password" id="password"
name="password">
<span id="passwordError" class="error"></span>
<br><br>
<button type="submit">Register</button>
</form>
<script>
document.getElementById('membershipForm').addEventListener('submit',function(event){
event.preventDefault();
document.getElementById('usernameError').textContent='';
document.getElementById('passwordError').textContent='';
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
if(!isValidUsername(username)){
document.getElementById('usernameError').textContent='username must be alphanumeric
and between 6 to 12 characters';
return;
}
if(!isValidPassword(password)){
document.getElementById('passwordError').textContent='Password must be atleast 6
characters long and contain at least one Uppercase letter,one lowercase letter,and one digit';
return;
}
event.target.submit();
});
function isValidUsername(username){
var usernameRegex = /^[a-zA-Z0-9]{6,12}$/;
return usernameRegex.test(username);
}
function isValidPassword(password){
var passwordRegex= /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,12}$/;
return passwordRegex.test(password);
}
</script>
</body>
</html>
Q3.Write a JavaScript program to display an alert using button event onClick.
//clickevent.html
<html>
<body bgcolor=pink>
<h4>Click event</h4>
<button id="clc">Click Me!</button>
<script>
document.getElementById("clc").addEventListener('click',function(){
alert("You have clicked me!");
});
</script>
</body>
</html>
Q4.Write a JavaScript program to design a Div element using events mouseover and mouseout.
//mouseevent.html
<html>
<head>
<title>MouseOver and MouseOut event</title>
</head>
<body>
<div id="mydiv" style="height:100px; width:100px; background-color:blue;"></div>
<script>
document.getElementById("mydiv").addEventListener('mouseover',function(){
this.style.backgroundColor='green';
});
document.getElementById("mydiv").addEventListener('mouseout',function(){
this.style.backgroundColor='blue';
});
</script>
</body>
</html>
Q5.Write a JavaScript program of image to load event with status message.
<html>
<head><title>Image load event </title>
<script>
function showStatus(){
document.getElementById('status').innerHTML ="image loaded successfully!';
}
</script>
</head>
<body>
<img src="image.jpg" onload="showStatus()">
<p id="status"></p>
</body>
</html>
Output:

WT prc4

Uploaded by

Copyright:

Available Formats

WT prc4

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

WT prc4

Uploaded by

Copyright:

Available Formats

Assignment No.

Q1.Write a JavaScript function to create an alert Box.

Q2.Write a JavaScript function to create a Confirm Box.

Q3.Write a JavaScript function to create a Prompt Box.

Q3.Write a JavaScript program to display an alert using button event onClick.

Q5.Write a JavaScript program of image to load event with status message.

You might also like