Scribd
Upload
15 views

WT prc4

Practical

Uploaded by

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

WT prc4

Practical

Uploaded by

Hashhash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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:

You might also like