Additional characters from ISO 8859-1

ISO Latin-1 characters

HTTP 에러 코드표

100: Continue

101: Switching Protocols

200: OK, 에러없이 전송 성공

202: Accepted, 서버가 클라이언트의 명령을 받음.

203: Non-authoritavive Information, 서버가 클라이언트 요구중 일부만 정송

204: Non Content, 클라이언트 요구를 처리했으나 전송할 데이터가 없음.

205: Reset Content

206: Partial Content

300: Multiple Choisces, 최근에 옮겨진 데이터를 요청

301: Moved Permanently, 요구한 데이터를 변경된 임시 URL에서 찾았음.

302: Moved Permanently, 요구한 데이터가 변경된 URL에 있음을 명시.

303: See Other, 요구한 데이터를 변경하지 않았기 때문에 문제가 있음.

304: Not modified

305: Use Proxy

400: Bad Request, 요청실패
문법상 오류가 있어, 서버가 요청사항을 이해하지 못함, 클라이언트는 수정없이 요청사항을 반복하지 않을 것이다.

401.1: Unauthorized, 권한 없음 (접속실패)
이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지 않을 경우 발생한다. 이 경우, 여러분이 요청한 자원에 접근할 수 있는 권한을 부여받기 위해 서버 운영자에게 요청해야 할 것이다.

401.2: Unauthorized, 권한 없음(서버설정으로 인한 접속 실패)
이 에러는 서버에 로그온 하려는 요청사항이 서버에 들어있는 권한과 비교했을 때 맞지않을 경우 발생한다. 이것은 일반적을 으로 적절한 www-authenticate head field를 전송하지 않아서 발생한다.

401.3: Unauthorized, 권한 없음(자원에 대한 ACL에 기인한 권한 없음)
이 에러는 클라이언트가 특정 자원에 접근할 수 없을 때 발생한다. 이 자원은 페이지가 될 수도 있고 , 클라이언트의 주소 입력란에 명기된 파일일 수도 있다. 아니면 클라이언트가 행당 주소로 들어갈 때 이용되는 또 다른 파일일 수도 있다. 여러분이 접근할 전체 주소를 다시 확인해 보고 웹 서버 운영자에게 여러분이 자원에 접근할 권한이 있는지를 확인해 본다.

401.4: Unauthorized, 권한 없음(필터에 의한 권한 부여 실패)
이 에러는 웹 서버가 서버에 접속하는 사용자들을 확인하기 위해 설치한 필터 프로그램이 있음을 의미한다. 서버에 접속한는 데 이용되는 인증 과정이 이런 필터 프로그램에 의해 거부되었다.

401.5: Unauthorized, 권한 없음(ISA PI/CGI 애플리케이션에 의한 권한부여 실패)
이 에러는 여러분이 이용하려는 웹 서버의 어드레스에 ISA PI나 CGI프로그램이 설치되어 있어 사용자의 권한을 검증하고 있음을 의미한다. 서버에 접속하는 데 이용되는 인증 과정이 이 프로그램에 의해 거부되었다.

402: Payment Required, 예약됨.

403.1: Forbidden, 금지(수행접근 금지)
이 오류는 CGI나 ISAPI,혹은 수행시키지 못하도록 되어있는 디렉토리 내의 실행 파일을 수행시키려고 했을 때 발생한다.

403.2: Forbidden,  금지(읽기 접근 금지)
이 에러는 브라우저가 접근한 디렉토리에 가용한 디폴트 페이지가 없을 경우에 발생한다. 아니면 Eecute나 Script로 분한이 부여된 디렉토리에 들어있는 HTML페이지를 보려했을 때 발생한다.

403.4: Forbidden,  금지(SSL 필요함)
이 에러는 여러분이 접근하려는 페이지가 SSL로 보안유지 되고 있는 것일 때 발생한다. 이것을 보기 위해서 여러분은 주소를 입력하기 전에 먼저 SSL을 이용할 수 있어야 한다.

403.5: Forbidden,  금지 (SSL 128필요함)
이 에러는 접근하려는 페이지가 SSL로 보안유지 되고 있는 것일 때 발생한다. 이 자원을 보기 위해서는 여러분의 브라우저가 SSL의 행당 레벌을 지원해야 한다. 여러분의 브라우저가 128비트의 SSL을 지원하는 지를 확인해 본다.

