当前位置： 文江博客话题详情

带有 HTML 表单的 Javascript 矩阵计算器

发布于 2024-12-10 14:43:58 字数 10376 浏览 0 评论 0原文

我有一个教授学生有限数学的网站 http://finitehelp.com。
在网站上，我有一个可以进行组合和排列的计算器，现在我试图包含一个可以进行加法、减法、乘法和逆矩阵的矩阵计算器。

我使用 Javascript 和 sylvester 库 http://sylvester.jcoglan.com/ 进行计算。我能够成功创建一个程序，该程序将获取用户输入表单的值并进行计算，但这仅适用于特定大小（4x4）的矩阵。

我不明白的是如何仅从不为空的表单中获取值并从中创建一个矩阵，然后将这些值输出到结果表单中的适当字段中。

我使用的一些西尔维斯特方法

// create matrix from embedded array and assign to var A
var A = $M([
  [8,3,9],
  [2,0,7],
  [1,9,3]
]);

// create matrix from embedded array and assign to var B
var B = $M([
  [4,1,2],
  [1,5,3],
  [1,7,2]
]);

 // Multiply AB
 A.x(B)

 // assign product of A.x(B) to var res
 var res = A.x(B)

 // return the 1,1 element of res
 res.e(1,1)

在我的形式中，您可以放入的最大矩阵是 6x6，因为它们永远不需要计算比这更大的矩阵。

我需要程序做的是检测矩阵有多大，从中创建西尔维斯特矩阵，并将它们分配给变量。一旦它们成为变量，我就可以使用 sylvester 来执行操作，但我还需要知道如何将结果输出到表单中。

到目前为止，这是我所拥有的

Javascript：

