Scribd
Upload
25 views2 pages

Web App Development Exercise 5

The document outlines an assignment for a web app development course focused on JavaScript event handling. It includes tasks such as creating a button with a click event, changing a DIV's background color on mouse events, handling image click events with navigation buttons, and reading form elements from HTML. Each task provides specific HTML structures and requires JavaScript code implementation to achieve the desired functionality.

Uploaded by

Prasann M
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
25 views2 pages

Web App Development Exercise 5

The document outlines an assignment for a web app development course focused on JavaScript event handling. It includes tasks such as creating a button with a click event, changing a DIV's background color on mouse events, handling image click events with navigation buttons, and reading form elements from HTML. Each task provides specific HTML structures and requires JavaScript code implementation to achieve the desired functionality.

Uploaded by

Prasann M
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

CSA -202 Web App Development

Assignment 5 : (JavaScript event handling)


1) Write JavaScript code that creates a button on the page and add a click
event listener to log a message to the console. (Use
createElement(), and addEventListener() methods
2) Write a JavaScript function that changes the background color of a DIV
element when mouse enters and leaves it. (handle onmouseenter and
onmouseleave events)
3) Use the following html and write JavaScript to handle image click event.
Also add the functionality for next and previous buttons
<html>

<head>
<title>Image Viewer</title>
</head>
<body >

<div>
<img src="images/[Link]" width="80px" height="80px" />
<img src="images/[Link]" width="80px" height="80px" />
<img src="images/[Link]" width="80px" height="80px" />
<img src="images/[Link]" width="80px" height="80px" />
</div>
<button >Prev</button>&nbsp;
<button >Next</button>
<div >
<img id="imgdiv" src="images/[Link]" width="300px" />
</div>
</body>
</html>

4) Use the following html and add Javascript to read the


form elements.
<html>

<head>
<title>HTML Form</title>
</head>
<body >
<form>
<div>
<label for="fname">First name: </label>
<input id="fname" type="text" />
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
</body>
</html>

You might also like