MyAlbum   Pet
DirectX   openGL   Java   C/C++   STL   C#   Python   Window   ActiveX   SE & Refactoring   Game   Unicode   googleDesktop   Network   Database   Web   php   asp   asp.net   Library   QT   wxWidget   Something to read  
ToDo
zelon's WebAlbum
Google Tools
Google Naver map
ToRearrange
OpenOffice.org
Eclipse
Check W3 validator
Web Programming
e i R f
Anonymous

Contents

1 팝업창 띄우기
2 구글을 이용하여 차트 그리기
3 google widget toolkit 사용하기
4 html4 vs html5 의 차이점
5 java script debugger
6 div 로 table 처럼 레이아웃 정하기
7 iframe example
8 여러 웹브라우저의 화면 테스트
9 둥근 모서리 만들기
10 웹에서 자동완성 기능
11 웹에서 폰트와 색상등을 테스트 할 수 있는 사이트
12 web 2.0
13 ActiveX 사용자와의 인터랙셕을 바로 하게 하려면
14 symfony
15 sliding menu
16 JSP
17 XHTML 을 이용한 글 입력기
18 XHTML/CSS 이야기
19 cross browsing 을 위한 글
20 자동 리프레쉬
21 마우스에 반응하는 테이블
22 dynamic html
23 입력값의 길이에 반응하는 스크립트
24 value 값에 따라 작동하는 스크립트
25 Scroll Bar 바꾸기
26 깨어진 링크 찾는 프로그램(For Linux)
27 자바 스크립트로 동적 메뉴 만들기
28 rollover 버튼 만들기
29 입력폼에서 영문 + 숫자만 입력하는 거 체크
30 윈도우에 기본적으로 깔려있는 폰트 목록

1 팝업창 띄우기 #

먼저 다음과 같은 스크립트를 넣는다.

<script language="JavaScript">
<!--
function easyPop()
{
        msgwin = window.open('../easy/01.html', 'EasyWindow', 'width=1090, height=800, scrollbars=yes');
}
-->
</script>


그리고 원하는 곳에서 easyPop() 을 부르면 된다.



페이지가 로딩되었을 때는 body 의 onLoad 에서
<body onLoad='javascript:easyPop'>

특정 링크를 걸어서 띄울 때는
<a href='javascript:easyPop()'>...</a>


2 구글을 이용하여 차트 그리기 #


3 google widget toolkit 사용하기 #


4 html4 vs html5 의 차이점 #


5 java script debugger #


6 div 로 table 처럼 레이아웃 정하기 #


7 iframe example #

<iframe src="<?=$HomeUrl?>/zboard/?doc=bbs/gnuboard.php&bo_table=gnuboard_guestbook" width=90% height=800 align=middle frameborder=0 scrolling=auto>
</iframe>

8 여러 웹브라우저의 화면 테스트 #


9 둥근 모서리 만들기 #


10 웹에서 자동완성 기능 #


11 웹에서 폰트와 색상등을 테스트 할 수 있는 사이트 #


12 web 2.0 #


13 ActiveX 사용자와의 인터랙셕을 바로 하게 하려면 #


14 symfony #


