在HTML中引用写好的JavaScript文件，通常有两种方式：内联方式和外部引用方式。
1. 内联方式
内联方式是将JavaScript代码直接写在HTML文件中，这种方式简单直接，但不利于代码的复用和维护。
<!DOCTYPE html>
<html>
<head>
<title>内联JavaScript示例</title>
</head>
<body>
<h1>我的第一个JavaScript程序</h1>
<button onclick="alert('Hello, World!')">点击我</button>
</body>
</html>
在上述代码中，我们在<button>标签中添加了onclick属性，该属性的值是一个JavaScript函数调用，当用户点击按钮时，就会弹出一个警告框显示"Hello, World!"。
2. 外部引用方式
外部引用方式是将JavaScript代码写在一个单独的.js文件中，然后在HTML文件中通过<script>标签引用这个.js文件，这种方式有利于代码的复用和维护。
我们创建一个名为main.js的JavaScript文件，内容如下：
function sayHello() {
alert('Hello, World!');
}
我们在HTML文件中引用这个.js文件：
<!DOCTYPE html>
<html>
<head>
<title>外部JavaScript示例</title>
<script src="main.js"></script>
</head>
<body>
<h1>我的第一个JavaScript程序</h1>
<button onclick="sayHello()">点击我</button>
</body>
</html>
在上述代码中，我们在<head>标签中添加了<script src="main.js"></script>，这行代码的作用是引用main.js文件，我们在<button>标签的onclick属性中使用了sayHello()函数，这个函数是在main.js文件中定义的，当用户点击按钮时，就会调用sayHello()函数，弹出一个警告框显示"Hello, World!"。
相关问题与解答
问题1：为什么推荐使用外部引用方式而不是内联方式？
答：推荐使用外部引用方式的原因主要有两个，外部引用方式有利于代码的复用和维护，如果多个HTML文件需要使用同一段JavaScript代码，那么只需要在一个.js文件中编写这段代码，然后在所有需要使用这段代码的HTML文件中引用这个.js文件即可，外部引用方式可以提高网页的性能，浏览器在加载HTML文件时，会并行加载所有需要的.js文件，这样可以充分利用网络带宽，提高网页的加载速度，而内联方式会导致JavaScript代码和HTML代码一起下载和解析，可能会阻塞页面的渲染。
问题2：如果在HTML文件中同时使用了内联方式和外部引用方式引用同一个.js文件，会发生什么？
答：如果在HTML文件中同时使用了内联方式和外部引用方式引用同一个.js文件，那么浏览器会忽略内联方式的引用，也就是说，只有外部引用方式的.js文件会被加载和执行，这是因为浏览器遵循“最后引入（Last-Came-First-Served）”原则，即优先执行最后引入的JavaScript文件。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/241008.html
微信扫一扫 