403.6: Forbidden,  금지(IP 주소 거부됨)
이 에러는 서버가 사이트에 접근이 허용되지 않은 IP주소를 갖고 있는데, 사용자가 이 주소로 접근하려 했을 때 발생한다.

403.7: Forbidden,  금지(클라이언트 확인 필요)
이 에러는 여러분이 접근하려는 자원이 서버가 인식하기 위해 여러분의 브라우저에게 클라이언트 SSL을 요청하는 경우 발생한다. 이것은 여러분이 자원을 이용할 수 있는 상용자임을 입증하는데 사용된다.

403.8: Forbidden,  금지 (사이트 접근 거부됨)
이 에러는 웹 서버가 요청사항을 수행하고 있지 않거나, 해당 사이트에 접근하는 것이 허락되지 않았을 경우 발생한다.

403.9: Forbidden, 접근 금지(연결된 사용자수 과다)
이 에러는 웹서버 BUSY 상태에 있어서 여러분의 요청을 수행할수 없을 경우에 발생한다. 잠시 후에 다시 접근해 보도록 한다.

403.10: Forbidden,  접근금지(설정이 확실 하지 않음)
이 순간 웹 서버의 설정쪽에 문제가 있다.

403.11: Forbidden,  접근금지(패스워드 변경됨)
이 에러는 사용자 확인단계에서 잘못된 패스워드를 입력했을 경우 발생한다. 페이지를 갱신한 후 다시 시도해 본다.

403.12: Forbidden,  접근금지(Mapper 접근 금지됨)
여러분의 클이언트 인증용 맵이 해당 웹 사이트에 접근하는 것이 거부되었다. 사이트 운영자에게 클라이언트 인증 허가를 요청한다. 또한 여러분은 여러분의 클라이언트 인증을 바꿀 수도 있다.

404: Not Found, 문서를 찾을 수 없음.
웹 서버가 요청한 파일이나 스크립트를 찾지 못했다. URL을 다시 잘 보고 주소가 올바로 입력되었는지 확인해본다.
- 해결방법: a.도구 ▶ 인터넷옵션 ▶ 일반 ▶ 쿠키삭제, 파일삭제, 목록지우기
                 b.도구 ▶ 인터넷옵션 ▶ 고급 ▶ [URL을 항상 UTF-8FH로 보냄] 체크 해제.

405: Method not allowed, 메쏘드 허용안됨
Request 라인에 명시된 메쏘드를 수행하기 위해 해당 자원의 이용이 허용되지 않았다. 여러분이 요청한 자원에 적절한 MIME 타입을 갖고 있는지 확인해 본다.

406: Not Acceptable, 받아들일 수 없음
요청 사항에 필요한 자원은 요청 사항으로 전달된 Acceptheader에 따라 "Not Acceptable"인 내용을 가진 Response 개체만을 만들 수 있다.

407: Proxy Authentication Required, 대리(Proxy) 인증이 필요함
해당 요청이 수행되도록 proxy 서버에게 인증을 받아야 한다. proxy서버로 로그온 한 후에 다기 시도해 본다.

408: Request timeout, 요청시간이 지남

409: Conflict

410: Gone, 영구적으로 사용할 수 없음.

411: Length Required

412: Precondition Failed, 선결조건 실패
Request-header field에 하나 이상에 선결조건에 대한 값이 서버에서 테스트 결과 FALSE로 나왔을 경우에 발생한다. 현재 자원의 메타-정보가 하나 이상의 자원에 적용되는 것을 막기 위한 클라이언트 선결조건이 의도되어졌다.

413: Request entity too large

414: Request-URI too long, 요청한 URI가 너무 길다
요 청한 URI가 너무 길어서 서버가 요청 사항의 이행을 거부했다. 이렇게 희귀한 상황은 아래와 같은 경우에만 발생한다. 클라이언트가 긴 탐색용 정보를 가지고 POST 요청을 GET으로 부적절하게 전환했다. 클라이언트가 Redirection문제를 접하게 되었다. 서버가, 몇몇 서버가 사용하고 있는 요청한 URI 를 읽고 처리하는 고정된 길이의 메로리 버퍼를 이용해 보안체계에 들어가려는 , 클라이언트에 의한 공격을 받고 있다.

415: Unsupported media type

