JavaScript code with HTML document. Yes, We can write JavaScript code in between the HTML documents by using <script></script> tag. Also, JavaScript allows us to write HTML code.

In this JavaScript tutorial, I Will focus to write JavaScript code with HTML documents. As we have studied earlier HTML specifies the content of webpages, CSS specifies the presentation of webpages, and JavaScript specifies the behavior of web pages. Let us understand Embedding JavaScript in the HTML document.

JavaScript with HTML Document

There is two way to write JavaScript code into HTML documents 1) By using Script Tag 2) By using external files.

Script Tag

JavaScript is a client-side scripting language that can be written inside the <script> tag of the HTML document.

It is placed within opening <script> tag and closing </script> of HTML tag in a webpage.
The src Attributes of the HTML document also embeds the JavaScript file.
HTML 4 requires type attribute to find the language embedded with script tag for eg: <script type=”text/javascript”> but HTML 5 is a default scripting language and does not requires type attribute.

Example:

<!DOCTYPE html>
<html>
<body>
<h2> Example of script tag </h2>
<p id="sample"></p>
<script>
document.getElementById("sample").innerHTML = "demo JavaScript code";
</script>

</body>
</html>

OUTPUT:

Script tag into HTML <head> tag and <body> tag

Scripts can be placed inside the body or the head section of an HTML document or inside both head and body tags.

<head> tag

Example – Embedding JavaScript in HTML <head > tag with the use of <script> tag.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function dec() { 
document.getElementById("sample").innerHTML = "CODEDEC WEBSITE"; 
} 
</script> 
</head> 
<body> 
<h2>Example of JS in head tag</h2> 
<p id="sample" style="color:#b48484;">codedec.</p> 
<button type="button" onclick="dec()">TAB</button> 
</body> 
</html>

OUTPUT:
before clicking the tab button.

After clicking the tab button.

<body> tag

Example – Embedding JavaScript in HTML <body > tag with the use of <script> tag.

<!DOCTYPE html> 
<html> 
<body> 
<h2>Example of JS in body tag</h2> 
<p id="sample">codedec.</p> 
<button type="button" onclick="dec()">click</button> 
<script> 
function dec() { 
document.getElementById("sample").innerHTML = "CODEDEC WEBSITE"; 
} 
</script> 
</body>  
</html>

OUTPUT:
before clicking the button

After clicking the button.

External JavaScript File

JavaScript code can also be written in a separate External file and saved with the .js extension.

It is embedded in a web page using <script> tag and in reference the file using src attribute. for eg: <script src=”/PathofdemoJSfile.js”></script>.
A single JavaScript file can be included several times in the <head> or <body> tag of HTML document which provides reusability of the code.
The external file of the JavaScript cannot contain a script tag.

Example
External JavaScript file with function.

function demoFunction() {
  document.getElementById("sample").innerHTML = "Website for learning programming language.";
}

Embedding the JavaScript File into the HTML Document.

<!DOCTYPE html>
<html>
<body>
<h2>Example of External JS file.</h2>
<p id="sample">CODEDEC.</p>
<button type="button" onclick="demoFunction()">CLICK</button>
<p>javascript function used in the External file  "firstdemo.js"</p>
<script src="/home/aman/Desktop/codedecjavascript/firstdemo.js"></script>
</body>
</html>

OUTPUT:
before clicking the tab button.