프로그래밍/JavaScript

자바스크립트 스터디 노트 #1

Terry Cho 2014. 6. 18. 18:04

자료형

변수

null과 undefined 이외에는 모든 변수는 객체로 됨
Set을 사용할때는 key는 String만 사용 가능하며, value는 리터럴 모두 가능하다.

var a ={ test:function(){

}};
a.test();

리터럴에 대한 탐색 (순서를 보정하지 않는다.)
cf. 배열은 순서를 보장한다.

var a={1:[],2:[]};
1,2 순서대로 나오지 않는다.

배열 선언

var a = new Array(5); 길이가 5인것
var a = [5]; 멤버가 5인것을 사용. 리터럴 방식의 선언 방식
아래 리터럴 방식의 선언이 실행 속도가 더 빠름
배열의 형 체크

아래와 같이하면, a는 Object로 판별됨

typeof a

그래서, 아래와 같은 방법을 체크하는 게 좋은데,

a instanceof Array

배열을 선언하는 방식에 따라서 Array로 인식이 안될 수 있기 때문에, jQuery등에서 제공되는 함수를 사용하는 것이 좋음

함수 선언

var a = function(){
  console.log('hello');
}

function a(){

}

new Function('a)';

앞의 두가지 방식이 많이 사용됨. 세번째 방식은 사용하지 않는 것이 좋음

홀스팅

 var b=2
 function a(){
      console.log(b);
      var b=1;
  }
 a();

결과는 undefined로 나온다. 변수의 선언을 나중에 했더라도, 변수 선언은 function내에서 유효하다. 단 값은 그 행을 수행해야 값이 assign 된다.

 function(a,b){
 }
 function(){
   arguments[0]; // a
   arguments[1]; // b
 }

arguments를 사용하면, 변수의 인자를 순서대로 받을 수 있다. java의 argv[]와 유사.

this 컨택스트

this 는 해당 메서드를 호출하는 컨텍스트를 지칭한다.

 function a(){
  console.log(this);
}

a();
`

이 경우, 이 스크립트가 속한 windows 객체가 된다.
a()는 window.a()와 같기 때문에 이 window를 this로 리턴한다.
this는 실행시키는 주체를 리턴한다.

function a(){
  console.log(this);
}

var b={
  a:a // 뒤의 a는 function이 됨
};

b.a();

이 경우는 b가 a()를 호출하였기 때문에, b를 this로 인식하고 리턴한다.

var widget = new Widget();
widget.hello();

hello 메서드를 호출하는 주체가 ‘widget’ 객체이기 때문에, widget 객체가 this가 된다.
주로 callback이나 다른 프레임웍 (Jquery)등에 컨텍스트를 넘길때 사용한다.

방안 1. 이런 것을 해결하기 위해서 function을 부를때, f.call(this,변수들)식으로 넘긴다.

function f(p,h){
  console.log(this);
  console.log(p,h);
}
f.call(this,1,2);
f.apply(this,[1,2]);

방안 2.JQuery의 var a=$.proxy 라는 방식을 이용하여, this를 재정의 할 수 있다.

방안 3. 클로저를 사용한다. - 많이 사용하는 방식

var self = this
functiona(){
 self
}

클로저 (중요함)

‘부모의 유효 범위를 가지고 있는다.’
‘부모의 유효 범위에 있는 변수를 사용할 수 있다.’

var test=( function(){
  var a=1;

  return function(){ // 이것이 클로져임. 
    console.log(a);
  };
})();

var a = test();
setTimeout(function(){
  f();
},1000);

위의 예제에서 변수 a가 함수 f가 없어질때까지 계속 따라다님.

var a = [1,2,3];
for(var i = 0,l= a.length;i<l;i++){
  console.log('i'+a[i]);
  setTimeout(function(){
    console.log(i+':'+a[i]);
  },1000);
}

a[i]가 undefined로 찍힘

var a = [1,2,3];
for(var i = 0,l= a.length;i<l;i++){
  console.log('i'+a[i]);
  (function(){
    var index=i;
    setTimeout(function(){

      console.log(i+':'+a[index]);
    },1000);
  })();
}

클로저를 하나 더 만들어서 스코프를 유지함

※ 자바스크립트에서 가장 잘 잡아야 되는 것은 this와 클로져의 개념이다.

객체 생성

var Test = function(){
    // constructor와 같이
    this.member =1 ;
};

var test = new Test();
test.member = 1;

}

다른 방식으로는 prototype을 사용할 수 있음
이건 따로 공부해야 할듯

모듈 패턴

( function(){
  var a = 1;
  return {
    method: function(){

    }
  };
})();


abcd.method();

위에서 처럼 별도의 SCOPE을 정해놓고, method들을 정의한후, 그 파일을 다른 파일에서 불러다 쓴다.

DOM 처리

  • document.getElementById(‘key’);
  • document.querySelector를 사용하는 방식이 있음 (IE 옛날 버전에서는 지원이 안됨) -> JQuery로 대처해서 사용됨.
    ※ JQuery는 느리다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='a b c' class='a b c' style='border-color'  ></div>
</body>
</html>

스타일을 css에 만들어놓고 class에서 불러서 적용하거나, 직접 스타일을 style attribute로 적용할 수 있음.

CSS

.a{
  width:100px;
  height:100px;
  background-color:red;
}
.b{
  border:10px solid blue;

}

이벤트

이벤트 바인딩

DOM에 이벤트를 할당하는 3가지 방법
HTML이 다음과 같을때

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='a' class='a b c' style='border-color'  ></div>
  <button id='_test'>버튼</button>
</body>
</html>

JQuery를 사용하는 방법

$('._test').on('click',function{
               alert(1);
               });

Native

document.querySelector('._test').onclick=function(){
 alert(1);
 }

또는

document.addEventHandler

HTML에서 마크업에서 직접 정의하는 방법

<button onclick='alert();'>

이벤트 delegation,캡춰링,버블링

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <div>
      <button>버튼</div>
      </div>
    </div>
</body>
</html>

부모 자식간에서

  • 캡춰링 : 부모한테서 이벤트가 자식에게 내려가는 것
    body > div > div > button
  • 버블링 : 자식에게서 부모한테로 이벤트가 올라가는것
    button > div >div >body

이벤트 발생은 캡춰링과 버블링이 순서대로 항상 같이 발생한다.

예를 들어서 부모에게만 click 이벤트를 걸어놓으면, 아래에 여러개의 버튼이 있을때, 부모에게서 받은 이벤트를 받아놓은 후에, 어떤 버튼을 클릭했는지를 받아서 분기 처리 (Selector라고 )한다.

$(document.body).on('click','button',function(e){ console.log(e.currentTarget);
 });

위의 예제는 document body에 이벤트를 걸어놓고, 하위에 버튼을 눌렀을때, 함수를 실행하는 것이다. ‘button’이라고 정해놓은것을 selector 라고 한다.

: 이렇게 부모에게 이벤트 핸들러를 잡아놓고, 차일드에서의 이벤트들을 부모에서 대신 처리하는 것을 Event delegation이라고 한다.

※ JQuery는 버블링만 지원한다. (IE7이 캡춰링을 지원하지 않기 때문에)

document.body.addEventLister((‘click’,function(){},true));
마지막 인자가 true이면 캡춰링, false이면 버블링이다.

캡춰링과 버블링은 같은 이벤트를 걸어놨을때, 어느 순서(레벨)부터 수행이 되는가등을 정할때 사용한다.

보통 버블링을 사용한다.

... on('click',function(e)){
e.stopPropagation();
});
}

버블링이나 캡춰링을 전파(다음 단계로 넘어가는 것)을 중지 시킬 수 있다.
cf. e.preventDefault(); 현재 발생된 이벤트를 취소 시킨다.

실습

  • <script &rt; 태그를 맨아래 /body 앞에 넣는 이유는 브라우져는 script 태그를 만나면 모든 일을 멈추고 스크립트 수행에 집중하기 때문에, 화면 렌더링을 멈춘다. 그래서 UX 관점에서 화면을 다 그리고 스크립트 처리를 하도록 하기 위해서, 맨 아래에 넣는 것이 좋다.

API 사용하기

동일 출처 원칙 - 다른 사이트에서 정보를 얻어오는 건 불가하다. daum.net에서 실행되는 자바스크립트로 naver.com 에서 정보를 읽어올 수 없다. 이를 해결하는 방법이 JSONP가 있다.
동일 출처 원칙의 영향을 받지 않는 것은 script를 사용하는 방식 (HTTP GET만 사용할 수 있음)

<script src="http://타사이트/a.js">
</script>

<script>
_callback({name:'john'});
</script>

<script>
_callback = function(data){
 data..
 };
}
</script>

이런 원리로 된다는 것인데, HTTP GET 방식만 호출할 수 있음

아래는 JQuery ajax의 예

$.ajax({
url:'API URL',
datatype:'jonsp',
success: function(data){ // data : 리턴되는 데이타
console.log(data);
}
});

}
})

예제에 사용할 API URL http://apis.daum.net/socialpick/search
API 설명 - http://dna.daum.net/apis/socialpick/ref#search

템플릿

Widget.prototype._getTemplate = function(id,values){
    return $('#'+id).text().replace(/{{([^}]+)}}/g,function(text,matchedText){
        console.log(arguments); // for debug
        return values && typeof values[matchedText] !== 'undefined' ? values[matchedText] : '';
    });
};

String의 replace 명령을 이용하여, regular expression을 사용한다.


저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 스터디 노트 #2  (0) 2014.06.19
AngularJS - Service,Factory 그리고 Provider의 차이  (0) 2014.01.17
angularJS의 $resource를 이용한 REST service 호출 예제  (0) 2014.01.17
Fiddler를 간단한 JSON 웹서버로 사용하기.  (0) 2014.01.17
AngularJS 개발 환경 준비하기  (0) 2014.01.12

'프로그래밍/JavaScript'의 다른글

  • 현재글자바스크립트 스터디 노트 #1

관련글

티스토리툴바