JavaScript 输入输出
作为一名JavaScript初学者，了解如何处理输入和输出是编程的基础部分。在本教程中，我们将探索JavaScript中各种获取用户输入和展示输出的方法，让您能够创建与用户交互的动态网页。
输出方式
JavaScript提供了多种方式来显示或输出数据，下面我们逐一介绍。
1. 使用控制台输出
对于开发人员来说，最基本的输出方式是使用浏览器的控制台。
javascript
console.log("Hello World!"); // 普通信息
console.error("出错了！"); // 错误信息
console.warn("这是一个警告！"); // 警告信息
console.info("这是一条信息。"); // 信息
提示
使用浏览器开发工具(F12)查看控制台输出，这是调试JavaScript代码的重要手段。
2. 浏览器对话框
JavaScript可以通过内置函数显示不同类型的弹出框：
javascript
// 显示一个警告框
alert("这是一个提示！");
// 显示一个带有确认按钮的对话框，返回布尔值
const result = confirm("您确定要删除这条记录吗？");
console.log(result); // 点击确定返回true，取消返回false
// 显示一个输入框，返回用户输入的内容
const name = prompt("请输入您的名字：", "游客");
console.log("欢迎您，" + name);
3. 直接操作DOM
最常见的输出方式是修改HTML页面的内容：
javascript
// 修改HTML元素内容
document.getElementById("demo").innerHTML = "新的内容";
// 修改HTML元素属性
document.getElementById("myImage").src = "landscape.jpg";
// 修改HTML元素样式
document.getElementById("demo").style.color = "red";
// 创建新的HTML元素
const para = document.createElement("p");
const node = document.createTextNode("这是新段落。");
para.appendChild(node);
document.body.appendChild(para);
备注
DOM (Document Object Model) 操作允许JavaScript改变网页的所有元素、属性和样式，详细内容将在DOM操作相关章节中学习。
4. 写入HTML文档
可以使用document.write()直接向HTML输出流写内容：
javascript
document.write("<h2>这是一个标题</h2>");
document.write("<p>这是一个段落。</p>");
警告
只在页面加载过程中使用document.write()。如果在页面加载完成后使用，会覆盖整个页面内容！
输入方式
JavaScript提供多种获取用户输入的方式，以下是常见方法：
1. HTML表单获取输入
最常见的方式是通过HTML表单元素：
html
<input type="text" id="userName" placeholder="请输入用户名">
<button onclick="getValue()">提交</button>
<script>
function getValue() {
const userName = document.getElementById("userName").value;
alert("您输入的用户名是：" + userName);
}
</script>
2. 对话框获取输入
如前面所示，prompt()函数可以显示一个带输入框的对话框：
javascript
const age = prompt("请输入您的年龄：", "18");
if (age != null && age != "") {
console.log("您的年龄是：" + age);
}
3. 事件监听获取输入
用户与网页的交互（点击、键盘输入等）也是输入的形式：
javascript
// 点击事件
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了！");
});
// 键盘事件
document.getElementById("myInput").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
alert("您按下了回车键！");
}
});
// 鼠标移动
document.getElementById("myDiv").addEventListener("mousemove", function(event) {
console.log("鼠标坐标: " + event.clientX + ", " + event.clientY);
});
实际案例：简单计算器
下面是一个结合输入和输出的简单计算器实例：
html
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<style>
.calculator { margin: 20px; padding: 10px; width: 300px; border: 1px solid #ccc; }
input { margin: 5px; padding: 5px; }
button { margin: 5px; padding: 5px 10px; }
</style>
</head>
<body>
<div class="calculator">
<h2>简单计算器</h2>
<input type="number" id="num1" placeholder="输入第一个数">
<input type="number" id="num2" placeholder="输入第二个数">
<div>
<button onclick="calculate('add')">+</button>
<button onclick="calculate('subtract')">-</button>
<button onclick="calculate('multiply')">×</button>
<button onclick="calculate('divide')">÷</button>
</div>
<p>结果: <span id="result">?</span></p>
</div>
<script>
function calculate(operation) {
// 获取输入值
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
// 验证输入
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerText = "请输入有效的数字";
return;
}
// 计算结果
let result;
switch(operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 === 0) {
document.getElementById("result").innerText = "除数不能为零";
return;
}
result = num1 / num2;
break;
}
// 输出结果
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>
这个例子展示了如何：
- 从HTML输入框获取用户输入
- 处理输入验证
- 根据用户点击的按钮执行不同的计算
- 将结果输出到网页中
输入输出流程图
总结
JavaScript提供了多种处理输入和输出的方法，让开发者能够创建交互式网页应用程序：
- 输出方式：控制台日志、浏览器对话框、DOM操作和文档写入
- 输入方式：HTML表单、浏览器对话框和事件监听
掌握这些基本的输入输出方法是构建交互式网页应用的基础，后续我们会深入学习更多复杂的交互方式。
练习
- 创建一个简单表单，获取用户名和年龄，点击按钮后显示欢迎信息
- 编写一个程序，使用prompt()获取用户输入的华氏温度，将其转换为摄氏度并使用alert()显示结果
- 创建一个计数器，包含增加和减少按钮，以及显示当前计数的区域