1	js and vb
2	HIDEFOCUS
3	Filters and Transitions Master Sample
4	이미지 크기 제어
5	Script Encoding Sample
6	미디어플레이어오브젝트들..
7	스크립트를 이용하여 버퍼링시 플래시 보여주기
8	ASX 파일의 활용
9	초보자를 위한 Media Server 세팅
10	초보자를 위한 Encoder7 세팅
11	Windows Media Encoder7 완전해부 3
12	Windows Media Encoder7 완전해부 2
13	Windows Media Encoder7 완전해부 1
14	ASF 파일에 직접 자막 삽입하기
15	미디어 플레이어에서 버퍼링시 플래시 보여주기
16	미디어 플레이어에서 버퍼링시 이미지 보여주기
17	웹페이지에 미디어 플레이어 삽입시키기
18	Window media Load simulator
19	VOD와 파워포인트를 연동한 방송
20	Windows Media ASF Indexer
21	[펌] 그녀를 믿지☆마세요△앙큼상큼 지혜 'ㅡ'v
22	HTC 사용하기
23	showModelessDialog Method
24	[펌] 정규표현식
25	팝업에서 opener변경하기
26	숫자 세자리마다 콤마찍기
27	HTML 태그표
28	표(table) 필드 정열(소트)시키기
29	NS, IE 공용 다이나믹 스크롤러
30	프레임 리사이즈
31	스크립트 암호화 하기
32	랜덤으로 비밀번호를 생성시켜주는 스크립트
33	JScript - 문서내에 간단하게 팝업 윈도우 넣기
34	문서가 프레임을 벗어나면 다시 프레임에 가두어 줍니다 .
35	버튼 클릭으로 프레임의 크기를 조절합니다
36	클릭하면 현재 작엊중인 윈도우를 최소화 시켜 줍니다
37	현재 윈도우의 크기를 최대로 키워 줍니다
38	윈도우의 위치와 크기를 자동으로 저정합니다
39	간단하게 테두리, 스크롤바 없는 팝업창을 열어줍니다
40	라디오버튼 제어
41	윈도 미디어 플레이어 버젼 체크하는 스크립트가 어떻게 되나요?
42	MRTG 사이트
43	[펌] 파일 전송 전에 파일 사이즈 체크하기
44	앨범 이미지 슬라이드 쇼
45	미디어 오른쪽 버튼막기
46	아이프레임으로 안의 문서 움직이기
47	마우스 오른쪽 버튼, 텍스트 드래그기능 간단하게 잠그기
48	지오피아 채팅방에서 사용하는 특정한 아이디 입장 불가
49	쿠키를 이용한 로그인 페이지 만들기
50	줌, 프린트 기능까지 있는 오른쪽 버튼 메뉴
51	참한 색상코드 선택기
52	특정 이메일 주소 입력을 금지합니다
53	프레임 리사이즈 스크립트
54	입력상자의 자동완성 기능 해제시키기
55	이미지 스크롤러2 (세이)
56	이미지 스크롤러
57	DHTML 속도 향상을 위한 몇 가지 팁
58	ie 6.0 이미지저장탭안나오게 하는법
59	리턴[return]문을 조금 정리해 보았습니다.
60	폼필드에 바로 한글로 입력한다.
61	Ctrl + N방지
62	ShowModalDialog로 띄운 페이지에 대한 접근
63	주민번호/사업자/재외국인체크
64	이메일 정규식
65	문자형 > 숫자형으로 바꾸기
66	윈도 미디어 플레이어 버젼 체크하는 스크립트가 어떻게 되나요?
67	웹서버에 시간을 읽어서 asp페이지상에 실시간으로 보여주는 방법
68	휴대전화 정규식2
69	휴대전화 정규식
70	아이프레임안에 innerHtml < iframe value
71	스크롤바를 이미지로 만들자
72	특정 부분만 인쇄
73	event.keyCode 숫자표
74	유연한 폼 검사기
75	출력에 관련된 자바 스크립트
76	iframe 내용에 맞게 자동으로 크기 조절해주기(IE)
77	아이프레임을 내용에 따라 크기(폭,높이) 바꿔주는 스크립트 #2
78	F5를 눌렀을때 현재 페이지를 새로고침 - 프레임용
79	몇가지 유효성검사 스크립트모음
80	File 버튼 이미지로 바꾸기
81	폼 탭으로 넘기는 순서
82	한글을 2바이트로 계산하는 Len Left, Mid
83	URL Encode Sciprt
84	자바스크립트로 만든 trim 함수
85	서버와 클라이언트 간에 데이터 바인딩
86	img 태그를 이용한 여러가지 테러... -_-;;
87	Ctrl + f 와 같은 텍스트 검색
88	MSN 등록하거나 메시지 보내는 스크립트
89	DHTML로 게시판 목록의 말줄임표(...)구현하기
90	원하는 위치에서 부드럽게 아래위로 스크롤 되는 배너
91	메뉴설명이가능한 메뉴를 이용한하위메뉴링크
92	IMG사용시 이미지가 없으면 나오는 X대신 다른이미지넣기
93	핫키페이지이동 간단한거
94	HTC를 활용한 링크 포커스 없애기(한번에 점선없애기)
95	테이블의 글길이가 길경우 강제로 줄바꾸기
96	copyright 날짜를 자동으로 업데이트시켜주는 스크립트
97	F5, F11 막기
98	숫자만 입력받기 , 한글입력노, 등등..
99	Target 쓰는 방법
100	WingDings 와 WebDings
101	새창 가운데로 뜨기
102	텍스트 인코더 / 디코더
103	오른쪽마우스 못쓰게 하기
104	윈도 크기 새창 안열고 바로 익스 크기 변경시켜주는 스크립트
105	META 태그 설명

reverse proxy

Reverse Proxy란 외부 사용자들이 접근이 불가능한 내부의 TCP/IP 서버를 접속할 수 있도록 하는 Proxy 서버 구성 방법입니다. 여기서 TCP/IP 서버는 MS Exchange 서버와 같은 메일 서버 FTP 서버, Telnet 서버 등의 공용서버를 말합니다. 이것을 이용하면 내부의 서버는 Proxy 서버를 통해서 공개하므로 안전하게 내부 서버를 인터넷 사용자에게 공개할 수 있게 됩니다.

자바스크립트 객체와 이벤트

---

1. 자바스크립트 객체의 개요

자바스크립트 객체의 계층 구조

자바스크립트 코드를 지원하는 웹 브라우저는 HTML페이지를 로드할 때 그 페이지에 존재하는 요소들을 반영하는 자바스크립트 객체를 생성한다.

HTML 페이지의 내용에 관계없이 한 페이지가 로드될 때 처음으로 5개의 자바스크립트 객체가 존재한다.

• navigator
• window
• document
• History
• Location

자바스크립트 객체들의 개요

객체이름	설명
window	윈도우마다 하나씩 존재하는 객체로서 윈도우 내에 존재하는 모든 객체의 상위 객체이다.
Frame	프레임마다 하나씩 존재하는 윈도우 객체. 즉 <frame>태그에 의해 정의된다.
document	HTML 페이지마다 하나씩 존재하는 객체로서 HTML문서의 내용에 관한 정보를 가진다.
Location	현재 로드된 HTML 페이지의 URL에 관한 정보를 가진다.
History	현재 윈도우에서 사용자가 방문하였던 URL들의 리스트를 유지하는 객체이다.
navigator	현재 사용중인 브라우저의 이름과 버전 등에 관한 정보를 포함하는 객체이다.
Layer	DHTML에서 지원하는 객체로서 문서 내의 한 위치에 다수의 객체를 중첩할 때 사용하는 객체이다.
Link	HTML 문서 내의 링크를 표현하는 객체로서 <a href=....> 태그 당 하나의 객체가 자동 생성된다.
Image	HTML 문서 내의 이미지를 표현하는 객체로서 <img> 태그 당 하나의 객체가 자동 생성된다.
Area	HTML 문서 내의 이미지맵의 한 영역을 표현하는 객체로서 <area> 태그 당 하나의 객체가 자동 생성된다.
Anchor	HTML 문서 내의 앵커를 표현하는 객체로서 <a name=...> 태그 당 하나의 객체가 자동 생성된다.
Applet	애플릿을 표현하는 객체로서 <applet> 태그당 하나의 객체가 자동 생성된다.
MimeType	브라우저가 지원하는 마임(MIME) 타입에 대한 정보를 표현하는 객체로서 마임 타입 하나 당 하나의 객체가 자동 생성된다.
Plugin	브라우저에 설치된 프러그인에 대한 정보를 표현하는 객체로서 설치된 플러그인 당 하나의 객체가 자동 생성된다.
Form	폼에 대한 정보를 표현하는 객체로서 <form> 태그 당 하나의 객체가 자동 생성된다.
Text	<input type="text" > 태그 당 하나의 객체가 자동 생성된다.
Textarea	<textarea>태그 당 하나의 객체가 자동 생성된다.
Password	<input type="password" > 태그 당 하나의 객체가 자동 생성된다.
FileUpload	<input type="file" > 태그 당 하나의 객체가 자동 생성된다.
Radio	<input type="radio" > 태그 당 하나의 객체가 자동 생성된다.
Checkbox	<input type="checkbox" > 태그 당 하나의 객체가 자동 생성된다.
Button	<input type="button" > 태그 당 하나의 객체가 자동 생성된다.
Submit	<input type="submit" > 태그 당 하나의 객체가 자동 생성된다.
Reset	<input type="reset" > 태그 당 하나의 객체가 자동 생성된다.
Select	<select> 태그 당 하나의 객체가 자동 생성된다.
Option	<select> 태그 내의 옵션을 표현하는 객체로서 <option> 태그 당 하나의 객체가 자동 생성된다.
Hidden	<input type="hidden" > 태그 당 하나의 객체가 자동 생성된다.

　

　

HTML 태그와 자바스크립트 코드는 어떻게 처리되는가?

웹 브라우저가 HTML 페이지를 로드하고, 그 페이지에 존재하는 자바스크립트 프로그램을 실행하는 일반적인 과정.

1. 브라우저는 HTML 문서를 처음부터 읽어나간다.
2. 브라우저는 처음부터 필요한 5개의 자바스크립트 객체를 만든다.
3. <script> 태그를 처리한다.
4. 브라우저는 HTML 문서를 처리하면서 자바스크립트 객체를 생성한다.
5. 이벤트를 처리한다.

 

　

2. 이벤트와 이벤트 핸들러

이벤트는 브라우저의 사용자가 취한 액션을 의미한다. 즉 마우스 클릭이나 마우스 이동, 키보드 입력, 버튼 클릭 등의 행위를 의미한다. 이벤트는 브라우저에 의해 자바스크립트 코드에 전달된다. 이벤트 핸들러는 이벤트의 발생시 처리하기 위해 작성된 자바스크립트 코드이다. 이벤트 핸들러는 HTML문서를 작성하는 사람에 의해 작성된다. 만일, 버튼 객체에 마우스 클릭 즉 click 이벤트를 받아 처리하고자 한다면 onClick이라는 이벤트 핸들러에 자바스크립트 코드를 정의해 놓아야 한다.

(1) 이벤트와 이벤트가 발생하는 경우

