블로그 이미지
웹/IT에서의 생활입니다.
nothinking

Notice

Recent Comment

Recent Trackback

Archive

calendar

 « 2012.01  »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
  • 17,339total
  • 2today
  • 7yesterday

Closure in Javascript

2011/08/10 17:03 요놈 javascript
참조  http://nathansjslessons.appspot.com/

1.
클로저는 뭔가요?
비밀전역변수 입니다.

2.
어떻게 만들어지나요.
안쪽함수가 바깥쪽 변수를 참조할 때 생깁니다.
a closure is created when an inner function refers to an outer function's variables. .

3.
필요한가요?
개념을 익혀 주세요.
클로저를 이용할 일이 생깁니다. 클로저로 인한 얘기치 못한 상황을 파악할 수 있습니다.
what's a callback? It's a closure!
stateful Closure, Private Data

ps.
참조사이트에서

[Function Scope]
var cow = "purple";
var f = function(x){
  cow = "green";
  if(x==2) var cow =  "yellow";
}
console.log(cow); // purple
f(1);
console.log(cow); // purple
=> 변수선언은 맨처음 하세요.

[Nested Functions]
var f = function(){
  var c, f2;
  c = 0; //closure
  f2 = function(){
    c = c+1;
    return c;
  }
}

[Private Data && Stateful]
var f = (function(){
  var a, f1;
  a = 0; // Private Data = Closure
  f1 = function(){
    a = a + 1;
    return a;
  }
  return f1;
})();
저작자 표시 비영리 동일 조건 변경 허락

'요놈 javascript' 카테고리의 다른 글

Closure in Javascript  (0) 2011/08/10
HTML5 History API  (0) 2011/08/09
"this" keyword in Javascript  (0) 2011/08/09
scrollTop의 브라우저간 특징  (1) 2011/01/25
[팝업] 자동으로 높이 조절  (0) 2010/12/01
자바스크립트 코딩 방법  (0) 2010/11/08
posted by nothinking
Trackback 0 Comment 0

댓글을 달아 주세요

HTML5 History API

