나같은 경우 자바스크립트에 대해 거의 알지 못하는 상황이었고 html과 css만 기본적으로 알고 있는 상태였다. 하지만 운좋게도 같은 회사 동료 개발자분에게 계산기 만드는 과정을 배울 수 있었고 이 과정을 인터넷에도 공유하면 좋겠다는 생각이 들었다.
계산기는 처음부터 완벽하게 만들기보다는 아주 기본적인 기능부터 시작해서 조금씩 붙여나가는 식으로 진행했다.
아래는 계산기를 완성하기까지 과정을 정리한 것이다.
계산기 기능 정의 및 처리 순서
- 숫자 버튼을 클릭
- 클릭 이벤트가 발생
- 클릭 이벤트가 발생한 버튼의 값들을 저장
- = 버튼을 클릭
- 저장된 값들을 연산
- 인풋에 연산된 결과값 출력
계산기의 기본 구조
계산기를 만드는데 필요한 html, javascript 파일을 각각 만든다.
이때 css파일은 따로 만들지 않는다.
(따로 만들지 않아도 table태그와 button태그가 모양을 어느정도 만들어주고, 여기서 css는 별로 중요하지 않기 때문에…)
우선 html파일에 코드를 넣어 계산기의 기본구조를 만든다. 기본구조를 위해 필요한 요소는 아래와 같다.
- 숫자를 누르면 숫자가 들어갈 공간(인풋)
- 숫자 0~9 버튼
- 연산자 버튼
위 요소는 table태그와 button태그, input태그를 사용해 만든다.
<div class="calc-header">
<input type="text" id="inval">
</div>input 으로 인풋을 만들고
<table>
<tbody>
<tr class="number">
<td></td>
</tr>
</tbody>
</table>table로 행과 열을 만든다.
<tr class="number">
<td><button value="1">1</button></td>
<td><button value="2">2</button></td>
<td><button value="3">3</button></td>
<td><button value="+">+</button></td>
</tr>다음 button 으로 테이블 안에 숫자와 연산자 버튼을 만들어준다.
각 버튼에는 해당하는 값을 지정한다. value값이 있어야 자바스크립트에서 활용이 가능하기 때문이다.
버튼의 숫자가 1이라면 <button value=”1">1</button> 라고 적어주고 연산자일 경우에도 마찬가지로 <button value=”=">=</button> 라고 적어주면 된다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
그 다음 jQuery라는 라이브러리를 넣어서 좀더 편하게 코딩할 수 있도록 한다.
<script type="text/javascript" src="./index.js"></script>마지막으로 자바스크립트 파일 링크를 넣어준다.
html 파일 안에 자바스크립트를 작성해도 상관없지만 따로 자바스크립트 파일을 만들어서 html파일에 링크를 넣어주는 방식이 더 코드를 깔끔하게 관리할 수 있다.
해당작업을 마치고 브라우져로 html 파일을 열면 위와 같은 화면이 나온다.
계산기의 입력칸에 누른 버튼의 값 보여주기
이제 javascript 파일을 수정해서 계산기가 동작하도록 한다.
$(function(){
});처음에 이 코드를 꼭 적어준다. 해당코드는 페이지의 로딩이 완료되었을 때 실행하라는 의미이다.
그 다음 버튼(숫자 또는 연산자)을 눌렀을 때 실행될 동작을 만든다.
$(function(){ $buttons.click(function(){ //버튼을 누르면 아래 내용을 실행 var newVal = $(this).val();//누른 버튼의 value값을 저장
var $inval = $("#inval");//인풋의 id값을 변수에 저장
var oldVal = $inval.val(); // 인풋에 입력된 값 저장
var result = oldVal+newVal; //이전값과 현재 누른 값을 저장
$inval.val(result);//인풋의 value에 결과값 넣어준다 });});
먼저 변수를 만들어서 필요한 값을 담아준다. 변수를 선언할때는 var 을 사용한다.
변수를 선언한 다음 버튼의 값을 변수에 저장해야하는데 버튼의 값을 저장하기 위해서는 val() 과 $()을 사용해야한다.
$()은 jQuery의 method로 선택자를 이용해 원하는 HTML 요소를 가져올 수 있게 해준다.
참고로 선택자를 가져올때 id와 class는 #과 . 을 사용한다.
(ex : $(“#test”) / $(“.test”))
더 자세한 정보는 아래 링크를 참고 바란다.
https://www.w3schools.com/jquery/jquery_selectors.asp
그리고 val()은 HTML 요소에 할당된 value를 가져올 수 있게 한다.
필요한 값들을 변수들에 차례로 저장한 다음 마지막에 저장된 값들을 인풋에 보여준다.
아래는 자바스크립트 전체 코드이다.
이 과정을 마치고나면 버튼을 연속해서 누를 경우 기존에 입력했던 값과 새로 입력한 값 모두 보여진다.
계산기능은 아직 넣지 않았기 때문에 연산기능이 있는 버튼을 눌러도 계산은 되지 않는다…😰
연산기능은 다음단계에서 추가할 것이다.
