JS — 输入与输出
输入与输出
输入：
从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
例如：
<body>
输入：
<textarea class="input" name="" id="" cols="30" rows="10"></textarea>
</body>
通过Ajax与WebSocket从服务器端获取输入。
标准输入。
输出：
调试用console.log，会将信息输出到浏览器控制台。
改变当前页面的HTML与CSS。
通过Ajax与WebSocket将结果返回到服务器。
案例：
index.html中的内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/index.css"> // 引入css样式
</head>
<body>
输入：
<br>
<textarea class="input" name="" id="" cols="30" rows="10"></textarea>
<br>
<button>Run</button>
<br>
<pre></pre>
<script type="module">
import {main} from "/js/index.js";
main();
</script>
</body>
</html>
index.css中的内容为：
textarea {
width: 500px;
height: 300px;
background-color: aquamarine;
font-size: 24px;
}
pre {
width: 500px;
height: 300px;
background-color: rgb(191, 197, 229);
font-size: 24px;
}
index.js中的内容为：
/**
* Document有很多对象属性和方法，DOM是HTML在浏览器中的表示形式，允许您操纵页面。
* D（document）：document的意思是文档，在dom中会将HTML这个页面给解析为一个文档，并在解析的同时会提供一个 document对象。
* O（object）：object就是对象，而DOM则把HTML页面中的所有元素都解析为一个对象。
* M（model）：M代表的就是model（模块），主要表现的是dom里面各个对象之间的关系。
*
* 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点 ：
* 文档是一个文档节点。
* 所有的HTML元素都是元素节点。
* 所有 HTML 属性都是属性节点。
* 文本插入到 HTML 元素是文本节点。are text nodes。
* 注释是注释节点。
*/
/**
* 获取文档中 id="demo" 的元素：
* document.querySelector("#demo");
*/
let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let s = input.value; //获取textarea中的input的值
output.innerHTML = s; //展示pre内的标签内容
})
}
export {
main
}
格式化字符串
字符串中填入数值：
index.js中的内容为：
function main() {
let name = "kitty", age = 18;
let s = `My name is ${name}. I'm ${age / 2} years old.`;
console.log(s);
}
export {
main
}
index.html中的内容为：
<body>
<script type="module">
import {main} from "/js/index.js";
main();
</script>
</body>
保留两位小数如何输出：
index.js中的内容为：
function main() {
let x = 1.234567;
let y = x.toFixed(2); // 保留2位小数
console.log(y);
let z = `${x.toFixed(2)}`; // 保留2位小数
console.log(z);
console.log(Math.ceil(x)); // 向上取整
console.log(Math.floor(x)); // 向下取整
console.log(Math.round(x)); // 取整
}
export {
main
}
index.html中的内容为：
<body>
<script type="module">
import {main} from "/js/index.js";
main();
</script>
</body>