window.onload = function()
{
    document.getElementById('mbutton').onclick = doCalc;
    document.getElementById('subtbutton').onclick = doCalc;
    document.getElementById('addbutton').onclick = doCalc;
}
function doCalc() {
    // assign the inputted values to variables
    var Aval1 = document.matrixCalc.AR1C1.value,
        Aval2 = document.matrixCalc.AR1C2.value,
        Aval3 = document.matrixCalc.AR2C1.value,
        Aval4 = document.matrixCalc.AR2C2.value,
        Bval1 = document.matrixCalc.BR1C1.value,
        Bval2 = document.matrixCalc.BR1C2.value,
        Bval3 = document.matrixCalc.BR2C1.value,
        Bval4 = document.matrixCalc.BR2C2.value;  

    // make matrices out of the inputted values and assign to variables
    var A = $M([
        [Aval1,Aval2],
        [Aval3,Aval4]
        ]);
    var B = $M([
        [Bval1,Bval2],
        [Bval3,Bval4]
        ]);  
    // if user clicks multiply button make the values of
    // the answer form show the appropriate values
    if (this.value == "x") {
        var res = A.x(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "-") {
        var res = A.subtract(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "+") {
        document.matrixCalc.PR1C1.value = parseFloat(Aval1) + parseFloat(Bval1);
        document.matrixCalc.PR1C2.value = parseFloat(Aval2) + parseFloat(Bval2);
        document.matrixCalc.PR2C1.value = parseFloat(Aval3) + parseFloat(Bval3);
        document.matrixCalc.PR2C2.value = parseFloat(Aval4) + parseFloat(Bval4);
    }
}

HTML 表单：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="sylvester.src.js"></script>
<script type="text/javascript" src="matrices.js"></script>
</head>
<body>
<form name="matrixCalc" action="">
<div id="matrix-a">
    <p>Matrix A</p>
    <input type="text" name="AR1C1" size="4" />
    <input type="text" name="AR1C2" size="4" />
    <input type="text" name="AR1C3" size="4" />
    <input type="text" name="AR1C4" size="4" />
    <input type="text" name="AR1C5" size="4" />
    <input type="text" name="AR1C6" size="4" />
    <br/>                                 
    <input type="text" name="AR2C1" size="4" />
    <input type="text" name="AR2C2" size="4" />
    <input type="text" name="AR2C3" size="4" />
    <input type="text" name="AR2C4" size="4" />
    <input type="text" name="AR2C5" size="4" />
    <input type="text" name="AR2C6" size="4" />
    <br/>                                 
    <input type="text" name="AR3C1" size="4" />
    <input type="text" name="AR3C2" size="4" />
    <input type="text" name="AR3C3" size="4" />
    <input type="text" name="AR3C4" size="4" />
    <input type="text" name="AR3C5" size="4" />
    <input type="text" name="AR3C6" size="4" />
    <br/>                                 
    <input type="text" name="AR4C1" size="4" />
    <input type="text" name="AR4C2" size="4" />
    <input type="text" name="AR4C3" size="4" />
    <input type="text" name="AR4C4" size="4" />
    <input type="text" name="AR4C5" size="4" />
    <input type="text" name="AR4C6" size="4" />
    <br/>                                 
    <input type="text" name="AR5C1" size="4" />
    <input type="text" name="AR5C2" size="4" />
    <input type="text" name="AR5C3" size="4" />
    <input type="text" name="AR5C4" size="4" />
    <input type="text" name="AR5C5" size="4" />
    <input type="text" name="AR5C6" size="4" />
    <br/>                                 
    <input type="text" name="AR6C1" size="4" />
    <input type="text" name="AR6C2" size="4" />
    <input type="text" name="AR6C3" size="4" />
    <input type="text" name="AR6C4" size="4" />
    <input type="text" name="AR6C5" size="4" />
    <input type="text" name="AR6C6" size="4" />
</div>
<div id="matrix-b">
    <p>Matrix B</p>                       
    <input type="text" name="BR1C1" size="4" />
    <input type="text" name="BR1C2" size="4" />
    <input type="text" name="BR1C3" size="4" />
    <input type="text" name="BR1C4" size="4" />
    <input type="text" name="BR1C5" size="4" />
    <input type="text" name="BR1C6" size="4" />
    <br/>                             
    <input type="text" name="BR2C1" size="4" />
    <input type="text" name="BR2C2" size="4" />
    <input type="text" name="BR2C3" size="4" />
    <input type="text" name="BR2C4" size="4" />
    <input type="text" name="BR2C5" size="4" />
    <input type="text" name="BR2C6" size="4" />
    <br/>                             
    <input type="text" name="BR3C1" size="4" />
    <input type="text" name="BR3C2" size="4" />
    <input type="text" name="BR3C3" size="4" />
    <input type="text" name="BR3C4" size="4" />
    <input type="text" name="BR3C5" size="4" />
    <input type="text" name="BR3C6" size="4" />
    <br/>                                
    <input type="text" name="BR4C1" size="4" />
    <input type="text" name="BR4C2" size="4" />
    <input type="text" name="BR4C3" size="4" />
    <input type="text" name="BR4C4" size="4" />
    <input type="text" name="BR4C5" size="4" />
    <input type="text" name="BR4C6" size="4" />
    <br/>                                
    <input type="text" name="BR5C1" size="4" />
    <input type="text" name="BR5C2" size="4" />
    <input type="text" name="BR5C3" size="4" />
    <input type="text" name="BR5C4" size="4" />
    <input type="text" name="BR5C5" size="4" />
    <input type="text" name="BR5C6" size="4" />
    <br/>                                
    <input type="text" name="BR6C1" size="4" />
    <input type="text" name="BR6C2" size="4" />
    <input type="text" name="BR6C3" size="4" />
    <input type="text" name="BR6C4" size="4" />
    <input type="text" name="BR6C5" size="4" />
    <input type="text" name="BR6C6" size="4" />
    <br/>
</div>
<div id="buttons">
    <input type="button" id="mbutton" value="x" />
    <input type="button" id="addbutton" value="+" />
    <input type="button" id="subtbutton" value="-" />
</div>
<div id="matrix-c">
    <p>Answer</p>
    <input type="text" name="PR1C1" size="4" />
    <input type="text" name="PR1C2" size="4" />
    <input type="text" name="PR1C3" size="4" />
    <input type="text" name="PR1C4" size="4" />
    <input type="text" name="PR1C5" size="4" />
    <input type="text" name="PR1C6" size="4" />
    <br/>                                
    <input type="text" name="PR2C1" size="4" />
    <input type="text" name="PR2C2" size="4" />
    <input type="text" name="PR2C3" size="4" />
    <input type="text" name="PR2C4" size="4" />
    <input type="text" name="PR2C5" size="4" />
    <input type="text" name="PR2C6" size="4" />
    <br/>                                
    <input type="text" name="PR3C1" size="4" />
    <input type="text" name="PR3C2" size="4" />
    <input type="text" name="PR3C3" size="4" />
    <input type="text" name="PR3C4" size="4" />
    <input type="text" name="PR3C5" size="4" />
    <input type="text" name="PR3C6" size="4" />
    <br/>                               
    <input type="text" name="PR4C1" size="4" />
    <input type="text" name="PR4C2" size="4" />
    <input type="text" name="PR4C3" size="4" />
    <input type="text" name="PR4C4" size="4" />
    <input type="text" name="PR4C5" size="4" />
    <input type="text" name="PR4C6" size="4" />
    <br/>                                
    <input type="text" name="PR5C1" size="4" />
    <input type="text" name="PR5C2" size="4" />
    <input type="text" name="PR5C3" size="4" />
    <input type="text" name="PR5C4" size="4" />
    <input type="text" name="PR5C5" size="4" />
    <input type="text" name="PR5C6" size="4" />
    <br/>                                 
    <input type="text" name="PR6C1" size="4" />
    <input type="text" name="PR6C2" size="4" />
    <input type="text" name="PR6C3" size="4" />
    <input type="text" name="PR6C4" size="4" />
    <input type="text" name="PR6C5" size="4" />
    <input type="text" name="PR6C6" size="4" />
</div>
</body>
</html>

任何帮助将不胜感激。回答时请记住，这只是我第二次尝试编写程序，因此解释中的一点额外内容可能会有很大帮助。谢谢。

原文

I have a website that teaches students finite math http://finitehelp.com.
On the site I have a calculator that does combinations and permutations and now I am trying to include a matrix calculator that will add, subtract, multiply, and inverse matrices.

I am using Javascript and the sylvester library http://sylvester.jcoglan.com/ to do the calculations. I was able to successfully create a program that would take values entered into a form by a user and do the calculations but this only works for a matrix of a specific size (4x4).

What I cannot figure it out is how to only take values from a form which are not null and create a matrix out of them and then output those values into the appropriate fields in the result form.

Some Sylvester methods I am using

// create matrix from embedded array and assign to var A
var A = $M([
  [8,3,9],
  [2,0,7],
  [1,9,3]
]);

// create matrix from embedded array and assign to var B
var B = $M([
  [4,1,2],
  [1,5,3],
  [1,7,2]
]);

 // Multiply AB
 A.x(B)

 // assign product of A.x(B) to var res
 var res = A.x(B)

 // return the 1,1 element of res
 res.e(1,1)

In my form the biggest matrix you can put in is 6x6 because they will never need to calculate matrices larger than this.

What I need the program to do is detect how large the matrices are, create sylvester matrices out of them, and assign them to variables. Once they are variables I can use sylvester to do the operations but I also will need to know how to output the results into a form.

Here is what I have so far

Javascript:

window.onload = function()
{
    document.getElementById('mbutton').onclick = doCalc;
    document.getElementById('subtbutton').onclick = doCalc;
    document.getElementById('addbutton').onclick = doCalc;
}
function doCalc() {
    // assign the inputted values to variables
    var Aval1 = document.matrixCalc.AR1C1.value,
        Aval2 = document.matrixCalc.AR1C2.value,
        Aval3 = document.matrixCalc.AR2C1.value,
        Aval4 = document.matrixCalc.AR2C2.value,
        Bval1 = document.matrixCalc.BR1C1.value,
        Bval2 = document.matrixCalc.BR1C2.value,
        Bval3 = document.matrixCalc.BR2C1.value,
        Bval4 = document.matrixCalc.BR2C2.value;  

    // make matrices out of the inputted values and assign to variables
    var A = $M([
        [Aval1,Aval2],
        [Aval3,Aval4]
        ]);
    var B = $M([
        [Bval1,Bval2],
        [Bval3,Bval4]
        ]);  
    // if user clicks multiply button make the values of
    // the answer form show the appropriate values
    if (this.value == "x") {
        var res = A.x(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "-") {
        var res = A.subtract(B);
        document.matrixCalc.PR1C1.value = res.e(1,1);
        document.matrixCalc.PR1C2.value = res.e(1,2);
        document.matrixCalc.PR2C1.value = res.e(2,1);
        document.matrixCalc.PR2C2.value = res.e(2,2);
    } else if (this.value == "+") {
        document.matrixCalc.PR1C1.value = parseFloat(Aval1) + parseFloat(Bval1);
        document.matrixCalc.PR1C2.value = parseFloat(Aval2) + parseFloat(Bval2);
        document.matrixCalc.PR2C1.value = parseFloat(Aval3) + parseFloat(Bval3);
        document.matrixCalc.PR2C2.value = parseFloat(Aval4) + parseFloat(Bval4);
    }
}

HTML form:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="sylvester.src.js"></script>
<script type="text/javascript" src="matrices.js"></script>
</head>
<body>
<form name="matrixCalc" action="">
<div id="matrix-a">
    <p>Matrix A</p>
    <input type="text" name="AR1C1" size="4" />
    <input type="text" name="AR1C2" size="4" />
    <input type="text" name="AR1C3" size="4" />
    <input type="text" name="AR1C4" size="4" />
    <input type="text" name="AR1C5" size="4" />
    <input type="text" name="AR1C6" size="4" />
    <br/>                                 
    <input type="text" name="AR2C1" size="4" />
    <input type="text" name="AR2C2" size="4" />
    <input type="text" name="AR2C3" size="4" />
    <input type="text" name="AR2C4" size="4" />
    <input type="text" name="AR2C5" size="4" />
    <input type="text" name="AR2C6" size="4" />
    <br/>                                 
    <input type="text" name="AR3C1" size="4" />
    <input type="text" name="AR3C2" size="4" />
    <input type="text" name="AR3C3" size="4" />
    <input type="text" name="AR3C4" size="4" />
    <input type="text" name="AR3C5" size="4" />
    <input type="text" name="AR3C6" size="4" />
    <br/>                                 
    <input type="text" name="AR4C1" size="4" />
    <input type="text" name="AR4C2" size="4" />
    <input type="text" name="AR4C3" size="4" />
    <input type="text" name="AR4C4" size="4" />
    <input type="text" name="AR4C5" size="4" />
    <input type="text" name="AR4C6" size="4" />
    <br/>                                 
    <input type="text" name="AR5C1" size="4" />
    <input type="text" name="AR5C2" size="4" />
    <input type="text" name="AR5C3" size="4" />
    <input type="text" name="AR5C4" size="4" />
    <input type="text" name="AR5C5" size="4" />
    <input type="text" name="AR5C6" size="4" />
    <br/>                                 
    <input type="text" name="AR6C1" size="4" />
    <input type="text" name="AR6C2" size="4" />
    <input type="text" name="AR6C3" size="4" />
    <input type="text" name="AR6C4" size="4" />
    <input type="text" name="AR6C5" size="4" />
    <input type="text" name="AR6C6" size="4" />
</div>
<div id="matrix-b">
    <p>Matrix B</p>                       
    <input type="text" name="BR1C1" size="4" />
    <input type="text" name="BR1C2" size="4" />
    <input type="text" name="BR1C3" size="4" />
    <input type="text" name="BR1C4" size="4" />
    <input type="text" name="BR1C5" size="4" />
    <input type="text" name="BR1C6" size="4" />
    <br/>                             
    <input type="text" name="BR2C1" size="4" />
    <input type="text" name="BR2C2" size="4" />
    <input type="text" name="BR2C3" size="4" />
    <input type="text" name="BR2C4" size="4" />
    <input type="text" name="BR2C5" size="4" />
    <input type="text" name="BR2C6" size="4" />
    <br/>                             
    <input type="text" name="BR3C1" size="4" />
    <input type="text" name="BR3C2" size="4" />
    <input type="text" name="BR3C3" size="4" />
    <input type="text" name="BR3C4" size="4" />
    <input type="text" name="BR3C5" size="4" />
    <input type="text" name="BR3C6" size="4" />
    <br/>                                
    <input type="text" name="BR4C1" size="4" />
    <input type="text" name="BR4C2" size="4" />
    <input type="text" name="BR4C3" size="4" />
    <input type="text" name="BR4C4" size="4" />
    <input type="text" name="BR4C5" size="4" />
    <input type="text" name="BR4C6" size="4" />
    <br/>                                
    <input type="text" name="BR5C1" size="4" />
    <input type="text" name="BR5C2" size="4" />
    <input type="text" name="BR5C3" size="4" />
    <input type="text" name="BR5C4" size="4" />
    <input type="text" name="BR5C5" size="4" />
    <input type="text" name="BR5C6" size="4" />
    <br/>                                
    <input type="text" name="BR6C1" size="4" />
    <input type="text" name="BR6C2" size="4" />
    <input type="text" name="BR6C3" size="4" />
    <input type="text" name="BR6C4" size="4" />
    <input type="text" name="BR6C5" size="4" />
    <input type="text" name="BR6C6" size="4" />
    <br/>
</div>
<div id="buttons">
    <input type="button" id="mbutton" value="x" />
    <input type="button" id="addbutton" value="+" />
    <input type="button" id="subtbutton" value="-" />
</div>
<div id="matrix-c">
    <p>Answer</p>
    <input type="text" name="PR1C1" size="4" />
    <input type="text" name="PR1C2" size="4" />
    <input type="text" name="PR1C3" size="4" />
    <input type="text" name="PR1C4" size="4" />
    <input type="text" name="PR1C5" size="4" />
    <input type="text" name="PR1C6" size="4" />
    <br/>                                
    <input type="text" name="PR2C1" size="4" />
    <input type="text" name="PR2C2" size="4" />
    <input type="text" name="PR2C3" size="4" />
    <input type="text" name="PR2C4" size="4" />
    <input type="text" name="PR2C5" size="4" />
    <input type="text" name="PR2C6" size="4" />
    <br/>                                
    <input type="text" name="PR3C1" size="4" />
    <input type="text" name="PR3C2" size="4" />
    <input type="text" name="PR3C3" size="4" />
    <input type="text" name="PR3C4" size="4" />
    <input type="text" name="PR3C5" size="4" />
    <input type="text" name="PR3C6" size="4" />
    <br/>                               
    <input type="text" name="PR4C1" size="4" />
    <input type="text" name="PR4C2" size="4" />
    <input type="text" name="PR4C3" size="4" />
    <input type="text" name="PR4C4" size="4" />
    <input type="text" name="PR4C5" size="4" />
    <input type="text" name="PR4C6" size="4" />
    <br/>                                
    <input type="text" name="PR5C1" size="4" />
    <input type="text" name="PR5C2" size="4" />
    <input type="text" name="PR5C3" size="4" />
    <input type="text" name="PR5C4" size="4" />
    <input type="text" name="PR5C5" size="4" />
    <input type="text" name="PR5C6" size="4" />
    <br/>                                 
    <input type="text" name="PR6C1" size="4" />
    <input type="text" name="PR6C2" size="4" />
    <input type="text" name="PR6C3" size="4" />
    <input type="text" name="PR6C4" size="4" />
    <input type="text" name="PR6C5" size="4" />
    <input type="text" name="PR6C6" size="4" />
</div>
</body>
</html>

Any help would be appreciated. When answering please keep in mind that this is only the second time I've tried to write a program so that little bit extra in the explanation could help a great deal. Thank you.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

小红帽 2024-12-17 14:43:58

我认为您会发现最好使用文本区域并让用户以更自然的格式输入矩阵。它需要解析内容，但这并不难。这样用户就可以创建任何大小的矩阵。稍后我可以发布一个通用的“解析文本区域内容以制作数组”函数。

而且，数学并不难。我前段时间做过（产品、加法、决定因素），但找不到我把它放在哪里。行列式是最困难的，如果我没记错的话，这只是将较大的矩阵分割成 2x2 矩阵并添加和减去它们的行列式的简单问题（我需要的一切都在 Wolfram 网站上）。

I think you will find it better to use a textarea and let users type in matrices in a much more natural format. It will require parsing the content, but that's not hard. That way users can create any size matrix. I can post a generic "parse textarea content to make an array" function a little later.

Also, the maths isn't that hard. I did it some time ago (products, addition, determinants) but can't find where I put it. Determinants were the most difficult, if I remember correctly it was a simple matter of splitting larger matrices into 2x2 matrices and adding and subtracting their determinants (everything I needed was on the Wolfram web site).

回复 原文
~没有更多了~

关于作者

把回忆走一遍

暂无简介

0 文章
0 评论
498 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文