JavaScript(简称JS)是一种广泛使用的脚本语言,主要用于网页开发,使网页具有动态交互性。以下是一些JavaScript的经典代码示例及其解释:
alert('Hello, World!');
解释:这条代码会在浏览器中弹出一个警告框,显示“Hello, World!”。
document.getElementById('myElement').innerHTML = 'New Content';
解释:这条代码会找到ID为myElement
的HTML元素,并将其内容修改为“New Content”。
document.getElementById('myButton').addEventListener('click', function() {
alert('Button was clicked!');
});
解释:这条代码会给ID为myButton
的按钮添加一个点击事件监听器,当按钮被点击时,会弹出一个警告框显示“Button was clicked!”。
setInterval(function() {
console.log('This message will appear every second.');
}, 1000);
解释:这条代码会每秒钟在控制台输出一条消息。
var person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // 输出: John Doe
解释:这段代码定义了一个person
对象,包含姓名、年龄等属性和一个方法fullName
,用于返回全名。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
解释:这段代码使用XMLHttpRequest对象发送一个异步GET请求到指定的URL,并在请求成功后更新页面上的某个元素的内容。
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched!"), 2000);
});
}
fetchData().then(data => console.log(data));
解释:这段代码定义了一个返回Promise的函数fetchData
,模拟了一个异步操作,并在2秒后成功返回数据。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]
解释:这段代码使用ES6的箭头函数和数组的map
方法,将数组中的每个元素乘以2。
这些示例展示了JavaScript在不同场景下的基本用法,涵盖了DOM操作、事件处理、异步编程等多个方面。希望这些内容能帮助你更好地理解和使用JavaScript。
领取专属 10元无门槛券
手把手带您无忧上云