输入与输出
输入：
-
从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> 
关注灵活就业新业态，关注公账号：贤才宝（贤才宝https://www.51xcbw.com）
