본문 바로가기
Javascript

Vscode javascript로 객체 활용하여 계산기 만들기

by Antonio Bae 2023. 7. 11.

 

<선행학습: 객체로 버튼에 접근하는 방법>

우선 계산기를 만들기 전에 객체에 접근하는 방법을 알아야 합니다.

1.CalBtn 함수 지정

btnNum값과 btnKind값을 오고

showBtn이라는 함수를 만들기

1)displayNum값에 공란을 두고

2)만약 btnKind가 genBtn이면 displayNum은 btnNum값이 된다.

3) btnGroup을 설정하여 btnGroup id 값을 불러온다.

4)그리고 btnGroup에 displayNum값을 스태킹한다.

 

2.btn1에 genBtn을 불러오는 CalBtn함수(btnNum에 1을, btnKind에 "genBtn"을 대입하는)를 넣고 showBtn함수 호출

3.btn2에 genBtn을 불러오는 CalBtn함수(btnNum에 1을, btnKind에 "genBtn"을 대입하는)를 넣고 showBtn함수 호출

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체로 버튼 접근하는 방법</title>
</head>
 
<body>
<div id="btnGroup"></div>

<script>
function CalBtn(btnNum, btnKind) {
this.btnNum = btnNum;
this.btnKind = btnKind;
this.showBtn = function() {
let displayNum = "";
if(this.btnKind="genBtn") {
displayNum = '<button class="numBtn">' + this.btnNum + "/button>";
}
const btnGroup = document.getElementById("btnGroup");
btnGroup.innerHTML += displayNum;
}
}
let btn1 = new CalBtn(1,"genBtn");
btn1.showBtn();
let btn2 = new CalBtn(2,"genBtn");
btn2.showBtn();
</script>
</body>
</html>

계산기 만들기 순서

1. oven 페이지 통해 설계도면 그리기

2.CSS그리기

3.버튼 만들기

4.버튼 요소들을 가져옴

5.버튼 클릭 이벤트 핸들러 객체 만들기

6. 버튼 클릭 이벤트 핸들러를 각 버튼에 연결

 

 

1. oven 페이지 통해 설계도면 그리기

무료로 설계도면을 그릴 수 있는 곳입니다.

 

https://ovenapp.io/

 

OvenApp.io

Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)

ovenapp.io

계산기 설계도면 화면

2.CSS그리기

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- font-family: 'Dongle', sans-serif; -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<!-- XEICON 활용 -->
<title>계산기 만들기</title>
<style>
* {
margin: 1%;
padding: 0%;
list-style-type: none;
text-decoration: none;
font-family: 'Dongle', sans-serif;
font-size: 17px;
}

.outBox {
/* font-size: 25px; */
width: 375px;
height: 812px;
background-color: rgb(238, 228, 87);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}

.outputSide {
background-color: rgb(124, 114, 100);
color: rgb(243, 233, 124);
margin-top: 3rem;
width: 20rem;
height: 2rem;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 2rem;

}

.inputSide {
background-color: rgb(212, 223, 220);
margin-top: -5rem;
width: 20rem;
height: 30rem;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 2rem;
flex-wrap: wrap;
/* 컨텐츠가 넘어가면 줄바꿈 */
/* flex-direction: column; */
/* ☆☆☆밑으로 ☆☆☆ */
}

.numBox {
background-color: rgb(49, 165, 236);
color: white;
width: 70px;
height: 70px;
justify-content: flex;
align-items: center;
flex-direction: column;
font-weight: bold;
font-size: 3rem;
text-align: center;
}

.box {
width: 6.5rem;
height: 7rem;
display: flex;
/* border: 1px solid black; */
flex-direction: column;
justify-content: center;
align-items: center;
background-color: lightskyblue;
}

.carculateBox {
width: 5px;
height: 5px;
background-color: rgb(113, 121, 117);
justify-content: flex-end;
align-items: center;
flex-direction: column;
font-weight: bold;
}
</style>

 

3.버튼 만들기

<div class="outBox">
<header>
<input type="text" class="outputSide" id="display">
<br>
<br>
</header>
<section>
<div class="inputSide">
<button class="numBox"data-value="(">(</button>
<button class="numBox"data-value=")">)</button>
<button class="numBox"data-value="%">%</button>
<button class="numBox"data-value="AC">AC</button>
<button class="numBox"data-value="7">7</button>
<button class="numBox"data-value="8">8</button>
<button class="numBox"data-value="9">9</button>
<button class="numBox"data-value="/">÷</button>
<button class="numBox"data-value="4">4</button>
<button class="numBox"data-value="5">5</button>
<button class="numBox"data-value="6">6</button>
<button class="numBox"data-value="*">×</button>
<button class="numBox"data-value="1">1</button>
<button class="numBox"data-value="2">2</button>
<button class="numBox"data-value="3">3</button>
<button class="numBox"data-value="-">-</button>
<button class="numBox"data-value="0">0</button>
<button class="numBox"data-value=".">.</button>
<button class="numBox"data-value="=">=</button>
<button class="numBox"data-value="+">+</button>
</div>
</section>
</div>

4.버튼 요소들을 가져옴

// 버튼 요소들을 가져옴
var buttons = document.getElementsByClassName("numBox");
var display = document.getElementById("display");

