Матричный калькулятор Javascript с формой HTML

ProgramBox

Матричный калькулятор Javascript с формой HTML

Post author:admin
Запись опубликована:3 февраля, 2023
Post category:Вопросы по программированию

#javascript #foreach #forms #matrix-multiplication

#javascript #foreach #формы #матрица-умножение

Вопрос:

У меня есть веб-сайт, который обучает студентов конечной математике http://finitehelp.com .
На сайте у меня есть калькулятор, который выполняет комбинации и перестановки, и теперь я пытаюсь включить матричный калькулятор, который будет складывать, вычитать, умножать и инвертировать матрицы.

Я использую Javascript и библиотеку sylvester http://sylvester.jcoglan.com / для выполнения вычислений. Мне удалось успешно создать программу, которая принимала бы значения, введенные пользователем в форму, и выполняла вычисления, но это работает только для матрицы определенного размера (4×4).

Чего я не могу понять, так это как принимать только значения из формы, которые не являются нулевыми, и создавать из них матрицу, а затем выводить эти значения в соответствующие поля в форме результата.

Некоторые методы Сильвестра, которые я использую

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

В моей форме самая большая матрица, которую вы можете ввести, равна 6×6, потому что им никогда не нужно будет вычислять матрицы больше, чем это.

Что мне нужно, чтобы программа определяла, насколько велики матрицы, создавала из них матрицы Сильвестра и присваивала их переменным. Как только они станут переменными, я могу использовать 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>

Любая помощь будет оценена. При ответе, пожалуйста, имейте в виду, что это всего лишь второй раз, когда я пытаюсь написать программу, так что немного дополнительного объяснения может очень помочь. Спасибо.

1. что бы вы хотели сделать, если пользователь случайным образом оставляет поля пустыми? выдает какую-то ошибку?

2. Всегда ли это квадратные матрицы?

3. Если они оставили поле пустым, а затем заполнили другое после в той же строке, тогда да, это должно быть ошибкой, или предполагается, что пустое значение равно нулю. Например, 3 2 пустых 5 будет ошибкой, но 3 2 7 5 предполагает, что матрица состоит из 4 столбцов.

4. Нет, они не всегда квадратные.

Ответ №1:

Я думаю, вам будет лучше использовать текстовую область и позволить пользователям вводить матрицы в гораздо более естественном формате. Для этого потребуется проанализировать содержимое, но это не сложно. Таким образом, пользователи могут создавать матрицы любого размера. Я могу опубликовать общую функцию «проанализировать содержимое текстовой области, чтобы создать массив» чуть позже.

Кроме того, математика не так уж сложна. Я сделал это некоторое время назад (продукты, сложение, детерминанты), но не могу найти, куда я его поместил. Определители были самыми сложными, если я правильно помню, это был простой вопрос разделения больших матриц на матрицы 2×2 и добавления и вычитания их определителей (все, что мне было нужно, было на веб-сайте Wolfram).