Related Topics
HTML
Data Structure
JAVASCRIPT
<title>Dynamic Web Page</title>
<h1 id="greeting">Hello, World!</h1>
<button>Change Greeting</button>
JavaScript (script.js):
function changeGreeting() {
var greetingElement = document.getElementById("greeting");
greetingElement.textContent = "Welcome to the Dynamic Web Page!";
}
In this example, we have an HTML page with a heading element (<h1>) displaying the greeting “Hello, World!” and a button element. When the button is clicked, the JavaScript function changeGreeting() is executed.
The JavaScript code retrieves the element with the id “greeting” using document.getElementById(). It then updates the text content of the element using the textContent property. In this case, the greeting is changed to “Welcome to the Dynamic Web Page!”.
When the button is clicked, the JavaScript code dynamically modifies the HTML element, and the updated text is immediately reflected on the web page without the need for a page refresh.
This is just a simple example, but JavaScript can be used to perform more complex updates, such as manipulating multiple elements, changing styles, making AJAX requests to fetch and display data from a server, and much more.
<title>JavaScript in HTML</title>
// Inline JavaScript code
function greet() {
console.log('Hello, world!');
}
greet();
<!-- HTML content -->
External JavaScript File: You can also include an external JavaScript file by linking it in the HTML file using the
<script>tag’ssrcattribute. Create a separate.jsfile and specify its path using thesrcattribute. For example:
<title>JavaScript in HTML</title>
<!-- HTML content -->
JavaScript (script.js):
// External JavaScript code
function greet() {
console.log('Hello, world!');
}
greet();
Make sure the src attribute value points to the correct location of the JavaScript file.
Asynchronous Loading: If you want to load JavaScript asynchronously to improve page loading performance, you can use the
asyncordeferattribute with the<script>tag.
<script async src="script.js"></script>: The script is fetched asynchronously while the HTML parsing continues. Once the script is fetched, it is executed immediately. This can be useful for scripts that don’t depend on the DOM.<script defer src="script.js"></script>: The script is fetched asynchronously but is executed only after the HTML parsing is complete. This is useful when the script depends on the DOM or requires a specific order of execution.
Remember to place the <script> tag appropriately in the HTML document, depending on when you want the JavaScript code to be executed.
By using these methods, you can effectively include JavaScript code in an HTML file and make it executable within a web page.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.