자신의 웹 페이지를 읽는 독자들에게 그 페이지를 읽으면서 모르는 영어 단어나, 한글 단어를 만날 때 즉석에서 사전을 찾아볼 수 있는 기능을 제공한다면 얼마나 편리할까? 요즘은 영한, 한영 사전을 지원하는 웹 사이트들이 많이 있다. 여기서는 이 중 네이버의 사전(http://dic.naver.com/) 기능을 이용하여 원하는 효과를 구현해 보도록 하겠다.

우선 다음과 같은 예문이 있다고 가정해 보자. 아래 영문을 읽으면서 어려운 단어를 만나면 해당 단어를 마우스로 선택한 후 "단어 뜻 조사" 버튼을 클릭해 본다. 네이버의 영한사전에서 쉽게 그 단어의 뜻을 찾을 수 있을 것이다. 한글도 마찬가지이다. 아래 예문에서 한글을 선택한 후 마찬가지로 "단어 뜻 조사" 버튼을 클릭해 보기 바란다.

-- 예문 -----------------------------------------------------------------
단어 뜻 조사(버튼임 -> LINK #1에 가서 참조하세요;;)
Winners trust other people. I've worked for some horrible micromanagers who spent most of their time making lists of what everyone should be doing without thinking about a better way to make a project run. Winners routinely assess a situation and figure out what they can add to the effort, rather than worry about who gets credit for it.

다른 사람들을 신뢰할 줄 안다. 나는 전에 지극히 근시안적인 사고 방식을 지닌 매니저와 오랜 세월 함께 일한 적이 있다. 이들은 기본적으로 밑 사람들을 신뢰하는 법이 없었다. 항상 직원들이 언제 어디서 뭘 하고 있어야 하는지 일일이 적어 명령을 내리거나 어디서 뭘 어떻게 하고 있나 ‘감시’하는 경우가 많았다. 그리고 다른 사람이 무슨 결정을 내리려 하면 사사건건 따지고 들어, 결코 그들이 일을 자신 있게 처리토록 내버려 두질 않았다. 성공하는 사람은 이와 다르다. 이들은 직원이 처한 상황과 그들의 능력을 제대로 파악해 그들이 스스로 올바른 결정을 내릴 수 있도록 도와준다. 이들은 자신이 남에게 베풀어준 신뢰와 관용이 항상 되돌아 온다는 것을 잘 알고 있다.
--------------------------------------------------------------------------
이미 다른 웹 사이트의 검색과 관련된 기능을 자신의 웹 페이지에 붙여 사용하는 사람이 많을 줄로 안다. 여기서는 이것을 응용한 예로, 웹 페이지의 본문 중에 사용자가 선택한 단어를 알아내는 것이 핵심이다. 이 선택된 단어를 알아낸 다음 검색 기능을 제공하는 웹 주소의 파라미터에 해당 단어를 삽입해주면 간단히 구현할 수가 있다.

그렇다면 이제 위 "단어 뜻 조사" 버튼에 대한 소스 코드를 살펴 보도록 하자.

--- 소스 ----------------------------------------------------------------------------------------------
<script language="javascript">
function lookup()
{
    R=(document.getSelection)?document.getSelection():document.selection.createRange();
    T=(document.getSelection)?R:R.text;
    if(T=='')
        T=prompt('찾고 싶은 단어를 입력하세요!','');
    if(T&&T!='')
        window.open(' 'selectedText');
}
</script>      


<input type="button" value="단어 뜻 조사" onclick="lookup()">
----------------------------------------------------------------------------------------------

소스 코드도 그리 어렵지 않다. 위의 코드는 넷스케이프 4 이상 및 익스플로러 4 이상에서 동작하도록 되어 있다. 이를 위해 document 객체에 getSelection 메쏘드가 있는지 체크를 하여 있으면 넷스케이프, 없으면 인터넷 익스플로러 코드를 작성한다.

즉, 넷스케이프는 사용자가 선택한 텍스트를 알아내기 위해 getSelection()을 지원하고, 인터넷 익스플로러는 selection 객체의 createRange()를 이용한다. 위의 소스 코드에서 사용자가 선택한 실제 텍스트는 T 란 변수에 저장된다. 넷스케이프의 경우 getSelection()을 통해 얻은 값이 바로 텍스트가 되지만, 익스플로러의 경우 creatRange()를 통해 얻은 객체의 text 속성에 사용자가 선택한 텍스트 값이 들어 있다.

만일 이 값이 null이면 즉, ''면 사용자에게 "찾고 싶은 단어"가 무엇인지 물어봐서 해당 단어를 알아 낸다.

이렇게 해서 찾고자 하는 단어를 알아낸 다음 검색 기능을 제공하는 사이트에 대한 웹 주소를 완성시켜 window.open 메쏘드를 통해 새 창에서 연다. 네이버의 사전 검색의 경우 "http://dic.naver.com/endic?query=" 다음에 찾고자 하는 단어를 입력해 주면 웹 주소만으로 검색 기능을 활용할 수 있다. 그러므로 위 주소의 "query=" 다음에 앞에서 사용자가 찾고자 하는 단어를 담고 있는 변수 T를 연결시키면 검색 주소가 완성된다.

어려운 내용은 아니지만 응용하기에 따라 사용자에게 편리함을 제공할 수 있는 방법이다.