Play Store Application link – Java to JavaScript in 13 Steps – App on Google Play
DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. JavaScript can access and modify the DOM of a page using the Document object.
DOM Manipulation:
DOM manipulation involves creating, modifying, and deleting HTML elements on a web page dynamically using JavaScript. This is similar to working with collections and objects in core Java.
- Core Java Comparison: Think of the DOM as a data structure like a
HashMapin core Java, where you can dynamically add, modify, or remove entries. Just as you might use methods likeput()andremove()with aHashMap, you use JavaScript methods to manipulate the DOM.
Example Program:
Adding a new element to the DOM:
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<script>
function addElement() {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello, World!");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
</script>
</head>
<body>
<button onclick="addElement()">Add Element</button>
</body>
</html>
Events:
Events are user interactions or system notifications that occur on a web page, such as clicks, key presses, or page loading. JavaScript can listen to and respond to these events using event handlers.
- Core Java Comparison: Handling events in JavaScript is like using event listeners in core Java, such as implementing
ActionListenerfor a button click. Instead of registering an action listener on a button in a GUI, you use event listeners to handle actions in the web environment.
Example Programs:
Responding to a click event:
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="handleClick()">Click me</button>
</body>
</html>
Responding to a key press event:
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<script>
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
alert("Enter key pressed!");
}
});
</script>
</head>
<body>
<p>Press the Enter key.</p>
</body>
</html>
To run these programs in Visual Studio Code, save them with a .html extension and open them in a web browser. Alternatively, you can install the Live Server extension in Visual Studio Code and run them using the Live Server feature.
Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.
Your article helped me a lot, is there any more related content? Thanks!