68. 장식용 프로그램

68.1. 만년 달력 프로그램: 이달 달력 보기

달력 프로그램을 하나 만들어두면 매우 유용합니다. 홈페이지 방문자를 위한 장식품으로 사용할 수도 있지만 프로그래머 자신이 사용하기에 더욱 좋습니다. 달력 프로그램으로 만든 문서 하나만 저장해두면 필요한 달의 달력을 보고자 할 때 HTML 문서를 열어보는 것으로 알 수 있기 때문입니다.

ex5_01.html 문서는 만년 달력 프로그램입니다. 이름 그대로 기원 0년부터 만 년이 지나도 사용 가능한 달력입니다. 달력 프로그램을 만들 때는 달력 프로그램의 핵심 기법을 알고 있어야 합니다. 양력 달력을 만들 때 가장 중요한 사항은 윤일의 계산입니다. 즉 2월 달이 28일이냐 29일이냐 하는 점입니다.

양력에서 윤일은 4년에 한 번씩 윤일을 넣어주고, 400년에 한 번씩 윤일을 넣어줍니다. 그리고 100년에 한 번씩 윤일을 안 넣습니다. 즉 4년마다 2월은 29일로 설정하지만 4의 25배수인 100년 째는 28일로 설정합니다. 그러나 400년 마다 한 번은 100년 단위라 하더라도 29일로 설정합니다. 이것이 달력 프로그램의 핵심 사항입니다.

그리고 윤일의 계산과 요일의 계산은 기원 0년을 기준으로 삼습니다. 따라서 2002년의 날짜는 물론 다른 해의 날짜도 모두 0년을 기준으로 윤일을 더해가면서 요일을 계산합니다. ex5_01.html에는 이런 계산법을 이용하여 필요한 달의 날짜와 요일을 계산하는 프로그램 기법을 사용합니다.

ex5_01.html 문서의 특징은 calendar() 함수에 매개변수를 사용할 수 있도록 한 점입니다. 제가 인터넷에서 받은 달력 프로그램은 대부분 이 달이나 일년치를 보여주는 달력 프로그램입니다. 이런 달력 프로그램은 과거의 달력을 볼 수 없다는 점 때문에 불편합니다. 그래서 예전에 클리퍼와 C언어 프로그램으로 만들었던 달력 프로그램을 참고로 하여 매개변수를 사용할 수 있도록 만들었습니다. ex5_01.html은 매개변수를 이용하여 사용자가 원하는 날의 달력을 보여주기 때문에 활용도가 높습니다.

** 사진: 만년 달력을 이용하여 이 달 달력을 표시합니다.

** 살펴볼 부분
1. calendar() 함수의 매개변수로 보고자 하는 연도와 달을 입력하면 됩니다. 본 예제는 이 달을 표시하기 위해 날짜 객체를 선언하고 얻은 현재의 연도와 달을 삽입했습니다.
2. 사용자가 calendar() 함수에 넣는 달 수는 1부터 12까지입니다. 그런데 배열 요소는 0부터 시작하기 때문에 0이 1월이 되죠. 그래서 var mm=orimm-1; 명령을 넣어 사용자가 1월을 입력하기 위해 1을 매개변수로 사용하면 1을 감소시켜 0으로 맞추어줍니다.
3. var kyear = kd.getFullYear(); 명령은 4자리 연도를 얻기 위한 명령입니다. 책 본문에서 말씀 드린 것처럼 getYear() 함수는 두 자리 연도만 얻어주며, Y2K 문제가 발생하므로 사용하면 안됩니다. 연도를 얻을 때는 항상 getFullYear() 함수를 사용하기 바랍니다.
4. firstday 객체는 이 달 1일을 얻기 위해 임시로 사용하는 객체입니다. 이어 나오는 firstday.setDate(1); 명령으로 날짜를 1일로 설정하고, fday1=firstday.getDay(); 명령으로 이 달 1일의 요일을 얻습니다. 이 요일은 화면에 줄과 칸을 맞추어 요일과 날짜를 표시할 때 사용합니다.
5. if ((fmonth==1)&&(((fyear %4==0)&&(fyear %100 !=0))||(fyear % 400 ==0 ))) fmend=29; 명령은 윤일을 계산하기 위한 핵심 부분입니다. 만년 달력의 핵심 내용이라 할 수 있죠. 명령의 의미는 달이 2월 이고, 연도를 4를 나눈 나머지가 0이고, 100으로 나눈 나머지는 0일 아니거나, 400으로 나눈 나머지가 0일 때 2월의 날짜 수를 29일로 설정하라는 뜻입니다.
6. 다음의 문장은 없어도 되는 명령이지만 좀더 예쁜 달력을 만들기 위해 사용하는 명령입니다. 첫 번째 줄은 오늘과 기준 월의 두 날짜 객체를 비교하여 모든 내용이 같으면 오늘 날짜이므로 today 스타일로 화면에 표시하라는 뜻입니다. 그래서 오늘 날짜는 스타일에 지정된 빨간색 표로 표시됩니다.
그리고 다음의 두 명령은 vcol이 0이면 일요일이므로 sunday 스타일로 표시하고, vcol이 6이면 토요일이므로 satday 스타일로 표시하라는 뜻입니다. 그외 날이면 noday 스타일로 표시하라는 뜻입니다. 만약 이들 명령이 없다면 요일에 상관 없이 똑 같은 글씨와 색으로 표시됩니다.

if(kyear==fyear&&kmonth==fmonth&&kdate==fdate&&kday==fday&&i==kdate)
document.write('<TD class=today>'+i+'</TD>');
else if(vcol==0) document.write('<TD class=sunday>'+i+'</TD>');
else if(vcol==6) document.write('<TD class=satday>'+i+'</TD>');
else document.write('<TD class=noday>'+i+'</TD>');

8. 그외 부분은 화면에 표시하기 위한 칸을 만들기 위한 내용입니다. 화면에 표시할 칸의 크기나 글씨의 크기 색 등은 스타일과 <TABLE> 태그의 속성을 이용하여 설정하면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_01.html - 만년 달력 프로그램: 이달 달력 보기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  만년 달력 프로그램: 이달 달력 보기 <BR><BR>
  <TABLE width="250" height="250" bgcolor="navy" align="center" border="1"> <TR>
    <TD bgcolor="lavender" align="center">
    <SCRIPT language="JavaScript">  </SCRIPT>
  </TD> </TR> </TABLE>
</BODY>
</HTML>

68.2. 만년 달력 프로그램: 원하는 연도 일년 달력 보기

ex5_01.html 문서에서 calendar() 함수에 사용할 기준 연도와 월을 매개변수를 이용해 입력받을 수 있도록 한 까닭은 다양하게 달력을 표시하기 위해서입니다. 우선 ex5_01.html 문서에서 calendar() 함수를 이용하면 이번 달과 전후 달을 보여주는 업무용 3개월 달력을 표시하거나 12달을 모두 보여주는 달력을 만들 수 있습니다. 심지어는 자신이 태어난 이후의 달을 모두 보여주는 달력을 만드는 일도 간단합니다.

