[ 자바스크립트 중고급 내용 별도 정리(함수,호이스팅,prototype,실행컨텍스트 등. ]

- 해당 내용은 class 상속을 제외한 자바스크립트 중,고급 내용을 정리한 것입니다.

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>

/*
        [ 함수(Function) ]

1. 호이스팅(Hoisting)
        : 변수 선언, 함수선언(익명함수는 X) 을 위로 끌어올리는 성질로
        -> 아래의 예에서 a()를 호출시 자바스크립트는 최초 a함수를 위로끌어올려
        호이스팅하기 때문에 수행 가능하지만 b, c는 에러가 발생

-> 아래 예시를 자바스크립트 수행 순서대로 표시해보면...
        function a(){...}
        var b;
        function bb(){...}
        var c;
        // 여기까지해서 변수 선언부와 함수 선언이 호이스팅 됨...

console.log(a());
        console.log(b());
        console.log(c());

b = bb;
        c = function(){...}
        가 되게됨...
    */
    console.log(a()); // 'a'
    //console.log(b()); // 변수 b가 호이스팅되어 위로 올려지고 bb()함수도 호이스팅되지만 b에
                      // 대입되지 않은 시점에 수행함으로 에러
    //console.log(c()); // 변수 c 선언만 호이스팅되고 c에는 undefined가 들어 있음으로 에러

// 선언적 함수
    function a(){
      return 'a';
    }
    // 기명함수 표현식
    var b = function bb(){
      return 'b';
    }

// 익명함수
    var c = function(){
      return 'c';
    }
    ///////////////////////////////////////////////////////////////////////////////////////

/*
    ex) 아래의 예시를 한번 보자.
      팀작업을 하다보면 다른 사람과 동일한 이름으로 함수를 아래쪽에 한번 더 선언하게 될 수 있는데
      (실수로...)
      이 경우는 호이스팅을 같이 생각하면 어떻게 수행될까?
      -> 첫번째 sum함수 선언이 호이스팅되서 올라가고, 두번째 sum 함수 선언이 호이스팅되는데
        이때, 이미 sum함수가 있음으로 마지막에 선언된 sum함수로 덮어써지고 만다...
        따라서, sum(1,2)와 sum(3,4)가 모두 3, 7의 결과가 나온다.
        (우리 예상으론 a+b=3, 7이 나올것 같지만...)

결론)
        -> 호이스팅에 의해 덮어써질 수 있음으로 함수 선언은 선언적 함수 방식보다
           함수 표현식(익명함수로 대입하는 등...)의 방식을 사용해서 정의하는 것이 좋다!
    */
    function sum(a,b){
      return "a + b = " + (a+b);
    }

sum(1,2); // 3

function sum(a,b){
      return (a+b);
    }

sum(3,4); // 7
    //////////////////////////////////////////////////////////////////////////
    /*
    - 실행 컨텍스트란?
        : 함수 등이 실행되는 시점에 실행시 필요한 호이스팅, this 바인딩 등의 작업이 이루어져
          필요한 정보를 불러모은 하나의 집합체가 되는 작업.
    -> 호이스팅, 실행 컨텍스트를 따져서 아래 예시의 호출 순서에 대해 생각해 보자.
    -> 출력값은 어떻게 되는가?
      : 정답) 1 undefined 1 1
    */
    var a = 1;

function outer(){

console.log(a);

function inner(){
        console.log(a);
        var a = 3;
      }

inner();

console.log(a);

}

outer();
    console.log(a);

/*
    수행순서)
    1. var a; // 호이스팅
    2. outer함수 선언 호이스팅
    3. a = 1;이 대입됨
    4. outer()를 수행함과 동시에 outer함수의 실행 컨텍스트 생성
    5. outer함수 내에서
       inner함수 선언 호이스팅
    6. outer함수 내의 console.log(a) 수행 -> 1출력
    7. inner()를 수행하며 inner함수의 실행컨텍스트 생성
       var a; 호이스팅되며
       console.log(a) 수행하며 undefined가 출력됨(아래 var a=3에서 a가 호이스팅되지만 대입은 아직 전이기 때문)
       a = 3대입이 이루어짐
    8. outer함수 내의 inner()아래 console.log(a)가 수행됨 -> 1 출력
    9. 가장 아래의 console.log(a)가 수행되며 -> 1출력
    */
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [ 사용시점에 따라 달라지는 this의 의미(this 바인딩) ]
      - 각 상황별 this가 갖는 의미에 대해 알아보자.
      1. 전역 스코프에서 this의 의미 -> "window 객체"를 가리킴
      2. 함수 내부에서 this의 의미 -> "window 객체"를 가리킴
        -> 이 부분이 메서드 내의 this와 헷갈릴 수 있는데
        -> 함수와 메서드는 다름... 메서드는 -> 우리가 흔히 아는 클래스 내에 있는 메서드를 의미하는 것!
        -> 주의하자!! 함수 내의 this의 의미는 "window 객체!"
      3. 메서드 내부에서 this의 의미 -> 메서드 실행 앞까지(호출주체)가 this
          -> 생성자 함수든 리터럴 선언이든 그 안에 정의된 메서드는
          -> new a().print()일 경우 메서드 .앞까지 new a()가 this를 의미하게 됨!
      4. callback에서 this의 의미 -> 함수 내부에서와 동일.
      5. 생성자 함수에서 this의 의미 -> 인스턴스
    */
    // 1. 함수 내에서 this의 의미 ex)
    function a(){
      console.log("함수 내부에서 this의 의미");
      console.log(this); // window 객체...
    }
    function b(){
      function c(){
        console.log("함수 내의 내부 함수에서 this의 의미");
        console.log(this); // 아무리 내부함수여도 역시 window 객체...
      }
      c();
    }

// 2. 메서드 내에서 this의 의미
    var d = {
      e : function(){
        function f(){
          console.log("메서드 내의 내부함수에서  this의 의미");
          console.log(this);
        }
        f();
      }
    }
    d.e(); // window 객체!
    // 여기서 메서드 내의 내부 함수여서 메서드 실행 앞까지가 this를 의미할 것 같지만
    // -> 역시 함수 내부이기 때문에 this가 가리키는 것은 window객체이게 됨!(함수 내부의 this는 무조건!!! window 객체)
    /*
    var a = {
      b : function(){
        console.log("메서드 안에서의 this의 의미");
        console.log(this);
      }
    }
    a.b(); // b()수행 . 앞까지 즉 a 인스턴스가 this
    */

// 그럼... 메서드 내의 내부함수에서 this가 객체를 가리키게 할 순 없을까?
    var obj2 = {
      a : 20,
      b : function(){
        var self = this; // 여기서 미리 this를 담음
        function cc(){
          console.log(self.a);
        }
      }
    }

// 3. callback 함수 내에서 this의 의미 ex)
        // -> 함수에서와 동일 but 함수 수행시 this 바인딩을 지정할 수 있음(함수도 마찬가지)
    var callbackFunc = function(){
      console.log("callback 함수 내에서 this");
      console.log(this);
    }
    var obj3 = {
      a : 1,
      b : function(callBackFunc){
        callBackFunc();
      }
    }
    obj3.b(callbackFunc); // callback 함수 내에서 this -> window 객체
    /*
    [ 함수 실행시 this 바인딩 시켜 실행하는 몇가지 방법 ]
    1. func.call(this바인딩할녀석, 해당함수 매개변수...)
        -> func.call(obj3, 1,2,3)
    2. func.apply(obj3, [1,2,3])
    3. var d = func.bind(obj3, 1,2,3)
        -> 1,2번은 즉시 호출되어 수행되고 3번은 새로운 함수를 생성하게 됨
        -> 즉시 수행되는게 아님... this 바인딩만 결정해서 다른 함수의 매개변수 등으로 전달하고자 할 때 주로 사용됨.
    */
    var cb = function(){
      console.log("bind를 통해 this를 변경해 호출하자.");
      console.log(this);
    }
    var obj4 = {
      a : 1
    }
    setTimeout(cb.bind(obj4),100);
    // setTimeout의 첫번째 매개변수는 함수를 받는데 apply, call은 즉시 수행함으로 bind를 통해서 더해야함
    // 이때, cb함수 수행시 매개변수는 넘기지 않았고, cb함수 수행시 cb함수 내의 this의 의미만 obj4를 가리키도록 bind했음
    // 따라서 this는 obj4를 가리키게 됨.

// 4. 생성자 함수 내에서 this의 의미 ex)
        // -> 인스턴스
    function constructorObj(){
      this.a = 10; // constructorObj 생성자를 통해 생성된 인스턴스를 가리킴(this)
      this.print = function(){
        console.log("이곳에서의 this는 ? ");
        console.log(this); // 메서드 내에서니까 new constructorObj() 가 됨.
      }
    }
    new constructorObj().print();
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /*
      [ prototype ]
      : 많이 들어밨을테지만... 간단히 알면 엄청 쉽고... 자세히 알면 너무너무 어려운... 우리 prototype님...
      -> 우리가 흔히 제일 많이 아는 사용 이유?)
        : 생성자 함수 등에서 메서드를 선언하고 new를 통해 인스턴스를 생성시 모든 인스턴스에서 중복으로 메서드를 위한
        : 메모리 공간을 할당해 비효율 적이니까 공유될 수 있는 prototype에 선언해 효율적이게 관리하고
        : 또, prototype을 통해 상속을 구현하기 위해서... 정도?
      -> 이정도까진 기본적이니까... 많이들 안다. 하지만 인스턴스.메서드() 를 수행했을 때 어떻게 prototype내의 메서드가
        수행되고 하는 원리에 대해 아는 사람은 그리 많지 않다... 아래부턴 그것에 대해 설명한다.

---------------------------------------------------------------------------------------------------------
      - 생성자 함수를 정의시 자동으로 생성자 함수 내에는 prototype 객체라는 프로퍼티가 생성되게 된다.
      - 이때, 생성자 함수를 new를 통해 인스턴스를 생성하게 되면
          -> 해당 인스턴스에는 __proto__ 라는 변수가 하나 생성되게 되는데 이 __proto__는 바로 생성자의 prototype을
          -> 가리키게 된다.
          -> 이때 중요한건!
                -> 인스턴스는 __proto__를 생략하고 prototype에 바로 접근할 수 있다.(__proto__는 생략이 가능하다.)
                ex) new obj().__proto__.testMethod() == new obj().testMethod()

-> 위의 this바인딩과 연계해 얼마나 잘 이해했나 테스트해보자. 아래 예시를 보라.
    */
    function Person(n,a){ // Person 생성자 함수
      this.name = n;
      this.age = a;
    }

Person.prototype.setOlder = function(){
      this.age += 1; // 메서드 내의 this는? .앞까지 호출대상
    }
    Person.prototype.getAge = function(){
      return this.age;
    }

console.log("prototype EX");
    var youngRong = new Person('영롱',29);// 인스턴스 생성
    youngRong.__proto__.setOlder();
    console.log(youngRong.__proto__.getAge()); // NaN 발생 why?
    // -> 메서드내의 this는 메서드 앞 .까지가 호출대상임
    // 따라서, 여기선 youngRong.__proto__ 객체 즉 prototype객체가 this인데 해당
    // prototype내에 a를 정의한 적이 없음 따라서 undefined랑 1이랑 위에서 연산이 이루어져서 NaN가 나옴.
    console.log(youngRong.getAge()); // 29가 출력됨... youngRong이란 인스턴스를 가리키게 되니까... this가
    // 이처럼 __proto__를 생략하고 prototype에접근할 수 있는 것임...
    ////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [  자바스크립트 상속을 구현하기 위해 반드시 이해해야하는 prototype 체이닝에 관하여... ]
      - 자 우리는 자바스크립트에서 모든 객체는 Object 객체로부터 파생된다라는걸 알고있을거다.(Object 최상위 객체)
      - 모르면... 난감...
      - 그럼 어떻게 모든 자바스크립트 객체들은 Object 객체를 상속받고 있고 또 Object 내에 정의된 toString(), valueOf()등의
      - 메서드를 사용할 수 있는걸까?
      -> Array도 객체임으로 Object를 똑같이 상속하고 있을 텐데 Array로 예를 들어보자.

Object 생성자  -------> Object prototype
                                          /              - toString()
                                        /                - valueOf()
                                      /                  - isPrototypeOf() .. 등의 메서드
                                    /
                                  /
      Array 생성자  ---------> Array prototype
          |                    /
         new                 /
          |                /
      Array 인스턴스 -- __proto__
      -> Array인스턴스의 __proto__는 Array prototype을 가리키고 있고 Array prototype은 Object의 prototype을 가리키고 있기 때문!
      따라서 __proto__는 생략이가능하기 때문에 배열에서 바로 new Array().toString()처럼 접근할 수 있는 것!
    */
    var arr = [1,2,3];
    console.log("Array Object 관계")
    console.log(arr.toString()); // Object prototype에 선언되있는 toString()을 수행함 -> 1,2,3
    arr.toString = function(){ // 이렇게 정의하면 클래스에 static 메서드로 정의하게 되는 것!
      return this.join('_'); // 메서드 내의 this임으로 .앞까지가 호출대상이 this
    }
    console.log(arr.toString()); // arr에 선언된 toString()이 호출되 -> 1_2_3 출력(직접 정의한 것 호출)
    var arr2 = [3,4,5];
    console.log("this bind 변경");
    console.log(arr.__proto__.toString.call(arr2)); // this 바인딩을 arr이 아니라 arr2로 해서 수행할 수도 있음 -> 3,4,5 출력
    // 그럼 우리가 여기서 알 수 있는건 머임?
    // 우리가 event처리할 때 event의 함수 내에서 this를 써서 이벤트가 발생한 돔객체를 가리키도록 하는데 이게 어떻게 가능할까?
    // -> 그래, addEventListener 내에서 전달된 callback함수 수행시 bind를 이벤트가 발생한 돔을 가리키도록 했기 때문이지...
    // -> 이런 이유도 모르고 그냥 이벤트 처리에서 this를 사용하는 사람들이 정말 많다...

var obj5 = {
      a:1,
      b:{
        c:'c'
      }
    }
    console.log("obj5 : ");
    console.log(obj5.toString()); // Object prototype의 toString을 수행해 결과 -> [ Object Object ]
    // 이처럼 Object의 toString()은 우리가 원하는 결과를 얻을만큼 구체적으로 구현되어 있지 않음...
    // 따라서, 객체들의 toString()을 디버깅 용으로 찍어보기 위해 Object prototype을 재정의해 사용하는 것이 권장됨.

obj5.toString = function(){
      var res = [];
      for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
        res.push(key + ': ' + this[key].toString());
      }
      return '{' + res.join(', ') + '}';
    }

