자바스크립트 조건문 if else는 true 참, false 거짓의 조건에 따라 코드를 출력 또는 무시합니다.
조건문 테스트를 위해 예시 코드를 작성합니다. 새로운 html 파일을 하나 만듭니다. head 태그에 문자 인코딩 utf-8 규약 및 타이틀 등 내용을 추가합니다. 본문에는 자바스크립트 document.write 명령으로 apple, banana, coconut, eggs를 순서대로 출력하고 각 내용마다 한 줄씩 줄 바꿈을 하겠습니다. 기본 코드 예시는 아래와 같습니다.
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> if & else Sample </title>
</head>
<body>
<script>
document.write("apple <br>");
document.write("banana <br>");
document.write("coconut <br>");
document.write("eggs <br>");
</script>
</body>
</html>
if(true)는 이어지는 { } 안의 내용을 출력되고, else에 이어지는 { } 안의 내용은 무시합니다.
if(true)에 이어지는 {document.write("banana <br>");}의 코드는 출력됩니다. 반면에 if(true) 이후 else에 이어지는 { document.write("coconut <br>"); }의 코드는 무시됩니다. 원래 코드 그대로 출력되는 apple과 eggs 그리고 if(true)에 의해 출력되는 banana만 출력됩니다. if(true) 이후 else가 적용된 coconut는 무시되어 출력되지 않습니다. 즉 apple, banana, eggs만 출력됩니다.
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> if & else Sample </title>
</head>
<body>
<script>
document.write("apple <br>");
if(true){
document.write("banana <br>");
} else {
document.write("coconut <br>");
}
document.write("eggs <br>");
</script>
</body>
</html>
if(true)는 이어지는 { } 안의 내용을 출력되고, else에 이어지는 { } 안의 내용은 무시합니다.
if(false)에 이어지는 {document.write("banana <br>");}의 코드는 무시됩니다. 반면에 if(false) 이후 else에 이어지는 { document.write("coconut <br>"); }의 코드는 출력됩니다. 원래 코드 그대로 출력되는 apple과 eggs 그리고 if(true) 이후 else가 적용된 coconut만 출력됩니다. if(false)에 이어지는 banana는 무시됩니다. 즉 apple, coconut, eggs만 출력됩니다.
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> if & else Sample </title>
</head>
<body>
<script>
document.write("apple <br>");
if(false){
document.write("banana <br>");
} else {
document.write("coconut <br>");
}
document.write("eggs <br>");
</script>
</body>
</html>
if(true){ 출력되는 코드 } else { 무시되는 코드 }
if(false){ 무시되는 코드) else { 출력되는 코드 }
이 예시에서는 true와 false를 직접 입력했지만, 실제 활용도가 높은 코딩을 위해서 true와 false를 결괏값으로 연산하는 복자반 코드가 사용됩니다.
'코딩' 카테고리의 다른 글
| 리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 (0) | 2020.09.06 |
|---|---|
| html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 (0) | 2020.09.06 |
| Comparison operators 비교연산자와 데이터타입 (Number 숫자열, String 문자열, Boolean 불리언) (0) | 2020.09.05 |
| 자바스크립트로 웹페이지 버튼 클릭했을 때 배경색, 글자색 바꾸기 (0) | 2020.09.04 |
| 자바스크립트 JavaScript alert 이용해 경고창 만들기 (0) | 2020.09.03 |
댓글