이벤트 핸들러	이벤트가 발생하는 경우
onAbort	사용자가 이미지 로딩을 강제로 중단할 때
onBlur	윈도우,폼 구성 요소, 프레임이 포커스를 잃을 때
onChange	Select, Text, Textarea 객체의 필드 값을 변경한 후 포커스를 잃을 때
onClick	폼 구성 요소가 클릭될 때
onDblClick	폼 구성요소나 링크를 더블클릭할 때
ondragDrop	사용자가 한 객체(혹은 파일)를 브라우저 윈도우 상으로 드롭할 때
onError	문서나 이미지의 로딩시 오류가 발생할 때
onFocus	윈도우, 프레임, 프레임셋, 폼 요소가 포커스를 받을 때
onKeyDown	사용자가 키를 누를는 순간
onKeyPress	사용자가 키를 누른 채 유지하는 동안
onKeyUp	사용자가 누른 키를 놓는 순간
onLoad	브라우저 윈도우에 HTML 문서의 로딩직 후 혹은 프레임셋 문서의 모든 프레임의 로딩이 마칠 때
onMouseDown	사용자가 마우스를 누르는 순간
onMouseMove	사용자가 마우스를 움직일 때마다
onMouseOver	사용자가 마우스 커서를 이미지맵이나 링크 위에 올려 놓을 때
onMouseUp	사용자가 마우스 커서를 이미지맵이나 링크 위세서 내려 놓을 때
onMove	사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 위치가 이동될 때
onReset	사용자가 reset 버튼을 누를 때
onResize	사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 크기가 조절되는 순간
onSelect	사용자가 Text나 Textarea 객체의 필드 내의 텍스트 일부를 선택할 때
onSubmit	사용자가 submit 버튼을 누를 때
onUnload	사용자가 현재 HTML문서보기를 종료하고 다른 웹 사이트로 이동할 때

　

(2) 이벤트 처리의 특징

(가) 이벤트는 이벤트를 받는 객체에서 처리된다.

사용자에 의해 발생된 이벤트는 이벤트의 목적 객체에 해당하는 자바스크립트 객체에 전달된다. 예를 들어 사용자가 어떤 버튼을 클릭하였다면 click 이벤트가 그 버튼 객체에 전달되고 이때 이 버튼 객체에 정의된 onClick 핸들러에 의 해 처리된다. 그러나 만일 버튼 객체에 onClick 핸들러가 정의되어 있지 않다면 click 이벤트를 처리할 객체가 없어서 이벤트는 단순히 사라지고 만다.

(나) 이벤트 핸들러 설정은 마치 객체의 프로퍼티에 값을 쓰는 것같이 한다.

이벤트 핸들러를 정의하는 방법 중 하나로 다음과 같이 할 수 있다. window상에서 click이벤트가 발생하면 자바스크립트 함수 FuncClick 이 실행되게 하고자 한다면 다음과 같다.

window.onClick = FuncClick;

물론 이때 HTML 페이지를 만든 사람은 FuncClick이라는 자바스크립트 함수를 작성하여야 한다.

(다) 자바스크립트 객체마다 처리가능한 이벤트의 종류가 정해져 있다.

자바스크립트 객체마다 처리할 수 있는 이벤트의 종류가 정해져 있기 때문에 다른 이벤트는 처리할 수 없다. 물론 이벤트를 처리하기 위해서는 이벤트 핸들링을 위한 코드를 정의하여야 한다.

　

(3) 이벤트 핸들러 작성

이벤트 핸들러 코드는 일반적으로 다음과 같이 HTML 태그 내에 작성한다.

<HTML태그  이벤트핸들러="이벤트핸들링을 위한 자바스크립트코드">

(예)

<input ype="button" value="배경변경"  onClick="document.bgColor='blue'">

또는

<script>
        function  f(c)
        {
                document.bgColor = c;
        }
</script>

........

<input ype="button" value="배경변경"  onClick="f(blue)">

　

　

3. 이벤트 핸들링

(1) onAbort 핸들러

사용자가 이미지의 로딩을 중단할 때 호출되는 abort 이벤트의 핸들러이다. 현재 브라우저가 이미지를 로딩 중인 상황에서 링크를 클릭하여 다른 URL을 선택하거나 브라우저의 메뉴 중 Stop 버튼을 선택하였을 때 abort 이벤트가 발생한다.

* 대상객체 :  Image

(2) onBlur, onFocus 핸들러

이 두 핸들러는 포커스의 변경에 의해 발생하는 이벤트의 핸들러이다. 어떤 윈도우나 애플리케이션이 포커스를 받는다는 의미는 사용자의 입력 즉, 마우스 입력이나 키보드 입력을 받아들이는 상태임을 의미한다.

onBlur는 윈도우나 프레임, 폼 요소가 포커스를 잃을 때 호출되며, onFocus는 윈도우나 프레임, 프레임셋, 폼 요소가 포커스를 받을 때 호출된다.

* 대상객체 :  Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

* (예1) <body onBlur="document.bgColor='blue' onFocus="document.bgColor='red'">

* (예2) Text창에 어떤 문작 입력될 때까지 다른 일을 할 수 없게 하는 예

<script>
    function checkText(text)
    {
        if(text.value == "") {
            alert("input Name");
            text.focus();
        }
    }
</script>

<body onLoad="document.f.t.focus()">
<form name="f">
    이름<input type="text" name="t" value=""  onBlur="checkText(this)"><br>
    학번<input type="text" name="id">
</form>
</body>

(3) onChange 핸들러

Select, Text, Textarea 객체의 내용을 변경한 후 포커스를 잃을 때 호출된다. 예를 들면 Text 창의 내용을 변경한 후 Text 창 바깥의 다른 곳에 마우스를 클릭하였을 때 실행한다.

* 대상객체 :  FileUpload, Select, Text, Textarea

* (예) 4글자 이상 입력할 수 없는 Text창 만들기. Select 객체의 옵션이 변경되면 변경된 내용을 출력함.

<script>
    function check(text)
    {
        if(text.value.length > 3) {
            alert("maximum 3 letters");
            text.value = text.value.substring(0,3);
            text.focus();
        }
    }
    function checkSel(Sel)
    {
        alert("You selects " + Sel.options[Sel.selectedIndex].value);
    }
</script>

<body>
<form name="f">
    이름<input type="text" name="t" value=""  onChange="check(this)"><br>
    과일<select name="sel" onChange="checkSel(this)">
            <option value="사과">사과
            <option value="감">감
            <option value="배">배
         <select>
</form>
</body>

　

(4) onClick, onDblClick 핸들러

onClick는 폼 요소가 클릭되었을 때 호출되며 onDblClick은 폼 요소나 링크를 더블클릭하였을 때 호출된다. 이벤트 핸들러가 false를 리턴하면 이벤트 발생의 원래 의미가 취소된다.

* 대상객체 :  Button, document, Checkbox, Link, Radio, Reset, Submit

* (예1) 간단한 계산기(eval함수 이용)

<script>
    function compute(f)
    {
         var res = eval(f.exp.value);
         f.val.value = res;
    }
</script>

<body>
<form name="cal">
    식<input type="text" name="exp" value=""><br>
    값<input type="text" name="val" value="" size=10><br>
    <input type="button" value="계산" onClick="compute(this.form)">
</form>
</body>

* (예2) 브라우저 화면 상의 아무 위치에나 더블클릭하면 브라우저 윈도우의 크기가 20*20씩 증가함.

<script>
    function docDblClick(ev)
    {
         window.resizeBy(20, 20);
    }
    document.onDblClick=docDblClick;
</script>

<body>
</body>

　

(5) onError 핸들러

자바스크립트 문법 오류나 런타임 오류시, 혹은 <img> 태그에 지정된 이미지의 로딩시 이미지에 대한 URL이 잘못되었거나 이미지가 손상되었을 경우 onError 핸들러가 호출된다.

(6) onKeyDown, onKeyPress, onKeyUp 핸들러

onKeyDown은 사용자가 키를 누르는 순간, onKeyPress는 사용자가 키를 누른 이후 누르고 있는 동안 반복적으로 계속 호출하며, onKeyUp은 사용자가 누른 키를 놓을 때 호출된다. document객체는 문서에 발생하는 모든 종류의 키 입력에 대해 이벤트를 가로챌 수 있다. 

* 대상객체 :  document, Image, Link, Textarea

(7) onLoad 핸들러

onLoad 핸들러가 호출되는 경우는 윈도우 상에 문서의 로딩 완료 시점과 이미지의 로딩 완료 시점의 2가지이다. 

첫째는 브라우저가 윈도우의 로딩을 완전히 마친 후 곧장 호출되거나 <frameset> 태그 내의 모든 프레임의 로딩을 마칠 때 호출된다. 이 경우는 각각 <body onLoad=".....">나 <frameset onLoad=".....">로 핸들러를 지정한다.

두 번째 경우는 <img> 태그에 지정된 이미지나 Image 객체의 src 프로퍼티의 변경에 의해 이미지가 그려지는 경우 이미지의 화면 출력이 완료되는 시점에서 호출된다. 이때도 <img onLoad="...">형태로 핸들러를 지정한다.

* 대상객체 :  Image, Layer, window

(8) onMouseOver, onMouseOut 핸들러

onMouseOver는 마우스 커서가 이미지 맵이나 링크 객체 위로 들어올 때 호출되며 onMouseOut은 마우스 커서가 이미지 맵이나 링크 객체 위에서 바깥으로 이동할 때 호출된다. 이미지 맵의 한 영역에서 다른 영역으로 마우스가 이동하면 원래의 영역에 onMouseOut이 먼저 호출되고 그 후 새 영역에 onMouseOver가 호출된다.

* 대상객체 :  Link(Area포함), Layer

(9) onMouseDown, onMouseUp 핸들러

onMouseDown은 사용자가 마우스를 누르는 순간에 한 번 호출되며, onMouseUp은 사용자가 마우스를 놓는 순간 한 번 호출된다. 이 두 핸들러가 false를 리턴하면 원래 목적이 이루어지지 않는다.

* 대상객체 :  Button, document, Link

(10) onMouseMove 핸들러

onMouseMove는 마우스 커서가 움직이는 동안 계속적으로 호출된다. 마우스의 움직임은 매우 빈번한 동작이므로 이벤트에 대한 캡쳐가 요구된 객체에 대해서만 이벤트가 전달된다. 그러므로 document가 onMouseMove 이벤트 핸들러를 동작시키고자 한다면 document.captureEvents(Event.MOUSEMOVE)를 실행하여 이벤트를 캡쳐할 의사를 분명히 지정하여야 한다.

* 대상객체 :  captureEvents메소드를 가지고 있는 객체(document, window)

(11) onMove, onResize 핸들러

onMove는 사용자가 브라우저 창이나 프레임의 위치를 움직일 때 호출된다. 또는 자바스크립트 코드에 의해 브라우저나 프레임의 위치가 변경될 때 호출된다. 후자의 경우는 window객체의 move 메소드에 의해 실행에 의해 발생할 수 있다. onResize는 onMove와 비슷하게 사용자나 자바스크립트 코드에 의해 브라우저 창이나 프레임의 크기가 변할 때 호출된다.

* 대상객체:  window, Frame

(12) onReset, onSubmit 핸들러

onReset은 사용자가 폼을 리셋할 때 즉 reset 버튼을 누를 때 호출된다. onSubmit은 사용자가 submit 버튼을 누를때 즉 폼 데이터를 전송할 때 호출된다. onSubmit 핸들러가 false를 리턴하면 브라우저는 폼 데이터를 전송하지 않는다. 역시 onReset 핸들러가 false를 리턴하면 폼이 리셋되지 않는다. 이핸들러들은 Submit 버튼이나 Reset 버튼에 설정되지 않고<form> 태그 내에 즉 Form 객체에 설정된다.