ex5_02.html 문서는 ex5_01.html 문서에서 사용한 calendar() 함수를 이용하여 일 년 달력을 보여주는 프로그램입니다. prompt() 함수를 이용하여 사용자에게 필요한 연도를 입력받은 뒤에 그 해의 12달 달력을 모두 표시해줍니다. 따라서 자신이 알고 싶은 연도의 달을 확인할 수 있는 유용한 프로그램입니다. 이 프로그램은 그대로 복사하여 홈페이지에서 사용자를 위한 달력 프로그램으로 사용해도 됩니다.
이 프로그램은 여러 해 달력을 만들 때에 쉽게 수정할 수 있도록 for문을 이용하여 표를 만들었습니다. 따라서 만약 여러 해의 달력을 표시하고 싶다면 일년 달력을 다시 for문으로 정해진 해만큼 돌리면 됩니다.

** 사진: 연도를 물을 때 2002를 입력하면 2002년 달력을 보여줍니다.

** 살펴볼 부분
1. calendar() 함수의 매개변수로 보고자 하는 연도와 달을 입력하면 됩니다. 본 예제는 사용자로부터 연도를 입력받아 매개변수로 삽입합니다.
vyear=prompt("보고자 하는 달력의 연도를 적어주세요", ""); 명령을 이용하여 사용자로부터 연도를 입력 받는데 prompt() 함수가 아닌 <FORM> 태그를 이용한 입력 양식을 사용할 경우에는 좀더 다양한 입력이 가능합니다. 즉 입력 양식을 이용하면 원하는 연도와 달, 출력될 연도와 달의 개월 수 등을 입력받아 활용할 수 있습니다.
2. 달력의 크기나 색깔, 배경 색 등은 바꾸려면 스타일과 <TABLE> 태그의 속성을 이용합니다. 원하는 형태의 달력으로 만드시면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_02.html - 만년 달력 프로그램: 원하는 연도 일년 달력 보기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
만년 달력 프로그램: 원하는 연도 달력 보기<BR><BR>
    <SCRIPT language="JavaScript">  </SCRIPT>
</BODY>
</HTML>

68.3. 상태 표시선에 날짜와 시계 표시하기

시계 프로그램은 장식용 프로그램 중에서도 자주 사용하는 프로그램입니다. 사용자의 브라우저에 시계를 달아주면 사용자가 날짜와 시각을 확인하기 편하기 때문입니다.

ex5_03.html 문서는 시계를 만드는 방법과 이 시계를 상태 표시선에 표시하는 방법을 담고 있습니다. 프로그램 기법은 소스 옆에 달아둔 주석문만으로도 쉽게 이해하실 것으로 생각합니다.

** 사진: 상태 표시선에 오늘 날짜와 시간, 기타 문장이 표시됩니다.

** 살펴볼 부분
1. 화면에 표시되는 문장 내용을 고치고자 한다면 kvdate 변수의 내용을 고치면 됩니다. 아래의 명령문 중에서 필요 없는 부분을 삭제하고, 필요한 내용을 추가하면 됩니다.

var kvdate = “(www.X119.com) " + kyear + "년 " + kmonth2 + "월 " + kdate + "일 (" + kday2 + "요일) " + kjh + kh2 + "시 " + km2 + "분 " + ks2 + "초";

2. window.status = kvdate; 명령이 상태 표시선에 kvdate 변수를 표시하는 문장입니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_03.html - 상태 표시선에 날짜와 시계 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  상태 표시선에 날짜와 시계 표시하기<BR> 
</BODY>
</HTML>

68.4. 제목 막대(title bar)에 문서 제목과 시계 표시

여러 차례 말씀드린 것처럼 제목 막대에 계속 내용이 변하는 문장을 표시하는 것은 바람직하지 않습니다. 그렇지만 제목 막대에 문서 제목과 함께 작은 시계를 달아두고 싶다면 ex5_04.html 문서를 참고하기 바랍니다.
ex5_04.html 문서는 ex5_03.html 에서 사용한 시계 프로그램을 그대로 사용합니다. 단지 표시되는 위치와 순서, 표시되는 시계의 표시 방법만 약간 수정했을 뿐입니다. 제목 막대는 문서 제목도 함께 표시되어야 하므로 가능한 시계 표시 부분을 짧게 설정해주는 것이 좋습니다.

** 사진: 제목 막대 영역에 시계와 함께 문서 제목이 표시됩니다.

** 살펴볼 부분
1. 화면에 표시되는 문장 내용을 고치고자 한다면 kvdate 변수의 내용을 고치면 됩니다. ex5_03.html에 비해 ex5_04.html 에 사용한 kvdate의 문장이 더 짧고 간결합니다.
2. document.title = kvdate + dtitle; 명령이 제목 막대(title bar)에 시간과 문서 제목을 표시하는 명령입니다. 이때 dtitle + kvdate 로 순서를 바꾸면 문서 제목이 먼저 표시됩니다. 이 경우 문서 제목이 길면 시계가 가려져 안보이는 문제가 발생합니다. 따라서 시계를 표시하는 kvdate 변수의 내용이 먼저 오도록 설정해주는 것이 좋습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_04.html - 제목 막대(title bar)에 문서 제목과 시계 표시 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  제목 막대(title bar)에 문서 제목과 시계 표시<BR>
</BODY>
</HTML>

68.5. 쿠키를 이용하여 방문 회수와 인사말 보여주기

쿠키(cookie)는 자바스크립트를 이용하여 사용자의 컴퓨터에 저장한 기록 파일입니다. 쿠키를 이용하면 사용자가 언제 자신의 홈페이지를 방문했으며, 몇 번째 방문했는지 알 수 있습니다. 심지어 사용자의 ID와 암호 기타 정보까지 기록했다가 사용할 수 있습니다. 때문에 웹브라우저에서 쿠키 사용을 허락할 경우 사용자의 보안 문제는 책임지기 어렵습니다.
ex5_05.html은 쿠키를 이용하여 방문 회수를 기록하고 다음에 현재의 사이트나 문서를 불러왔을 때 방문 회수와 인사말을 표시하는 예제입니다. 물론 이런 단순용 용도 외에도 다양한 용도로 쿠키를 사용할 수 있습니다. 예를 들면 광고창 많이 사용하는 ‘이 창을 다시 열지 않음’이라는 기법도 쿠키를 이용합니다.

