JavaScript —— 输入与输出-牛翰网

输入与输出

输入：

从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。

例如：


<body>
    输入：
    <textarea class="input" name="" id="" cols="30" rows="10"></textarea>
</body>
<body>
    输入：
    <textarea class="input" name="" id="" cols="30" rows="10"></textarea>
</body>
<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>
<!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>
<!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;
}
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;
}
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
}
/**
 * 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
}
/**
 * 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
}
function main() {
    let name = "kitty", age = 18;
    let s = `My name is ${name}. I'm ${age / 2} years old.`;
    console.log(s);

}

export {
    main
}
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>
<body>
    <script type="module">
        import {main} from "/js/index.js";

        main();

    </script>
</body>
<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
}
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
}
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>
<body>
    <script type="module">
        import {main} from "/js/index.js";

        main();

    </script>
</body>
<body>
    <script type="module">
        import {main} from "/js/index.js";

        main();

    </script>
</body>