Rev. 2.73

Juriy Zaytsev씨는 자바스크립트 프레임웍인 Prototype 1.6.0.2의 치트 시트를 PDF로 작성하고 공개했습니다. 일종의 커닝 페이퍼 같은거죠. Prototype 1.5.0의 치트 시트도 있지만 1.6.0버전에 와서는 형식도 변하고 변경된 메서드도 있기 때문에 그대로 사용하기에는 무리가 있었습니다. 메서드의 스펠을 까먹었거나 인자의 순서가 헛갈릴 때 스윽 훑어 보면 그만입니다. Prototype 1.6.0을 사용 중이라면 필수 아이템이지요. 두말할 필요없이 챙겨 놓읍시다.

prototype.jpg

Comments

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