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

날짜:
함수에 대해 배워보자. 함수는 두개의 변수인 x, y간의 관계를 나타내는 것이다. x에 대해 y가 하나씩 대응된다. 이것을 좀더 수학적으로 엄밀히 정의하기 위해 다음과 같은 용어를 만들었다.

  • 정의역: 변수 x의 전체 집합
  • 공역: 변수 y의 전체 집합
  • 치역: 정의역의 모든 x에 대해 갖을 수 있는 y(함수값)의 집합


일차 함수 (Linear Function)


함수는 일반적으로 아래와 같이 나타낸다.


일차함수는 f(x)가 x의 일차식 형태로 되어 있는 경우로 가장 간단하다. 나중에 그래프를 보면 알겠지만 직선이기 때문에 선형(Linear)이라고 한다.


위의 식에서 a와 b는 상수(Constant)이다. 함수는 그래프라는 것으로 나타낼 수 있다. 수의 기하학적 의미 에 대해 먼저 알면 평면상에 x와 y 값의 짝을 쉽게 표현하는 것을 그래프(Graph)라고 한다.

일차 함수 (y = ax + b)

a:

b:



함수: y = 2x + 1

웹브라우져를 통해 그래프를 나타내는 것은 지금까지의 코딩과 달리 약간 복잡하다.

  1. 폼(Form)을 통해서 상수를 입력 받기
  2. 자바스크립트(Javascript)에서 입력된 문자열을 숫자로 바꾸고 수식 계산 및 그래프 그리는 함수 호출하기
  3. 구글 차트(Google Charts)를 이용하여 함수를 그리기

한가지 주의점은 위 세가지 중에 1,2는 body에서 구현하고, 3은 header에서 구현한다.

<!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) {
        // 데이터 형식을 정의하고 등록하기
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'y');

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

        // 차트 옵션을 정의하기
        var options = {
            title: 'y = ' + a + 'x + ' + b,
            legend: 'none',
            pointSize: 10,
            hAxis: {title: 'x'},
            vAxis: {title: 'y'}
        };

        // 차트 그리는 라이브러리 함수 호출하기
        var chart = new google.visualization.LineChart(document.getElementById('chart'));

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

<h4>일차 함수 (y = ax + b)</h4>

<form>
  a: <input type="text" id="a" value="2"><br><br>
  b: <input type="text" id="b" value="1"><br><br>
  <input type="button" id="draw_graph" value="그래프 그리기"><br><br>
</form>

<p id="description">함수: y = 2x + 1</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);
        if (isNaN(a) || isNaN(b)) {
            document.getElementById("description").innerHTML = "입력된 문자가 숫가가 아닙니다. 그래프를 그리기 위해서는 숫자를 입력하세요.";
            return;
        }
        //차트 그리는 함수 호출하기
        drawChart(a, b);
        document.getElementById("description").innerHTML = '함수: y = ' + a + 'x + ' + b;
    }
</script>

</body>
</html>

구글 차트 에 대한 상세한 내용은 여기서 생략하고, 간단하게만 그 절차(Procedure)를 정리하면 아래와 같다.

  1. 구글차트의 코어 라이브러리 로딩하기:
    google.charts.load('current', {'packages':['corechart']});
  2. 웹페이지가 로딩될 때 자동으로 실행되는 함수 정의하기:
    google.charts.setOnLoadCallback(drawChart);
  3. 차트를 그리는 함수에서 데이터(x,y) 정의하기
  4. 차트 옵션을 정의하기
  5. 구글차트의 차트그리는 함수 호출하기

수학을 풀어가기 위한 코딩에 대한 기본적인 것은 이제 다 배웠다. 약간의 기능 추가가 있을 수 있지만 이것으로 충분하다. 그리고 이런 기능을 위해 왜 이러한 방식을 쓰는 지에 대해서는 우선은 몰라도 된다. 우리가 그림을 그리기 위해 종이, 붓, 연필 등을 어떻게 만드는지를 알 필요가 없는 것처럼.

이제는 이것들을 잘 익혀, 내가 의식하지 않아도 바로 말이 나오는 것처럼 해보자. 새로운 아이디어는 그러한 무의식적인 기반 위해 발현되는 것이라 생각한다.

댓글

댓글 쓰기