输入

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

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html> <!-- 声明文档类型，这里是HTML5 -->
<html lang="en"> <!-- 根元素，设置文档的语言为英语 -->
 
<head> <!-- 头部区域，包含文档的元数据 -->
    <meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，以确保页面在不同设备上正确显示 -->
    <title>Document</title> <!-- 设置文档的标题，将显示在浏览器的标签页上 -->
    <link rel="stylesheet" href="/static/css/index.css"> <!-- 链接到外部的CSS样式表，用于美化页面 -->
</head>
 
<body> <!-- 主体区域，包含文档的主要内容 -->
    输入： <!-- 文本提示用户输入 -->
    <br> <!-- 换行符 -->
    <textarea class="input" name="" id=""></textarea> <!-- 多行文本输入区域，用户可以在这里输入文本 -->
    <br> <!-- 换行符 -->
    <button>Run</button> <!-- 按钮，用户点击后触发某个操作 -->
    <br> <!-- 换行符 -->
    输出： <!-- 文本提示输出区域 -->
    <pre class="output"> <!-- 预格式化文本区域，用于显示输出内容，保留空白和换行 -->
 
    </pre>
 
    <script type="module"> <!-- 引入一个模块化的JavaScript脚本 -->
        import {
            main, // 从外部JavaScript文件中导入main函数
        } from '/static/js/index.js'; // 指定外部JavaScript文件的路径
 
        main(); // 调用main函数，初始化页面或设置事件监听器等
    </script>
</body>
 
</html>

/static/css/index.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
textarea {
    width: 500px;
    height: 300px;
    background-color: lightblue;
    font-size: 24px;
}

pre {
    width: 500px;
    height: 300px;
    background-color: lightgray;
    font-size: 24px;
}

/static/js/index.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 使用querySelector方法选择页面上class为"input"的元素，并将其存储在变量input中
let input = document.querySelector(".input");

// 使用querySelector方法选择页面上的第一个button元素，并将其存储在变量run中
let run = document.querySelector("button");

// 使用querySelector方法选择页面上class为"output"的元素，并将其存储在变量output中
let output = document.querySelector(".output");

// 定义一个名为main的函数，该函数将在页面加载时被调用
function main() {
    // 为run变量（即button元素）添加一个点击事件监听器
    run.addEventListener("click", function () {
        // 当按钮被点击时，从input变量（即textarea元素）中获取用户输入的值，并将其存储在变量s中
        let s = input.value;
        
        // 将变量s的值设置为output变量（即pre元素）的innerHTML，从而在页面上显示用户输入的内容
        output.innerHTML = s;
    });
}

// 导出main函数，使其可以在其他JavaScript模块中被导入和使用
export { main };

js6.png

  • 通过Ajax与WebSocket从服务器端获取输入
  • 标准输入

输出

  • 调试用console.log，会将信息输出到浏览器控制台
  • 改变当前页面的HTML与CSS
  • 通过Ajax与WebSocket将结果返回到服务器

格式化

  • 字符串中填入变量的值
  • 定义多行字符串
  • 小数的格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="module">
    // 声明两个变量：name 是一个字符串，age 是一个数字
    let name = "lzh", age = 18;

    // 使用模板字面量创建一个字符串 s，其中包含了变量 name 和经过计算的 age / 2
    let s = `My name is ${name}, I am ${age / 2} years old.`;

    // 在控制台打印字符串 s
    console.log(s); // 输出：My name is lzh, I am 9 years old.

    // 声明一个浮点数变量 x
    let x = 1.234567;

    // 使用 toFixed 方法将 x 格式化为保留两位小数的字符串，并在控制台打印
    console.log(x.toFixed(2)); // 输出：1.23

    // 使用 Math.ceil 方法对 x 向上取整，并在控制台打印
    console.log(Math.ceil(x)); // 输出：2

    // 使用 Math.floor 方法对 x 向下取整，并在控制台打印
    console.log(Math.floor(x)); // 输出：1

    // 使用 Math.round 方法对 x 进行四舍五入，并在控制台打印
    console.log(Math.round(x)); // 输出：1，因为 1.234567 四舍五入后等于 1
</script>

js7.png

判断语句

JavaScript中的if-else语句与C++、Python、Java中类似。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="module">
    let score = 90;
    if (score >= 85) {
        console.log("A");
    } else if (score >= 70) {
        console.log("B");
    } else if (score >= 60) {
        console.log("C");
    } else {
        console.log("D");
    }
</script>

JavaScript中的逻辑运算符也与C++、Java中类似：

  • &&表示与
  • ||表示或
  • !表示非

循环语句

JavaScript中的循环语句与C++中类似，也包含for、while、do while循环。

for循环

1
2
3
for (let i = 0; i < 10; i++) {
    console.log(i);
}

枚举对象或数组时可以使用：

for-in循环，可以枚举数组中的下标，以及对象中的key
for-of循环，可以枚举数组中的值，以及对象中的value

while循环

1
2
3
4
5
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

do while循环

do while语句与while语句非常相似。唯一的区别是，do while语句限制性循环体后检查条件。不管条件的值如何，我们都要至少执行一次循环。

1
2
3
4
5
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);