* 대상객체 :  Form

(13) onSelect 핸들러

사용자가 Text나 Textarea  객체의 텍스트 일부를 선택할 때 호출된다. onSelect 핸들러는 navigator 2.0에서 구현된것임.

* 대상객체 :  Text, Textarea

　

　

4. 이벤트의 흐름제어

이벤트는 일정한 경로를 거쳐 이벤트를 받도록 설정된 객체에 전달되며 그 객체의 이벤트 핸들러가 호출된다. 그러나 이벤트가 전달되는 경로 상에 있는 객체들은 이벤트의 목적 객체에 도달하기 전에 가로채거나, 이벤트가 흘러가지 못하게 하거나, 이벤트의 경로를 무시하과 다른 객체로 이벤트가 전달되도록 할 수 있다.

(1) 이벤트의 전달 경로

자바스크립트 객체들은 상호간에 상위-하위의 계층구조로 이루어져 있다. 이벤트는 기본적으로 이벤트의 목적 객체에 도달할 때까지 상위 객체로부터 하위 객체로 흘러간다. 즉 모든 이벤트는 window 객체로 먼저 들어 오면 하위 객체로 전달된다.

　

(2) 이벤트 제어 메소드들

이벤트의 전달경로 상에 있는 상위객체들은 이벤트가 목적 객체에 도달하기 전에 이벤트를 가로채거나 가로챈 이벤트가 정상적인 이벤트 전달 경로로 흘러가지 않게도 할 수 있다. 이벤트를 제어하는 제어 메소드에는 4가지가 있다.

• captureEvents(이벤트 타입)
• releaseEvents(이벤트 타입)
• routeEvent(eV)
• handleEvent(eV)

captureEvents와 releaseEvents를 지원하는 객체는 window와 document 둘뿐이다. routeEvent와 handleEvent의 파라미터인 ev는 Event 타입의 객체로서 자바스크립트 엔지이 생성하여 전달하는 객체이다.

가) captureEvents(이벤트 타입들) 메소드

파라미터는 하나의 캡쳐하고자 하는 이벤트의 타입들을 BIT-OR 형식으로 전달한다. 이벤트 타입은 Event 객체의 프로퍼티이다. 즉, click이벤트는 Event.CLICK으로 move 이벤트는 Event.MOVE를 이용한다.

captureEvents()메소드는 파라미터에 설정된 이벤트들을 가로챌 것을 지정하는 함수이다. 즉 어떤 객체의 captureEvents 메소드가 호출되면 그 객체는 지정한 이벤트들을 가로챌 수 있다. 그러나 만일 이벤트 핸들러가 없다면 이벤트는 사라지고 만다. 가로챈 이벤트를 처리하고자 한다면 capturEvents() 메소드의 호출 뿐 아니라 이벤트 핸들러를 등록하고 이벤트 핸들링 함수를 작성하여야 한다.

어떤 객체 A가 이벤트 K를 가로채어 이벤트 핸들러를 실행하고자 한다면 다음 3가지 코드가 필요하다.

• A.captureEvents(K) 호출하여 객체 A가 이벤트 K를 가로챌 것을 명시하는 코드.
• 이벤트 핸들러 함수의 작성
• 이벤트 핸들러 등록

document 객체가 mousedown과 mouseup 이벤트를 캡쳐하는 자바스크립트 문은 :

• document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

(예)

　

나) releaseEvents(이벤트 타입들) 메소드

캡쳐하도록 지정된 이벤트의 캡쳐를 해제하는 메소드이다. 이 메소드가 호출된 후, 이벤트가 발생한다면 이벤트는 이벤트 계층 경로를 따라 정상적으로 목적 객체로 흘러 간다.

(예)

　

다) routeEvent(ev)

파라미터에 주어진 ev는 Event 타입의 객체 인스턴스이다. ev는 자바스크립트 프로그래머가 직접 생성할 필요가 없다. 이벤트가 발생하면 Event 객체는 시스템에 의해 자동으로 생성되어 이벤트 핸들러에게 전달된다.

routeEvent(ev) 메소드는 이벤트를 캡쳐한 객체가 현재 발생한 이벤트를 정상적인 계층 구조를 보내는 메소드이다.

　

라) handleEvent(ev)

파라미터에 주어진 ev는 routeEvent 메소드와 같이 Event 타입의 객체 인스턴스이다. 이벤트를 캡쳐한 객체가 다른 객체 A의 메소드 handleEvent(ev)를 호출하면(A.handleEvent(ev)), 현재 발생한 이벤트를 정상적인 계층구조가 아닌 특정 객체로 직접 보내게 된다. 객체 A의 이벤트 핸들러가 호출되고 이벤트의 생명은 그 특정 객체에서 끝나게 된다. 특정 객체에 이벤트 핸들러가 존재하지 않는다면 이벤트는 사라지게 된다.

handleEvent(ev)를 호출할 때 반드시 이벤트를 처리할 객체를 지정하여야 한다. document 객체에게 이벤트를 직접 전달하고자 한다면　다음 코드를 사용하여야 한다.

• document.handleEvent(ev)

handleEvent(ev)의 파라미터에 Event 타입의 ev를 전달하는 이유는 이벤트를 받는 객체에게 시스템이 생성한 ev를 전달하기 위함이다.

　

(3) 이벤트 핸들러 작성자에 의한 이벤트 핸들링 4 가지 경우

이벤트 핸들러를 작성할 때 다음 4가지 방식으로 이벤트를 제어할 수 있다.

가) 이벤트 핸들러에서 true를 리턴

이벤트 핸들러는 이벤트를 받은 후 임의의 코드를 실행할 것이다. 그리고 나서 마지막에 true를 리턴한다면 이벤트가 발생한 객체의 행위가 실행된다. 객체마다 이벤트에 대해 정해진 의미를 가지고 있다.

나) 이벤트 핸들러에서 false를 리터하면 객체에 발생한 이벤트의 고유 의미가 실행되지 않는다.

다) routeEvent 메소드 호출

라) 이벤트 수신자의 handleEvent 메소드 호출

이벤트 핸들러의 내부 코드에서 어떤 객체(수신자)의 handleEvent 메소드를 호출하면 자바스크립트 엔진은 수신자 객체의 이벤트 핸들러를 호출한다.

　

5. Event 객체

Event 객체는 이벤트가 발생할 때 브라우저 내에서 자동으로 생성된다. 사용자가 자바스크립트 코드를 이용하여 임의로 생성해 낼 수 없다. Event 객체는 발생한 이벤트의 종류, 커서의 위치 등에 대한 정보를 제공한다. 이벤트를 캡쳐하도록 설정된 이벤트 핸들러가 호출될 때 Event 객체는 파라미터로 전달된다.

Event의 프로퍼티(메소드 없음)

프로퍼티	설명
target	이벤트의 목적 객체에 대한 레퍼런스
type	이벤트 타입을 나타내는 스트링. 이벤트 종류를 소문자로 표현한 스트링 "click", "keydown", "change"
data	드롭된 객체의 URL을 표시하는 스트링(dragdrop 이벤트인 경우)
height	윈도우나 프레임의 높이
layerX 혹은 x	resize 이벤트 경우 객체의 폭
layerY 혹은 y	resize 이벤트 경우 객체의 높이.
modifiers	수정자 키를 가리키는 스트링(마우스나 키보드 이벤트 경우) 수정자 키
pageX	페이지 내의 픽셀 주소로서 커서의 수평 위치
pageY	페이지 내의 픽셀 주소로서 커서의 수직 위치
screenX	스크린 내의 픽셀 주소로서 커서의 수평 위치
screenY	스크린 내의 픽셀 주소로서 커서의 수직 위치
which	눌러진 마우스 버튼 종류 혹은 눌러진 키의 ASCII 값
width	윈도우나 프레임의 폭

(예)

 

출처 :

window 객체...새창관련	[LIST]

window 객체 ......................................................... 아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다. ■ window 객체 프로퍼티 status 브라우저의 상태바에 문자열을 출력하는 경우에 사용 defaultStatus 브라우저의 상태바에 초기 문자열을 설정 length 창안의 프레임 수 name 창 이름 self 현재 창 자신, window와 같음 window 현재 창 자신, self와 같음 parent 프레임에서 현재프레임의 상위프레임 top 현재프레임의 최상위프레임 opener open()으로 열린 창에서 볼 때 자기를 연 창 document document 오브젝트 frames 창안의 모든 프레임에 대한 배열정보 history history 오브젝트 및 배열 location location 오브젝트 closed 창이 닫혀 있는 상태 locationbar location 바 menubar 창 메뉴 바 innerHeight 창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음 innerWidth 창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음 outerHeight 창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음 outerWidth 창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음 pageXOffset 현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음 pageYOffset 현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음 personalbar 창의 퍼스널 바 scrollbar 창의 스크롤 바 statusbar 창의 상태 바 toolbar 창의 툴 바 ■ window 객체 메서드 alert() 경고용 대화상자를 보여줌 clearTimeout() setTimeout 메소드를 정지 confirm() 확인, 취소를 선택할 수 있는 대화상자를 보여줌 open() 새로운 창을 오픈 prompt() 입력창이 있는 대화상자를 보여줌 setTimeout() 일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정 eval() 문자열을 숫자로 바꿈 toString() 오브젝트를 문자열로 바꿈 blur() focus를 이동 focus() focus를 줌 scroll() 창을 스크롤 함 valueOf() 오브젝트 값을 반환 back() 한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함 find() 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함 forward() 한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함 home() 초기화 홈페이지로 이동. 익스플로러 지원 안함 moveby() 창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정 moveto() 창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정 resizeby() 창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정 resizeto() 창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정 scrollby() 창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정 scrollto() 창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정 stop() 불러오기를 중지. 익스플로러는 지원 안함 captureEvents() 모든 타입의 이벤트를 판단 setInterval() 일정시간마다 지정된 처리를 반복 clearInterval() setInterval 메소드의 정지 handleEvent() 이벤트 취급자를 정함 print() 화면에 있는 내용을 프린터로 출력 releaseEvent() 다른 계층의 이벤트로 이벤트를 넘김 routeEvent() 판단한 이벤트와 같은 계층의 이벤트 toSource() 오브젝트값을 문자열로 반환 ■ window 객체 이벤트핸들러 onBlur 브라우저가 포커스를 잃을 때 발생 onDragDrop 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함 onError 문서를 읽는 중에 에러가 생길 때 발생 onFocus 브라우저에 포커스를 얻을 때 발생 onLoad 문서를 읽을 때 발생 onMove 브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함 onResize 창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함 onUnload 현재 문서를 지울려고 할 때 발생 ■ 새창열기 open() 메서드 window.open("문서url","창이름","창의 특성") 웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠! 첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요. 둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다. 세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠. ■ 창의특성 directories yes || no 익스플로러 연결도구모음, 익스플로러 전용 location yes || no 주소입력란 menubar yes || no 메뉴표시줄 scrollbars yes || no 스크롤바 status yes || no 상태표시줄 toolbar yes || no 도구모음 copyhistory yes || no 히스토리정보를 복사 resizable yes || no 창 크기 조절 가능여부 width 픽셀 창의 너비 height 픽셀 창의 높이   <script language="javascript"> // 페이지로딩시 새창 열기 function winOpen() { window.open("123.html","newWin","width=300,height=200,toolbar=no") } </script> <body onLoad="winOpen()"> <script language="javascript"> // 클릭시 새창열기 function winOpen() { window.open("123.html","newWin","width=300,height=200,toolbar=no") } </script> <font onClick="winOpen()"> <script language="javascript"> // 클릭시 새창열기 , 링크에서 function winOpen() { window.open("123.html","newWin","width=300,height=200,toolbar=no") } </script> <font onClick="winOpen()"> 클릭열기 </font> <a href="javascript:winOpen()"> 링크열기 </a> <script language="javascript"> // 매개변수를 이용하기 function winOpen(url,winname,winhow) { window.open(url,winname,winhow) } </script> <a href= "javascript:winOpen('123.html','newWin','width=300,height=200,toolbar=no')"> 매개열기 </a> ■ 새창열기 close() 메서드   <script language="javascript"> function winClose() { window.close() } </script> <a href= "javascript:winClose()"> 함수이용해서 닫기 </a> <a href= "javascript:window.close()"> 메서드 이용 닫기 </a> ■ 새로 열린 창에서 연 창을 컨트롤하기   <script language="javascript"> // 창 닫기 전에 연 창의 폼요소에 값 넘기기 function winClose(addr) { opener.form1.address=addr self.close() } </script> <a href= "javascript:winClose('서울 종로구')"> 종로구</a> <a href= "javascript:winClose('서울 마포구')"> 마포구</a> <script language="javascript"> // 창 닫기 전에 연 창을 리로드하기 function winClose() { opener.location.reload() self.close() } </script> <a href= "javascript:winClose()"> 함수이용해서 닫기 </a> ■ 새로 열린 창에서 크기 조절하기 window.resizeTo   <script language="javascript"> // 페이지로딩시 크기 조절 function winSize() { window.resizeTo(300,200) // 너비,높이 } </script> <body onLoad="winSize()"> ■ 새로 열린 창에서 위치 조절하기 window.moveTo   <script language="javascript"> // 페이지로딩시 위치 조절 function winMove() { window.moveTo(200,200) // X,Y 좌표 } </script> <body onLoad="winMove()"> window 객체에서 가장 많이 사용되는 필수 기능인 새창관련만 살펴보았다. 나머지는 필요할 때 검색을 통해 많은 예제 소스를 접할 수 있을 것이다!!!

