Rev. 2.73

Jaxer 서버를 가지고 노느라 정신없습니다. 스크린케스트도 따라해 보고 셈플코드도 열어보고 하면서, 과연 어떠한 방식으로 서버-사이드 자바스크립트 함수가 클라이언트-사이드의 자바스크립트 함수를 호출할 수 있는지를 이해하게 되었습니다. 아래의 두 코드를 잘 비교해 보세요. 흥미롭습니다.

서버단 코드

<html>
  <head>
    <title>Index</title>
    <link type="text/css" rel="stylesheet" href="css/index.css" />

    <!-- 서버와 클라이언트 모두 작동하는 자바스크립트 코드 -->
    <script type="text/javascript" runat="both">
      function $(id) {
        return document.getElementById(id);
      }
    </script>
  </head>
  <body onserverload="initContents()" onload="getContents()">

    <!-- 컨텐츠가 삽입될 영역 -->
    <div id="contents"></div>

    <!-- 서버에서만 작동하는 자바스크립트 코드 -->
    <script type="text/javascript" runat="server">
      function initContents() {
        $('contents').innerHTML = "내용물"; 
      }
    </script>

    <!-- 클라이언트에서만 작동하는 자바스크립트 코드 -->
    <script type="text/javascript">
      function getContents() {
        alert($('contents').innerHTML);
      }
    </script>

  </body>
</html>

파싱된 클라이언트단 코드

<html>
  <head>
    <title>Index</title>
    <link type="text/css" rel="stylesheet" href="css/index.css" />

    <!-- 서버와 클라이언트 모두 작동하는 자바스크립트 코드 -->
    <script type="text/javascript">
      function $(id) {
        return document.getElementById(id);
      }
    </script>
  </head>
  <body onload="getContents()">

    <!-- 컨텐츠가 삽입될 영역 -->
    <div id="contents">내용물</div>

    <!-- 서버에서만 작동하는 자바스크립트 코드 -->

    <!-- 클라이언트에서만 작동하는 자바스크립트 코드 -->
    <script type="text/javascript">
      function getContents() {
        alert($('contents').innerHTML);
      }
    </script>

  </body>
</html>

함수명 '$'는 서버와 클라이언트가 공유하여 사용하고 있고 "runat" 속성을 가진 script 태그는 클라이언트에 넘어와서 자취를 감춥니다. body태그에 삽입된 "onserverload" 속성또한 마찬가지이죠. 아~ 행복해 지려고 해요.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar