JavaScript —— 输入与输出
输入与输出输入：
[*]从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
例如：
<body>
<body>
<body>
</body>
</body>输入：
<body>
<body>
</body>
</body><textareaname="" id="" cols="30" rows="10"></textarea>
</body>
[*]通过Ajax与WebSocket从服务器端获取输入。
[*]标准输入。
输出：
[*]调试用console.log，会将信息输出到浏览器控制台。
[*]改变当前页面的HTML与CSS。
[*]通过Ajax与WebSocket将结果返回到服务器。
案例：
index.html中的内容为：
<body>
<body>
</body>
</body><body>
<body>
</body>
</body><body>
<body>
</body>
</body>Document<body>
<body>
</body>
</body>// 引入css样式<body>
<body>
<body>
</body>
</body>输入：
<body>
<body>
</body>
</body><textareaname="" id="" cols="30" rows="10"></textarea>
</body>
<body>
<body>
</body>
</body><body>
<body>
</body>
</body>
<body>
<body>
</body>
</body>Run<body>
<body>
</body>
</body>
<body>
<body>
</body>
</body><body>
<body>
</body>
</body>
index.css中的内容为：
textarea {
<body>
<body>
</body>
</body>width: 500px;
<body>
<body>
</body>
</body>height: 300px;
<body>
<body>
</body>
</body>background-color: aquamarine;
<body>
<body>
</body>
</body>font-size: 24px;
}
pre {
<body>
<body>
</body>
</body>width: 500px;
<body>
<body>
</body>
</body>height: 300px;
<body>
<body>
</body>
</body>background-color: rgb(191, 197, 229);
<body>
<body>
</body>
</body>font-size: 24px;
}
index.js中的内容为：
/**
* Document有很多对象属性和方法，DOM是HTML在浏览器中的表示形式，允许您操纵页面。
* D（document）：document的意思是文档，在dom中会将HTML这个页面给解析为一个文档，并在解析的同时会提供一个 document对象。
* O（object）：object就是对象，而DOM则把HTML页面中的所有元素都解析为一个对象。<body>
<body>
</body>
</body>
* 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() {
<body>
<body>
</body>
</body>// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
<body>
<body>
</body>
</body>run.addEventListener("click", function(){
<body>
<body>
</body>
</body><body>
<body>
</body>
</body>let s = input.value;//获取textarea中的input的值
<body>
<body>
</body>
</body><body>
<body>
</body>
</body>output.innerHTML = s;//展示pre内的标签内容
<body>
<body>
</body>
</body>})
}
export {
<body>
<body>
</body>
</body>main
}
格式化字符串
[*]字符串中填入数值：
index.js中的内容为：
function main() {
<body>
<body>
</body>
</body>let name = "kitty", age = 18;
<body>
<body>
</body>
</body>let s = `My name is ${name}. I'm ${age / 2} years old.`;
<body>
<body>
</body>
</body>console.log(s);
}
export {
<body>
<body>
</body>
</body>main
}index.html中的内容为：
<body>
<body>
</body>
</body>
[*]保留两位小数如何输出：
index.js中的内容为：
function main() {<body>
<body>
</body>
</body>let x = 1.234567;<body>
<body>
</body>
</body>let y = x.toFixed(2);// 保留2位小数<body>
<body>
</body>
</body>console.log(y);<body>
<body>
</body>
</body>let z = `${x.toFixed(2)}`;// 保留2位小数<body>
<body>
</body>
</body>console.log(z);<body>
<body>
</body>
</body>console.log(Math.ceil(x));// 向上取整<body>
<body>
</body>
</body>console.log(Math.floor(x));// 向下取整<body>
<body>
</body>
</body>console.log(Math.round(x));// 取整}export {<body>
<body>
</body>
</body>main}index.html中的内容为：
<body>
<body>
</body>
</body>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]