JavaScript Where To Use ?
Java Script in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
The <script> Tag
HTML tags in a web page, JavaScript code must be inserted between <script> and </script> tags.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>Output:
Java Script in Body
Hello Java Script!
Note: Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required now. JavaScript is the default scripting language in HTML.
Java Script Functions and Events
A Java Script function is a block of JavaScript code, that can be executed when we "called" that function.
Take an example, a function can be called when an event occurs, like when the user clicks a button.
Java Script in <head> or <body>
A HTML document can be used to insert any number of scripts.
- Scripts can be placed in the <body>
- In the <head> section of an HTML page
- Or in both <body> and <head> section.
Java Script in <head>
In this given example, we placed Java Script function in the <head> section of an HTML page.
The defined function is invoked (or called) when a button is clicked:
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>Output:
Java Script in Head
A Paragraph.
Java Script in <body>
In given example, we placed Java Script function in the <body> section of an HTML page.
The defined function is invoked (or called) when a button is clicked:
Example:
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>Output:
A Web Page
A Paragraph
Note: We placing scripts at the bottom of the <body> element because it improves the display speed and script compilation slows down the display.
External JavaScript
We can also be placed scipts in external files:
External file: MyScriptFile.js
External scripts are practical used when the same code is used in many different web pages. Java Script files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="../../../Sources/js/MyScriptFile.js">
</script>
</body>
</html>Output:
External JavaScript
A Paragraph.
(Our Function is stored in an external file called "MyScriptFile.js")
Note: We can place an external script reference in <head> or <body> as we like.
The script will behave as if it was located exactly where the <script> tag is located.
External Java Script Advantages
Placing scripts in external files has some Advantages:
- It separates HTML and code
- It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads
- To add several script files to one page - use several script tags:
Example:
<script src="MyScriptFile1.js"></script>
<script src="MyScriptFile2.js"></script>
External References
External scripts can be referenced with a full URL or with a path relative to the current web page.
This given example uses a full URL to link to a script:
Example:
<script src="https://ukacademe.com/Sources/js/MyScriptFile.js"></script>
and this example uses a script located in a specified folder on the current web site:
<script src="../../../Sources/js/MyScriptFile.js">