69. 홈페이지 관리용 프로그램

69.1. 국내 도메인 검색 프로그램

웹호스팅이나 도메인 관련 업체라면 도메인 검색 프로그램을 홈페이지에서 제공합니다. 도메인 검색 프로그램은 입력 양식에서 검색할 도메인을 적은 다음에 krnic의 whois 서버에 전송하면 됩니다. 그러면 whois 서버에서 검색 결과를 브라우저에게 돌려줍니다.

ex6_01.html 문서는 국내 도메인을 검색하는 프로그램입니다. 일반인에게는 필요 없을지 몰라도 도메인과 관련된 사이트를 운영할 사용자라면 도움이 될 프로그램입니다.

** 사진: 문서를 불러온 다음에 ‘x119.co.kr’을 입력하고 [엔터]키를 누르거나 [도메인 찾기] 단추를 클릭하면 검색 결과를 새 창으로 보여줍니다.

** 살펴볼 부분
1. 화면에 표시되는 형식은 입력 양식과 <TABLE> 태그의 속성을 바꾸어 변경합니다.
2. <INPUT type="text" name="VALUE" size="25" maxlength="100" class="t1"> 명령에서 name 값이 대문자로 VALUE 임에 주의합니다. 이 값은 krnic의 서버에 보내는 이름 값이므로 그대로 사용합니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_01.html - 국내 도메인 검색 프로그램 </TITLE>
<STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
국내 도메인 검색 프로그램

<TABLE width="450" height="150" bgcolor="navy"> <TR>
<TD bgcolor="orange" align="center"> <FONT size="4">
검색할 도메인 이름을 입력해주세요.
(www는 안 붙입니다.)
* 보기: agadal.co.kr
</FONT> </TD> </TR>
<TR> <TD bgcolor="gold" align="center" valign="middle">
<FORM name="krnic" method="post" action="http://whois.nic.or.kr/whois/webapisvc" target=_blank>
<INPUT type="text" name="VALUE" size="25" maxlength="100" class="t1">
<INPUT type="submit" name="kfind" value="도메인 찾기">
</FORM>
</TD> </TR> </TABLE>
</BODY>
</HTML>

69.2. 국제 도메인 검색 프로그램

국제 도메인을 검색할 때는 whois 서버 이름 뒤에 검색할 도메인 이름을 붙여서 브라우저 창에 입력하며 됩니다. ex6_02.html 문서는 새 창을 만들면서 whois 서버 이름 뒤에 검색할 도메인 이름을 붙여서 주소로 입력한 예제입니다. 가장 간단한 형태의 국제 도메인 검색 프로그램이지만 필요한 곳에서는 유용하게 사용할 수 있는 예제라 생각합니다.

** 사진: 문서를 불러온 다음에 ‘x119.com’을 입력하고 [엔터]키를 누르거나 [도메인 찾기] 단추를 클릭하면 검색 결과를 새 창으로 보여줍니다.

** 살펴볼 부분
1. var vurl='http://www.allwhois.com/cgi-bin/allwhois5.cgi?dn='; 명령이 allwhois 사이트에서 제공하는 whois 서버 이름입니다. 이 부분을 다른 곳의 whois 서버로 바꾸면 해당 서버로 검색이 가능합니다.
2. window.open(vurl,'','') 명령으로 새 창을 열어서 검색한 결과를 보여줍니다. 만약 프레임이나 다른 영역에 결과를 표시하고 싶다면 이 부분을 변경하면 됩니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_02.html - 국제 도메인 검색 프로그램 </TITLE>
<STYLE type="text/css">  </STYLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
국제 도메인 검색 프로그램

<TABLE width="450" height="150" bgcolor="navy"> <TR>
<TD bgcolor="orange" align="center"> <FONT size="4">
검색할 도메인 이름을 입력해주세요.
(www는 안 붙입니다.)
* 보기: agadal.com
</FONT> </TD> </TR>
<TR> <TD bgcolor="gold" align="center" valign="middle">
<FORM name="kform">
<INPUT type="text" name="dname" size="25" maxlength="100" class="t1" onchange="javascript:fsearch(this.value)">
<INPUT type="submit" name="kfind" value="도메인 찾기" onclick="fsearch(str)">
</FORM>
</TD> </TR> </TABLE>
</BODY>
</HTML>