console.log(obj5.toString());
    // {a: 1, b: [object Object], toString: function (){
    //
    //   var res = [];
    //
    //   for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
    //
    //     res.push(key + ': ' + this[key].toString());
    //
    //   }
    //
    //   return '{' + res.join(', ') + '}';
    //
    // }}

// b 프로퍼티는 원하는 결과를 얻기 어렵고 매 클래스마다 저렇게 toString을 재정의하기도 번잡함... 따라서 아래처럼 수정하자.
    // Object prototype의 toString을 재정의
    Object.prototype.toString = function(){
      var res = [];
      for(var key in this){ // prototype체인을 통해 인스턴스에서 메서드 수행시 메서드 앞까지가 this가 됨으로 해당 객체
                            // 가 된다.
        res.push(key + ': ' + this[key].toString());

}
      return "{" + res.join(', ') + "}";
    }
    console.log(obj4.toString());
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
  </script>
</head>

저작자표시 비영리

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1. 함수(Function) 및 객체(Object) (0)	2018.09.27

[ 함수(Function) ]

-종류)

1. 선언적 함수 : 함수에 이름이 있는 함수로 호이스팅의 대상이 된다.(호이스팅은 별도로 정리)

function circle(radius){

~~

return something;

}

2. 익명 함수 : 함수에 이름이 없어 주로 변수에 대입해서 사용하는 함수(호이스팅의 대상이 되지 않음)