본 예제에 사용하는 쿠키 파일은 쿠키를 저장하는 폴더인 Windows\Cookies 폴더에 저장됩니다. 홈페이지에서 사용한다면 홈페이지 이름으로 기록되겠지만 하드디스크에서 ex5_05.html을 실행시키면 로컬 컴퓨터에서 실행시킨 것이 되므로 local 이름이 붙습니다. ex5_05.html을 실행시키면 ‘사용자의 컴퓨터 이름~~local~~번호.txt’의 파일 이름으로 저장됩니다. 예를 들면 'kim~~local~~[1].txt'이라는 파일 이름으로 저장됩니다.

* 사진: 첫 번째 방문 때와 3번 째 방문했을 때 방문 회수와 해당 인사말을 보여줍니다.

** 살펴볼 부분
1. vgul 변수가 화면에 표시될 내용입니다. 기본적으로 표시할 문장을 적어두면 됩니다.
2. agul 배열은 지정된 회수의 방문 때 보여줄 문장에 사용합니다.
3. agul의 배열 크기보다 적은 방문 회수라면 agul의 문장을 보여주고, 그 이후에는 vgul의 초기값을 표시하게 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_05.html - 쿠키를 이용하여 방문 회수와 인사말 보여주기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     function getCookieVal (offset) {
       var endstr = document.cookie.indexOf (";", offset);
       if (endstr == -1)
       endstr = document.cookie.length;
       return unescape(document.cookie.substring(offset, endstr));
     }

function GetCookie (name) {
       var arg = name + "=";
       var alen = arg.length;
       var clen = document.cookie.length;
       var i = 0;
       while (i < clen) {
         var j = i + alen;
         if (document.cookie.substring(i, j) == arg)
         return getCookieVal (j);
         i = document.cookie.indexOf(" ", i) + 1;
         if (i == 0)
         break;
       }
       return null;
     }

function SetCookie (name, value) {
       var argv = SetCookie.arguments;
       var argc = SetCookie.arguments.length;
       var expires = (2 < argc) ? argv[2] : null;
       var path = (3 < argc) ? argv[3] : null;
       var domain = (4 < argc) ? argv[4] : null;
       var secure = (5 < argc) ? argv[5] : false;
       document.cookie = name + "=" + escape (value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
     }

function fview() {
       var expdate = new Date();
       var visit;
       var vgul="좋은 하루 되세요"       //환영 안내문용 변수
       agul=new Array();
       agul[0]="오늘이 처음 방문이네요. 반갑습니다."; 
       agul[1]="또 오셨군요. 고맙습니다."; 
       var vn=agul.length;
       expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));  //expire 날짜 계산
       if(!(visit = GetCookie("visit")))     //방문 회수 가져오기
         visit = 0;
       visit++;                //방문 회수 1 증가
       SetCookie("visit", visit, expdate, "/", null, false);
       if(visit <= vn) vgul=agul[visit-1];        //vn보다 적을 때 agul의 문장을 보여줌
       alert("\n"+"어서오세요.\n\n" + visit + " 번째 방문입니다." + "\n\n" + vgul); 
     }

function ResetCounts() {
       var expdate = new Date();
       expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
       visit = 0;
       SetCookie("visit", visit, expdate , "/", null, false);
     }
  //--> </SCRIPT>
</HEAD>
<BODY onload="fview()">
  쿠키를 이용하여 방문 회수와 인사말 보여주기<BR>
</BODY>
</HTML>

68.6. 접속자의 방문 시간 보여주는 시계

ex5_06.html은 접속자의 방문 시간을 보여주는 시계 프로그램입니다. 그렇지만 실제로 대부분의 홈페이지는 접속자의 방문 시간을 표시하지 않습니다. 접속자의 방문 시간을 보여줄 경우, 방문자는 ‘어이쿠, 내가 여기에서 이렇게 오래 머물렀나. 그만 접속을 끝내야겠군.’이라는 생각을 하고 접속을 끝내려 하기 때문입니다. 이런 이유로 접속자의 방문 시간을 알려주는 예제를 간단하게 만들어 표시할 수 있지만 대부분의 홈페이지에서 방문 시간을 보여주는 프로그램을 사용하지 않는 것입니다.

ex5_06.html은 간단하게 만든 방문 시각 표시 프로그램입니다. 접속한 이후로 경과한 시간을 분과 초 단위로 보여줍니다. 시계의 크기나 모양은 스타일을 변경하여 적당한 모양으로 변경시키면 됩니다.

** 사진: 사용자가 방문한 시간을 알려주는 시계를 표시합니다.

** 살펴볼 부분
1. vstr 부분을 수정하면 화면에 표시되는 문장을 변경할 수 있습니다.
2. t1 스타일을 수정하면 시계가 표시되는 문장의 색이나 크기 등을 바꿀 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_06.html - 접속자의 방문 시간 보여주는 시계 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var od1 = new Date();   //문서를 불러온 시각 즉, 방문 시각 얻음

function fvisit() {
       var od2 = new Date();       //현재 시각 얻음
       var vpast = Math.round((od2-od1)/1000);    //방문 시각과 현재 시각의 차이를 초 단위로 구함
       var vsec = vpast%60 ;             //분으로 나눈 나머지를 초로 계산
       var vmin = Math.floor(vpast/60);  //분으로 계산
       var vsec2 ="" + ((vsec > 9) ? vsec : "0" + vsec);   //9초 이하면 0을 앞에 붙여 표시
       var vmin2 ="" + ((vmin > 9) ? vmin : "0" + vmin);   //9분 이하면 0을 앞에 붙여 표시
       vstr = "방문 시간: " + vmin2 + "분 " + vsec2 + "초";  //표시할 문장
       document.kform.kinput.value=vstr;          //시각 표시
       vt=setTimeout('fvisit()',1000);            //1초마다 함수 반복 실행
     }
  //--> </SCRIPT>
</HEAD>
<BODY onLoad="fvisit()">
  접속자의 방문 시간 보여주는 시계<BR><BR>
    <FORM name="kform"> <INPUT type="text" name="kinput" size="18" class="t1"> </FORM>
</BODY>
</HTML>

68.7. 접속자의 로그인, 로그 아웃 시각 표시하기

방문 시간을 보여주는 것은 ex5_06.html 문서를 통해 알아봤습니다. 방문자가 접속을 끝내고 나갈 때는 그동안 방문한 방문 시간과 함께 로그인, 로그아웃 시각을 함께 보여주는 경우가 있습니다. 이 경우 로그아웃 시각은 현재 시각을 보여주면 되는 것이고, 로그인 시각은 문서를 처음 불러왔을 때나 사이트에 접속했을 때의 시간을 보여줍니다.
본 예제는 현재 문서를 기준으로 로그인 시각을 표시했지만 일반적으로 로그인이라 하면 현재 보는 문서를 불러온 시각이 아니라 사이트에 접속한 시각을 뜻합니다. 따라서 로그인 시각을 표시하려면 프레임셋 문서에 로그인 시각을 기록하는 프로그램을 만들거나 쿠키를 이용해야 합니다.

