Embedding JavaScript in HTML

How to embed JavaScript in HTML?

A web page cane be structured with the help of HTML and beautified with the help of CSS. By using HTML and CSS only, you can only structure your web page but cannot make calculations on your web page. In order to make your page calculative, you have to embed JavaScript in your code.

JavaScript provides many functionalities to your web page to make it interactive, fast, reliable and versatile. You will learn how easy it is to add interactivity to a web page using JavaScript. But before begin, make sure that you have working knowledge of HTML and CSS.

You can place any number of scripts in an HTML document. These scripts can be placed within <body> and <head> tag of an HTML document.

Adding JavaScript to your web page

There are three ways to add JavaScript in your HTML page.

  1. Adding JavaScript code between a pair of <script> and </script>.
  2. Creating an external JavaScript file with the .js extension and then load it within the page through the src attribute of the <script> tag.
  3. Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclickonmouseoveronkeypressonload, etc.

Let us now describe above ways to embed code in HTML

Embedding JavaScript directly

You can place your JavaScript code directly in your web page by placing it within <script> and </script> tags. Let us write a code to embed JavaScript code in an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var welcome = "Hello World! Welcome to programming tutorial";
    document.write(welcome); 
    </script>
</body>
</html>
embedding javascript

External JavaScript file

You can write your JavaScript code in a separate file having extension .js which can be added to an HTML file by calling external JavaScript file with the help of src attribute of script tag. This is useful if you want the same scripts available to multiple documents. It saves you from repeating the same task over and over again, and makes your website much easier to maintain. Let us save external file as embed.js which will be linked in main file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding External JavaScript File</title>        
</head>
<body>    
    <script src="embed.js"></script>  
    <button type="button" onclick="runfunc();">Click Me</button>   
</body>
</html>

External JavaScript file

function runfunc() {
    alert("Hello World! Welcome to Programming Tutorial");
}
external javascript
www.programmingtutorial.in

Adding inline JavaScript

You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

However, you should avoid placing large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your JavaScript code difficult to maintain. Example shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Welcome to programming tutorial')">Click Me</button>
</body>
</html>
inline javascript
www.programmingtutorial.in