-> 따라서 순차적으로 수행되기 때문에 요즘은 익명함수로 선언하는 것이 추천됨.

var anonymousFunc = function(raidus){

~~

return something;

}

3. 람다 함수 : 일회성으로 사용하기 위한 목적으로 사용되는 함수

(function(radius){

~~

return something;

})(25)

- 매개변수가 정해지지 않은 함수 처리 방식)

-> 자바스크립트는 arguments 라는 배열을 제공함

-> arguments[0], arguments[1], ... 하면 각 순서대로 넘긴 매개변수 값을 가져올 수 있다.

-> arguments.length : 실재 넘긴 매개변수 개수

-> arguments.callee 는 함수 정의부를 의미한다.

-> 따라서, arguments.callee.length 하면 선언된 매개변수 개수

testFunc(10,20,30,40); // 선언적 함수는 호이스팅되기 때문에 수행 가능.

function testFunc(a, b){

if(arguments.callee.length != arguments.callee){

alert("선언된 함수의 매개변수 개수와 실재 호출시 넘긴 매개변수 개수가 다릅니다.");

alert("선언 매개변수 개수 : " + arguments.callee.length);

alert("실재 호출시 넘긴 매개변수 개수 : " + arguments.length);

// arguments[0] // 10

// arguments[1] // 20

// arguments[2] // 30

}

- 인코딩/디코딩 내장함수)

-> 한글 등을 넘길때 값에 문제가 생길 수 있어 인코딩에 사용되는 내장함수이다.

escape(str) <-> unescape(str)

encodeURIComponent(str) <-> decodeURIComponent(str)

- 숫자 판별 내장함수)

isNaN() : 숫자면 true 아니면 false를 return함.

- 정수 변환 내장함수)

parseInt()

- 실수 변환 내장함수)

parseFloat()

-------------------------------------------------------------------------------------------

[ 객체(Object) ]

객체 선언 방식 종류)

1. new Object()를 통한 방식 -> 거의 사용 안함...

2. 객체 리터럴 방식

var circle = {

변수 : "값",

메서드1 : function(){

~~

return something;

},

메서드2 : function(){}

...

}

-new 를 통해 객체를 여러개 생성할 수 없음으로 3번 생성자를 이용한 방식이 제일 자주 사용된다.

-객체 선언 이후에 객체에 메서드, 변수를 추가하는 방법)

circle.새변수명 = 값;

circle.새메서드명 = function(){

~~

}

->*** 이런 방식 말고도 변수나 문자열을 통해서도 동적으로 변수, 메서드를 추가할 수 있다.

circle["새변수명"] = 값;

circle["새메서드명"] = function(){};

var newFunction = "print";

circle[newFunction] = function(){} 처럼 동적으로 생성할 수 있다.

3. 생성자 함수를 이용한 방식

1) 선언적 함수를 이용하는 방식

function constructorObject(a, b){

this.변수명 = 값;

this.메서드명 = function(){}

...

}

2) 익명함수를 이용하는 방식

var constructorObject = function(a,b){

this.변수명 = 값;

this.메서드명 = function(){}

}

new constructorObject(10,20);

처럼 new 연산자를 통해 인스턴스를 생성해서 사용하며, 이때 this는 자기 자신의 객체를 의미하게 된다.

-> 자바스크립트에서 각 사용처 별로 this가 굉장히 다른데 추후에 정리...

-> 일단, 생성자 함수를 통해 생성된 객체에서의 this는 자기 자신의 객체를 의미

-> 함수 내에서 this는 window 객체를 의미

역시 익명함수에서도 new를 통해 생성한 객체에 추가로 변수, 메서드를 추가하고 싶은 경우

var newObject = new constructorObject(10,20);

newObject.newVal = "새로운 값 추가";

newObject["newMethod"] = function(){} 처럼 추가할 수 있다.

*** [ 객체에서의 prototype ]

-> prototype 사용 이유)

생성자 함수를 통해 선언된 것을 new 키워드를 통해 객체 생성시 모든 인스턴스들은

생성자 함수 내에 선언된 메서드 공간을 중복적으로 할당받게 된다.

하지만 이러한 중복된 메서드를 공간을 객체마다 각기 할당받는 것은 비효율 적임으로

공유될 수 있는 prototype을 통해 한군대에서만 정의될 수 있도록 해주는 방식을 사용한다.

클래스명.prototype.변수명 = "값"; // 이 값은 해당 클래스명으로 생성되는 모든 객체에서 공유된다.

클래스명.prototype.메서드명 = function(){}

// 한번에 여러개를 뭉뚱그려 정의하고 싶다면...

클래스명.prototype = {

// 해당 클래스의 prototype을 통째로 재정의할 수도 있다.

변수명 : "값",

메서드1 : function(){},

메서드2 : function(){},

...

}

- Date 내장 객체 자주사용되는 메서드)

var date = new Date();

date.getFullYear();

date.getMonth() + 1; // 시작값이 0부터여서 1을 더해야함

date.getDate(); // 일

date.getHours();

date.getMinutes();

date.getSeconds();

- 콜백(Callback) 함수란? )

: 별거없다... 함수 호출시 매개변수에 함수를 넘겨서 해당 함수 내에서 특정 시점에 넘긴 함수를 수행하기 위한 목적으로 사용된다.

-> ajax등에서 success시 로딩 이미지를 없앤다거나 success가 완료된 시점에 특정 작업 등을 하려할 때 많이 사용된다.

function print(sum){

document.write(sum);

}

function testMethod(callbackF, a, b){

var sum = 0;

sum = a + b;

callbackF(sum); // 전달받은 callbackF(print메서드)를 수행한다.

}

testMethod(print, 10, 20);

저작자표시 비영리

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등) (0)	2018.09.30

[ 자바스크립트로 사용자 OS 버전 확인하는 코드(IE버전 X 운영체제 판별)]

자바스크립트로 IE8 과 같은 브라우저 버전 체크하는 코드는 많은데 막상 사용자의 운영체제가 무슨 버전인지까진 판별하는 코드가 잘 없었는데

다른분 티스토리에서 보고 유용한거같아 공유하려합니다.

조금더 덧대서 해당 윈도우 운영체제에 로그인한 사용자명의 폴더를 알아야할 경우

var net = new ActiveXObject ( "WScript.NetWork" );

var userName = net.UserName;

strFilePath = "C:\\Users\\" + userName + "\\AppData\\Local\\" + nanumTechnologiesPath; 코드를 사용하시면 로그인한 userName도 얻어올 수 있습니다.

이 아래는 자바스크립트로 운영체제 종류와 버전을 판별하는 코드입니다.

// JavaScript Document

// 만든이 : 다섯방울, THREE™ (http://the3.tistory.com)

// 주소 : http://the3.tistory.com/17

// Data : 2015. 01. 28

// Version : 0.2

// 참조 http://www.openspc2.org/userAgent/

// OS 버전 보기

var uanaVigatorOs = navigator.userAgent;

var AgentUserOs= uanaVigatorOs.replace(/ /g,'');

var Ostxt="";

var OSName="";

var OsVers="";

// This script sets OSName variable as follows:

// "Windows" for all versions of Windows

// "MacOS" for all versions of Macintosh OS

// "Linux" for all versions of Linux

// "UNIX" for all other UNIX flavors

// "Unknown OS" indicates failure to detect the OS