69.3. whois 서버 선택, 국제 도메인 검색 프로그램

국내 도메인은 krnic의 whois 서버에서 일괄 관리하기 때문에 검색 결과가 일정하지만 국제 도메인을 검색했을 때는 검색 결과가 조금씩 다릅니다. 어떤 곳은 expire 날짜를 보여주지만 어떤 곳은 보여주지 않습니다. 따라서 국제 도메인을 검색할 때는 한 곳의 검색 결과만으로는 부족합니다.
ex6_3.html은 도메인 이름만 입력하고 메뉴 방식으로 도메인 종류와 검색 서버를 선택하여 검색하는 예제입니다. 사용자는 자신이 좋아하는 검색 서버를 선택할 수 있기 때문에 한 곳의 서버만 사용하는 ex6_02.html보다 선택권이 넓어진 셈입니다.

** 사진: 문서를 불러온 다음에 도메인 이름을 입력하고 [도메인 찾기] 단추를 클릭하면 검색 결과를 새 창으로 보여줍니다. 예제 화면은 agadl.com을 입력하고 name.space 서버를 선택한 결과입니다.

** 살펴볼 부분
1. asite 배열이 검색 서버 주소를 기록하는 배열이므로 이곳에 검색 서버를 추가하거나 수정합니다.
2. window.open(vurl,'','') 명령으로 새 창을 열어서 검색한 결과를 보여줍니다. 만약 프레임이나 다른 영역에 결과를 표시하고 싶다면 이 부분을 변경하면 됩니다.
3. vurl 변수를 창을 열 때 사용할 주소인데, 먼저 검색 서버 경로인 asite[] 배열의 값을 대입한 다음에 str 변수의 값을 추가합니다. str=document.kform.dname.value; 명령을 이용하여 dname에 입력된 값을 str에 대입합니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_03.html - whois 서버 선택, 국제 도메인 검색 프로그램 </TITLE>
<STYLE type="text/css">  </STYLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
국제 도메인 검색 프로그램

<TABLE width="540" height="150" bgcolor="navy"> <TR>
<TD bgcolor="orange" align="center"> <FONT size="4">
검색할 도메인 이름을 입력하고 검색할 서버를 선택해주세요.
(www는 안 붙입니다.)
* 보기: agadal.com
</FONT> </TD> </TR>
<TR> <TD bgcolor="gold" align="center" valign="middle">
<FORM name="kform">
<INPUT type="text" name="dname" size="20" maxlength="100" class="t1">
<SELECT name="wsite" class="t1">
<OPTION name="who" selected> AllWHOis
<OPTION name="who"> name.space
<OPTION name="who"> VEROI
</SELECT>
<INPUT type="submit" name="kfind" value="도메인 찾기" onclick="fsearch(str)">
</FORM>
</TD> </TR> </TABLE>
</BODY>
</HTML>

69.4. 즐겨찾기에 추가하는 방법

자신의 사이트를 방문자의 즐겨찾기 메뉴에 등록하려면 어떻게 해야 할까요? 의외로 간단합니다. window.external.AddFavorite() 명령을 사용하고 이 명령을 링크로 설정해놓으면 사용자가 링크 내용을 누르는 순간 즐겨찾기에 추가됩니다. 물론 사용자가 선택하지 않아도 사용자 몰래 즐겨찾기에 추가할 수 있지만 좋은 방법은 아닙니다.

** 사진: [즐겨찾기에 추가하기] 아이콘을 선택하면 즐겨찾기 추가 메뉴가 나타납니다. [확인] 아이콘을 누르면 즐겨찾기에 추가됩니다.

** 살펴볼 부분
1. <BODY> 태그 안에 사용한 window.external.AddFavorite() 명령을 수정하면 여러분이 추가하려는 사이트가 됩니다. 첫 번째 매개변수는 즐겨찾기 할 사이트의 URL을 입력하고, 두 번째 매개변수로는 즐겨찾기에 표시할 제목을 적으면 됩니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_04.html - 즐겨찾기에 추가하는 방법 </TITLE>
<STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
즐겨찾기에 추가하는 방법

