Scribd
Upload
13 views6 pages

Practical 4

Uploaded by

harshitsingh1930
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
13 views6 pages

Practical 4

Uploaded by

harshitsingh1930
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/ 6

Practical 4

Write JavaScript functions and control the different components of Web page by
predefined JavaScript objects.
JavaScript provides predefined objects and functions that allow us to control different components of
a web page dynamically. These predefined objects interact with the Document Object Model (DOM),
enabling us to manipulate HTML and CSS elements based on user interaction or certain conditions.

1. Changing HTML Content Using JavaScript Functions

To modify text or HTML content on a web page, we can use methods provided by the document
object.

Example: Changing Text Content with innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Text Example</title>
</head>
<body>
<h1 id="mainHeading">Welcome to My Web Page</h1>
<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
document.getElementById("mainHeading").innerHTML = "Hello, JavaScript!";
}
</script>
</body>
</html>

In this example, clicking the button triggers the changeText() function, which changes the heading text
to "Hello, JavaScript!" using the innerHTML property.

2. Modifying CSS Styles

JavaScript allows to control CSS styles using the style property on DOM elements.

Example: Changing Styles Dynamically

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Style Example</title>
</head>
<body>
<p id="paragraph">This is a sample paragraph.</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
let paragraph = document.getElementById("paragraph");
paragraph.style.color = "blue";
paragraph.style.fontSize = "20px";
paragraph.style.fontWeight = "bold";
}
</script>
</body>
</html>

In this example, the changeStyle() function changes the text color, font size, and font weight of the
paragraph when the button is clicked.

3. Using Predefined Event Objects

JavaScript has event objects, like onclick, onmouseover, and onmouseout, which can trigger specific
functions based on user interaction.

Example: Changing Background Color on Hover

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Example</title>
</head>
<body>
<button onmouseover="changeColor()" onmouseout="resetColor()">Hover Over Me</button>

<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}

function resetColor() {
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>

Here, the background color of the page changes to light blue when hovering over the button and resets
when the mouse leaves the button.

4. Working with Forms Using JavaScript Functions

JavaScript can interact with form elements, making it possible to validate inputs, change
values, and process data dynamically.
Example: Basic Form Validation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
<p id="errorMsg" style="color: red;"></p>

<script>
function validateForm() {
let name = document.getElementById("name").value;
let errorMsg = document.getElementById("errorMsg");

if (name === "") {


errorMsg.innerHTML = "Name cannot be empty!";
return false;
} else {
errorMsg.innerHTML = "";
return true;
}
}
</script>
</body>
</html>

In this example, the validateForm() function checks if the input is empty when the form is submitted.
If it is, an error message is displayed, and the form is not submitted.

5. Manipulating Attributes of HTML Elements

JavaScript allows to dynamically set or modify attributes of HTML elements, such as src for
images or href for links.

Example: Changing Image Source Dynamically

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Image Example</title>
</head>
<body>
<img id="image" src="image1.jpg" alt="Image" width="200">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
let image = document.getElementById("image");
image.src = "image2.jpg"; // Replace with the new image source
}
</script>
</body>
</html>

In this example, the changeImage() function modifies the src attribute of an image when the button is
clicked, effectively changing the displayed image.

6. Show and Hide Elements

JavaScript allows to hide or display elements using the display CSS property.

Example: Toggling Visibility of Elements

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Visibility Example</title>
</head>
<body>
<p id="message">Hello, this is a toggled message!</p>
<button onclick="toggleMessage()">Toggle Message</button>

<script>
function toggleMessage() {
let message = document.getElementById("message");

if (message.style.display === "none") {


message.style.display = "block";
} else {
message.style.display = "none";
}
}
</script>
</body>
</html>

Here, the toggleMessage() function shows or hides the paragraph each time the button is clicked.

7. Adding and Removing Classes Dynamically

We can add or remove classes from elements to change their styling dynamically.

Example: Highlighting Text with Classes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Class Example</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text">This is a paragraph of text.</p>
<button onclick="toggleHighlight()">Highlight Text</button>

<script>
function toggleHighlight() {
let text = document.getElementById("text");
text.classList.toggle("highlight");
}
</script>
</body>
</html>

In this example, clicking the button will add or remove the highlight class from the paragraph, which
changes the text style based on the defined CSS.

8. Using JavaScript for Element Creation

JavaScript can also create new HTML elements dynamically.

Example: Adding a New List Item

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Element Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button onclick="addItem()">Add Item</button>

<script>
function addItem() {
let list = document.getElementById("myList");
let newItem = document.createElement("li");
newItem.textContent = "New Item";
list.appendChild(newItem);
}
</script>
</body>
</html>

In this example, clicking the button triggers the addItem() function, which creates a new list item and
adds it to the unordered list.

9. Removing Elements Dynamically

JavaScript also provides methods to remove elements from the DOM.

Example: Removing a Paragraph

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remove Element Example</title>
</head>
<body>
<p id="textToRemove">This is a removable paragraph.</p>
<button onclick="removeText()">Remove Text</button>

<script>
function removeText() {
let text = document.getElementById("textToRemove");
text.remove();
}
</script>
</body>
</html>

In this example, clicking the button removes the paragraph from the DOM.

You might also like