JavaScript Tutorial

JS Writing Code

Learn how to write JavaScript code inside HTML pages, in script tags, or in external .js files. This lesson explains the basic structure, placement, and execution of JavaScript code.

Writing Javascript Code

JavaScript codes should be written inside the <script> element.

But where should we put the <script> element?

Internal JavaScript

The <script> element can either be placed in the <head>, in the <body> or both. JavaScript in the <head>

In this example, <script> is inside the <head> element.

It is recommended to put the <script> before the </head> closing tag.

Note: Always place scripts at the bottom of <body> for better performance

Use external files for large applications

Use meaningful variable and function names

Comments help maintain code

The browser stops executing code where it finds errors

<script>
		document.write("Hello World!");
</script>

But where should we put the <script> element?

Internal JavaScript

The <script> element can either be placed in the <head>, in the <body> or both.

JavaScript in the <head>

In this example, <script> is inside the <head> element.
It is recommended to put the <script> before the </head> closing tag.

Internal JavaScript Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>

   <script type="text/javascript">
      function myFunc() {
         document.getElementById("demo").innerHTML = "Hello Everyone!";
      }
   </script>
</head>
<body>
   <p id="demo"> Hello World! </p>
   <button type="button" onclick="myFunc()"> Change Value </button>
</body>
</html>

JavaScript in the <body>

In this example, <script> is inside the <body> element.
It is recommended to put the <script> before the </body> closing tag.

inside the body Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo"> Hello World! </p>
   <button type="button" onclick="myFunc()"> Change Value </button>

   <script type="text/javascript">
      function myFunc() {
         document.getElementById("demo").innerHTML = "Hello Everyone!";
      }
   </script>
</body>
</html>

Should you put your <script> inside the <head> or the <body> ?

What's the difference?

When the <script> is inside the <head>, it loads first before the content of the page. When it's inside the <body>, it loads after the content of the page (HTML elements) loads. In this example, when the button is clicked the content of the <p> element changes. However, this would not work because the event listener loaded first before the HTML element. For now, you can ignore how event listener works. Just focus on the placement of the script.

Onclick Change element

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>

   <script type="text/javascript">
      document.getElementById("btn").addEventListener("click", function() {
         document.getElementById("demo").innerHTML = "Hello Everyone!";
      });
   </script>
</head>
<body>
   <p> This would not work because the event listener loaded first before the HTML element. </p>
   <p id="demo"> Hello World! </p>
   <button id="btn"> Change Value </button>
</body>
</html>

If we put the <script> before the </body> closing tag.
Everything should work, because the HTML element loads first before the event listener.

Example: Script Before body

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>

</head>
<body>
   <p id="demo"> Hello World! </p>
   <button id="btn"> Change Value </button>

   <script type="text/javascript">
      document.getElementById("btn").addEventListener("click", function() {
         document.getElementById("demo").innerHTML = "Hello Everyone!";
      });
   </script>
</body>
</html>

It is recommended to put the <script> tag in the body when using internal JavaScript. We will put our example codes in the body for most of the examples throughout the course.

External JavaScript

JavaScript can also be placed in external files.
JavaScript files have the file name extension of .js e.g. script.js.
Using external script files is beneficial when multiple web pages use the same script.
It also organizes codes and help maintain readability as JavaScript is separated from HTML. Here is an example:

External JavaScript Example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
   <script src="script.js"></script>
</head>
<body>
   <p id="demo"> Hello World! </p>
   <button type="button" onclick="myFunc()"> Change Value </button>
</body>
</html>

The script.js file contains the following code:

function myFunc() {
	document.getElementById("demo").innerHTML = "Hello Everyone!";
}

In our example above, the external script is located in the same folder as the current HTML document. We can also put it on other locations.
In this example the external script is located inside the js folder.
The js folder is located in the same folder as the current HTML page.

<script src="js/script.js"></script>

In this example the external script is located inside the js folder.
The js folder is located in the root directory of http://www.example.com.

<script src="http://www.example.com/js/script.js"></script>

Using an External Script File

EXAMPLE play_arrow Run Code

function myFunc() {
	document.getElementById("demo").innerHTML = "Hello Everyone!";
}

Explanation:

As you may notice, we have put the external script in the <head>
However, external JavaScript files can be placed in the same spots as with internal JavaScript.

Explanation

The example shows different ways to write JavaScript.

JavaScript inside <script> tags creates functions and interacts with HTML elements.

The changeText() function updates the page when you click the button.

external.js demonstrates how to load external JavaScript files.
This structure is commonly used in real-world web development.

chevron_left JS Introduction JS Displaying Output chevron_right