3.3 输入与输出
程序需要和用户交流。在浏览器 JavaScript 中,最基础的输出包括 console.log()、alert() 和修改页面内容;最基础的输入包括表单输入框、事件,有时也会用 prompt()。
console.log()
console.log() 会把文本或变量值打印到开发者控制台。它主要用于学习和调试。
js
let name = "小叶";
let age = 18;
console.log(name);
console.log(age);
console.log("姓名:", name, "年龄:", age);输出结果:
text
小叶
18
姓名:小叶 年龄:18正在加载概念检查...
字符串格式化
JavaScript 有几种方式把值放进字符串里。
字符串拼接使用 +:
js
let language = "JavaScript";
console.log("我正在学习 " + language + "。");模板字符串使用反引号和 ${...} 占位符:
js
let length = 10;
let width = 5;
let area = length * width;
console.log(`面积 = ${length} * ${width} = ${area}`);当字符串里有多个变量时,模板字符串通常更容易读。
prompt() 与类型转换
prompt() 会弹出输入框,向用户询问文本。注意:它返回的总是字符串或 null,即使用户输入的是数字。
js
let input = prompt("半径:");
let radius = Number(input);
let area = Math.PI * radius ** 2;
console.log(`面积 = ${area.toFixed(2)}`);一次可能的运行过程:
text
半径:5
面积 = 78.54Number(input) 会把输入字符串转换成数字。Math.PI 是 JavaScript 内置的圆周率。toFixed(2) 可以保留两位小数。
正在加载交互实验...
页面输入与输出
真实前端开发中,通常从表单输入框读取数据,再通过 DOM 更新页面输出。
js
const input = document.querySelector("#name");
const output = document.querySelector("#message");
input.addEventListener("input", () => {
output.textContent = `你好,${input.value}!`;
});这个模式把编程基础和真正的交互网页连接了起来。
正在加载本节练习...