본 예제는 사용자가 단추를 클릭했을 때 로그인 시각과 로그아웃 시각을 표시하게 만들었는데 이는 사용자가 로그아웃 단추를 눌렀을 때 사용할 수 있는 방법입니다. 만약 로그인 기능이 없는 홈페이지라면 사용자가 홈페이지를 벗어날 때를 기준으로 로그아웃을 표시합니다. 즉 프레임셋 문서를 닫을 때 이를 검사하여 문서가 닫힘과 동시에 로그아웃 안내문을 보여주는 것입니다.

** 사진: 문서를 불러오면 사용자의 방문 시간을 표시합니다. [방문 시각 보기] 단추를 선택하면 사용자가 방문한 시각(문서를 불러온 시각)과 현재 시각(로그아웃 시각)을 표시합니다.

** 살펴볼 부분
1. vstr 부분을 수정하면 화면에 표시되는 문장을 변경할 수 있습니다.
2. t1 스타일을 수정하면 시계가 표시되는 문장의 색이나 크기 등을 바꿀 수 있습니다.
3. vlogin, vlogout 변수를 수정하면 로그인 로그아웃 표시 내용을 수정할 수 있습니다.
4.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_07.html - 접속자의 로그인, 로그 아웃 시각 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var vd = new Date();         //방문 시각 얻기 위한 날짜 객체
     function viewvt() 
     {  var kd = new Date();               //현재 시각 얻기 위한 날짜 객체 선언
        var kyear = kd.getFullYear();      //4자리 연도 얻기
        var kmonth = kd.getMonth();        //달 얻기.0월부터 시작함에 주의
        var kdate = kd.getDate();          //날 얻기
        var kday = kd.getDay();            //0이 일요일 6이 토요일
        var kh = kd.getHours();            //시간 얻기
        var km = kd.getMinutes();          //분 얻기
        var ks = kd.getSeconds();          //초 얻기
        var kjh= "오전"
        if(kh>=12) kjh="오후 "             //12시부터 23시까지는 오후
        else kjh="오전 ";                  //12보다 작으면 오전
        var kmonth2=kmonth+1, kh2=kh, km2=km, ks2=ks, kday2="일";
        if (kh>12) kh2=kh-12;              //13시면 13-12로 오후 1시
        if (km<=9) km2="0"+km;         //0~9분은 두 자리로 맞추기 위해 0을 앞에 삽입
        if (ks<=9) ks2="0"+ks;         //0~9초도 두 자리로 맞추기 위해 0을 앞에 삽입
        yoil=new Array("일", "월", "화", "수", "목", "금", "토");  //요일 표시 배열 선언
        kday2 = yoil[kday];                //yoik[0]이면 kday2는 일 요일로 대입
        var vlogout = kyear + "." + kmonth2 + "." + kdate + "("  + kday2 + ") " + kjh + kh2 + ":" + km2 + ":" + ks2;              //현재 날짜와 시각
        
        var vdyear = vd.getFullYear();      //4자리 연도 얻기
        var vdmonth = vd.getMonth();        //달 얻기.0월부터 시작함에 주의
        var vddate = vd.getDate();          //날 얻기
        var vdday = vd.getDay();            //0이 일요일 6이 토요일
        var vdh = vd.getHours();            //시간 얻기
        var vdm = vd.getMinutes();          //분 얻기
        var vds = vd.getSeconds();          //초 얻기
        if(vdh>=12) vdjh="오후 "             //12시부터 23시까지는 오후
        else vdjh="오전 ";                  //12보다 작으면 오전
        var vdmonth2=vdmonth+1, vdh2=vdh, vdm2=vdm, vds2=vds, vdday2="일";
        if (vdh>12) vdh2=vdh-12;              //13시면 13-12로 오후 1시
        if (vdm<=9) vdm2="0"+vdm;     //0~9분은 두 자리로 맞추기 위해 0을 앞에 삽입
        if (vds<=9) vds2="0"+vds;     //0~9초도 두 자리로 맞추기 위해 0을 앞에 삽입
        vdday2 = yoil[vdday];                //yoik[0]이면 kday2는 일 요일로 대입
        var vlogin = vdyear + "." + vdmonth2 + "." + vddate + "("  + vdday2 + ") " + vdjh + vdh2 + ":" + vdm2 + ":" + vds2;              //방문 날짜와 시각
        alert("\n로그인 시간 : " + vlogin + "\n\n현재 시간 : " + vlogout)
     }

function fvisit() {
       var od2 = new Date();       
       var vpast = Math.round((od2-vd)/1000);    //방문 시각과 현재 시각의 차이를 초 단위로 구함
       var vsec = vpast%60 ;             //분으로 나눈 나머지를 초로 계산
       var vmin = Math.floor(vpast/60);  //분으로 계산
       var vsec2 ="" + ((vsec > 9) ? vsec : "0" + vsec);   //9초 이하면 0을 앞에 붙여 표시
       var vmin2 ="" + ((vmin > 9) ? vmin : "0" + vmin);   //9분 이하면 0을 앞에 붙여 표시
       vstr = "방문 시간: " + vmin2 + "분 " + vsec2 + "초";  //표시할 문장
       document.kform.kinput.value=vstr;          //시각 표시
       vt=setTimeout('fvisit()',1000);            //1초마다 함수 반복 실행
     }
  //--> </SCRIPT>
</HEAD>
<BODY onLoad="fvisit()">
  접속자의 로그인, 로그 아웃 시각 표시하기<BR><BR>
    <FORM name="kform"> 
      <INPUT type="text" name="kinput" size="18" class="t1">
      <INPUT type="button" name="kbutton" value="방문 시각 보기" onclick="viewvt()">
    </FORM>
</BODY>
</HTML>

68.8. 지정된 시간 동안 카운트다운 하기

카운트다운은 두 시점 사이의 시간 흐름을 세는 것을 말합니다. 이때 0부터 100까지 세거나 거꾸로 100부터 0까지 세는 두 가지 방법 중 하나로 카운트다운을 수행합니다. 이런 카운트다운 프로그램은 지정된 시간 안에 작업을 수행해야 하는 게임에서 필수적으로 사용합니다. 예를 들어 자바스크립트로 만든 게임에서 지정된 시간에 게임을 끝내도록 하려면 카운트다운 기능이 필요합니다.

ex5_08.html 문서는 변수로 지정된 숫자를 1초 단위로 줄여나가 0이 될 때가지 세는 프로그램입니다. 이 문서에서 사용한 카운트다운 기법은 매우 단순합니다. 일정 시간마다 1씩 더하거나 빼주면 됩니다. 그렇게 해서 지정된 숫자까지 도달하면 다른 함수를 실행시킬 수 있습니다. 예를 들어 문서를 불러오거나 사이트 방문한 지 일정 시간이 지났을 때 재미있는 애니메이션을 등장시키거나 깜짝 이벤트를 보여주는 용도로 사용할 수 있습니다. 물론 이런 용도로 사용할 때는 화면에 카운트다운을 표시하지 않고 문서 안에서만 동작하도록 프로그램을 만들어야 합니다.