500: Internal Server Error, 서버 내부 오류
웹 서버가 요청사항을 수행할 수 없다. 다시 한 번 요청해 본다.

501: Not Implemented, 적용안됨
웹 서버가 요청사항을 수행하는 데 필요한 기능을 지원하지 않는다. 에러가 발생한 URL을 확인한 후에, 문제가 지속될 경우에는 웹 서버 운영자에게 연락한다.

502: Bad gateway, 게이트웨이 상태 나쁨/서버의 과부하 상태
Gateway나 proxy로 활동하고 있는 서버가 요구 사항을 접수한 upstream 서버로부터 불명확한 답변을 접수 했을 때 발생한다. 만약 문제가 지속된다면 웹 서버 운영자와 상의해 본다.

503: Service Unavailable, 외부 서비스가 죽었거나 현재 멈춘 상태 또는 이용할 수 없는 서비스
서버는 현재 일시적인 과부하 또는 관리(유지,보수) 때문에 요청을 처리할 수 없다.
이것은 약간의 지연후 덜게될 일시적인 상태를 말한다.
Retry-After 헤더에 지연의 길이가 표시하게 될지도 모른다.
만 약 Retry-After를 받지 못했다면 클라이언트는 500 응답을 위해 하고자 했는것처럼 응답을 처리해야 한다. 상태코드의 존재는 서버가 과부하가 걸릴때 그것을 사용해야한다는 것을 말하는 것이 아니다. 몇몇 서버는 접속을 거부하는 것을 바랄지도 모른다.

504: Gateway timeout

iframe 으로 불려질 문서의 크기에 따라 자동으로 크기를 설정 해 주는 스크립트 입니다
많은 분들이 필요하신 소스일것 같네요

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> J@sko Sample Script </title>
<meta name="Generator" content="EditPlus">

<!-- [1단계] 아래의 코드를 <head> 와 </head> 사이에 붙여 넣으세요 -->

<script type="text/javascript">

var iframeids=["myframe"] // iframe 에 사용할 ID 를 지정 해 주세요

var iframehide="yes"

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent)
currentfr.attachEvent("onload", readjustIframe)
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

<!----------------- 여기까지 ----------------->

</head>

<body>

<!-- [2단계] 아래의 방법으로 iframe 태그를 넣으세요 -->

<iframe id="myframe" src="http://www.jasko.co.kr/homepage/main.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

<!-- 여기에서 주의할 점은 스크립트의 맨 처음에 지정한 iframe 의 아이디를 반드시 사용해야 한다는 점입니다 --->

<!----------------- 여기까지 ----------------->

<p>
위의 페이지는 iframe 태그에 의해 불려진 페이지의 전체 입니다<br>
이처럼 이 스크립트를 사용하면 불려질 문서의 길이가 자동으로 체크되어 그 길이만큼 iframe 이 보여집니다

</body>
</html>

출처 : 자스코

[표 - 리사이즈 별 커서]

<SCRIPT Language="JavaScript">
<!--
/*
* This function parses comma separated name=value 
* argument pairs from the query string of the URL. 
* It stores the name=value pairs in 
* properties of an object and then returns that object
* 
* Jim K - From Orielly JSB pp 244
*/

function getArgs() {
	var args = new Object();
	// Get Query String
	var query = location.search.substring(1); 
	// Split query at the comma
	var pairs = query.split("&"); 
	
	// Begin loop through the querystring
	for(var i = 0; i < pairs.length; i++) {

		// Look for "name=value"
		var pos = pairs[i].indexOf('='); 
		// if not found, skip to next
		if (pos == -1) continue; 
		// Extract the name
		var argname = pairs[i].substring(0,pos); 
		
		// Extract the value
		var value = pairs[i].substring(pos+1); 
		// Store as a property
		args[argname] = unescape(value); 
	}
	return args; // Return the Object
}

// Set Defaults
var StyleSheet = "StyleSheet"
var OuterTableWidth = "640"

// Get the values back
var args = getArgs(); //Get the arguments
if (args.CSSPATH) StyleSheet = (args.CSSPATH);
if (args.OTBL) OuterTableWidth = (args.OTBL);
// write the path for the style sheet now
document.write("<link rel='stylesheet' 
href='http://www.jamesrking.com/_scriptLib/Includes/StyleSheet" 
+ args.CSSPATH + ".css'>");

