๐ ์ค์ฒฉ if ๋ฌธ ์ค์ด๊ธฐ
์ง๊ธ๊น์ง ์์ฑํ ์ฝ๋์ด๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๊ณ์ฐ๊ธฐ</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">c</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickNumber = (number) => () => {
if (operator){
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
document.querySelector('#num-0').addEventListener('click',onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click',onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click',onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click',onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click',onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click',onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click',onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click',onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click',onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click',onClickNumber('9'));
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickOperator = (op) => () => {
if (numOne){
//์ฐ์ฐ์๋ฅผ operator ๋ณ์์ ์ ์ฅํ๋ฉด์
//ํ๋ฉด( $operator )์๋ ํ์ํ๋ค.
operator = op;
$operator.value = op;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.');
}
};
document.querySelector('#plus').addEventListener('click',onClickOperator('+'));
document.querySelector('#minus').addEventListener('click',onClickOperator('-'));
document.querySelector('#divide').addEventListener('click',onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click',onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click',() => {});
document.querySelector('#clear').addEventListener('click',() => {});
</script>
</body>
</html>
๋ ๋ฒ์งธ ์ซ์ (numTwo) ๋ฅผ ํด๋ฆญํ๋ฉด ์ฒซ ๋ฒ์งธ ์ซ์์ ํฉ์ณ์ง๋ ๋ฒ๊ทธ๊ฐ ์๋ค.
numTwo์ ๊ฐ์ ์ ์ฅํ๊ธฐ ์ ์ ํ๋ฉด์ ๋น์ฐ๋ ์์ ์ด ํ์ํ๋ค.
์ฝ๋๋ฅผ ์์ ํ์.
const onClickNumber = (number) => () => {
if (operator){
if (!numTwo){
$result.value=''; //numTwo์ ๊ฐ์ด ์๋ค๋ฉด ํ๋ฉด์ ๋น์ด๋ค.
}
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};์ฝ๋๋ฅผ ๋ณด๋ฉด if ๋ฌธ ๋ด๋ถ์ ๋ค์ if ๋ฌธ์ด ์กด์ฌํ๋ค. ์ด๋ฐ ์ํฉ์ if ๋ฌธ์ด ์ค์ฒฉ๋๋ค๊ณ ํํํ๋ค.
์ค๋ฌด์์๋ ์ด๋ฐ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
if (์กฐ๊ฑดA) {
if (์กฐ๊ฑดB) {
if (์กฐ๊ฑดC) {
}
} else {
if (์กฐ๊ฑดD) {
// ๋๋ ์ด๋ ๋ ์คํ๋์ง?
if (์กฐ๊ฑดE) {
} else {
// ๋๋?
}
// ๋๋?
} else {
}
}
}
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ด ๊ฐ์ ์ํฉ์ ํผํ๋ ๊ฒ ์ข๋ค. ๊ธฐ์กด ์ฝ๋์ ์ค์ฒฉ์ ์ ๊ฑฐํด๋ณด์.
| - ์ค์ฒฉ์ ์ ๊ฑฐํ๋ ๋ฐฉ๋ฒ - |
| 1. if ๋ฌธ ๋ค์์ ๋์ค๋ ๊ณตํต๋ ์ ์ฐจ๋ฅผ ๊ฐ ๋ถ๊ธฐ์ ๋ด๋ถ์ ๋ฃ๋๋ค. |
| 2. ๋ถ๊ธฐ์ ์์ ์งง์ ์ ์ฐจ๋ถํฐ ์คํํ๊ฒ if ๋ฌธ์ ์์ฑํ๋ค. |
| 3. ์งง์ ์ ์ฐจ๊ฐ ๋๋๋ฉด return ( ํจ์ ๋ด๋ถ์ ๊ฒฝ์ฐ ) ์ด๋ break ( for ๋ฌธ ๋ด๋ถ์ ๊ฒฝ์ฐ ) ๋ก ์ค๋จํ๋ค. |
| 4. else ๋ฅผ ์ ๊ฑฐํ๋ค. ( ์ด๋ ์ค์ฒฉ ํ๋๊ฐ ์ ๊ฑฐ๋๋ค. ) |
| 5. ๋ค์ ์ค์ฒฉ๋ ๋ถ๊ธฐ์ ์ด ๋์ค๋ฉด 1~4 ์ ๊ณผ์ ์ ๋ฐ๋ณตํ๋ค. |
์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ก onClickNumber ํจ์์์ if ๋ฌธ๊ณผ ์๊ด์์ด ์คํ๋๋ ๋ถ๋ถ์ $result.value += number;์ด๋ค.
์ด ๋ถ๋ถ์ ๊ฐ ๋ถ๊ธฐ์ ์์ ๋ฃ๋๋ค.
const onClickNumber = (number) => () => {
if (operator){
if (!numTwo){
$result.value=''; //numTwo์ ๊ฐ์ด ์๋ค๋ฉด ํ๋ฉด์ ๋น์ด๋ค.
}
numTwo += number;
$result.value += number;
} else {
numOne += number;
$result.value += number;
}
};๋ ๋ฒ์งธ ๋จ๊ณ๋ก ์ด๋ค ๋ถ๊ธฐ์ ์ ์ ์ฐจ๊ฐ ๋ ์งง์์ง ํ์ธํ๋ค.
operator ๊ฐ ์์ผ๋ฉด ์ ์ฐจ๊ฐ ๋ ์งง์ผ๋ฏ๋ก ๋จผ์ ์์ฑํ๋ค. ์ด๋ ์กฐ๊ฑด๋ฌธ์ operator ์์ !operator ๊ฐ ๋๋ค.
const onClickNumber = (number) => () => {
if (!operator){
numOne += number;
$result.value += number;
} else {
if (!numTwo){
$result.value=''; //numTwo์ ๊ฐ์ด ์๋ค๋ฉด ํ๋ฉด์ ๋น์ด๋ค.
}
numTwo += number;
$result.value += number;
}
};์ธ ๋ฒ์งธ ๋จ๊ณ๋ก !operator ์ผ ๋์ ์ ์ฐจ๊ฐ ๋ง๋ฌด๋ฆฌ๋๋ฉด return ์ผ๋ก ํจ์๋ฅผ ์ข ๋ฃํ๋ค.
๋ค ๋ฒ์งธ ๋จ๊ณ๋ก return ์๋ซ๋ถ๋ถ์ ๋ฌด์กฐ๊ฑด operator ์ผ ๋๋ง ์คํ๋๋ฏ๋ก else ๋ฌธ์ผ๋ก ๊ฐ์ ํ์๊ฐ ์๋ค.
const onClickNumber = (number) => () => {
if (!operator){
numOne += number;
$result.value += number;
return; //!operator ์ผ ๋์ ์ ์ฐจ๊ฐ ๋ง๋ฌด๋ฆฌ๋๋ฉด ํจ์ ์ข
๋ฃ.
}
// ์ด ์๋๋ก๋ operator๊ฐ ์กด์ฌํ๋ ๊ฒฝ์ฐ์๋ง ์คํ๋จ.
if (!numTwo){
$result.value=''; //numTwo์ ๊ฐ์ด ์๋ค๋ฉด ํ๋ฉด์ ๋น์ด๋ค.
}
numTwo += number;
$result.value += number;
};
์ด๋ ๊ฒ ์ค์ฒฉ๋ if ๋ฌธ์ด ์ฌ๋ผ์ก๋ค.
else ๋ฌธ์ด ์ฌ๋ผ์ ธ์ ์ฝ๊ธฐ ์ด๋ ต๋ค๊ณ ์๊ฐํ ์๋ ์์ง๋ง ์ต์ํด์ง๋ฉด ๋๋ค.
์งง์ ์ ์ฐจ๊ฐ ๋จผ์ ๋์จ๋ค๊ณ ์๊ฐํ์.
์ฝ๋์์ ๋ช ๋จ๊ณ๊น์ง ์ค์ฒฉ์ ํ์ฉํ ์ง์ ๋ํ ์ ๋ต์ ์๋ค.
๋ค๋ง, ๋๋ถ๋ถ์ ์ค์ฒฉ 3๋จ๊ณ๋ถํฐ ์ฝ๋๊ฐ ์ฝ๊ธฐ ์ด๋ ค์์ง๋ค๊ณ ์๊ฐํ๋ฏ๋ก 3๋จ๊ณ๊น์ง ๊ฐ์ง ์๊ธฐ๋ฅผ ์ถ์ฒํ๋ค.
Quiz!
๋ค์ if ๋ฌธ์ ์ค์ฒฉ์ ์ค์ฌ๋ผ.
function test() {
let result = '';
if (a) {
if (!b) {
result = 'c'; }
} else {
result = 'a';
}
result += 'b';
return result;
};
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ1) if ๋ฌธ ๋ค์์ ๋์ค๋ ๊ณตํต๋ ์ ์ฐจ๋ฅผ ๊ฐ ๋ถ๊ธฐ์ ๋ด๋ถ์ ๋ฃ๋๋ค.
function test() {
let result = '';
if (a) {
if (!b) {
result = 'c';
}
result += 'b';
return result;
} else {
result = 'a';
result += 'b';
return result;
}
};
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ2) ๋ถ๊ธฐ์ ์์ ์งง์ ์ ์ฐจ๋ถํฐ ์คํํ๊ฒ if ๋ฌธ์ ์์ฑํ๋ค.
function test() {
let result = '';
if (!a) {
result = 'a';
result += 'b';
return result;
} else {
if (!b) {
result = 'c';
}
result += 'b';
return result;
}
};
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ3) ์งง์ ์ ์ฐจ๊ฐ ๋๋๋ฉด return ( ํจ์ ๋ด๋ถ์ ๊ฒฝ์ฐ ) ์ด๋ break ( for ๋ฌธ ๋ด๋ถ์ ๊ฒฝ์ฐ ) ๋ก ์ค๋จํ๋ค.
์งง์ ์ ์ฐจ์ ์ด๋ฏธ return ์ด ๋ค์ด ์์ผ๋ฏ๋ก ๋ฐ๋ก ํ ์ผ์ ์๋ค.
4) else ๋ฅผ ์ ๊ฑฐํ๋ค. ( ์ด๋ ์ค์ฒฉ ํ๋๊ฐ ์ ๊ฑฐ๋๋ค. )
function test() {
let result = '';
if (!a) {
result = 'a';
result += 'b';
return result;
}
if (!b) {
result = 'c';
}
result += 'b';
return result;
};
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ5) ๋ค์ ์ค์ฒฉ๋ ๋ถ๊ธฐ์ ์ด ๋์ฌ ๋ 1~4์ ๊ณผ์ ์ ๋ฐ๋ณตํ๋ค.
๋ค์ ๋ถ๊ธฐ์ ์ ์ค์ฒฉ๋์ง ์์ผ๋ฏ๋ก ์ค์ฒฉ์ ์ ๊ฑฐํ๋ ๊ณผ์ ์ด ๋ง๋ฌด๋ฆฌ๋๋ค.
๐ ๊ฒฐ๊ณผ ๊ณ์ฐํ๊ธฐ
์ด์ ์ด๋ฒคํธ๋ฆฌ์คํฐ๋ฅผ ๋ฌ์์ ๊ฒฐ๊ณผ๋ฅผ ์ถ๋ ฅํ์.
์ด ์์๋์ ๋ฐ๋ผ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
'์ซ์ 1๊ณผ ์ซ์ 2์ ์ฐ์ฐ์๋ฅผ ์ ์ฉํด ๊ณ์ฐํ๋ค' ๋ผ๋ ์ ์ฐจ๋ฅผ ์ด๋ป๊ฒ ๊ตฌํํ ๊น?
ํ์ฌ operator ๋ณ์๋ +, -, *, / ๊ฐ์ ๋ฌธ์์ด์ ์ ์ฅํ๊ณ ์๋ค. ์ด๋ฐ ๋ฌธ์์ด์ ์ด๋ป๊ฒ ์ฐ์ฐ์๋ก ๋ฐ๊ฟ๊น?
๋ฌธ์์ด์ ์๋ฃํ ์ค ํ๋๋ก ์ฐ์ฐ์์๋ ๋ค๋ฅด๋ฏ๋ก ๋ฌธ์์ด์ ์ฐ์ฐ์๋ก ๋ฐ๊ฟ ์ ์๋ค.
ํ์ง๋ง ๋ฌธ์์ด์ ๋ฐ๋ผ ๋ค๋ฅธ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋๋ก ์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํด ๋ถ๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํ ์ ์๋ค.
document.querySelector('#calculate').addEventListener('click',() => {
if (numTwo){
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
//๋นผ๊ธฐ,๊ณฑํ๊ธฐ,๋๋๊ธฐ๋ฅผ ํ ๋๋ ์ซ์๋ก ๋ฐ๊ฟ ํ์๊ฐ ์๋ค.
//์ด ์ฐ์ฐ์๋ค์ ์๋์ผ๋ก ๋ฌธ์์ด์ ์ซ์๋ก ๋ฐ๊พผ ํ ๊ณ์ฐํ๋ค.
$result.value = numOne - numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
default:
break;
}
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.');
}
});Note!
switch ๋ฌธ์ด ๋ญ์์ง?
switch (์กฐ๊ฑด์) {
case ๋น๊ต ์กฐ๊ฑด์:
์คํ๋ฌธ;
}switch ๋ฌธ์๋ ์กฐ๊ฑด์ 2๊ฐ๊ฐ ์ฌ์ฉ๋๋ค.
switch ์ ์๊ดํธ ์กฐ๊ฑด์์ ๊ฐ์ด case์ ๋น๊ต ์กฐ๊ฑด์ ๊ฐ๊ณผ ์ผ์น (==) ํ๋ฉด ํด๋น ์คํ๋ฌธ์ด ์คํ๋๋ค.
default ๊ฐ ๋ญ์์ง?
์ด๋ ํ case ๋ ์ผ์นํ์ง ์์ ๋ ์คํํ๋ case ๋ ๋ง๋ค ์ ์๋ค.
let value = 'F';
switch (value) {
case 'A':
console.log('A');
break;
case 'B':
console.log('B');
break;
case 'C':
console.log('C');
break;
default:
console.log('์๋ฌด๊ฒ๋ ์ผ์นํ์ง ์์');
}
์๋ฌด๊ฒ๋ ์ผ์นํ์ง ์์
//์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐswitch ๋ฌธ์ด ๋ ๊ถ๊ธํ๋ค๋ฉด ํด๋ฆญ
[ JavaScript ] else, else if, switch
๐ else๋ฅผ ์ฌ์ฉํด ๋ ๋ฐฉํฅ์ผ๋ก ๋ถ๊ธฐํ๊ธฐ if (์กฐ๊ฑด์) { //์กฐ๊ฑด์์ด ์ฐธ์ธ ๊ฐ์ผ ๋ ์คํ ์คํ๋ฌธ; } else { //์กฐ๊ฑด์์ด ๊ฑฐ์ง์ธ ๊ฐ์ผ ๋ ์คํ ์คํ๋ฌธ; } ๐ else if๋ฅผ ์ฌ์ฉํด ์ฌ๋ฌ ๋ฐฉํฅ์ผ๋ก ๋ถ๊ธฐํ๊ธฐ if (์กฐ๊ฑด
irro.tistory.com
switch ๋ฌธ ๋์ if ๋ฌธ์ ์ฌ์ฉํด๋ ๋๋ค.
๋ค๋ง, ์กฐ๊ฑด์ ํด๋นํ๋ ๋ณ์๊ฐ operator๋ก ๊ณ์ ๊ฐ์ผ๋ฏ๋ก switch ๋ฌธ์ด ๋ ๊น๋ํ๋ค.
๋ํ ๋ parseInt๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ธ ํน์ดํ๊ฐ?
์ฒ์์ numOne๊ณผ numTwo๋ฅผ ๋ฌธ์์ด๋ก ์ ์ฅํ๋ค. ๋ฌธ์์ด๋ผ๋ฆฌ ๋ํ๋ฉด ์ํ๋ ๊ฒฐ๊ณผ๊ฐ์ ์ป์ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
๊ฐ๊ฐ parseInt ํจ์๋ฅผ ํตํด ์ซ์๋ก ๋ฐ๊พผ ํ ๋ํ๋ค.
๋นผ๊ธฐ, ๊ณฑํ๊ธฐ, ๋๋๊ธฐ๋ฅผ ํ ๋๋ ์ซ์๋ก ๋ฐ๊ฟ ํ์๊ฐ ์๋ค. ์ด ์ฐ์ฐ์๋ค์ ์ฌ์ฉํ ๋๋ ์๋์ผ๋ก ๋ฌธ์์ด์ ์ซ์๋ก ๋ฐ๊พผ ํ์ ๊ณ์ฐํ๋ค.
Note!
eval ์ฌ์ฉํ๊ธฐ
์์์ ๋ฌธ์์ด์ ์ฐ์ฐ์๋ก ๋ฐ๊ฟ ์ ์๋ค๊ณ ํ์ง๋ง, ๋ฌธ์์ด์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ฒ๋ผ ์คํํ๋ ๋ฐฉ๋ฒ์ด ์๋ค.
eval ํจ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
โ eval ํจ์ ์ฌ์ฉ ์์
eval('1 + 2'); // 3 //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
document.querySelector('#calculate').addEventListener('click', () => { if (numTwo) { $result.value = eval(numOne + operator + numTwo); } else { alert('์ซ์๋ฅผ ๋จผ์ ์ ๋ ฅํ์ธ์.'); } }); //์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์๋ฅผ ๋ค์ด numOne์ด 1, operator๊ฐ +, numTwo๊ฐ 2 ์ธ ๊ฒฝ์ฐ, numOne + operator + numTwo ๋ '1+2' ๋ผ๋ ๋ฌธ์์ด์ด ๋๋ค.
์ฝ๋๊ฐ ๊ฐ๋จํด์ ํธ๋ฆฌํ ๊ธฐ๋ฅ์ด์ง๋ง, eval ํจ์์ ๋ฌธ์์ด์ ์ ๋ ฅํ๋ฉด ๊ทธ๋๋ก ์คํ๋๋ฏ๋ก ํด์ปค๊ฐ ์ํํ ์ฝ๋๋ฅผ ์คํํ ์๋ ์๋ค.
๋ฐ๋ผ์ ์ค๋ฌด์์๋ eval ํจ์์ ์ฌ์ฉ์ ํผํ๋ ๊ฒ์ด ๋ณด์์ ์์ ํ๋ค.
๐ ๊ณ์ฐ ์ด๊ธฐํํ๊ธฐ
์ด์ c ๋ฒํผ์ด ํด๋ฆญ๋๋ ๊ฒ์ ๊ฐ์งํ ์ด๋ฒคํธ ๋ฆฌ์คํฐ๋ฅผ ์์ฑํ๊ฒ ๋ค.
๋ชจ๋ ๊ฒ์ ์ด๊ธฐํํ๋ ๊ฒ์ด๋ค. ์ฆ, ์ฒ์ ์ํ๋ก ๋๋๋ฆฌ๋ ๊ฒ์ ์๋ฏธํ๋ค.
๋ณ์์ ํจ์ ๋ชจ๋ ์ด๊ธฐ ์ํ๋ก ์ค์ ํ๋ฉด ๋๋ค.
document.querySelector('#clear').addEventListener('click',() => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = ''; //ํ๋ฉด์ ๋ณด์ด๊ฒ ํ๋ ๊ฒ.
$result.value = ''; //ํ๋ฉด์ ๋ณด์ด๊ฒ ํ๋ ๊ฒ.
});์ด๊ธฐํ ๋๋ ์ฝ๋์ด๋ค.
์ง๊ธ ๊ตฌํ๋ ์ฝ๋๋ก๋ ํ ๋ฒ๋ง ๊ณ์ฐํ ์ ์๋ค.
์ฐ์ด์ด ๊ณ์ฐํ๋ ๊ธฐ๋ฅ์ ๋ค์ ๊ฒ์๋ฌผ์์ ํ๊ฒ ๋ค.
๐งธ ์ ์ฒด ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๊ณ์ฐ๊ธฐ</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">c</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickNumber = (number) => () => {
if (!operator){
numOne += number;
$result.value += number;
return; //!operator ์ผ ๋์ ์ ์ฐจ๊ฐ ๋ง๋ฌด๋ฆฌ๋๋ฉด ํจ์ ์ข
๋ฃ.
}
// ์ด ์๋๋ก๋ operator๊ฐ ์กด์ฌํ๋ ๊ฒฝ์ฐ์๋ง ์คํ๋จ.
if (!numTwo){
$result.value=''; //numTwo์ ๊ฐ์ด ์๋ค๋ฉด ํ๋ฉด์ ๋น์ด๋ค.
}
numTwo += number;
$result.value += number;
};
document.querySelector('#num-0').addEventListener('click',onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click',onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click',onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click',onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click',onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click',onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click',onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click',onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click',onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click',onClickNumber('9'));
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickOperator = (op) => () => {
if (numOne){
//์ฐ์ฐ์๋ฅผ operator ๋ณ์์ ์ ์ฅํ๋ฉด์
//ํ๋ฉด( $operator )์๋ ํ์ํ๋ค.
operator = op;
$operator.value = op;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.');
}
};
document.querySelector('#plus').addEventListener('click',onClickOperator('+'));
document.querySelector('#minus').addEventListener('click',onClickOperator('-'));
document.querySelector('#divide').addEventListener('click',onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click',onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click',() => {
if (numTwo){
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
//๋นผ๊ธฐ,๊ณฑํ๊ธฐ,๋๋๊ธฐ๋ฅผ ํ ๋๋ ์ซ์๋ก ๋ฐ๊ฟ ํ์๊ฐ ์๋ค.
//์ด ์ฐ์ฐ์๋ค์ ์๋์ผ๋ก ๋ฌธ์์ด์ ์ซ์๋ก ๋ฐ๊พผ ํ ๊ณ์ฐํ๋ค.
$result.value = numOne - numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
default:
break;
}
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.');
}
});
document.querySelector('#clear').addEventListener('click',() => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = ''; //ํ๋ฉด์ ๋ณด์ด๊ฒ ํ๋ ๊ฒ.
$result.value = ''; //ํ๋ฉด์ ๋ณด์ด๊ฒ ํ๋ ๊ฒ.
});
</script>
</body>
</html>
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
