English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In this chapter, you will learn how to integrate JavaScript into your web pages.
There are usually three methods to add JavaScript to a webpage:
You can<script>and</script>Insert JavaScript code between tags
Usingevent attributes (For example, onclick, onkeypress, etc., you can directly place JavaScript code inside HTML tags
Create an external JavaScript file and then load it through<script>the src attribute of the tag to load it into the page
In HTML, you must place<script>and</script>Insert JavaScript code between tags.
<script>
document.write("Hello World");
</script>Test to see‹/›Note:Old JavaScript examples may use the type attribute: <script type="text/javascript">. Since HTML5Since, the type attribute is no longer needed. JavaScript is part of HTML5The default script language.
You can place any number of scripts in an HTML document.
scripts can be placed in the HTML page<head>or in the
In this example, the JavaScript function is placed in the<head>section.
The function will be called when the button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript in Head</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">This is a Paragraph</p>
</html>Test to see‹/›each<script>tags will block the page rendering process until it is completely downloaded and executed, so placing them at the beginning of the document without any legitimate reason will severely affect your website performance.
In this example, the JavaScript function is placed in thesection.
The function will be called when the button is clicked:
<!DOCTYPE html>
<html>
<h2>JavaScript in Body</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">This is a paragraph</p>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>Test to see‹/›Scripts should be placed at the end of the body section, next to</body>before the
You can also useevent attributes (For example, onclick, onkeypress, etc.) place JavaScript code directly inside HTML tags.
<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>Test to see‹/›
However, it should be avoided to inline a large amount of JavaScript code, because JavaScript can make HTML messy and make the JavaScript code difficult to maintain.
You can also put JavaScript code into a separate file with a .js extension, and then call the external JavaScript file through<script>of thesrcattribute to load it into the page.
The following example points to an external JavaScript file:
<script src="myscript.js"></script>Test to see‹/›
To add multiple script files to a page, use multiple script tags:
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
You can place an external script reference as needed<head>or<body>Place an external script reference.
The behavior of this script is as if it is exactly located<script>at the same position as the tag.
Note:External script files cannot contain<script>Markup.
Placing scripts in external files has some advantages:
It separates JavaScript from HTML
It makes HTML and JavaScript easy to read and maintain
Cached JavaScript files can speed up page loading
The same script can be used for multiple documents
TipGenerally, when an external JavaScript file is downloaded for the first time, it is stored in the browser's cache (like images and stylesheets), so it does not need to be downloaded multiple times from the web server that created the webpage. It loads faster.
You can use a full URL or a path relative to the current webpage to reference external scripts.
This example uses a full URL to link to the script:
<script src="https://www.oldtoolbag.com/run/js/myscript.js"></script>Test to see‹/›
This example uses a script located in the specified folder on the current website:
<script src="/run/js/myscript.js"></script>Test to see‹/›
You can find more information about file paths in “ HTML File Path For more information about file paths, see Chapter