입력된 내용대로 출력하는 JS 소스코드 자동 생성기
페이지 정보
본문
변환작업들이 많습니다. 특히 공통적으로 사용되는 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>
관련자료
등록된 댓글이 없습니다.