2011/08/09 18:38 요놈 javascript
[나만 몰랐나?]
기텁(https://github.com/)을 보는데 눈을 의심하게 하는 액션이 보인다.
url은 변경되는데 스크롤은 안움직이고, 변경되는 컨텐츠는 슬라이딩되고, 뒤로가기 버튼은 잘 동작하고...
잉? 뭐지?

구글신이시여~~
http://diveintohtml5.org/history.html
http://www.fullstopinteractive.com/blog/2011/02/github-using-html5-history-api/
https://github.com/blog/760-the-tree-slider

깔끔한 예제
http://diveintohtml5.org/examples/history/willie.html

아이폰 4.2.1+ 지원
이제 ajax는 History API를 사용하라~
저작자 표시 비영리 동일 조건 변경 허락

'요놈 javascript' 카테고리의 다른 글

Closure in Javascript  (0) 2011/08/10
HTML5 History API  (0) 2011/08/09
"this" keyword in Javascript  (0) 2011/08/09
scrollTop의 브라우저간 특징  (1) 2011/01/25
[팝업] 자동으로 높이 조절  (0) 2010/12/01
자바스크립트 코딩 방법  (0) 2010/11/08
posted by nothinking
Trackback 0 Comment 0

댓글을 달아 주세요

"this" keyword in Javascript

2011/08/09 10:48 요놈 javascript
1.
object에서 this는 뭔가요?
var obj = {};
obj.name = "This is obj";
obj.test = function(){
  console.log(this.name);
}
obj.test(); // This is obj
=> object에서 this는 object를 가리킵니다.


2. 
함수에서 this는 뭔가요?
function test(){
 this.name = "This is function";
}
var a = test();
console.log(a.name); // undefined
var b = new test();
console.log(b.name); // This is function
=> 함수에서는 함수를 어떻게 쓰느냐에 따라 this가 다릅니다.

2-1.
중첩함수에서 this는 window를 가리킵니다.
var obj = {};
obj.name = 'This is obj';
obj.test = function(){
 var nest = function(){
  console.log(this.name);
 }
}
obj.test(); // undefined - this is window

2-1-1.
중첩함수에서는 어떻게 쓰면 되나요?
var obj = {};
obj.name = 'This is obj';
obj.test = function(){
 var that = this;
 var nest = function(){
  console.log(that.name);
 }
}
obj.test(); // This is obj

3.
Prototype method 에서 this는 Construct instance를 가리킵니다.

4.
이벤트 핸들러 함수에서는 브라우저마다 다릅니다.
function myEventHandler() {
    this.style.display = 'none';
}

// Works correctly, 'this' references the element:
myIntro.onclick = myEventHandler;

// Works correctly, 'this' references the element:
myIntro.addEventListener('click', myEventHandler, false);

// DOES NOT work correctly, 'this' references the Window object:
myIntro.attachEvent('onclick', myEventHandler);

4-1.
자바스크립트 프레임웍을 쓰면 이는 해결됩니다.

5.
apply, call을 쓰세요. 프레임웍은 bind라는 함수를 제공합니다. 


[참고]
http://net.tutsplus.com/tutorials/javascript-ajax/fully-understanding-the-this-keyword/
http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/
저작자 표시 비영리 동일 조건 변경 허락

'요놈 javascript' 카테고리의 다른 글

Closure in Javascript  (0) 2011/08/10
HTML5 History API  (0) 2011/08/09
"this" keyword in Javascript  (0) 2011/08/09
scrollTop의 브라우저간 특징  (1) 2011/01/25
[팝업] 자동으로 높이 조절  (0) 2010/12/01
자바스크립트 코딩 방법  (0) 2010/11/08
posted by nothinking
Trackback 0 Comment 0

댓글을 달아 주세요

scrollTop의 브라우저간 특징

2011/01/25 17:16 요놈 javascript

[이슈]
자동스크롤바를 만든다.
document.documentElement.scrollTop += gab;
을 이용한다.

transitional.dtd를 사용할 때 크롬에서만 문제가 발생한다.
크롬에서는
document.body.scrollTop += gab;
을 사용해야 한다.


[해결]
1.
둘다 에러는 나지 않으므로 지원하는 쪽을 쓰도록 둘다 코딩한다.
document.documentElement.scrollTop += gab;
document.body.scrollTop += gab;
=> 오페라에서 문제 발생

2.
document.documentElement.scrollTop += gab;
if(!opera)document.body.scrollTop += gab;

3.
document.documentElement.scrollTop += gab;
if(crom)document.body.scrollTop += gab;


[회고]
window.innerHeight
document.body.clientHeight
documen.documenElement.clientHeight

잘알고 있자~



참고 :
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
http://www.webuit.com/160
저작자 표시 비영리 동일 조건 변경 허락

'요놈 javascript' 카테고리의 다른 글

HTML5 History API  (0) 2011/08/09
"this" keyword in Javascript  (0) 2011/08/09
scrollTop의 브라우저간 특징  (1) 2011/01/25
[팝업] 자동으로 높이 조절  (0) 2010/12/01
자바스크립트 코딩 방법  (0) 2010/11/08
자바스크립트도 네임스페이스를 사용해 보자.  (0) 2010/11/08
posted by nothinking
Trackback 0 Comment 1

댓글을 달아 주세요

  1. Favicon of http://bathroom-windows.net/types-of-materials-used-for-bathroom-curtains-for-.. BlogIcon Types of materials used for bathroom curtains for small windows 2011/07/31 22:19  Addr  Edit/Del  Reply

    나는 또한 당신이 우리 자녀가 웹 사이트를 확인 좋았는지 탁월한 만남 이해 드리고자합니다. 그녀는 그것이 많은 사람들이 완전하게 문제를 어려운 특정 배울 수 있도록 훌륭한 코칭 자연을 가지고 싶은 것을 포함 조각의 좋은 번호를 찾을 수 왔어요. 당신은 의심할 여지없이 내 욕망을 초과했습니다. Lizeth 수있는 주제에 등, 실질적인 신뢰할 수있는, 교육과 더불어 쉽게 생각을 제작 주셔서 감사합니다.

 <PREV 1 2 3 4 5 ... 30    NEXT>