JavaScript Where to Put
JavaScript Where to Put. HTML script element offer to write JavaScript between opening <script> tag and closing </script> tag. You can put JavaScript head or body section. Also you can write JavaScript external .js extension file.
Before we going ahead, let's know JavaScript where to write.
In JavaScript Introduction lesson we referred to a in-line JavaScript code. It's ok for a beginner but when the page content is largest It's hard to maintain JavaScript mixed with HTML. And page content become follow the worst coding standard.
Instead of this in-line JavaScript, We should write JavaScript into separated section or separated file. You can write JavaScript,
- In-line JavaScript
- JavaScript place on <body> tag
- JavaScript place on <head> tag
- External JavaScript
- Test on Console Panel (Browser Developer Tools)
As per HTML specification type attribute must be specify with valid value "text/javascript".
Syntax
<script type="text/javascript">
JavaScript code write on here....
</script>
In-line JavaScript
You can write inline JavaScript statements for all HTML events.
<p id="text">Click to change Text Message....:)</p>
<button type="button"
onclick="document.getElementById("text").innerHTML = "Hello World!";">Change Text</button>
JavaScript place on <body> tag
You can write JavaScript directly body section inside opening <script> tag or closing </script> tag.
Put JavaScript code at end of the body section is improve the page loading speed, Because HTML content loading is not blocking JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript place on body tag</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!");
document.write("<h2> Hello World! </h2>");
</script>
</body>
</html>
JavaScript place on <head> tag
JavaScript write on head section inside opening <script> tag or closing </script> tag.
Sometimes page content depend on this JavaScript code. So we need to load JavaScript code before the Body Section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript place on head tag</title>
<script type="text/javascript">
function user_fun() {
document.getElementById("text").innerHTML = "Hello World!";
}
</script>
</head>
<body>
<p id="text">Click to change Text Message....:)</p>
<button type="button"
onclick="user_fun();">Change Text</button>
</body>
</html>
External JavaScript
You can write JavaScript code on external file with .js extension. And linked with the main documents.
Benefit of external JavaScript file you can linked multiple document, when you edit JavaScript file effect to all linked document.
Using "src" attributes to find relative path of external .js file.
function user_fun() {
document.getElementById('text').innerHTML = 'Hello World!';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External JavaScript</title>
<script type="text/javascript" src="external_script.js"></script>
</head>
<body>
<p id="text">Click to change Text Message....:)</p>
<button type="button"
onclick="user_fun();">Change Text</button>
</body>
</html>
Test on Console Panel (Browser Developer Tools)
You can test JavaScript statement on console panel and return the output. Also console.log() method to print the values on console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Result view on Console Panel</title>
</head>
<body>
<script type="text/javascript">
console.log("Hello World....!");
var sum = 5 + 10;
console.log("Sum of two number: " + sum);
</script>
</body>
</html>
View Result: Open Console Panel (In Browser, press F12)
Console Panel - Google Chrome
