HTML is a markup language used to describe the structure and content of web pages, while JavaScript is a scripting language used to add dynamic functionality to web pages and applications. By integrating HTML and JavaScript, you can add dynamic features to web pages.
Below are the basic methods to integrate HTML and JavaScript:
Using the script tag
To write JavaScript code in an HTML file, you can use the script tag. The script tag can be inserted into an HTML file like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<script>
// JavaScript code goes here
</script>
</body>
</html>Loading an external file
In addition to directly writing JavaScript code in the script tag, you can also load JavaScript code from an external file. Use the src attribute to specify the external file, like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>In this example, the file named "script.js" in the same directory as the HTML file is loaded. This file should contain JavaScript code.
Adding event handling
Using JavaScript, you can respond to user actions, such as clicking a button or entering text in a form, and perform actions on the web page. This is known as event handling. You can add event listeners to HTML elements to implement event handling, like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<button onclick="alert('Hello, World!');">Click me</button>
</body>
</html>In this example, when the button is clicked, an alert message will be displayed.