메뉴 건너뛰기

XE Guidebook

JS 기초
2016.07.29 19:28

2-05 객체 Object

조회 수 12 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

◈ 객체 Object


객체(Object)란 데이터와 연산 작업을 함께 담고 있는 코드 집합체
객체는 배열과 비슷하지만 보다 구체적이고 상세하다.
javaScript는 HTML의 모든 노드들을 객체로 인식하여 접근한다.
 
 

● 객체 생성 방법

- new 생성자 사용
 
  var obj : Array = new Object() // 빈 객체 생성
  obj.a = 10;
  obj.name = "신기루";
  obj.fn = function(){};
 
 
- 객체를 생성하면서 요소 추가
 
  var my_array = new Object({a:10, name:"신기루",fn:function(){}});
  // 객체를 생성하면서 요소 추가
 
 
- { } (중괄호)를 사용하여 직접 생성
 
  var my_array = {a:10, name:"신기루",fn:function(){}};
 
 
(예제)
 
<html>
  <head>
    <meta charset="utf-8">
    <title> jQuery에서 object사용  </title>
    <script>
      var obj = {a:10, b:20, fn:function(){alert(" object ")}};
      console.log( obj );
      obj.fn();
    </script>
  </head>
  <body>
  </body>
</html>
 

●  jQuery에서 Object 객체 사용

jQuery는 1개 이상의 값을 전달할 때 Object 형태로 값을 담아 처리하는 경우가 많다.
 
jQuery의 CSS  함수에서 HTML 객체의 다양한 속성들을 한 번에 설정할 때에는
아래와 같이 Object 객체를 사용한다.
 
  $("div").css({'backgroundColor':'#0099ff', 'borderColor':'blue', 'marginBottom':'10px'});
 
  $("div").css({
    'backgroundColor':'#0099ff',
    'borderColor':'blue',
    'marginBottom':'10px'
  });
 
-------------
 
(예)
 
  var obj = {
    'backgroundColor':'#0099ff',
    'borderColor':'blue',
    'marginBottom':'10px'
  }
  $("div").css(obj);
 
  animate, ajax 함수들도 데이터를 전달할 때 {}를 사용하여 처리한다.