JavaScript 기초 – 간단한 계산기 만들기

JavaScript를 활용한 기본 계산기 만들기

오늘은 자바스크립트를 이용하여 간단한 계산기를 제작하는 방법에 대해 알아보겠습니다. 웹 프로그래밍을 처음 시작하는 분들에게 유용한 프로젝트이며, 실습을 통해 기본적인 자바스크립트의 기능을 익힐 수 있습니다. 이 글에서는 HTML, CSS, 그리고 JavaScript 각각의 역할에 대해 설명하고, 실제 코드 예제를 통해 계산기를 구현하는 과정을 안내하겠습니다.

계산기 만들기의 개요

계산기를 만드는 과정은 매우 흥미로운 프로젝트입니다. 기본적으로 사용자로부터 입력을 받고, 그 결과를 출력하는 구조로 이해할 수 있습니다. 사용자가 숫자와 연산자를 입력하면, 그에 따라 계산 결과를 생성하는 방식입니다. 특히 웹상에서 자바스크립트를 활용하면, 사용자가 버튼을 눌렀을 때 발생하는 이벤트를 다룰 수 있습니다.

HTML로 기본 구조 만들기

먼저, 계산기의 기본 구조를 HTML을 통해 설정해야 합니다. 사용자가 입력할 수 있는 영역과 버튼을 배치하여 직관적인 인터페이스를 제공합니다. 아래는 HTML 코드의 예시입니다:

  
  7
  8
  9
  /
  4
  5
  6
  *
  1
  2
  3
  -
  0
  C
  +
  =

위 코드는 입력 필드와 버튼으로 이루어진 계산기의 기본적인 형식을 보여줍니다. 사용자는 버튼을 눌러 숫자와 연산자를 입력할 수 있습니다.

스타일링: CSS로 꾸미기

이제 기본 구조가 완성되었으니, CSS를 이용해 계산기를 보다 보기 좋게 꾸며보겠습니다. CSS는 스타일을 지정하여 사용자 경험을 향상시키는 역할을 합니다. 다음은 스타일링의 예시입니다:

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
  background-color: #f9f9f9;
  width: 400px;
  margin: 100px auto;
  border: 2px solid #ccc;
}
#display {
  grid-column: span 4;
  font-size: 2rem;
  text-align: right;
  padding: 10px;
}
.btn {
  padding: 20px;
  font-size: 1.5rem;
  cursor: pointer;
}

위 CSS 코드를 통해 계산기가 보다 정돈된 레이아웃을 가지게 되며, 사용자에게 친근한 느낌을 제공합니다.

JavaScript로 기능 추가하기

이제 핵심적인 부분인 JavaScript를 통해 계산기의 기능을 구현해보겠습니다. 사용자가 버튼을 클릭할 때마다 입력값을 처리하고, 계산을 수행하는 로직을 작성해야 합니다. 다음은 JavaScript 코드의 예시입니다:

const display = document.getElementById('display'); 
const buttons = document.querySelectorAll('.btn'); 
const clearButton = document.getElementById('clear'); 
const equalsButton = document.getElementById('equals'); 
buttons.forEach(button => {
  button.addEventListener('click', () => {
    display.value += button.textContent; 
  });
});
clearButton.addEventListener('click', () => {
  display.value = ''; 
});
equalsButton.addEventListener('click', () => {
  try {
    display.value = eval(display.value); 
  } catch (error) {
    display.value = 'Error'; 
  }
});

각 버튼에 클릭 이벤트 리스너를 추가하여, 사용자가 버튼을 클릭할 경우 입력 필드에 해당 숫자나 연산자가 추가됩니다. 또한, ‘C’ 버튼을 클릭하면 입력 필드가 초기화되고, ‘=’ 버튼을 클릭하면 입력된 식을 계산해 결과를 표시합니다. 에러가 발생할 경우에는 ‘Error’ 메시지를 출력합니다.

마무리 및 추가 고려사항

이러한 방식으로 자바스크립트를 활용하여 간단한 계산기를 만들어 볼 수 있었습니다. 이 프로젝트를 통해 HTML, CSS, JavaScript의 기본적인 사용법을 익힐 수 있으며, 실제로 작동하는 계산기를 만들어보는 경험을 할 수 있습니다. 더욱 발전시키기 위해 다음과 같은 점들을 고려해볼 수 있습니다:

• 사용자가 입력한 수식의 유효성을 검증하는 기능 추가
• 기타 수학 함수(제곱, 제곱근 등) 구현하기
• UI를 개선하여 사용자에게 보다 나은 경험 제공하기

이와 같은 다양한 기능을 추가해가며 연습하면, 자바스크립트 실력을 더욱 키울 수 있을 것입니다. 실습을 통해 많은 경험을 쌓아보시길 바랍니다.

자주 찾는 질문 Q&A