Javascript 계산기 만들기

오늘은 자바스크립트와 html 을 이용한 계산기를 만들어볼거임

결과물

버튼을 누르면

수식이 입력이 되고 = 을 누르면

계산이 되는걸 확인할 수 있음

HTML 소스

<h3>Jungry Calculator</h3>

<textarea class="calOutput" cols="30" rows="10" style=" width:247px; height:21px;"></textarea>

<br>

<div class="calButton">

<button class="num1" onclick="addOutput(1)">1</button>

<button class="num2" onclick="addOutput(2)">2</button>

<button class="num3" onclick="addOutput(3)">3</button>

<button class="plus" onclick="addOutput('+')">+</button>

<br>

<button class="num4" onclick="addOutput(4)">4</button>

<button class="num5" onclick="addOutput(5)">5</button>

<button class="num6" onclick="addOutput(6)">6</button>

<button class="min" onclick="addOutput('-')">-</button>

<br>

<button class="num7" onclick="addOutput(7)">7</button>

<button class="num8" onclick="addOutput(8)">8</button>

<button class="num9" onclick="addOutput(9)">9</button>

<button class="mul" onclick="addOutput('*')">*</button>

<br>

<button class="init" onclick="init()">C</button>

<button class="num0" onclick="addOutput(0)" >0</button>

<button class="equal" onclick="cal()">=</button>

<button class="div" onclick="addOutput('/')">/</button>

<button class="dot" onclick="addOutput('.')">.</button>

</div>

<script src="cal.js"></script>

TMI 시간 ) 

원래는 버튼들을 js 에서 입력을 받아서 이벤트 리스너로 클릭시 동작하게 만들고 싶었는데 새로고침 할때마다 클릭이된걸로 인식이되어

동작하길래 그냥 onclick 을 사용하게 됨 왜 그런지는 아직도 잘 모르겠음.. 그래서 class를 하나하나 다 지정해줬는데 실제로는 쓰이지 않아서 지워도 상관 없음 ...

버튼을 누를때마다 숫자와 부호들은 addOutput 이라는 함수를 실행하게 된다

C(초기화 버튼) 과 = 은 각각 init() 과 cal() 을 실행하게 된다

Javascript 부분

const output=document.querySelector(".calOutput");

function addOutput(buttonValue){

const outputValue=output.value+buttonValue;

output.value=outputValue;

}

function cal(){

output.value=eval(output.value);

}

function init(){

output.value='';

}

textarea 부분을 결과물이 출력되니까 output 이라는 이름을 지어주었다

addOutput 은 textarea 에 입력된 값들을 출력해주면서 + 수식을 outputValue 라는 변수에 저장을 해준다

cal()은 식을 계산해주는 부분인데 eval() 을 사용하면 입력된 수식을 자동으로 계산해준다

init() 부분은 초기화부분이라서 output.value 값을 빈칸으로 초기화시켜주었다

사실 이게 끝임 안녕 !