IF 구문
주어진 조건을 만족하는 경우에만 특정 문장을 수행하도록 제어하는 문장
if 구문
~일때 코드를 실행한다.
//조건문에 따라 문장1이 true일때 해당 코드가 실행됨.
if(조건문.boolean type){
문장1
}
예시
<body>
<p id="console"></p>
<script>
/*
if(조건문.boolean type){
문장
}
*/
//연산을 하고나면 결과가 있고 연산자가 있던 자리는 결과 값으로 대체된다.
var inHungry=confirm("배가 고프십니까?");
if(inHungry){
document.querySelector("#console").innerText="어쩌라고";
}
if(inHungry!=true){
document.querySelector("#console").innerText="응";
}
</script>
</body>
if~else 구문
1. 단일 if~else 구문
if(조건문){
문장1;
}else{
문장2;
}
예시
<body>
<h1>양자 택일의 if문 블럭 구성하기</h1>
<p id="console"></p>
<button onclick="input();">클릭</button>
<script>
var input=function(){
var inputNum=prompt("임의의 숫자를 입력하세요.");
var num=parseFloat(inputNum);
if(num>0){
//true일때 코드가 실행됨
document.querySelector("#console").innerText="0보다 큰 수를 입력했네요";
}else{
//false일때 코드가 실행됨
document.querySelector("#console").innerText="0보다 크지 않습니다.";
}
};
</script>
</body>
2. 다중 if~else 구문
if(조건문){
문장1;
}else if(조건문){
문장2;
}else{
문장3;
}
예시
<body>
<h1>다중 if문 테스트</h1>
<button onclick="input();">점수 입력하기</button>
<p id="console"></p>
<script>
var input=function(){
var inputNum=prompt("점수0~100을 입력하세요");
var jumsu=parseFloat(inputNum);
/*
95점을 입력하는 경우 첫번째 조건식에 맞으므로
문장실행하고 다음 조건은 보지 않고 빠져나온다
*/
/*
85점을 입력하는 경우 첫번째 조건식에서 false 인 것을 확인 후,
두번째 조건식이 입력된 값과 맞는지 확인한다.
맞다면 문장을 수행한 뒤 나머지는 빠져나온다.
*/
/*
50점을 입력한 경우, 가장 마지막 문장이 실행됨,
else 뒤에 오는 문장은 위의 조건이 false 일때 실행됨.
*/
if(jumsu>=90){
document.querySelector("#console").innerText="A입니다.";
}else if(jumsu>=80){
document.querySelector("#console").innerText="B입니다.";
}else if(jumsu>=70){
document.querySelector("#console").innerText="C입니다.";
}else if(jumsu>=60){
document.querySelector("#console").innerText="D입니다.";
}else/* if(jumsu<60)*/{
document.querySelector("#console").innerText="F입니다.";
}
};
</script>
</body>
연습문제
문제1.
입력받은 숫자가 0보다 크면 "0보다 큰 수를 입력했네요"라고 출력하고,
입력받은 숫자가 0보다 작으면"0보다 작은수를 입력했네요"라고 출력하기
답
<body>
<p id="one"></p>
<script>
//문자열 입력받기
var inputNum=prompt("숫자를 입력하세요");
//입력받은 문자열을 숫자로 바꾸기
var num=parseFloat(inputNum);
//문제1
//입력받은 숫자가 0보다 크면 "0보다 큰 수를 입력했네요"라고 출력하고,
//입력받은 숫자가 0보다 작으면"0보다 작은수를 입력했네요"라고 출력하기
if(num>0){
document.querySelector("#one").innerText="0보다 큰 수를 입력했네요";
}
if(num<0){
document.querySelector("#one").innerText="0보다 작은수를 입력했네요";
}
</script>
</body>
문제2.
select요소로 선택된 무기를 p요소에 출력하기
답
<body>
<h1>다중 if문 구성하기</h1>
<label for="weapon">무기 선택</label>
<select id="weapon">
<option>선택</option>
<option value="gun">총</option>
<option value="sword">칼</option>
<option value="arrow">활</option>
</select>
<br/>
<button onclick="attack();">공격하기</button>
<p id="console">입력된 무기</p>
<script>
var attack=function(){
//value 내장 객체로 <option> value 속성의 값을 갖고 온다.(console 창에서 확인)
var selectWeapon=document.querySelector("#weapon").value;
if(selectWeapon=="gun"){
document.querySelector("#console").innerText="총";
}else if(selectWeapon=="sword"){
document.querySelector("#console").innerText="칼";
}else if(selectWeapon=="arrow"){
document.querySelector("#console").innerText="활";
}else{
document.querySelector("#console").innerText="기본무기 주먹으로 공격해요";
}
};
</script>
</body>
'Javascript' 카테고리의 다른 글
| 반복문 (0) | 2019.11.06 |
|---|---|
| key값과 value 값 (0) | 2019.11.06 |
| 달리는 캐릭터 만들기 (0) | 2019.11.05 |
| 그림을 사방으로 움직이고, 회전, 리셋 시켜 보기 (0) | 2019.11.05 |
| 버튼 클릭시 자동 계산 되도록하기 (0) | 2019.11.05 |
