[코풀수: 기본] 계산기 #1

날짜:

단순 계산기


가장 단순한 계산기를 생각해보자. 숫자 2개를 입력하면 곱한 값을 보여주는 계산기이다. 최소한의 필요한 것이 뭘까?

  1. 숫자를 입력받기
  2. 입력받은 두 숫자를 곱하기
  3. 곱해서 나온 값을 출력하기


수식으로 나타내면 다음과 같다. (입력된 값이 3, 4라고 하자.)





수식에서는 굳이 숫자를 입력 받는 부분과 결과값을 출력하는 것을 나타낼 필요가 없다. 머리로 생각하면 되기 때문이다. 하지만 실제 눈에 보이는 계산기를 만들려면 어떻게 해야할까? 현실 세계에서 손으로 만질 수 있는 계산기를 만들려면 혼자서는 거의 불가능하다.

컴퓨터에게 그것을 하게 하는 것(코딩)은 매우 쉽다. 이제 해보자. 먼저 생각해 봐야 할 것이 있다. 어디에다 계산기를 만들 것인가? 이것에 따라 사용할 코딩 언어가 달라진다. 여기서는 웹브라우져에서 보일 수 있게 할 것이다.

HTML 파일


아래 코드를 메모장이나 Visual Studio Code 등에 카피한 후에 calculator1.html로 저장하고 크롬 브라우저 등으로 열어보자.

<!DOCTYPE html>
<html>
<title>계산기 #1</title>
<body>

<h1>제목: 계산기 #1</h1>

<form>
  a: <input type="text" id="a" value="3"><br>
  b: <input type="text" id="b" value ="4"><br>
  <input type="button" id="multiply" value="곱하기">
</form>

<p id="result">답: </p>

<script>
    document.getElementById("multiply").addEventListener("click", calc);
    function calc() {
        a = document.getElementById("a").value;
        b = document.getElementById("b").value;
        text = a*b;
        document.getElementById("result").innerHTML = "답: " + text;
    }
</script>

</body>
</html>

html와 javascript 기본 문법을 알아야하긴 하지만, 여기서 설명하지는 않을 것이다. 이번에는 큰 흐름만 익혀 보자. <body>와 </body> 사이의 내용만 간단히 분석해 보자.

  1. 제목을 큰글씨(h1)로 맨위에 나타내고,
  2. 폼(form)으로 입력창과 계산 버튼을 화면에 나타내고,
  3. 스크립트(script)로 버튼이 눌려 졌을 때 입력된 문자열을 숫자로 변환하여 곱하고 그 값을 원하는 위치(p id="result")에 보여준다.

제목: 계산기 #1

a:
b:
답:

댓글

댓글 쓰기