TIL

zumwhol·2021년 4월 17일
0

✍🏻 계산기 주석

function calculate(n1, operator, n2) {
// 3개의 인자를 받는다.
let result = 0; // 각 조건의 맞는 계산 값을 받기 위한 변수
if (연산자 === "+") {
// 만약 연산자가 "+" 이면
result = Number(n1) + Number(n2); // result에 n1 + n1의 값을 재할당(매개변수는 스트링이기때문에 Number나 praseFloat를 이용해 정수를 만든다)
}
if (연산자 === "-") {
// 만약 연산자가 "-" 이면
result = Number(n1) - Number(n2); // result에 n1 - n1의 값을 재할당
}
if (연산자 === "") {
// 만약 연산자 "
" 이면
result = Number(n1) * Number(n2); // result에 n1 * n2의 값을 재할당
}
if (연산자 === "/") {
// 만약 연산자가 "/" 이면
result = Number(n1) / Number(n2); // result에 n1 / n2의 값을 재할당
}
return String(result); // 값을 가진 result를 스트링타입으로 리턴(계산 과정에서 넘버 타입으로 변환했기떄문)
}
buttons.addEventListener("click", function (event) {
// 버튼 class를 모두 담은 변수에 이벤트를 부여했다.
// 첫번째 인자는 이벤트 타입('click')이고,두번째 인자인 함수를 받는다.
const target = event.target; // 인자로 받은 event객체의 target속성(클릭한 요소를 반환)을 target이라는 변수에 할당.
const action = target.classList[0]; // target의 calssList[0] = (DOMTokenList는 0번째)를 action이라는 변수에 할당.
const buttonContent = target.textContent; // target변수에 textContent를 buttonContent에 할당
if (target.matches("button")) {
// 만약 targeting한 선택자를 matchs()를 이용해 "button"인지 확인
// matchs() 요소와 선택자가 일치하는지 판별해주는 메서드
if (action === "number") {
// 만약 클릭한 버튼의 class가 "number"이면
if (첫번째 피연산자.textContent !== "0") {
// 첫번째 피연산자의 textContent가 "0"이 아니라면
두번째 피연산자.textContent = buttonContent; // 두번째 피연산자의 tectContent에 buttonContent의 값을 할당
} else {
// 위의 조건이 아니면
첫번째 피연산자.textContent = buttonContent; // buttonContent의 값을 첫번째 피연산자의 textContent에 할당
}
}
if (action === "operator") {
// 만약 클릭한 버튼의 classa가 "operator"이면
연산자.textContent = buttonContent; // 연산자.textContent에 buttonContent의 값을 할당.
}
if (action === "decimal") {
// console.log('소수점 버튼');
}
// 초기화 화면에 0 + 0 = 0으로 나와야한다.
if (action === "clear") {
// 만약 클릭한 버튼의 class가 "clear"이면
첫번째 피연산자.textContent = "0"; // 첫번째 피연산자.textContent에 "0"를 할당
연산자.textContent = "+"; // 연산자.textContent에 "+"를 할당
두번째 피연산자.textContent = "0"; // 두번째 피연산자.textContent에 "0"을 할당
계산값.textContent = "0"; // 계산값.textContent에 "0"을 할당
}
if (action === "calculate") {
// 만약 클릭한 버튼의 class가 calculate이면
계산값.textContent = calculate(
첫번째 피연산자.textContent,
연산자.textContent,
두번째 피연산자.textContent
);
// 계산값.textContent에 calculate 함수 호출 결과를 할당.
}
}
});

📝 변수명은 바꾸었다! 오늘 matchs() 메서드와 action = target.classList[0]에서 왜 첫번째 인덱스를 가져오는지 이해가 되지 않았는데, 찾아보니 이해가 되었다. 다행쓰.. 내일은 어드벤스드와 리눅스를 더 정리해볼 생각이다.

관심 있을 만한 포스트

0개의 댓글