Chapter 2-13. 조건문(javascript)

2025. 3. 31. 23:24·JavaScript

📌 조건문이란?

자바스크립트에서 조건문은 주어진 조건의 참/거짓 여부에 따라 실행할 동작을 제어하는 구문입니다. 이를 통해 프로그램의 흐름을 동적으로 변경할 수 있습니다.

예시:

  • 게임 캐릭터의 HP가 0이냐?
  • 지하철 요금을 낼 만큼 돈이 있냐?
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비교 연산</title>    
</head>

<body>

    <h1></h1>
    <p></p>
    <script>

        const h1 = document.querySelector('h1')
        const p = document.querySelector('p')

        const isThere = confirm("제목 표시를 할까요?")

        if(isThere){

            h1.textContent = " 당신이 내야 할 버스 요금은?"
        }

        const age = parseInt(prompt("나이가 어떻게 되세요??"))
            
        if (age >= 20) {
            p.textContent = "1250원입니다.!"
        } else {
            p.textContent = "760원입니다다!!"
        }

        if (age >= 20) {
            p.textContent = "1250원입니다.!"
        } else if(age >= 8 ) {
            p.textContent = "760원입니다!!"
        } else{
            p.textContent = "무료입니다!!"
        }

</script>
</body>
</html>

🚦 조건문의 종류

  1. if문:
    1. 가장 기본적인 조건문으로, 조건이 참일 때 실행할 코드를 작성합니다.
let age = 18;
if (age < 20) {
    console.log("미성년자입니다");  // true일 경우 실행
}
  1. if-else문:
    • 조건이 참일 때 실행할 일과, 조건이 거짓일 때 실행할 일을 정의합니다.
let age = 18;
if (age < 20) {
    console.log("미성년자입니다");  // true일 경우 실행
} else {
    console.log("성인입니다");  // false일 경우 실행
}
  1. else if문:
    • 여러 조건을 비교할 때 유용하며, 여러 가지 조건을 순차적으로 비교합니다.
     
let age = 18;
if (age < 13) {
    console.log("어린이입니다");
} else if (age < 20) {
    console.log("미성년자입니다");
} else {
    console.log("성인입니다");
}

💡 조건문 활용 예시

  • if문을 사용하여 간단한 조건 검사를 할 수 있습니다.
  • if-else문을 사용하면 두 가지 조건에 따라 동작을 분기시킬 수 있습니다.
  • **else if**를 사용하여 다수의 조건을 순차적으로 검사하고 처리할 수 있습니다.

✅ 마무리

조건문을 사용하면 프로그램에서 조건에 맞는 동작을 제어할 수 있습니다. if, else, else if 구문을 적절하게 사용하여 다양한 상황에 맞는 동작을 실행할 수 있습니다. 이처럼 조건문은 자바스크립트에서 프로그램의 흐름을 제어하는 데 매우 중요한 역할을 합니다. ​

'JavaScript' 카테고리의 다른 글

Chapter 2-11. DOM 메소드 및 속성(javascript)  (0) 2025.03.31
Chapter 2-14. 반복문 for(javascript)  (0) 2025.03.31
Chapter 2-12. 비교연산(javascript)  (0) 2025.03.31
Chapter 1-9. DOM 소개  (0) 2025.03.31
Chapter 1-8. undefined 외  (0) 2025.03.31
'JavaScript' 카테고리의 다른 글
  • Chapter 2-11. DOM 메소드 및 속성(javascript)
  • Chapter 2-14. 반복문 for(javascript)
  • Chapter 2-12. 비교연산(javascript)
  • Chapter 1-9. DOM 소개
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (777)
      • Python (32)
      • 프로젝트 (101)
      • 과제 (25)
      • Database (40)
      • 멘토링 (11)
      • 특강 (37)
      • 기술블로그 (41)
      • 기술블로그-Fastapi편 (33)
      • 기술블로그-Django편 (153)
      • 기술블로그-Flask편 (36)
      • AI 분석 (5)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (77)
      • Fastapi (16)
      • 연예 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    hotcoffeecase
    classaction
    chatgpterror
    americaparty
    RM
    homebartrend
    gpterror
    뷔
    btscomeback
    btsjungkook
    chinanightlife
    travel ban
    self-growth
    livebroadcast
    btsreunion
    youngprofessionals
    titaniumcase
    life reflection
    global politics
    americanlaw
    btsdischarge
    newpoliticalparty
    college reunions
    urbantrends
    lawsuitculture
    smartphonedurability
    basalcellcarcinoma
    bts
    remittance
    trumpmuskclash
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
Chapter 2-13. 조건문(javascript)
상단으로

티스토리툴바