JavaScript(자바스크립트),HTML, 이용해서 계산기 만들기
계산기 만들기는 몇번 만들어봤는데
alert창에 입력해서 계산하거나 웹페이지에서 숫자 입력해서 만들어는데
이번에는 틀까지해서 만들어볼까 한다..ㅎㅎ
계산기했을때 생각나는 모양이 연산자랑 숫자만 생각나서
대충 틀만 잡아서 만들고나니 이렇게 나왔다.(미흡.,)
근데 만들다 보니 욕심이 생겨서
계산기 틀을보고 다시 모양부터 잡아보자 하고
구글에 계산기라고 쳐서보니 아래 사진 처럼 나왔다.
(진작에쳐볼걸싶었다. 뭐든 만들기 전에는 틀을 잡아서 계산해서 만들어야겠다고 다시한번 느꼈다.)
왼쪽은 빼고 오른쪽 모양 틀만 잡아서 만들어볼려고 한다.
실행했을때
이렇게 나왔다 .
아까보다 더 만족스럽다.
자바스크립트 코드도 넣어서 입력도 되게 만들고, 좀 더 꾸며볼까 한다.
<완성형>
Top Middle Bottom
만들 부분을 이렇게 크게 나눠서 생각했고
그안에 그 중간에 TopMiddle MiddeleBottom 이렇게 또 나눠서 작업했다
계산기 틀은 <HTML>태그안에 <div> 이용해서 <button> 에 <class>이름을 줘서 작성했다.
<!--긁지않은개발자-->
<button onclick="버튼이름('들어갈숫자나 연산자')">들어갈숫자나 연산자</button>
클래스명, 버튼명은 이렇게 만들어줬다.
<!--긁지않은개발자-->
<button class="calc-button" onclick="appendValue('7')">7</button>
나머지는 그대로 만들고
버튼C(초기화), 버튼 =(결과값) 버튼만 다르게 작성했다.
버튼 C
<!--긁지않은개발자-->
<button class="calc-button" onclick="clearDisplay()">C</button>버튼 =
<!--긁지않은개발자-->
<button class="calc-button" onclick="calculator()">=</button>
계산기만들기 HTML (버튼끼리 붙어서 나와서 style줄려고 class이름은 동일하게 만들었다.)
<!--Top --> <div class="top-calc">
<button class="calc-button" onclick="appendValue('(')">(</button>
<button class="calc-button" onclick="appendValue(')')">)</button>
<button class="calc-button" onclick="appendValue('%')">%</button>
<button class="calc-button" onclick="clearDisplay()">C</button>
</div>
<!-- Middle, top -->
<div class="middle-calc">
<button class="calc-button" onclick="appendValue('7')">7</button>
<button class="calc-button" onclick="appendValue('8')">8</button>
<button class="calc-button" onclick="appendValue('9')">9</button>
<button class="calc-button" onclick="appendValue('/')">/</button>
</div>
<!-- Middle -->
<div class="middle-bottom-calc">
<button class="calc-button" onclick="appendValue('4')">4</button>
<button class="calc-button" onclick="appendValue('5')">5</button>
<button class="calc-button" onclick="appendValue('6')">6</button>
<button class="calc-button" onclick="appendValue('*')">*</button>
</div><!-- Middle,bottom -->
<div class="bottom-to-middle-calc">
<button class="calc-button" onclick="appendValue('1')">1</button>
<button class="calc-button" onclick="appendValue('2')">2</button>
<button class="calc-button" onclick="appendValue('3')">3</button>
<button class="calc-button" onclick="appendValue('+')">+</button>
</div><!-- Bottom -->
<div class="bottom-calc">
<button class="calc-button" onclick="appendValue('0')">0</button>
<button class="calc-button" onclick="appendValue('.')">.</button>
<button class="calc-button" onclick="calculator()">=</button>
<button class="calc-button" onclick="appendValue('-')">-</button>
</div>
<style> 태그 width, margin을 넣어서 위에 계산입력창과 크기를 비슷하게 만들어봤다. 훨씬깔끔
<!--긁지않은개발자-->
<style type="text/css">
.calc-button{ width:30px; margin: 2px; }
</style>
그냥 실행하면 만든 계산기는 웹브라우저에 왼쪽에 붙어서 나왔는데 중앙으로 옮기고싶어서
div 전체로 묶어서 클래스를 만들고 style태그를 작성할려고한다.
<div class="cal-background" style="text-align:center;">
<h2>계산기</h2> 제목 작성하고
내가만든 계시판이라고
밑에 글씨도 출력해줬다.
<h6 style="margin-bottom:0px;">긁지않은개발자</h6>
<h6 style="margin:0px">https://h0-0cat.tistory.com/</h6>
이렇게 만들고 실행시켜보면
이렇게 나온다.
이제 버튼을 눌렀을때 뭔가 버튼에 적힌 연산자나 숫자가 text박스에 입력되고, 정확한 값이 나오도록
자바스크립트를 작성해보자.
<script type="text/javascript">
//
function updateDisplay(value) {
document.getElementById('display').value = value;
}
//
function appendValue(value) {
document.getElementById('display').value += value;
}
//
function clearDisplay() {
document.getElementById('display').value = '';
}
//
function calculator() {
let statement = document.getElementById('display').value;
try {
result = eval(statement);
updateDisplay(result);
} catch (error) {
updateDisplay('Error');
}
}
/* 자바스크립트 배울때
DOMContentLoaded 이벤트는 document 객체에서 발생합니다.
따라서 이 이벤트를 다루려면 addEventListener를 사용해야 합니다.
*/
document.addEventListener('DOMContentLoaded', function() {
let calc = document.getElementById('calcCase');
calc.classList.add('open');
});
</script>이렇게 작성해봤다.
실행 결과
잘 작동하는지 테스트해보기
이런식으로 제대로 입력하지 않았을 경우
제대로 입력할 경우
잘 작동된다.
'긁지않은개발자 > 프로그램' 카테고리의 다른 글
| [프로그램] Eclipse(이클립스) 설치방법 (0) | 2023.05.28 |
|---|