Introduction to JavaScript - Location

» JavaScript Basics » Introduction to JavaScript - Location

First thing first. Before you start writing Javascript code, you have to know that you can place the script in three different locations.

Inside the head section. This is internal Javascript.
Inside the body section. This is also internal javascript.
There are also some special cases where you can insert Javascript inline, but this is not recommended.
External .js file in the head section
External .js file in the body. Ideally you can place it the footer section of the body

Javascript internal script

Internal Javascript is largely used by the Javascript programming community

Javascript inside head section

One of the places where you can put your Javascript is in the head section of your HTML document. Here is a simple example about how you can accomplish this:

JavaScript<html>
	<head>

		<script>
			// JavaScript code
		</script>

	</head>

	<body></body>
</html>

Javascript inside body section

Javascript is a very versatile tool out there and it allows you to place the script anywhere you like. It is up to you to decide where depending on your needs.

JavaScript<html>
	<head></head>
	<body>
		<script>
			// JavaScript code
		</script>
	</body>
</html>

Where exactly in the body should I place my Javascript?

Well, this is a good question. And the answer is: Depends.

There are times that you need to do some Javascript process before printing something to the user, and you need the Javascript snippet before the HTML element. On the other hand, you can print the HTML document and then modify its content. This allows you to place the JavaScript in the page footer, just before the end of the body tag.

You have to know that reading and interpreting the Javascript code, takes time. So if you have to place the code inside the document, it is a good practice to place it in the footer so you can save loading speed.

Inline Javascript

JavaScript<a href="#" onclick="(function(){ alert('It\'s alive!!');})()">Click Me</a>

Demo

Click Me

External Javascript inside head section

Another way to insert Javascript code into a document is to wrap it up into a separate .js document. This way you can separate processing from the document markup

Insert Javascript in head section

Javascript files can be inserted in the head section of the document, like this.

JavaScript<html>
	<head>
		<script src="../path/to/file.js"></script>
	</head>

	<body></body>
</html>

Insert Javascript in body section

Alternatively you can load your .js files in the body section. ideally just before the closing body tag. This way you render all HTML document before start processing the Javascript code.

JavaScript<html>
	<head></head>

	<body>
		.......
		<script src="../path/to/file.js"></script>
	</body>
</html>

This is a good practice if you want to save page loading speed.

Javascript best practices

JavaScript is often placed inline with the HTML document markup. For example, this is a typical way to bind JavaScript events to an HTML tag:

JavaScript<input type="text" name="email" onchange="checkAEmail()" />

Today this is known as a "not so good practice". There is a generally accepted opinion that you should separate the HTML markup structure from the processing part. Take a look at this next example of how we could implement this concept.

JavaScript<input type="text" name="email" id="email" />

<script>
	window.addEventListener("DOMContentLoaded", function(event) {
	    document.getElementById('email').addEventListener("change", validateEmail);
	});
</script>

If you are interested in further reading about this subject, there is a good article located at the Wikipedia website, here: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

What about type=text/javascript?

In the early years of JavaScript you needed to set a type attribute for the script tag, like this:

JavaScript<script type="text/javascript"></script>

Nowadays, the type="text/javascript" is the default value for the script tag. So nothing happens if you use it, but you must know that it is not required any more.

Introduction to JavaScript - Learn JavaScript

Introduction to PHP - Learn PHP