스크립트를 이용한 HTML 페이지 작성

index.html

3개의 프레임
script가 들어 있는 script.html 프레임
main에 들어갈 문자들(?) 을 script를 실행 시킬 hidden 프레임
main - 빈칸 .
=============================================================================
<FRAMESET rows=50%,50%>
        <FRAMESET cols=50%,50%>
                <FRAME src=hidden.html name=hidden></FRAME>
                <FRAME src=script.html name=script></FRAME>
        </FRAMESET>
        <FRAME name=main></FRAME>
</FRAMESET>
===============================================================================

원래 계획은 hidden 프레임에서 script 프레임에 있는 객체를 가지고와서
main에 글자를 뿌려줄 생각이었으나, hidden 프레임에서 script에 있는 객체를
가져오는 법을 모름 .

그래서 그냥 hidden 프레임은 빈곳이고,
script 프레임에 스크립트 및 실행 시키는 것이 있음





script.html 화일
==================================================================================
<script src="Doc.js"></script>
<script> openWnd = window.open('about:blank','openwnd'); </script>
<Script>
        CD = new Doc('','main');
        openCD = new Doc('openWnd','');
</script>
<Script>
        CD.w(CD.table('','','center',3,5,2,'black','','',CD.tr(200,'','right','',CD.td('','','','','메세지'))));
        openCD.w(openCD.table('','','center',3,5,2,'black','','',openCD.tr(200,'','right','',openCD.td('','','','','메세지'))));
</script>
==================================================================================
보다 시피 중요한 스크립트는 Doc.js 라는 화일로 만들어져 있다.

4번째 줄의 CD = Doc('','main'); 는 현재 창의 main 프레임에 대한 객체를 얻는다.
5번째 줄의 openCD = Doc('openWnd','') 는 2번째 줄에서 open 시킨 창에 대한 객체를 얻는다.
***** 중요 *********************************
새창의 제어는 window.open("a.html","wnd") 메소드의 리턴 값을 이용해서 한다.

CD.w(CD.table( ... )) 과 openCD.w(openCD.table( ... )) 는 각 창에 TABLE을 만든다.
( Doc.js 화일에 Doc 라는 클래스를 받아서 CD 와 openCD 사용한다. )
( 물론 Doc.js 화일에 각 각의 메소드 w( .. ) , table( ... ) 는 정의되어 있다.)


Doc.js 화일
================================================================================
// 기본적인 함수 배치
function istrue(b) // 매개변수가 참인지 확인한다.
{
        return Boolean(b)
}


