생활코딩 WEB3 - javascript편(6/6)

 

30. 객체 쓰기,읽기

 

 

배열 vs 객체

** 배열 (Array) = 많은 정보를 순서에 따라 정리정돈. (이름은 없음)

** 객체 (Object) = 순서 없이 정보를 저장하는 것.

-> 이름이 있는 정리정돈 상자.

 

객체 선언시

var 변수명 = { } 

와 같이 작성한다.

 

(cf> 배열은 대괄호 [ ] 안에 입력함)

 

 

예제.

 

 

1. 객체를 만드는 방법

var coworkers = {
        "programmer":"thisisyjin",
        "designer":"injung"
      };

 

2. 만들어진 객체에서 데이터를 가져오는 방법

document.write("programmer :"+coworkers.programmer);
document.write("designer :"+coworkers.designer);

 

3. 이미 만들어진 객체에 정보를 추가하는 방법

 

coworkers.bookkeeper = "jinie";   
coworkers.["data scientist"] = "yeon";    // 위 코드과 같은 결과이다.

 

coworkers.bookkeeper = "jinie";

coworkers.["bookkeeper"] = "jinie";

 

위 두가지 코드는 결과가 같다.

즉, 바로 변수명을 써도 되고, [" "] 안에 넣어도 된다.

우리가 값을 가져올 때 [0[과 같이 사용하므로, [ ] 안에 넣는 것임.

 

보통 띄어쓰기를 해야하는 경우 사용함.

coworkers.data scientist 라 하면 오류가 나지만,

coworkers.["data scientist"] 라 하면 정상 작동한다.

 

var coworkers = {
        "programmer":"thisisyjin",
        "designer":"injung"
      };        // coworkers 라는 객체 생성
      
      
document.write("programmer :"+coworkers.programmer);    // 객체에서 데이터 꺼내쓰기
document.write("designer :"+coworkers.designer);

coworkers.bookkeeper = "jinie";     // 이미 만들어진 객체에 정보 추가

 

 

---

31. 객체와 반복문

 

생성된 객체에 어떤 데이터가 있는지 모조리 가져와야 하는 경우 -> 반복문 이용.

 

 

구글링 > javascript object iterate ( iterate = 반복하다)

 

How to iterate over a JavaScript object?

for...in

for...in문은 상속된 열거 가능한 속성들을 포함하여

객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.

 

for(var key in 객체이름) 

-> 객체의 키값을 가져옴. ( programmer, designer과 같은 값)

배열에서는 index를 사용함.

 

 

 

for(var key in coworkers) {
        document.write(key);
      }

 

 

 

즉, 키값과 그에 해당하는 value를 다같이 보기 위해선 다음과 같이 작성해야 한다.

 

for(var key in coworkers) {
        document.write(key+' : '+coworkers[key]);
        document.write('<br>')
      }

 

key = 키값

coworkers[key] = 키에 해당하는 value값

---

32. 객체프로퍼티와 메소드

 

객체에는 변수 뿐만 아니라 함수도 담을 수 있다. 

 

객체 내 함수 정의

coworkers.showAll = function(){                }

 

 

 

1. 객체 내 함수의 선언

coworkers.showAll = function(){
        for(var key in coworkers) {
          document.write(key+' : '+coworkers[key]);
          document.write('<br>')
        }
      }

 

2. 객체 내 선언된 함수의 사용

coworkers.showAll();

위와 같이 사용하는 것은 만약 객체명이(coworker)이 변경되면 실행되지 않으므로,

함수가 속한 객체를 'this'로 표현할 수 있다.

(자기 자신을 가리키는 것.)

coworkers.showAll = function(){         for(var key in this) {           document.write(key+' : '+coworkers[key]);           document.write('<br>')         }       }

 

위에서 showAll과 같이 객체에 소속된 함수를 Method(메소드)라고 하고,

객체에 소속된 변수 (coworkers.bookkeeper 등)을 Properties(프로퍼티) 라고 한다.

 

객체 내	함수	메소드 (Method)
	변수	프로퍼티 (Properties)

 

 

---

33. 객체의 활용

var Body = {
          setColor:function(color){
            var target = document.querySelector('body');
            target.style.color = color;
          },
          setBackgroundColor:function(color){
            var target = document.querySelector('body');
            target.style.backgroundColor = color;
          }
        }

위와 같이 Body라는 객체를 생성한다.

var Body = { } 와 같이 작성하며,

Body 객체에는 두가지 함수(메소드)를 선언해야한다.

 

setColor:function(파라미터){ 

}

 

setBackgroundColor:function(파라미터){

}

 

 

함수의 '입력'에 해당하는 변수를 매개변수(Parameter)이라 하고, 함수로 전달하는 2,3 과 같은 값을 인자(Argument)라고 한다. 객체 내 함수를 메소드(Method)라고 하고, 객체 내 변수를 프로퍼티(Properties)라고 한다.

 

 

마찬가지로, Link라는 객체를 만들고 setColor이라는 메소드를 생성해보자.

 

var Link = {
          setColor:function(color){
            var links = document.querySelectorAll('a');
            var i = 0;
            while(i<links.length){
              links[i].style.color = color;
              i = i + 1;
              }
            }
        }

 

 

 

<전체적인 코드 리뷰>

var Body = {
          setColor:function(color){
            var target = document.querySelector('body');
            target.style.color = color;
          },
          setBackgroundColor:function(color){
            var target = document.querySelector('body');
            target.style.backgroundColor = color;
          }
        }

        var Link = {
          setColor:function(color){
            var links = document.querySelectorAll('a');
            var i = 0;
            while(i<links.length){
              links[i].style.color = color;
              i = i + 1;
              }
            }
        }

    function nightDayHandler(self){
      var target = document.querySelector('body');
        if(self.value === 'night'){
          Body.setBackgroundColor('black');
          Body.setColor('white');
          self.value = 'day';

          Link.setColor('powderblue');

        } else {
          Body.setBackgroundColor('white');
          Body.setColor('black');
          self.value = 'night';

          Link.setColor('blue');
          }
        }

 

 

---

34. 파일로 쪼개서 정리정돈

 

 

 

데이터가 많아지면 배열로 정리정돈하고.

코드가 많아지면 함수로 정리정돈하고,

그런 함수 / 변수가 많아지면 객체로 정리정돈할 수 있다.

 

그렇다면, 객체도 많아지면 어떻게 정리할지?

객체보다 더 큰 정리정돈 도구가 있는가?   >  YES!

 

파일로 저장하여 쪼개서 정리정돈 가능.

 

이제, index.html 뿐만 아니라

1.html

2.html

3.html 파일에도

 

<input>태그와 <script>태그를 옮겨보자.

 

 

** 만약 1.html, 2.html .. 같은 파일이 1억개라면? 

나중에 수정할때 머리 터진다.

 

우리가 css에서 했던 것 처럼, js파일을 따로 만들어서 링크하는 방식을 이용하자.

 

var Body = {
  setColor:function(color){
    var target = document.querySelector('body');
    target.style.color = color;
  },
  setBackgroundColor:function(color){
    var target = document.querySelector('body');
    target.style.backgroundColor = color;
  }
}

var Link = {
  setColor:function(color){
    var links = document.querySelectorAll('a');
    var i = 0;
    while(i<links.length){
      links[i].style.color = color;
      i = i + 1;
      }
    }
}

function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
  Body.setBackgroundColor('black');
  Body.setColor('white');
  self.value = 'day';

  Link.setColor('powderblue');

} else {
  Body.setBackgroundColor('white');
  Body.setColor('black');
  self.value = 'night';

  Link.setColor('blue');
  }
}

