유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자. 결과는 global이다.

var vscope = 'global';
function fscope(){
    alert(vscope);
}
fscope();

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. 아래 예제를 보자. 결과는 '함수안 local'과 '함수밖 global'이 출력된다.

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert('함수안 '+vscope);
}
fscope();
alert('함수밖 '+vscope);

즉 함수 안에서 변수 vscope을 조회(4행) 했을 때 함수 내에서 선언한 지역변수 vscope(3행)의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출(7행) 했을 때는 전역변수 vscope(1행)의 값인 global이 사용된 것이다. 즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다. 아래 예제를 보자. 결과는 모두 local이다.

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);

함수밖에서도 vscope의 값이 local인 이유는 무엇일까? 그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다. 전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

출처 생활코딩

제목 그대로 마우스 우클릭을 금지 시켜주는 스크립트이다.

이 스크립트를 쓰면 오른쪽 클릭 뿐만 아니라, 드래그 또한 작동되지 않는다.

나는 업무 중, 특히 이미지가 많은 이벤트 페이지들을 작업할때

유용하게 쓰고있는 코드라서 공유해본다.

$(document).ready(function(){
 $(document).bind("contextmenu", function(e) {
  return false;
 });
});
$(document).bind('selectstart',function() {return false;}); 
$(document).bind('dragstart',function(){return false;}); 

회사 업무 중 버그를 잡기위해 작성한 코드가 유용하게 쓰일 수 있을 것 같아 메모해둔다.

회사 커뮤니티 게시판의 왼쪽에 붙어있는 네비가

스크롤의 움직임에 따라서 위아래로 따라 움직이는데,

특정 카테고리에서는 목록의 개수가 적어서 본문이 짧다보니

스크롤을 가장 아래로 내릴 시 네비가 하단 푸터 밖으로 삐져나가버리는 버그가 있었다.

간단히 푸터 또는 본문의 마진으로 해결해보려했지만,

확장된 마진만큼 스크롤이 같이 따라와서 소용이 없었다.

결국 스크립트로 수정을 했는데,

아래의 아주 간단하고 짧은 코드만으로 완벽하게 버그를 잡았다.

$(window).scroll(function(){
    $("#yourDiv").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

position: fixed;가 먹혀있는 div를 #yourDiv에 부여하고,

내가 -250로 적어둔 곳에 알맞은 숫자를 적으면 된다. 

윗 코드에서는 -250px로, 기존에 스크롤을 따라 내려가던 지점에서

-250px만큼 윗 부분까지만 따라오도록 지정한 것이다.

이렇게 코드를 작성하면, 

위에서 부터 몇 px인지가 아니라 아래에서부터 지정을 했기 때문에

게시글 수가 20개에서 늘어나서 50개가 되던 100개가 되던 상관없이,

스크롤이 늘어나더라도 여전히 내가 원하는 지점까지 오게 할 수가 있다.