// 가장 중요한 태그 관련 클래스
function Doc(wnd,frame) {


        // 윈도우가 정해 지지 않으면 현재 윈도우로 잡는다.
        if ( !istrue(wnd) ) { wnd = "window"; }
        else wnd = "window."+wnd;

        // 프레임이 정해지지 않으면 현재 프레임으로 잡는다.
        if ( !istrue(frame) ) { frame = ".top."; }
        else frame = ".top."+frame+".";


        // 각종 기본 변수 매치
        this.win = eval(wnd);
        this.doc = eval(wnd+frame+"document");
        this.h = history;


        // 자바 스크립트 기본 함수 매치
        this.w = this.doc.write
        this.alt = this.win.alert
        this.h_back = this.h.back

        // 스크립트 도움말을 위한 클래스 생성
        help = new Help(this);

        // 메소드에 대한 도움말을 넘겨줄 변수 생성
        this.help_msg;

        /////////////// 기본적인 메소드

        ////////////////////////////////////////////  각종 태그 관련 메소드 배치  ///////////////////////////
        
        // TABLE 태그
        this.table = function(w,h,a,cp,cs,bd,bc,bg,o,m) {
                this.help_msg = "해당 HTML : <TABLE ... >\n\nw = width , h = height , cp = cellpadding\ncs = cellspacing , bd = border , bc = bordercolor , bg = bgcolor , o = other , m = CD.tr(...)\n 만약 매개변수 m 을 넣는다면 CD.table_e() 를 생략해야 한다.";
                str = "<table ";
                if ( istrue(w) ) str += " width= '"+w+"' ";
                if ( istrue(h) ) str += " height= '"+h+"' ";
                if ( istrue(a) ) str += " align= '"+a+"' "; else str += " align=center ";
                if ( istrue(cp) ) str += " cellpadding= '"+cp+"' "; else str += " cellpadding=0 ";
                if ( istrue(cs) ) str += " cellspacing= '"+cs+"' "; else str += " cellspacing=0 ";
                if ( istrue(bd) ) str += " border= '"+bd+"' "; else str += " border=0 ";
                if ( istrue(bc) ) str += " bordercolor= '"+bc+"' ";
                if ( istrue(bg) ) str += " bgcolor= '"+bg+"' ";
                if ( istrue(o) ) str += " "+o+" ";
                str += ">";
                if ( istrue(m) ) {
                        str += m;
                        str+="</table>";
                }

                return str;
        }

        // TR 태그
        this.tr = function(w,h,a,o,m) {
                this.help_msg = "해당 HTML : <TR ... >\n\nw = width , h = height , a = align , o = other , m = CD.td(...)\n매개변수 m이 있으면 CD.tr_e()를 생략해야 해야 한다.";
                str = "<tr ";
                if ( istrue(w) ) str += " width= '"+w+"' ";
                if ( istrue(h) ) str += " height= '"+h+"' ";
                if ( istrue(a) ) str += " align= '"+a+"' ";
                if ( istrue(o) ) str += " "+o+" ";
                str += ">";
                if ( istrue(m) ) {
                        str += m;
                        str+="</tr>";
                }
                
                return str;
        }
        // </TR> 태그
        this.tr_e = function() {
                this.help_msg = "해당 HTML : </TR>\n\n만약 CD.tr(...)에서 메세지 출력 구분 매개변수인 m = CD.td(...) 를 넣었다면\n이 태그는 생략 해야 한다.";
                return "</tr>";
        }

        // TD 태그
        this.td = function(w,h,a,o,m) {
                this.help_msg = "해당 HTML : <TD ... >\n\nw = width , h = height , a = align, o = other , m = Msg\n매개변수 m이 있으면 CD.td_e()를 생략 해야 한다.";
                str = "<td ";
                if ( istrue(w) ) str += " width= '"+w+"' ";
                if ( istrue(h) ) str += " height= '"+h+"' ";
                if ( istrue(a) ) str += " align= '"+a+"' ";
                if ( istrue(o) ) str += " "+o+" ";
                str += ">";
                if ( istrue(m) ) {
                        str += m;
                        str+="</td>";
                }
                return str;
        }        
        // </TD> 태그
        this.td_e = function() {
                this.help_msg = "해당 HTML : </TD>\n\n만약 CD.td(...)에서 메세지 출력 구분 매개변수인 m 을 넣었다면\n이 태그는 생략 해야 한다.";
                return "</tr>";
        }

        // BR 태그
        this.br = function() {
                this.help_msg = "해당 HTML : <BR> \n\n<BR> 태그를 생성해 준다. ";        
                return "<BR>";
        }


        // FONT 태그
        this.font_s = function(c,s,f,o,m) {
                this.help_msg = "해당 HTML : <FONT ... >\n\n매개변수 m 이 있으면 CD.font_e() 를 생략할 수 있다.";

                str ="<font ";
                if ( !istrue(c) ) str += " color=black "; else str+=" color="+c;
                if ( !istrue(s) ) str += " style='font: 9pt' "; else str+=" style='font: "+s+"pt' ";
                if ( !istrue(f) ) str += " face='굴림체' "; else str+=" face='"+f+"' ";
                if ( !istrue(o) ) str += o;
                str += ">";
                if ( istrue(m) ) {
                        str += m;
                        str+="</font>";
                }
                return str;
        }
        // </FONT> 태그
        this.font_e = function() {
                this.help_msg = "해당 HTML : </FONT>\n\n만약 CD.font(...) 에서 메세지 출력 구분 매개변수인 m 을 넣었다면\n이 태그는 생략 해야 한다.";
                return "</font>" ;
        }


        // IMG 태그
        this.img = function(s,w,h,b,o) {
                this.help_msg = "해당 HTML : <IMG ... >\n\n( s = src , w = width , h = heignt , b = border  , o = other )";

                if ( !istrue(s) ) return this.help("IMG 태그의 경로가 없습니다.","img");
                str = "<img ";
                str += " src='"+s+"' ";
                if ( istrue(w) ) str+= " width="+w+" ";
                if ( istrue(h) ) str+= " height="+h+" ";
                if ( istrue(b) ) str+= " border="+b+" ";
                if ( istrue(o) ) str+= o;

                str += ">";

                return str;

        }

        this.help = function(s,tag) {
                help.err(s,tag);
                return '\n<!-- 에러태그 : '+ tag + '   에러메세지 : ' + s + ' -->\n';
        }



        // 경고창 띄우기
        this.a = function (s) { this.alt(s) }        // 단순 경고창
        this.anb = function (s) { this.alt(s); this.h_back(); }        // 경고창 후 history.back
        this.ang = function (s,url) { this.alt(s); this.doc.location.href=url; } // 경고창 후 특정 페이지

}