위와 같이 <script>태그 내에 있는 내용을 복사해서 새 파일인 colors.js로 만들어보자.

 

 

<script src="colors.js"></script>

다음과 같이 src(Source)속성을 이용하여 해당 파일을 연결해준다.

 

 

F12 - NETWORK 탭에서 확인해보면,

웹브라우저가 colors.js 파일을 다운로드해서 갖다놓고 해석한 것을 알 수 있다.

 

** 이는 웹서버 입장에서 colors.js와 html파일까지 '두번' 접속해야하는 것 이므로 별로지만,

 

한번 웹브라우저가 다운로드받으면 저장해놓고, 다음 접속시에도 계속 쓸 수 있기 때문에 이 방식이 훨씬 효율적이다.

(캐시, 즉 Cache 때문)

 

 

 

 

위와 같이 최종적으로 모든 웹페이지에 대해 day/night 버튼이 완성된 것을 확인했다!

 

---

35. 라이브러리와 프레임워크 

● 라이브러리(Library)

   - 소프트웨어를 제작하기위해 필요한 부품이 되는 소프트웨어를 잘 정리해놓은 것.

   - 소프트웨어를 만드는 내가 소프트웨어를 땡겨서 쓰는 느낌.

 

● 프레임워크(FrameWork)

   - 만들고자 하는것이 무엇이냐에 따라서 언제나 필요한 공통적인 것이 있고, 달라지는 부분이 있다.

   - 이때, 공통적인 부분을 프레임워크로 두고, 개발 시간을 절약해주는 '반제품'과 같은 역할.

 

 