출처 :  http://www.dragoneye.co.kr/

작성자 : 민인학
연락처 : ming@tcltk.co.kr

이 강좌를 퍼가시는것은 자유이나 출처를 밝혀주시기 바랍니다.

---

Tcl/Tk 란?

---

리눅스잡지나 윈도우즈 프로그래밍 관련 잡지에 종종 등장하는 Tcl/Tk라는 놈이 어떤놈인지 알아보겠습니다.


1. Tcl/Tk?

---

Tcl/Tk는 프로그래밍 언어(programming language)입니다.

C나 자바에 비하면 상당히 쉬운 대표적인 스크립트 언어중의 하나입니다.

스크립트 언어라고 하는것은 언어처리계에 의해 미리 제공되는 기능을 사용하고, 하고 싶은것을 간결하게 이해하기 쉽게 쓸수 있는 언어라는 의미로 해석할수 있습니다.

그렇지만 조금 느리고 복잡한 프로그래밍을 할수 없는 단점이 있습니다.

2003년 지금 한국에서 가장 잘 알려진 스크립트 언어는 펄(Perl)과 자바 스크립트(Java Script)입니다.

마이크로 소프트사의 비쥬얼 베이직을 스크립트 언어의 부류에 포함시키는 사람도 있습니다.

많이 쓰이는 스크립트언어속에서 Tcl/Tk를 돋보이게 하는것은 GUI(Graphical User Interface) 베이스의 어플리케이션을 간단하게 작성할수 있는 언어라는겁니다.

윈도우즈에 메모장등의 텍스트에디터를 열어서 몇십줄의 코드를 쓰는것으로, 화려한 GUI 어플리케이션을 작성할수 있습니다.

윈도우 어플리케이션의 개발이라고 하면, 두꺼운 X윈도우즈나 MS윈도우즈의 개발자문서를 공부하지 않으면 안되는 것이지만 Tcl/Tk로는 위의 두가지를 몰라도되며, Java등의 GUI에 비교하면 훨씬 간단하게 작성할수있습니다.


또한 파일조작등 데스크탑 툴의 개발에 불가결한 기능도 충실하고, 즉시 대처하는 툴을 재빠르게 개발하는데 적합한 언어입니다.

만약 자신이 쓰고자 하는 기능이 언어처리계에 없다면 부족한 기능을 C언어를 사용하고, Tcl/Tk처리계에 새로운 command를 추가하는 등의 확장을 간단히 할수있습니다.

이 C언어에 의한 확장을 간단하게 하는것도 Tcl/Tk의 강점중의 하나입니다.

또한 이 기능을 사용하여 전세계의 Tcl핵커(Hacker)가 테이타베이스(data base) 엑세스, 네트워크, 고기능의 텍스트처리, 등등..을 공개하여 사용자는 대단히 편리하게 사용할수 있습니다.


그건 그렇고 Tcl/Tk 이름이 나타내듯이 Tcl?Tool Command Language라고 하는부분과 Tk(Tool Kit)로 이루어져 있습니다.

덧붙이자면 Tcl은 통상 티클(갑자기 고블린의 윙클이 생각나는군요.)이라고 불려지며, Tk는 티케이라고 읽습니다.


2. Tcl 이란?

---

Tcl/Tk의 Tcl은 Tcl/Tk의 언어처리계의 중핵이 되는 부분입니다.

원래는 버클리대학에 있던 개발자 J.K Ousterhout박사가, 집적회로의 설계 툴에 사용되어 지던 스크립트 언어가 다른 툴에 의해 전혀 개선되어 질수 없다는 생각을 하고, 라이브러리로써 C언어의 어플리케이션에 짜넣거나, 확장성이 높은 인터프리터형 언어 처리계로써 사용할수 있는 스크립트언어로 개발되었습니다.

Tcl은 평이한 문법을 가지는 간단한 언어로, 현재 펄, 파이썬과 함께 초고급(VHLL) 언어로 알려지고, 많은 사용자를 확보하고 있습니다.


3. Tk 란?

---

Tcl은 확장성이 높은 언어로 개발되었지만, 최초부터 현재 이르기까지 최대의 확장 라이브러리 셋트가 Tk입니다.

Ousterhout박사는 유닉스 계산기의 GUI어플리케이션을 기술하는데 Tcl이 적합하는것을 알아차리고, 당초의 Tcl이 유요한 활용사례로써 공개했습니다.

1987년에 애플사가 동사의 계산기용 비쥬얼 인터페이스 작성용의 스크립트 언어 하이퍼카드(Hyper Card)를 발표하는데도 촉발되었다고 합니다.

Tk는 유닉스 사용자의 많은 지지를 얻어 현재 윈도우즈와 메킨토시에도 이식되어 사용되어지고 있습니다.


4. Tcl/Tk의 과거

---

Tcl/Tk은, 1988년에 John K. Ousterhout 박사에 의해 버클리(Berkeley) 대학에서 최초에 작성된 스크립트(script) 언어입니다.

초기의 Tcl/Tk는 X윈도우즈 시스템의 GUI환경에서 Xlib나 OSF/Motif의 API프로그래밍에 과롭힘(?)을 당하던 개발자들, 특히 캐드관련 소프트웨어를 작성하던 개발자들에게 먼저 알려지고, 단숨에 지명도를 드러냈습니다.

1994년부터 1998년 초까지는 Ousterhout박사가 선(Sun)사에 근무하는것을 계기로 개발이 매우 진척되었습니다.

이 시기에 버전 8.0이 릴리즈가 되었고, 바이트 컴파일러에 의한 실행속도의 고속화, 웹부라우저 플러그인 개발, 자바와의 융합, 보다 고도적 정규표현의 표현 지원, 내부문자열을 UTF-8의 통일에 의한 국제화(?I18N)실현 등등.. 많은 기능이 추가되어 갔습니다.

윈도우즈, 맥캔토시의 지원도 이시기부터입니다.


그 후, 일단은 Ousterhout씨가 설립한 Tcl/Tk의 전문기업에서 개발이 행하여 졌지만, 직후에 오픈소스웨어 바람이 거세게 몰려듭니다.

Tcl/Tk 커뮤니티도 이 거센 바람을 받아, 2000년 10월부터는 Ousterhout씨와 세계적으로 유명한 Tcl/Tk의 확장라이브러리를 개발한 경험이 있는 몇십명으로 이루어진 개발진이 결성되었습니다.

이 체제는 지금도 계속되어지고 있으며, 그들의 대부분이 Tcl/Tk의 버그 레포팅 데이타베이스를 통해 전세계의 유저와 늘 토론을 하며, 개발을 진척시켜 나가고 있습니다.


5. Tcl/Tk의 현재

---

Tcl/Tk는 1988년에 탄생하고 현재도 개발이 진행중인 언어처리계로써, 오늘날 까지 살아남고 있어, C언어 이후로는 가장 역사가 깊은 부류에 속합니다.

현재는 오픈소스의 개발체제가 짗어가고 있어, 그 총본산은 소스포지(?SourceForge)에 있습니다.

