[JavaScript] 콜론(:)의 의미_객체 리터럴

콜론(:)의 의미_객체 리터럴

자바스크립트에서 객체는 자신의 속성(property)들을 갖는다.

따라서 각각의 객체들은 프로퍼티와 메소드가 있다.

이때 메소드는 프로퍼티가 함수 자료형인 객체이다.

그러한 프로퍼티(key)에 값(value)을 지정하는 것이 콜론이다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$.contextMenu({

     selector: '.List > tbody > tr',

     callback: function(key, options) {           },

     items: {

      'info' : { name: '요소 정보'},

         'copy' : { name: '요소 복사'},

         'move' : { name: '요소 이동'},

         'delete' : { name: '요소 삭제'},

         'sep1': '---------',

      'cancel' : { name: '호출취소'},

      'regist' : { name: '고정물 등록'},

      'sep2': '---------',

      'preview' : { name: '미리보기'},

      'print' : { name: '인쇄'}

     } // list of contextMenu items

});

Colored by Color Scripter
cs

1. $.contextMenu는 우클릭하면 뜨는 팝업메뉴창이다.

2. selector라는 프로퍼티는 클래스List 밑 tbody 밑 tr들을 가리킨다. '>'는 왼쪽의 자식이면서 태그명이 오른쪽인 모든 엘리먼트를 불러오는 셀렉터이다.

3. callback은 key,options를 받는 함수를 가리키며, 컨텍스트메뉴 클릭시 실행된다.

4. items 프로퍼티는 각각의 메뉴이름들을 가리킨다.

(1) 객체 리터럴

var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

// car라는 프로퍼티를 선언하여 key:value쌍으로 객체화했다.
// "b":"jeep"처럼 json타입으로 쌍을 지어도 무방. 출력할 때도 car.manyCars.b로 쓴다.
// 숫자는 key로 두는 경우가 거의 없으나 있다면 car[7]처럼 써야 한다.

>>> 따라서 콜론은 자바스크립트에서 객체 리터럴을 쓸 때 사용한다.

※ 배열 리터럴 vs 객체 리터럴
: 배열은 객체를 기반으로 만들어졌으므로 유사하다. 하지만 배열은 요소접근에 index를 사용하지만, 객체는 key를 사용한다.

(2) 필터 셀렉터
: 콜론을 포함하는 셀렉터를 필터셀렉터라고 부른다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

<head>

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

  setTimeout(function () {

    var value = $('select > option:selected').val();

    alert(value);

    }, 9000);

});

</script>

</head>

<body>

  <select>

    <option>areum</option>

    <option>minty</option>

    <option>Jeorge</option>

    <option>Pennywise</option>

  </select>

</body>

</html>

Colored by Color Scripter
cs

// select 태그를 body에 만들고, 선택된 옵션을 value로 alert함.

// setTimeout은 window객체의 대표적인 라이브러리.

※ 입력양식필터, 위치필터, 함수필터 셀렉터

- 입력 양식 필터 셀렉터

선택자 형태

 설명

요소:button

 input의 type속성이 button인 것을 선택

요소:image

 input의 type속성이 image인 것을 선택

요소:submit

 input의 type속성이 submit인 것을 선택

요소:text

 input의 type속성이 text인 것을 선택

[출처] jQery의 기본2|dinsa

요소:selected

 option객체에서 선택된 태그를 선택

요소:checked

 체크되어 있는 입력양식을 선택

요소:input

 모든 입력양식 선택(input, select, button..) 

- 위치 필터 셀렉터

선택자 형태	설명
요소:odd	홀수 번째에 위치한 문서 객체를 선택
요소:even	짝수 번째에 위치한 문서 객체를 선택
요소:first	첫 번째에 위치한 문서 객체를 선택
요소:last	마지막에 위치한 문서 객체를 선택 [출처] jQuery의 기본2\|작성자 insa

- 함수 필터 셀렉터(생략)

>>> 따라서 콜론(:)은 자바스크립트의 필터셀렉터 개념으로도 쓰인다.

ROOMY - NATION

2016. 9. 1.