如何在javascript

时间：2018-06-03 19:04:42

标签： javascript parsing math

我正在制作一个项目来解决Runge-Kutta方法（数值方法）

我需要从输入文本解析两个变量的简单数学表达式，并在js代码中粘贴

例如，这是方法之一：

＆＃13;
＆＃13; 
var x = 1, // this is the firt variable
    y = 2, // this is the second variable
    yn, fun, h = 0.05;


var i = 0;

// This is Euler method
while (x < 2) {

    i += 1;
    // this is the funcion and depends to two variables
    //here is when I need to paste the function using global variables
    fun = ((1 + x) / (1 + y));
    yn = y + h * (fun);
    console.log(" # " + i + " Yn+1 = " + yn + " Yn = " + y + " x = " + x + "\n");
    x += h;
    y = yn;

}
＆＃13;
＆＃13;
＆＃13;

这是我对html的想法，只是设计：

我需要获取输入文本中的值并在js代码中解析它

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <link href="style.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="col-lg-4 col-lg-offset-4">
            <h1 class="text-center">Runge-Kutta Methods</h1>
            <p class="text-center">Enter the function in the terms of X and Y:</p>
            <p class="help"></p>
            <input type="text" value="((1 + x) / (1 + y))" id="input" class="form-control" />
            <table class="table">
                <thead>

                </thead>
                <tbody id="tbody">
                        <tr>
                                <th>
                                    <p class="text-center">H:</p>
                                    <input type="number" value="H" id="input" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">X:</p>
                                    <input type="number" value="X" id="input" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">f(X):</p>
                                    <input type="number" value="Y" id="input" class="form-control" />
                                </th>
                            </tr>

                </tbody>
            </table>


            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler improved</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Ralston</button>
                </div>
              </div>

              <br>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Yn+1</th>
                        <th>Yn</th>
                        <th>X</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>

            <script src="main.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果要解析简单的数学表达式，则必须使用<script src="http://silentmatt.com/parser3.js"></script>，然后可以替换“ x”和“ y”，并且可以使用在输入中编写的函数。

我以您为例，通过单击“ euler”按钮来计算函数的结果。onclick 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="http://silentmatt.com/parser3.js"></script>
    <script>
    var x = 1, // this is the firt variable
    y = 2, // this is the second variable
    yn, fun, h = 0.05;


    var i = 0;

    // This is Euler method
    while (x < 2) {

        i += 1;
        // this is the funcion and depends to two variables
        //here is when I need to paste the function using global variables
        fun = ((1 + x) / (1 + y));
        yn = y + h * (fun);
        console.log(" # " + i + " Yn+1 = " + yn + " Yn = " + y + " x = " + x + "\n");
        x += h;
        y = yn;

    }
    function euler(){
        var parser = new Parser();
        //parser.parse("2 * func(2; 2)").evaluate({ func:Math.pow });
        var x = document.getElementById("inputx").value;//'1'; //parseInt(document.getElementById("inputx").value);
        var y = document.getElementById("inputy").value;

        var fun = document.getElementById("fun").value;
            fun=fun.replace('x',x);
            fun=fun.replace('y',y);
            var result = parser.parse(fun).evaluate();
        document.getElementById("res").innerHTML="resultat : "+result;
        console.log(result);
    }
    </script>

    <link href="style.css" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="col-lg-4 col-lg-offset-4">
            <h1 class="text-center">Runge-Kutta Methods</h1>
            <p class="text-center">Enter the function in the terms of X and Y:</p>
            <p class="help"></p>
            <input type="text" id="fun" value="((1 + x) / (1 + y))" id="input" class="form-control" />
            <table class="table">
                <thead>

                </thead>
                <tbody id="tbody">
                        <tr>
                                <th>
                                    <p class="text-center">H:</p>
                                    <input type="number" value="0" id="inputh" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">X:</p>
                                    <input type="number" value="0" id="inputx" class="form-control" />
                                </th>
                                <th>
                                    <p class="text-center">f(X):</p>
                                    <input type="number" value="0" id="inputy" class="form-control" />
                                </th>
                            </tr>

                </tbody>
            </table>


            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default" onclick="euler()">Euler</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Euler improved</button>
                </div>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Ralston</button>
                </div>
              </div>

              <br>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Yn+1</th>
                        <th>Yn</th>
                        <th>X</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
            <div id="res"></div>

            <script src="main.js"></script>
</body>

</html>
相关问题
最新问题