[코풀수: 해석] 이차 방정식과 함수

날짜:
이차 방정식 은 근의 공식을 활용하면 해를 구할 수 있었다. 일차 방정식 과 달리 이차 방정식은 판별식의 값에 따라 해가 달라졌다. 이차 함수 를 활용하여 xy 평면상의 그래프로 이차 방정식에 대한 이해를 높여 보자.


이차 방정식의 실근


아래 그래프를 보며 이차 방정식의 실근은 이차 함수와 y = 0, 즉 x 축과 만나는 점이다.


이차 방정식과 함수 (ax^2 + bx + c = 0)

a:

b:

c:



해는?

코딩은 이차 방정식 와 이차 함수 를 합쳐 놓은 것이다. drawChart의 인자에 x_start와 x_length를 추가하였는데, 화면의 그래프에서 해가 항상 보이도록 하기 위해서이다. x_start와 x_length는 해를 구하는 부분(draw_graph)에서 해의 종류에 따라 값을 변경하도록 하였다.

그리고 좀 더 직관적으로 이해하기 쉽게 그래프를 Line이 아닌 Scatter로 변경하고 options에 trendlines를 추가하여 2차 함수로 회귀분석(Regression)하도록 하였다. 회귀분석은 그래프에 찍힌 점들을 내가 원하는 가장 유사한 함수를 찾아 주는 것인데, 현재로서는 마법같은 것이지만, 나중에 수학에 레벨이 높아지면 알게 된다. 기회가 되면 여기서도 다룰 예정이다.

<!DOCTYPE html>
<html>
<header>
    <title>이차 방정식과 함수</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        
        function drawChart(a = 2, b = 1, c = -3, x_start = -1.5, x_length = 2.5) {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');
        
            delta_x = x_length/10;

            for (var i = -5; i <= 15; i++) {
                var x = delta_x * i + x_start;
                var y = a * x * x + b * x + c;
                data.addRow([x, y]);
            }
        
            var options = {
                chart: {title: 'Quadratic Equation and Function'},
                curveType: 'function',
                legend: 'none',
                hAxis: {title: 'x'},
                vAxis: {title: 'y'},
                crosshair: { trigger: "both", orientation: "both" },
                trendlines: {
                    0: {
                        type: 'polynomial',
                        degree: 2,
                        visibleInLegend: true,
                    }
                }
            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart'));

            chart.draw(data, options);
        }
    </script>
</header>
<body>

<h4>이차 방정식과 함수 (ax^2 + bx + c = 0)</h4>

<form>
  a: <input type="text" id="a" value="2"><br><br>
  b: <input type="text" id="b" value="1"><br><br>
  c: <input type="text" id="c" value="-3"><br><br>
  <input type="button" id="draw_graph" value="그래프 그리고 해 구하기"><br><br>
</form>

<p id="result">해는?</p>

<div id="chart" style="width: 100%; height: 500px"></div>

<script>
    document.getElementById("draw_graph").addEventListener("click", draw_graph);
    
    function draw_graph() {
        // 입력된 문자열을 숫자로 바꾸기
        var a = Number(document.getElementById("a").value);
        var b = Number(document.getElementById("b").value);
        var c = Number(document.getElementById("c").value);
        if (isNaN(a) || isNaN(b) || isNaN(c)) {
            document.getElementById("description").innerHTML = "숫자를 입력하세요.";
            return;
        }

        var x_start = 0 , x_length = 2;//그래프를 그리기 위한 시작점과 길이 정의
        if (a == 0) {
            document.getElementById("result").innerHTML = "2차 방정식이 아닙니다.";
            if (b != 0) {
                x_start = -c/b;
            }
        }
        else {
            var det = b * b - 4 * a * c;
            if (det > 0) {
                var x1 = (- b + Math.sqrt(det))/(2 * a);
                var x2 = (- b - Math.sqrt(det))/(2 * a);
                document.getElementById("result").innerHTML = "x1 = " + x1 + ", x2 = " + x2;

                x_start = x2;
                x_length = x1 - x2;
            }
            else if (det == 0)
            {
                var x = -b/(2 * a);
                document.getElementById("result").innerHTML = "x = " + x + " (중근)";

                x_start = x - 1;
            }
            else {
                var x_r = -b/(2 * a);
                var x_i = Math.sqrt(-det)/(2 * a);
                document.getElementById("result").innerHTML = "x1 = " + x_r + " + i*(" + x_i + "), x2 = " + x_r + " - i*(" + x_i + ")";

                x_start = x_r - 1;
            }
        }

        drawChart(a, b, c, x_start, x_length);
    }
</script>

</body>
</html>

댓글

댓글 쓰기