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

studioLogo.gif

Aptana Studio 1.1판이 출시되었습니다. 향상된 문법강조, Ajax 서버 Jaxer 지원, 모니터링 도구 TailView 추가, 상황별 보조 편집도구 등 아주 많은 곳에 변화가 있는데요. 구체적으로 어떠한 변화가 있는지 자세히 살펴 보겠습니다.

  • HTML에 포함된 CSS와 JS영역을 커서 위치에 의해 자동으로 구분합니다.
  • Jaxer 서버가 추가 지원되어 프로젝트 생성시에 설정할 수 있습니다.
  • TailView는 웹서버의 상황을 실시간으로 모니터링하며 상황별 이벤트를 컬러라이즈합니다.
  • References는 자바스크립트 프레임웍의 코드 어시스트를 즉시 활성/비활성 할 수 있습니다.
  • 프로젝트별로 프리뷰 설정을 다르게 사용할 수 있습니다. 로컬-서버 또는 URL을 사용할 수 있습니다.
  • 파이어폭스 프리뷰 콘솔이 추가되었습니다. CSS 및 JS오류 또는 경고 메시지를 즉시 로깅합니다.
  • HTML, CSS, JS의 보조 도구가 추가되었습니다. 자주 사용되는 문장을 손쉽게 삽입할 수 있습니다.
  • 다양한 종류의 로컬-서버를 추가할 수 있습니다. 서버별 설정을 별개로 할 수도 있습니다.
  • 검색기능이 강화되었습니다. 특별한 검색탭을 직접 생성하고, 멀티-라인 문자열 검색을 지원합니다.
  • Outline기능이 강화되었습니다. 외부 JS파일을 인라인으로 처리하여, JS 오버뷰를 바로 보여줍니다.
  • 설정정보의 백업 및 복구기능이 추가되었습니다. 자동백업으로 설정정보를 보호하세요.

위 기능들은 $99짜리 프로페셔널 에디션과 무관하게 커뮤니티 에디션에도 모두 적용되는 내용들입니다. 칫! 사지말껄 그랬어요...

Comments