** 사진: [카운트 다운 시작] 아이콘을 누르면 5초 동안 카운트 다운이 시작됩니다. 지정된 5초 후에는 alert() 함수를 실행시켜 안내문을 보여줍니다. 아이콘을 누를 때마다 다시 카운트다운이 시작됩니다.

** 살펴볼 부분
1. vstr 부분을 수정하면 화면에 표시되는 문장을 변경할 수 있습니다.
2. t1 스타일을 수정하면 시계가 표시되는 문장의 색이나 크기 등을 바꿀 수 있습니다.
3. vn이 카운다운 설정 시간으로 초 단위를 사용합니다. 날짜, 시, 분 단위까지 사용하고 싶다면 해당 초를 단위에 맞게 나누어 표시하면 됩니다.
4. fcount() 함수에서 return; 명령을 사용한 이유는 함수를 끝내기 위해서입니다. 함수를 끝내지 않으면 setTimeout() 함수에 의해 계속 함수가 반복됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_08.html - 지정된 시간 동안 카운트다운 하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var vn=5;           //카운트다운 시간. 5면 5초로 설정.

68.9. 마우스 커서 따라다니는 수직 수평선

ex5_09.html 문서는 마우스 커서를 따라다니는 수직 수평선 예제입니다. 실제로 이 프로그램을 사용하는 경우는 많지 않지만 독특하고 재미있는 효과를 보여주는 프로그램입니다. 이 프로그램을 사용할 경우 사용자의 마우스 커서 위치는 아주 쉽게 찾을 수 있습니다. 홈페이지 시작 화면 등에 사용하면 독특한 효과를 낼 수 있는 프로그램입니다.

** 사진: 문서를 불러오면 수직선이 마우스 커서를 따라다닙니다.

** 살펴볼 부분
1. 사용자는 스타일 부분을 수정해 화면에 표시되는 선의 색이나 모양을 바꿀 수 있습니다. xline 스타일을 바꾸면 xline(수평선)의 형태를 바꿀 수 있고, yline 스타일을 바꾸면 yline 형태를 바꿀 수 있습니다.
2. xline 스타일에서 width와 height는 선의 두께를 지정하는 속성이고, background-color는 선의 색을 지정합니다. 예제에서는 수평선을 crimson 색으로 수직선을 orange 색으로 지정했습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_09.html - 마우스 커서 따라다니는 수직 수평선 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
      if (document.all&&!window.print){
         xline.style.width=document.body.clientWidth-2;
         yline.style.height=document.body.clientHeight-2;
      }
 
      function fxyline(){
        xline.style.pixelTop=document.body.scrollTop+event.clientY+1;
        if (event.clientX<document.body.clientWidth-2)
          yline.style.pixelLeft=document.body.scrollLeft+event.clientX+1
        else
          yline.style.pixelLeft=document.body.clientWidth-2
      }

document.onmousemove=fxyline;
      //--> </SCRIPT>
</HEAD>
<BODY>
  마우스 커서 따라다니는 수직 수평선<BR>
   <DIV id="xline" style="width:expression(document.body.clientWidth-2)"></DIV>
   <DIV id="yline" style="height:expression(document.body.clientHeight-2)"></DIV>
</BODY>
</HTML>

68.10. 브라우저 창 안에서 돌아다니는 그림

ex5_10.html 문서는 그림이 브라우저 창 안을 돌아다니는 프로그램입니다. 그림 크기가 크지 않을 경우에는 정적인 화면을 재미있게 바꾸어주는 장식 효과가 있습니다. 애니메이션 gif를 이용한다면 더욱 재미있는 장면을 연출할 수 있습니다. 문서를 그냥 보여주는 것이 밋밋하다고 느낄 때 귀여운 그림이 화면 안을 돌아다닌다면 색다른 느낌을 줄 수 있습니다.

사용하는 그림에 따라서 느낌을 다를 수 있습니다. 우주선이나 비행선을 이용하면 우주선이 떠다니는 효과를, 공 그림을 사용한다면 공이 튀는 효과를, 새 그림을 사용한다면 새가 나는 효과를 얻을 수 있습니다. 본 예제는 직선으로만 그림이 움직에게 되어있는데 sin() 함수를 사용하거나 random() 함수를 사용하여 좌표를 좀더 부드럽고 불규칙하게 만든다면 좀더 색다른 느낌을 얻을 수 있습니다.

** 사진: 문서를 불러오면 꽃잎 그림이 브라우저 창 안을 계속 돌아다닙니다.

** 살펴볼 부분
1. 그림의 크기에 맞게 vwidth와 vheight 변수의 크기를 설정합니다. 물론 그림 크기에 상관 없이 지정해도 됩니다. 이 경우 그림의 원래 크기보다 크게 지정하면 그림을 확대해 보여주고, 그림보다 작게 지정하면 축소시켜 화면에 표시합니다.
2. 그림의 이동 속도는 vspeed 변수로 설정합니다. 느리게 움직이면 멋진 느낌이 들고, 속도를 빨리 하면 통통 튀는 느낌을 줍니다.
3. <IMG> 태그 명령에 사용할 그림의 경로명을 적습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_10.html - 브라우저 창 안에서 돌아다니는 그림 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var vwidth=31;          //그림의 좌우 길이 지정
     var vheight=31;         //그림의 위아래 길이 지정
     var vspeed=5;          //움직이는 속도
     var vmaxx=0, vmaxy=0, vxpos=0, vypos=0;  //최대 좌표와 좌표를 위한 변수
     var vxdir='right';       //처음에는 오른쪽으로 움직임
     var vydir='down';      //처음에는 아래로 움직임
     var vtf=true;

68.11. 마우스 따라다니는 별똥별

ex5_11.html에 있는 프로그램은 마우스를 따라다니는 장식용 프로그램 중에서는 매우 독특하면서도 잘 만든 프로그램입니다. 국내 사용자가 만든 것인지 해외 사용자가 만든 것인지 모르겠지만 하여간 잘 만든 프로그램입니다. ex5_11.html은 마우스 커서를 따라다니는 점들의 모임인데 이 점들이 수학적인 계산에 의해 다양한 궤도를 그립니다. 특히 배경을 검정색으로 놓고 사용할 경우 아주 환상적인 움직임을 보입니다. 별도의 그림 파일을 사용하지 않았지만 어지간한 애니메이션보다 훨씬 동적이고 화려한 느낌을 줍니다. 대개의 프로그램은 마우스가 가만 있을 경우 따라다니는 그림도 움직이지지 않지만, 별똥별 프로그램은 마우스가 움직이지 않을 때에도 계속 궤도를 그리기 때문에 홈페이지의 일부 영역에 이 소스를 적용하면 멋진 애니메이션 효과를 얻을 수 있습니다.

