[javascript] if, else 조건문 1

[javascript] if, else 조건문 1

본 글은 MDN 사이트를 참고 하였습니다.

목차

• if else 문 사용 설명
• if else 사용 예시
• 실행 결과

if else 문 사용 설명

• "if" 명령어 이후 "()"가 옵니다.
• "()" 안에는 조건문이 들어옵니다. 예를 들어 "10 보다 크다면", "이름이 Terry 라면"와 같은 의미가 포함 됩니다.
• "()" 뒤에는 {} 가 나옵니다.
• "{}"안에는 조건문이 참일 때 실행 시키고자 하는 코드가 들어가야 합니다.
• 만약, 조건이 거짓을 때 시행하고 싶은 코드가 있다면 "{}" 뒤에 "else"를 입력합니다.
• "else" 뒤에는 "{}"가 옵니다.
• "{}" 안에는 조건이 결과일 때 실행시키고자 하는 코드가 들어가야 합니다.
• 결과적으로 아래와 같이 코드가 구성 됩니다.

• 
  if (조건문){
      참 일때 실행시키고자 하는 코드
  } else {
      거짓 일때 실행시키고자 하는 코드
  }
  

if else 사용 예시

• 이벤트 참여 대상자의 기본 정보를 보여주는 웹 프로그램을 만듭니다.
• 신청 받은 사람의 이름을 선택하면 신청 받은 사람이 제공한 나이, 성별, 사는 지역 좋아하는 상품 카테고리를 보여줍니다.
• 프로그램의 html 코드는 아래와 같습니다.

• 
  <label for="hhname">기본 정보를 보고 싶은 사람을 선택해주세요 : </label>
      <select id="hhnameresult">
          <option value="">--Make a choice--</option>
          <option value="sunny">김철수</option>
          <option value="rainy">박영희</option>
          <option value="snowing">최훈</option>
      </select>
  <h1 id="hhnameresult"></h1>
      

• 프로그램의 javascript 코드는 아래와 같습니다.

• 
  const select = document.querySelector('#hhname');
  const para = document.querySelector('#hhnameresult');
  
  select.addEventListener('change', setEvent);
  
  function setEvent() {
      const choice = select.value;
  
      if (choice === '김철수') {
          para.textContent = '25세, 남자, 서울, 청바지';
      } else if (choice === '박영희') {
          para.textContent = '26세, 여자, 양평, 파자마';
      } else if (choice === '최훈') {
          para.textContent = '30세, 남자, 수원, 고기';
      } else {
          para.textContent = '';
      }
  }
      

실행 결과

• 위 코드를 시행하면 아래와 같은 결과를 볼 수 있습니다.
• 기본 정보를 보고 싶은 사람을 선택해주세요 : --Make a choice-- 김철수 박영희 최훈

본 글은 MDN 사이트를 참고 하였습니다.