**

 

jQuery 라는 라이브러리에 대해 알아보자.

이는 훨씬 생산성이 높고, 안정적이고 오래된 라이브러리이다.

 

 

https://jquery.com/download/

Download jQuery | jQuery

 

위 사이트에서 CDN이라고 검색해보자.

 

▶ CDN = Content Delivery Network의 약자.

지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술.

즉, 굳이 다운로드 받지 않고 script src를 통해서 간단하게 라이브러리를 이용할 수 있게 함.

 

예> 구글 CDN

 

 

예를 들면,

var links = document.querySelectorAll('a');
    var i = 0;
    while(i<links.length){
      links[i].style.color = color;
      i = i + 1;
      }

이와 같은 반복문을 우리는 jQuery를 통해 다음과 같이 간략하게 쓸 수 있다.

 

$('a').css('color', color);

이는 jQuery에 존재하는 $() 함수를 사용했고,

모든 'a'태그를 선택자로 하여

.css , 즉 css를 변경하겠다는 뜻이다.

 

jQuery css 라고 검색해보면 사용법이 나온다.

 

https://api.jquery.com/css/

.css() | jQuery API Documentation

var links = document.querySelectorAll('a');     var i = 0;     while(i<links.length){       links[i].style.color = color;       i = i + 1;       }

$('a').css('color', color);

위 두 코드는 같은 결과가 된다.

 

var Body = {
  setColor:function(color){
    // var target = document.querySelector('body');
    // target.style.color = color;
    $('body').css('color', color);
  },
  setBackgroundColor:function(color){
    // var target = document.querySelector('body');
    // target.style.backgroundColor = color;
    $('body').css('color', color);
  }
}

다른 코드들도 전부 jQuery를 이용해서 작성해보자.

 

 

** 주의

jQuery와 같은 라이브러리는 또다른 언어가 아니라, 결국 자바스크립트이다.

 

---

36. UI vs API 

 

 

● UI (User Interface) 

  - 사용자가 시스템을 제어하기 위해서 사용하는 조작 장치

● API (Application Programming Interface)

  - 

 

 

우리가

<input type="button" value="Click" onclick="alert('Hello world')">

와 같은 코드를 작성하면, 

버튼을 클릭하면 경고창이 뜨는 기능을 하게 된다.

 

그렇다면, 이때 뜨는 경고창은 과연 우리가 만든 것일까?

- 우선, 타이밍과 문구 (onclick  / 'Hello world') 자체는 우리의 의도대로 만들어졌다.

- 그러나, 경고창의 디자인이나 모양은 우리가 만들지 않았다! 즉, 웹브라우저가 정한 대로 만들어진다.

 

웹브라우저가 가지고 있는 경고창 기능을 우린 alert 라는 코드를 이용하여 자바스크립트 문법에 따라 적은 것.

즉, 프로그래밍을 할때 사용하는 조작 장치를 (여기서는 alert) API 라고 한다.

 

API와 '순서'는 서로 뗄 수 없는 관계이다.

 

우리는 프로그래밍을 배움으로써, 유저로써 UI만 사용하는 것이 아닌 API도 사용할 수 있게 된 것이다.

 

 

UI (User Interface)	유저가 시스템을 제어하기 위해 사용하는 조작장치
API (Application Programming Interface)	UI가 동작하기 위해 이용된 부품, 기능 , 프로그램. 즉, 프로그래밍을 할때 사용하는 조작 장치.

 

---

수업을 마치며

자바스크립트에 대한 자세한 문법은 천천히 내가 만들고 싶은 프로젝트를 해보면서 배워볼것이다.
앞으로 갈길이 멀지만, 이제야 html, css, js의 기초를 확립한 느낌이 들어서 뿌듯하다.