1. Hello World：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Example</title>
</head>
<body>
<script>
// 在浏览器控制台输出 Hello World
console.log("Hello World");
</script>
</body>
</html>
2. 简单的计算器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<script>
// 简单的计算器函数
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
// 使用计算器函数
var result1 = add(5, 3);
var result2 = subtract(10, 4);
// 在浏览器控制台输出结果
console.log("Addition result:", result1);
console.log("Subtraction result:", result2);
</script>
</body>
</html>
3. 操作DOM元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<script>
// 获取元素并修改其内容
var headingElement = document.getElementById("heading");
headingElement.innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>
4. 事件处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling</title>
</head>
<body>
<button id="myButton">Click me!</button>
<script>
// 添加点击事件处理程序
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>
这些示例展示了一些基本的 JavaScript 用法，包括在控制台输出信息、进行简单的计算、操作DOM元素以及处理事件。在实际的Web开发中，JavaScript通常与HTML和CSS一起使用，以创建交互性更强的用户界面。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12846/JavaScript