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

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

3 голосов
/ 20 октября 2011

У меня есть веб-сайт, который учит студентов конечной математике 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>

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

1 Ответ

2 голосов
/ 20 октября 2011

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

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

...