//-->
</SCRIPT>

웹에디터, web editor 소스 (학습용)

기본 원리는 IFAME의을 편집 할 수 있도록 하고 자바스크립트에서 DHTML편집 할 수 있는 형태이며 저장은 자바스크립트에서 값을 변환 하고 넘기는 방식 입니다.

1. 편집창 만들기

편집창은 iframe태그를 사용 합니다.

<iframe></iframe>

속성으로는 다음과 같은 것들이 있습니다.

src="" iframe에서 연결 시킬 경로 width="" 너비 height="" 높이 name="" 이름으로 FRAME의 이름과 동일 하며 taget의 대상이 될 수 있습니다.

예) <iframe src="http://www.yahoo.co.kr" width="700" height="400" name="html"></ifame>

ifrme은 반드시 종료태그가 있어야 합니다.

IFRAME은 FRAME을 이미지 형식으로 만드는 태그 입니다. 하지만 일반형식은 브라우저의 내용을 그냥 읽어오는 형식 입니다. 그래서 편집 가능 하도록 자바스크립트에서 만들어 줍니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제1</TITLE>
</HEAD>

<BODY>
<IFRAME NAME=dhtmlframe></IFRAME>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
    dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>

</BODY>
</HTML>

여기서 자바스크립트는 iframe이후에 넣어 줘야 합니다.
그럼 위의 파일을 html로 만들고 브라우저에서 읽어오면 편집 가능 하도록 되어 있을 것 입니다.

2. 편집툴바 만들기

<HEAD>와 </HEAD>사이에 자바 스크립트 만듭니다.

<SCRIPT langauge="javascript">
    function htmledit(excute){
    dhtmlframe.document.execCommand(excute);
}
</SCRIPT>

그리고 툴바에는 볼드,이탤릭,언더라인 만들고 다음 과 링크를 연결 합니다.

<A href="javascript:htmledit('BOLD');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>

다음 예제를 저장 하고 브라우저를 통해 실행 합니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제2</TITLE>

<SCRIPT langauge="javascript">
function htmledit(excute){
        dhtmlframe.document.execCommand(excute);
}
</SCRIPT>
</HEAD>

<BODY>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<p>
<IFRAME NAME=dhtmlframe></IFRAME>

<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
    dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</BODY>

</HTML>

브라우저에서 편집 가능 한것을 볼수 있습니다.

볼드,이탤릭,언더라인 이외 무엇이 있을까요.

cut -  자르기
copy - 복사
paste - 붙여넣기
justifyleft - 좌측정렬
justifycenter - 중심정렬
justifyright - 우측정렬
insertorderedlist - 점표시목록
insertunorderedlist - 숫자목록
outdent - 들여쓰기 줄이기
indent- 들여쓰기 늘이기
createlink - 링크
fontname - 글꼴
fontSize - 글사이즈

<A href="javascript:htmledit('cut');">자르기</a>

형식등로 사용 할 수 있습니다.

그러나 글꼴 이나 글크기등은 값이 필요 합니다. 이경우 htmledit(excute)에서 excute이외 하나더 인자가 필요 합니다. values 라고 하나 더 추가 합니다.

<SCRIPT langauge="javascript">
function htmledit(excute,values){
        if(values==null){
                dhtmlframe.document.execCommand(excute);
        }
        else
                dhtmlframe.document.execCommand(excute,"",values);
        }
}
</SCRIPT>

글꼴을 궁서체로 만들고 싶으면

htmledit('fontname','궁서체') 가 됩니다. 다음 예제를 테스트 해보세요

<HTML>

<HEAD>
<TITLE>웹에디터 예제3</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
        if(values==null)
        {
                dhtmlframe.document.execCommand(excute);
        }
        else
        {
                dhtmlframe.document.execCommand(excute,"",values);
        }
}
</SCRIPT>
</HEAD>

<BODY>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 &gt;
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 &gt;
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>

<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
    dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>
</BODY>

</HTML>

3. 값넘기기

이제까지 HTML과 자바스크립트로만 이용 해서 만들었습니다. 이렇게 만든 값을 CGI(PHP,ASP..)등으로 보내고야 합니다. 아시다 싶이 값을 전송 하는것은 form태그를 시용 합니다.

form을 만듭니다. 그리고 form의 속성중 name을 form으로 만들고(아무거나 만들어도 상관 없겠죠)

