-
[생활코딩] JavaScript 조건문Study/JavaScript 2019. 12. 1. 19:29반응형
조건문 Conditional statement
조건문이란 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것이다.
조건문 형식
if(false){ alert(1); } else { alert(2); }
if 문 뒤에 따라오는 괄호안에는 불리언 데이터타입(true/false)이 온다
ture면 중괄호에 있는 코드들이 실행되고 else 뒤 중괄호의 코드는 무시된다.
false면 중괄호에 있는 코드들이 무시되고, else 뒤 중괄호의 코드가 실행된다.
즉, if 문 뒤에 있는 불리언의 값이 무엇이냐에 따라서 실행되는 코드가 달라진다.
중요한 것은 우리가 if 뒤 괄호속에 직접 불리언 데이터타입을 쓰는 것이아니라,
조건에 따라서 불리언 값이 true가 되고 false가 되도록 조건문을 활용해야하는 것이다.else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다.
else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다.
else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.if(false){ alert(1); } else if(true){ alert(2); } else if(true){ alert(3); } else { alert(4); }
변수와 비교연산<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script> var id = prompt('아이디를 입력해주세요.'); if(id ==='egoing'){ var password = prompt('비밀번호를 입력해주세요.'); if(password==='111111'){ alert('인증 했습니다.'); } else { alert('인증에 실패 했습니다.'); } } else { alert('인증에 실패 했습니다.'); } </script> </body> </html>
▶ prompt() 구문은 사용자가 입력한 값을 가져와서 id 변수의 값으로 대입한다.
조건문은 조건문 안에 중첩해서 사용할 수 있다.
id가 egoing이라면 비밀번호 입력창이 뜨고 비밀번호가 일치하면 '인증 했습니다.' 라는 알림창이 뜬다.
id가 egoing이 아니라면 '인증에 실패 했습니다.' 라는 알림창이 뜬다.논리연산자 Logical operators
&& (Logical AND) : && 양쪽이 모두 true가 되어야, true를 리턴한다.
|| (Logical OR) : || 양쪽의 하나라도 ture면, true를 리턴한다.! (Logical NOT) : ! 뒤의 Boolean은 반대로 바뀐다. (!true -> false, !false -> true)
예시)var id = prompt('아이디를 입력해주세요.'); var password = prompt('비밀번호를 입력해주세요.'); if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){ alert('인증 했습니다.'); } else { alert('인증에 실패 했습니다.'); }
▶id가 위 3가지중 하나일 경우 그리고 패스워드가 111111일 경우 결과값으로 '인증 했습니다.' 가 출력된다.
조건문안에 괄호()가 있으면, 괄호안을 먼저 실행한다.
boolean의 대체제로는 0,1,null 등이 있다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <h1><a href="index.html">WEB</a></h1> <input type="button" value="night" onclick=" var target = document.querySelector('body'); if(this.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; this.value = 'day'; } else { target.style.backgroundColor = 'white'; target.style.color = 'black'; this.value = 'night'; } <ol> <li><a href="1.html">HTML</a></li> <li><a href="2.html">CSS</a></li> <li><a href="3.html">JavaScript</a></li> </ol> <h2>JavaScript</h2> <p> JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is ... </p> </body> </html>위 코드는 인풋 태그의 value값이 night 이냐 day이냐에 따라 다르게 동작하는 것을 보여준다.
반응형'Study > JavaScript' 카테고리의 다른 글
[생활코딩] JavaScript 반복문 (0) 2019.12.03 [생활코딩] 코드 리팩토링 (0) 2019.12.02 [생활코딩] JavaScript 비교연산자 (0) 2019.12.01 [생활코딩] 주석 & 줄바꿈과 여백 & 콘솔 console (0) 2019.11.30 [생활코딩] JavaScript 변수 (0) 2019.11.30