<A HREF="#" onclick="{window.external.AddFavorite('http://www.help119.com', '도와주세요119(HELP119.com)')}"> 즐겨찾기에 추가하기</A>
</BODY>
</HTML>

69.5. 마우스의 오른쪽 단추 메뉴 사용 못하게 만들기

어떤 사이트에서 괜찮은 자바스크립트 기법을 발견하고 마우스의 오른쪽 단추를 눌러 소스보기 메뉴를 실행하려고 마우스 단추를 클릭했습니다. 그런데 마우스 오른쪽 단추를 누르자 메뉴가 나타나지 않고 경고문 창이 나타난다면 조금 당황스럽겠죠.

ex6_5.html 문서에는 마우스의 오른쪽 단추 메뉴를 사용하지 못하게 만드는 프로그램입니다. 이런 메뉴가 왜 필요할까요? 아마도 다른 사람이 소스 파일을 보지 못하게 하려는 의도일 겁니다. 그다지 좋은 생각은 아니지만 나름대로는 보안을 생각한다면서 이런 기능을 넣어둔 분도 있을 겁니다.

하여간 이런 소스 파일을 원하는 분을 위하여 마우스의 오른쪽 단추 기능을 못쓰게 만드는 방법을 소개합니다. 이 기법은 마우스의 단추를 눌렀을 때 발생하는 이벤트를 가로 채 마우스의 기본 메뉴가 아닌 자바스크립트에서 지정한 프로그램이 실행되도록 설정하면 되는 간단한 기법입니다.

** 사진: 마우스의 오른쪽 단추를 누르면 화면처럼 안내문 창이 나타나고 오른쪽 단추 메뉴가 나타나지 않습니다.

** 살펴볼 부분
1. document.onmousedown=frbutton; 명령이 마우스 단추를 누를 때마다 frbutton 함수를 실행시키는 부분입니다.
2. 사용자는 alert() 함수 부분을 원하는 명령을 대체할 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_05.html - 마우스의 오른쪽 단추 메뉴 사용 못하게 만들기 </TITLE>
<STYLE type="text/css">  </STYLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
마우스의 오른쪽 단추 메뉴 사용 못하게 만들기

</BODY>
</HTML>

**잠깐: 오른쪽 단추 메뉴 못쓰게 만든 문서의 소스 보기
ex6_05.html 문서처럼 마우스의 오른쪽 단추 메뉴를 막아놓은 문서의 소스 파일을 보는 방법은 두 가지가 있습니다. 첫 번째는 단축키를 사용하는 방법입니다. 오른쪽 단추에 해당하는 단축키는 [Shift] +[F10]입니다. 두 키를 함께 누르면 마우스의 오른쪽 단추 메뉴가 나타납니다. 심하게 할 경우 단축키 사용까지 막을 수도 있지만 두 번째 방법은 막을 수 없습니다. 두 번째 방법은 익스플로러의 메뉴에 있는 [보기] - [소스(C)] 기능을 이용하는 것입니다. 화면에서 보이는 것처럼 단축키인 [Shift] +[F10]을 눌렀을 때 오른쪽 단추 메뉴가 나타납니다. 또한 익스플로러의 메뉴를 이용해도 소스 파일을 볼 수 있습니다.

결국 마우스의 오른쪽 단추 메뉴를 못쓴다고 해서 소스 파일의 내용을 보지 못하게 막는 것은 아니라는 뜻이 됩니다. 따라서 이 기능은 참고로만 하고 실제로 적용하지 않는 것이 좋습니다.

69.6. 그림 저장 못하게 만들기

ex6_05.html은 화면 어느 곳에서도 오른쪽 단추를 사용할 수 없게 만든 경우입니다. 이런 프로그램을 사용한다면 사용자에게 불만이 많겠죠. 그래서 특정 자료에만 접근을 차단하는 방법을 사용합니다. 예를 들어 그림 파일만 저장 못하게 만드는 경우입니다. ex6_06.html 문서는 사용자들에게 그림을 보여주기는 하지만 이 그림을 저장하지 못하도록 할 때 사용할 수 있는 기법을 보여줍니다.

