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>
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>
External Javascript
External javascript code is written in the external file with .js extension and it is linked to the page 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>External Javascript</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>
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>
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>
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>
Web Tutorials
