How to link js to html

❮ HTML <script> tag

Nội dung chính Show

Definition and Usage
Browser Support
Attribute Values
The <script> Tag
JavaScript Functions and Events
JavaScript in <head> or <body>
JavaScript in <head>
JavaScript in <body>
External JavaScript
External file: myScript.js
External JavaScript Advantages
External References
How do I link JavaScript to my HTML?
How does JS interact with HTML?
Can JavaScript write to an HTML file?

Example

Point to an external JavaScript file:

Try it Yourself »

Definition and Usage

The src attribute specifies the URL of an external script file.

If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.

Note: The external script file cannot contain the <script> tag.

Note: Point to the external script file exactly where you would have written the script.

Browser Support

Attribute
src	Yes	Yes	Yes	Yes	Yes

Syntax

Attribute Values

Value	Description
URL	The URL of the external script file. Possible values: An absolute URL - points to another web site (like src="http://www.example.com/example.js") A relative URL - points to a file within a web site (like src="/scripts/example.js")

❮ HTML <script> tag

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example

Try it Yourself »

Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "called" for.

For example, a function can be called when an event occurs, like when the user clicks a button.

You will learn much more about functions and events in later chapters.

JavaScript 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.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Try it Yourself »

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

</body>
</html>

Try it Yourself »

Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display.

External JavaScript

Scripts can also be placed in external files:

External file: myScript.js

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External scripts are practical when the same code is used in many different web pages.

JavaScript 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:

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

External scripts cannot contain <script> tags.

External JavaScript 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

External References

An external script can be referenced in 3 different ways:

With a full URL (a full web address)
With a file path (like /js/)
Without any path

This example uses a full URL to link to myScript.js:

Example

Try it Yourself »

This example uses a file path to link to myScript.js:

This example uses no path to link to myScript.js:

You can read more about file paths in the chapter HTML File Paths.

How do I link JavaScript to my HTML?

Adding JavaScript into an HTML Document You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.

How does JS interact with HTML?

javascript is embedded into html with script tags. if you open a raw javascript file the browser won't execute it, it will just show the code. ... .

HTML provides structure and semantics like XML, CSS provides presentation, colors, fonts etc..

Can JavaScript write to an HTML file?

JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write() . Writing into an alert box, using window.alert() .