Scribd
Upload
6 views5 pages

Practical No 7CSS

Uploaded by

yiwav67616
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
6 views5 pages

Practical No 7CSS

Uploaded by

yiwav67616
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/ 5

PRACTICAL NO 7

Roll no:-243222

EXP7_ST1:

Program:-
<html>
<head>
<title>7_1</title>
</head>
<body>
<p id="press"></p>
<p id="Down"></p>
<p id="up"></p>
<input type="text" onkeypress="uniCharCode(event)"
onkeydown="uniCharDown(event)" onkeyup="uniCharUp(event)">

<script>
function uniCharCode(event) {
var key = event.keyCode;
document.getElementById("press").innerHTML = "Unicode
character pressed: " + key;
}

function uniCharDown(event) {
var key = event.keyCode;
document.getElementById("Down").innerHTML = "Unicode
character down: " + key;
}

function uniCharUp(event) {
var key = event.keyCode;
document.getElementById("up").innerHTML = "Unicode
character up: " + key;
}
</script>
</body>
</html>
Output:-
EXP7_ST2:
PROGRAM:
<html>
<head>
<title>Attribute Value</title>
<script type="text/javascript">
function highlight(element) {
element.style.color = 'blue';
element.style.backgroundColor = 'pink';
}
</script>
</head>
<body>
<form name="MYFORM" action=" " method="post">
<p>
Firstname: <input type="text" value="xyz" name="Fname"
onchange="highlight(this)"><br>
Lastname: <input type="text" value="ABC" name="Lname"
onchange="highlight(this)"><br>
Email: <input type="text" value="FGH" name="Email"
onchange="highlight(this)"><br>
<input name="submit" value="submit" type="submit">
<input name="reset" value="reset" type="reset">
</p>
</form>
</body>
</html>

OUTPUT:-
EXP7_EX1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Button Event Listener</title>
</head>
<body>
<button id="myButton">Click or <br >Hover Me</button>

<script>
const button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Button clicked!');
});

button.addEventListener('mouseenter', function() {
button.style.backgroundColor = 'lightblue';

});

button.addEventListener('mouseleave', function() {
button.style.backgroundColor = '';
});
</script>
</body>
</html>
OUTPUT:

You might also like