5.버튼 클릭 이벤트 핸들러 객체 만들기

// 버튼 클릭 이벤트 핸들러
function buttonClick() {
var value = this.getAttribute("data-value");

// 입력된 값 가져오기
var inputValue = display.value;

// 버튼에 따라 동작 처리
if (value === "=") {
// 등호(=) 버튼일 경우 계산 수행
var result = eval(inputValue);
display.value = result;
} else if (value === "AC") {
// C 버튼일 경우 화면 초기화
display.value = "";
} else {
// 숫자나 연산자 버튼일 경우 입력값에 추가
display.value += value;
}
console.log(display.value);
}

6. 버튼 클릭 이벤트 핸들러를 각 버튼에 연결

// 버튼 클릭 이벤트 핸들러를 각 버튼에 연결
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", buttonClick);
}

 

최종 완성 코드

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- font-family: 'Dongle', sans-serif; -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<!-- XEICON 활용 -->
<title>계산기 만들기</title>
<style>
* {
margin: 1px;
padding: 0%;
list-style-type: none;
text-decoration: none;
font-family: 'Dongle', sans-serif;
font-size: 17px;
}

.outBox {
position: absolute;
top: 50%; left: 50%;
margin-top: -180px;
margin-left: -405px;
/* 가로사이즈의 절반만큼 절대값으로 내리겠다. */
width: 375px;
height: 812px;
background-color: rgb(224, 204, 147);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}

.outputSide {
background-color: rgb(170, 131, 77);
color: rgb(235, 231, 196);
margin-top: 3rem;
width: 20rem;
height: 5rem;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 6rem;
text-align: right;
border-radius: 10px;
border: 0px solid black;
}

.inputSide {
/* background-color: rgb(212, 223, 220); */
margin-top: -5rem;
width: 20rem;
height: 30rem;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 2rem;
flex-wrap: wrap;
/* 컨텐츠가 넘어가면 줄바꿈 */
/* flex-direction: column; */
/* ☆☆☆밑으로 ☆☆☆ */
border: 0px solid black;
}

.numBox {
background-color: rgb(33, 134, 197);
color: white;
width: 70px;
height: 70px;
justify-content: flex;
align-items: center;
flex-direction: column;
font-weight: bold;
font-size: 3rem;
text-align: center;
border-radius: 10px;
border: 0px solid salmon;
}

.box {
width: 6.5rem;
height: 7rem;
display: flex;
/* border: 1px solid black; */
flex-direction: column;
justify-content: center;
align-items: center;
background-color: lightskyblue;
}

.carculateBox {
width: 5px;
height: 5px;
background-color: rgb(113, 121, 117);
justify-content: flex-end;
align-items: center;
flex-direction: column;
font-weight: bold;
}
</style>

</head>

<body>
<div class="outBox">
<header>
<input type="text" class="outputSide" id="display">
<br>
<br>
</header>
<section>
<div class="inputSide">
<button class="numBox"data-value="(">(</button>
<button class="numBox"data-value=")">)</button>
<button class="numBox"data-value="%">%</button>
<button class="numBox"data-value="AC">AC</button>
<button class="numBox"data-value="7">7</button>
<button class="numBox"data-value="8">8</button>
<button class="numBox"data-value="9">9</button>
<button class="numBox"data-value="/">÷</button>
<button class="numBox"data-value="4">4</button>
<button class="numBox"data-value="5">5</button>
<button class="numBox"data-value="6">6</button>
<button class="numBox"data-value="*">×</button>
<button class="numBox"data-value="1">1</button>
<button class="numBox"data-value="2">2</button>
<button class="numBox"data-value="3">3</button>
<button class="numBox"data-value="-">-</button>
<button class="numBox"data-value="0">0</button>
<button class="numBox"data-value=".">.</button>
<button class="numBox"data-value="=">=</button>
<button class="numBox"data-value="+">+</button>
</div>
</section>
</div>
<script>
// 버튼 요소들을 가져옴
var buttons = document.getElementsByClassName("numBox");
var display = document.getElementById("display");

// 버튼 클릭 이벤트 핸들러
function buttonClick() {
var value = this.getAttribute("data-value");

// 입력된 값 가져오기
var inputValue = display.value;

// 버튼에 따라 동작 처리
if (value === "=") {
// 등호(=) 버튼일 경우 계산 수행
var result = eval(inputValue);
display.value = result;
} else if (value === "AC") {
// C 버튼일 경우 화면 초기화
display.value = "";
} else {
// 숫자나 연산자 버튼일 경우 입력값에 추가
display.value += value;
}
console.log(display.value);
}

// 버튼 클릭 이벤트 핸들러를 각 버튼에 연결
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", buttonClick);
}

</script>
</body>

</html>

 

 

저작자표시 (새창열림)

'Javascript' 카테고리의 다른 글

계산기2  (0) 2023.07.14
계산기  (0) 2023.07.12
아스키코드 활용  (0) 2023.07.06
Stack / 삼항연산자 / 스프레드 / Rest / Arguments 정의 및 Object 마음대로 갖고 놀기  (0) 2023.07.05
16진수 -> 10진수 변환 계산기 / 랜덤값 활용한 장미 1000송이 만들기  (0) 2023.07.04

관련글

티스토리툴바