new function() {

var OsNo = navigator.userAgent.toLowerCase();

jQuery.os = {

Linux: /linux/.test(OsNo),

Unix: /x11/.test(OsNo),

Mac: /mac/.test(OsNo),

Windows: /win/.test(OsNo)

}

function OSInfoDev(){

if($.os.Windows) {

if(AgentUserOs.indexOf("WindowsCE") != -1) OSName="Windows CE";

else if(AgentUserOs.indexOf("Windows95") != -1) OSName="Windows 95";

else if(AgentUserOs.indexOf("Windows98") != -1) {

if (AgentUserOs.indexOf("Win9x4.90") != -1) OSName="Windows Millennium Edition (Windows Me)"

else OSName="Windows 98";

}

else if(AgentUserOs.indexOf("WindowsNT4.0") != -1) OSName="Microsoft Windows NT 4.0";

else if(AgentUserOs.indexOf("WindowsNT5.0") != -1) OSName="Windows 2000";

else if(AgentUserOs.indexOf("WindowsNT5.01") != -1) OSName="Windows 2000, Service Pack 1 (SP1)";

else if(AgentUserOs.indexOf("WindowsNT5.1") != -1) OSName="Windows XP";

else if(AgentUserOs.indexOf("WindowsNT5.2") != -1) OSName="Windows 2003";

else if(AgentUserOs.indexOf("WindowsNT6.0") != -1) OSName="Windows Vista/Server 2008";

else if(AgentUserOs.indexOf("WindowsNT6.1") != -1) OSName="Windows 7";

else if(AgentUserOs.indexOf("WindowsNT6.2") != -1) OSName="Windows 8";

else if(AgentUserOs.indexOf("WindowsNT6.3") != -1) OSName="Windows 8.1";

else if(AgentUserOs.indexOf("WindowsNT6.4") != -1) OSName="Windows 10";

else if(AgentUserOs.indexOf("WindowsPhone8.0") != -1) OSName="Windows Phone 8.0";

else if(AgentUserOs.indexOf("WindowsPhoneOS7.5") != -1) OSName="Windows Phone OS 7.5";

else if(AgentUserOs.indexOf("Xbox") != -1) OSName="Xbox 360";

else if(AgentUserOs.indexOf("XboxOne") != -1) OSName="Xbox One";

else if(AgentUserOs.indexOf("Win16") != -1) OSName="Windows 3.x";

else if(AgentUserOs.indexOf("ARM") != -1) OSName="Windows RT";

else OSName="Windows (Unknown)";

if(AgentUserOs.indexOf("WOW64") != -1) OsVers=", WOW64";

else if(AgentUserOs.indexOf("Win64;x64;") != -1) OsVers=", Win64 on x64";

else if(AgentUserOs.indexOf("Win16") != -1) OsVers=" 16-bit";

else OsVers=" on x86";

} else if ($.os.Linux) {

if(AgentUserOs.indexOf("Android") != -1) { OSName = getAndroidDevName(); }

else if(AgentUserOs.indexOf("BlackBerry9000") != -1) OSName="BlackBerry9000";

else if(AgentUserOs.indexOf("BlackBerry9300") != -1) OSName="BlackBerry9300";

else if(AgentUserOs.indexOf("BlackBerry9700") != -1) OSName="BlackBerry9700";

else if(AgentUserOs.indexOf("BlackBerry9780") != -1) OSName="BlackBerry9780";

else if(AgentUserOs.indexOf("BlackBerry9900") != -1) OSName="BlackBerry9900";

else if(AgentUserOs.indexOf("BlackBerry;Opera Mini") != -1) OSName="Opera/9.80";

else if(AgentUserOs.indexOf("Symbian/3") != -1) OSName="Symbian OS3";

else if(AgentUserOs.indexOf("SymbianOS/6") != -1) OSName="Symbian OS6";

else if(AgentUserOs.indexOf("SymbianOS/9") != -1) OSName="Symbian OS9";

else if(AgentUserOs.indexOf("Ubuntu") != -1) OSName="Ubuntu";

else if(AgentUserOs.indexOf("PDA") != -1) OSName="PDA";

else if(AgentUserOs.indexOf("NintendoWii") != -1) OSName="Nintendo Wii";

else if(AgentUserOs.indexOf("PSP") != -1) OSName="PlayStation Portable";

else if(AgentUserOs.indexOf("PS2;") != -1) OSName="PlayStation 2";

else if(AgentUserOs.indexOf("PLAYSTATION3") != -1) OSName="PlayStation 3";

else OSName="Linux (Unknown)";

if(AgentUserOs.indexOf("x86_64") != -1) OsVers=", x86_64";

else if(AgentUserOs.indexOf("i686") != -1) OsVers=", i686";

else if(AgentUserOs.indexOf("i686 on x86_64") != -1) OsVers=", i686 running on x86_64";

else if(AgentUserOs.indexOf("armv7l") != -1) OsVers=" Nokia N900 Linux mobile, on the Fennec browser";

else if(AgentUserOs.indexOf("IA-32") != -1) OsVers=" 32-bit";

else OsVers="";

} else if ($.os.Unix) {

OSName="UNIX";

} else if ($.os.Mac) {

if(AgentUserOs.indexOf("iPhoneOS3") != -1) OSName="iPhone OS 3";

else if(AgentUserOs.indexOf("iPhoneOS4") != -1) OSName="iPhone OS 4";

else if(AgentUserOs.indexOf("iPhoneOS5") != -1) OSName="iPhone OS 5";

else if(AgentUserOs.indexOf("iPhoneOS6") != -1) OSName="iPhone OS 6";

else if(AgentUserOs.indexOf("iPhoneOS7") != -1) OSName="iPhone OS 7";

else if(AgentUserOs.indexOf("iPhoneOS8") != -1) OSName="iPhone OS 8";

else if(AgentUserOs.indexOf("iPad") != -1) OSName="iPad";

else if((AgentUserOs.indexOf("MacOSX10_1")||AgentUserOs.indexOf("MacOSX10.1")) != -1) OSName="Mac OS X Puma";

else if((AgentUserOs.indexOf("MacOSX10_2")||AgentUserOs.indexOf("MacOSX10.2")) != -1) OSName="Mac OS X Jaguar";

else if((AgentUserOs.indexOf("MacOSX10_3")||AgentUserOs.indexOf("MacOSX10.3")) != -1) OSName="Mac OS X Panther";

else if((AgentUserOs.indexOf("MacOSX10_4")||AgentUserOs.indexOf("MacOSX10.4")) != -1) OSName="Mac OS X Tiger";

else if((AgentUserOs.indexOf("MacOSX10_5")||AgentUserOs.indexOf("MacOSX10.5")) != -1) OSName="Mac OS X Leopard";

else if((AgentUserOs.indexOf("MacOSX10_6")||AgentUserOs.indexOf("MacOSX10.6")) != -1) OSName="Mac OS X Snow Leopard";

else if((AgentUserOs.indexOf("MacOSX10_7")||AgentUserOs.indexOf("MacOSX10.7")) != -1) OSName="Mac OS X Lion";

else if((AgentUserOs.indexOf("MacOSX10_8")||AgentUserOs.indexOf("MacOSX10.8")) != -1) OSName="Mac OS X Mountain Lion";

else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.9")) != -1) OSName="Mac OS X Mavericks";

else if((AgentUserOs.indexOf("MacOSX10_10")||AgentUserOs.indexOf("MacOSX10.10")) != -1) OSName="Mac OS X Yosemite";

else OSName="MacOS (Unknown)";

if(AgentUserOs.indexOf("Intel") != -1) OsVers=" on Intel x86 or x86_64";

else if(AgentUserOs.indexOf("PPC") != -1) OsVers=" on PowerPC";

else OsVers="";

} else {

OSName="Unknown OS";

}

var OSDev = OSName + OsVers;

return OSDev;

}

// Android의 단말 이름을 반환

function getAndroidDevName() {

var uaAdata = navigator.userAgent;

var regex = /Android (.*);.*;\s*(.*)\sBuild/;

var match = regex.exec(uaAdata);

if(match) {

var ver = match[1];

var dev_name = match[2];

return "Android " + ver + " " + dev_name;

}

return "Android OS";

}

// OSInfoDev() 는 OS이름과 버전 출력하는 함수

// AgentUserOs 는 userAgent 출력

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 내장객체1(배열,Date,String,Number) (0)	2017.08.14
자바스크립트 객체의 캡슐화 (0)	2017.08.14
eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
지역변수,전역변수 개념과 자바스크립트의 객체(Object) (2)	2017.08.10
자바스크립트 정리1 (0)	2017.08.09

[Text Node 제어와 Document 및 스크린, 스크롤 위치 제어]

1. [ Text Node의 제어 ]

- 텍스트 데이터 확인 : ELEMENT.data or ELEMENT.nodeValue

- 텍스트 데이터 조작

-- element.appendData("추가할 텍스트 문자열") : 맨 마지막 부분에 문자열 추가

-- element.deleteData( startIndex, length ) : 해당 index부터 몇글자 지울지

-- element.insertData( startIndex, "추가할 문자열" ) : 해당 index 위치에 삽입

-- element.replaceData( startIndex, length, "바꿀 문자열" ) : 해당 index부터 length글자만큼을 새로운 바꿀 문자열로 교체

-- element.substringData( startIndex, length ) : 해당 인덱스부터 length개만큼 가져옴

<ul>
    <li id="target">html</li> 
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script>
    var t = document.getElementById('target').firstChild;
    console.log(t.nodeValue);
    console.log(t.data);
</script>

<!DOCTYPE html>
<html>
<head>
    <style>
    #target{
        font-size:77px;
        font-family: georgia;
        border-bottom:1px solid black;
        padding-bottom:10px;
    }
    p{
        margin:5px;
    }
    </style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p>   start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
