콤보박스와 브라우저 정보 이용하기
편안한 느낌을 주는 홈페이지라면 인기를 끌 자격은 충분. 콤보박스를 이용해 다양한 정보를 일목요연하게 나타내고, 직접 이동을 편리하게 해보자. 또 브라우저의 각종 정보를 이용해 사용자에게 유용한 정보를 제공하는 방법도 챙겨보자.
지난호에서는 비교적 간단한 HTML 문법으로 홈페이지를 다듬는 기법을 소개했다. 이번호에는 필자가 <인터넷> 4, 5, 7월호 NetTip에서 소개했던 자바스크립트를 이용해 구현할 수 있는 테크닉을 몇 가지 더 알아보겠다.
자바스크립트는 HTML과는 약간 다르게 프로그래밍 개념을 필요로 하므로 프로그래밍 경험이 없는 초보자에게는 생소한 면이 없지 않으나 조금만 해보면 문법에 곧 익숙해질 것이다. 시중에 자바스크립트에 관한 참고서적이 많으니 홈페이지와 관련해 관심있는 독자는 공부해보길 바란다.
우주효과의 비밀
강좌에 앞서 지난호에서 언급했던 표를 이용한 테크닉 중에서 복잡한 화면을 표로 간단하게 꾸미는 기법을 잠깐 생각해보자. 그때 필자는 표를 이용해 우주효과를 낼 수 있다고 했다.
프로젝트 1. SELECT를 이용한 직접 이동을 구현해보자
윈도우 환경에 익숙한 독자라면 누구나 콤보박스를 잘 알고 있을 것이다. 화면 가운데 '성욱이의 홈페이지 초기 화면'이라고 써있는 그 상자가 바로 콤보박스다.
콤보박스를 화면에 나타내자
보이는 것이 얻는 것이라고(What You See Is What You Get : WYSIWYG) 일단 화면에 콤보박스를 띄우기만 해보자. 일단 이를 위해 콤보박스를 끼워 넣을 대상이 될만한 HTML 문서를 설정하자. 어떤 곳으로 갈지를 결정하는 분기가 필요한 곳이라면 더 좋고, 그럴만한 대상이 없다면 단순히 하나의 HTML 문서를 새로 만들어도 무방하다. 이제 그 대상을 정했다면, 와 태그 사이의 적당한 위치에 다음과 같은 코드를 삽입하도록 한다.
(예제 1) 콤보박스 소스
<form>
<select NAME="dest" SIZE=1>
<option VALUE="index.html">성욱이의 홈페이지 초기 화면
<option VALUE="java/csu.html">성욱이의 모험 게임
<option VALUE="index1.html">성욱이 소개
<option VALUE="lover.html">미옥이 소개
<option VALUE="comlec.html">성욱이의 컴퓨터 강좌
</select>
</form>
위의 소스 코드를 보면 <FORM>과 </FORM> 사이에 <SELECT>와 </SELECT>가 있고, 그 사이에 다시 다섯 개의 <OPTION> 항목이 있는 것을 볼 수 있다. 결론부터 말하자면 <SELECT>가 하나이므로 하나의 콤보박스를 나타낸다는 말이며, 그 콤보박스의 이름은 dest로 명명했다. 그리고 <OPTION> 태그 하나당 하나의 선택 메뉴 항목을 나타내므로 다섯 개의 메뉴 항목이 있게 된다. 그리고 한글로 쓰여진 부분이 각 항목에 대한 내용이다. 마지막으로 <OPTION> 태그에 VALUE 옵션이 있는데, 이 부분은 아직 직접적으로 쓰고 있지는 않지만 나중에 직접 이동할 때 쓰기 위해 분기할 HTML 문서를 표기해두었다. 물론 이 상태로도 콤보박스는 화면에 뜨겠지만 선택하더라도 그 홈페이지로 아직 분기하지 않는다.
실제 분기하는 함수 루틴 만들기
이제 실제 분기가 되도록 해야 하는데, 그러한 직접 이동을 구현해주는 함수를 만들어야 한다. 다음의 소스 코드를 <HEAD>와 </HEAD> 사이에 끼어 넣되 <TITLE>과 </TITLE> 태그가 나온 다음에 넣도록 한다.
<script>
<!--
function selectjump(para)
{
var selnum=para.dest.selectedIndex;
location=para.dest.options[selnum].value;
}
//-->
</script>
위의 코드는 자바스크립트로 구현한 부분으로 selectjump 함수는 넘겨받은 상수를 가지고, dest 콤보박스에서 선택돼 있는 인덱스 번호를 찾아서 selnum 변수에 값을 넘겨준다. 그리고 선택된 항목의 value값(예제 1 option의 value에는 HTML 문서 주소가 적혀있다)을 이용해 그 HTML로 위치를 설정한다. 이렇듯 위치를 설정하면 선택된 항목의 주소로 직접 이동하는 것이다.
selectjump 함수를 언제, 어떻게 호출할까
이제 마지막으로 앞에서 작성한 함수를 연결시키는 일만 남았다. 어떤 방법이 가장 좋을까? 많은 방법이 있겠지만 보통 이런 경우 콤보박스 옆에 OK 버튼 등을 이용해서 콤보박스 설정을 마치고 이 버튼을 눌렀을 때 분기가 되게 해준다. 여기서도 이런 방식을 사용하겠다. 다음의 한 줄짜리 소스 코드를 소스 코드 부분 중에서 </select>와 </form> 태그 사이에 끼워 넣는다.
<input TYPE="BUTTON" VALUE="분기">
위의 코드를 보면 알겠지만, 분기라는 이름을 갖은 버튼이 생성됐고, 이 버튼을 클릭했을 때 비로소 selectjump 함수를 실행한다. 이때 this.form은 현재 홈페이지를 말하고 실제 selectjump() 함수의 원형에서 파라미터로 사용한다. 이제 콤보박스를 이용한 직접 이동이 가능할 것이다.
(리스트 1)은 예제의 전체 소스 코드고, 이에 대한 실습은 http://opera.cse.cau.ac.kr/~csucom/sel.html에서 해볼 수 있다.
(리스트 1) 리스트박스 예제
<html>
<head>
<title>SELECT 예제</title>
<script>
<!--
function selectjump(para)
{
var selnum=para.dest.selectedIndex;
location=para.dest.options[selnum].value;
}
//-->
</script>
</head>
<body background="csu1.gif">
<center>
<p>
<font color=#bb3377 size=6>
SELECT를 이용한 링크 예제
</font>
<pre>
</pre>
<p><font color=#223377 size=4>
아래의 콤보 박스에서 원하는 것을 고르고 분기 버튼을 눌러주세요.
</font>
<p>
<form>
<select NAME="dest" SIZE=1>
<option VALUE="index.html">성욱이의 홈페이지 초기 화면
<option VALUE="java/csu.html">성욱이의 모험 게임
<option VALUE="index1.html">성욱이 소개
<option VALUE="lover.html">미옥이 소개
<option VALUE="comlec.html">성욱이의 컴퓨터 강좌
</select>
<input TYPE="BUTTON" VALUE="분기">
</form>
<img src="CJIMAGE.JPG">
<p>
<a href="jvscrpt.html"> 이전화면으로 복귀 </a>
</center>
</body>
</html>
프로젝트 2. 상태바에 오늘 날짜와 현재 시각을 표기하자
어떤 홈페이지를 방문해보면 화면에 오늘 날짜나 시계 등이 있는 것을 종종 볼 수 있다. 이런 기법은 무척 간단함에도 불구하고 잘 만들었다는 느낌을 갖게 한다. 특히 이러한 것은 방문자에게 정보를 주므로 편리함과 더불어 좋은 인상을 주게 돼서 여러모로 좋다. 이제부터 날짜와 현재 시각을 홈페이지에 구현하는 기법에 대해 알아보자.
날짜와 현재 시각을 알아내는 루틴을 만들자
자바스크립트를 사용하면 이미 내장돼 있는 관련 함수를 이용해 오늘의 날짜와 현재 시각을 손쉽게 알아낼 수 있다. 다음 코드가 바로 관련 함수를 이용해 날짜와 현재 시각을 알아내는 자바스크립트 루틴으로, 이것을 <HEAD>와 </HEAD> 태그 사이에 삽입하되 </TITLE> 다음에 삽입한다.
(예제 2) 날짜와 현재 시각을 알아내는 소스
<script language="JavaScript">
<!--
//현재 날짜와 시간을 보여주기 위한 스크립트
function timebar()
{
// 오늘을 가리키는 today라는 날짜 변수를 선언하고 년, 월, 일, 시간을
// 얻어서 스트링 변수인 nowtime에 차례로 저장한다.
var today = new Date()
var nowtime = 1900 + today.getYear() +"년 "
nowtime += today.getMonth()+1 + "월 "
nowtime += today.getDate() + "일"
nowtime += " " + today.getHours() + "시 "
nowtime += today.getMinutes() + "분 "
nowtime += today.getSeconds() + "초"
}
//-->
</script>
위의 주석을 보면 대강의 내용을 알 수 있을 것이다. 즉, 일단 날짜를 알아내기 위해 today변수를 선언하고 알아낸 정보를 차례로 nowtime 스트링 변수에 저장하는 것이다. getYear()함수는 연도의 마지막 두 자리(예를 들어 1998년인 경우, 98을)만을 넘겨주기 때문에 1900을 더했다. 참고로 위에서 사용된 자바스크립트 내장 함수 이름과 쓰임새는 (표 1)과 같다.
(표 1) 자바스크립트의 내장 함수
함수명 쓰임새
getYear() 현재 연도를 되돌려 준다.
getMonth() 현재 월을 되돌려 준다.
getDate() 현재 일을 되돌려 준다.
getHourse() 현재 시를 되돌려 준다.
getMinutes(0 현재 분을 되돌려 준다.
getSeconds() 현재 초를 되돌려 준다.
timebar() 함수를 연결시키자
timebar() 함수를 실제로 호출해야 한다. 이것은 <BODY> 태그에서 onLoad 옵션을 이용해 간단히 구현할 수 있다. HTML 문서의 <BODY> 태그를 다음과 같이 고친다. 단지 onLoad 부분만 추가하면 되는데, onLoad 옵션은 이 HTML 문서가 처음 불리워 질 때 자동으로 수행할 함수를 지정하는 것이다.
<body>
이제 상태바에 오늘 날짜와 시계를 띄우자
앞에서 작성한 timebar() 함수는 날짜와 시간을 계산할 뿐 아직 출력하지는 않는다. 앞의 소스에서 nowtime 스트링 변수에 현재 날짜와 시간이 들어있는 것을 볼 수 있는데, 단지 이것을 상태바에 써주기만 하면 된다.
이것이 다는 아니다. 왜냐하면 timebar() 함수는 처음 HTML 문서를 불러올 때 <BODY> 태그 onLoad 부분의 호출로 인해 한 번밖에 수행되지 않기 때문이다. 따라서 주기적으로 timebar() 함수를 계속 호출해야 하는데 타이머를 이용해 해결할 수 있다. 앞의 timebar() 함수 바로 앞에 다음과 같은 타이머 변수를 선언한다.
// 타이머 변수 선언
var timer
그리고 timebar() 함수의 '}'전의 가장 마지막 부분에 다음과 같은 출력 부분과 타이머로 인한 재호출 루틴을 추가한다.
// 저장한 변수를 윈도우의 하단에 출력한다.
window.status = nowtime
// 함수를 1초마다 호출함으로써 1초마다 시간을 갱신한다.
timer = setTimeout("timebar()", 1000)
위의 소스를 보면 알 수 있겠지만 window.status에 단순히 스트링 변수를 대입하면 웹브라우저 상태바에 해당 변수 내용이 나타나고, setTimer() 함수는 첫번째 인자에 호출할 함수 이름을 넣어주고, 두번째 인자에는 얼마나 자주 호출할지를 넣어주면 된다. 여기에서의 단위는 ms(1/1000초 단위)다.
이제 브라우저에서 HTML 문서를 호출하면 브라우저 상태바에 날짜와 시간이 찍히게 된다. 전체 소스는 프로젝트 3과 함께 소개하겠다. 상태바를 보면 날짜와 시간이 찍혀 있는 것을 볼 수 있다.
프로젝트 3. 클라이언트의 웹브라우저 정보를 알아내자
간혹 자바스크립팅 기법을 쓰다보면 어떤 웹브라우저에서는 제대로 동작하지만 어떤 웹브라우저에서는 잘 동작하지 않거나, 전혀 엉뚱한 결과를 보여주는 경우가 있다. 그렇기 때문에 잘 쓰이지는 않지만 사용자가 현재 HTML 문서를 불러오는 클라이언트 웹브라우저 정보를 알아야 할 필요가 종종 있다.
일단 화면에 현재 클라이언트 정보를 알아내자
브라우저 정보를 얻는 것은 무척 쉽다. 단지 날짜나 시간을 알아내는 자바스크립트 함수를 쓰는 것처럼 단순히 브라우저 정보를 알아내는 자바스크립트 상수를 사용하면 된다. 다음의 소스 코드를 보면서 이해하기 바란다.
<script language="JavaScript">
<!--
// 클라이언트 브라우저 정보를 얻어내기 위한 스크립트
// 브라우저 이름과 버전 사용자 에이전트를 얻는다.
var name = navigator.appName
var ver = navigator.appVersion
var user = navigator.userAgent
//-->
</script>
위의 소스를 보면 알겠지만, 특정 변수에 이미 그 내용이 저장돼 있다. 위에서 단순히 name, ver, user 변수에 기존에 저장돼 있는 변수를 할당하기만 하면 된다. 자바스크립트에서 이미 브라우저 정보를 체크해 특정 변수에 내용을 넣어둔 것이다. 다음 (표 2)를 참고하길 바란다.
(표 2) 브라우저 정보를 체크하는 데 쓰이는 변수
변수명 내용
navigator.appName 브라우저 이름
navigator.appVersion 브라우저 버전
navigattor.userAgent 브라우저 사용자 에이전트
브라우저 정보를 화면에 출력하자
이제 위의 소스 코드에 있는 name, ver, user 변수를 써주기만 하면 되는데, 어떻게 하면 좋을까? 자바스크립트 함수를 만들어도 좋지만, 이 정도의 내용은 그냥 <BODY>와 </BODY> 태그 사이에서 해결하면 좋다. <BODY>와 </BODY> 사이의 찍고 싶은 부분에 다음 소스 코드를 추가해보기 바란다.
<script language="JavaScript">
<!--
document.write(name)
document.write("<br>")
document.write(ver)
document.write("<br>")
document.write(user)
//-->
</script>
document.write() 함수는 현재 HTML 문서에 상수의 내용을 써주는 역할을 한다. 이렇게 함으로써 HTML 문서 내용을 동적으로 변경시킬 수 있다. 따옴표를 써주고 그 안에 내용을 써주면 그 내용이 그대로 HTML 문서로 변경된다.
화면에 현재의 클라이언트 브라우저 정보를 출력하고, 더불어 프로젝트 2에서 구현했던 상태바에 현재 날짜와 시간을 표기하는 것을 함께 구현한 이 예제에 대한 실습은 http://opera.cse.cau.ac.kr/~csucom/datetime.html에서 해볼 수 있다.
[월간 인터넷]