Internal Javascript And External Javascript

Javascript code can be written inside the webpage in three ways namely internal Javascript, external Javascript, and inline Javascript. internal javascript code is written inside head or body using <script> tag while external Javascript is written in the external file with .js extension.

Internal Javascript

Internal javascript code is written either inside head or body using <script> tag.

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Internal And External javascript</title>
</head>
<body>
<script type="text/javascript">
  document.write("This is an internal javascript example.!!!");
</script>
</body>
</html>          
        
Try it now

You can write javascript code inside the <body> section like this:

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Javascript Code In The Body Section</title>
</head>
<body>
    <h1>Javascript Code In The Body Section</h1>
<script type="text/javascript">
  document.write("This is Internal Javascript Example.!!!");
</script> 
</body>
</html>          
        
Try it now

External Javascript

External javascript code is written in the external file with .js extension and it is linked to the page using <script> tag.

General Syntax
      
    
Try it now

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>External Javascript</title>
	 <script type="text/javascript" src="external.js"></script>
</head>
<body>
	
</body>
</html>          
        
Try it now

Inline Javascript

An Inline javascript code is written inside the HTML tags. But this is not recommended way due to taking a long time to search and edit the code hence writing javascript code either in external or internal style.

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Inline Javascript</title>
    <style type="text/css">
      button{
         background-color:black;
         padding:10px 15px;
         color:white;
         border:none;
         }
      </style>  
      </head>
<body>
	<h2>Inline  Javascript </h2>
     <button onclick="alert('Hello javascript.')">Click To See The Inline Javascript</button> 
</body>
</html>          
        
Try it now

Web Page Performance Regarding Javascript Code

Javascript can be placed on both the head or body tags of our HTML Page using <script> the tag. When Webpage loads, script code executes and can slow down page speed.

Placing Javascript Inside The Head Section

Write JavaScript coding inside the <head>, if you want to execute the Javascript script first.

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Placing Javascript Code Inside The Head Section</title>
    <script >

	// Write Script here

   </script>
</head>
<body>
	   // body content
</body>
</html>          
        
Try it now

Placing Javascript Inside <body> Section

In this case, DOM contents load first, and then scripts will execute, and hence optimize webpage performance.

Source Code

          
            <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Javascript Code Placing Inside Body Section</title>
</head>
<body>

// write your content here

<script type="text/javascript">
// Write Script here
</script>

</body>
</html>          
        
Try it now

Web Tutorials

Internal Javascript And External Javascript
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4