Status bar에 Page Title 출력하기


Home > Document > Web design > JavaScript > DOM > Status bar 에 Page Title 출력

Status bar에 Page Title 출력하기

Web design 메뉴의 JavaScript 첫 번째 페이지를 시작하게 되었습니다. 여기서 다루는 JavaScript 는 주로 DHTML D.O.M(Document Object Model)과 실무에 즉시 응용할 수 있는 Script 들이 됩니다. HTML로 만들건 XML로 만들건 간에 해당 Parser에 의해 분석되어 각 Tag들이 Object화 되고 Document tree(Tag의 상하위계도)가 만들어지고 나서 일단 화면에 출력(Render)되었다고해서 브라우저와 문서와의 관계가 끝났느냐 하면 그렇지 않죠. 브라우저 창이 닫히기 전까지는 계속 관계를 맺게됩니다. 예를 들어 브라우저 제목 표시줄에는 문서의 제목이 나오게 되고 문서창에는 작성한 문서의 내용이 Object화 되어 저장되며, 상태 표시줄에는 지정한 글자가 있다면 출력되어 나올 것입니다. 이와 같이 Tag이 Object화 된다는 것을 잘 이해하고 활용하면 상상하기 힘들 정도의 효과를 볼 수 있습니다. 이제 본론으로 들어가서 이 번 페이지에서는 DOM을 이용하면 어떤 이익을 얻을 수 있는가에 대한 아주 가벼운 예를 드는 것으로 머리를 풀어 보도록 하겠습니다.

Status bar에 Page Title을 출력한다는 말은 문서의 Head section의 title Element(<title>page title</title>) 속에 들어가는 문서 제목을 브라우저 하단의 status bar에 출력한다는 뜻입니다. 알고 있는 것 처럼 Title로 입력한 내용은 브라우저 상단의 titlebar에 출력되어 나옵니다. 하지만 이 사이트와 같이 Frameset으로 구성된 문서의 경우 Frameset Page의 title 이 항상 출력되어 나오기 때문에 이런 경우 바로 이 statusbar에 main content frame의 문서 title을 출력하므로서 문서의 제목을 알려 줄 수 있습니다. 특히 이 사이트처럼 문서가 많고 문서 간의 링크가 많은 경우 이리 저리 링크따라 가다 보면 "어! 지금 내가 어디를 보고 있지?" 하고 길을 잃을 수 있습니다. 그래서 이 생각 저 생각하던 중에 MSDN Library를 갔는데 평소에 눈여겨 보지 않았던 status bar를 보니 문서가 바뀔 때 마다 status bar에 현재 문서에 대한 설명이 나오더군요. 그럼 일단 status bar에 설명을 출력하려면 어떻게 하면 될지 가장 간단한 방법을 사용한 예를 들어 보겠습니다. 만약 출력할 내용이 "이건 나를 두 번 죽이는 짓이야!" 라면

입력
<script type="text/javascript">
<!--
window.status = "이건 나를 두 번 죽이는 짓이야!"
// -->
</script>

와 같이 scripting하면 문서가 load 되면서 당연히 status bar에 이 내용이 출력되겠져. 그런데 문제는 이 사이트처럼 문서의 수가 많고 앞으로 문서가 계속 늘어 날텐데 매번 이런 우아하지 못한 방법을 써야 되느냐 하는 것이었습니다. "그래 내가 이런 노가다를 할 수야 음찌... 그렇다면 손 안대고 코 푸는 방법은?" 하고 생각한 자동 출력 방법이 바로 문서 title을 status bar에 출력하는 그야말로 우아한 방법 이었다고나 할까요...^^ 그렇다면 우선 문서의 title을 가져 올 수 있어야 되겠네요. DOM을 이용해서 다음과 같이 불러 오도록 하겠습니다.

입력
<html>
    <head>
        <title>나를 찍어 주세요...</title>
    <script type="text/javascript">
    <!--
    document.write(document.title)
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>
코드 실행 하기

어떻습니까 문서(document)의(.) 제목(title)이 출력되져? 이와 같이 DOM을 이용하면 문서의 Object화 된 tag을 다룰 수 있답니다. 우리가 정확한 방법으로 요구하면 브라우저는 그 결과를 return 해 주게 되어 있습니다. 그러므로 요구하는 방법만 잘 안다면 그 만큼 많은 이익을 볼 수 있다는 겁니다. 음... HTML의 중요성... 여기서 다시 한 번 강조되고야 마는군요. 그럼 이제 결론으로 들어가서 자동으로 문서 title을 status bar에 출력하려면

Frameset을 사용하지 않는 경우
window.defaultStatus = document.title

이와 같이 될 것이고 Frameset으로 구성된 문서의 경우 예를 들어 status bar에 출력할 문서의 frame name이 'content'라면(frameset에 대한 자세한 내용은 이 사이트의 frameset 참조)

Frameset을 사용하는 경우
window.defaultStatus = top.content.document.title

이렇게 1 줄을 링크 방식으로 사용하는 .js 파일에 넣어두면 앞으로 아무리 많은 문서가 생긴다해도 status bar에 제목을 출력하는 문제는 잊고 살아가도 되겠습니다. 다음의 JavaScript 메뉴에서는 줄무늬 팬티에 대해 다루어 보겠습니다. 역시 DOM 과 관련된 내용이 되겠습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색