1. Home
  2. Docs
  3. Scripting Language
  4. Client Side Scripting
  5. Embedding JavaScript in HTML

Embedding JavaScript in HTML

Table of Contents

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

Was this article helpful to you? Yes No

How can we help?