또 1998년 ~ 2000년 10월 사이에 개발의 거점이었던 Scriptics∼?AjubaSolutions 시대에 Tcl Developer Exchange( http://tcl.activestate.com )가 구축되었습니다.


Tcl/Tk는 원래 유닉스 머신을 타겟으로 보급되어 왔지만, 현재는 유닉스 이외의 윈도우즈/맥킨토시에도 잘 돌아갑니다.

이것은 펄 언어와 같은 이식이 아니고, 오픈소스의 개발진이 자신의 운영체제에서 실행되는 Tcl/Tk를 모두 동시에 개발/배포하고 있는 특징으로, 타임 러그(Time Lug)가 없어, 어느 운영체제에서도 언제든지 항상 최신 버전을 사용할수 있습니다.


Tcl/Tk는 현재 한국에서는 지명도가 높지는 않지만, 유닉스 출생의 범용 스크립트 언어로써는 펄이나 파이선같은 스크립트 언어입니다.

일설에서는 전세계에 50~100만의 거대한 유저 커뮤니티가 활발하게 이루지는 것이 Tcl/Tk의 개발원동력이 된다고 합니다.


참고로 말하자면 펄, Tcl/Tk, 파이선은 각각 태어난 시기가 1987, 1988, 1990년 이렇게 비슷하게 개발되어 서로 주거니 받고, 사이좋게 싸우거나 하는 언어라고도 볼수있습니다.


6. Tcl/Tk는 나쁜 언어이니 사용하지 말아라?

---

이것은 아마도 GNU의 창시자 리처드 스톨만씨의 발언때문이라 생각이 듭니다.

GNU라는것은 일찍이 '유닉스 벤더(Vendor) 각 회사가 자사의 유닉스 소프트웨어에 라이센스를 적용해서 사용을 유료화 한것에 대해, 이렇게 되서는 프로그램의 개발이 특허로 얽혀지고서는 뛰어난 소프트웨어를 만들수 없다' 하고 유닉스의 표준프로그램을 모두 공짜로 제공하는 것을 목적으로 스톨만씨가 거느린 자유재단(FSF:?Free Software Foundation)에 따라서 1984년에 설립된 프로젝트입니다.

이 이념은 많은 유닉스 이용자에게 지지를 얻어, 현재의 많은 유닉스 사용자들중 GNU에서 만들어낸 소프트웨어를 이용하지 않는 사람이 없을정도로 되었습니다.

창시자 스톨만씨도 유닉스상의 대표적인 표준 에디터인 GNU Emacs의 개발을 한 전설적인 뛰어난 프로그래머입니다.

스톨만씨가 1994년에 전자뉴스상에서 'Tcl은 언어구현에 결함이 있어, GNU에서는 이 소프트웨어를 채용할 생각이 없다'라고 발언을 하여 대단한 바람을 불러 일으켰습니다. 그러나 이러한 발언을 있은후 Tcl/Tk는 여러가지 일들이 일어났습니다.

썬 마이크로 시스템즈로 개발을 옮겨가서, 더욱 파워업 하고, 버전 8대가 되어 여러가지 면으로 훌륭한 스크입트 언어로 자리매김을 하게 되었습니다.

Tcl/Tk의 스톨만씨의 한마디 발언때문에 약간의 뜻밖을 입게 된 셈이지만, Tcl/Tk는 GNU가 채택하지 않으면서도 오늘날 까지 번영을 계속하고 있는 진귀한 소프트웨어로써, 유닉스계 에서도 오히려 이채를 띠고 있습니다.


Tcl/Tk와 자주 비교되는 초급언어인 펄에서도 말할수 있는 것이지만, 오후의 우아한 한때에 하품을 하면서 취미로 즐길수 있는 언어가 아니고, 어디까지나 실용에 주안을 둔 언어입니다.

그 때문에 펄 프로그래머나, Tcl/Tk의 프로그래머는 지극히 실용지향, 결과지향적인 코딩을 좋아한다고 볼수도 있다고 생각할수도 있습니다.

목차 규칙 강좌 LinuxStart에서한 강좌 정규표현식에 대해 알아 보자(1) 정규표현식에 대해 알아 보자(2) 정규표현식에 대해 알아 보자(3) 알려진 기술 정규 표현식 완전 해부와 실습 HTML 테그에 매체하기 HTML 링크 만들기 HTML 링크의 세부사항 검사 HTTP URL 검사 HOST 이름 확인 텍스트에서 URL을 추출하는 방법

규칙

강좌

LinuxStart에서한 강좌

리눅스스타트에서 발췌한 부분입니다. 현재 리눅스스타트 웹 싸이트는 운영이 안 되고 있습니다.

정규표현식에 대해 알아 보자(1)

정규표현식은 어떤 문자 패턴을 찾아서 수정 및 교환 등 웹프로그램 개발시 정교한 문자 처리를 가능하게 해준다. 그럼 정규표현식의 사용법에 대하여 알아 보자.

첫번째는 기본적인 기호들에 대하여 알아 보겠다.

정규표현식 기본 문법

'^' 와 '$'

'^' 는 바로 문자 뒤의 문자열로 시작됨을 가르킨다. "^The" : "The"로 시작하는 문자. ex) The Car is red, Theater...

'$' 는 문자열의 맨 마지막을 가르킨다. "of despair$" : "of despair"로 끝나는 문자열. ex) The concept of despair "^hello$" : hello로 시작해 hello로 끝나는 경우 이므로 "hello" 뿐이다.

'.', '*' 와 '+' 그리고 '?'

'.' 은 어떤 문자든지 임의의 한 문자를 말한다. 꼭 하나의 문자가 있어야 한다. ex) "x.z"는 xyz, xxz, xbz 등이고 xz나 xyyz는 안된다.

'*' 는 바로 앞의 문자가 없거나 하나 이상의 경우를 말한다. ex) "ab*" 는 a, abc, ab, abbbb 등을 말한다.

'+' 는 바로 앞의 문자를 나타내면 꼭 1나 이상이어야 한다. ex) "ab+"는 abc, abbb 등이고 a는 되지 않는다.

'?' 는 바로 앞의 한 문자가 있거나 없는 것을 말한다. 단지 한 문자만이어야 한다. ex) "ab?"는 a 또는 ab 를 나타낸다.

[]], {} 와 () 그리고 |

'[]]' 는 []] 안에 존재하는 문자들 중 한 문자만을 나타낸다. ex) [abc]] 는 a 또는 b 또는 c 중에 한문자를 나타낸다. 여기서 '-'를 사용할땐 범위를 나타낸다. 즉 [ a-f ]] 는 [abcdf]] 와 같은것을 나타낸다.

'{}'는 {} 앞에 있는 문자나 문자열의 개수를 정하는 것이다. ex) "ab{2}" 는 "abb"를 나타낸다. 즉 b의 개수가 2개를 나타낸다. "ab{2,}" 는 abb, abbbbb 등 b의 개수가 2개 이상을 나타낸다. "ab{3,5}" 는 abbb, abbbb, abbbbb 와 같이 b가 3개에서 5개 까지를 나타낸다.

'()' 는 ()안에 있는 글자들을 그룹화한다. ex) a(bc)* 는 a, abc abcbc 등 'bc'가 없거나 하나 이상인 경우이다. "a(bc){2}" 는 abcbc 를 나타낸다.

'|' 는 OR 연산자 기능을 한다. "kim|lee" 는 kim 또는 lee 둘중 하나를 나타낸다.

지금까지 정규표현식의 기본적인 기호에 대하여 정리해 보았다. 그럼 다음 시간에는 좀더 복잡한 기호식에 대하여 알아보겠다.

<리눅스 스타트> when 2000-03-21

정규표현식에 대해 알아 보자(2)

이번에는 좀 더 복잡한 정규 표현식의 예를 다루어 보자

문자 클래스

[[:alpha:]]] 는 [a-zA-Z]] 와 동일 [[:digit:]]] 는 [0-9]] 와 동일 [[:alnum:]]] 는 [a-zA-Z0-9]] 와 동일 [[:space:]]] 는 공백 문자 의미

많은 예제를 이해함으로 좀더 깊이 있게 정규 표현식을 나열해 보자

^[1-9]][0-9]]*$ : 1000 또는 200처럼 처음 숫자가 0이 아니고 끝까지 숫자만 존재 즉 돈 등의 값을 유효한지 검사 한다.

^(0|[1-9]][0-9]]*)$ : 0 또는 1000, 200처럼 돈의 단위가 될 수 있다.

^(0|-?[1-9]][0-9]]*)$ : 이 표현은 음수 값도 표현되어진다.

^[0-9]]+(\.[0-9]]+)?$ : 즉 소수점 표현을 위해 나타내었다. '\.' 는 임의의 한 문자가 아닌 소수점 마크 '.'을 나타내기 위해 사용 되었다. 즉 20 또는 21.2 같은 소수점 한자리까지만 나타낸다.

^[0-9]]+(\.[0-9]]{2})?$ : 이것은 소수점 두번째까지 나타낸다는 것이다. ex) 0.12

^[0-9]]+(\.[0-9]]{1,2})?$ : 이것은 소수점 하나 또는 두 개까지인 것이다.

^[0-9]]{1,3}(,[0-9]]{3})*(\.[0-9]]{1,2})?$ : 이것은 3자리식 짤라서 콤마를 붙여 주면서 소수점 한자리에서 두자리까지 표현한다. ex) 12,234,566.12

위와 같이 예를 들어 간단히 설명해 보았다. 위의 부분을 자세히 분석해보구 이해가 확실히 되면 어느 정도 자신이 생길 것이다.

그럼 다음은 마지막으로 자주 웹프로그램에서 사용하는 메일 및 웹 등의 유효성을 검사하여 링크를 걸어주는 것에 대하여 이야기해보겠다.

<리눅스 스타트> when 2000-03-21

정규표현식에 대해 알아 보자(3)

이번에는 정규 표현식을 사용 하여 메일 및 웹 링크등의 유효성 검사 및 링크 걸어주기 등에 대하여 알아 보자.

이메일 유효성 검사

이메일에 대하여 알아보면 이메일 주소는 유저명과 서버명을 '@'를 사용하여 나타낸다. 예를 들면 start@linuxstart.co.kr과 같이 나타낸다.

유저명의 조건 : 대문자, 소문자, 숫자 그리고 '.' '-' '_' 을 가질 수 있다. 유저명은 '.' 로 시작 또는 끝나서는 안된다.

[_0-9a-zA-Z-]]+(\.[_0-9a-zA-Z]]+)*

위와 같이 유저명의 유효성을 검사 할 수 있다.

서버명의 경우 : 위의 유저명의 경우와 동일하다. 단 '_' 을 사용해서는 안된다.

[0-9a-zA-Z-]]+(\.[0-9a-zA-Z-]]+)*

와 같이 나타낼 수 있다.

전체의 전자우편 유효성 검사는 유저명@서버명이므로 아래와 같다.

^[_0-9a-zA-Z]]+(\.[_0-9a-zA-Z+)*@[[0-9a-zA-Z]]+(\.[0-9a-zA-Z]]+)*$

와 같이 표현할 수 있다.

주소 유효성 검사

HTTP의 주소등 자동 링크 걸어주기 위해선 먼저 URL의 유효성을 검사하여야 한다.

URL은 대문자, 소문자, 숫자 ,'.','_','=','&','?','~','@','/','+'를 사용할 수 있다

즉 http://([0-9a-zA-Z./@~?&=_]]+)가 된다.

링크를 PHP를 사용하여 HTML로 걸어 주기 위한 방법

$add="www.linuxstart.co.kr"; $pattern = "([0-9a-zA-Z./@~?&=_]]+)"; $link = ereg_replace($pattern, "http://\\1" $add); echo ("$link");

의 결과 $link는 다음처럼 변경된다. http://www.linuxstart.co.kr 와 같이 된다. 참고로 \\1은 첫번째 괄호안의 값을 말한다. \\2는 2번째 등등

그럼 메일 링크의 경우를 보자

$mail = "start@linuxstart.co.kr"; $pattern = "([_0-9a-zA-Z]]+(\.[_0-9a-zA-Z]]+)*)@([0-9a-zA-Z]]+(\.[0-9a-zA-Z]]+)*)" $link = ereg_replace($pattern, "\\1@\\3",$mail); echo ("$link");

의 결과 $link는 다음과 같다. start@linuxstart.co.kr 와 같이 된다.

그럼 지금까지 정규 표현식에 대하여 이것으로 마친다...

<리눅스 스타트> when 2000-03-21

알려진 기술

정규 표현식 완전 해부와 실습

정규 표현식 완전 해부와 실습에서 발췌한 부분입니다.

HTML 테그에 매체하기

<("[^"]*"|'[^']*'|[^'">])*> < # 시작하는 "<" ( #임의의 개수의... "[^"]*" #큰따옴표로 감싼 문자열 | '[^']*' #작은따옴표로 감싼 문자열 | [^'">] #"그 외의 문자" )* > #끝내는 ">"

HTML 링크 만들기

<a\b([^>]+)>(.*?)</a>

HTML 링크의 세부사항 검사

\bHREF\s*=\s*(?:"([^"]*)"|'([^']*)'|([^'">\s]+)) \b HREF #"href" 속성 \s* = \s* #"="의 앞, 뒤에는 공백이 들어갈 수 있다 (?: #실제 값은 다음 중 하나이다 "([^"]*)" #큰따옴표로 감싼 문자열 | '([^']*)' #작은따옴표로 감싼 문자열 | ([^'">\s]+) #기타문자 )

