입력된 내용대로 출력하는 JS 소스코드 자동 생성기
컨텐츠 정보
- 21,771 조회
- 7 추천
- 목록
본문
HTML 소스코드 등을 자바스크립트 소스코드 안에서 출력문을 만들 때, 개행문자나 따옴표 등등 귀찮은
변환작업들이 많습니다. 특히 공통적으로 사용되는 HTML 코드 부분을 자바스크립트 라이브러리 등으로
만들어 두고, 이걸 호출함으로써 사용자 전송량을 줄이려는 노력을 할 때 꽤 번거롭고 귀찮죠.
이런 작업을 쉽고 편하게 자동으로 해줄 수 있는 일종의 마법사 기능의 소스코드 자동 변환기를
만들었습니다. HTML 소스코드 등을 입력하고 생성 버튼을 누르면 입력된 HTML 코드를 그대로
자바스크립트에서 사용할 때 오류 없이 깔끔하게 출력할 수 있도록 자동으로 적절한 변환을 거친
문자열로 만들어 주고, 스크립트 태그까지 달아서 보여줍니다.
편의를 위해 HTML 소스부분과 생성된 JS 소스코드 각 부분에 대한 즉석 실행결과화면을
확인할 수 있는 버튼도 달아뒀습니다.
사이트 개발자.. 특히 프로그래머 한테 유용한 기능일 겁니다.
일반인들 한테는.. 글쎄요... ^^;
-------------------------------------------------------
<html>
<head>
<title>HTML-JS 생성기</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
th,td { font-family: 돋움; font-size: 9pt; }
textarea { font-family: Fixedsys; }
</style>
<script language="javascript">
function generateSource(form) {
var strContent = form.HTML.value;
strContent = strContent.replace(/\\\\/g, "\\\\\\\\");
strContent = strContent.replace(/\\"/g, "\\\\\\"");
strContent = strContent.replace(/(\\r{0,1})\\n/g, "\\\\n\\\\\\n");
strContent = strContent.replace(/<\\/script>/gi, "<\\/\\",\\"script>");
var strResult = "<script language=javascript>\\ndocument.write(\\"\\\\\\n" + strContent + "\\");\\n</" + "script>";
form.JSSRC.value = strResult;
return false;
}
function showResult(form, src) {
var wopt = "menubar=yes,toolbar=yes,location=yes,scrollbars=yes,status=yes,resizable=yes";
switch (true) {
case form.size[1].checked: wopt += ",width=640,height=480"; break;
case form.size[2].checked: wopt += ",width=800,height=600"; break;
case form.size[3].checked: wopt += ",width=1024,height=768"; break;
}
winResult = window.open("about:blank","",wopt);
winResult.document.open("text/html", "replace");
switch (src) {
case "html": winResult.document.write(form.HTML.value); break;
case "js": winResult.document.write(form.JSSRC.value); break;
}
winResult.document.close();
return false;
}
</script>
</head>
<body style="margin:0px" onLoad="document.mainform.HTML.focus()">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="4" bgColor="lightgrey">
<form name="mainform" onSubmit="return generateSource(this)">
<tr height="20">
<th align="left" colspan="2">▒ HTML-JS 생성기</th>
</tr>
<tr height="10">
<th width="50%">대상 HTML 소스코드</th>
<th width="50%">HTML 출력용 JS 소스코드</th>
</tr>
<tr>
<td width="50%"><textarea name="HTML" style="width:100%;height:100%"></textarea></td>
<td width="50%"><textarea name="JSSRC" readonly style="width:100%;height:100%"></textarea></td>
</tr>
<tr height="20">
<td colspan="2">
<input type="submit" value="JS 소스코드 생성" onClick="this.form.HTML.focus()">
<input type="button" value="HTML 미리보기" onClick="showResult(this.form,'html');this.blur()">
<input type="button" value="JS 실행결과" onClick="showResult(this.form,'js');this.blur()">
결과창 크기:
<input type="radio" name="size" checked>기본
<input type="radio" name="size">640x480
<input type="radio" name="size">800x600
<input type="radio" name="size">1024x768
</td>
</tr>
</form>
</table>
</body>
</html>
변환작업들이 많습니다. 특히 공통적으로 사용되는 HTML 코드 부분을 자바스크립트 라이브러리 등으로
만들어 두고, 이걸 호출함으로써 사용자 전송량을 줄이려는 노력을 할 때 꽤 번거롭고 귀찮죠.
이런 작업을 쉽고 편하게 자동으로 해줄 수 있는 일종의 마법사 기능의 소스코드 자동 변환기를
만들었습니다. HTML 소스코드 등을 입력하고 생성 버튼을 누르면 입력된 HTML 코드를 그대로
자바스크립트에서 사용할 때 오류 없이 깔끔하게 출력할 수 있도록 자동으로 적절한 변환을 거친
문자열로 만들어 주고, 스크립트 태그까지 달아서 보여줍니다.
편의를 위해 HTML 소스부분과 생성된 JS 소스코드 각 부분에 대한 즉석 실행결과화면을
확인할 수 있는 버튼도 달아뒀습니다.
사이트 개발자.. 특히 프로그래머 한테 유용한 기능일 겁니다.
일반인들 한테는.. 글쎄요... ^^;
-------------------------------------------------------
<html>
<head>
<title>HTML-JS 생성기</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
th,td { font-family: 돋움; font-size: 9pt; }
textarea { font-family: Fixedsys; }
</style>
<script language="javascript">
function generateSource(form) {
var strContent = form.HTML.value;
strContent = strContent.replace(/\\\\/g, "\\\\\\\\");
strContent = strContent.replace(/\\"/g, "\\\\\\"");
strContent = strContent.replace(/(\\r{0,1})\\n/g, "\\\\n\\\\\\n");
strContent = strContent.replace(/<\\/script>/gi, "<\\/\\",\\"script>");
var strResult = "<script language=javascript>\\ndocument.write(\\"\\\\\\n" + strContent + "\\");\\n</" + "script>";
form.JSSRC.value = strResult;
return false;
}
function showResult(form, src) {
var wopt = "menubar=yes,toolbar=yes,location=yes,scrollbars=yes,status=yes,resizable=yes";
switch (true) {
case form.size[1].checked: wopt += ",width=640,height=480"; break;
case form.size[2].checked: wopt += ",width=800,height=600"; break;
case form.size[3].checked: wopt += ",width=1024,height=768"; break;
}
winResult = window.open("about:blank","",wopt);
winResult.document.open("text/html", "replace");
switch (src) {
case "html": winResult.document.write(form.HTML.value); break;
case "js": winResult.document.write(form.JSSRC.value); break;
}
winResult.document.close();
return false;
}
</script>
</head>
<body style="margin:0px" onLoad="document.mainform.HTML.focus()">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="4" bgColor="lightgrey">
<form name="mainform" onSubmit="return generateSource(this)">
<tr height="20">
<th align="left" colspan="2">▒ HTML-JS 생성기</th>
</tr>
<tr height="10">
<th width="50%">대상 HTML 소스코드</th>
<th width="50%">HTML 출력용 JS 소스코드</th>
</tr>
<tr>
<td width="50%"><textarea name="HTML" style="width:100%;height:100%"></textarea></td>
<td width="50%"><textarea name="JSSRC" readonly style="width:100%;height:100%"></textarea></td>
</tr>
<tr height="20">
<td colspan="2">
<input type="submit" value="JS 소스코드 생성" onClick="this.form.HTML.focus()">
<input type="button" value="HTML 미리보기" onClick="showResult(this.form,'html');this.blur()">
<input type="button" value="JS 실행결과" onClick="showResult(this.form,'js');this.blur()">
결과창 크기:
<input type="radio" name="size" checked>기본
<input type="radio" name="size">640x480
<input type="radio" name="size">800x600
<input type="radio" name="size">1024x768
</td>
</tr>
</form>
</table>
</body>
</html>
관련자료
댓글 0
등록된 댓글이 없습니다.
