Scribd
Upload
5 views3 pages

Lab Assignment-Dom Manipulation

The document outlines a lab assignment focused on DOM manipulation using JavaScript, including tasks such as modifying paragraph styles, implementing light/dark mode, retrieving link attributes, adding rows to a table, creating a table with specified dimensions, counting dropdown list items, and calculating sphere volume. Each task includes sample HTML code and a brief description of the expected functionality. The assignment aims to enhance practical skills in JavaScript and web development.

Uploaded by

waliurehman4023
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
5 views3 pages

Lab Assignment-Dom Manipulation

The document outlines a lab assignment focused on DOM manipulation using JavaScript, including tasks such as modifying paragraph styles, implementing light/dark mode, retrieving link attributes, adding rows to a table, creating a table with specified dimensions, counting dropdown list items, and calculating sphere volume. Each task includes sample HTML code and a brief description of the expected functionality. The assignment aims to enhance practical skills in JavaScript and web development.

Uploaded by

waliurehman4023
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/ 3

Lab Assignment –DOM Manipulation

1- Here is a sample html file with a submit button. Now modify the style of the
paragraph text through javascript code.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head>
<body>
<p id ='text'>JavaScript Practice</p>
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>
Clicking on the button the font, font size, and color of the paragraph text
will be changed.

2- Write a JavaScript program to set web page color to light or dark mode.

3- Here is a sample HTML file with a submit button. Write a JavaScript


function to get the value of the href, hreflang, rel, target, and type attributes
of the specified link.
<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
</head>
<body>
<p><a id="comsats" type="text/html" hreflang="en-us" rel="nofollow" target="_self"
href="https://www.mywebpage.com">my web page</a></p>
<button onclick="getAttributes()">Click here to get attributes value</button>
</body></html>

4- Write a JavaScript function to add rows to a table.

<!DOCTYPE html>
<html><head><meta charset=utf-8 />
<title>Insert row in a table </title>
</head><body>
<table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input type="button" onclick="insert_Row()" value="Insert row">
</body></html>

5- Write a JavaScript function to create a table, accept row and column


numbers, and input row-column numbers as cell content (e.g. Row-0
Column-0).
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
<style type="text/css">
body {margin: 30px;}
</style>
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>

6- Write a JavaScript program to count and display dropdown list items in an


alert window.

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<style type="text/css">
body {margin: 30px;}
</style>
<title>Count and display items of a dropdown list - w3resource</title>
</head><body><form>
Select your favorite Color :
<select id="mySelect">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>White</option>
</select>
<input type="button" onclick="getOptions()" value="Count and Output all items">
</form>
</body>
</html>

7- Create a form as shown in the figure and write a JavaScript program to


calculate sphere volume.

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