JavaScript användning

<script>-etikett

I HTML måste JavaScript-koden finnas i <script> med </script> mellom etiketterna.

Example

<script>
document.getElementById("demo").innerHTML = "min första JavaScript-sektion";
</script>

try it yourself

Note:旧的 JavaScript 例子也许会使用 Old JavaScript examples may use type

Note:Attribute: <script type="text/javascript">.

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

JavaScript functions and events JavaScriptFunction

It is a JavaScript code block that can be executed when called.For example, whenEvent

Tip:When calling a function, such as when a user clicks a button.

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

<head> or <body> JavaScript

You can place any number of scripts in the HTML document. <body> or <head> The script can be placed in the

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 external scripts, 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> to place external script references.

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

Note:External scripts cannot contain <script> tags.

Advantages of external JavaScript

The following are advantages of placing scripts in external files:

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

If you need to add multiple script files to a page - use multiple script tags:

Example

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

External reference

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