HTML JavaScript integration allows dynamic functionality and interactivity on web pages. JavaScript code can be embedded directly within HTML using the <script> tag or linked as an external file. Inline scripts are placed between <script> tags, while external scripts use the src attribute to link to a separate JavaScript file. JavaScript can manipulate the DOM, handle events, and perform complex calculations to enhance user experience.
Examples:
<!-- Inline JavaScript -->
<script> document.write('Hello, world!');</script>
<!-- External JavaScript -->
<script src="script.js"></script>
<!-- Example of JavaScript modifying an HTML element -->
<script>
function changeText() {
document.getElementById('myText').innerHTML = 'Text changed!';
}
</script>
<button onclick="changeText()">Change Text</button>
<p id="myText">Original Text</p>
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
</head>
<body>
<h1>HTML JavaScript</h1>
<p>JavaScript can be used to make web pages interactive.</p>
<pre>
<!-- Inline JavaScript -->
<script> document.write('Hello, world!');</script>
<!-- External JavaScript -->
<script src="script.js"></script>
<!-- Example of JavaScript modifying an HTML element -->
<script>
function changeText() { document.getElementById('myText').innerHTML = 'Text changed!';}
</script>
<button onclick="changeText()">Change Text</button>
<p id="myText">Original Text</p>
<button onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'">
Click me
</button>
<p id="demo"></p>
</pre>
</body>
</html>
The Output of the above code:
HTML JavaScript
JavaScript can be used to make web pages interactive.
Original Text
<button onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'">
Click me
</button>
<p id="demo"></p>