[JavaScript] 개요

생활코딩/WEBn

[JavaScript] 개요

hayjo 2020. 8. 28. 22:17

WEB2 - JavaScript - 생활코딩

수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상�

opentutorials.org

JavaScript란?

사용자와 동적으로 상호작용(사용자의 조작에 반응해서 움직이는)하는 웹페이지를 구현하는 기술
주로 HTML을 제어하는 용도로 쓰이며, HTML 위에서 동작하도록 고안된 프로그래밍 언어
웹페이지에서 일어나는 일련의 사건들(event) 중 특별한 경우들(onclick, onchange, ...)을 통해 상호작용 가능
HTML의 속성 중, input을 JS로 받는 속성들 안에서 사용하거나, (ex. onclick)
HTML의 <script> 태그 안쪽에 들어가거나 (<script> 태그 내에서 선언된 변수 등은 해당 HTML파일 내에서 유효),
콘솔(Developer Tools > Console)을 통해 실행

JavaScript의 특징

데이터타입은 6가지(Number, String, Boolean, Null, Undefined, Symbol) + Object
변수(variable) 지정시: var 변수명 = 대입할 값; 형식으로 작성
비교 연산자(Comparison operators): ===, >, <
Boolean: true, false
if else 구문: if(조건){
true실행문
} else{
false실행문
}
this: 자기 자신을 가리키는 키워드
- python의 self와 유사하지만, 파이썬의 self가 변수명인 것과는 달리
- JS의 this는 키워드이기 때문에 아무런 문맥 없이도 사용할 수 없으며
- 문맥 없이 사용된 경우, 전역변수(브라우저 콘솔이라면 window)를 가리킴
배열(array):
var 배열이름 = ['data1', 'data2']; // 정의
배열이름[index]; // 인덱싱
배열이름.length; // 배열 크기 확인
배열이름.push('data3'); // element 삽입
객체(object): var 객체이름 = {
'data1': 'value1',
'data2': 'value2'
};
객체이름.data3 = 'value3'; // 데이터 추가하기
객체이름['data 4'] = 'value4'; // 데이터 추가하기2
객체이름.data1; // 데이터 가져오기
- python의 dictionary와 다른 점 [출처]
- i = 'k'
- 객체 = {i: 'j'}
- <JS> 객체.i === 'j' && 객체['i'] === 'j' // 객체.k, 객체['k']는 undefined
- <python> 객체['k'] == 'j' && 객체[i] == 'j' // 객체.i, 객체.k, 객체['i']는 error
while 반복문: while(조건){
반복문
};
for 반복문: for(var key in 객체이름) {
반복문
};
함수(function): function 함수명(params){
함수내용
return 리턴값;
};
객체 메소드(object method) 정의:
객체명.메소드명 = function(properties){ // 객체에 소속된 변수는 properties
메소드내용 // 객체에 소속된 함수는 method
return 리턴값;
};

JS 코드 공유/재사용

CSS의 코드 공유/재사용 방법과 동일한 원리
여러 페이지가 동일한 JS 스크립트를 공유하는 경우, <script> 태그 안의 내용을 .js 파일을 별도로 저장
기존 <script> 태그가 있던 <head> 부분에 아래 태그를 추가함으로써 공유 및 재사용 가능
<script src="파일위치.js"></script>
js파일을 1회 다운로드 받은 후, caching을 통해 추가 트래픽 발생 없이 빠르게 여러 페이지에 적용가능

<JS 사용예시1> HTML의 속성 중, input을 JS로 받는 속성들 안에서 사용되는 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="night" onclick="
    /* onclick 속성의 값은 JS 문법에 따르도록 되어 있기 때문에 여기부터 */
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    /* 여기까지는 JS 구문에 해당함 */
    ">
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    /* querySelector를 통해 'body' 태그를 선택하고 (클래스나 아이디라면 .class or #id)
    .* style 속성의 backgroundColor를 JS 문법에 맞도록 지정 */
    ">
    <p>
      Sample Text
    </p>
    /* 혹은 위의 코드를 if else 구문을 이용해 아래와 같이 처리할 수도 있음 */
    <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';
      }
    ">
  </body>
</html>

