青少年编程与数学 01-008 在网页上完成计算 13课题、四则运算

明月看潮生

于 2024-08-09 07:35:16 发布

阅读量632

点赞数 15

分类专栏： # 编程与数学第01阶段文章标签：青少年编程前端 JavaScript 编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/141044911

版权

编程与数学第01阶段专栏收录该内容

200 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-008 在网页上完成计算 13课题、四则运算

一、四则运算编程
二、表达式计算

编程完成四则运算。

一、四则运算编程

编写网页程序，完成四则运算。要求：

功能要求：用户可以四则运算算式，点击计算按钮后由程序计算表达式的结果并显示在页面上。
需要HTML来构建界面，CSS来设置样式，以及JavaScript来实现转换逻辑。所有代码都写在一个.html文件中。
页面中显示中文。代码中添加中文注释。
设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。
用户可以多次输入算式并计算。

示例1：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>四则运算计算器</title>
    <style>
        body {
            background-color: #333;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 50;
        }

        .container {
            width: 700px;
            text-align: center;
            background: #444;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        input[type="text"] {
            width: 500px;
        }

        input,
        button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }

        #result {
            margin-top: 20px;
            font-size: 20px;
            min-height: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>四则运算计算器</h1>
        <input type="text" id="expression" placeholder="输入算式，例如 2+2" />
        <button onclick="calculate()">计算</button>
        <div id="result"></div>
    </div>

    <script>
        // 计算表达式结果的函数
        function calculate() {
            var expression = document.getElementById('expression').value;
            try {
                // 计算表达式
                var result = eval(expression);
                // 显示结果
                document.getElementById('result').innerText = '结果: ' + result;
            } catch (error) {
                // 如果表达式无效，显示错误信息
                document.getElementById('result').innerText = '错误: 无效的表达式';
            }
        }
    </script>
</body>

</html>

示例2：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Math.js计算器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #333;
            color: #fff;
        }

        .container {
            text-align: center;
            padding: 20px;
            background: #444;
            border-radius: 10px;
        }

        input,
        button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }

        #result {
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.js"></script>
</head>

<body>
    <div class="container">
        <h1>Math.js 计算器</h1>
        <input type="text" id="expression-input" placeholder="输入算式，例如 '2 + 3 * 2'" />
        <button onclick="calculateExpression()">计算</button>
        <div id="result"></div>
    </div>

    <script>
        function calculateExpression() {
            var expression = document.getElementById('expression-input').value;
            try {
                // 使用 Math.js 计算表达式
                var result = math.evaluate(expression);
                // 显示结果
                document.getElementById('result').textContent = '结果: ' + result;
            } catch (error) {
                // 如果表达式无效，显示错误信息
                document.getElementById('result').textContent = '错误: ' + error.message;
            }
        }
    </script>
</body>

</html>

二、表达式计算

（一）eval函数

eval 函数是 JavaScript 中的一个内置函数，它可以计算由字符串形式的代码组成的表达式，并执行其中的 JavaScript 代码。换句话说，eval 可以将字符串当作代码来执行。这使得它在某些情况下非常有用，但同时也带来了一些安全风险。

使用 `eval` 的基本语法：

eval(string);

string：需要计算或执行的 JavaScript 代码字符串。

示例：

计算一个数学表达式：

var result = eval("1 + 2 * 3"); // 结果为 7

调用一个函数：

function greet() {
    console.log("Hello, World!");
}

eval("greet();"); // 输出 "Hello, World!"

访问或修改变量：

var x = 10;
eval("console.log(x);"); // 输出 10
eval("x = 20;"); // x 的值被修改为 20

JavaScript 中的 eval 函数可以执行字符串形式的 JavaScript 代码，因此它支持 JavaScript 中定义的所有运算符。以下是一些主要的运算符类型：