function Help(doc) {

        // 에러 메세지를 보여줌
        this.err = function (s,tag) {

                if ( !Boolean((eval("doc."+tag))) )
                {
                        this.alt("에러 : ["+tag+"] 메소드에 대한 도움말이 없습니다.\n메소드명이 맞는지 확인해 주십시오.");
                        return false;
                }

                this.atagerr(s,tag);
                return false;
        }


        // 잘못 된 태그에 대한 에러 메세지, 문법 보여줌
        this.atagerr = function (s,tag) {
                temp = "에러 태그 : "+tag+"\n\n"
                temp += "에러메세지 : " + s;
                temp += this.syntax(tag);
                temp += this.exsample(tag);
                temp += this.help(tag);
                this.alt(temp);
        }



        // 함수 구조 보여주기
        this.syntax = function(tag) {
                temp = String(eval("doc."+tag));
                
                // "function"이라는 단어를 자르고 tag를 넣는다.
                temp = temp.slice(temp.indexOf("function")+8,temp.length) ;
                temp = "\n\nSyntax : \n"+tag + temp +"\n";
                return temp;
        }


        this.exsample  = function(tag) {
                return "\nexsample : \n";
        }
        
        // 도움말은 doc에 있는 자료를 가지고 온다.
        this.help = function (tag) {

                temp = "\n\n\n도움말 :\n";
                temp += doc.help_msg;
                return temp;
        }

        this.alt = function(s) { alert(s); }
}        

================================================================================

내가 만들어본 스크립트 중에서 가장 길다.
아니 가장 긴것 보다. 더욱 더 중요한것은 객체지향을 조금씩 깨달아 간다는 것이다.

여기에 보면 Doc 클래스 뿐만 아니라 Help 클래스도 같이 있는데
이 두 클래스는 서로를 가지고 있다.

Doc 클래스에서는 help = new Help(this)를 Help 클래스에서는 Help(doc) 를 사용한다.

Doc 클래스는 각종 HTML 을 작성할 수 있는 메소드를 가지고 있으며
help_msg라는 변수를 이용해 각 메소드의 자기자신의 도움말을 제공한다.
Doc에서 사용하는 help_msg 덕분에 Doc의 메소드가 늘어도
Help 클래스를 더 이상 수정할 필요가 없어 진다.
( Help 클래스를 사용하는데 필요한 모든 정보는 Doc 클래스가 가지기 때문이다. )

Help 클래스는 Doc에서 어떠한 문제가 생길때 ( img 태그에 src가 없을때 등)
호출 하도록 하였으며 (  help.err("IMG 태그의 경로가 없습니다.","img") )

호출을 받은 Help 클래스는 경고와 각 태그에 대한 Syntax를 보여준다.
위에서 말한 help_msg를 출력하여 해당 메소드를 만들때,
참고할 것이나 주의점을 적어 주어서 다시 소스를 봐야 하는 불편을 덜어 준다.
------------------ 20030716 확인결과 help_msg를 제대로 못 보여주고 있음.


문제점 1.
hidden 프레임에서 script에 작성된 객체를 가지고 작업을 해야 한다.
hidden 프레임은 refresh 되어도 서버 부하가 적겠지만.
script 프레임이 refresh 된다면 많은 양의 자바 스크립트를 새로 읽어 들일 것이다.


문제점 2.
Help 클래스의 help메소드를 우리가 필요한 시점에 부를 수가 없다.
즉 프로그램이 돌아 가고 있는 중이 아닌 경우는 부를 수가 없다.
Doc 클래스는 help라는 객체를 가지고 err이라는 메소드를 사용해서 메세지를 보게 되어 있다.
Doc 클래스의 각 메소드를 임의로 참고하고자 할때 사용할 Help 클래스의 메소드를
따로 만들어야 할 것이다.
---------------- 20030716 : 처리 완료
---------------- Doc클래스에서 this.help 메소드를 통해서 Help의 err메소드를 부르게 했음


문제점 3.
만약 새 윈도우를 열어서 그 윈도우에 작업을 할때.
새 윈도우가 이미 만들어져 있다면
"엑세스가 거부 되었습니다." 라는 스크립트 오류가 뜸.
이 문제는 window.open이라는 메소드를 사용할때 똑같은 이름의
window.target ( 위의 예 같은 경우는 script.html 화일의 openwnd 창 )이 존재하면
문제가 생겼다.
그래서 새창을 쓰기 전에는 먼저 창의 타겟명(?)이 있는지 확인해 보아야 할 것이다.