当前位置：首页 > JavaScript > 正文内容

js引用另一个js文件的方法及例子（js引用另一个js文件的变量）

代码学堂2023-08-07 12:09:43JavaScript100

在HTML中引用JavaScript文件，我们通常使用`<script>`标签。假设我们有两个JavaScript文件，一个名为`script1.js`，另一个名为`script2.js`。

首先，这是`script1.js`的内容：

// script1.js
function greet() {
    alert("Hello from script1!");
}

然后，这是`script2.js`的内容：

// script2.js
function greetFromScript2() {
    alert("Hello from script2!");
}

在HTML中，我们可以这样引用这两个JavaScript文件：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Files Demo</title>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</head>
<body>
    <button onclick="greet()">Click me from script1</button>
    <button onclick="greetFromScript2()">Click me from script2</button>
</body>
</html>

在上述HTML代码中，`<script src="script1.js"></script>`和`<script src="script2.js"></script>`分别引用了两个JavaScript文件。这意味着当浏览器解析HTML时，它会执行这两个脚本文件。

然后，我们在两个按钮的点击事件中分别调用了`greet()`和`greetFromScript2()`函数，分别来自`script1.js`和`script2.js`。点击按钮时，会弹出一个警告框显示来自各自脚本的问候信息。

需要注意的是，HTML文件的加载是自上而下的，而脚本文件的加载是异步的。这意味着虽然脚本标签在HTML文件中是按顺序出现的，但实际的执行可能会因为网络延迟、文件大小等因素而有所不同。此外，脚本的执行可能会影响到页面上其他元素的初始化和渲染，所以通常建议将脚本放在`body`标签的末尾，以防止脚本的执行影响到页面的渲染。