基本算术运算符：
- 加法：+
- 减法：-
- 乘法：*
- 除法：/
- 模运算（求余数）：%
- 指数：** 或 Math.pow
一元运算符：
- 递增：++
- 递减：--
- 逻辑非：!
- 位非：~
- 负号：-（一元运算）
比较运算符：
- 小于：<
- 大于：>
- 小于等于：<=
- 大于等于：>=
- 等于：== 或 ===
- 不等于：!= 或 !==
逻辑运算符：
- 逻辑与：&&
- 逻辑或：||
- 逻辑非：!
位运算符：
- 位与：&
- 位或：|
- 位异或：^
- 左移位：<<
- 右移位：>>
- 无符号右移位：>>>
赋值运算符：
- 简单赋值：=
- 加等于：+=
- 减等于：-=
- 乘等于：*=
- 除等于：/=
- 模等于：%=
- 幂等于：**=
- 位与等于：&=
- 位或等于：|=
- 位异或等于：^=
- 左移位等于：<<=
- 右移位等于：>>=
- 无符号右移位等于：>>>=
条件（三元）运算符：
- 形式：condition ? exprIfTrue : exprIfFalse
逗号运算符：允许对多个表达式求值，并返回最后一个表达式的值。
对象属性访问：
- 点符号：object.property
- 方括形符号：object['property']
函数调用：使用圆括号调用函数。
数组和对象字面量：
- 数组：[element1, element2, ...]
- 对象：{property1: value1, property2: value2, ...}
模板字符串：
- 使用反引号（`）创建模板字符串。

是否真正支持这些运算符，用了才知道。

eval 函数可以执行任何有效的 JavaScript 代码，包括上述运算符以及更复杂的表达式、函数定义、控制流语句等。然而，由于安全原因，通常建议避免使用 eval，因为它可能会执行恶意代码，尤其是在处理不可信的输入时。

安全风险：

eval 可以执行传入的任何代码，这意味着如果传入的字符串来自不可信的源，可能会对应用程序造成安全威胁。
使用 eval 可能会使代码难以阅读和维护，因为它允许在运行时动态地执行代码。
eval 可能会影响 JavaScript 引擎的优化，因为它需要解析和执行字符串中的代码。

替代方案：

安全执行：如果需要计算数学表达式，可以使用更安全的函数，如 Function 构造函数，但这仍然存在安全风险。
解析库：对于复杂的表达式解析，可以使用专门的数学表达式解析库，如 math.js，这些库提供了更安全和功能更丰富的表达式解析能力。
正则表达式：对于简单的文本替换或模式匹配，可以使用正则表达式代替 eval。

在实际开发中，应尽量避免使用 eval，除非确实需要动态执行代码，并且能够确保传入的字符串是安全的。

（二）math.js

Math.js 是一个用于 JavaScript 和 TypeScript 的广泛使用的开源数学库。以下是 Math.js 的一些主要特点和优势：

全面的数学函数支持：Math.js 提供了丰富的数学函数，包括基本的算术运算、代数、微积分、统计、三角函数、逻辑运算等。
符号计算能力：Math.js 不仅能进行数值计算，还能处理符号计算。这意味着它可以对数学表达式进行操作，如简化、展开、因式分解、求导数和积分等。
多种数值类型：支持多种数值类型，包括整数、浮点数、复数和分数。
单位处理：Math.js 可以创建带有单位的数值，并进行单位转换和检查，这对于科学和工程计算非常有用。
矩阵运算：支持矩阵的创建、操作和多种矩阵函数，如矩阵乘法、求逆、行列式计算等。
高精度计算：Math.js 提供了高精度的数值计算选项，可以处理非常大的数或非常小的数，适用于需要高精度的场景。
易于使用的 API：Math.js 的 API 设计直观，易于学习和使用，使得数学表达式的编写和计算变得简单。
跨平台兼容性：Math.js 可以在浏览器和 Node.js 环境中运行，适用于 Web 应用、服务器端应用和桌面应用。
扩展性：用户可以根据自己的需要扩展 Math.js 的功能，如添加自定义函数或常量。
活跃的社区和文档：Math.js 拥有活跃的开发社区和完善的文档，为用户提供了丰富的学习资源和支持。

Math.js 的这些特性使其成为科学计算、工程模拟、数据分析和教育等多个领域的理想选择。无论是需要进行复杂的数学运算还是简单的数值处理，Math.js 都能提供强大的支持。

运算符：

操作	名字	语法	关联性	例	结果
`(`,`)`	分组	`(x)`	没有	`2 * (3 + 4)`	`14`
`[`,`]`	矩阵、索引	`[...]`	没有	`[[1,2],[3,4]]`	`[[1,2],[3,4]]`
`{`,`}`	对象	`{...}`	没有	`{a: 1, b: 2}`	`{a: 1, b: 2}`
`,`	参数分隔符	`x, y`	从左到右	`max(2, 1, 5)`	`5`
`.`	属性访问器	`obj.prop`	从左到右	`obj={a: 12}; obj.a`	`12`
`;`	语句分隔符	`x; y`	从左到右	`a=2; b=3; a*b`	`[6]`
`;`	行分隔符	`[x; y]`	从左到右	`[1,2;3,4]`	`[[1,2],[3,4]]`
`\n`	语句分隔符	`x \n y`	从左到右	`a=2 \n b=3 \n a*b`	`[2,3,6]`
`+`	加	`x + y`	从左到右	`4 + 5`	`9`
`+`	一元加号	`+y`	从右到左	`+4`	`4`
`-`	减去	`x - y`	从左到右	`7 - 3`	`4`
`-`	一元减号	`-y`	从右到左	`-4`	`-4`
`*`	乘	`x * y`	从左到右	`2 * 3`	`6`
`.*`	元素乘法	`x .* y`	从左到右	`[1,2,3] .* [1,2,3]`	`[1,4,9]`
`/`	分	`x / y`	从左到右	`6 / 2`	`3`
`./`	元素除法	`x ./ y`	从左到右	`[9,6,4] ./ [3,2,2]`	`[3,3,2]`
`%`	百分比	`x%`	没有	`8%`	`0.08`
`%`	加法与百分比	`x + y%`	从左到右	`100 + 3%`	`103`
`%`	带百分比的减法	`x - y%`	从左到右	`100 - 3%`	`97`
`%` `mod`	模	`x % y`	从左到右	`8 % 3`	`2`
`^`	权力	`x ^ y`	从右到左	`2 ^ 3`	`8`
`.^`	元素功率	`x .^ y`	从右到左	`[2,3] .^ [3,3]`	`[8,27]`
`'`	转置	`y'`	从左到右	`[[1,2],[3,4]]'`	`[[1,3],[2,4]]`
`!`	阶乘	`y!`	从左到右	`5!`	`120`
`&`	按位和	`x & y`	从左到右	`5 & 3`	`1`
`~`	按位不	`~x`	从右到左	`~2`	`-3`
`	`	按位或	`x	y`	从左到右
`^	`	按位异或	`x ^	y`	从左到右
`<<`	左移	`x << y`	从左到右	`4 << 1`	`8`
`>>`	右算术移位	`x >> y`	从左到右	`8 >> 1`	`4`
`>>>`	正确的逻辑转变	`x >>> y`	从左到右	`-8 >>> 1`	`2147483644`
`and`	逻辑和	`x and y`	从左到右	`true and false`	`false`
`not`	逻辑不	`not y`	从右到左	`not true`	`false`
`or`	逻辑或	`x or y`	从左到右	`true or false`	`true`
`xor`	逻辑异或	`x xor y`	从左到右	`true xor true`	`false`
`=`	分配	`x = y`	从右到左	`a = 5`	`5`
`?` `:`	条件表达式	`x ? y : z`	从右到左	`15 > 100 ? 1 : -1`	`-1`
`:`	范围	`x : y`	从右到左	`1:4`	`[1,2,3,4]`
`to`,`in`	单位换算	`x to y`	从左到右	`2 inch to cm`	`5.08 cm`
`==`	平等	`x == y`	从左到右	`2 == 4 - 2`	`true`
`!=`	不等	`x != y`	从左到右	`2 != 3`	`true`
`<`	较小	`x < y`	从左到右	`2 < 3`	`true`
`>`	较大	`x > y`	从左到右	`2 > 3`	`false`
`<=`	斯莫勒雷克	`x <= y`	从左到右	`4 <= 3`	`false`
`>=`	Largereq	`x >= y`	从左到右	`2 + 4 >= 6`	`true`

运算符具有以下优先级，从最高到最低：

操作	描述
`(...)` `[...]` `{...}`	分组矩阵对象
`x(...)` `x[...]` `obj.prop` `:`	函数调用矩阵索引属性访问器键/值分隔符
`'`	矩阵转置
`!`	阶乘
`^`,`.^`	幂
`+`, , ,-``~``not	一元加号、一元减号、按位不、逻辑不
`%`,`mod`	百分比，模量
请参阅以下部分	隐式乘法
``, , ,/``.``./	乘法、除法
`+`,`-`	加法、减法
`:`	范围
`to`,`in`	单位换算
`<<`, ,>>``>>>	按位左移位、按位向右算术移位、按位右逻辑移位
`==`, , , , ,!=``<``>``<=``>=	关系
`&`	按位和（延迟计算）
`^	`
`	`
`and`	逻辑和（延迟评估）
`xor`	逻辑异或
`or`	逻辑或（延迟评估）
`?`,`:`	条件表达式
`=`	分配
`,`	参数和列分隔符
`;`	行分隔符
`\n`,`;`	语句分隔符