5일차(2)/javascript 기초 : if, else 문
- 원하는만큼 반복수행 : for문
- 특정 시점에 실행되도록 : 함수
- '조건부'로 실행하고 싶다면 : if문
<예제1> if 문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_if.html</title>
</head>
<body>
<h1>if 문 테스트</h1>
<button id="actionBtn">동작하기</button>
<p id="info"></p>
<script>
document.querySelector("#actionBtn").addEventListener("click",function(){
let isHungry = confirm("배가 고프면 확인, 아니면 취소를 누르세요");
//웹브라우저야 만일 isHungry에 true가 들어있을 때만 밑에 3줄을 실행해줘!
//만일 isHungry가 true와 같다면 (isHungry 안에 true가 들어있다면)
if(isHungry == true){
document.querySelector("#info").innerText="식사 하세요";
document.querySelector("#info").style.color="green";
document.querySelector("#info").style.backgroundColor="yellow";
}
//만일 배가 고프면
if(isHungry){
document.querySelector("#info").style.fontSize="30px";
}
});
</script>
</body>
</html>
if( ){ };
- if() 문은 ( ) 안에 true가 참조되면 { }에 들어가 있는 함수를 실행하고,
( ) 안에 false가 참조되면 함수를 실행하지 않고 건너뛴다.
- ( ) 안에는 boolean type의 데이터가 들어간다.(true/false가 되는 질문을 넣은 변수)
불리언 타입은 isHungry 등으로 함수명을 문장형으로 지으면 직관적으로 알아보기 좋음!
- 페이지가 로딩될 때 실행되는 코드로 작성한 후,
document.querySelector("#actionBtn").addEventListener("click",function(){ } 안에 넣어서
버튼을 누를 때 실행하는 코드로 바꾸면 쉽다.
** == : 양쪽의 값이 같은지 비교하는 비교연산자
<예제2> if~else 문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_if2.html</title>
</head>
<body>
<h1>if~else 문 사용하기</h1>
<input type="text" id="inputNum" placeholder="숫자를 입력하세요...">
<button id="checkBtn">판별하기</button>
<p id="result"></p>
<script>
/*
input 요소에 숫자를 입력하고 판별하기 버튼을 누르면
입력한 숫자가 양수이면 p 요소에 "양수입니다"를 출력하고,
그렇지 않으면 "양수가 아닙니다"를 출력하기
*/
document.querySelector("#checkBtn").addEventListener("click",function(){
//1. 입력한 숫자를 읽어온다.
let num=Number(document.querySelector("#inputNum").value);
//2. 만일 입력한 숫자가 0보다 크면 id가 result인 요소에 "양수입니다"를 출력하기
if(num > 0){
document.querySelector("#result").innerText="양수입니다.";
}else{
document.querySelector("#result").innerText="양수가 아닙니다.";
}
});
</script>
</body>
</html>- if( ) 괄호 안의 값이 true이면 if() 뒤의 { } 가 실행되고, false이면 else{ } 가 실행된다.
- 양자택일. if/else 중 한쪽만 실행되고, 둘 중 한쪽은 반드시 실행된다.
- if~else 문을 먼저 쓰고 클릭시 실행될 버튼을 만들면 쉽게 작성할 수 있다.
let num=Number(document.querySelector("#inputNum").value);- input type(#inputNum)에 들어온 텍스트를 숫자로 치환하여 num이라는 변수에 대입한다.
if(num > 0){
document.querySelector("#result").innerText="양수입니다.";
};- num이 0보다 크면 p(#result)에 "양수입니다."를 출력한다.
[참고] Number 함수
Number()
- Number("10") = 10
- 문자열 타입의 데이터를 숫자로 리턴해주는 함수! () 안에 string type의 문자열(숫자)를 넣으면 number type 으로 바꾸어준다.
'국비교육(22-23)' 카테고리의 다른 글
| 5일차(4)/javascript 기초 : 연산자 operator (0) | 2022.10.12 |
|---|---|
| 5일차(3)/javascript 기초 : if, else 문(2) (0) | 2022.10.12 |
| 5일차(1)/javascript 기초 : 매개변수, 함수 (0) | 2022.10.12 |
| 4일차(4)/javascript 기초 : event (2) | 2022.10.11 |
| 4일차(3)/javascript 기초 : 반복문 loop (0) | 2022.10.11 |