[코풀수: 해석] 이차 함수

날짜:
일차 함수 는 세상에서 가장 많이 쓰이는 함수일 것이다. y = ax + b에서 a는 기울기이고, b는 y절편으로 x가 0일 때의 값이다. 이 의미를 확실히 알아 두어야 한다. 하지만 직선이어서 밋밋하다. 차수를 높여보자.


이차 함수 (Quadratic Function)


이차함수는 일반적인 형태는 아래와 같다. a, b, c는 상수이다.


이차함수는 일반적으로 포물선이라고 부른다. 대포를 쏘면 그 궤적이 이차함수 형태를 띄기 때문이디. 그 이유는 나중에 뉴턴의 만유인력과 운동의 법칙을 배우면 알게 된다. 이차함수의 성질에 대해서도 나중에 다시 다루겠다.

이차 함수 (y = ax^2 + bx + c)

a:

b:

c:



함수: y = 2*x^2 + 1*x - 3

코딩은 일차 함수 때와 거의 동일하다.

  • Header에서 구글차트를 이용해서 차트그리기 (1. 데이터 형식 정의 및 등록, 2. 옵션 정의, 3. 차트 그리기)
  • Body에서 Form을 통해 상수 a, b, c 입력 받기
  • Javascript를 활용하여 입력된 문자열을 숫자로 변환하여 차트그리는 함수 호출하기 

<!DOCTYPE html>
<html>
<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) {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'y');

        for (var i = 0; i < 101; i++) {
            var x = 0.1*(i - 50);
            var y = a * x * x + b * x + c;
            data.addRow([x, y]);
        }

        var options = {
            title: 'y = ' + a + '*x^2 + ' + b + '*x + ' + c,
            curveType: 'function',
            legend: 'none',
            hAxis: {title: 'x'},
            vAxis: {title: 'y'}
        };

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

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

<h4>이차 함수 (y = ax^2 + bx + c)</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="description">함수: y = 2*x^2 + 1*x - 3</p>
<div id="chart" style="width: 100%; height: 500px"></div>

<script>
    document.getElementById("draw_graph").addEventListener("click", draw_graph);
    
    function draw_graph() {
        // 입력된 문자열을 숫자로 바꾸기
        a = Number(document.getElementById("a").value);
        b = Number(document.getElementById("b").value);
        c = Number(document.getElementById("c").value);
        if (isNaN(a) || isNaN(b) || isNaN(c)) {
            document.getElementById("description").innerHTML = "입력된 문자가 숫가가 아닙니다. 그래프를 그리기 위해서는 숫자를 입력하세요.";
            return;
        }

        drawChart(a, b, c);
        document.getElementById("description").innerHTML = '함수: y = ' + a + '*x^2 + ' + b + '*x + ' + c;
    }
</script>

</body>
</html>

댓글

댓글 쓰기