ex6_06.html 문서를 불러온 다음에 그림 위에서 마우스 오른쪽 단추를 누르면 경고문이 나타납니다. 그러나 그외 지역에서는 오른쪽 단추 메뉴가 정상적으로 나타납니다. 물론 이 프로그램을 사용한다고 해서 브라우저 화면에 표시되는 그림의 저장을 막을 수 있는 것은 아니지만 접속자를 귀찮게 만드는 효과는 거둘 수 있습니다. 마우스 오른쪽 단추 메뉴를 이용해 그림을 저장하지 못하게 만들면 Temp 폴더를 검색하거나 직접 그림 파일의 경로명을 입력하는 방식을 이용해 그림을 저장합니다. 또는 파일 다운로드 소프트웨어를 사용해야 하는데 이는 매우 귀찮은 작업입니다.

때문에 그림 파일을 저장하지 못하게 만들 경우 어느 정도 성과를 거둘 수는 있습니다. 대개의 사용자는 그림 저장을 포기하는 쪽으로 결론을 내리니까요. 그러나 이는 그 사이트의 방문자 감소로 이어지게 될 가능성이 높습니다. 따라서 본 예제는 참고로만 하시고 실제로 자신의 홈페이지에 본 예제를 적용할 생각은 안하는 것이 좋습니다.

** 사진: 그림 위에서 마우스 오른쪽 단추를 누르면 안내문이 나오고, 그외 지역에서는 오른쪽 메뉴가 표시됩니다.

** 살펴볼 부분
1. document.images 객체를 이용하여 그림 파일 위에서의 마우스 동작만 제어할 수 있습니다.
2. alert() 함수 대신에 출력 함수나 저장 함수를 제공할 수도 있습니다. 필요한 프로그램을 만들어 사용하기 바랍니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_06.html - 그림 저장 못하게 만들기 </TITLE>
<STYLE type="text/css">  </STYLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="fgrim()">
그림 저장 못하게 만들기

<IMG src="icon/i0047.gif">

<IMG src="icon/i0048.gif">
</BODY>
</HTML>

69.7. 소스 못보게 한 문서의 소스 파일 보기

ex6_05.html 문서는 소스 파일을 보지 못하게 막아놓았습니다. ex6_07.html은 이렇게 막은 문서의 소스 파일을 보여주는 예제입니다. 사용법은 간단하여 ‘view-source:’ 명령만 URL 앞에 추가하여 <A> 태그에 삽입하면 됩니다.

** 사진: [ex6_05.html 문서의 소스 보기] 문장을 선택하면 소스 보기를 막아놓은 해당 문서의 소스 파일을 보여줍니다.

** 살펴볼 부분
1. <A HREF="view-source:http://www.agadal.com/ex6_05.html"> ex6_05.html 문서의 소스 보기</A> 명령에서 HREF 속성에 view-source: 명령을 추가해주면 됩니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_07.html - 소스 못보게 한 문서의 소스 파일 보기 </TITLE>
<STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
소스 못보게 한 문서의 소스 파일 보기

<A HREF="view-source:http://www.agadal.com/ex6_05.html"> ex6_05.html 문서의 소스 보기</A>
</BODY>
</HTML>

69.8. 자신의 홈페이지를 접속자의 홈페이지(시작페이지)로 만들기

많은 사이트에서 ‘즐겨찾기 추가하기’ 아이콘과 함께 ‘시작 페이지로 만들기’ 아이콘을 함께 제공합니다. 만약 사용자가 ‘시작 페이지로 만들기’를 선택하면 접속자의 브라우저에 설정된 ‘홈페이지(시작페이지)’ 설정 상태가 변경됩니다.
이 기능은 setHomePage() 함수를 이용해서 이루어집니다. 사용법은 간단해 이 함수에 홈페이지로 만들 주소를 입력하면 됩니다.

** 사진: [보고 있는 사이트를 시작 페이지로 만들기] 문장을 선택하면 시작 페이지로 만들겠냐는 안내문 창이 나타납니다. 여기에서 [예(Y)] 아이콘을 선택하면 접속자의 홈페이지로 설정됩니다. 익스플로러의 [인터넷 옵션] 메뉴를 살펴보면 www.x119.co.kr로 홈페이지가 설정되었음을 볼 수 있습니다.

