본문 바로가기
LEARN/JAVASCRIPT

[JS] Javascript 제어문

by 아이엠제니 2022. 3. 16.

 

 

13. 프로그램, 프로그래밍, 프로그래머

시간의 순서에 따라 연주되는 것을 프로그램이라고 했다고 함

프로그램이라는 의미의 중심에는 '순서'라는 의미가 깊숙하게 자리잡고 있음

 

순서를 만드는 행위를 프로그래밍이라고 함

그 순서를 만드는 사람을 프로그래머

 

 

 

14. 조건문 예고

조건문: 프로그램이 조건에 따라서 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것

토글: 하나의 버튼으로 두 가지 기능 구현

 

 

 

15. 비교연산자와 블리언

  • 비교 연산자
  • 불리언(Boolean) (true & false)
  • ===
  • < 과 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <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>

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

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

  • === : 동등 비교 연산자 (이항 연산자)
  • Boolean: True or False
  • <, >: 비교 연산자 (부등호)
    • &lt; <
    • &gt; >

 

 

 

16. 조건문

  • if, else
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</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 괄호 안에는 불리언 데이터 타입이 옴

 

 

 

17. 조건문의 활용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <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';} "
    />

    <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>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
      odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
      quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Exercitationem accusantium quibusdam voluptatem
      consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
      delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
    </p>
  </body>
</html>

버튼 하나로 동작

 

 

 

18. 리팩토링 (중복의 제거)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <input
      type="button"
      value="night"
      onclick="
      let target = document.querySelector('body'); // 변수 사용
      if (this.value === 'night') { // this 사용해서 코드 간결하게
        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>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
      odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
      quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Exercitationem accusantium quibusdam voluptatem
      consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
      delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
    </p>
  </body>
</html>

  • 리팩토링이란 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것
  • 기능적인 면에서는 변화가 없도록!

 

 

 

19. 반복문 예고

  • 반복문: 같은 작업을 반복적으로 실행해주는 Javascript의 새로운 문법

 

 

 

20. 배열

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>Array</h1>
    <h2>Syntax</h2>
    <script>
      let coworkers = ['egoing', 'leezche'];
    </script>
    <h2>get</h2>
    <script>
      document.write(coworkers[0]);
      document.write('<br>');
      document.write(coworkers[1]);
    </script>

    <h2>add</h2>
    <script>
      coworkers.push('duru');
      coworkers.push('taeho');
      document.write(coworkers[2]);
      document.write('<br>');
      document.write(coworkers[3]);
    </script>

    <h2>count</h2>
    <script>
      document.write(coworkers.length);
    </script>
  </body>
</html>

 

 

 

21. 반복문

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>Loop</h1>
    <ul>
      <script>
        document.write('<li>1</li>');
        let i = 0;
        while (i < 3) {
          document.write('<li>2</li>');
          document.write('<li>3</li>');
          i = i + 1;
        }
        document.write('<li>4</li>');
      </script>
    </ul>
  </body>
</html>

 

 

 

22. 배열과 반복문

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      let coworkers = ['egoing', 'leezche', 'duru', 'taeho', 'hany'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        let i = 0;
        while (i < coworkers.length) {
          document.write(
            '<li><a href="https://www.naver.com/' +
              coworkers[i] +
              '">' +
              coworkers[i] +
              '</a></li>'
          );
          i++;
        }
      </script>
    </ul>
  </body>
</html>

 

 

 

23. 배열과 반복문의 활용

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8" />
  <title>WEB1 - JavaScript</title>
</head>

<body>
  <h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
      let target = document.querySelector('body'); // 변수 사용
      if (this.value === 'night') { // this 사용해서 코드 간결하게
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        this.value = 'day';
      
        let alist = document.querySelectorAll('a');
        let i = 0;
        while(i < alist.length) {
        alist[i].style.color = 'powderblue';
        i=i+1;
        }
      
      } 
        else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
        
        let alist = document.querySelectorAll('a');
        let i = 0;
        while(i < alist.length) {
        alist[i].style.color = 'blue';
        i=i+1;
        }
        } " />

  <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>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
    accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
    odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
    quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Exercitationem accusantium quibusdam voluptatem
    consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
    delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
  </p>
</body>

</html>

 

 

 

 

 

 

부스트코스 [자바스크립트의 시작] 강의 공부 기록

 

 

 

300x250

'LEARN > JAVASCRIPT' 카테고리의 다른 글

[JS] JavaScript 객체 기본  (0) 2022.03.20
[JS] JavaScript 활용  (0) 2022.03.19
[JS] JavaScript 객체 소개  (0) 2022.03.18
[JS] Javascript 함수  (0) 2022.03.17
[JS] 웹과 JavaScript  (0) 2022.03.15

관련글

티스토리툴바