Using JavaScript

<script> tag

In HTML, JavaScript code must be placed within <script> with </script> between tags.

Example

<script>
document.getElementById("demo").innerHTML = "My first JavaScript code";
</script>

try it yourself

Note:Old JavaScript examples may use type attribute: <script type="text/javascript">.

Note:The type attribute is not required. JavaScript is the default script language in HTML.

JavaScript Functions and Events

JavaScript functionis a block of JavaScript code that can be executed when called.

For example, wheneventto call the function, such as when the user clicks a button.

Tip:You will learn more about functions and events in the following chapters.

JavaScript in the

You can place any number of scripts in the HTML document.

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

JavaScript part in the

In this example, the JavaScript function is placed in the <head> part.

This function will be called when the button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "The paragraph has been changed.";
}
</script>
</head>
<body>
<h1>A web page</h1>
<p id="demo">A paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

try it yourself

JavaScript in the

In this example, the JavaScript function is placed in the <body> part.

This function will be called when the 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 = "The paragraph has been changed.";
}
</script>
</body>
</html>

try it yourself

Tip:Place the script in <body> at the bottom of the element, which can improve the display speed because script compilation will slow down the display.

External script

The script can be placed in the external file:

External file: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "The paragraph has been changed.";
}

External scripts are very useful if the same script is used on many different web pages.

The file extension of JavaScript files is .js.

If you want to use an external script, please <script> attribute of the src (source) attribute:

Example

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

try it yourself

You can set the script name in the <head> or <body> External script references are placed in the middle.

The performance of this script depends on where it is placed <script> The same is true in the tag.

Note:External scripts cannot contain <script> Tags.

Advantages of External JavaScript

Placing scripts in external files has the following advantages:

  • Separates HTML and code
  • Make HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can accelerate page loading

To add multiple script files to a page - use multiple script tags:

Example

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

External References

External scripts can be referenced via a full URL or a path relative to the current web page:

This example uses a full URL to link to the script:

Example

<script src="https://www.codew3c.com/js/myScript1.js"></script>

try it yourself

This example uses a script located in the specified folder on the current website:

Example

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

try it yourself

This example links to a script in the same folder as the current page:

Example

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

try it yourself

You can HTML File PathLearn more about file paths here.