<script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('datasource');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    function callAppendData(){
        target.appendData(data.value);
    }
    function callDeleteData(){
        target.deleteData(start.value, end.value);
    }
    function callInsertData(){
        target.insertData(start.value, data.value); 
    }
    function callReplaceData(){
        target.replaceData(start.value, end.value, data.value);
    }
    function callSubstringData(){
        alert(target.substringData(start.value, end.value));
    }
</script>
</body>
</html>





2. [ Document(문서)의 Element 위치 알아내기 ]

var positionInfo = Element.getBoundingClientRect(); 
-> getBoundingClientRect()는 width, height, top, left, right, bottom 프러퍼티를 갖는 객체이다.
- width : element의 가로 길이
- height : 세로길이
- top : viewport(아래에서 설명) 맨 위에서부터 element까지 y축 길이
- left : viewport 맨 좌측에서부터 element까지 x축 길이
- right : viewport 맨 좌측에서 element 맨 오른쪽까지 길이
- bottom : viewport 맨 위에서 element 맨 아래까지 길이

1) -> 하지만, getBoundingClientRect()는 구버전 브라우저에서는 제공하지 않는 경우도 있다. 따라서,
element의 좌표를 구할 때 element.offsetLeft, element.offsetTop을 사용하면 된다. == element.getBoundingClientRect().left|top

- 테두리를 제외한 width와 height 값 구하기
- element.clientWidth
- element.clientHeight 


2) -> 때떄로, 어떤 Element들은 해당 Element를 감싸고 있는 부모 Element가 position static인 경우 부모로 부터의 위치를 기준으로
  자신의 offsetLeft, offsetTop값을 반환하게 된다.
  따라서, 문서에서의 정확한 위치를 구하기 위해서는 다음과 같은 코드를 사용할 수 있다.

( 해당 Element를 포함하고 있는 부모 Element를 추적하면서 위치값을 더해감)

3. [ viewport란? 스크롤을 고려한 문서내의 Element의 위치 ]

- 1) Viewport(뷰포트)

: 문서 전체의 크기가 있을 때 예를들어 우리가 브라우저를 줄이게 될 경우 전체 Document가 다 보이지 않고

창 크기에 맞춰 일부분의 문서만 보일 것이다.

이때, 보이는 영역이 ViewPort이다.

--> 우리가 아까 위에서 element.offsetLeft, element.offsetTop 등이 viewport에서부터의 거리를 나타내고 있는 것이다.

따라서, 스크롤이 개입되게 되면, 해당 위치는 문서 전체를 기준으로했을 때 정확하지 않게 될 수 있다.

2) 스크롤의 위치는 어떻게 구할까?

-> window.pageYoffset

: y축 스크롤을 움직인 거리(문서가 가려진 y축 길이)

-> window.pageXoffset

: x축 스크롤을 움직인 거리(문서가 가려진 x축 길이)

3) viewport에서부터의 거리와 스크롤과의 관계

-> 스크롤을 내릴 수록 pageYoffset값은 커질 것이다. 그러면 offsetTop값을 기준으로 보면 어떻게 될까?

스크롤이 내려간만큼 그 길이는 짧아지게 된다.

예를들어, A라는 Element의 offsetTop값이 맨 처음 200이고 pageYoffset이 0이었을 때

스크롤을 40px만큼 내려 pageYoffset이 40이 되면

offsetTop값은 200 - 40 인 160이 되게 된다.

전체문서에서 보이는 viewport를 기준으로 하기 때문이다.

따라서, 전체 문서에서의 위치를 구하려면 어떻게 해야할까?

--> element.offsetTop(뷰포트좌표) + window.pageYoffset(스크롤된 정도)

<style>
    body{
        padding:0;
        margin:0;
    }
    div{
        border:50px solid #1065e6;
        padding:50px;
        margin:50px;
    }
    #target{
        width:100px;
        height:2000px;
    }
</style>
    <div>
        <div id="target">
            Coding
        </div>
    </div>
 
<script>
var t = document.getElementById('target');
setInterval(function(){
    console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset);
}, 1000)
</script>

4. [ 스크롤 제어 ]

: 스크롤을 특정 위치로 이동시키는 방법

-> window.scrollTop(x, y); // x축, y축

<style>
    body{
        padding:0;
        margin:0;
    }
    div{
        border:50px solid #1065e6;
        padding:50px;
        margin:50px;
    }
    #target{
        width:100px;
        height:2000px;
    }
</style>
<input type="button" id="scrollBtn" value="scroll(0, 1000)" />
<script>
    document.getElementById('scrollBtn').addEventListener('click', function(){
        window.scrollTo(0, 1000);
    })
</script>
<div>
    <div id="target">
        Coding
    </div>
</div>

5. [ Viewport의 크기와 사용자 모니터 크기 구하기 ]

- Viewport 크기

: window.innerWidth

window.innerHeight

- 사용자 모니터 크기

: screen.width

: screen.height

저작자표시 비영리

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기) (0)	2017.12.03
이벤트 및 우클릭 방지 (0)	2017.11.28
5판 7장 객체(Object)와 배열(Array) (0)	2017.11.13

[ Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기) ]

-> 자바스크립트의 모든 DOM ELEMENT들은 최상위로 NODE를 상속하고 있기 때문에 NODE가 가지고 있는 속성을 사용할 수 있다.

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.

[ 1. Node의 자식 및 형제 Node에 접근하는 프러퍼티 ]

Node.childNodes
자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild
첫번째 자식노드
Node.lastChild
마지막 자식노드
Node.nextSibling
다음 형제 노드
Node.previousSibling
이전 형제 노드

-> 이렇게 노드에 접근할 때 중요한 점은 줄바꿈 텍스트 또한 NODE를 상속하기 때문에 자식으로 가져올 때 주의해야 한다는 점이다. 아래의 크롬브라우저의 테스트 창을 보면서

이해하기 바란다

EX) Crome Browser 개발자도구(F12) console창에서 테스트하는 예

<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
</body>

[ 2. Node의 타입을 알 수 있는 nodeType속성과 Node 이름을 알 수 이는 nodeName 속성 ]

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.

