생활코딩 Javascript #6 조건문

Javascript #6 조건문

 

 

 

14. 조건문

조건문
조건에 따라 다른 순서의 기능이 실행되도록 하는 것

 

- 두 가지 버튼으로 다크모드와 데이모드를 왔다갔다 하는 것이 아니라, 한 버튼을 눌렀을 때 다크모드 상태이면 데이모드로 데이모드 상태이면 다크모드로 전환되는 기능을 넣고자 한다.

- 이러한 기능을 '토글 toggle' 이라고 한다.

 

 

 

15. 비교연산자와 블리언

<h1>comparison operator & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
    document.write(1===1);
</script>
    
<h3>1===2</h3>
<script>
    document.write(1===2);
</script>

결괏값

- 비교연산자 ; 좌항과 우항의 관계에 따라 true, false(블리언) 의 값을 만들어내는 연산자.

비교연산자(=관계연산자)
<	>	<=	>=	==	!=
오른쪽 값이 왼쪽값보다 크다	오른쪽 값이 왼쪽값보다 작다	오른쪽 값이 왼쪽값보다 크거나 같다	오른쪽 값이 왼쪽값보다 작거나 같다	같다	같지않다

 

- 이항연산자 ; 왼쪽과 오른쪽의 값을 더하는 것

- 블리언 : true 값과 false 값을 합한 것.

  무한한 데이터타입인 number와 string 과는 달리 블리언은 단 2개의 데이터로 이루어진 데이터 타입이다.

 

 

<h3>1&lt;2</h3>
<script>
    document.write(1<2);
</script>

<h3>1&lt;1</h3>
<script>
    document.write(1<1);
</script>

- &lt; 는 기호 < 와 같다. → <, > 는 html 의 태그이기 때문에 &lt;(less than, <) 와 &gt;(greater than, >) 로 표현한다.

 

 

 

 

16-17. 조건문

1) 조건문 사용하기

<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
    document.write("1<br>");
    document.write("2<br>");
    document.write("3<br>");
    document.write("4<br>");
</script>

<h2>IF-true</h2>
<script>
    document.write("1<br>");
    if(true){
        document.write("2<br>");
    } else {
        document.write("3<br>");
    }
    document.write("4<br>");
</script>

<h2>IF-false</h2>
<script>
    document.write("1<br>");
    if(false){
        document.write("2<br>");
    } else {
        document.write("3<br>");
    }
    document.write("4<br>");
</script>

결괏값

- .write 안에 <br> : html 의 <br> 처럼 줄바꿈을 해준다.

- if 문 괄호 안의 조건이 참이면 if 절의 중괄호 { } 안의 명령문을 실행하고, 거짓이면 else 절의 중괄호 { } 안의 명령문을 실행

 

 

 

2) 버튼의 value 값 알아내기 : .value

window[id].value

<input id="night_day" type="button" value="night" onclick="
    if(){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
    } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
    }
">

 

- document.querySelector('#night_day'); 을 입력하면 해당 태그가 전부 불러와진다.

 

- document.querySelector('#night_day').value 을 입력하면 #night_day 태그의 현재 value 값을 불러온다. day 에서 night 로 value 값을 하면 위의 이미지와 같이 그 결괏값도 변경됨을 알 수 있다.

 

 

3) 조건문에 조건 추가 / 버튼에 토글 기능 추가하기

<input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value = 'day';
    } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
    }
">