혜야의 코딩스토리

[JavaScript] 자바스크립트로 간단한 계산기 만들기 본문

꿈 : 멋진 개발자 🧸/JavaScript & jQuery

[JavaScript] 자바스크립트로 간단한 계산기 만들기

hyeya_ 2022. 6. 27. 19:48 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myCalc</title>
<style type="text/css">
table {
 border-collapse: collapse;
 width: 300px;
 height: 500px;
 font-size: 20px;
}
td {
 padding: 5px;
 text-align: center;
 background: #ffe6f9;
}
.oper {
 background: #ffb3da;
}
.calc {
 background: #ff3399;
 color: white;
}
input {
 text-align: right;
 border: none;
 font-size: 20px;
}

</style>
<script type="text/javascript">
function add(char) {
	var display = document.getElementById("display");
	display.value += char;
}
function calc() {
	var display = document.getElementById("display");
	var result = eval(display.value);
	document.getElementById("result").value = result;
}
function reset() {
	document.getElementById("display").value = "";
	document.getElementById("result").value = "";
}
</script>
</head>

<body>
 <table border="1">
  <tr>
   <td colspan="4" style="background: white;"><input type="text" id="display"> </td>
  </tr>
  <tr>
   <td colspan="4" style="background: white;"><input type="text" id="result"> </td>
  </tr>
  <tr>
   <td colspan="3" onclick="reset()" class="oper">AC</td>
   <td onclick="add('/')" class="oper">/</td>
  </tr>
  <tr>
   <td onclick="add(7)">7</td>
   <td onclick="add(8)">8</td>
   <td onclick="add(9)">9</td>
   <td onclick="add('*')" class="oper">*</td>
  </tr>
  <tr>
   <td onclick="add(4)">4</td>
   <td onclick="add(5)">5</td>
   <td onclick="add(6)">6</td>
   <td onclick="add('-')" class="oper">-</td>
  </tr>
  <tr>
   <td onclick="add(1)">1</td>
   <td onclick="add(2)">2</td>
   <td onclick="add(3)">3</td>
   <td onclick="add('+')" class="oper">+</td>
  </tr>
  <tr>
   <td colspan="2" onclick="add(0)">0</td>
   <td onclick="add('.')">.</td>
   <td onclick="calc(7)" class="calc">=</td>
  </tr>
 </table>
</body>
</html>

1. HTML영역에서 <table>태그를 이용하여 계산기 틀을 먼저 만든다.

2. JavaScript에서 함수를 생성하고 onclick을 이용하여 해당 기능을 하는 함수와 연결해준다.

3. CSS에서 보기 좋게 스타일을 적용한다.

 

※eval(): 문자열 기호(" ")를 제거하여 실제 계산을 해주는 함수.
단, eval()은 해커의 공격대상이 될 수 있으므로 주요한 웹페이지에서는 안쓰는 게 좋다.

 

+다음번엔 eval()을 사용하지 않은 계산기를 만들어 봐야겠다.

저작자표시 비영리 변경금지 (새창열림)

'꿈 : 멋진 개발자 🧸 > JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 첨부파일 일괄 다운로드 (체크박스)  (0) 2024.04.17
[jQuery] trigger() 함수  (0) 2023.10.20
[jQuery] 제이 쿼리(jQuery), Ajax(Asynchronous JavaScript And XML)  (0) 2022.07.17
[JavaScript] 문서 객체 모델(DOM, Document Object Model)과 이벤트 처리, 입력 검증  (0) 2022.07.17
[JavaScript] 자바스크립트  (0) 2022.07.17
'꿈 : 멋진 개발자 🧸/JavaScript & jQuery' Related Articles more