[javaScript/실습] 투표할 수 있나요?

'투표할 수 있나요?' 실습으로 조건문과 연산자, 알림창 연습하기

 

 

---

       실습 내용 

"나이를 입력해 주세요!" 창이 뜨고 나이를 입력한다.

나이가 18세 이상이면 → "당신은 투표를 할 수 있습니다!😎"
나이가 18세 미만이면 → "당신은 투표를 하기에 너무 어립니다🥲"

나이가 0세 이하 거나 100세 이상이면 → "정확한 나이를 입력해 주세요.🙂"

 

최종적으로 이런 플로우로 만들어 봤다.

사실 캠프 과제는 콘솔창에 두가지 값이 나오도록 하는 거였는데,

욕심이 생겨서 이것저것 추가하다보니 논리 연산자도 넣고 알림창도 넣게 된 이야기...

 

 

---

      개념 정리 

if 조건문

if (조건) {결과}

if	참일 때 코드를 실행
else if	위 조건이 거짓일 때 다른 조건을 검사
else	위 모든 조건이 거짓일 때 코드를 실행

 

연산자

• 비교 연산자

>=	크거나 같다
<=	작거나 같다
==	참 ('string'과 숫자 구분이 없이 비교)
===	참 (strict하게 비교)
!==	거짓 ('string'과 숫자 구분이 없이 비교)
!===	거짓 (strict하게 비교)

여기서 'string'은 문자열을 의미하는데,

==는 숫자가 일치하는지만 확인하고,

===는 data type까지 확인한다. (더 엄격)

예를 들어

'1' == 1 는 참

'1' === 1 는 거짓

이 된다.

 

• 논리 연산자

&&	그리고 (and)
||	아니면 (or)
!	아닌 (not)

 

알림창

alert	'확인'버튼'만 있는 기본 알림창
confirm	'확인'버튼과 '취소'버튼이 있는 알림창 > 확인은 '참', 취소는 '거짓'으로 값 반환
prompt	'입력란'이 있는 알림창 > 입력한 값 반환, 입력하지 않았다면 'null'로 반환

 

 

---

      완성된 코드 

const age = prompt("나이를 입력해주세요!");

if (age >= 18 && age < 100) {
    alert ("당신은 투표를 할 수 있습니다!😎")
} else if (age < 18 && age > 0) {
    alert ("당신은 투표를 하기에 너무 어립니다🥲")
} else {
    alert ("정확한 나이를 입력해주세요.🙂")
}

 

처음에는 if와 else만 사용하여 18살 이상인 값과 그 외의 값 두 가지로 설정을 했었는데,

 

** 그렇게 하니 '18293', 혹은 '-3' 등 나이일 수 없는 값이나 문자를 쳐도

투표를 할 수 있다거나 어리다는 피드백이 돌아왔다.**

조건문을 사용하는 게 목적인 실습이지만 형편없는 사용성을 참을 수 없었음..

 

그래서 else if와 논리 연산자도 함께 사용하여 이상한 숫자(100 이상 혹은 0 이하),

혹은 숫자 외의 것을 쳤을 때 나오는 피드백도 만들었다.

 

실습 후 추가로 궁금했던 거
'정확한 나이를 입력해 주세요' 알림창 다음에 바로 다시 프롬프트로 넘어가게 할 수 있는지?
애초에 값으로 숫자만 입력되게 할 순 없는지?

 

 

---

 

몇 달 전에 혼자 온라인 강의를 수강하면서 개념을 조금 익혔어서, 조건문이라던가 연산자도 두루뭉술하게 기억이 나는 것 같았다.

그래서 무작정 개념만 대강 다시 보고 코드를 쳤는데 맞는 게 하나도 없었다..

직관적으로 안다고 착각하지 말고 기본기를 정말 탄탄히 처음부터 차근차근 다져야겠다고 다짐....😌

 

그리고 자꾸만 내 페이스를 조절하지 못하고 엉뚱한 곳에 꽂혀서 알아보느라 딴 길로 샌다.

좀 효율적으로 시간 분배를 해서 해야 할 일에 집중하고 남는 시간에 궁금증을 해결하는 습관을 들여야겠다.

 

빨리 실력 키워서 검색 없이 원하는 대로 기능을 구현하고 싶다-!