HTTP URL 검사

^http://([^/:]+(:(\d+))?)(/.*)?$

$1 에 host $3 에 포트 $4 에 경로 >>>

HOST 이름 확인

^([a-z0-9]\.|[a-z0-0][-a-z0-9]{0,61}[a-z0-9]\.)*(com|edu|gov|int|mil|net|org|biz|info|name|museum|coop|aero|[a-z][a-z])$ ^ ([a-z0-9]\.|[a-z0-0][-a-z0-9]{0,61}[a-z0-9]\.)* #하나 이상의 점으로 구분된 부분 (com|edu|gov|int|mil|net|org|biz|info|name|museum|coop|aero|[a-z][a-z]) #맨 뒤 부분 $

텍스트에서 URL을 추출하는 방법

\b((ftp|http?)://[-\w]+(\.\w[-\w]*)+|([a-z0-9]([-a-z0-9]*[a-z0-9])?\.)+(com\b|edu\b|biz\b|gov\b|in(t|fo)\b|mil\b|net\b|org\b|[a-z][a-z]\b))(:\d+)?(/[^!.,?:"'<>()\[\]{}\s\x7F-\xFF]*([!.,?]+[^!.,?;"'<>()\[\]{}\s\x7F-\xFF]+)*)? \b #앞 부분을 매치 시킨다(proto://hostname, 또는 그냥 hostname) ( (ftp|http?)://[-\w]+(\.\w[-\w]*)+ | #또는 호스트이름을 매치시키기 위한 별도의 하위 표현식을 사용할 수 있다 ([a-z0-9]([-a-z0-9]*[a-z0-9])?\.)+ #서브 도메인 #.com과 같은 부분을 매치시킨다. ( com\b |edu\b |biz\b |gov\b |in(t|fo)\b |mil\b |net\b |org\b |[a-z][a-z]\b ) ) #포트 번호를 처리하기 위한 부분 (:\d+)? #/로 시작하는 URL의 경로 부분 ( / #다음 부분은 여러 경험을 바탕으로 만든 정규 표현식 [^!.,?:"'<>()\[\]{}\s\x7F-\xFF]* ( [!.,?]+[^!.,?;"'<>()\[\]{}\s\x7F-\xFF]+ )* )?

Regular Expression(정규 표현식)
정규 표현식이란, 문자열에서 특정한 캐릭터 조합(character combination)을 찾아내기위한 패턴(pattern)입니다.
쉽게 문장에서 특정한 단어를 찾아내는 것이라고 생각하시면 될 것 같습니다
그렇기 때문에 정규 표현식 함수라고 불리는 것들은 대부분 문자열과 관련하여 특정 변수로 저장된 문자열 내에서 지정한 문자를 찾아내는 기능들을 수행합니다.
일반적으로 - 어느 랭귀지를 사용하던지 간에 - 정규 표현식을 구성하는 방법은 일반적인 문자열과 특정한 의미를 지니는 메타문자를 조합하는 것입니다.

JavaScript에서 정규 표현식은 1.2 버젼부터 사용가능하도록 추가되었습니다. 즉 그 이하버젼에서는 사용하지 못한다는 말이므로 아주 오래된 고려적 웹브라우저를 사용하시는 분들은 절대로 볼수가 없습니다. -_-;;
자바스크립트 객체부에서는 언급을 하지 않고 있지만, 정규표현식은 객체(objects)입니다.
정규 표현식의 패턴(pattern)은 object initializers(예, /abc/) 또는 RegExp constructor function(예, re = new RegExp("abc")로 표현할수 있습니다.
이러한 패턴들은 정규표현식의 exec, method 메소드(method)나 String 객체의 match, replace, search, split 메소드에서 함께 사용됩니다.

Regular Expression(정규 표현식) 생성
1. object initializers를 사용한 방법

re = /ab+c/

2. RegExp 객체의 constructor function를 사용한 방법

re = new RegExp("ab+c")

Regular Expression(정규 표현식) 쓰기
정규 표현식 패턴은 /abc/ 같은 단순한 캐릭터나 /ab*c/ ,/Chapter (\d+)\.\d*/ 와 같은 단순 캐릭터와 특별한 캐릭터의 조합으로 나타낼수 있습니다.
다음에 정규 표현식에 사용하는 특수 문자들에 대한 표를 나타내었지만, 이 외에도 상당히 많은 내용들이 있습니다.
타 사이트나 책을 참고로 하여 보시기 바랍니다.

정규 표현식에서 사용하는 Special characters

Character	의미
\	\ 다음에 나오는 특수 문자를 문자열로 인식 가령, /라는 특수문자는 일반적으로 프로그램상에서 나누기로 인식하게 되어있습니다. 이것을 나누기가 아닌 그냥 문자열 / 로 인식시키려면 \/ 로 써주면됩니다.
^	라인의 처음과 패턴과 매치 가령, ^A 라고 써주면 검색하고자 하는 문장의 시작문자가 A인지를 검사하는 것입니다.
$	라인의 끝과 패턴과 매치 가령, ^A 라고 써주면 검색하고자 하는 문장의 마지막문자가 A인지를 검사하는 것입니다.
*	0개 이상의 문자와 매치(모든것이라는 의미)
+	1개 이상의 문자와 매치, {1,}와 같은 의미임.
?	0 또는 1개의 문자 의미. 즉, A?b 라면 A라는 문자와 b라는 문자사이에 문자가 0개 또는 1개 가 들어갈 수 있다는 말입니다. 즉, Ab, Aab, Acb등과 같은..
.	1개의 문자와 일치
()	한번 match를 수행해서 나온 결과를 기억함. 예: /(foo)/ 는 foo라는 단어를 검색한 후, 그 단어를 배열등과 같은 저장장소에 남겨두어 나중에 다시 호출할 수 있도록 합니다.
|	OR
{n}	정확히 n개의 문자 예: a{2} 는 a 문자 두 개, 즉, aa를 의미합니다.
{n,}	n개 이상의 문자
{n,m}	n이상 m이하의 문자
[xyz]	문자들의 set를 의미. 가령, [a-z]라면 a부터 z까지의 모든 문자와 매치하는 것으로 []안의 -는 범위를 나타냅니다.
[^xyz]	네가티브(-) 캐릭터 셋
[\b]	백스페이스와 매치
\b	단어의 시작 또는 끝에서 빈 문자열과 매치
\B	단어의 시작 또는 끝이 아닌 곳에서의 빈 문자열과 매치
\cX	control 문자와 매치
\d	0부터 9까지의 아라비아 숫자와 매치. [0-9]과 같은 의미
\f	form-feed와 매치
\n	linefeed와 매치
\r	캐리지 리턴과 매치
\s	화이트스페이스 문자와 매치. [ \t\n\r\f\v]과 같은 의미
\S	\s가 아닌 문자들과 매치. [^ \t\n\r\f\v]과 같은 의미
\t	탭 의미
\v	수직 탭 의미
\w	w는 문자가 아닌 0, 1, 2, 3 ... 등과 같은 숫자를 의미
\W	W는 문자가 아닌 요소, 즉 % 등과 같은 특수 문자를 의미함
\n	n은 마지막 일치하는 문장
\ooctal \xhex	8(octal)진수, 10(hex)진수 값

Regular Expression(정규 표현식)과 함께 사용하는 함수들

exec	문장에서 매치를 위해 검색을 수행하는 정규 표현식 메소드 배열을 리턴
test	문장에서 매치를 위해 테스트하는 정규표현식 메소드 True 또는 False 리턴
match	문장에서 매치를 위해 검색을 수행하는 string 메소드 배열 또는 null 문자 리턴
search	문장에서 매치를 위해 테스트하는 string 메소드 목차나 -1 리턴
replace	문장에서 매치를 위해 검색을 실행하고 문장을 대체하는 String 메소드
split	문장에서 매치하는 부분을 배열에 할당하는 String 메소드

이와 같은 정규 표현 식들의 실행 결과는 예제의 테스트를 통해 확인해 보도록 하십시요.

<SCRIPT LANGUAGE="JavaScript1.2"> myRe=/d(b+)d/g; myArray = myRe.exec("cdbbdbsbz"); document.writeln("The value of lastIndex is " + myRe.lastIndex); </SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2"> myArray = /d(b+)d/g.exec("cdbbdbsbz"); document.writeln("The value of lastIndex is " + /d(b+)d/g.lastIndex); </SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2"> re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$2, $1"); document.write(newstr) </SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2"> function getInfo(){ re = /(\w+)\s(\d+)/ re.exec(); window.alert(RegExp.$1 + ", your age is " + RegExp.$2); } </SCRIPT> <BODY> Enter your first name and your age, and then press Enter. <FORM> <INPUT TYPE="text" NAME="NameAge" onChange="getInfo(this);"> </FORM> </BODY>

<SCRIPT LANGUAGE="JavaScript1.2"> // The name string contains multiple spaces and tabs, // and may have multiple spaces between first and last names. names = new String ( "Harry Trump ;Fred Barney; Helen Rigby ;\Bill Abel ;Chris Hand ") document.write ("---------- Original String" + "<BR>" + "<BR>") document.write (names + "<BR>" + "<BR>") // Prepare two regular expression patterns and array storage. // Split the string into array elements. // pattern: possible white space then semicolon then possible white space pattern = /\s*;\s*/ // Break the string into pieces separated by the pattern above and and store the pieces in an array called nameList nameList = names.split (pattern) // new pattern: one or more characters then spaces then characters. // Use parentheses to "memorize" portions of the pattern. // The memorized portions are referred to later. pattern = /(\w+)\s+(\w+)/ // New array for holding names being processed. bySurnameList = new Array; // Display the name array and populate the new array // with comma-separated names, last first. // The replace method removes anything matching the pattern // and replaces it with the memorized string--second memorized portion // followed by comma space followed by first memorized portion. // The variables $1 and $2 refer to the portions // memorized while matching the pattern. document.write ("---------- After Split by Regular Expression" + "<BR>") for ( i = 0; i < nameList.length; i++) { document.write (nameList[i] + "<BR>") bySurnameList[i] = nameList[i].replace (pattern, "$2, $1") } // Display the new array. document.write ("---------- Names Reversed" + "<BR>") for ( i = 0; i < bySurnameList.length; i++) { document.write (bySurnameList[i] + "<BR>") } // Sort by last name, then display the sorted array. bySurnameList.sort() document.write ("---------- Sorted" + "<BR>") for ( i = 0; i < bySurnameList.length; i++) { document.write (bySurnameList[i] + "<BR>") } document.write ("---------- End" + "<BR>") </SCRIPT>

출처: http://members.tripod.lycos.co.kr

[테크강좌] ① 테크니컬 라이팅과 테크니컬 라이터의 조건

요즘 컴퓨터 관련 잡지나 웹 사이트를 보다 보면 글의 저자를 소개할 때 ‘테크니컬 라이터 아무개’라고 소개하는 것을 볼 수 있다. 불과 몇 년 전만 해도 들어보지 못했던 용어인데 언제부터인가 간간이 이 용어가 눈에 띄기 시작했다. ‘테크니컬’이라는 말이 들어가다 보니 어쩐지 어려워 보이고 생소하게 느껴지기도 하는데, 과연 ‘테크니컬 라이터’는 무엇을 하는 사람들일까? 이 글을 조금만 읽다 보면 곧 그 해답을 찾을 수 있을 것이다.    ◆ Help 문서 작성 테크강좌    ① 테크니컬 라이팅과 테크니컬 라이터의 조건    ② 깔끔한 HTML Help 작성법    ③ 한눈에 쏙 들어오는 HTML Help 프로젝트    ④ Help 내용 손쉽게 찾을 수 있는 목차 만들기    ⑤ Help 문서 컴파일과 테스트    ⑥ 컴파일 된 HTML Help 디컴파일하기    ⑦ Help 문서, 원소스 멀티유즈 방법    ⑧ 인쇄용 매뉴얼 깔끔하게 편집하기    ⑨ PDF로 온라인 매뉴얼 만들기(1)    ⑩ PDF로 온라인 매뉴얼 만들기(2)    ⑪ 리드미 문서 작성하기 여기에서는 ‘테크니컬 라이팅’이 무엇이고 ‘테크니컬 문서’에는 어떤 것이 있는지 알아보고 대표적인 온라인 기술 문서인 HTML Help를 중심으로 기술 문서를 만드는 방법에 대해 자세히 알아보기로 한다. 그 첫 번째 시간으로 먼저 ‘테크니컬 라이팅’과 ‘테크니컬 라이터’에 대해 소개하고 본격적인 온라인 기술 문서 작성에 들어가기에 앞서 준비 작업을 해 보기로 한다. 테크니컬 라이팅과 테크니컬 라이터 “테크니컬 라이팅(Technical Writing)은 특정 사람을 대상으로 특정 목적을 가지고 기술적인 주제에 관해 특정 정보를 전달하는 것을 말한다. 테크니컬 라이팅에서 사용하는 문장이나 그림 등은 추상적이지 않아야 한다. 즉, 어떤 작업을 수행하거나 어떤 주제를 이해하기 쉽도록 정확한 정보만을 전달해야 한다.” Michael H. Markel Director of Technical Communication Boise State University 위의 정의에서도 알 수 있듯이 테크니컬 라이팅은 일반적인 창작 라이팅과는 달리 특정한 작업을 하려고 하는 사람들이나 특정한 주제에 대해 알고 싶어하는 사람들에게 정확한 사실을 보다 쉽게 전달하는 모든 작업을 포함한다. 따라서 일반적인 창작 라이팅과는 다르게 정보 제공이 그 목적이고 어떻게 하면 그 정보를 좀 더 효율적이고 알기 쉽게 전달할 수 있는가 하는 것이 중점이 된다. 테크니컬 라이팅과 창작 라이팅의 차이     테크니컬 라이팅 창작 라이팅 내용 사실적, 직설적 창의적, 상상, 상징적 대상 특정인 일반인 형식 형식적, 표준, 학문적 자유로운 형식 구성 순차적 원하는 대로 자유롭게 테크니컬 라이팅의 예로는 ‘프리젠테이션 문서’, ‘소프트웨어 문서’, ‘이력서’, ‘작업 가이드’, ‘기사’, ‘회사 소개’ 등을 들 수 있다. 지금 여러분이 보고 있는 이 글도 역시 테크니컬 라이팅에 속한다. 이러한 테크니컬 라이팅의 가장 큰 특징을 요약해 보면 다음과 같다. 먼저 표현이 ‘명확’해야 한다. 모호한 설명은 피하고 쉽게 이해할 수 있도록 명확하게 기술해야 한다. 그리고 ‘사실’만을 전달해야 한다. 저자의 주관적인 생각이나 추측을 기술하는 것이 아니라 정확한 사실만을 기술해야 한다. 용어나 문법 등이 ‘올바른’ 것이어야 한다. 표준에 맞지 않은 표현이나 용어 등을 사용해서는 안 된다. 정보 검색이 ‘쉬워야’ 한다. 정보는 많이 제공하면서 원하는 정보를 쉽게 찾을 수 없도록 해 놓으면 정보를 찾기 위한 시간이 너무 많이 소모된다. 따라서 제목과 부제목을 잘 활용하고 목차와 색인을 잘 구성해야 한다. 주제를 쉽게 이해할 수 있도록 ‘다양하고 풍부한’ 정보를 제공해야 한다. 그렇다면 ‘테크니컬 라이터(Technical Writer)’의 뜻은 이제 쉽게 유추할 수 있을 것이다. ‘테크니컬 라이터’는 위에서 설명한 ‘테크니컬 라이팅’을 하는 사람들을 일컫는 말이다. 테크니컬 라이터는 문서를 작성할 뿐만 아니라 기획, 검수, 애플리케이션 테스트, 도움말 제작 등 다양한 업무를 하기도 한다. 그리고 이렇게 해서 만들어진 작업 결과물을 ‘테크니컬 문서(또는 기술 문서)’라고 부른다. 이제 앞에서 예시한 여러 가지 테크니컬 라이팅 중에 ‘소프트웨어 기술 문서’를 뽑아 이를 보다 자세히 알아보도록 하겠다. 여기에서는 ‘나모 웹에디터 FX suite’의 기술 문서를 예로 하여 소프트웨어 기술 문서의 종류에 대해서 자세히 알아보기로 한다. 소프트웨어 기술 문서 어떤 제품을 처음 접했을 때, 아무런 도움 없이도 제품을 계속 사용하면서 시행착오를 겪다 보면 사용법을 익힐 수 있다. 하지만 보다 빠르고 쉽게, 그리고 최대한 제품을 활용하려면 ‘도움’이 필요하다. 이러한 ‘도움’에는 콜센터와 같은 전화 상담이 있을 수 있고 이미 기능을 알고 있는 주위 사람들의 설명이 있을 수 있고, 책이 될 수도 있고, 멀티미디어 자료가 될 수도 있다. 여러 가지 ‘도움’ 중에 가장 기본적이고 대표적인 방법이 예전에는 ‘매뉴얼’을 제공하는 것이었다. 물론 요즘에도 매뉴얼을 제공하는 업체가 굉장히 많다. 카메라, TV, 휴대폰을 사도 매뉴얼이 있고 소프트웨어를 사도 매뉴얼이 있다. 하지만 최근에는 종이로 된 매뉴얼보다는 온라인 기술 문서를 선호하는 경향이 점점 증가하고 있다. 온라인 기술 문서는 말 그대로 책으로 보는 것이 아니라 컴퓨터(단말기) 화면상에서 볼 수 있는 기술 문서를 말한다. 대표적인 온라인 기술 문서 형식으로는 PDF 문서, HTML Help, 웹 사이트에서 제공하는 기술 문서를 들 수 있다. PDF 문서는 검색, 인쇄 등이 가능하고 프린트로 출력된 문서의 모든 요소를 갖추고 있는 파일 형식이다. Adobe사의 Acrobat과 같은 소프트웨어를 이용하여 만들 수 있으며 PDF 문서를 보려면 Acrobat Reader(아크로뱃 리더)가 설치되어 있어야 한다. HTML Help(*.chm)는 Microsoft사에서 개발한 온라인 도움말 형식으로 현재 대부분의 소프트웨어에서 사용하고 있는 도움말 형식이다. 다음 그림은 전 세계 테크니컬 라이터를 대상으로 가장 많이 사용하는 기술 문서 형식에 대한 설문 조사 결과이다. <그림 1> 소프트웨어 기술 문서로 가장 많이 사용하고 있는 형식 (출처:http://www.winwriters.com) 여기에서도 볼 수 있듯이 매뉴얼 보다는 PDF 문서나 HTML Help(Browser-based Help), 웹 기술 문서가 점점 대표적인 기술 문서 형식으로 자리잡아가고 있음을 볼 수 있다. 물론 여전히 매뉴얼이 중요하게 여겨지기는 하지만 해가 거듭될수록 매뉴얼의 비율이 낮아지고 있다. 그럼 매뉴얼과 같은 오프라인 문서가 아닌 온라인 기술 문서를 제공할 때 얻을 수 있는 장점은 무엇일까? 여러 가지가 있겠지만 우선 업데이트가 쉽고, 책으로 만드는데 드는 비용이 절감되고, 보다 쉽게 정보를 검색할 수 있고, 다이내믹하게 구성할 수 있다는 점등을 들 수 있다. 온라인 기술 문서의 장점을 정리해 보면 다음과 같다. 온라인 기술 문서에서는 원하는 정보를 쉽게 검색할 수 있다. 책에서 원하는 정보를 찾기 위해서는 목차나 색인을 참조한다 해도 시간이 걸리기 마련이다. 하지만 온라인 도움말에서는 검색 기능을 사용하면 원하는 정보를 보다 쉽고 빠르게 찾을 수 있다. 또한 정보를 찾기 위해 하던 일을 멈추고 책을 찾아 보던 것과는 달리 화면에서 바로 정보를 찾아 적용해 볼 수 있다. 관련된 정보를 찾아보기 쉽다. 하나의 정보를 찾고 나서 그와 관련된 또 다른 정보를 보기 위해 다시 목차나 색인을 참고할 필요 없이 다음 그림과 같이 작성자가 제공하는 관련 항목 링크를 클릭하는 것만으로도 관련 정보를 쉽게 찾아 볼 수 있다. <그림 2> 일반적인 하이퍼링크 형식의 관련 항목 링크 <그림 3> HTML Help 저작 툴을 활용하여 만든 관련 항목 링크 판매자 입장에서는 비용을 절감할 수 있다. 온라인 도움말을 제공하게 되면 책을 만드는데 들어가는 종이, 인쇄, 생산, 배포 등에 소요되는 비용을 줄일 수 있다. 제공 방법이 쉽다. 따로 인쇄하는 과정을 거치지 않고 온라인으로 바로 출판하여 제공할 수 있어 복잡한 과정 없이 쉽게 제공할 수 있다. 업데이트가 쉽다. 인쇄해서 제공하는 경우에는 문서가 업데이트되면 다시 인쇄해서 책으로 만들어야 하는 번거로움이 따른다. 하지만 온라인 기술 문서는 수시로 업데이트하여 편리하게 제공할 수 있다. 자, 지금까지 '테크니컬 라이팅'의 기본 개념과 '온라인 소프트웨어 기술 문서'에 대해서 살펴보았다. 그럼 다음 번에는 대표적인 온라인 기술 문서 형식인 HTML Help가 무엇인지 알아보고 이를 구성하는 파일에는 무엇이 있는지 살펴보도록 하겠다. @

HTML페이지에서 방법으로 한번의 버튼 클릭으로 폼안의 내용을 Clipboard에 복사하는 방법
 
function exe_copy( name)
{
 var obj = eval("document.all." + name);
 var doc = obj.createTextRange();
 doc.select();
 doc.execCommand('copy');
 alert('클립보드에 복사 되었습니다.');
}
 
function exe_paste( name)
{
 var obj = eval("document.all." + name);
 var doc = obj.createTextRange();
 doc.select();
 doc.execCommand('paste');
 alert('클립보드의 내용이 붙여넣기 되었습니다.');
}

오늘 Apache 에서 쿠키 설정할수 있게 하는 방법을 알았습니다.

김정균님이 갈켜 주셨어요.. Apache 에서 Header 넣는 방법을요 ^^;

우선 Apache에서 mod_headers.c 모듈이 있어야 합니다.
========================================================================
# httpd -l
========================================================================

위의 명령어로 mod_headers.c 가 있는지 확인하시고 없으면
Apache 에서 모듈을 다시 설치 하시기 바랍니다. (재설치 해야죠 t.t)
=========================================================================(수정)
DSO 모드 일때는 httpd -l 을 하더라도 설치된 모듈이 다 나오지 않습니다.
말그대로 동적(dynamic)이니까는요..

DSO모드로 설치했을 경우에는 httpd.conf 파일 안에 headers.c 모듈을 로딩하는지 확인해야 합니다.
=========================================================================(수정)
아마 대부분 없을 겁니다. Apache 컴파일시 --enable-module=headers 의 내용을
넣고 컴파일 하시기 바랍니다.

그리고 다음 내용을 conf/httpd.conf 파일에 넣으세요.

========================================================================(수정)
<IfModule mod_header.c>
Header add P3P "CP='CAO PSA CONi OTR OUR DEM ONL'"
</IfModule>
========================================================================(수정)

=========================================================================
[]# telnet www.domail.com 80
Trying 211.xxx.xxx.xxx...
Connected to www.domail.com
Escape character is '^]'.
GET / HTTP/1.1
Host: www.domail.com

HTTP/1.1 200 OK
Date: Thu, 01 Nov 2001 10:00:29 GMT
Server: Apache/1.3.22 (Unix) mod_jk PHP/4.0.6 mod_gzip/1.3.19.1a
P3P: CP='CAO PSA CONi OTR OUR DEM ONL'
Last-Modified: Mon, 24 Sep 2001 08:48:30 GMT
ETag: "122f4f-46-3baef35e"
Accept-Ranges: bytes
Content-Length: 70
Content-Type: text/html
=========================================================================
위의 내용을 보시면 Header 에 P3P이 내용이 있으면 됩니다.

P3P 설정을 해 놓으시면 Internet Explorer 6 에서 쿠키 제한에서 "높게" 설정을하여도
제1쿠키 및 제3쿠키 까지 사용이 가능합니다.

위의내용을 IIS 에서는 쉽게 "헤더"에 사용자 정의 Header에 추가 만 하시면 됩니다.

 

이상 출처 http://kltp.kldp.org/stories.php?story=01/11/01/9121595

 

IE6대 버젼은 P3P를 사용하고 있읍니다..

이 P3P때문에 기본적으로 쿠키를 제한하게 되는데 이를 해결하기 위해서는
IIS--> 사이트등록정보-->사용자 정의 HTTP헤터 추가 편집 에서
사용자 정의 해더에 P3P
헤더 값에 CP="ALL CURa ADMa DEVa TAIa OUR BUS IND PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA POL HEA PRE LOC OTC"을 설정해주시면 됩니다..

자세한 것은 http://www.w3.org/P3P 의 내용을 참조하세여..

아파치의 경우

<Location / >
Header append P3P "CP='NOI DEVa TAIa OUR BUS UNI'"
</Location>

#<IfModule mod_headers.c>
#Header add P3P "CP='CAO PSA CONi OTR OUR DEM ONL'"
#</IfModule>
#
<VirtualHost 211.233.59.243>
   Header set P3P "CP='NOI DEVa TAIa OUR BUS UNI'"

 

JSP에서 끝내는 방법
<%response.setHeader("P3P","CP='CAO PSA CONi OTR OUR DEM ONL'");%>

 

이상출처 맨땅에해딩해봤니-네이버블로그

IE6부터는 P3P라는 새로운 개인정보 규약을 도입했습니다.
이는 쿠키를 통해서 사용자의 개인정보를 사용자의 동의 없이 가져가지 않도록
하는 장치이기도 합니다.
이로 인해서 기존 사이트의 쿠키 정보가 제대로 저장되지 않는 문제가 생기게
되었는데 이를 해결할 방법을 찾아보게 되었습니다.
아파치에 세팅하는 상세한 부분은 아래 글과 중복이 되므로 생략하였습니다.
저 역시도 부족한 영어로 간략하게 사용 방법만을 올리니 자세한 스펙은 첨부한 URL을 참고해 주십시오.

참고.
P3P 규약: http://www.w3.org/P3P/
Apache에서 P3P 설정하기: http://kltp.kldp.org/stories.php?story=01/11/01/9121595

본.
P3P 설정은 크게 두가지로 나뉩니다.
1. HTTP 헤더 정의 (아파치의 httpd.conf)
2. P3P 규약에 의거한 XML 설명문 (htdocs 아래의 xml)

HTTP 헤더에 P3P에 대한 정보가 없으면 IE6은 쿠키를 차단합니다.
HTTP 헤더에 P3P 헤더를 남기는 방법은 링크한 팁을 참고하십시오.

IE6에는 "보기" 메뉴에서 "개인정보 보고서"라는 메뉴가 추가되었습니다.
이 메뉴는 현재 페이지의 P3P 규약 준수에 대한 정보를 담고 있습니다.
(XML문은 UTF-8을 사용함이 원칙이나 EUC-KR로 지정해도 되기는 하더군요.)

예를들어 위의 P3P 규약 사이트에 접속하신후 IE6의 개인정보 보고서 메뉴를 연뒤
아무 URL이나 더블클릭 해보십시오.
"다음에 대한 개인정보 요약 ..." 식으로 나올 것입니다.
kldp는 이 글을 작성하는 현재 P3P가 적용되어 있지 않아 오류메시지가 나옵니다.

P3P 헤더를 HTTP 헤더에 보낸다고 모든게 끝나지는 않습니다.
P3P 헤더는 압축 요약이며 정책에 대한 상세한 내역을 제공해야 합니다.
다음 링크를 참고하시면 비교적 쉽게 만드실 수 있습니다.
(W3C 홈페이지의 링크에서 찾았습니다. 얘네들은 이런 정보 공개가 잘 되어 있는게 부럽네요. 다른 링크는 비용을 지불할 것을 요구했거든요.)

http://fs.pics.enc.or.jp/p3pwiz/p3p_en.html (무료)

XML문은 물론 전송해야 하는 헤더정보까지 자세하게 알려줍니다.


저는 초보자들이 간략하게 사용할 수 있는 방법을 설명하려 합니다.
P3P에 대해 감이 잡히셨으면 위 규약에 대해 좀 더 공부하셔서 제대로 된 멋진 정책 페이지를 만드시길 바랍니다.

먼저 httpd.conf를 편집합니다.
XML페이지가 저장될 위치를 설정합니다.
일반적으로 /w3c/ 를 사용합니다.
----------
<IfModule mod_alias.c>
Alias /w3c/ "/usr/local/apache/htdocs/w3c/"
<Directory "/usr/local/apache/htdocs/w3c">
Options None
AllowOverride None
Order allow,deny
Allow from all
</Directory>
</IfModule>
----------

다음에는 P3P 헤더를 남기도록 설정합니다.
policyref 의 your.domain 부분을 대표 도메인으로 바꿔 주십시오. (예: kldp.org)
----------
<IfModule mod_headers.c>
Header add P3P "policyref=\"http://your.domain/w3c/p3p.xml\" CP=\"ALL CURa ADMa DEVa TAIa OUR BUS IND PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA POL HEA PRE LOC OTC\""
</IfModule>
----------

웹서버를 리셋한후 htdocs 아래에 w3c 라는 디렉토리를 만듭니다.
p3p.xml 파일은 접근 지정자로 어느 디렉토리에 어떠한 정책을 사용할 것인지를 정의하는 파일입니다.
역시 your.domain 부분을 바꾸어 주십시오.
----------
<?xml version="1.0" ?>
<META xmlns="http://www.w3.org/2002/01/P3Pv1">
<POLICY-REFERENCES>
<POLICY-REF about="http://your.domain/w3c/p3policy.xml">
<INCLUDE>/*</INCLUDE>
</POLICY-REF>

</POLICY-REFERENCES>
</META>
----------

역시 w3c 디렉토리 밑에 p3policy.xml 을 만듭니다.
인코딩은 EUC-KR 을 사용하면 한글을 쓸수도 있으나 표준안은 UTF-8을 쓸것을 권하고 있습니다.
속편하게 영어로만 간략히 쓰십시오. ;-)
역시 your.domain 부분과 your offical name 부분을 바꾸어 주십시오.
----------
<?xml version="1.0" encoding="UTF-8"?>
<POLICY xmlns="http://www.w3.org/2002/02/P3Pv1"
discuri="http://your.domain/w3c/info.html">

<ENTITY>
<DATA-GROUP>
<DATA ref="#business.name">your offical name</DATA>
</DATA-GROUP>
</ENTITY>
<ACCESS><all/></ACCESS>

</POLICY>
----------
discurl 부분은 전체 개인보호 정책에 관한 항목입니다.
이미 상업적 페이지를 운영하신다면 "개인정보 보호정책 - policy.html" 등의 이름으로
만들어 두셨겠지요? 없으면 이번 기회에 새로 만드세요. :-)

이제 끝입니다. IE6을 사용해서 테스트해 보십시오.
"보기" 메뉴의 "개인정보 보고서..." 메뉴를 선택한뒤 URL 중의 아무 항목이나
더블클릭해 보십시오.

" 다음에 대한 개인정보 요약:
your offical name
이 웹 사이트의 전체 개인 정보 보호 정책을 읽으려면 여기를 클릭하십시오. "
('여기' 부분을 클릭해서 discurl 로 지정한 페이지가 나오는지 확인합니다.)



결.
P3P의 의의는 웹사이트 관리자와 사용자를 귀찮게 하기 위함이 아닙니다.
사실상 웹사이트 관리자는 헤더 정보만 추가하고 기타 P3P 규약을 지키지
않아도 문제는 전혀 없습니다.

P3P를 도입한 목적은 사용자의 정보를 가져감에 있어 사용자에게 명시적으로
알린다는데 있습니다. 즉 사용자는 "개인정보 관리자"를 통해서 사이트의
개인정보 보호규약을 언제든지 열람할 수 있으며 규약을 제공하지 않거나
개인정보의 침해 우려가 있을 경우 차단도 가능하다는 것입니다.
어느 구석에 작게 박혀 있는 "개인 정보 보호에 관한 사항" 이라는 링크보다
훨씬 찾아보기 쉽고 일정한 규칙에 의거하여 작성하기에 이해하기 쉬우며
사용자 스스로가 자신의 정보를 컨트롤할 수 있는 길을 열었다는 점에
의의를 두어야 할 것입니다.
좀 더 부연설명을 붙이자면, 이때까지 쿠키란 "모두 허용" 아니면 "모두 거부"
혹은 "물어보기(꽤 귀찮음)" 밖에 없던 것에 비해 신뢰가 가지 않는 사이트는
영구히 거절하고 신뢰가 가는 사이트는 허용할 수 있도록 보다 세밀한 제어가
가능해 졌다는 점에서 또하나의 발전이라 볼 수 있습니다.

차단을 하느냐 마느냐는 전적으로 사용자에게 달린 문제이며 신뢰성 있는
사이트 구축을 위해서는 개인정보에 관한 사항을 "의무적"으로 제공하는게
올바르다고 생각됩니다. (예를들어, 프라이버시가 침해된다고 느낄경우
상담할 수 있는 연락처 정보 등이 반드시 들어가야 한다고 봅니다.)

꽤 어설프게 설명한 감이 있지만, P3P가 무엇인가, 그리고 어떻게 적용해야
하는가를 궁금해 하시는 분들께 조금이나마 도움이 되기를 바랍니다.