<JS 사용예시2> HTML의 <script> 태그 안쪽에 들어가는 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      /* 위의 button과 비슷한 기능(+h2 색깔 바꾸는 기능을 추가한)
      *  을 구현하는 함수를 따로 정의한 다음, */
      function dayNightHandler(self){
        var target = document.querySelector('body');
          if(self.value === 'night') {
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            self.value = 'day';
            /// 야간모드일때는 h2 태그의 색깔을 powderblue로 바꿔보자
            var i = 0;
            h2list = document.querySelectorAll('h2'); // 'h2'태그를 모두 가져온 다음
            while(i<h2list.length){                   // i가 'h2'태그 개수보다 작은 동안
              h2list[i].style.color = 'powderblue';    // h2의 i번째 요소의 색깔을 바꿔라
              i = i + 1;
            }
          } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            self.value = 'night';
            /// 주간모드일때는 h2 태그의 색깔을 green으로 바꿔보자
            var i = 0;
            h2list = document.querySelectorAll('h2');
            while(i<h2list.length){
              h2list[i].style.color = 'green';
              i = i + 1;
            }
          }
      }
    </script>
  </head>
  <body>
    <p>
      Sample Text
    </p>
    <input type="button" value="night" onclick="
      dayNightHandler(this);
    /* 위에서처럼 해당 부분에 함수로 불러올 수도 있음
     * 함수 내에서 this를 사용해야 하는 경우가 있다면, 인자로 넣어줘야함
     * 그렇지 않으면 기존에 this를 사용했던 문맥과 달라지기 때문임*/
    ">
  </body>
</html>

<JS 사용예시3> 객체를 이용해 2번을 리팩토링한 예시

*리팩토링(re-factoring): 기능 변경 없이 코드의 효율성을 높이는 작업. 중복 제거, 가독성 개선 작업 등이 포함됨.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      /* 색을 바꾸는 작업이 빈번하게 일어나므로 정리를 위해 객체 생성
       * <body> 태그를 대상으로 이루어질 작업 정리 */
      var Body = {
        setColor:function(color){
          document.querySelector('body').style.color = color;
        },
        /* body의 텍스트 색깔을 바꾸는 함수를 먼저 정의하고 */
        setBackGroundColor:function(color){
          document.querySelector('body').style.backgroundColor = color;
        }
        /* body의 배경 색깔을 바꾸는 함수도 정의
         * h2 태그에 대해서도 비슷한 함수를 정의할 것이기 때문에
         * Body라는 객체에 메소드로 정리하는 편이 가독성이 높고 혼란이 적음 */
      };
      var h2s = {
        setColor:function(color){
          var i = 0;
          h2list = document.querySelectorAll('h2');
          while(i<h2list.length){
            h2list[i].style.color = color;
            i = i + 1;
          }
        }
        /* 마찬가지로 h2 태그에 대해서도 색깔 바꾸는 함수를 정의 */
      };
      function dayNightHandler(self){
        if(self.value === 'night') {
          Body.setColor('white');   // 기존에 document.querySelector로 지정하던 부분을
          Body.setBackGroundColor('black');  // Body 객체와 메소드로 치환
          self.value = 'day';
          /// 야간모드일때는 h2 태그의 배경색을 바꿔보자
          h2s.setColor('powderblue');  // h2 태그에 대해서도 마찬가지로 교체
        } else {
          Body.setColor('black');
          Body.setBackGroundColor('white');
          self.value = 'night';
          h2s.setColor('green');
          }
      }
    </script>         <!-- 위쪽 함수부분만 리팩토링했기 때문에 이 아래쪽은 2번 예시와 동일함 -->
  </head>
  <body>
    <p>
      Sample Text
    </p>
    <input type="button" value="night" onclick="
      dayNightHandler(this);
    /* 위에서처럼 해당 부분에 함수로 불러올 수도 있음
     * 함수 내에서 this를 사용해야 하는 경우가 있다면, 인자로 넣어줘야함
     * 그렇지 않으면 기존에 this를 사용했던 문맥과 달라지기 때문임*/
    ">
  </body>
</html>

<JS 사용예시4> 3번을 스크립트로 분리해 리팩토링한 예시

colorbuttons.js

var Body = {
  setColor:function(color){
    document.querySelector('body').style.color = color;
  },
  setBackGroundColor:function(color){
    document.querySelector('body').style.backgroundColor = color;
  }
};
var h2s = {
  setColor:function(color){
    var i = 0;
    h2list = document.querySelectorAll('h2');
    while(i<h2list.length){
    h2list[i].style.color = color;
    i = i + 1;
    }
  }
};
function dayNightHandler(self){
  if(self.value === 'night') {
    Body.setColor('white');   // 기존에 document.querySelector로 지정하던 부분을
    Body.setBackGroundColor('black');  // Body 객체와 메소드로 치환
    self.value = 'day';
    /// 야간모드일때는 h2 태그의 배경색을 바꿔보자
    h2s.setColor('powderblue');  // h2 태그에 대해서도 마찬가지로 교체
  } else {
    Body.setColor('black');
    Body.setBackGroundColor('white');
    self.value = 'night';
    h2s.setColor('green');
  }
};

htmlfile.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script scr="colorbuttons.js"></script> <!-- 여기에 해당 js 스크립트 경로를 넣어주기 -->
  </head>
  <body>
    <p>
      Sample Text
    </p>
    <input type="button" value="night" onclick="
      dayNightHandler(this);
    ">
  </body>
</html>