** 사진: 마치 밤하늘의 별똥별이 움직이는 것처럼 마우스를 따라다니면서 별동별이 궤도를 돕니다.

** 살펴볼 부분
1. <DIV> 태그안의 width, height 속성 값을 바꾸면 화면에 표시되는 별똥별의 크기를 조절할 수 있습니다.
2. setTimeout("Comet()", 1); 명령의 수치로 속도를 조절합니다. 수치가 클수록 회전 속도가 느려집니다.
3. 좌표계산 함수에 사용한 사용한 수치를 바꾸면 회전 반경이나 이동 속도 등에 변화를 줄 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_11.html - 마우스 따라다니는 별똥별 </TITLE>
  <STYLE type="text/css">  </STYLE>
</HEAD>
<BODY bgcolor="black">
  마우스 따라다니는 별똥별<BR>
     <LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER>
     <LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER>
     <LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER>
     <DIV id="starsDiv" style="position:absolute;top:0px;left:0px">
     <DIV style="position:relative; width:1px; height:1px; background:#ffffff; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:1px; height:1px; background:#fff000; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:1px; height:1px; background:#ffa000; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:1px; height:1px; background:#ff00ff; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:1px; height:1px; background:#00ff00; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:2px; height:2px; background:#0000ff; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:2px; height:2px; background:#FF0000; font-size:1px; visibility:visible"></DIV>
     <DIV style="position:relative; width:2px; height:2px; background:#ffffff; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:3px; height:3px; background:#fff000; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:3px; height:3px; background:#ffa000; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:4px; height:4px; background:#ff00ff; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:4px; height:4px; background:#00ff00; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:5px; height:5px; background:#0000ff; font-size:2px; visibility:visible"></DIV>
     <DIV style="position:relative; width:6px; height:6px; background:#FF0000; font-size:3px; visibility:visible"></DIV>
     </DIV>
  <SCRIPT language="JavaScript"> <!--
    var Clrs = new Array(6);
    Clrs[0] = 'ff0000';
    Clrs[1] = '00ff00';
    Clrs[2] = '000aff';
    Clrs[3] = 'ff00ff';
    Clrs[4] = 'fff000';
    Clrs[5] = 'fffff0';
    var yBase = 200;
    var xBase = 200;
    var step;
    var currStep = 0;
    var Xpos = 1;
    var Ypos = 1;
    var Xs = 200;
    var Ys = 400;

68.12. 클릭하면 꽃잎이 흩날리는 효과

ex5_12.html도 조금 독특한 효과를 보여주는 예제입니다. 마우스로 화면 어딘가를 클릭하면 꽃잎이 나타나 흩날리는 효과를 보여줍니다. 이 효과를 이용하면 사용자가 화면의 아이콘이나 문장 등을 눌렀을 때 각종 그림이나 문장이 나타나도록 할 수 있습니다. 단 별이 잘 보이도록 문서의 배경색은 검정색이나 어두운 색으로 하는 것이 좋습니다.
본 예제는 레이어에 그림을 이용했는데 다른 그림을 이용하거나 * 기호를 비롯한 다양한 글씨를 사용할 경우 매우 색다른 효과를 얻을 수 있습니다.

** 사진: 화면 아무 곳에서나 클릭하면 별들이 흩날립니다.

** 살펴볼 부분
1. 스타일의 font-size 값을 바꾸면 화면에 표시되는 별의 크기를 조절할 수 있습니다. 별의 색도 스타일에서 설정합니다.
2. speed 변수의 수치가 클수록 별의 이동 속도가 늘려집니다.
3. power 변수의 수치가 작을수록 별의 활동반경이 넓어집니다.
4. <DIV id="sDiv0"><img src="icon/i0101.gif">

명령의 <DIV> 태그 안에 흩날리게 할 글씨나 그림을 삽입하면 또 다른 효과를 볼 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_12.html - 클릭하면 꽃잎이 흩날리는 효과 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var sparksOn     = true;
     var speed        = 40;
     var power        = 4;
     var ns=(document.layers);
     var ie=(document.all);
     var sparksAflyin = false;
     var allDivs      = new Array(10);
     var totalSparks  = 0;

68.13. 별이 화면 왼쪽으로 날아가는 효과

ex5_13.html은 별이 화면 왼쪽으로 날아가는 효과를 보여줍니다. ex5_12.html과 비슷한 기법을 사용한 프로그램으로 이동 방향만 다를 뿐입니다. ex5_12.html 보다는 효과가 덜 독특하지만 나름대로 재미있는 효과입니다. 검정색 바탕의 문서에 사용하면 그런대로 독특한 효과를 얻을 수 있습니다. 본 예제는 그림을 사용하지 않고 텍스트만 사용했는데 <DIV> 태그 안에 그림을 사용하면 더욱 화려한 효과를 볼 수 있습니다. 우주선 그림을 사용한다면 우주선이 움직이면서 날아가는 것 같은 효과를 보게 됩니다.

** 사진: 문서를 불러오면 화면 왼쪽으로 별이 스쳐 지나갑니다.

** 살펴볼 부분
1. 스타일의 font-size 속성 값을 바꾸면 화면에 표시되는 별의 크기를 조절할 수 있습니다. 별의 색도 스타일에서 설정합니다.
2. 별의 수를 늘리려면 레이어 수를 늘려야 합니다.
3. <DIV> 태그 안에 다른 글씨나 그림을 삽입하면 또 다른 효과를 볼 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_13.html - 별이 화면 왼쪽으로 날아가는 효과 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var ns=(document.layers); 
     var ie=(document.all); 
     var w3=(document.getElementById && self.innerWidth && (window.pageXOffset>-1)); 
     //my way of making sure the browser will have what I need 
     var allDivs  = new Array(10); 
     var documentWidth,documentHeight; 
     
     function initAll(){ 
       if(!ns && !ie && !w3) return; 
       for(dNum=0; dNum<10; ++dNum){ 
         if(ie) allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
         else if(ns) allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]'); 
         else if(w3)       allDivs[dNum] = eval('document.getElementById("sDiv'+dNum+'").style'); 
         moveTo(dNum,0,0); 
       }                 
     }

if(tempx>-50){ 
           tempx-=45; 
           allDivs[i].left=tempx; 
           allDivs[i].top =tempy; 
           setTimeout("moveTo("+i+","+tempx+","+tempy+")",40) 
        } 
        else 
          setTimeout("moveTo("+i+",documentWidth-60,randomy)",2000/i+40); 
     } 
     
     window.onload=initAll 
  //--> </SCRIPT>
