자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가진다.
자바스크립트는 소스코드를 실행하기 전에, 최상위에 위치한 전역객체(Global Object)를 만듭니다. (Math나 Date를 비롯한 몇몇 특별한 객체를 제외한다면) 자바스크립트의 모든 객체와 값들은 이 전역객체의 아래에 자손(descendants)으로 위치하게 됩니다. 전역객체는 전체 코드에서 단 1개만 존재할 수 있으며, new 연산자를 이용하는 등의 방법으로 새롭게 만들 수 없습니다.
이 전역객체의 이름은 자바스크립트를 사용하는 환경에 따라 얼마든지 달라질 수 있습니다. 이를테면 웹 브라우저에서 사용되는 자바스크립트의 전역객체는 우리가 잘 아는 window라는 이름의 객체입니다. 한편 자바스크립트를 사용하는 서버인 Node.js에서는 global이라는 이름의 전역객체가 있습니다.
슬라이더(Slider)는 사용자의 조작 또는 타이머에 따라 페이지를 넘기듯 콘텐츠를 보여주는 형태의 UI를 부르는 말입니다. 한정된 웹 브라우저 화면에 여러 콘텐츠를 표시하기 위해서는 슬라이더만한 것이 없습니다.
검색엔진을 이용하면 자바스크립트나 jQuery를 이용해서 Slide 애니메이션이나 Fade 효과가 들어간 슬라이더 모듈을 많이 찾아볼 수 있습니다. 그러나 아이러니하게도 애니메이션 없이 작동하는 슬라이더는 찾아보기 어렵습니다. 그렇다고 소스코드를 열어 커스터마이징을 하자니, 이런 모듈들은 내부구조가 대체로 복잡한 편이라서 흥미도 의욕도 나지 않는 경우가 많습니다.
이번 포스팅에서는 자바스크립트 DOM 객체에 접근해 간단하게 구현한 애니메이션 없는 슬라이더를 소개합니다. 먼저 예제 소스코드부터 공개합니다.
웹페이지에 있는 글이나 블로그 포스팅, 덧글 등의 콘텐츠를 다양한 소셜 네트워킹 서비스로 내보내는 기능(export)을 구현해야할 때가 있습니다. 최근의 게시판이나 블로그 서비스에서 대부분 기본적으로 제공하고 있는 기능이기도 하지요. 이번 포스팅에서는 각 서비스별로 웹 페이지에 있는 글을 내보낼 수 있는 방법을 정리하고, 이를 자바스크립트 코드로 정리하였습니다.
웹 페이지 상의 채팅화면이나 오픈마켓의 구매 페이지 등을 사용해보면, 웹 페이지를 닫거나 새로고침을 하기 직전에 “이 페이지에서 나가시겠습니까?”라는 메시지가 표시되는 경우가 있습니다. 구현하는 방법은 의외로 간단합니다. window 객체의 beforeunload 이벤트를 잡아, 메시지 창에 표시할 내용을 반환해주면 됩니다.
window.onbeforeunload = function() {
return '표시할 메시지를 반환';
}
Opera에서는 작동하지 않지만, IE 각 버전을 포함한 여타의 브라우저에서는 잘 작동합니다. 중요도가 높아 새로고침을 하거나 창이 닫기 직전에 사용자의 확인을 구해야 하는 경우가 있다면 유용하게 사용할 수 있습니다.
샌드박스의 의미
샌드박스는 아이들이 들어가 놀기 위해서 모래를 채워넣은 상자를 의미합니다. 모래상자 안에서 무엇을 하더라도 상관없지만, 모래상자 바깥으로 나와 집을 어지럽히지는 말라는 부모의 깊은 뜻이 숨겨진 물건이지요.
컴퓨터 보안에서도 샌드박스 환경이라는 단어가 사용됩니다. 이 단어는 실행한 프로그램이 접근할 수 있는 자원들을 제한하는 대신, 제한되지 않은 자원들에 대해서만은 자유롭게 접근하고 조작할 수 있도록 허락한 환경을 의미합니다. 샌드박스는 실행한 프로그램이 자원에 마음대로 접근하여 시스템에 영향을 미치는 심각한 오작동을 일으키거나 시스템을 공격하는 일을 미연에 방지할 수 있게 합니다.