网页中js调用的常见写法

2023-12-20 13:21:35

在网页中，JavaScript（JS）的调用通常有以下几种常见写法：

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

 

html复制代码
 

<button onclick="alert('Hello, World!')">点击我</button>
 

  1.  
    外部JavaScript：这是将JavaScript代码写入单独的.js文件，然后在HTML文件中使用<script>标签引入的方式。例如：
     
 

 

html复制代码
 

<script src="script.js"></script>
 

  1.  
    DOM事件处理：这是在HTML元素上绑定事件处理程序的方式，如onclick、onload等。例如：
     
 

 

javascript复制代码
 

document.getElementById('myButton').addEventListener('click', function() { 
alert('按钮被点击了！'); 
});
 

  1.  
    定时器：这是使用setTimeout和setInterval函数来定时执行代码的方式。例如：
     
 

 

javascript复制代码
 

setTimeout(function() { 
alert('这是一次性执行的代码！'); 
}, 5000); // 5秒后执行 
setInterval(function() { 
alert('这是每隔5秒执行的代码！'); 
}, 5000); // 每5秒执行一次
 

  1.  
    AJAX请求：这是使用XMLHttpRequest或fetch函数向服务器发送请求并处理响应的方式。例如：
     
 

 

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

    			本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。