1.1.홈페이지용 태그 연습장 만들기

1. 기능 추가하기

[자바스크립트 이야기]의 ex6_10.html 문서가 간단한 태그 연습장입니다.

각종 예제를 여러분에게 보여드리기 위하여 가장 먼저 만들어야 할 예제는 태그 연습장입니다. 태그 연습장을 만들어야 여러분이 X119 사이트에서 예제를 확인해보거나 수정해볼 수 있습니다.

태그 연습장은 [자바스크립트 이야기]의 부록 편에 ex6_10.html 문서로 수록했습니다. ex6_10.html은 결과 보기와 지우기 기능만 있었습니다. 그렇지만 이는 간단한 태그 연습용으로 사용할 때나 쓸 수 있는 태그 연습장입니다. 좀더 복잡한 예제를 태그 연습장으로 보여주려면 기본형 보기와 소스 선택 두 가지 기능이 추가되어야 합니다.

ex6_10.html 문서에 소스 선택 기능과 기본형 보기 기능을 추가했습니다.

소스 선택 기능은 태그 연습장에 예제를 삽입했을 경우 예제를 선택할 수 있도록 하는 기능입니다. 사용자는 선택하기 단추를 눌러 예제의 소스 파일을 모두 선택할 수 있습니다. 그런 뒤에 Ctrl+C를 눌러 복사하고 Ctrl+V를 눌러 사용자의 문서 편집기에 붙여 쓸 수 있습니다.

기본형 보기는 처음 보여준 예제를 다시 보여주는 기능입니다. 사용자가 태그 연습장에서 예제를 고치다가 제대로 고치지 못하면 지우기 기능으로 예제를 지우게 됩니다. 그런데 몽땅 지워진 다음에 예제를 다시 입력할 수 있는 방법이 없습니다. 이럴 때 기본형 보기 단추를 누르면 처음의 예제를 다시 연습장에 불러오는 기능입니다.

기능이 추가된 태그 연습장 - j2bu0101.html

예제 프로그램은 다음과 같습니다. <HTML>에서 </HTML>까지가 태그 연습장 예제입니다. 그리고 기본 예제를 삽입한 상태로 보여주려면 기본 예제 내용을 있는 그대로 <TEXTAREA>와 </TEXTAREA> 사이에 삽입해주면 됩니다. <HTML> <HEAD> <TITLE> j2bu0101.html - 자바스크립트 이야기 2부 - 태그 연습장 </TITLE> <META name="Description" Content="[자바스크립트 이야기] 책에 수록하지 못한 자바스크립트 관련 문법 설명과 예제 내용."> <META name="Keywords" Content="김중태, www.X119.com, 자바스크립트 이야기, java script 예제, 자바스크립트 소스 파일, 초보자를 위한 자바스크립트 입문, 가장 쉬운 자바스크립트 입문서"> <LINK rel="stylesheet" type="text/css" href="/x.css"> <STYLE type="text/css">  </STYLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <DIV class="jemok11"> www.X119.com 태그 연습장 </DIV> <FORM NAME="tedit"> <INPUT type="button" name="bview" value="소스 결과 보기" onclick='fview(this.form)'> <INPUT type="button" name="bselect" value="소스 선택" onclick='fselect(this.form)'> <INPUT type="button" name="bclear" value="연습장 지우기" onclick='fclear(this.form)'> <INPUT type="reset" name="breset" value="기본형 보기"> <BR> <TEXTAREA name="tagedit" rows="20" cols="100"> </TEXTAREA> <BR> </FORM> </CENTER> </BODY> </HTML>

'기본형 보기' 기능은 reset 속성 값으로 설정합니다.

예제에서 '기본형 보기' 기능은 reset 속성 값을 이용했습니다. type 속성의 값으로 reset를 지정해주면 TEXTAREA 안에 삽입되었던 내용을 다시 보여줍니다. 때문에 별도의 함수로 만들 필요가 없습니다.

결과 보기 함수를 수정하면 결과를 보여줄 window 크기를 조절할 수 있습니다.

연습장 결과 보기 기능은 TEXTAREA 안의 문장을 window 객체를 이용하여 보여주는 것입니다. 여러분이 수정할 부분은 fview() 함수의 window.open("" ,"", "width=800, height=600") 명령에서 width와 height의 수치입니다. 새로 창을 열어 보여줄 창의 크기를 적당한 크기로 수정하면 됩니다.

연습장 지우기 함수는 form 안의 내용을 빈 값으로 설정해 만듭니다.

연습장 내용 지우기 함수는 한 줄로 된 명령입니다. form 객체의 tagedit 객체의 값을 ""로 설정했습니다. 따라서 tagedit 이름을 가진 TEXTAREA 안의 내용이 빈 값을 가지게 되므로 연습장 내용이 지워지는 효과를 가지는 것입니다.

소스 파일 선택 기능은 focus()와 select() 함수를 이용했습니다.

소스 파일 선택 기능은 두 가지 객체 함수를 연속적으로 사용했습니다. focus() 함수는 먼저 TEXTAREA 안에 포커스(초점)을 맞추게 하는 명령입니다. 그런 뒤에 select() 함수를 사용하여 TEXTAREA 안의 내용을 모두 선택하도록 한 것입니다. 사용자는 이렇게 선택한 함수를 Ctrl+C로 복사해둔 다음에 필요한 편집기에 붙여쓰면 됩니다.