2010년 2월 23일 화요일

Ext-js 공부해보자

회사 관리자 페이지를 새로 만들어 보자는 생각으로 처음 접하게된 javascript framework

Ext-js 깔끔하고 왠지 끌리는 디자인이 맘에든다.

 

일단 시작해 보자!

 

http://www.extjs.com/ 이곳에 가면 다운로드 받을수 있다.

현재 (2010.02.23) 최신버전은 Ext 3.1 이다.

 

다운로드 받은 소스안에 보면 여러가지 examples 소스들이 여러게 있다.

/ext/docs/index.html 을 열어보면 Ext API Documentation을 볼수 있다.

 

영어라 난 잘 모르겠다 -_-;

 

그래서 난 http://extjs.com/learn/Tutorials 이것부터 보기로 했다.

물론 영어다 Tutorial보면서 하나하나씩 따라해볼려고 한다.

처음 공부해볼것은 Tutorial: Basic Page Setup(http://www.extjs.com/learn/Tutorial:Basic_Page_Setup)

 

소스는 다음과 같다.

 


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title id="page-title">Title</title>
 

  <!-- Ext 에서 쓰이는 기본 CSS 파일이다. -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  <!--  아마도 Ext-js 기본이 되는 js 파일인거같다. -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  <!-- Ext-js 의 모든것들이 다 있지 않을까 싶다. -->

  <!-- 두가지가 있다. ext-all-debug.js || ext-all.js -->

  <!--첫번째 꺼는 디버깅가능한 원본이고 두번째꺼는 코드를 압축한 파일이다.-->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
     
  <script type="text/javascript">
 
  // 이건 BLANK 이미지 URL 을 성정하는 부분이다.

  // 아직은 어떤 의미로 쓰이는지는 잘모르겠다 -_-;;

  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 

  Ext.onReady(function() {
    // 이곳이 실질적인 소스가 들어가는 곳이다.

  });
  </script>
 
</head>
<body></body>
</html>

 

이렇게 하면 일단 Ext-js 를 사용해서 개발할 준비가된 페이지가 완성 된거 같다.

로그인 부터 하나하나 따라해봐야 겠다. 얼마나 걸릴지 모르겠지만 차근차근 하나씩

해볼려고 한다. 제일 문제는 영어가 걸린다 -_-;;

영어도 같이 공부해야 겠다.ㅋ

작성자: 시간: 댓글 없음:
라벨:

2010년 2월 11일 목요일

AJAX 공부 LINK

[한글] AJAX 마스터하기 - http://www.ibm.com/eveloperworks/kr/series/web/index.html

  • [한글] jQuery 관련 강의
    • 작성자: 시간: 댓글 없음:
    라벨:

    2010년 2월 10일 수요일

    IE6 PNG 투명처리 하기

    일을 하다가 IE7, IE8 에서는 PNG 이미지가 분명히 투명으로 보여서 열심히 작업을 했는데

    IE6에서 보니까 PNG 이미지 투명 부분이 회색으로 보이는 문제를 볼수 있었다.

    꽈광~~~ OTL 열심히 작업을 다 했것만... 이미지를 다시 해달라고 해야 하나? 검색해보자!!

     

    역시나 방법은 있었다.

     

    스크립트를 통한 방법 이였다. 소스는 다음과 같다.

     

    <style type="text/css">
     .png24 {
      tmp:expression(setPng24(this));
     }
    </style>
    <script type="text/javascript">
     function setPng24(obj) {
            obj.width=obj.height=1;
            obj.className=obj.className.replace(/\bpng24\b/i,'');
            obj.style.filter =
            "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
            obj.src='';
            return '';
        }

    </script>

     

    <div style="z-index:1000;position:absolute;top:15px;width:25">
      <img src="/img/img.png" class="png24" />
     </div>

     

    원리는 아직 이해를 못했다 -_-;;

    작성자: 시간: 댓글 없음:
    라벨: ,

    주민번호 알고리즘 & javascript 구현해보기

    필요에 의해서 주민번호 알고리즘에 대해서 검색하게 되었다.

     

    처음엔 소스를 그냥 긁어다 쓸려고 했지만 자스를 공부하는 입장에서 그건 좀 아닌듯 싶어서

     

    일단 주민번호 알고리즘을 검색해 보았다.

     

    생각보다 간단한 알고리즘을 가지고 있었다.

     

    1. 주민등록번호 각각의 수에 [2,3,4,5,6,7,8,9,2,3,4,5] 를 순서대로 자리수에 맞게 각각 곱한다.

    2. 곱해서 나온 결과 값을 모두 더한다.

    3. 합한 값을 11로 나눈 나머지 값을 11로 뺀다.

    4. 최종결과값이 주민등록 마지막 자리와 같아야 한다.

     

    이것을 javascript 로 구현해 보았다.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
    <title></title>
    <script type="text/javascript">
     function juminCheck(){

      // 주민번호 앞자리 뒷자리값을 가져온다.
      this.jMin1 = document.getElementById("jumin1");
      this.jMin2 = document.getElementById("jumin2");

     

      // juminck 함수를 만든다.

      this.juminck = function(jumin){

         // 전체 합을 넣어줄 변수선언, 0으로 초기화
         var jSum = 0;

         // 각자리에 곱해줄 수를 배열로 담는다.
         var jNum = [2,3,4,5,6,7,8,9,2,3,4,5];

       for (var i=0;i<jumin.length-1 ;i++ )
       {

         // 전체를 루프로 돌리면서 각자리에 chk 배열에

        //들어있는 값을 곱하고 sum 변수에 더해준다.
        jSum = jSum + (parseInt(jumin.substr(i,1))*jNum[i]);
       }

     

       // 모두 더한 값을 11로 나눈 나머지를 11로 빼준다.

       var jCkval = (11-(jSum)%11);

      

       // 초종값이 주민번호 마지막 자리와 같은지 비교해서 값을 리턴해준다.
       if (jCkval === jumin.substr(12,1))
       {
        return true;
       }else{
        return false;
       }


      };

      this.juminck(this.jMin1.value+this.jMin2.value);
      }

    </script>
    </head>
    <body>
     <input type="text" id="jumin1" name="jumin1"  />
     <input type="text" id="jumin2" name="jumin2"  />
     <button onclick="juminCheck()">체크</button>
    </body>
    </html>

     

    알고리즘도 간단하고 소스도 간단한데 다른 소스들을 보고 쓸때없이 따라하다 시간이 오래걸렸다.

    음 이제 부터 남 소스부터 보기도단 알고리즘만 알고 먼저 코딩을 해봐야 겠다.

    작성자: 시간: 댓글 없음:
    라벨:
    피드 구독하기: 글 (Atom)