</HEAD>
<BODY>
  별이 화면 왼쪽으로 날아가는 효과<BR>
  <DIV id="sDiv0">*</DIV> 
  <DIV id="sDiv1">*</DIV> 
  <DIV id="sDiv2">*</DIV> 
  <DIV id="sDiv3">*</DIV> 
  <DIV id="sDiv4">*</DIV> 
  <DIV id="sDiv5">*</DIV> 
  <DIV id="sDiv6">*</DIV> 
  <DIV id="sDiv7">*</DIV> 
  <DIV id="sDiv8">*</DIV> 
  <DIV id="sDiv9">*</DIV> 
</BODY>
</HTML>

68.14. 일정 시간마다 글자 색 바꾸기

ex5_14.html은 화면에 글씨를 표시할 때 일정 시간마다 글씨 색이 바뀌는 프로그램입니다. 화면에 표시되는 글씨 색을 일정 시간마다 바꿀 경우 글씨만 가지고도 광고 효과나 애니메이션 효과를 볼 수 있기 때문입니다. 잘 만든 글씨 효과는 어지간한 애니메이션보다 멋집니다. 물론 ex5_14.html의 예제는 아주 단순하게 몇 가지 글씨 색을 바꾸는 정도에 불과합니다. 그렇지만 이를 응용하면 다양한 효과를 얻을 수 있습니다. 특히 점차 커지는 글씨 등의 효과와 함께 사용하면 더욱 멋진 효과를 얻을 수 있습니다.

ex5_14.html 문서의 배경색과 글씨 색을 어떻게 지정하느냐에 따라서 ex5_14.html 문서에서 사용한 글씨 색 바꾸기 함수는 그 효용성이 크게 달라집니다. 본 예제는 표의 배경색과 같은 색과 다른 색 두 가지 색만 사용하여 깜박임 효과를 구현했습니다.

** 사진: 글자가 일정 시간마다 바뀌는데 표의 배경색과 다른 색 두 가지만 사용하고 시간 간격을 짧게 주었기 때문에 글자가 깜박이는 효과가 납니다.

** 살펴볼 부분
1. 스타일을 수정하면 화면에 표시되는 글자의 크기나 형태를 바꿀 수 있습니다.
2. setInterval("fcolor()",300); 의 수치가 클수록 글자가 변환되는 속도가 느려집니다.
3. agul 변수에 화면에 표시할 내용을 적습니다.
4. acolor 배열에 색을 계속 추가할 수 있습니다. 원하는 색으로 색을 추가해 사용하기 바랍니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_14.html - 일정 시간마다 글자 색 바꾸기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var vgul = "www.X119.com";     //화면에 표시할 내용
     var vn = 0;     //색 변경을 위한 변수
     var acolor = new Array( "RED", "GOLD");  //글씨 색 배열. 표 배경색과 빨간색만 사용해 깜박임 효과 냄

function fcolor(){            //글씨 색 바꾸기 함수
       document.all.cf.style.color = acolor[vn];   //배열 요소의 색으로 cf 영역의 색을 지정
       vn=(vn < acolor.length-1) ? vn+1 : 0;  //배열요소보다 작으면 vn에 1 증가, 아니면 0으로 설정
     }
		 
    setInterval("fcolor()",300);
  //--> </SCRIPT>
</HEAD>
<BODY>
  일정 시간마다 글자 색 바꾸기<BR>
  <TABLE width="500" height="50" bgcolor="gold"> <TR> <TD>
  <SCRIPT language="JavaScript">  </SCRIPT>
 </TD> </TR> </TABLE>
</BODY>
</HTML>

68.15. 글씨의 명암이 변하는 효과(fade in 효과)

ex5_15.html 문서는 ex5_14.html을 응용해 만든 프로그램입니다. 배경 색을 검정색으로 한 다음에 글씨에 스타일을 주고, 적당한 크기에 적당한 색을 지정했을 경우 페이드인(fade in)이나 페이드아웃(fade out) 효과가 나타납니다. 사용하는 색의 배열과 시간에 따라서 효과는 달라질 수 있습니다.

ex5_15.html은 글씨색을 배열에 대입해 사용했습니다. 그래서 배열의 크기가 꽤 커졌습니다. 만약 사용할 글씨색이 많다면 배열을 이용하는 것보다는 for문을 돌려 16진수를 얻어낸 다음에 글씨색으로 사용하거나 수학 함수를 이용하여 글씨색의 변화를 좀더 상세하게 얻어내는 것이 좋습니다. 이 기법은 7장에 있는 몇몇 예제를 참고하시면 됩니다.

** 사진: 글씨가 서서히 나타났다 사라집니다.

** 살펴볼 부분
1. acolor[] 배열에 어떻게 색을 배열하느냐가 중요합니다. 검정색에서부터 점차 빨간 색에 가까운 색을 단계적으로 배치했다가 다시 검정색에 가까운 색의 순서로 배열해두면 글씨가 밝아졌다가 어두워지는 효과를 얻을 수 있습니다.
2. 색과 글씨의 크기, 속도를 조절하면 더웃 멋진 효과를 낼 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex5_15.html - 글씨의 명암이 변하는 효과(fade in 효과) </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var vgul = "www.X119.com";     //화면에 표시할 내용
     var vn = 0;     //색 변경을 위한 변수
     var acolor = new Array("000000", "090000", "100000",  "190000",  "200000",  "290000",  "300000",  "390000",  "400000",  "490000",  "500000",  "590000",  "600000",  "690000",  "700000",  "790000",  "800000",  "890000",  "900000",  "990000",  "a00000",  "a90000",  "b00000",  "b90000",  "c00000",  "c90000",  "d00000",  "d00000",  "d00000",  "d00000",  "d00000",  "c90000",  "c00000",  "b90000",  "b00000",  "a90000",  "a00000",  "990000",  "900000",  "890000",  "800000",  "790000",  "700000",  "690000",  "600000",  "590000",  "500000",  "490000",  "400000",  "390000",  "300000",  "290000",  "200000",  "190000",  "100000",  "000000");

function fcolor(){            //글씨 색 바꾸기 함수
       document.all.cf.style.color = acolor[vn];   //배열 요소의 색으로 cf 영역의 색을 지정
       vn=(vn < acolor.length-1) ? vn+1 : 0;  //배열요소보다 작으면 vn에 1 증가, 아니면 0으로 설정
     }
    setInterval("fcolor()",100);
  //--> </SCRIPT>
</HEAD>
<BODY>
  <BR><BR><BR><BR><BR>
  <SCRIPT language="JavaScript">  </SCRIPT>
</BODY>
</HTML>

68.16. 필터를 이용한 페이드인 효과

ex5_15.html은 페이드인 효과를 만들기 위해 꽤 많은 색을 배열로 지정했습니다. 이처럼 색을 매번 지정하는 일은 매우 힘든 일입니다. 만약 페이드인 효과만을 사용하고자 한다면 수학 함수를 사용해 색의 변화를 설정하거나 필터를 이용하는 것이 효과적입니다.
ex5_16.html은 익스플로러에서 지원하는 필터 효과를 이용하여 페이드인 기능을 구현한 예제입니다. 배열을 이용한 방법에 비해 훨씬 간단하다는 사실을 알 수 있습니다.