Node.nodeType
node의 타입을 의미한다. -> 타입값은 숫자로 나오게 된다. 주로 1(element), 3(TextNode), 9(document node) 를 주로 사용하게 된다.
Node.nodeName
node의 이름 (태그명을 의미한다.)

[ nodeType의 종류 ]

EX)

-> nodeType의 경우 1,2,3 숫자를 기억하기 어려울 수 있음으로 상수로 이를 대체하여 사용할 수도 있다.

EX)

[ 노드 추가관련 프러퍼티 ]

노드의 추가와 관련된 API들은 아래와 같다.

appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가
insertBefore(newElement, referenceElement)
appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.

document.createElement(tagname)
엘리먼트 노드를 추가한다.
document.createTextNode(data)
텍스트 노드를 추가한다.

<!DOCTYPE html>

// id="target"인 ul에 삽입할 li태그를 생성한다.
        var new_li = document.createElement("li"); // <li></li>
        // 새로 생성한 li태그에 넣을 텍스트 엘리먼트를 생성한다.
        var new_txt = document.createTextNode("insert after");
        // li에 텍스트 노드를 붙인다.
        new_li.appendChild(new_txt); // <li>insert after</li>

// li를 target의 마지막 자식 <li>CSS</li> 뒤에 붙인다.
        target.appendChild(new_li);
      }

function callInsertBefore() {
        var target = document.getElementById("target");

// id="target"인 ul에 삽입할 li태그를 생성한다.
        var new_li = document.createElement("li"); // <li></li>
        // 새로 생성한 li태그에 넣을 텍스트 엘리먼트를 생성한다.
        var new_txt = document.createTextNode("insert before");
        // li에 텍스트 노드를 붙인다.
        new_li.appendChild(new_txt); // <li>insert after</li>

// li를 target의 마지막 자식 <li>CSS</li> 뒤에 붙인다.
        target.insertBefore(new_li, target.firstChild.nextSibling); // insertBefore(붙일node, 어떤대상 앞에 붙일지)
        // 여기서 target.firstChid.nextSibling은 <li>HTML</li>를 의미하게 된다. 즉 그 앞에 붙게됨
      }
    </script>

[ 노드 제거 ]

노드 제거를 위해서는 아래 API를 사용한다. 이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.

removeChild(child)

[ 노드 바꾸기 ]

노드 바꾸기에는 아래 API가 사용된다.

replaceChild(newChild, oldChild)

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
        a.appendChild(document.createTextNode('Web browser JavaScript'));
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild); // 새로 만든 a태그를 target의 첫번째 자식 엘리먼트와 교체한다.(즉 텍스트 JavaScript를 대체)
    }
</script>

문자열로 노드 제어

위의 예들은 Node 객체를 생성한 뒤 제어했지만, 문자열로 붙이고 지우고 등을 할 수 있다. 아래는 그와 관련된 프러퍼티와 메서드이다.

1. innerHTML

innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다.

2. outerHTML

outerHTML은 선택한 엘리먼트를 포함해서 문자열로 가지고 오거나, 자신을 포함해서 문자열로 노드를 대체할 수 있다.

3. insertAdjacentHTML()

좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다.

EX) innerHTML

<ul id="target">

    <li>HTML</li>

    <li>CSS</li>

</ul>

<input type="button" onclick="get();" value="get" />

<input type="button" onclick="set();" value="set" />

<script>

    function get(){

        var target = document.getElementById('target');

        alert(target.innerHTML); // target 내부의 HTML과 CSS li를 가지고 오게 된다.(문자열로)

}

    function set(){

        var target = document.getElementById('target');

        target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";

}

</script>

EX) outerHTML

<ul id="target">

    <li>HTML</li>

    <li>CSS</li>

</ul>

<input type="button" onclick="get();" value="get" />

<input type="button" onclick="set();" value="set" />

<script>

    function get(){

        var target = document.getElementById('target');

        alert(target.outerHTML); // target 전체를 가지고 오게 된다.(문자열로)

}

    function set(){

        var target = document.getElementById('target');

        target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";

// ul태그 전체가 통째로 ol로 대체되게 된다.

}

</script>

EX) insertAdjacentHTML(arg1, arg2)

<ul id="target">

    <li>CSS</li>

</ul>

<input type="button" onclick="beforebegin();" value="beforebegin" />

<input type="button" onclick="afterbegin();" value="afterbegin" />

<input type="button" onclick="beforeend();" value="beforeend" />

<input type="button" onclick="afterend();" value="afterend" />

<script>

    function beforebegin(){

        var target = document.getElementById('target');

        target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>'); // 맨 첫번째 자식 앞에 삽입

}

    function afterbegin(){

        var target = document.getElementById('target');

        target.insertAdjacentHTML('afterbegin','<li>HTML</li>'); // 첫번째 자식 뒤에 삽입

}

    function beforeend(){

        var target = document.getElementById('target');

        target.insertAdjacentHTML('beforeend','<li>JavaScript</li>'); // 끝 자식 전에 삽입

}

    function afterend(){

        var target = document.getElementById('target');

        target.insertAdjacentHTML('afterend','<h1>Server Side</h1>'); // 끝 자식 뒤에 삽입

}

</script>

저작자표시 비영리

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Text Node 제어와 Document 및 스크린, 스크롤 위치 제어 (0)	2017.12.05
이벤트 및 우클릭 방지 (0)	2017.11.28
5판 7장 객체(Object)와 배열(Array) (0)	2017.11.13

<!DOCTYPE html>

var f = new test("hhh",28);
	alert(f);

// [ 문자열 String 관련 내장 객체 및 메서드 ]
	// 1. 문자열 생성 방법 2가지
	var str = "문자열";
	var str2 = new String("문자열2");
	// 문자열 관련 대표 메서드
		// 문자열 길이
		var strLength = str.length;
		// indexOf("찾을문자열") : 찾을 문자열 시작 인덱스를 반환한다.
		//						찾는 문자열이 없을시 -1을 리턴한다.
		var startIndex = str.indexOf("자열");
		// replace("old","new");
		str.replace("자열","좌열");
		// match("정규표현식")
		// str.match("정규표현식") : 정규표현식에 일치하는 문자열을 리턴한다.
		// substring(시작인덱스,끝인덱스) : 시작 ~ 끝 까지의 문자열을 반환한다.
		var sub = str2.substring(1,3);
		// toLowerCase() : 소문자로 변환
		var low = str2.toLowerCase();
		// toUpperCase() : 대문자로 변환
		var up = str2.toUpperCase();

// [ 숫자관련 내장객체 Number ]
	var num = 10;
	var s = "10";
	var num2 = Number(s); // 숫자로 변환
	// 숫자 관련 대표 메서드 : toFixed(자리수) : 자리수 이하를 버림한다.
	alert(num2.toFixed(1));
	alert(10.23456.toFixed(2));

// [ 배열 ]
	var arr1 = [1,2,3,4,5]; // 생성과 동시에 초기화
	var arr2 = new Array(5); // 공간만 생성
	var arr3 = new Array();

// [ 배열관련 메서드 ]
	var arr1Length = arr1.length;
	// push : 배열의 마지막에 데이터를 삽입
	arr1.push("newDataString"); // 자바와 달리 하나의 배열에 여러 타입을 저장할 수 있음.
	// pop : 마지막에 저장한 데이터를 빼옴
	var popData = arr1.pop(); // newDataString
	// splice(시작인덱스,갯수) : 시작인덱스부터 해당 갯수만큼 데이터를 삭제하고, 삭제한 데이터들을 반환함
	var spliceData = arr1.splice(2,3); // 3,4,5 가 spliceData 들어가 있음
	alert("spliceData : " + spliceData);
	alert(arr1); // 1,2

// [ Date 객체]