<IFRAME>밑에 <TEXTAREA></TEXTAREA>을 만듭니다. 이름은 아무거나.. 저는 comment라 지었습니다.

그리고 HEAD자바 스크립트에 다음과 같이 추가 합니다.

function datasubmit()
{
        form.comment.value = dhtmlframe.document.body.innerHTML;
}

아래의 예제를 실행 하고 HTML보기를 클릭 하면 HTML소스가 <TEXTAREA>에 복사 되는 것을 볼 수 있습니다.

그상태에서 다른 CGI에서 comment로 변수로 읽어 저장 되는 것 입니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제4</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
        if(values==null)
        {
                dhtmlframe.document.execCommand(excute);
        }
        else
        {
                dhtmlframe.document.execCommand(excute,"",values);
        }
}
function datasubmit()
{
        form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>

<BODY>
<form name=form>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 &gt;
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 &gt;
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><A href="javascript:datasubmit()">HTML보기</a>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
    dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>

</form>
</BODY>

</HTML>

그럼 다른 CGI(PHP,ASP..)을 보내기 위해 소스를 다듬어 보도록 하겠습니다.
먼저 <TEXTAREA>에 STYLE="display: none"을 추가 합니다.
그럼 <TEXTAREA STYLE="display: none">가 되며 브라우저에서 보이지 않게 됩니다.
그리고 <form>에는 제대로 보내고자 하는 CGI위치와 method를 지정 합니다.

<A href="javascript:datasubmit()">HTML보기</a>을
<input type="submit" value="확인" Onclick="datasubmit()"> 으로 바꿉니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제5</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
        if(values==null)
        {
                dhtmlframe.document.execCommand(excute);
        }
        else
        {
                dhtmlframe.document.execCommand(excute,"",values);
        }
}
function datasubmit()
{
        form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>

<BODY>
<form name=form method=post action="test.php">
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 &gt;
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 &gt;
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><input type="submit" value="확인" Onclick="datasubmit()">
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript
    dhtmlframe.document.designMode = "On"
// - JavaScript - -->
</SCRIPT>

</form>
</BODY>

</HTML>

지금까지 공개 되었던 소스보다 간단하다는것을 알 수 있습니다. 하지만 중요한 요소는 다들어 가 있으며 여기서부터는 살을 붙이고 디자인도 바꾸면 됩니다. 그 몫은 여러분이 해야 할 일 입니다.

• HTML에 JavaScript 삽입
  <script language="javascript">
JavaScript Statements
</script>
  
  
• HTML에 JavaScript 코드 파일 삽입
  <script language="javascipt" src="src.js">
</script>
  
  
• 변수의 대소문자 구분
  
  
• 변수에 포함된 데이터의 형을 지정하지 않고, JavaScript 인터프리터가 변수에 포함된 데이터 형을 추적하고 변환.
  
  
• JavaScript 데이터 형
  • 숫 자 형 : 정수와 부동 소수
  • BOOLEAN : true, false
  • STRING : 작은 따옴표나 큰 따옴표에 들어가 있는 값으로, 특수문자 포맷 사용시에는 '\'와 함께 사용.
  • null : 아무런 값도 없는 것으로, 변수를 초기화 시키거나 어떤 값이나 이벤트를 지울 때 사용됨
  • undefined : 변수만 만들고, 값을 할당하지 않은 상태
  
  
• 유형간의 변환
  • 스트링 피연산자가 비스트링 연산자와 사용된 경우 다른 연산자를 모두 스트링으로 변환
  • BOOLEAN값은 1과 0으로 변환되어 수치 연산을 지원
  • null값은 스트링 연산에 대해서는 "null", 논리 연산에서는 false, 그리고 수치 연산에서는 0으로 각각 변환
  • 변환 함수
    • eval() : 스트링 표현식을 수치값으로 변환하고, 파라미터가 수치형태가 아닌 스트링 값이면 에러 발생
    • parseInt() : 스트링에 포함된 첫번째 정수를 리턴하고, 스트링이 정수로 시작되지 않으면 0을 리턴
    • parseFloat() : 스트링에 포함된 첫번째 부동 소수를 리턴하거나 스트링이 적절한 부동 소수로 시작되지 않으면 0을 리턴
  
  
• 배열 : 값의 시퀀스를 정렬할 수 있는 객체로, JavaScript의 특수형으로 배열 사용 전엔 반드시 선언해야 한다.
  • 배열 선언 예
    arrayName = new Array(arrayLength)
arrayName = new Array()
arrayName = new Array(value0,value1, ..., valuen)
  
  
• JavaScript만의 특수 연산자
  • comma(,) 연산자 : 두 표현식을 계산하고, 두 번째 표현식의 값 리턴
  • delete 연산자 : 객체의 프로퍼티나 배열 인덱스의 요소 삭제하고, 항상 undefined 값 리턴
  • new 연산자 : 객체 형의 인스턴스를 만들기 위해 사용
  • typeof 연산자 : 연산자의 형을 식별하는 스트링 값을 리턴
  • void 연산자 : 값을 리턴하지 않는다
  
  
• 지역 변수와 전역 변수 : 함수 안에서만 사용되는 것을 지역 변수라 하고, 프로그램 내에서 사용되는 변수를 전역 변수라 하는 데, 지역 변수 사용시 반드시 var 키워드와 함께 선언해야 함
  

이벤트 처리!!

• 이벤트 정의와 사용
  • 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
  • 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
  • 이벤트 핸들러 : 프로세스를 수행하는 코드
  • 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나, 폼에 입력한 데이터를 검증한다거나, 버튼을 클릭할 때 애니메이션을 나타내거나, Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다.
  
  
• JavaScript가 정의한 이벤트

  HTML 태그	JavaScript 이벤트	설명
  다양	mouseMove	마우스 이동
  <A>..</A>	Click	마우스로 링크를 클릭
  	dbClick	마우스를 링크위에서 더블클릭
  	mouseDown	마우스 버튼을 누름
  	mouseUp	마우스 버튼을 놓음
  	mouseOver	마우스를 링크위로 이동
  	mouseOut	링크 위에 있던 마우스를 링크 밖으로 이동
  	keyDown	사용자가 키를 누름
  	keyUp	사용자가 키를 놓음
  	keyPress	사용자가 키를 눌렀다가 놓음
  <IMG>	abort	사용자 액션으로 인해 이미지 로딩 작업을 중단함
  	error	이미지 로딩하는 동안 에러 발생
  	load	이미지가 로드되고 화면에 나타남
  	keyDown	사용자가 키를 누름
  	keyUp	사용자가 키를 놓음
  	keyPress	사용자가 키를 눌렀다가 놓음
  <AREA>	mouseOver	마우스가 클라이언트측 이미지맵의 한 영역으로 이동함
  	mouseOut	마우스가 이미지맵 영역 밖으로 이동
  	dbClick	사용자가 이미지맵의 한 영역을 더블클릭함
  <BODY>..</BODY>	Click	사용자가 문서의 본문을 클릭
  	dbClick	문서의 본문을 더블 클릭함
  	keyDown	키를 누름
  	keyUp	키를 놓음
  	keyPress	키를 눌렀다가 놓음
  	mouseDown	마우스 버튼을 누름
  	mouseUp	마우스 버튼을 놓음
  <BODY>..</BODY> <FRAMESET>..</FRAMESET> <FRAME>..</FRAME>	blur	윈도우에서 현재 입력 포커스가 사라짐
  	error	윈도우가 로드되는 동안 에러 발생
  	focus	입력 포커스가 현재 윈도우로 이동
  	load	윈도우 로딩이 완료됨
  	unload	윈도우를 종료함
  	move	윈도우가 이동됨
  	resize	윈도우의 크기가 바뀜
  	dragDrop	윈도우에 객체를 드롭
  <FORM>..</FORM>	submit	사용자가 폼을 제출
  	reset	사용자가 폼을 재설정
  <INPUT TYPE="text">	blur	현재 입력 포커스가 텍스트 필드에서 사라짐
  	focus	현재 입력 포커스가 텍스트 필드로 이동
  	change	텍스트 필드가 변경되어 현재 입력 포커스가 사라짐
  	select	텍스트 필드에 있는 텍스트가 선택됨
  <INPUT TYPE="password">	blur	패스워드 필드에서 입력 포커스가 사라짐
  	focus	패스워드 필드에 입력 포커스 생김
  <TEXTAREA>..</TEXTAREA>	blur	텍스트 영역이 현재 입력 포커스가 사람짐
  	focus	텍스트 영역에 입력 포커스 생김
  	change	텍스트 영역이 변경되어 입력 포커스가 사라짐
  	select	텍스트 영역에서 텍스트가 선택됨
  	keyDown	키를 누름
  	keyUp	키를 놓음
  	keyPress	키를 눌렀다 놓음
  <INPUT TYPE="button">	Click	버튼이 클릭됨
  	blur	입력할 수 없도록 버튼이 흐려짐
  	focus	입력할 수 있도록 포커스 생김
  	mouseDown	버튼 위에서 왼쪽 마우스 버튼 누름
  	mouseUp	버튼 위에서 왼쪽 마우스 버튼 놓음
  <INPUT TYPE="submit">	Click	제출 버튼이 클릭됨
  	blur	제출 버튼에서 입력 포커스가 사라짐
  	focus	제출 버튼에 입력 포커스 생김
  <INPUT TYPE="reset">	Click	리셋 버튼이 클릭됨
  	blur	리셋 버튼에서 포커스가 사라짐
  	focus	리셋 버튼에서 포터스가 놓임
  <INPUT TYPE="radio">	Click	라디오 버튼이 클릭
  	blur	라디오 버튼에서 입력 포커스가 사라짐
  	focus	라디오 버튼에 입력 포커스 생김
  <INPUT TYPE="checkbox">	Click	체크 박스가 클릭
  	blur	체크 박스에서 입력 포커스가 사라짐
  	focus	체크 박스에 입력 포커스 놓임
  <INPUT TYPE="file">	blur	파일 업로드 폼 요소에서 입력 포커스 사라짐
  	change	사용자가 업로드될 파일을 선택
  	focus	파일 업로드 폼 요소에 입력 포커스 놓임
  <SELECT>..</SELECT>	blur	선택 요소가 현재 입력 포커스 잃음
  	change	선택 요소가 변경되어 입력 포커스가 사라짐
  	focus	선택 요소에 현재 입력 포커스가 놓임

  
  
• 이벤트 처리 속성

  이벤트핸들링속성	실행되는 상황
  onAbort	이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음
  onBlur	문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐
  onChange	텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐
  onClick	링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨
  onDbClick	링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭됨
  onDragDrop	드래그된 객체가 윈도우나 프레임에 드롭됨
  onError	이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함
  onFocus	문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임
  onKeyDown	키를 누름
  onKeyPress	키를 눌렀다 놓음
  onKeyUp	키를 놓음
  onLoad	이미지나 문서, 프레임이 로드됨
  onMouseDown	마우스 버튼 누름
  onMouseMove	마우스를 이동함
  onMouseOut	링크나 클라이언트측 이미지맵에서 마우스를 옮김
  onMouseOver	마우스를 링크나 클라이언트측 이미지맵으로 옮김
  onMouseUp	마우스 버튼을 놓음
  onMove	사용자가 윈도우나 프레임을 이동함
  onReset	폼의 리셋 버튼을 클릭하여 폼을 리셋시킴
  onResize	사용자가 윈도우나 프레임의 크기를 조절
  onSelect	텍스트는 텍스트 필드나 영역에서 선택됨
  onSubmit	폼이 제출됨
  onUnload	사용자가 문서나 프레임 세트를 종료함

객체 정의하기

• 객체 유형 정의
  
  • 프로퍼티 : 객체에 들어 있는 데이터 값에 액세스할 때 사용.
  • 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수.
• 객체 유형 만들기
  사용자가 직접 객체 유형을 정의하고 특정 객체 인스턴스를 만들 수 있 는데 이렇게 만들려면 객체 유형의 특정 인스턴스를 만들 때 사용되는 함수를 정의하기만 하면 된다. 본래 이러한 생성자 함수는 다음과 같은 일을 한다.
  
  • 객체 유형의 프로퍼티에 값을 할당한다.
  • 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다.
• 객체 사용 예
  
  1. table 객체의 정의 (table.js)
     function table_getValue(row,col){
       return this.data[row* this.columns+col ];
     }
     function table_setValue(row,col,value){
       this.data[row* this.columns+col ]=value;
     }
     function table_set(contents){
       var n=contents.length;
       for(var j=0;jthis.data[j]=contents[j];
     }
     function table_isHeader(row,col){
       return this.header[row* this.columns+col ];
     }
     function table_makeHeader(row,col){   this.header[row* this.columns+col ]=true;
     }
     function table_makeNormal(row,col){   this.header[row* this.columns+col ]=false;
     }
     function table_makeHeaderRow(row){   for(var j=0;j< this.columns+j)
         this.header[row* this.columns+col ]=true;
     }
     function table_makeHeaderColumn(col){   for(var i=0;i< this.rows;++i)
         this.header[i* this.columns+col ]=true;
     }
     function table_write(doc){
       doc.write("<TABLE BORDER="+ this.border+">");
       for(var i=0;i< this.rows;++i) {
         doc.write("<TR>");
         for(var j=0;j< this.columns;++j) {
           if( this.header[i* this.columns+j ]) {
             doc.write("<TH>");
             doc.write( this.data[i* this.columns+j ]);
             doc.write("</TH>");
           }
           else {
             doc.write("<TD>");
             doc.write( this.data[i* this.columns+j ]);
             doc.write("</TD>");
           }
         }
         doc.writeln("</TR>");
       }
       doc.writeln("</TABLE>");
     }
     funtion table(rows,columns) {
       this.rows=rows
       this.columns=columns
       this.border=0
       this.data=new Array(rows*columns)
       this.header=new Array(rows*columns)
       this.getValue=table_getValue
       this.setValue=table_setValue
       this.set=table_set
       this.isHeader=table_isHeader
       this.makeHeader=table_makeHeader
       this.makeNormal=table_makeNormal
       this.makeHeaderRow=table_makeHeaderRow
       this.makeHeaderColumn=table_makeHeaderColumn
       this.write=table_write
       }
     
     
  2. table 객체 사용하기
     <HTML>
     <HEAD>
     <TITLE>Defining Object Types</TITLE
     <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
     //-></SCRIPT>
     </HEAD>
     <BODY>
     <H1>Defining Object Types</H1>
     <SCRIPT LANGUAGE="JavaScript"><!-
     t=new table(3,4)
     contents=new
     Array("This","is","a","test","of","the","table","object.","Let's","see","it","work")
     t.set(contents)
     t.border=4
     t.makeHeaderColumn(0)
     t.write(document)
     //-></SCRIPT>
     </BODY>
     </HTML>
     
     
  3. 객체 유형에 프로퍼티와 메소드 추가
     : prototype 프로퍼티를 통해서 인스턴스화할 수 있는 미리 정의된 객체 유형에 프로퍼티와 메소드 추가
     사용 예
     <HTML>
     <HEAD>
     <TITLE>Updating Object Types </TITLE>
     <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
     //-></SCRIPT>
     </HEAD>
     <BODY>
     <H1>Updating Object Types</H1>
     <SCRIPT LANGUAGE="JavaScript"><!-
     function table_colorWrite(doc){
       ........
       함수 정의
       ........
       ........
     }
     t=new table(3,4)
     table.prototype.bgColor="Cyan"
     table.prototype.colorWrite=table_colorWrite
     .............
     .............
     t.colorWrite(document)
     //-></SCRIPT>
     </BODY>
     </HTML>
     
     
  4. 프로퍼티와 메소드 삭제
     delete objectName.propertyName
     delete objectName.methodName
     

브라우저 객체

window 객체

• 모든 브라우저 스크립트의 기본적인 것으로, 브라우저가 자동으로 정의하는 최상위 레벨의 객체이다. 현재 열려 있는 각 윈도우에 대해 별도의 window 객체가 정의된다.

frame 객체

• 프레임은 윈도우를 독립된 표시 영역들로 분할한 후, 이 영역들에 표시되는 정보들을 강력하게 컨트롤 할 수 있게 해준다.
• 프레임 객체의 프로퍼티와 메소드는 window 객체와 같지만, close() 메소드는 지원하지 않는다.

document 객체

• JavaScript 에서 아주 중요한 객체로, 이 객체를 사용하면 로드될 문서를 업데이트하고 로드된 문서 안에 있는 HTML 요소에 액세스할 수 있다.

navigator 객체

• navigator 객체는 window 객체와 마찬가지로 브라우저 객체 모델에서 최상위 레벨의 객체이며, 스크립트를 실행할 때 사용되는 브라우저의 종류와 버전에 대한 정보 제공한다.

event 객체

screen 객체