반응형
1. 브라우저는 전역 window 객체를 가지며 모든 전역변수는 window 객체의 프로퍼티로 지정된다.
    - window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.
var userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';

2. window 객체의 다른 프로퍼티
    - navigator
        . appName   : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer,  FireFox : Netscape
        . appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
        . appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
        . userAgent   : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
        . plattform      : 하드웨어 플랫폼
        ※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
    - frames[]
    - location
        . search   : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
        . href       : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
        . protocol
        . host
        . pathname
        . hash        : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
                           window.location.hash = "#top";
        . reload()    : 현재 표시된 페이지를 다시 불러오는데 사용된다.
        . replace()  : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
                           replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
    - history
    - screen
        . width  : 모니터 스크린의 가로크기
        . height : 모니터 스크리의 세로크기
    - opener
        . 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
          사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
    - closed
        . 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
    - x, y
        . 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
    - onerror
        . onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
          할당된 함수가 자동으로 호출된다.
        . 세개의 전달인자가 전달된다.
        . 첫 번째 전달인자는 에러메세지
        . 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
        . 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
        . 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
    - document

    2-1 . document 객체의 다른 프로퍼티들
            - forms[]
                . elements[]
                    . options[]   :  form element 의 객체가 Select 일 때만 존재
            - anchors[]
            - links[]
            - images[]
            - applets[]
            - domain   : 문서가 불려온 서버의 호스트 네임
            - URL       : window.location 과는 다르게 읽기 전용이다.
                             (window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
                             document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
            - cookie
            - lastModified
            - referrer

3. window 객체의 메소드
    - open()
        . 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
        . 첫 번째 전달인자는 url 이다
        . 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
          만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
          반환한다.
        . 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
        . 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
          첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
          것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.

    - close()
        . document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
        . 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
        . 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
        . 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.

    - focus()
        . 키보드 포커스를 창에 위치하도록 한다.
    - blur()
        . 창으로 하여금 키보드 포커스를 잃어버리게 한다.
    - scrollBy()
        . 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
    - scrollTo()
        . 문서를 지정한 절 대 위치로 스크롤한다.
        . 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
        . HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
          엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
          상단 모서리에 위치하게 창을 스크롤 할 수 있다.

4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.

5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
    하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
    window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.

6. 창 위치와 크기
    - IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.
// 데스크톱 띄운 브라우저 창의 전체 크기
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;

// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY

// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;

// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;

※ URL 에서 전달인자 추출하기
function getArgs() {
    var args = new Object();
    var query = location.search.substring(1);       // 질의 문자열을 얻어온다.
    var pairs = query.split("&");
    for (var i=0; i<pairs.length; i++) {
        var pos = paris[i].indexOf('=');                 // 이름=값 을 추출한다.
        if (pos == -1) continue;
        var argname = pairs[i].substring(0, pos);  // 이름을 추출한다.
        var value = pairs[i].substring(pos+1);       // 값을 추출한다.
        value = decodeURIComponent(value);       // 필요하다면 디코딩을 수행한다.
        args[argname] = value;                           // 객체의 프로퍼티로 저장한다.
    }
    return args
}

※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
    - getWindowX/Y()  : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
    - getViewportWidth/Height()  : 브라우저의 뷰포트 영역의 크기를 반환한다.
    - getDocumentWidth/Height()  : 문서의 크기를 반환한다.
    - getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
    - getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
    - 브라우저 창의 크기를 반환하는 함수는 없음
var Geometry = {};
if (window.screenLeft === undefined) {  // IE 브라우저
    Geometry.getWindowX = function() { return window.screenLeft; };
    Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screeX) {  // 파이어폭스
    Geometry.getWindowX = function() { return window.screenX; };
    Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) {  // IE 이외의 브라우저
    Geometry.getViewportWidth = function() { return window.innerWidth; };
    Geometry.getViewportHeight = function() { return window.innerHeight; };
    Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
    Geometry.getVerticalScroll = function() { return window.pageYOffset; };
  // DOCTYPE 이 존재하는 IE 6
} else if (document.documentElement && document.documentElement.clientWidth) {
    Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
   // DOCTYPE 이 없을 때 IE 6
} else if (document.body.clientWidth) {
    Geometry.getViewportWidth = function() { return document.body.clientWidth; };
    Geometry.getViewportHeight = function() { return document.body.clientHeight; };
    Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
    Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
// 문서의 크기를 반환
if (document.documentElement && document.documentElement.scrollWidth) {
    Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
    Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
    Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
    Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}

※ 브라우저를 판단하기 위한 클라이언트 스니퍼(client sniffer)
    - https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support







반응형
Posted by seungkyua@gmail.com
,
반응형
I. RegExp 정규표현 객체 생성방법
    1. 리터럴 사용 (앞뒤에 / 를 사용하여 감싼다. ' 나 "는 넣지 않는다.)
        var pattern = /s$/; 

    2. RegExp 객체 생성
        var pattern = new RegExp("s$");

II. 정규 표현식에서 다음의 기호앞에는 \ 를 써야 한다. ( ' " @ # 은 제외한다.)
     문자와 숫자 앞에 나오는 \ 는 대부분 특별한 의미가 있으므로 주의한다.

     ^ & . * + ? = ! : | \ / ( ) [ ] { }

III. 정규 표현식
    1. 문자 클래스

         [...]     : 대괄호 안에 있는 문자
         [^...]   : 대괄호 안에 없는 문자
         .          : 줄바꿈이나 Unicode 줄마침을 제외한 아무 문자
         \w       : ASCII  문자  [a-zA-Z0-9_]와 동일
         \W      : ASCII 분자가 아닌 문자   [^a-zA-Z0-9_]와 동일
         \s        : Unicode 공백 문자
         \S       : Unicode 공백 문자가 아닌 문자
         \d       : ASCII 숫자     [0-9]와 동일
         \D      : ASCII숫자가 아닌 문자      [^0-9]와 동일
         [\b]    : 백스페이스

    2. 반복문자
         ?        : 앞의 항목이 0 또는 한번 나타난다.   {0,1} 과 동일하다.
         +       : 앞의 항목이 한 번 이상 나타난다.  {1, } 과 동일하다.
         *       : 앞의 항목이 0번 이상 나타난다.  {0, } 과 동일하다.

    3. 정규 표현식 참조
        - 정규 표현식 내에서 괄호로 묶인 부분 표현식은 순서대로 \와 숫자를 결합하여 참조한다.
        - 문자 클래스인 [...] 안에는 참조를 사용할 수 없다.

            /['"][^'"]*['"]/            : 작은따옴표나 큰따옴표 내에 한 개 이상의 문자가 있는 경우,
                                               그러나 시작과 끝의 따옴표는 다를 수 있다. (시작은 ' 끝은 " 일 수 있다)
            /(['"])[^'"]*\1/           : 시작과 끝의 따옴표가 같다. 여기서 \1 은 첫번째 () 참조를 나타낸다.

    4. 정규 표현식 앵커 문자
         ^          : 문자열의 시작 부분이나, 여러 라인을 찾는 경우에는 줄의 시작 부분에 매치된다.
         $          : 문자열의 끝 부분이나, 여러 줄을 찾는 경우에는 줄의 끝 부분에 매치된다.
         \b         : 단어 경계에 매치된다.  즉,  단어, 문자열의 시작이나 끝에 매치된다.  [\b] 백스페이스와 다르다.
                       Java 라는 단어만 매치시킬려면 Java 라는 단어가 문장 처음 혹은 끝에, 중간에 올 수 있다.
                       예) /\bJava\b/
         \B         : 단어 경계가 아닌 곳에 매치된다.
                        JavaScript 나 postscript에 매치되지만 script나 Scripting에 매치되지 않는다.
                        예) /\B[Ss]cript/
         (?=p)    : 이후에 나올 문자들이 패턴 p에 매치된다.
                        JavaScript: The Definitive Guide 는 매치되지만 Java in a Nutshell 은 : 이 없으므로 매치되지 않음
                        예) /[Jj]ava([Ss]cript)?(?=\:)/
         (?!p)     : 이후에 나올 문자들이 패턴 p에 매치되어서는 안된다.

    5. 정표 표현식 플래그(flag)
        - flag는 / 문자 바깥에 기술된다.
         i            : 패턴 매칭이 대소문자 구별없이 이루어져야 한다.
         g           : 패턴 매칭이 전역적이어야 한다. 즉, 탐색된 문자열에서 매치된 부분을 모두 얻어야 한다.
                        java 라는 단어(Java 혹은 JAVA 등)를 대소문자 구별없이 모두 찾는다.
                        예) /\bjava\b/gi
         m          : 여러 줄 상태, \b 는 문장의 처음과 끝, 중간 단어만 매칭하지만 ^는 줄의 시작이나 문자열의 시작에 매치,
                        $는 줄의 끝이나 문자열의 끝에 매치된다.
                        Java\nis fun (\n은 줄바뀜)
                        예) /Java$/im 

IV. RegExp 객체 사용법
    1. exec() 메소드
        - 문자열을 전달인자로 받아 정규 표현식을 실행한다. 매치되는 부분을 찾지 못하면 null을 리턴한다.
           매치되면 배열 객체가 리턴되며 배열의 0번 원소에는 정규표현식 매치된 문자열이 들어있다.
           배열객체의 index 프라퍼티는 매치가 일어난 문자의 위치가 저장되고 input프로퍼티는 검색대상이었던
           문자열을 참조한다.
        -  g플래그를 가진 정규 표현식이라면 RegExp객체의 lastIndex프라퍼티는 현재 매치된 부분 문자열의
           바로 다음위치이다. 매치되는 부분이 없으면 lastIndex 는 0 로 설정된다.
           그 다음은 lastIndex 부터 다시 매치되는지를 찾는다.
           
           var pattern = /Java/g;
           var text = "JavaScript is more fun than Java!";
           var result;
           while ((result = pattern.exec(text)) != null) {
               alert("Matched ' " + result[0] + "' at position " + result.index + "; next search begins at " + pattern.lastIndex);
           }



 
반응형
Posted by seungkyua@gmail.com
,
반응형
1. 함수나 객체명의 중복을 피하기 위해서 네임스페이스를 적용한다.

    var com;
    if (!com) com = {};
    else if (typeof com != "object") throw new Error("com already exists and is not an object");

    if (!com.ahnseungkyu) com.ahnseungkyu = {}
    else if (typeof com.ahnseungkyu != "object") throw new Error("com.ahnseungkyu already exists and is not an object");

2. closure를 사용하여 private 네임스페이스 정의
    var com;
    if (!com) com = {}
    if (!com.david) com.david = {};
    com.david.Class = {};

    (function() {
        var counter = 0;
        function getCounter() { return counter; }

        var ns = com.david.Class;
        ns.getCounter = getCounter;
    })();







 
반응형
Posted by seungkyua@gmail.com
,
반응형
1. 인스턴스 메소드를 호출하면 메소드 내의 this 키워드는 메소드가 속한 객체를 가르킨다.
2.  클래스 메소드는 생성자 함수를 통해 호출되기 때문에this 키워드는 특정한 인스턴스를 참조하지 않는다.
     대신 생성자 함수 자체를 참조한다. (일반적으로 클래스 메소드에서는 this를 사용하지 않는다)
3. 모든 함수에는 prototype 이라는 프로퍼티가 있는데, 이것은 함수가 정의될 때 부터 자동적으로 생성된다.
    prototype 프로퍼티의 초기값은 constructor 프로퍼티 하나만 가지는 객체가 지정된다.
    
    function Rectangle(w, h) {
        this.width = w;
        this.height = h;
        // new Rectangle(...) 객체가 생성될 때 마다 메소드도 생성된다. 메모리 낭비다.
        this.area = function() { return this.width * this.height; }  
    } 

    // new Rectangle(...)로 생성되는 모든 객체는 area() 메소드를 공유한다. (prototype의 특징)
    Rectangle.prototype.area = function() { return this.width * this.height; }

4. 클래스 프로퍼티와 메소드는 모두 생성자 함수에 저장한다. (함수도 객체이기 때문에 가능하다)

    // 생성자 함수를 정의한다.
    function Circle(radius) {
        this.r = radius;                  // 인스턴스 프로퍼티를 초기화한다.
    }

    // PI는 클래스 프로퍼티로 지정된다. 또한 생성자 함수의 프로퍼티가 된다.
    Circle.PI = 3.14;

    // prototype 메소드를 추가하여 모든 인스턴스가 해당 메소드를 공유하여 사용하게 한다.
    Circle.prototype.area = function() { return Circle.PI * this.r * this.r; }

    // max 는 클래스 메소드이다.
    Circle.max = function(a, b) {
        if ( a.r  > b.r ) return a;
        else return b;
    }

    // 사용법
    var c = new Circle(1.0);
    var a = c. area();
    var d = new Circle(1.2);
    var bigger = Circle.max(c, d);

5. private 프로퍼티 구현

    function ImmutableRectangle(w, h) {
        this.getWidth = function() { return w; }
        this.getHeight = function() { return h; }
    }

    ImmutableRectangle.prototype.area = function() {
        return this.getWidth() * this.getHeight();
    }

6. 클래스 상속(1)

    function Rectangle(w, h) {
        this.width = w;
        this.height = h;
    }
    Rectangle.prototype.area = function() { return this.width * this.height; }
    Rectangle.prototype.toString = function() {
        return "[" + this.width + "," + this.height + "]";
    }

    function PositionedRectangle(x, y, w, h) {
        Rectangle.call(this, w, h);
        this.x = x;
        this.y = y;
    }
    PositionedRectangle.prototype = new Rectangle();

    delete PositionedRectangle.prototype.width;
    delete PositionedRectangle.prototype.height;

    PositionedRectangle.prototype.constructor = PositionedRectangle;
    PositionedRectangle.prototype.contains = function(x, y) {
        return (x > this.x && x < this.y + this.width && y > this.y && y < this.y + this.height);
    }
    PositionedRectangle.prototype.toString = function() {
        return "(" + this.x + "," + this.y + ") " +
                   Rectangle.prototype.toString.apply(this);
    }


7. 클래스 상속(2)
    - 6번의 방법에서 생성자 부분만 바꿔주고 재정의 부분도 superclass를 사용한다.

    PositionedRectangle.prototype.superclass = Rectangle;
    function PositionedRectangle(x, y, w, h) {
        this.superclass(w, h);
        this.x = x;
        this.y = y;
    }
    PositionedRectangle.prototype.toString = function() {
        return "(" + this.x + "," + this.y + ") " +
                   this.superclass.prototype.toString.apply(this);
    }

8. 클래스 메소드 확장
    
    function borrowMethods(borrowFrom, addTo) {
        var from = borrowFrom.prototype;
        var to = addTo.prototype;

        for (m in from) {
            if (typeof from[m] != "function") continue;
            to[m] = from[m];
        }
    }

9. 객체 타입 판단
    - typeof undefined   :  "undefined"
    - typeof null             :  "object"
    - typeof f                  : "function"   f 가 함수라면
    - typeof o                 : "object"    o 가 객체이거나 null 이라면

    - x instanceof Array      : x가 Array 객체라면 true
    - x instanceof Function : x 가 함수라면 true
    - x instanceof Object     :  x가 객체(Array, RegExp, Date, Error 포함)이거나 함수라면 true

 
반응형
Posted by seungkyua@gmail.com
,
반응형
I. 일반 객체의 프로퍼티 존재 확인하기
    1. in 연산자 사용
        - 프로퍼티 "x"가 존재하면 값에 상관없이 1을 저장
            if ( "x" in o ) o.x = 1; 

    2. undefined 로 비교
        - 프로퍼티 "x"가 존재하고 값이 undefined가 아니라면 1을 저장 
            if ( o.x !== undefined ) o.x = 1; 

    3. null 로 비교
        - 프로퍼티 "x" 가 존재하고 이 값이 null 이나 undefined가 아니라면 1을 저장
            if ( o.x ) o.x = 1;

II. constructor 생성자 프로퍼티
    1. 모든 객체는 생성자 함수인 constructor 프로퍼티를 가지고 있다.
         var d = new Date();        // Date 라는 constructor 프로퍼티로 Date 객체를 생성
         if ( d.constructor == Date )   // 결과 값은 true
         if (  (typeof d == "object") && (d.constructor == Date) ) // 결과 값은 true

    2. instanceof 연산자는 constructor 프로퍼티의 값을 사용한다.
         if (  (typeof d == "object") && (d instanceof Date) ) // 결과 값은 true

III. hasOwnProperty() 메소드
    1. 객체가 해당 프로퍼티를 가지고 있는지 검사한다.
        프로퍼티가 상속받은 것이 아니고 객체 안에 지역적으로 정의되어 존재한다면 true 아니면 false
         var o = {};
         o.hasOwnProperty("undef");        // false; 정의되지 않은 프로퍼티
         o.hasOwnProperty("toString");    // false; 상속받은 프로퍼티
         Math.hasOwnProperty("cos");     // true; Math 객체에 cos 프로퍼티가 존재

IV. 모든 객체의 조상인 Object 클래스에 존재하는 최상의 프로퍼티들
    1. constructor 프로퍼티
    2. toString() 메소드
    3. toLocaleString() 메소드
    4. valueOf()  메소드
    5. hasOwnProperty() 메소드
    6. propertyIsEnumerable() 메소드
    7. isPrototypeOf() 메소드

V. 배열 객체
    1. 배열의 길이
        - 배열의 길이는 length 프로퍼티로 알 수 있으며, 배열 안에서 가장 큰 인덱스 값보다 하나 더 큰 수 이다.
        - 배열의 원소들도 undefined 값을 가질 수 있는 특징을 생각하면 위의 문장이 이해가 갈 듯.
            var a = new Array();       // a.length == 0
            a = new Array(10);         // a.length == 10
            a = new Array(1, 2, 3);   // a.length == 3
            a = [4, 5];                        // a.length == 2
            a[5] = 1;                          // a.length == 6
            a[49] = 0;                        // a.length == 50
 
    2. 배열의 메소드
        - join() 메소드
            . 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다.
                var a = [1, 2, 3];
                var s = a.join();      // s = "1,2,3"
                s = a.join(", ");       // s = "1, 2, 3"
 
        - reverse() 메소드
            . 배열 안의 원소 순서를 반대로 정렬하여 반환한다.
                var a = new Array(1,2,3);    // a[0]=1, a[1]=2, a[2]=3
                a.reverse();                           // a[0]=3, a[1]=2, a[2]=1

        - sort() 메소드
            . 배열 안의 원소들을 정렬하여 반환한다.
                var a = new Array("banana", "cherry", "apple");
                a.sort();           // a[0]="apple", a[1]="banana", a[2]="cherry"

            . 배열 안의 undefined 원소는 배열의 끝 부분으로 정렬된다.
            . 배열 안의 원소들이 문자열이 아니라면 비교를 위해 임시로 문자열로 변환 작업이 수반된다.
            . 비교 함수를 전달인자로 하여 정렬할 수 있다. 비교 함수는 전달인자를 두 개 받는데,
              첫번째 전달인자가 두번째보다 먼저 나타나야 한다면 비교 함수는 0보다 작은 숫자를 반환해야 한다.
                var a = [33, 4, 1111, 222];
                a.sort();                                                   // 알파벳순 : 1111, 222, 33, 4
                a.sort( function(a, b) { return a-b; } );    // 번호순 : 4, 33, 222, 1111

        - concat() 메소드
            . 배열의 모든 원소에 전달인자들을 모두 이어 붙인 새로운 배열을 리턴한다.
                var a = [1, 2, 3];
                a.concat(3, 4, 5);   // [1, 2, 3, 4, 5] 를 리턴한다.

        - slice() 메소드
            . 배열의 일부분을 리턴한다.
                var a = [1, 2, 3, 4, 5];
                a.slice(0, 3);         // 0 번째 부터 3번째는 제외하고 그 이전까지 리턴  [1, 2, 3]
                a.slice(3);             // 3 번째 부터 끝까지 리턴 [4, 5]
                a.slice(1, -1);        // -1 은 맨 마지막 원소를 가리킨다. [2, 3, 4]

        - splice() 메소드
            . 배열의 원소를 삭제하거나 삽입할 때 
               var a = [1, 2, 3, 4, 5, 6, 7, 8];
               a.splice(4);           // [5, 6, 7, 8]을 리턴한다. a = [1, 2, 3, 4]
               a.splice(1, 2);       // 1번째에서 2개수 만큼 잘라낸다.  [2, 3]을 리턴한다. a = [1, 4]

        - push() 메소드
            . 배열의 끝 부분에 이어 붙이고 새로운 길이를 리턴한다.
               var stack = [];
               stack.push(1, 2);      // stack: [1, 2]     길이 2를 리턴한다.

        - pop() 메소드
            . 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 리턴한다.
               stack.pop();              // stack: [1]          원소 2를 리턴한다.
               
        - unshift() 메소드
            . 배열의 맨 앞에 원소를 삽입한 후 배열의 새로운 길이를 리턴한다.
               var a = [];
               a.unshift(1);             // a: [1]         길이 1을 리턴한다.
               a.unshift(22);           // a: [22, 1]   길이 2를 리턴한다.

        - shift() 메소드
            . 배열의 첫 번째 원소를 제거한 후, 나머지 배열 원소들을 전부 앞으로 옮기고 제거한 원소를 리턴한다.
               a.shift();                   // a: [1]         원소 22를 반환한다.

       

 
반응형
Posted by seungkyua@gmail.com
,
반응형
1. delete 연산자
    - 객체 프로퍼티, 배열 원소, 암묵적인 전역 변수를 삭제할 수 있다.
    - 객체 프로퍼티 삭제는 프로퍼티만 삭제될 뿐 참조되고 있는 객체가 삭제되지 않는다.
       delete object.name;
    - var 로 정의된 변수는 삭제할 수 없다.

2. typeof 연산자
    - 숫자 : "number"
    - 문자열 : "string"
    - 불리언 : "boolean"
    - null : "object"
    - 객체 : "object"
    - 배열 : "object"
    - 함수 : "function"
    - 정의되지 않음 : "undefined"
    - Wrapper 클래스 (Number, String, Boolean) : "object"
    - Date, RegExp 클래스 : "object" 

3. void 연산자
    - 무조건 undefined 를 반환한다.
    - 함수에서 return; 문만 써서 반환 할 때의 값도 undefined 이다.
    - 브라우저에 평가된 값을 표시하지 않으면서 표현식을 평가하고자 할 때 사용한다.
       <a href="javascript:void window.open();"> Open New Window</a>

 
반응형
Posted by seungkyua@gmail.com
,
반응형
자바스크립트의 데이터 타입

I.  원시 데이터 타입 (3가지)
   1. 숫자 (number)
       - 0, -1 ... , NaN
       - Wrapper 클래스는 Number

   2. 문자열 (string)
       - "" 으로 표현
       - Wrapper 클래스는 String 

   3. 불리언 (boolean)
       - true, false
       - Wrapper 클래스는 Boolean

II. 단순 데이터 타입 (2가지)
   1. null
       - 불리언 : false,  숫자 : 0, 문자열 : "null" 로 변환된다.

   2. undefined
       - 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우
         반환되는  값이다.
       - 불리언 : false, 숫자 : NaN, 문자열 : "undefined" 로 변환된다.

   ※ 동등 연산자 (==) 을 사용하면 null 과 undefined 는 같은 값으로 간주한다.
       my.prop == null;
       이 비교는 my.prop 프로퍼티가 존재하지 않거나, 존재하기는 하지만 null 값인 경우 true로 평가된다.
       null 과 undefined 값을 구별할려면 일치 연산자 (===) 나 typeof 연산자를 사용하면 된다.

III. 객체 타입 (4가지)
   1. 일반 객체 (Object)
       - 생성방법 2가지 : new 연산자, 객체 리터럴
          . new  연산자
              var point = new Object();
              point.x = 1.2;
              point.y = 1.2;

          . 객체 리터럴
              var point = { x:1.2, y:1.2 };
             
              ※ 객체 리터럴 내에서 사용되는 프로퍼티는 상수, 변수, 자바스크립트 표현식 모두 사용할 수 있다.
                  객체 리터럴 내의 프로퍼티 이름으로 식별자 뿐만 아니라 문자열도 사용가능하다.
                  var square = { "upperLeft": { x:point.x, y:point.y },
                                       'lowerRight': { x:(point.x + side), y:(point.y + side) } };

   2. 배열 (Array)
       - 생성방법 2가지 : new Array() 연산자, 배열 리터럴
          . new Array() 연산자
              var array = new Array();
              array[0] = 1.2;
              array[1] = "Hello World";
              array[2] = true;
              array[3] = { x:1, y:3 };

          . 배열 리터럴
              var array = [ 1.2, "Hello World", true;, { x:1, y:3 } ];

              ※ 배열 리터럴 내 요소는 상수, 변수, 자바스크립트 표현식 모두 사용할 수 있다.
                  var i = 1;
                  var count = [ i, i+1, i+2; i+3 ];

   3. 함수 (function)
       - 함수는 사실 자체가 값이며 데이터의 타입은 아니다.
         그러므로 함수를 변수나 배열, 객체에 저장할 수 있으며 다른 함수의 전달인자로 넘겨줄 수 있다. 

       - 정의방법 2가지 : 일반 정의 문법, 함수 리터럴
          . 일반 정의 문법 : function 키워드 + 함수명 + (전달인자 혹은 매개변수)
             function square(x) {
                 return x * x;
             }

          . 함수 리터럴
             var square = function(x) { return x * x; }

       ※ 함수 리터럴은 자바스크립트 표현식 내에 나타낼 수 있다.

   4. 내장 객체 (Date, RegExp, Error)
       - Date 객체
          var now = new Data();
          var xmas = new Date(2011, 11, 25);  // 월은 0 부터 시작하므로 11 이 12월을 나타낸다. 

       - RegExp 객체
          . 정의방법 2가지 : new RegExp(), 정규 표현식 리터럴
             var re = new RegExp('+s', 'g');
             var re = /+s/g;

       - Error 객체
          . try ~ catch 로 런타임 에러를 받는다.      



반응형
Posted by seungkyua@gmail.com
,