민 윤 정, 다음커뮤니케이션
Prologue : Intranet,Intranet,Intranet...
자바 스크립트를 알면 동적인 인터페이스가 보인다.
현재,미래, 그리고 전망 |
최근 인터넷 관련업체들이 발표하는 인트라넷 전략, 혹은 개발전략 들을 살펴보면 기업의 업무를 웹상에서 처리할 수 있도록하는 일종의 '기존 그룹웨어의 웹화' 뿐만 아니라 모든 어플리케이션, 시스템 management, db access및 관리 를 웹상에서 가능하도록 하는 솔루션들을 지향하고 있음을 알 수 있다.
현재 국내에서도 많은 업체들이 발표하고 상용화되고 있는 인트라넷용 어플리케이션은 기존의 그룹웨어가 담당했던 일들을 웹상에서 하이퍼링크의 클릭처럼 간단한 인터페이스하에서 가능하도록 만든 어플리케이션들이 대부분이다.
혹자는 이에 대해 진정한 의미의 인트라넷에 부합되는 솔루션이 아니라고 단정짓는다. 그러나 인트라넷의 진정한 개념이 무엇이든지 간에 중요한 것은 end-user가 사용하기 쉬운 인터페이스를 가진 웹을 통해 모든 MIS, communication도구들이 실현되고 이전의 주요했던 분야들, DB 관리나 시스템 management와 같은 일들까지 웹을 통해 구현되고 있다는 현실이다. 이러한 추세는 더욱더 가속화될 전망이며 바로 지금도 많은 프로그래머들에 의해 실현되고 있다.
이러한 추세로 볼때 인트라넷용 어플리케이션 혹은 인트라넷의 인터페이스는 end-user가 할 수 있는 일들을 확대하며 좀 더 쉽게 접근할 수 있는 방향으로 구현되어야 한다. 이러한 인터페이스는 인트라넷을 구축한 기업들로 하여금 업무형태 변화에 적응하는 시간을 단축하고, 교육비용을 감소시키며, 장기적인 전망속에서 인트라넷 구축을 성공시키는 중요한 역할을 할 것이기 때문이다. 따라서 본고에서는 보다 interactive하고 쉽고, 동적인 인터페이스를 구축할 수 있는 테크닉을 소개하고자 한다.
본고에서 중점적으로 소개하고자 하는 자바스크립트는 넷스케잎사에서 개발한 스크립트 언어이다. 최근 Internet Explorer 3.0의 발표로 한때 넷스케잎의 독주를 주춤하게 만들었던 MS사에서는 JScript 라는 이름으로 이 언어를 지원하고 있으며 대부분의 브라우저들이 자바스크립트 엔진을 내장해, 이 언어를 지원하고 있다. 더 나아가 넷스케잎사에서는 이 언어와 자바애플릿, plug_in, cgi프로그램들과 연결시켜 보다 동적인 인터페이스를 구현할 수 있는 기술인 LiveConnect 기술을 발표하고 있다. 넷스케잎사의 새로운 제품군에서는 DataBase와 연결시킬 수 있고 서버쪽 프로그래밍을 할 수 있는 server-side JavaScript를 지원하고 있다. 물론 이러한 움직임은 MS의 ActiveX에 대한 대응으로 볼 수도있다.
그러나 양대 진영으로 구분되는 MS와 Netscape은 수요자의 필요에 의해서겠지만 자바스크립트나 Active X,Visual Basic Script등을 지원하는 브라우저, 서버, 테크닉을 발표하고 있다. 어떤 기술을 선택하는 것이 올바른 선택인가는 자신이 개발하는 환경, 혹은 이용해야 할 대상의 환경에 따라 달라질 수도 있을 것이다.
2. 왜 자바스크립트인가?
자바스크립트는 platform에 independent하다.
간단하고 쉽다.
동적이다.
객체지향적이다.
다음은 CGI프로그램과 자바스크립트의 실행시간을 도식적으로 비교한 자료이다.
결과적으로 모든 처리를 자바스크립트로 한다는 일은 처리시간의 효율을 떨어뜨릴 수도 있다. 그러나 실제로 서버와의 communication이 반드시 필요한 동작은 존재할 것이며, 그럴 경우에는 다른 방법을 찾아야만 할 것이다. 그러나 client-side JavaScript는 작은 코드만으로 복잡한 cgi로서 구현해야만 했던 일들을 가능하게 해준다. 따라서 적절하게 사용한다면 처리시간의 효율을 높일 수 있을 것이다. 다음은 미리보기의 예이다.
만약 같은 동작을 cgi프로그램만으로 해결했더라면 cgi는 매번 textarea의 값이 변할때마다 name-value형식의 parameter들을 읽고, 제목과 기본버튼값이 들어있는 화일을 열고, parsing하며, 해당 parameter들을 삽입해 출력해야만 한다. 이 경우 자바스크립트로 해결할 경우 매번 서버에 억세스할 필요없이 처음 html을 불러올때 읽어들인 포맷에 변하는 값을 삽입하므로 처리시간을 단축할 수 있다.
3. 자바 스크립트를 알면 동적인 인터페이스가 보인다.
자바스크립트의 기본 구문
자, 그렇다면 자바 스크립트는 어떻게 사용할 수 있는가?
다음은 가장 간단한 "Hello! JavaScript"를 출력하는 html문서이다.
예제1- hello JavaScript
source
실행된 모습
또한 navigator 3.0에서는 자바스크립트소스를 별도의 화일로 구성하고 이를 불러올 수 있는 기능을 첨가했다.
같은 결과를 얻을 수 있는 구문은 다음과 같다.
<html>
<body>
< script src="hello.js" >
<!--
// -->
...
예에서 hello.js화일에는 다음과 같이 넣으면 된다.
document.clear();
document.write("Hello! JavaScript");
위의 예에서 document 라는 object는 미리 정의된 것으로 현재 문서를 가리킨다. 이와 마찬가지로 자바스크립트로 다룰 수 있는 object들은 다음과 같이 hierachical 구조를 갖는다.
window
|
+--parent, frames, self, top : 상위,프레임,자기자신,프레임의 탑
| 등을 나타냄
|
+--location : 브라우저의 URL을 나타냄
|
+--history : user가 읽었던 문서의 url을 기억, back,
| go,forward 의 method를 갖는다.
|
+--document
|
+--forms
| |
| +---- elements (text fields, textarea, checkbox, password
| radio, select, button, submit, reset)
+--links
|
+--anchors
앞서 살펴본 예제에서 dicument.write("Hello! JavaScirpt"); 라는 명령문은 this라는 client object 가 생략된 형태이다. 즉 현재 활성화된 네비게이터 윈도우의 문서에 내용을 쓰라는 명령문인것이다. write란 document object 가 가질 수 있는 method의 예이다.
다음은 document의 bgcolor라는 속성을 이용한 예제이다.
예제 - dark.html
<html>
<head>
<title> Neofox's JavaScript </title>
<script language="JavaScript">
<!--
function dark() {
document.clear();
document.bgColor="#000000";
}
function bright() {
document.clear();
document.bgColor="#ffffff";
}
function origin() {
document.clear();
document.bgColor="#cccccc";
}
//-->
</script>
<body bgcolor="#cccccc" text="#000099" vlink="#00ffff" >
<a href="destination_path" onMouseOver="dark(); window.status='배경색을 어둡게..'; return true;" onMouseOut="origin(); window.status='원래 색으로...'; return true;">
어두운게 좋아!</a><p>
<a href="destination_path" onMouseOver="bright(); window.status='배경색을 밝게..'; return true;" onMouseOut="origin(); window.status='원래 색으로..'; return true;">
불 켜!</a>
</body>
</html>
실행예
(예제중 onMouseOut이라는 event handler는 netscape의 navigator3.0 에서만 지원함.)
위의 예에서 각각의 function들은 현재 문서의 배경색을 어둡게, 밝게, 또한 원래의 회색바탕으로 하는 역할을 한다. 이러한 function들이 불리워지는 과정을 주목해보자. <a href 는 link를 생성하는 html의 고유한 tag이다. 이 태그에 onMouseOver, onMouseOut 이라는 속성이 추가되었는데 이 속성들은 user의 어떤 행위에 따라 정해진 자바스크립트 코드를 call 한다. 이러한 역할을 하는 속성들을 event-handler라고 한다.
자바스크립트는 이와 같이 이벤트 핸들러에 의해서 불려져 수행되거나 예제1 hello JavaScript에서처럼 직접 본문내용중 수행되기도 한다.
| 이벤트 핸들러 | 적용되는 object |
| � onAbort (3.0 확장판) | image |
| � onBlur | select, text, textarea |
| � onChange | select, text, textarea |
| � onClick | button, checkbox, radio, link, reset, submit |
| � onError (3.0 확장판) | Image ,Window |
| � onFocus | window,frames(이전버전은 text,textarea의 이벤트핸들러였으나 3.0 버전부터 변화) |
| � onLoad | image(이전버전은 body태그의 이벤트 핸들러였음) |
| � onMouseOut (3.0확장판) | area, link |
| � onMouseOver | area,link |
| � onReset (3.0확장판) | form |
| � onSelect | text, textarea, select |
| � onSubmit | form |
| � onUnload (3.0 확장판) | window |
dark(); window.status='배경색을 어둡게..'; return true;
이중 dark();는 html의 head부분에 선언된 function의 이름임을 알 수 있다. 또 window.status는 window object의 status라는 속성값을 변화시킨다. 즉 현재 브라우저의 윈도우 아랫부분에 '배경색을 어둡게'라는 말이 나타나게 하며 return true는 window의 status를 변화시킨 행위에 true값을 반환한다. 따라서 이벤트핸들러는 복수의 자바스크립트 코드를 call 할 수 있으며, 이미 선언된 함수이거나 코드가 직접 불릴 수 있다.
다시 미리보기의 예제를 살펴보자.
여기서 변하는 값인 글제목과 글내용을 setting 시켜주는 function을 살펴보자.
function SetVar()
{
szSubj = document.Neofox.SUBJECT.value;
szContent = document.Neofox.CONTENT.value;
return true;
}
이 예에서 보듯이 document.Neofox.SUBJECT란 구조는 현재문서를 가리키는 object인 document에는 Neofox라는 이름을 가진 form문이 존재한다.
(<form> 태그부분을 보라..) 이 form문에 textfield의 이름이 SUBJECT,CONTENT이다. 즉 document.Neofox.SUBJECT.value라는 값은
현재 문서의 Neofox라는 이름을 갖는 객체의 SUBJECT 필드의 value를 가리킨다. 따라서 사용자가 입력한 값이 변화하면 변화된 값이 나타남을 알 수 있다.
또 이 예제에서는 date 라는 객체를 사용하고 있는데 이는 자바스크립트언어에서 기본으로 제공하고 있는 객체이다. 시간과 날짜를 알 수 있는 이 객체이외에도
미리 선언된 객체들로 유용한 것은 Meth와 String 객체들이 있다.
이제 다른 창을 띄우는 부분을 살펴보자. 미리보기 버튼을 누르면 onClick 이벤트핸들러에 의해 call 되는 함수는 다음 부분이다.
1: function OpenPreview()
2: {
3: previewWin =
4: window.open("","previewWin","scrollbars=yes,toolbar=no,width=575,
height=400,status=yes"); // Open할 윈도우의 속성지정
5: previewWin.document.clear();
중략 ...
6: previewWin.document.write("<I>"+today.getYear()+"년 ");
7: previewWin.document.write(today.getMonth()+"월"+
today.getDate()+"일 ");
8: previewWin.document.write(today.getHours()+":"+
today.getMinutes()+":");
9: previewWin.document.write(today.getSeconds()+"<
/I>\n</TD></TR>");
-----+ 함수들을 이용해 날짜를 얻어오고 이를 출력하는 부분.
중략...
10: previewWin.document.write(szContent);
// 앞서 셋팅된 변수값을 출력.
중략 ...
}
윈도우를 새로 열고자 할때에는 윈도우에 띄울 문서의 URL, 윈도우이름, 윈도우속성을 지정해주면 된다. 위의 예 4행에서 보면 prviewWin이라는 이름의 윈도우에 5행의 내용과 같은 윈도우속성을 갖는 윈도우를 생성한다. 브라우저의 새창이 띄워지고 toolbar는 생기지 않음을 알 수 있다. 이 때 사용할 수 있는 속성으로는
toolbar[=yes|no]|[=1|0] //기능버튼들을 나타냄 location[=yes|no]|[=1|0] // 문서의 URL을 나타내는 부분 directories[=yes|no]|[=1|0] // 네비게이터의 디렉토리 버튼 status[=yes|no]|[=1|0] //status부분 menubar[=yes|no]|[=1|0] // menubar부분 scrollbars[=yes|no]|[=1|0] //스크롤바부분 resizable[=yes|no]|[=1|0] //늘이거나 줄일 수 있는지 여부 width=pixels height=pixels등이 있다.
여기서 자바스크립트에서 쓰이는 변수는 특정 타입을 갖지 않는다. 그저 변수의 선언과 할당만으로 변수가 선언된다. 위의 예에서 다른 function에서 선언되어 셋팅된 값이 그대로 출력되는 결과를 볼 수 있다. 기본적으로 변수들은 global로 선언이 된다. 만약 처리 루틴안에 같은 같은 이름을 같는 변수가 있어서 다른 값으로 셋팅되면 변수의 값은 변하게 된다. 이런 결과를 피하기 위해 한 function내에서만 그 값을 변화시키고 그 변화된 값이 다른 function에서는 영향을 미치지 않도록 하기 위해서는 (다른 말로 static한 변수를 선언하기 위해서는 ) 다음과 같이 하면 된다.
Name =1;
function Func1() {
var Name;
Name =5;
}
function FuncDisplay() {
document.write(Name);
}
이와 같은 경우 Func1에 선언된 변수 Name의 값의 변화는 다른 function이나 이 function의 외부에 영향을 미치지 않는다. 즉 출력되는 값은 1이지 5가 아니다.
예제 - 버튼 도움말
다음은 간단한 학점계산기를 구현한 사이트이다. 각 과목의 학점과 학점을 입력하면 합계와 평점을 산출할 수 있다. 자바스크립트만으로 간단한 계산기를 구현할 수 있음을 보여준다. 각각은 text 필드의 값이 변할때마다 onChage라는 이벤트핸들러를 이용해 자바스크립트 function을 call 함을 볼 수 있다.
어떤 항목을 삭제하고자 할때 정말로 삭제할 것인지를 묻는 페이지를 만들수도 있다.
다음은 cgi프로그램과 결합되어 삭제확인을 행하는 예제이다. 삭제확인2
(단, 이 예제에서는 삭제할 항목을 선택했을때 onClick이라는 이벤트핸들러로 삭제할 항목의 글번호를 SetMsg라는 function에 넘겨준다. 이 값들이 global변수인 myURL이라는 변수에 셋팅되어 Delete.cgi라는 cgi 프로그램에 전달된다. 즉, Delete.cgi?Object=1&Object=2... 라는 형식으로.. 이 예에서는 이 cgi가 존재하지 않으므로 실행되지 않음.) 이처럼 자바스크립트는 cgi프로그램과 결합되어 사용될 수 있다. 이 때 주의해야 할 점은 실행순서로서 cgi가 실행되어 어떤 문서를 뿌려주면 그 문서내의 자바스크립트는 그 문서가 다 불려진 후 이벤트핸들러나 문서내용중 직접 call 될 때 실행된다는 점이다.
1. img 태그의 width와 height 를 생략할 경우
2. form과 table에 nested되었을 경우
계층구조를 살펴보아 중첩을 피해야함
4. 현재,미래, 그리고 전망
JavaScript,Java,Plug_in..
앞서 살펴본 자바스크립트는 클라이언트에서 주로 html구문의 요소들을 이용해 interactive한 요소들을 만드는 예제들을 통하여 자바스크립트의 사용방법을 익혔다.
최근 넷스케잎에서 발표한 브라우저 3.0은 자바 애플릿과 플러그인 프로그램과 자바스크립트를 함께 사용할 수 있도록 하는 기술인 LiveConnet를 구현하고 있다.
물론 기타 넷스케잎 제품군, 서버에서는 API지원을 통해 그 범위를 보다 확대할 수 있지만 html의 약간의 변화만으로도 애플릿의 값을 자바스크립의 이벤트핸들러를 통해
바꾸거나 update하는 일이 가능해졌다.
다음은 그 예이다.
이 예제에서 보듯이 자바애플릿을 call하는 방법은
document.appletName
document.applet["appletName"]
document.applet[0](name을 특별히 정해주지 않았을 경우 사용이 가능하다.)
이렇게 3가지 방법이 있다.
배열의 순서는 처음에 선언된 애플릿으로부터 0,1,2,3... 순서로 이루어지며, appletName은 <applet>태그에서 name을 통해 정해준 함수이다. 위의 예에서는
colorApp.
이와 같이 자바애플릿을 자바스크립트에서 객체로 다룰 수 있다. 이렇게 선언된 객체는 자바 내부에서 선언된 method function들을 사용할 수 있게 된다.
즉 예제에서와 마찬가지로 ,
document.appletName.start();
document.appletName.stop();
처럼 사용할 수 있다.
이처럼 자바스크립트에서 사용하기 위해서는 자바소스에서 다음과 같이 선언되어 있을 것이다.
플러그인 또한 자바 스크립트와 communication이 가능해졌다.
플러그인 을 해당 문서로 불러들이기 위해 우리는 일반적으로 <embed> tag를 사용해 왔다.
이 태그에 name=plugin_name을 이용해 자바애플릿과 마찬가지로 자바스크립트에서 플러그인을 제어할 수 있도록 할 수 있다.
document.embeds.avi_object
document.embeds["avi_object"]
document.embeds[0]
또한 사용자가 현재 사용하고 있는 브라우저가 해당 플러그인을 볼 수 있는지 없는지에 대한 체크를 가능하게 해주는 객체도 제공되고 있다. 바로 plugins와
mime이 그런 역할을 가능하게 해준다.
다음은 그 예제이다.
이 예제는 shockwave가 설치되어 director화일을 볼 수 있는지 없는지를 확인해준다. 즉 navigator객체의 plugins["Name"]이라는 객체는 설치되어 있다면 true값을 아니라면 false 값을 반환한다. 만약 plug_in의 정확한 이름을 모른다면 해당화일의 mimetype을 체크할 수도 있다.다음은 그 예제이다.
mimeTypes라는 객체가 가질수 있는 속성은 다음과 같다.
넷스케잎사에서는 이러한 상호연결의 기술들을 LiveConnect라는 명칭으로 발표하고 있다. 이의 성공여부,혹은 상용화될지의
여부에 대해서는 어느누구도 장담할 수 없을 것이다. 그러나 사용자의 다양한 형태의 action에 따라 자신의 애플릿을 변화시키거나 plug_in
을 제어한다는 일은 분명 매력적인 일이다. 또한 많은 사이트들이 이미 netscape3.0용으로 발표하고 있는 페이지들은 이 기술을 활용하고 있다.
주로 활용분야는 form의 submit 버튼 , 혹은 text 필드의 변화에 따라 애플릿의 형태가 변하는 분야이다. 예를들어,
매분기 매출전표를 web 프로그램으로 작성한다고 해보자. 매출액을 계산하는 것은 자바스크립트만으로도 충분히 수행할 수 있을 것이다.
그러나 이 매출전표의 매월 그래프를 나타낸다고 하자. 애플릿의 값을 매출액의 요소를 변화시킬때마다 변화시켜주는 일이 필요할 것이다.
새로운 애플릿을 불러오는 시간과 깜빡거림 없이 갱신하는데 이 기술은 상당히 유용할 것이다.
programming 언어로서의 자바스크립트
넷스케잎의 최근 제품군(서버, api, class들)에서는 server-side자바 스크립트를 지원한다고 발표하고 있다. 이는 실제로 서버에서 Database와 연결을
하고 그 값을 클라이언트로 보내주는 일이 가장 큰 특징으로 꼽히고 있다. 실제 사용방법은 클라이언트-사이드 와 마찬가지로 html내부에 선언하여 사용할
수 있다.