** 사진: 필터를 이용하면 더욱 간단하게 효과를 볼 수 있습니다.

** 살펴볼 부분
1. fadein() 함수에서 + 2 부분이 색의 변화 단계를 설정하는 부분이고, 50은 글씨 변화 속도를 설정하는 부분입니다. +2나 50 부분의 수치가 클수록 글씨 변화 속도가 빨라집니다.
2. id가 fin인 태그 안에 사용한 color: blue 부분이 변화될 색입니다. 원하는 색으로 설정하면 검정색에서부터 지정된 색으로 페이드인 효과가 발생합니다.

**소스 파일:

68.17. 마우스 가져가면 흑백 사진으로 표시하기

그림을 보여주는 갤러리 메뉴에서 마우스를 가져간 그림의 색만 다른 색으로 바꿀 경우 주목 효과가 큽니다. 가장 많이 사용하는 기법 중 하나는 다른 그림이 모두 컬러인데 마우스를 가져간 그림만 흑백으로 바꾸거나, 다른 그림이 모두 흑백이고 마우스를 가져간 그림만 컬러인 경우입니다.

이런 기법을 구현하고자 할 때 일반적으로 생각할 수 있는 기법은 이벤트 핸들러와 두 장의 그림을 사용하는 롤오버 기법입니다. 즉 먼저 컬러 사진을 보여준 다음에 마우스가 그림 위에 위치하면 흑백 사진을 보여주는 방법입니다. 그러나 이런 롤오버 기법은 두 장의 그림이 필요하다는 단점이 있습니다.

익스플로러에서만 지원하는 필터 효과를 사용할 경우에는 한 장의 그림만 가지고도 이 기법을 쉽게 구현할 수 있습니다. 필터 속성 중에 gray 속성을 이용하면 됩니다.

** 사진: 처음에는 컬러 사진으로 표시되지만 마우스를 가져간 사진은 흑백으로 표시되므로 주목 효과가 큽니다.

** 살펴볼 부분
1. <IMG src="icon/i0131.jpg" onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''"> 명령이 핵심 부분입니다. 마우스를 가져갔을 때는 gray 필터 효과를 적용하고 마우스가 영역 바깥으로 벗어나면 필터 효과를 빈 효과로 적용합니다.

**소스 파일:

68.18. 흑백 사진에 마우스 가져가면 컬러 사진으로 표시하기

이번에는 ex5_17.html과 정 반대의 경우입니다. 문서를 불러왔을 때는 흑백으로 보여주다가 마우스를 가져가면 컬러로 보여주는 기법입니다. 이 기법의 핵심은 먼저 문서를 불러왔을 때 흑백으로 표시하는 것입니다. 이를 위해 gray 필터를 사용합니다. 그런 뒤에 마우스를 가져가면 필터를 적용시키지 않고, 마우스가 그림 바깥으로 나가면 다시 gray 필터를 적용하는 것입니다.

** 사진: 처음에는 흑백 사진으로 표시되지만 마우스를 가져간 사진은 컬러로 표시되므로 주목 효과가 큽니다.

** 살펴볼 부분
1. <IMG src="icon/i0131.jpg" style="{filter:gray}" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'"> 명령이 핵심 부분입니다. 처음에 문서를 불러올 때는 style="{filter:gray}" 명령에 의해 컬러 사진을 흑백으로 화면에 표시합니다. 그런 뒤에 마우스를 가져갔을 때는 gray 필터 효과를 없앤 빈 효과를 적용하고 마우스가 영역 바깥으로 벗어나면 다시 gray 필터 효과를 설정합니다.

**소스 파일:

68.19. 텍스트 영역에 배경 그림 넣기

<TEXTAREA> 태그를 이용하여 만든 텍스트 영역은 흰색 바탕이 기본입니다. 이것이 싫다면 그림 파일을 배경으로 넣어서 사용할 수 있습니다. ex5_19.html은 텍스트 영역에 배경 그림을 삽입하는 에제입니다. 이때 사용하는 명령은 style 명령입니다.

** 사진: <TEXTAREA> 태그를 이용해 만든 텍스트 영역에 배경 그림을 깔았습니다. 사용자는 그 위에 글을 입력합니다.

** 살펴볼 부분
1. <TEXTAREA> 태그 안에 style=background-image:url(‘icon/i0024.gif‘) 명령을 삽입하는 것이 핵심입니다. 그림 파일 이름을 바꾸면 원하는 그림으로 배경을 설정할 수 있습니다.

**소스 파일:

68.20. 버튼 배경색 글씨색 변경하기, 버튼 안에 그림 넣기

버튼은 대부분 네모난 회색에 검정 글씨 일색입니다. 이런 단순한 버튼 모양이 보기 싫다면 <BUTTON> 태그를 이용하여 조금은 변화된 버튼 아이콘을 만들 수 있습니다. <BUTTON> 태그는 시작 태그와 끝 태그 사이에 삽입한 문장과 그림을 버튼 안에 포함시켜줍니다. 따라서 태그 안에 <IMG> 태그를 사용하면 그림이 포함된 버튼을 만들 수 있습니다. 또한 버튼의 배경색과 글씨색은 스타일로 지정하면 됩니다.

** 사진: 기본적인 회색 버튼 모양과 달리 그림이 삽입되고 배경색과 글씨색이 다양하게 변화된 버튼 아이콘이 표시됩니다.

** 살펴볼 부분
1. 버튼 안에 그림을 삽입하려면 <BUTTON> 태그 사이에 <IMG> 태그를 사용합니다.
2. 버튼의 배경색과 글씨 색, 크기 등은 스타일로 설정합니다.

**소스 파일:

68.21. 링크 문장에 두 줄 만들기

일반적으로 링크된 문장은 밑줄 한 줄만 표시됩니다. 이런 링크 메뉴가 밋밋하다면 위아래 두 줄이 나타나도록 만들 수 있습니다. 이는 스타일의 text-decoration 속성을 이용합니다. text-decoration 속성 값으로 underline과 overline을 동시에 주면 위아래 두 줄이 생기는 것입니다. 물론 none 값을 주면 링크된 문장이라 하더라도 밑줄이 생기지 않습니다.
ex5_21.html은 링크된 문장이 보통 때는 밑줄이 안보이다가 마우스를 가져가면 두 줄로 표시되는 예제입니다. 평상시에는 밑줄이 안 보이기 때문에 좀더 깔끔해보이고, 마우스를 가져갔을 때는 주목 효과가 높아지는 예제입니다.

** 사진: 링크된 문장에 마우스을 가져가면 문장의 위아래로 줄이 표시됩니다.