📌 계산기 만들기
css 부분은 거의 손대지 않았고, 기능을 구현하는데에 좀 더 집중했다.
이번엔 어떤식으로 했는지만 봐주시면 감사하겠다 😂
처음엔 값을 입력받을 <input>을 만들었는데, 이때 값1과 값2의 type을 number로 하지않은 이유는 칸 안에 스크롤이 생겨서 text로 변경했다.
➡️ 그래서 해당 칸에 숫자를 입력하지 않으면 경고문이 뜨게 만들었다.
사실 <input>에서 type = "number"로 했으면 숫자만 입력받을 수 있게 하는 함수는 만들지 않았어도 됐다..ㅎ 그냥 나의 욕심일뿐..🧐
HTML, CSS 코드
🖋️ 일단 이런식으로 HTML, CSS 코드를 작성했다.
여기서 또 언급할게 있다.
1️⃣ <script src="calculator.js"></script> js파일과 연결하는 코드가 </body> 앞에 있기 때문에 위에서 언급한 함수들인 calculate(), reset()의 매개변수를 넣지 않는 것이다. ( 더 뒤에 있기때문에)
2️⃣ 이번 코드는 <form>태그를 넣지 않아서 상관없지만, 원래는 이런 경우엔 <form> 을 넣는 것이 좋다.
➡️ 이때 주의할점이, <form> 안에 <button>이 있으면 기본값이 전송이기 때문에 type="button"를 해주지 않으면 button의 역할을 제대로 못한다.
<form> 안에서 제대로된 button 역할을 해주고 싶으면 type="button" 필수다~
JS 코드
➡️ 여기서도 이야기할게 많다..!!
1️⃣ 이번 코드에서 document.getElementById() 메소드를 전역변수로 불러온 이유는 .setAttribute()하기 위함이다.
이 또한 변수를 더 만들어서 function안에 넣어도 되긴하다!
- 만약, function
calculate()에 지역변수로 하고 싶으면document.getElementById()메소드 전부 넣고,.setAttribute()를 빼거나, 함수안에서 변수를 새로 만들어서 한번 더 선언하면 된다!
2️⃣ numberOnly() 함수에서 쓰였던 isNaN()은 처음 봤다.
원래는 코드에서 썼던 것처럼 typeof make1 !== 'number' || typeof make2 !== 'number' 로 해서 타입이 숫자가 아닌 것을 걸렀는데 이걸 금방 해결해주는 방법이 있었다.. 😅
isNaN() : 인자로 받은 값이 숫자가 아닌지를 판단하는 역할을 하는 함수
- 'NaN'은 'Not a Number'의 약자로, 숫자가 아님을 의미
- isNaN 함수는 인자로 주어진 값이
숫자가 아니라면 true를,숫자라면 false를 반환
3️⃣ 만약, 숫자가 아닌 값을 입력했으면 경고문을 하고 reset하고 싶었다.
그래서 아래에 만들었던 reset() 함수를 작성했는데, 순서가 더 뒤에 있음에도 적용되는 이유는 호이스팅 때문이다.
- JavaScript에서 함수 선언은
호이스팅이라는 기능 때문에 코드의어느 위치에서든 호출 가능하다! - 즉, 변수나 한수의 선언을 해당 스코프의 가장 위로 끌어올리는 동작방식
✂️ 단, 변수에 함수를 할당한 경우에는 불가하다.
ex) let reset = function() { ... }과 같이 함수를 선언한 경우에는 반드시 함수 선언 전에 호출해야한다.!!!!
4️⃣ 숫자가 아니면 함수 종료
if (!numberOnly(var1, var2)) {
//숫자가 아니면 함수 종료
return;
}➡️ 이 코드는 사용자가 입력한 두 값이 숫자가 아니면, 즉 numberOnly(var1, var2)결과가 false인 경우에 함수를 종료하는 역할
➡️ 거짓인 것을 선택하려면 !(not)이 필요하니까 넣었다. -> false를 true로 바꾸니까!
➡️ 이 조건문이 true일 경우, 즉 var1과 var2가 숫자가 아닌 경우 return; 문이 실행되어 함수가 종료
✅ '만약 var1과 var2가 숫자가 아니라면'이라는 조건문을 의미
5️⃣ 초기화 버튼
말 그대로 빈 값으로 만들어주면 되기 때문에, 인자의 값들에 "" 넣어주면 된다!
실행
마무리 및 회고
간단하다고 볼 수 있는 코드이지만 사실 거의 한시간이 걸렸다.
이것저것 보완하고 시간을 보니 한시간이 지나있어서 깜짝 놀랐다...!
호이스팅이 어떻게 적용되는지 알 수 있어서 좋았다. css부분이 많이 빈약(?)하지만 어떤식으로 하면 더 가시성 좋게 만들 수 있을지 생각해봐야 할 것 같다!
