网页中js调用的常见写法

2023-12-20 13:21:35

在网页中,JavaScript(JS)的调用通常有以下几种常见写法:

  1. 内联JavaScript:这是直接在HTML元素中添加onclickonload等事件处理程序的方式。例如:

 

html复制代码

<button onclick="alert('Hello, World!')">点击我</button>
  1. 外部JavaScript:这是将JavaScript代码写入单独的.js文件,然后在HTML文件中使用<script>标签引入的方式。例如:

 

html复制代码

<script src="script.js"></script>
  1. DOM事件处理:这是在HTML元素上绑定事件处理程序的方式,如onclickonload等。例如:

 

javascript复制代码

document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了!');
});
  1. 定时器:这是使用setTimeoutsetInterval函数来定时执行代码的方式。例如:

 

javascript复制代码

setTimeout(function() {
alert('这是一次性执行的代码!');
}, 5000); // 5秒后执行
setInterval(function() {
alert('这是每隔5秒执行的代码!');
}, 5000); // 每5秒执行一次
  1. AJAX请求:这是使用XMLHttpRequestfetch函数向服务器发送请求并处理响应的方式。例如:

 

javascript复制代码

fetch('api/data.json')
.then(response => response.json())
.then(data => {
console.log(data); // 处理服务器返回的数据
})
.catch(error => {
console.error('Error:', error); // 处理错误情况
});
  1. 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); // 打印接收到的消息内容
};

文章来源:https://blog.csdn.net/elirlove1/article/details/135099615
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。