javascript

Edit

주요 참조 사이트

기초 강좌

Writing Object-Oriented JavaScript

Closure

주요 객체 사용법 등

현재소스를 클립보드에 복사

javascript:a=document.body.innerHTML;window.clipboardData.setData("Text",a);void(0);

시작페이지로

<a  href onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://kissofgod.net');">시작페이지로</a>

내장 객체

화면 크기

Cookie

// 쿠키 생성
function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
     ((expires) ? "; expires=" + expires.toGMTString() : "") +
     ((path) ? "; path=" + path : "") +
     ((domain) ? "; domain=" + domain : "") +
     ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

// 쿠키값 가져오기
function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
   begin = dc.indexOf(prefix);
   if (begin != 0) return null;
  } else
   begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
   end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

// 쿠키 삭제
function deleteCookie(name, path, domain) {
  if (getCookie(name)) {
   document.cookie = name + "=" +
   ((path) ? "; path=" + path : "") +
   ((domain) ? "; domain=" + domain : "") +
   "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

동적 HTML

insertAdjacentHTML

속도 향상

Encoding

<html>
<head>
<script>
  function encode(){
    var original = document.forms[0].original.value;
    var encoded = encodeURI(original);
    document.forms[0].encoded.value = encoded;
  }
</script>
</head>
<body>
<form name="form">
<input type="text" name="original" width="100%"/><br/>
<input type="text" name="encoded" width="100%"/><br/>
<a href="javascript:encode()">encode</a>
</form>
</body>
</html>

이벤트

정규식

예제

trim

function trim (strSource) {
    var re = /^\s+|\s+$/g;
    return strSource.replace(re, '');
}

이미지 주소만 추출

var strToMatch = "<img src=\"http://a.jpg\"/> 이것은 이미지 <img src='http://b.jpg'/> 으하  <img src='http://a.gif'/>";
var strReg = new RegExp("http://*[^>]*\\.(jpg|gif)","gim");
var xArr =  strToMatch.match(strReg);

기타

화면 효과

행 추가/삭제

<html>
<script>
    var rowIndex = 1;
    function addFile(form,k){
        if(rowIndex > (5-k)) return false;
        var oCurrentRow,oCurrentCell;
        var sAddingHtml;
        oCurrentRow = insertTable.insertRow();
        rowIndex = oCurrentRow.rowIndex;
        oCurrentCell = oCurrentRow.insertCell();
        rowIndex++;
        oCurrentCell.innerHTML = "<tr><td colspan=4><INPUT class=input TYPE=FILE NAME='filename" +rowIndex + "' size=25></td></tr>";
        form.rowCount.value = rowIndex;
    }

    //첨부파일 삭제
    function deleteFile(form){
        if(rowIndex<2){
            return false;
        }else{
            form.rowCount.value = form.rowCount.value - 1;
            rowIndex--;
            insertTable.deleteRow(rowIndex);
        }
    }

</script>

<body>

<form name="write">
     <table name='insertTable' id='insertTable' border=0 cellpadding=0 cellspacing=0>
        <tr><td valign=bottom><INPUT type='file' maxLength='100' name='filename1' size='25'></td>
        <td width=100>
        <input type="button" value="추가" onClick="addFile(write,1)" border=0 style='cursor:hand' hspace=4>
        <input type="button" value="삭제" onClick='deleteFile(write)' border=0 style='cursor:hand'>
        </td>
        </tr>
    </table>
    <input type="hidden" name="rowCount" value="1">
    <input type="submit">
    </form>
</body>
</html>

커서 위치에 layer 나타나게 하기

function showPhoto(imageFileName){
    document.getElementById("photoImage").src = imageFileName;
    var photoLayer =  document.getElementById("photoLayer");
    photoLayer.style.display = "block";
    photoLayer.style.pixelLeft = document.documentElement.scrollLeft + event.x;
    photoLayer.style.pixelTop = document.documentElement.scrollTop + event.y;
}

function hidePhoto(){
    document.getElementById("photoLayer").style.display = "none";
    document.getElementById("photoImage").src = "/image/photo.gif";
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

으로 DOCTYPE이 지정되었을 때는 document.body 대신 document.documentElement 사용해야 할 때가 있음

보안

AJAX

강좌

개발 도구

JSDT

FireBug (firefox)

First javascript editor

Microsoft Script Debugger (Internet Explorer)

Internet Explorer Developer Toolbar (Internet Explorer)

설치 후 보기-탐색창- IE DOM Explorer에 체크하면 DOM Explorer로 페이지를 볼 수있습니다. (저는 설치하고 한참동안 '뭐가 달라진거야?'하고 모르고 있었습니다 ^^; )

기타 도구

테스트

jsunit

javascript를 위한 unit test

참고자료

Js test driver

라이브러리

마소 2008/03 자바스크립트 라이브러리 기사 참조

GWT

  1. Google Web Toolkit, Apache Derby, Eclipse를 사용하여 Ajax 애플리케이션 구현하기, Part 1: 환상적인 프론트엔드 (한글) http://www.ibm.com/developerworks/kr/library/os-ad-gwt1/index.html
  2. Google Web Toolkit, Apache Derby, Eclipse를 사용하여 Ajax 애플리케이션 구현하기, Part 2 : 신뢰성 있는 백엔드(back end) (한글) http://www.ibm.com/developerworks/kr/library/os-ad-gwt2/index.html
  3. Google Web Toolkit, Apache Derby, Eclipse를 사용하여 Ajax 애플리케이션 구현하기, Part 3 : 커뮤니케이션(Communication) (한글) http://www.ibm.com/developerworks/kr/library/os-ad-gwt3/index.html
  4. Google Web Toolkit, Apache Derby, Eclipse를 사용하여 Ajax 애플리케이션 구현하기, Par4 : 전개 (한글) http://www.ibm.com/developerworks/kr/library/os-ad-gwt4/index.html

MVP pattern with GWT

DEMO

Children