Home > Article > Web Front-end > How to call javascript externally
How to call javascript externally
- 王林Original
- 2023-05-09 09:01:361004browse
In modern web design, JavaScript has become an indispensable part. JavaScript can easily extend the functionality of web pages while also enhancing the user experience. Although JavaScript can be embedded directly in HTML, when you need to reuse the same JavaScript code in multiple web pages, it becomes very useful to encapsulate the JavaScript as a separate external file and call it externally.
This article will discuss how to call JavaScript code externally, including embedding it in HTML documents and linking to documents.
- Embedding JavaScript in HTML documents
The easiest way is to embed JavaScript code directly into the HTML document. You just need to write the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the head area or body area of the HTML and embed the JavaScript code directly into it.
For example, the following is a simple HTML document with JavaScript code embedded:
<!DOCTYPE html>
<html>
<head>
<title>嵌入JavaScript代码</title>
<script>
function sayHello() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">点击我</button>
</body>
</html>In this example, we define a simple function named sayHello(). It greets the user with an alert action. We call this function using the onclick event defined on the HTML button tag.
While this approach may be fine for small projects, in larger projects embedding all JavaScript code into the HTML document can make the code cluttered and difficult to maintain.
- Save JavaScript code as a separate external file
To solve this problem, we can save the JavaScript code as a separate external file. This approach makes the code clearer and easier to read and makes it easy to reuse the same code in different HTML documents. At the same time, since the browser caches external files, loading speeds will also become faster.
Here is a simple example: we save the JavaScript code in a file called myscript.js.
function sayHello() {
alert("Hello World!");
}We save the above code as myscript.js and then link it to our HTML document.
<!DOCTYPE html> <html> <head> <title>调用外部JavaScript文件</title> <script src="myscript.js"></script> </head> <body> <button onclick="sayHello()">点击我</button> </body> </html>
By using the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag and the src attribute, we can link the file myscript.js into the HTML document. In this way, we can call all functions and variables defined in the JavaScript file in the HTML document.
It is worth noting that when using external JavaScript files, you must ensure that the JavaScript files can be loaded correctly. If the file path is incorrect, the browser will not be able to find the file and the code in the JavaScript file will not be executed.
Another benefit of including external JavaScript files in HTML documents is that it makes the website easier to manage and maintain. When the JavaScript code needs to be updated, just change the code in the JavaScript file, and all HTML documents that use the file can be automatically updated.
- Defining multiple functions and variables in a JavaScript file
Generally speaking, a JavaScript file can contain a set of logically related functions and variables. This can help you organize your code better and make it usable in more application scenarios.
For example, the following is a file called myfunctions.js that contains multiple functions:
function addNumber(a, b) {
return a + b;
}
function subtractNumber(a, b) {
return a - b;
}
function divideNumber(a, b) {
return a / b;
}We introduce this JavaScript file into our HTML document:
<!DOCTYPE html> <html> <head> <title>在JavaScript文件中定义多个函数和变量</title> <script src="myfunctions.js"></script> </head> <body> <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p> <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p> <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p> </body> </html>
This example shows how to use multiple functions defined in myfunctions.js in multiple HTML documents. We can call these functions by calling functions in a script block.
- Using Asynchronous Loading of JavaScript
When we include a JavaScript file in an HTML document, the browser immediately starts loading the file and blocks the rendering of the page until the file is fully loaded Finish. This can cause pages to load slower.
To avoid this problem, we can use asynchronous loading of JavaScript. Specifically, we can place the download of JavaScript at the bottom of the HTML page and set the async attribute in the script tag to true. This will cause the browser to ignore the download of the JavaScript file until the page has finished loading and begins downloading the code.
For example, here is an HTML document for asynchronously loading a JavaScript file:
<!DOCTYPE html> <html> <head> <title>异步加载JavaScript</title> </head> <body> <h1>使用异步加载JavaScript进行页面优化</h1> <p>这里是页面的正文内容。</p> <script async src="myscript.js"></script> </body> </html>
We load the JavaScript file myscript.js into the HTML document. By setting the async attribute to true, the browser will load the script code asynchronously and not prevent the page from rendering.
Summary
In this article, we discussed how to embed JavaScript code in HTML documents and call JavaScript code externally. We also discussed how to save JavaScript code as a separate external file, define multiple functions and variables in a JavaScript file, and use asynchronous loading of JavaScript code for page optimization.
Whether you are a beginner or a professional, understanding this knowledge will help you better organize and manage JavaScript code, and improve the performance and maintainability of your website.
The above is the detailed content of How to call javascript externally. For more information, please follow other related articles on the PHP Chinese website!