在网页中，JavaScript（JS）的调用通常有以下几种常见写法：
内联JavaScript：这是直接在HTML元素中添加onclick、onload等事件处理程序的方式。例如：
html复制代码
<button onclick="alert('Hello, World!')">点击我</button> |
外部JavaScript：这是将JavaScript代码写入单独的.js文件，然后在HTML文件中使用<script>标签引入的方式。例如：
html复制代码
<script src="script.js"></script> |
DOM事件处理：这是在HTML元素上绑定事件处理程序的方式，如onclick、onload等。例如：
javascript复制代码
document.getElementById('myButton').addEventListener('click', function() { | |
alert('按钮被点击了！'); | |
}); |
定时器：这是使用setTimeout和setInterval函数来定时执行代码的方式。例如：
javascript复制代码
setTimeout(function() { | |
alert('这是一次性执行的代码！'); | |
}, 5000); // 5秒后执行 | |
setInterval(function() { | |
alert('这是每隔5秒执行的代码！'); | |
}, 5000); // 每5秒执行一次 |
AJAX请求：这是使用XMLHttpRequest或fetch函数向服务器发送请求并处理响应的方式。例如：
javascript复制代码
fetch('api/data.json') | |
.then(response => response.json()) | |
.then(data => { | |
console.log(data); // 处理服务器返回的数据 | |
}) | |
.catch(error => { | |
console.error('Error:', error); // 处理错误情况 | |
}); |
Web Workers：这是在后台线程中运行JavaScript代码的方式，以避免阻塞主线程。例如：
javascript复制代码
const myWorker = new Worker('worker.js'); // 创建一个新的worker对象，指定worker脚本的URL | |
myWorker.postMessage('Hello, Worker!'); // 向worker发送消息 | |
myWorker.onmessage = function(event) { // 监听worker的消息事件，处理接收到的消息 | |
console.log('Received:', event.data); // 打印接收到的消息内容 | |
}; |