// Date 객체 생성
		var date = new Date();
		// '일' 가져오기
		alert("getData() : " + date.getDate());
		// '월' 가져오기 : 월-1 값이 출력됨을 유의(달만 이렇게...)
		alert("getMonth() : " + date.getMonth()); // 8월이면 7이 출력됨
		// '년' 가져오기
		alert("getFullYear() : " + date.getFullYear());
		// 7일 뒤의 날짜를 구하기 위한 방법
			// 현재 일을 가져와 7을 더하고 세팅
		date.setDate(date.getDate() + 7);
		alert(date);
		date.setFullYear(date.getFullYear() + 2); // 2년뒤
		alert(date);

// 경과시간 구하기
	var date = new Date(); // 현재 날짜 가져오기
	date.setDate(date.getDate() + 7); // 7일 뒤 날짜
	var now = new Date(); // 현재 날짜
	var untilTime = date.getTime();
	var nowTime = now.getTime();

var diffTime = untilTime - nowTime;
	diffTime = diffTime / (1000*60*60*24); // 하루단위로 나눔
	alert("오늘과 일주일뒤의 차이는 7일인가요? : " + diffTime);

</script>

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트로 사용자 OS 버전 확인하는 코드(IE버전 X 운영체제 판별) (0)	2018.07.18
자바스크립트 객체의 캡슐화 (0)	2017.08.14
eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
지역변수,전역변수 개념과 자바스크립트의 객체(Object) (2)	2017.08.10
자바스크립트 정리1 (0)	2017.08.09

<!DOCTYPE html>
<html>
                                                <head>
                <script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2750468,"name":"rongscodinghistory","title":"악덕고용주의 개발 일기","isDormancy":true,"nickName":"고무곰(GomuGom)","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://rongscodinghistory.tistory.com/tag/%25EC%259E%2590%25EB%25B0%2594%25EC%258A%25A4%25ED%2581%25AC%25EB%25A6%25BD%25ED%258A%25B8","DEFAULT_URL":"https://rongscodinghistory.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"};
window.T.entryInfo = null;
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};

window.TistoryBlog = {
    basePath: "",
    url: "https://rongscodinghistory.tistory.com",
    tistoryUrl: "https://rongscodinghistory.tistory.com",
    manageUrl: "https://rongscodinghistory.tistory.com/manage",
    token: "fuO3ntMxBLv6gvUEd3/jej2E63OGZ51HyouBJlVJGkkhCN4SpnVKP/xpjy6y87Fq"
};
var servicePath = "";
var blogURL = "";</script>

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"WebSite","url":"/","potentialAction":{"@type":"SearchAction","target":"/search/{search_term_string}","query-input":"required name=search_term_string"}}
</script>

<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-e11b6cd63d67e948b9dd33a1d0a60492dd6a0cbf/static/script/comment.js" defer=""></script>

</head>
<body>
<script type="text/javascript">
	/*
		[	 캡슐화	]
		: 내가 만든 변수에 다른 사용자에 의해 원치않는 값이 대입되는걸 막아야 할
		의도로 사용되어 진다.
		ex) 넓이를 구하는데 필요한 width,height값은 양수만 입력되어야하지만
		사용자가 음수를 입력하면 안되는데 이렇게 음수가 입력되는걸 방지하기 위해
		사용된다.

방법) 외부에서 사용자가 필드변수에 접근하는 것을 막기위해 지역변수로 선언하고
			getter와 setter를 통해서만 접근할 수 있도록 한다.
	*/
	function test(){
		/*
			this.nameVal2의 경우 외부에서 접근 가능
			var nameVal은 함수 내부에서 선언시 지역변수로 외부에서 접근이 불가능하다.
			따라서, 
		*/
		var nameVal = "";
		var ageVal = 0;
		this.nameVal2 = "";
		this.ageVal2 = 0;
		
		this.setterNameVal = function(name){
			nameVal = name;
		}

this.setterAgeVal = function(age){
			if ( age <= 0){
				throw "음수 입력하지마세요";
			}else{
				ageVal = age;	
			}
		}

this.getterNameVal = function(){
			return nameVal;
		}

this.getterAgeVal = function(){
			return ageVal;
		}
	}

test.prototype.info = function(){
		return "소개 : " + this.getterNameVal() + "님의 나이는 : "
			 + this.getterAgeVal();
	}
	var f = new test();
	f.setterNameVal("황영롱");
	f.setterAgeVal(28);

alert(f.info());
</script>

</body>
</html>

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트로 사용자 OS 버전 확인하는 코드(IE버전 X 운영체제 판별) (0)	2018.07.18
자바스크립트 내장객체1(배열,Date,String,Number) (0)	2017.08.14
eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
지역변수,전역변수 개념과 자바스크립트의 객체(Object) (2)	2017.08.10
자바스크립트 정리1 (0)	2017.08.09

- 자바스크립트의 지역변수와 전역변수 개념

=> 함수내에 선언된 변수만 지역변수!! 그 외에는 다 전역변수이다. 즉, 함수내에 선언된게 아니면

어떠한 블럭이건 for문 안에서건 전부 전역변수이다.

{

var param = 10;

}

이것도 어면히 전역변수

var f = function(){

var str = "string";

}

이 str변수는 지역변수

[ 자바스크립트의 객체(Object)에 대해서]

<!DOCTYPE html>

// 일반적인 객체 생성 방법(선언과 동시에 생성)
	var studentObj = {
		// 필드
		name : "황영롱",
		age : 28,
		// 메서드
		sayHello : function(){
			// 객체 내의 필드변수에 접근할 때는 반드시 this키워드를 써줘야한다.(자바와 다름...생략 불가)
			return this.name + "입니다. 안녕하세요.";
		}
	}

alert(studentObj.name + "입니다. " + studentObj.sayHello());

var students = [];
	// 배열에 객체 추가
	students.push(studentObj);

// 객체명을 생략해 편리하게 이용하도록 도와주는 with
	// 본래 아래와 같이 필드변수에 접근해야한다.
	console.log( studentObj.name + studentObj.age );
	// 하지만... width를 쓰면 다음처럼 접근할 수 있다.
	with(studentObj){
		console.log( name + age );
	}

// 매번 객체에 값을 넣어논 상태로 생성하는 것이 불편하기 때문에 생성자를 이용해 객체를 생성하도록 한다.
	function Student(name,age,kor,math){
		
		this.name = name;
		this.age = age;
		this.kor = kor;
		this.math = math;

this.getSum = function(){
			return (this.kor + this.math);
		}

this.toString = function(){
			return ("이름 : " + this.name + "나이 : " + this.age + "합계 : " + this.getSum() );
		}

}

// 객체 생성
	var s1 = new Student("홍길동",20,100,98);
	// 메서드 호출
	alert(s1.toString());

// 이런 객체 생성방식에서 필드변수의 값은 매번 다를 수 있지만 함수는 매번 똑같기 때문에
	// 매번 메모리를 잡아먹으면 낭비가 된다. 따라서 생성자 함수 정의시 필드 변수만 넣고 메서드는 prototype 객체에 넣도록 한다.
	// prototype 객체는 모든 객체가 공통으로 가지는 객체이다. 이 prototype에 메서드를 등록해서 사용한다.

function Car(name,color){
		this.name = name;
		this.color = color;
		// 필드 변수만 기재한다. 메서드는 따로 prototype에 등록한다.
	}
	// 프로토타입에 메서드 등록
	Car.prototype.performance = function(){
		return this.name + "의 차이며 색상은 : " + this.color + "입니다.";
	}
	Car.prototype.newParam = 10;

var c1 = new Car("아반떼","검정");
	var c2 = new Car("소나타","레드");
	alert(c1.performance());
	alert(c2.performance());

