WEB2 - JavaScript 14 to 17 (조건문)

728x90

조건문 예고

하나의 프로그램이 하나의 흐름으로만 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것이라 할 수 있다.

저번 시간에 만들었던 주간모드, 야간모드를 하나의 버튼으로 만들고 더 이쁘게 버튼을 디자인하려고 한다.

이때 주간모드와 야간모드를 합쳐 하나의 버튼을 만드는 방법이 토글(toggle)버튼이다.

이후의 과정을 통해 비교 연산자와 그 결과로 만들어지는 불리언(boolean)이라는 것도 살펴보자.

비교 연산자(Comparison operators)와 블리언(boolean)

ex4.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Comparison operators & Boolean</h1>
    <h2>===</h2>
    <h3>1===1</h3>
    <script>
      document.write(1===1);
    </script>

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

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

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

=== 은 비교 연산자이다. 그리고 이항 연산자이다.
좌항과 우항이 있고 좌항과 우항을 결합해서 어떠한 데이터를 만든다.

1+1=2 --------- +는 좌항과 우항을 더하여 값을 도출한다.

여기서 = 이 3개인 저 연산자는 왼쪽의 값과 오른쪽의 값을 비교해서 만약 같다면 true 라는 값이 된다. 만약 값이 다른데 같다고 적혀있다면 false 값이 된다.

1===1 true

1===2 false

즉 비교 연산자는 좌항과 우항의 값에 따라서 true, false 둘 중 하나의 값을 만들어내는 연산자이다.

그리고 true 와 false 를 묶어서 블리언(Boolean) 이라고 한다.

여기서 Boolean 은 단 2개의 데이터로 이루어져 있는 데이터 타입이다.

이 이야기들로 쓸 수 있는 것은 아무것도 없지만 뒤에서 살펴볼 조건문과 반복문이라는 걸 통해서 이 Boolean 이 얼마나 혁명적인 가능성을 갖는 관념인지 감동(?)받을 준비를 하자.

조건문(Conditional statements)
- 조건문의 형식을 알아보자.

ex5.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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>
  </body>
</html>

즉 if문의 뒤에 따라오는 괄호 안에는 Boolean data type 이 온다. true 나 false.

그리고 true 면 첫 번째 중괄호에 있는 코드들이 실행되고 두 번째 else 중괄호 안에 있는 코드들은 무시된다.

false 라고 한다면 첫 번째 중괄호에 있는 코드들이 무시되고 두 번째 else 안에 있는 코드들이 실행된다.

이것이 조건문을 이해하는 가장 중요한 요소이다.

Boolean 의 값에 따라서 실행되는 코드가 바뀐다는 것이다.

물론 지금 짠 예제는 if문에 true 와 false 를 Boolean 값을 직접 코딩을 해놨다. 그렇기 때문에 언제나 true, 언제나 false 여서 아무 쓸모없는 것이다. 왜냐 조건에 따라서 실행되는 코드가 달라지지 않기 때문.

다음에 해야 할 것은 if문 괄호 안에 Boolean 값이 들어오는데 조건에 따라서 true 가 오고 조건에 따라서 false 가 오도록 해보자.

조건문의 활용

3.html 예제로 돌아가서 深色模式-开启 버튼과 深色模式-关闭 버튼을 하나로 만들어 보자.
- 우선 버튼을 만들자.
```
<input type="button" value="开启" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">
```
  이 button 의 value 값이 开启 라면 开启 버튼을 눌렀을 때 아래의 코드들이 실행된다.
- 다음으로 형식에 맞게 조건문을 만들어보자.
```
<input type="button" value="开启" 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';
    }
">
```
  이제 if문 괄호 안에 들어갈 부분이 주인공인데, 상황에 따라 true 또는 false 가 되게 해야 한다.
  이것을 하기 위해 현재 이 버튼의 value 값이 무엇인가를 알아낼 수 있어야 한다.
- 버튼의 value 값을 알아내기 위해 Console 을 이용한다.
  그 다음에 이 태그의 id값을 "开启——关闭" 로 하자.
  추천 검색어 javascript element get value
  
  검색 결과 value 라는 property 를 사용하면 된다고 나와있다.
  document.querySelector('#开启——关闭').value 라는 코드를 통해서 id 값이 开启——关闭 인 태그의 value 값을 가져올 수 있다.

<input id="开启——关闭" type="button" value="开启" 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';
    }
">

이 점을 착안하여 조건문을 완성해보자.
```
<input id="开启——关闭" type="button" value="开启" onclick="
	if(document.querySelector('#开启——关闭').value === '开启'){
		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';
    }
">
```
이 코드에서 开启 버튼을 누르면 야간모드가 된다. 그러나 버튼은 그대로 开启 이고 다시 눌러도 주간 모드로 돌아오지 않는다.
여기서 처음 开启 버튼을 눌렀을 때 value 값이 关闭 로 바뀌고 다시 눌렀을 때, 즉 关闭 버튼을 눌렀을 때 주간모드로 돌아오도록 코드를 작성하자.

value="关闭" 와 주간 모드를 위한 코드작성

<input id="开启——关闭" type="button" value="开启" onclick="
	if(document.querySelector('#开启——关闭').value === '开启'){
		document.querySelector('body').style.backgroundColor='black';
		document.querySelector('body').style.color='white';
		document.querySelector('#开启——关闭').value = '关闭';
	} else {
		document.querySelector('body').style.backgroundColor='white';
		document.querySelector('body').style.color='black';
		document.querySelector('#开启——关闭').value = '开启';
	}
">

버튼 하나로 완성 (开启 = 야간모드, 关闭 = 주간모드)
처음 开启 버튼을 눌렀을 때는 boolean 값이 true, value 값이 开启 이기 때문에 야간 모드로 되고,
开启 버튼을 누른 다음 value 값이 关闭 가 되기 때문에 다시 누르면 boolean 값이 false가 되어,
즉 value 값이 开启 가 아니기 때문에 else 중괄호 안에 있는 코드들이 실행된다.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input id="开启——关闭" type="button" value="开启" onclick="
      if(document.querySelector('#开启——关闭').value === '开启'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        document.querySelector('#开启——关闭').value = '关闭';
      } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        document.querySelector('#开启——关闭').value = '开启';
      }
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
  </body>
</html>

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 19 to 22 (반복문, 배열) (8)	2021.09.17
WEB2 - JavaScript 18 (리팩토링 중복의 제거) (6)	2021.09.15
WEB2 - JavaScript 8 to 13 (4)	2021.09.14
WEB2 - JavaScript 6 to 7 (0)	2021.09.14
WEB2 - JavaScript 5 (0)	2021.09.13

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

티스토리툴바