php5 를 기반으로한 ajax framework

  • http://www.symfony-project.com/

  • 15 sliding menu #


    16 JSP #


    17 XHTML 을 이용한 글 입력기 #


    18 XHTML/CSS 이야기 #


    19 cross browsing 을 위한 글 #


    crossbrowsing.pdf

    20 자동 리프레쉬 #

    <meta http-equiv='refresh' content='0; url=http://www.ezwin.net'> content라는 곳은 보여줄 시간이다.
    

    21 마우스에 반응하는 테이블 #

    <tr onmouseover="this.style.background='#f5f5f5'" onmouseout="this.style.background='none'" onclick=window.open('map.asp','_self')>  
    

    22 dynamic html #


    23 입력값의 길이에 반응하는 스크립트 #

    <input type="text" onkeyup="CheckLength();">  
    

    24 value 값에 따라 작동하는 스크립트 #

    <input type="text" style="color:expression(parseInt(value)>=100 ? 'Red' : 'Black')"/> 
    

    25 Scroll Bar 바꾸기 #

    style : "border: 1px solid gold;
       scrollbar-3dlight-color:white;
    
       scrollbar-highlight-color:gold;
    
       scrollbar-face-color:white;
    
       scrollbar-arrow-color:gold;
    
       scrollbar-shadow-color:gold;
    
       scrollbar-darkshadow-color:white;
    
       scrollbar-track-color:white;"
    

    Uploads:WebProgramming/scrollbarStyle.gif

    26 깨어진 링크 찾는 프로그램(For Linux) #

    [http]LinkChecker

    27 자바 스크립트로 동적 메뉴 만들기 #

    <html>
    <body>
    <script language="JavaScript">
          function ZHideLayer(obj)
          {
             var aLayer;
             aLayer = document.getElementById(obj);
             aLayer.style.visibility = "hidden";
          }
    
          function ZHideAllLayer()
          {
             ZHideLayer("SubMenuIntro");
             ZHideLayer("SubMenuRule");
             ZHideLayer("SubMenuBoard");
             ZHideLayer("SubMenuRank");
          }
    
          function ZShowLayer(obj)
          {
             var aLayer;
             aLayer = document.getElementById(obj);
             aLayer.style.visibility = "visible";
          }
          
          function ZShowOnlyLayer(obj)
          {
             ZHideAllLayer();
             ZShowLayer(obj);
          }
    </script>
    <a href="#" onmouseOver="ZShowOnlyLayer('SubMenuIntro')">Intro</a>
    <br>
    <a href="#" onmouseOver="ZShowOnlyLayer('SubMenuRule')">Rlue</a>
    <br>
    <a href="#" onmouseOver="ZShowOnlyLayer('SubMenuBoard')">Board</a>
    <br>
    <a href="#" onmouseOver="ZShowOnlyLayer('SubMenuRank')">Rank</a>
    <br>
    
    <div id="SubMenuIntro" style="position:absolute;left:230; top:237; z-index:1; width:500; visibility: visibility">게임소개&nbsp;&nbsp;&nbsp;프루티소개&nbsp;& nbsp;&nbsp;게임 아이템&nbsp;&nbsp;&nbsp;꾸미기 아이템&nbsp;&nbsp;&nbsp;레어 아이템</div>
    <div id="SubMenuRule" style="position:absolute;left:270; top:237; z-index:1; width:500; visibility: hidden">게임배우기&nbsp;&nbsp;&nbsp;화면소개</a>&nbsp; &nbsp;&nbsp;게임방식/점수계산&nbsp;&nbsp;&nbsp;계급구성< /div>
    <div id="SubMenuBoard" style="position:absolute;left:470; top:240; z-index:1; width:500; visibility: hidden">자유게시판</a></div>
    <div id="SubMenuRank" style="position:absolute;left:489; top:237; z-index:1; width:500; visibility: hidden">전체 순위</a>&nbsp;&nbsp;&nbsp;월별 순위&nbsp;&nbsp;&nbsp;주별 순위</div>
    
    </body>
    </html> 
    

    28 rollover 버튼 만들기 #

    html 의 처음 부분에 아래와 같은 부분을 넣는다.
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function ShowJoinWindow()
    {
    	window.open("<% = ServerURL %>/join/join.asp", "FrutyMemeberJoin", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=no,copyhistory=no,width=650,height=313,");
    	return;
    }
    
    function ReadyAlert()
    {
    	alert("현재 준비 중입니다.");
    }
    function MM_preloadImages() { //v3.0
    
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
    	var i,j=0,x,a=MM_swapImage.arguments;
    	document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    
    }
    //-->
    </script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    

    body 의 onload 부분을 아래처럼 넣는다.

    onLoad="MM_preloadImages('images/seleclt-button_02.gif', ...미리 읽어놓을 이미지 위치들...);
    

    실제로 쓸 때는 이렇게 쓴다.

    <a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LoginButton','','http://server.com/images/LoginButtonOver.gif',1);"
    href="http://www.url.com"><img name="LoginButton" src="http://server.com/images/LoginButton.gif" border=0></a>
    

    img 태그에 name 속성을 주는 것이 중요하다.


    29 입력폼에서 영문 + 숫자만 입력하는 거 체크 #

    function fileChk() { 
    // 이부분만 수정해서 사용하면 될듯하네요
     var xemail = document.fromName.inputName.value;
     var filter=/^[a-zA-Z0-9_]+$/;
     if (filter.test(xemail)) {
      testresults=true;
     }else{
      alert("영문 대소문자, 숫자, _ 만 사용가능합니다");
      x.email.focus();
      testresults=false;
     }
      return testresults;
    }
    

    30 윈도우에 기본적으로 깔려있는 폰트 목록 #

    굴림
    굴림체
    돋움
    돋움체
    바탕
    바탕체
    궁서
    궁서체
    Arial
    Aria Black
    Arial Bold
    Arial Bold Italic
    Arial Italic
    Comic Sans MS
    Comic Sans MS Bold
    Courier New
    Courier New Bold
    Courier New Bold Italic
    Courier New Italic
    Georgia
    Georgia Bold
    Georgia Bold Italic
    Georgia Italic
    Impact
    Lucida Console
    Lucida Sans Unicode
    Microsoft Sans Serif Regular
    Modern
    Palatino Linotype
    Palatino Linotype Bold
    Palatino Linotype Bold Italic
    Palatino Linotype Italic
    Roman
    Script
    Symbol
    Tahoma
    Tahoma Bold
    Times New Roman
    Times New Roman Bold
    Times New Roman Bold Italic
    Times New Roman Italic
    Trebuchet MS
    Trebuchet MS Bold
    Trebuchet MS Bold Italic
    Trebuchet MS Italic
    Verdana
    Verdana Bold
    Verdana Bold Italic
    Verdana Italic
    Webdings
    WingDings