// 이 경우 c1과 c2에 본래 performance메서드가 각각 메모리에 잡히게 되고 만약 이런 객체를 100개를 만들면 100개의 공간이잡힐 것이다.
	// 하지만, 둘 다 공유할 수 있는 prototype이라는 객체에 메모리를 할당해 놓고 두 객체는 이 공간을 공유해 사용하게 되서 메모리를 절약할 수 있게 되는 것이다.
	// 만약, 메서드뿐 아니라 필드변수값도 공유하고 싶다면 아래와같이 할 수 있다.
	// Car.prototype.newParam;
	
	alert("c1의 값 : " + c1.newParam); // 10
	// 이건 공통 prototype에서가 아니라 새로 생성한 것
	c1.newParam = 20;
	// c1, c2 공통으로 공유되는 값을 바꾼 것
	Car.prototype.newParam = 30;
	alert("c1'''의 값 : " + c1.newParam); // 위에서 c1.newParam으로 생성했음으로 자기 newParam을 사용해 20이 나옴
	alert("c2의 값 : " + c2.newParam); // 30

</script>

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체의 캡슐화 (0)	2017.08.14
eclipse(이클립스) 자바스크립트(javascript) 자동완성 플러그인 설정하기 (0)	2017.08.11
자바스크립트 정리1 (0)	2017.08.09
자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08

[ 자바스크립트로 제어하고 싶은 대상 선택하기(찾기) ]

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08
window 객체(location,navigator,screen etc...) : 부모창 자식창간 데이터 주고 받기 포함 (0)	2017.08.04
location 객체와 navigator 객체 (0)	2017.08.04
HTML에서 자바스크립트 로드하기 (0)	2017.08.04

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08
자바스크립트로 제어하고 싶은 대상 선택하기(찾기) (0)	2017.08.04
window 객체(location,navigator,screen etc...) : 부모창 자식창간 데이터 주고 받기 포함 (0)	2017.08.04
HTML에서 자바스크립트 로드하기 (0)	2017.08.04

<!DOCTYPE html>

<html>

<head>

</head>

<body>

1. Javascript Inline 방식 :

2. <h2 id="hw">script 태그 내에 삽입하는 방식 :</h2>

var hw = document.getElementById("hw");

hw.addEventListener("click",function(){

alert("hello world");

})

</script>

<br/>

3. 외부 파일로 분리하는 방식 :

<br/>

4. 스크립트의 위치 :

스크립트는 어느 위치에나 올 수 있지만 body 태그의 마지막 부분에 위치시키는 것이 좋다.

why??

=> 제어할려는 태그가 다 로딩된 다음에 작업이 수행되어야 하니까(로딩되지 않은 상태에서 작업시 제어 불가)

=> 위치에 상관없이 태그가 다 로딩된 후 수행토록 하려면

: javascript의 경우

=> window.onload = function(){

이 내부 코드는 태그가 다 로딩된 이후 수행하게 된다.

}

jquery의 경우

=> document.ready(function(){

})

</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------

script.js 파일

window.onload = function(){

// 웹브라우저의 모든 구성요소가 로딩된 이후에 수행되게 됨. window.onload = function(){}

var hw = document.getElementByid("hw");

hw.addEventListener("click",function(){

alert("외부 스크립트 파일");

});

}

저작자표시 비영리

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 navigator를 이용한 IE 버전 알아내기 (0)	2017.08.08
자바스크립트로 부모,자식 요소 접근하기 (0)	2017.08.08
자바스크립트로 제어하고 싶은 대상 선택하기(찾기) (0)	2017.08.04
window 객체(location,navigator,screen etc...) : 부모창 자식창간 데이터 주고 받기 포함 (0)	2017.08.04
location 객체와 navigator 객체 (0)	2017.08.04

[ HandleBars 적용하기 ]

: HandleBars는 Javascript 라이브러리 중 하나로, 보통 AJAX로 가져온 데이터를 JQuery에서 문자열로 조합한다음에 append해주는

불편함을 줄여주기 위해 주로 사용됩니다.

특징)

1. 태그를 이용해서 구성을 잡아준다.(템플릿을 만든다.)

2. 템플릿 사이사이에 데이터가 들어갈 곳에 {{ 변수 }} 로 넣어놓는다.

3. 템플릿과 데이터를 연결시 {{}} 부분에 데이터가 들어가게 된다.

이때, {{#변수}} {{/변수}} 부분에는 배열과 같은 타입의 데이터의 길이가 들어와 그 길이만큼 반복작업을 수행하게 된다.

제일먼저 사용하기 위해, HandleBars js 라이브러리를 다운로드하고,

<script src="" 를 이용해서 임포트 해주고 사용해야 한다. 이후 설명은 아래 소스코드에서 이어가겠습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<script type="text/javascript" src="/resources/js/handlebars-v4.0.10.js"></script>
<title>Insert title here</title>
</head>

<script id="entry-template" type="text/x-handlebars-template">
	<table>
    	<thead> 
        	<th>이름</th> 
        	<th>아이디</th> 
        	<th>메일주소</th> 
    	</thead> 
    	<tbody> 
       	 	{{#users}} 
       	 	<tr> 
        	    <td>{{name}}</td> 
            	<td>{{id}}</td> 
            
            {{!-- 사용자 정의 헬퍼인 email에 id를 인자로 넘긴다 --}}
            	<td><a href="mailto:{{email id}}">{{email id}}</a></td> 
        	</tr> 
        	{{/users}} 
    	</tbody> 
	</table>
	</script>
	<script>
		// [	handlebars 적용하기	]
	
		//핸들바 템플릿 가져온다.
		var source = $("#entry-template").html(); 
	
		//핸들바 템플릿 컴파일
		var template = Handlebars.compile(source); 
	
		//핸들바 템플릿에 바인딩할 데이터
		var data = {
		    	users: [
		            { name: "홍길동1", id: "aaa1" },
		            { name: "홍길동2", id: "aaa2" },
		            { name: "홍길동3", id: "aaa3" },
		            { name: "홍길동4", id: "aaa4" },
		            { name: "홍길동5", id: "aaa5" }
		        ]
		}; 
	
		//커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
		// 위에서 {{email id}} 에서 email부분에 id를 인자로 넘기게 되는 것!
		// 그럼 id@daum.net을 반환해서 들어가게 됨.
		Handlebars.registerHelper('email', function (id) {
		  return id + "@daum.net";
		});
	
		//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
		var html = template(data);
	
		//생성된 HTML을 DOM에 주입
		$('body').append(html);
	</script>

저작자표시 비영리

'개발 > 스프링' 카테고리의 다른 글

AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 (0)	2017.05.31
AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제) (0)	2017.05.31
sitemesh 추가하기 (0)	2017.05.11
게시글 페이징 처리하기(페이지 처리 쪽 처리) (11)	2017.05.07
스프링 환경설정 (2)	2017.05.06

악덕고용주의 개발 일기

자바스크립트

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1. 함수(Function) 및 객체(Object)

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

자바스크립트로 사용자 OS 버전 확인하는 코드(IE버전 X 운영체제 판별)

'스터디 > 자바스크립트' 카테고리의 다른 글

Text Node 제어와 Document 및 스크린, 스크롤 위치 제어

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기)

[ 노드 추가관련 프러퍼티 ]

[ 노드 제거 ]

[ 노드 바꾸기 ]

문자열로 노드 제어

1. innerHTML

2. outerHTML

3. insertAdjacentHTML()

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

자바스크립트 내장객체1(배열,Date,String,Number)

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체의 캡슐화

'스터디 > 자바스크립트' 카테고리의 다른 글

지역변수,전역변수 개념과 자바스크립트의 객체(Object)

'스터디 > 자바스크립트' 카테고리의 다른 글

자바스크립트로 제어하고 싶은 대상 선택하기(찾기)

'스터디 > 자바스크립트' 카테고리의 다른 글

location 객체와 navigator 객체

'스터디 > 자바스크립트' 카테고리의 다른 글

HTML에서 자바스크립트 로드하기

'스터디 > 자바스크립트' 카테고리의 다른 글

handlebars js 라이브러리를 이용한 View 표현하기

'개발 > 스프링' 카테고리의 다른 글

+ Recent posts

티스토리툴바