나이 범주 확인기 만들기: JavaScript if-else 문 사용법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보 웹 개발자: JavaScript 기초 문법(especially if-else)을 익히고자 하는 개발자
- 난이도: 초급(HTML/CSS 기초 지식 필요)
핵심 요약
- JavaScript if-else 문은 조건에 따라 동작을 분기하는 핵심 논리 구조
- HTML 입력 필드 + CSS 스타일링 + JavaScript 로직을 결합하여 나이 범주를 동적으로 판단
if-else if-else중첩 구조로 5가지 나이 범주(Child,Teenager,Adult,Senior Citizen,Healthy Person) 분류
섹션별 세부 요약
1. if-else 문의 역할
- 조건 판단 기능:
if (condition) { ... } else { ... }형식으로 코드 실행 흐름 제어 - 상단부터 하단까지 조건 검사: 첫 번째 참인 조건만 실행
- 예시:
```javascript
if (age >= 80) { show = "Healthy Person"; }
else if (age >= 60) { show = "Senior Citizen"; }
```
2. HTML 구조
- 입력 필드:
- 제출 버튼:
onclick="checkage()"이벤트 연결 - 결과 출력:
div#show요소에innerHTML로 결과 표시
3. CSS 스타일링
- 화면 중앙 정렬: Flexbox 사용 (
display: flex,justify-content: center) - 디자인 요소:
```css
.box {
background: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
```
4. JavaScript 로직 실행 흐름
- 입력 값 읽기:
document.getElementById("age").value - 조건 분기:
- age >= 80 → Healthy Person
- 60 <= age < 80 → Senior Citizen
- 20 <= age < 60 → Adult
- 12 <= age < 20 → Teenager
- 5 <= age < 12 → Child
- age < 5 → Too Young
- 결과 업데이트:
place.innerHTML =${show}
`
5. 실행 결과 예시
- 입력: 25 → 출력:
Adult
- UI 갱신: 클릭 시 실시간으로 결과 보여줌
결론
- if-else 문은 조건에 따른 동적 UI 생성에 필수적인 JavaScript 기능
- HTML + CSS + JS 연동 예제로 웹 개발 기초를 체계적으로 학습 가능
- 실습 추천: 조건 범위 수정 또는 추가 카테고리(
e.g., Elderly) 확장하여 로직 복잡도 테스트