[생활코딩]WEB2-JavaScript (2) (2020.12.8)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

링크:opentutorials.org/course/3085

WEB2 - JavaScript - 생활코딩

 

1. 강의 내용

프로그래밍 언어란

지금까지 배운 HTML, JavaScript는 언어이다. 하지만, JavaScript는 프로그래밍 언어이고 HTML은 그렇지 않다. 

프로그램의 어원은 순서라는 단어에서 나왔다. 즉, 프로그래밍은 순서를 만드는 행위라고 할 수 있다. 그리고 그 순서를 만드는 이는 프로그래머다. 

컴퓨터의 기능은 여러 가지이다. 의도에 따라, 순서대로 여러 기능을 작동시킬 수 있다. 만약, 이 순서가 반복되는 과정에서 시간이 많이 걸리고 실수를 하게 된다면 어떻게 할까?

바로 프로그래밍 언어를 사용하는 것이다. 시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두고 작업이 필요할 때 컴퓨터에게 실행시킨다.

앞서 말했지만, HTML은 정적이다. 그러므로 웹 페이지를 묘사할 뿐 시간의 순서를 따라서 실행하지는 않는다. 프로그래밍 언어인 JavaScript는 시간의 순서에 따라서 여러 기능을 실행할 수 있다. 이에 더해서, 조건에 따라 다른 기능을 실행하거나 정해진 기능을 반복해서 수행할 수 있다.

 

조건문

조건문을 사용해서 하나의 프로그램이 조건에 따라서 다른 순서의 기능이 실행되도록 한다. 이를 응용해서, 전에 만들었던 웹 페이지의 night, day 버튼을 하나로 합쳐서 토글 기능을 만들어 볼 것이다.

 

Comparison(비교 연산자)와 Boolean(불리언)

• ===는 Comparison(비교 연산자)이다. 좌항과 우항을 비교해서, 같으면 true라는 데이터, 다르면 false라는 데이터를 출력한다. 

• true, false는 Boolean(불리언)이다.

• Boolean(불리언)은 데이터의 형태 중 하나이다. 

• 무한하게 많은 number와 string과는 달리 boolean은 단 두 가지의 값을 가진다.

Boolean

Conditional statements(조건문)

조건문은 if를 사용한다 문법은 아래와 같다. 물론 <script> 안에서 작성해야 한다.

 

 

if(조건){
 참일 때 출력
}
else{
 거짓일 때 출력
}

 

 

아래와 같이 조건문을 작성하면,

 

 

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

      document.write("1<br>");
      if (false) {
        document.write("2<br>");
      }
      else {
        document.write("3<br>");
      }
      document.write("4<br>");

    </script>

 

 

조건문 출력

 

위처럼 출력된다.

 

조건문의 활용

앞서 만들었던 웹 페이지의 night, day  버튼들을 하나의 버튼으로 합치고 한 버튼에 토글 기능을 줄 것이다. 아래처럼 명령어를 입력한다.

 

 

<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';
    }
  ">

 

 

onclick속성에 if조건문을 넣어준다. id가 night_day인 버튼은 value가 night로 되어있다. 이 버튼을 클릭하면, 조건문이 실행된다. 만약, 버튼의 value가 night라면 불리언 ture가 나와서 웹 페이지의 백그라운드 blakc으로, 폰트를 white로 변경하고 마지막에는 버튼의  value를 day로 바꾼다.

이제 웹 페이지는 night모드이고 버튼은 day인데, 다시 버튼을 클릭하면 false이므로 else를 실행하고 다시 처음의 상태로 돌아오게 된다. 

 

리팩토링

코딩을 하고 나서 동작은 그대로 두고 코드를 효율적을 바꾸는 것을 말한다. 중복을 줄이면 좀 더 효율적인 코딩이라고 할 수 있다. 위 명령어는 중복이 너무 많아서 리팩터링을 하여 코드를 줄일 필요가 있다.

document.querySelector('#night_day')는 조건문이 실행되는 버튼이므로 this로 대체할 수 있다.

 

 

if(this.value === 'night'){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';this.value='day';
  }else{
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    this.value='night'

 

 

기존 코드는 다른 곳에 옮기면 그 명령을 실행하기 위해서 id를 설정하고 바꾸어줘야 했지만, this는 상대적인 의미를 가지고 있으므로 다른 곳에 붙여 넣기를 해도, 잘 동작한다. 웹 페이지를 유지, 보수하기 쉬워지기 때문에 더 효율적이다. 변수를 사용해서 많이 반복되는 document.querySelector('body')를 대체하면 더 짧게 할 수 있다.

 

 

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

 

2. 느낀 점

1. 명령어 철자 틀리지 않도록 주의할 것

2. 각 언어 문법의 기호를 누락하지 않도록 주의할 것

 

3. 명령어

if(){

}

else {

}

조건문

 

var 변수명=

변수 만들기