** 살펴볼 부분
1. <A> 태그 안의 this.setHomePage('http://www.x119.co.kr') 부분만 자신의 홈페이지로 바꾸어주면 됩니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_08.html - 자신의 홈페이지를 접속자의 홈페이지(시작페이지)로 만들기 </TITLE>
<STYLE type="text/css">  </STYLE>
</HEAD>
<BODY>
자신의 홈페이지를 접속자의 홈페이지(시작페이지)로 만들기

<A HREF="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.x119.co.kr');"> 보고 있는 사이트를 시작 페이지로 만들기 </A>
</BODY>
</HTML>

69.9. 마우스 오른쪽 단추 기능 무용지물로 만들기

마우스의 오른쪽 단추 기능을 못쓰게 만드는 기법은 ex6_05.html 문서를 통해 알아보았습니다. ex6_05.html에서는 오른쪽 단추 기능을 못쓰게 만드는 것이 아니고 마우스의 오른쪽 단추를 눌렀을 때 지정한 프로그램이 실행되도록 만든 예제입니다. ex6_06.html 문서 역시 그림 파일을 선택했을 때만 오른쪽 단추 기능을 막는 프로그램입니다.

만약 아예 오른쪽 마우스 단추 기능을 무용지물로 만들고자 한다면 ex6_09.html 문서를 참고하기 바랍니다. 단 한 줄의 명령으로 아예 마우스의 오른쪽 단추 기능을 무용지물로 만들어 버립니다.

ex6_09.html은 마우스의 오른쪽 단추 기능을 눌렀을 때 아무런 반응이 없도록 만든 예제입니다. 보안이 불가능한 자바스크립트로 문서를 만들면서 이런 프로그램을 왜 필요로 하는지는 모르겠지만 인터넷의 자바스크립트 관련 게시판을 보면 의외로 이런 예제에 대해서 관심을 보이는 사용자가 많기에 소개합니다.

** 사진: 예제를 불러온 뒤에 마우스 오른쪽 단추를 눌러도 아무런 반응이 없습니다.

** 살펴볼 부분
1. <BODY> 시작 태그 안의 명령만 삽입해주면 됩니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_09.html - 마우스 오른쪽 단추 기능 무용지물로 만들기 </TITLE>
<STYLE type="text/css">  </STYLE>
</HEAD>
<BODY oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
마우스 오른쪽 단추 기능 무용지물로 만들기

<IMG src="icon/i0047.gif">

</BODY>
</HTML>

69.10. 태그 연습장 만들기

자바스크립트나 HTML 문법 관련 홈페이지는 사용자들이 태그를 연습할 수 있는 연습장을 제공하는 경우가 많습니다. 연습장은 간단하게 만들 수 있습니다. <TEXTAREA> 양식을 이용해 문장을 입력받도록 한 뒤에 입력받은 문장 내용을 그대로 새로운 창이나 영역에 표시하면 됩니다.
ex6_10.html은 간단한 태그 연습장 예제입니다. 장식도 없고 지우기와 결과 보기 두 개의 아이콘만 만들었지만 태그 연습장으로 쓰기에는 부족함이 없습니다. 자신의 홈페이지에 태그 연습장을 만들고자 한다면 ex6_10.html 문서 내용을 참고하기 바랍니다.

** 사진: 태그 연습장 영역에 <FONT> 태그를 이용해 태그를 적은 다음 [소스 결과 보기] 단추를 클릭하면 새로운 창을 만들어 태그 내용을 보여줍니다.

** 살펴볼 부분
1. 결과를 보여주는 창의 크기를 변경하려면 nwin=window.open("", "", "width=600, height=400"); 명령에서 width와 height 속성 값을 변경합니다.
2. 연습장으로 사용한 <TEXTAREA> 태그의 크기를 변경하려면 rows="25" cols="70" 부분을 변경합니다.

**소스 파일:

<HTML>
<HEAD>
<TITLE> ex6_10.html - 태그 연습장 만들기 </TITLE>
<STYLE type="text/css">  </STYLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
태그연습장 만들기

<FORM NAME="tedit">
<INPUT type="button" name="bview" value="소스 결과 보기" onclick='fview(this.form)'>
<INPUT type="button" name="bclear" value="연습장 지우기" onclick='fclear(this.form)'>

<TEXTAREA NAME="tagedit" rows="25" cols="70"></TEXTAREA>

</FORM>
</BODY>
</HTML>