输入与输出
输入：
-
从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中的内容为：
<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>
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(4); // 保留4位小数
console.log(y);
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>