输入

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

例如：

<!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:

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:

// 使用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 };

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

输出

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

格式化

字符串中填入变量的值
定义多行字符串

小数的格式

<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>

判断语句

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

例如：

<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循环

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

do while循环

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

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

文章作者: Lzh

文章链接: http://example.com/2024/12/27/JavaScript-%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E5%92%8C%E9%80%89%E6%8B%A9%E5%BE%AA%E7%8E%AF/

JavaScript

相关推荐

2025-01-04

JavaScript-事件

事件JavaScript的代码一般通过事件触发。可以通过addEventListener函数为元素绑定事件的触发函数。常见的触发函数有：鼠标click：鼠标左键点击 12345678910let div = document.querySelector('div');function main() { div.addEventListener('click', (event) => { //输出事件的类型，即click console.log(event.type); });}export { main }; dblclick：鼠标左键双击 1234div.addEventListener('dblclick', (event) => { //输出事件的类型，即dblclick console.log(event.type); ...

2024-12-27

JavaScript-变量与运算符

let和const let用来定义变量 const用来定义常量例如：1234567<body> <script type="module"> let a; let x = 3, name = "lzh";//声明多个变量 const y = 4;//声明一个常量 </script></body> 变量类型 number: 数值变量，如1，2.5 string: 字符串，如”Hello”,’World’,单引号与双引号均可。字符串中的每个字符为只读类型。如果想要改变某个字符，可以用substr取子串方法重新构造一个字符串 boolean: 布尔值，例如true, false object: 对象，类似于C++中的指针，例如[1, 2, 3]，{name: “yxc”, age: 18}，null undefined: 未定义的变量可以通过console.log(typeof...

2025-01-04

JavaScript-对象、数组和函数

对象英文名称：Object。类似于C++中的map，由key:value对构成。 value可以是变量、数组、对象、函数等。函数定义中的this用来引用该函数的“拥有者”。例如： 1234567891011121314151617181920212223let person = { name: "John", age: 30, money: 100, friends: ["Bob", 'Alice'], clothes: { color: "red", size: "XL", }, add_money: function (x) { this.money += x; }}function main() { console.log(person); console.log(person.name); ...

2025-01-05

JavaScript-常用库

常用库jQuery使用方式在元素中添加：按jQuery官网提示下载获取元素12345678function main() { //原来获取元素的方法 let div = document.querySelector('div'); console.log(div); //用jquery获取元素的方法 let $div = $('div'); console.log($div);} 选择器例如： 123456789//选择class为mydiv的元素let $mydiv = $('.mydiv');console.log($mydiv);//选择id为mydiv的元素let $mydiv2 = $('#mydiv');console.log($mydiv2);//选择class为mydiv的元素下的p元素let $p = $('.mydiv >...

2024-12-27

JavaScript-执行方式和执行顺序

Javascript如何运行(在前端执行)？使用方式HTML页面中的任意位置加上<script type=”module”></script>标签即可。常见使用方式1.直接在<script type=”module”></script>标签内写JS代码。例如： 12345678910111213141516<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script...

2025-01-04

JavaScript-类

类定义与C++中的Class类似。但是不存在私有成员。 this指向类的实例。定义 123456789101112131415161718class Point { constructor(x, y) { // 构造函数 this.x = x; // 成员变量 this.y = y; this.init(); } init() { this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义 } toString() { // 成员函数 return '(' + this.x + ', ' + this.y + ')'; }}let p = new Point(3, 4);console.log(p.toString()); 继承123456789class ColorPoint extends Point { ...