Posted by
Zhullyblog
on
- Get link
- X
- Other Apps
Where to place JavaScript in HTML document
Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.
JavaScript placement- Where to place JavaScript in HTML
In the previous tutorial, we treated the JavaScript syntax. So in this tutorial, we would learn about JavaScript placement- Where to place JavaScript in HTML code.
When building a webpage, JavaScript needs to run along with HTML document. And this will make sense if the <script> tag is placed within the HTML document.
This tutorial will walk you through how to place JavaScript in HTML document. Stay tuned.
You can place your JavaScript code in any part of your HTML code. You can decide to place JavaScript code
• Within the <head> ....</head> tag
• Within the <body> .....</body> tag
• Both in <head> and <body> tag
• As as external file and link it in <head>...</head> tag.
Now, let's go into details.
JavaScript within <head>....</head> tag
JavaScript code can be written within the head tag section. Well , JS code is best to be placed within the <head> tag when you want user to click on a button.Click here to see tutorial on head tag
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
<script type="text/javascript">
document.write("Hello World")
</script>
</head>
<p> Do you get this now.</p>
</html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
<script type="text/javascript">
document.write("Hello World")
</script>
</head>
<p> Do you get this now.</p>
</html>
JavaScript within the <body>....</body> tag
JS code can also be written within the body section. But it is best to place JS code in the body section when you want the script to load immediately the page loads.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
</head>
<p> Do you get this now.</p>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
</body>
</html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
</head>
<p> Do you get this now.</p>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
</body>
</html>
JavaScript within the <body> and <head> section
This sounds weird but you can place JavaScript code in the <head> and <body> section together.
This is how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
<script type="text/javascript">
document.write("Hello World")
</script>
</head>
<p> Do you get this now.</p>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
</body>
</html>
JavaScript as an external file.
You can have a separate JavaScript code on a separate page and then link it to your HTML document. This works This works the same way we add CSS file in HTML document. This means that you would have created a separate file containing your JavaScript code, saved it with .js extension then include/link it within your HTML file.This works the same way you link CSS code in HTML. But please take note that the external JavaScript file is placed within the head tag.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Adding JavaScript to HTML</title>
<script type="text/javascript" src="filename.js">
</script>
</head>
<body>
</body>
</html>
Please share
JavaScript Syntax
JavaScript Variables
JavaScript Strings: How to create and manipulate
JavaScript If, If else, If else if statement
JavaScript Function: How to define and call a function
How to generate output in JS
JavaScript Switch case
Comments
Post a Comment