JavaScript 의 조건문은 조건식이 참일 경우 코드가 실행됩니다.
if else 조건문은 조건식이 참/거짓일 경우 각각 실행코드를 설정할 수 있습니다.
JavaScript if 조건문
자바스크립트 if 조건문은 if (조건식) 영역이 true이면 { } 영역의 코드를 1회 실행합니다.
if (조건식) 영역이 false 이면 if 문을 탈출합니다.
if ( 조건문 ) {
실행문 // 조건식이 참일경우에 실행
};
활용 예제 )
확인 버튼을 눌렀을 경우 p 요소에 "당신은 남성이군요" 를 출력하고
취소 버튼을 눌렀을 경우 p 요소에 "당신은 여성이군요" 를 출력시키기
< p id = "one" ></ p >
< p id = "two" ></ p >
< script >
let isMan = confirm ( "당신이 남성이면 확인을 누르고 여성이면 취소를 누르세요" )
// 만일 남성이면 위의 p 요소에 "당신은 남성이군요" 를 출력하고
// 그렇지 않는 경우에는 p 요소에 "당신은 여성이군요" 를 출력하도록 프로그래밍
if ( isMan ) {
document . querySelector ( "#one" ). innerText = "당신은 남성이군요"
} else {
document . querySelector ( "#one" ). innerText = "당신은 여성이군요"
}
// 양자 택일의 간단한 로직은 3 항 연산자를 활용해서 해결할수도 있다.
let result = isMan ? "당신은 남성이군요" : "당신은 여성이군요" ;
document . querySelector ( "#two" ). innerText = result
</ script >
기본 페이지
위 코드를 페이지로 적용시키면 confirm 기능으로인해 확인/취소 의 팝업이 노출되며
"확인" 버튼을 누를경우 isMan이 true로 출력되므로 innerText가 "당신은 남성이군요" 텍스트로 출력된다.
"취소" 버튼을 누를경우 isMan이 false로 출력되므로 innerText가 "당신은 여성이군요" 텍스트가 출력된다.
확인을 누른 경우
취소를 누른 경우
JavaScript if else 조건문
자바스크립트 if else 조건문은 if (조건식) {} 블록 영역에는 ture일 경우에 코드를 실행합니다.
else {} 블록 영역에는 if (조건식)이 false 일 경우에 코드를 실행합니다.
if ( 조건문 ) {
실행문 // 조건식이 true일경우에 실행
} else {
실행문 // 조건식이 false 인 경우에 실행
};
활용 예제 )
input 요소에 몸무게를 입력하고 확인 버튼을 눌렀을때
< h1 > if~else 문 테스트 </ h1 >
< p >
이 번지 점프는 몸무게가 100kg 이 넘으면 탈수가 없습니다.
</ p >
< input type = "text" id = "weight" placeholder = "몸무게 입력..." >
< button onclick = " check ()" > 확인 </ button >
< p id = "result" ></ p >
< script >
let check =() => {
let w = document . querySelector ( "#weight" ). value
if ( w > 100 ) {
document . querySelector ( "#result" ). innerText = "이용 불가 합니다"
} else {
document . querySelector ( "#result" ). innerText = "이용가능"
}
}
</ script >
기본 페이지
몸무게 입력 input 텍스트 칸에 100이상의 값을 입력한뒤 확인을 클릭하면 "이용 불가 합니다" 텍스트 출력
input 텍스트 입력 창에 100이하의 값을 입력한뒤 확인을 클릭하면 "이용가능" 텍스트 출력
100 이상의 값 입력
100 이하의 값 입력
JavaScript if else if 조건문
자바스크립트 if else if 조건문은 두 개 이상의 조건식을 사용할때 사용할 수 있는 조건문 입니다.
if, else if, else 의 세가지 형태의 명령어를 모두 사용합니다.
if (조건식A)가 true이면 if {} 블록 영역의 실행문 a가 작동합니다.
조건식A가 false 일 경우 else if (조건식B) 로 이동합니다.
조건식B가 true 이면 else if {} 블록 내부의 실행문 B가 실행됩니다.
조건식B가 false 이면 else {} 블록 내부의 실행문 C가 마지막으로 실행됩니다.
else if 문은 2개 이상 중첩할 수 있습니다.
if ( 조건문A ) {
실행문A // 조건문A가 true 인 경우에 실행
} else if ( 조건문B ) {
실행문B // 조건문B가 true 인 경우에 실행
} else {
실행문C // 조건식A와 B가 false 인 경우에 실행
};
활용 예제 )
input 요소에 점수를 입력하고 확인하기 버튼을 눌렀을때 점수가
< h1 > 다중 if 문 테스트 </ h1 >
< input type = "text" id = "jumsu" placeholder = "점수 입력....(0~100)" >
< button onclick = " check ()" > 확인하기 </ button >
< p >
< strong id = "result" ></ strong > 학점입니다.
</ p >
< script >
let grade = document . querySelector ( "#result" ). innerText // 이건 사용불가함
let strong2 = document . querySelector ( "#result" ) // strong2.innerText 으로 사용가능
let check =() => {
let j = document . querySelector ( "#jumsu" ). value
if ( j >= 90 ) {
document . querySelector ( "#result" ). innerText = "A"
} else if ( j >= 80 ) {
document . querySelector ( "#result" ). innerText = "B"
} else if ( j >= 70 ) {
document . querySelector ( "#result" ). innerText = "C"
} else if ( j >= 60 ) {
document . querySelector ( "#result" ). innerText = "D"
} else {
document . querySelector ( "#result" ). innerText = "F"
};
};
</ script >
기본 페이지
90 이상의 값 입력
80 이상의 값 입력
70 이상의 값 입력
60 이상의 값 입력
60 미만의 값 입력
