JavaScript is applied to your HTML page in 3 different ways
- Inline
- Internal
- External
Inline
When the JavaScript is written within the html element using attributes related to events of that element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<input type="button" value="Click me" id="add" onclick="alert('See the click event has triggered')">
</form>
</body>
</html>
Output
Internal
When the JavaScript is written within the script element anywhere in the HTML document, it is an internal JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
<script>
document.write('<h1>What a wonderful day</h1>')
</script>
</html>
Output
External
When the JavaScript is written in a separate file and then linked to the html, it is known as External JavaScript.
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
<script src="abc.js"></script>
</html>
JavaScript File
document.write('<h1>What a wonderful day</h1>');
Output