캠핑과 개발


location.href = url; //history에 남는다.
location.replace(url); //history에 남지 않는다.

고로 replace로 옮겨진 페이지는 history.go(-1), history.back()으로 아무리 찾아갈려구 해도 갈수가 없다.



'DEVELOPMENT > Javascript' 카테고리의 다른 글

유용한 jQuery 플러그인 리스트  (0) 2010.06.18
[jquery] Form 플러그인 함수  (0) 2010.04.06
단위환산 프로그램 소스  (0) 2010.01.04
Ajax 정복하기  (0) 2009.10.10
크로스 브라우저 투명 코드 처리  (0) 2009.09.21

단위 환산 프로그램입니다.
네이버에서 제공되는 소스기반으로 작성된 것입니다.
변환 단위는 온도, 속도, 압력, 부피, 넓이, 무게 질량, 길이 입니다.

 


최범균의 ajax를 공부를 하면서 필요한 부분을 기술하였으며 해당 부분은 ajax.js로 만들어서 사용을 할수가 있습니다.

var ajax = {};
ajax.xhr = {};
ajax.Event = {};

/*
 * Ajax(Asynchronous Javascript and XML) 개념 익히기
 *
 * XMLHttpRequest 사용하기
 *
 * XMLHttpRequest 객체를 사용해서 요청 전송할때 필요한 함수
 *
 * open() : 요청의 초기화. GET/POST선택. 접속할 URL 입력
 * send() : 웹 서버에 요청 전송
 * onreadystatechange = callbackFunction
 *
 * open() 인자 설명
 *
 * 1번째 인자 : HTTP 메소드 지정 (form 메소드)
 * 2번째 인자 : 접속할 URL
 * 3번째 인자 : 동기/비동기 방식 지정
 *
 * ex)
 *
 * GET 방식일 경우
 *
 * httpRequest = getXMLHttpRequest();
 * httpRequest.open("GET", "/test.jsp", true);
 * httpRequest.send(null);
 *
 * POST 방식일 경우
 *  
 * httpRequest = getXMLHttpRequest();
 * httpRequest.open("GET", "/test.jsp", true);
 * httpRequest.send("id=admin&pw=1234");
 */


/*
 * onreadystatechange 프로퍼티 설명
 *
 * XMLHttpRequest 객체에 onreadystatechange 프로퍼티에 콜백 함수를 지정하면 웹 서버로부터
 * 응답이 도착했을 때 콜백 함수가 호출된다. 이 때 실제로 onreadystatechange에서 명시한 콜백 함수
 * 는 readyState라는 프로퍼티의 값이 변경될 때마다 호출된다.
 *
 *
 * readyState 프로퍼티 설명
 *
 *  0 : UNINITIALIZED - 객체만 생성되고 아직 초기화되지 않은 상태(open 메서드가 호출되지 않음)
 *  1 : LOADING - open 메서드가 호출되고 아직 send 메서드가 불려지지 않은 상태
 *  2 : LOADED - send 메서드가 불려졌지만 status와 헤더는 도착하지 않은 상태
 *  3 : INTERACTIVE - 데이터의 일부만 받은 상태
 *  4 : COMPLETED - 데이터를 전부 받은 상태. 완전한 데이터의 이용 가능
 * 
 *  ex)
 *  function callbackFunction(){
 *   if(httpRequest.readyState == 1){
 *     
 *   }else if(...){
 *   
 *   }else if(httpRequest.readyState == 4){
 *    //서버로부터 응답이 도착
 *          //완료후 작업할 내용을 작성한다.
 *   }
 *  }
 *   
 */

/*
 * 서버로부터의 응답 상태 : status / statusText
 *
 * 웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야 한다.
 * 웹 서버는 작업을 올바르게 실행했는지, 처리 도중에 에러가 발생했는지등의 상태 코드를 통해서 알려주는데,
 * XMLHttpRequest 객체는 웹 서버가 전달한 상태 코드를 status 프로퍼티에 저장한다. status 프로퍼티에
 * 저장되는 주요 상태 코드는 다음과 같다.
 *
 *  HTTP 주요 상태 코드
 * 
 *  200 : OK - 요청설명
 *  403 : Forbidden - 접근 거부
 *  404 : Not Found - 페이지 없음
 *  500 : Internal Server Error - 서버 오류 발생
 * 
 *  ex)
 * 
 *  function callbackFunction(){
 *   if(httpRequest.readyState == 4){
 *    if(httpRequest.status == 200){
 *     //정상적인 수행
 *        //완료후 작업할 내용 작성
 *       }else{
 *        alert('에러 발생' + httpRequest.status);
 *       }
 *      }
 *  }
 */


/*
 * 응답 데이터 사용하기 : responseText, responseXML
 *
 * XMLHttpRequest에서 정상적인 요청이 이루어질 경우 요청한 페이지에서 넘겨준 값을 알맞게 처리할때
 * 사용한다. 텍스트 형식과, XML형식이 있다.
 *
 * function callbackFunction(){
 * if(httpRequest.readyState == 4){
 *   if(httpRequest.status == 200){
 *    var txt = httpRequest.responseText; //text일 경우
 *     var xml = httpRequest.responseXML; //XML 형식인 경우
 *  
 *     alert(txt);
 *   }
 *  }
 * }   
 */

/*
 * 동기 방식과 비동기 방식의 실행 차이
 *
 * XMLHttpRequest의 open() 함수는 인자를 세 개를 받는데, 그 중 마지막 인자는 동기/비동기 여부를
 * 표시한다. 아래 코드처럼 open() 함수에 세 번째 인자 값을 true로 지정하기 되면 비동기 방식으로 호출된다.
 *
 *  1. httpRequest = getXMLHttpRequest();
 *  2. httpRequest.onreadystatechange = callbackFunction;
 *  3. httpRequest.open('GET', '/test.jsp', true) <-- 마지막 인자
 *  4. httpRequest.send(null);
 *  5. //비동기 방식
 *  6. callSomeFunction();
 * 
 * 
 *  비동기 방식 - send()함수가 호출된 뒤 곧바로 6.줄의 callSomeFunction 함수가 실행된다.
 *  동   기 방식 - send()함수가 호출되면, 서버와의 통신이 완전히 완료된 이후에 send() 함수 이후의
 *          코드 6.줄의 callSomeFunctiong함수가 실행된다.
 */


/*
 * 파라미터의 한글 처리 방법 : "name=" + encodeURIComponent('한글');
 */

 

/*
 * ajax 실행
 *
 * 사용법
 * new ajax.xhr.Request('targetPage.jsp', 'num=1&id=test', targetFunction, 'POST');
 * @param url 요청 URL
 * @param params 인자값
 * @param callback 콜백함수
 * @param method POST,GET
 */
ajax.xhr.Request = function(url, params, callback, method){
 this.url = url;
 this.params = params;
 this.callback = callback;
 this.method = method;
 this.send();
}

ajax.xhr.Request.prototype = {
 /**
  * Ajax HttpRequest 객체를 구한다.
  * @return
  */
 getXMLHttpRequest: function(){
  if(window.ActiveXObject){ //IE에서 XMLHttpRequest 구하기
   try{
    return new ActiveXObject("Msxml2.XMLHTTP"); //IE중에서도 Microsoft.XMLHTTP 보다 이전 버전 이므로 먼저 구한다.
   }catch(e){
    try{
     return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e1){
     return null;
    }
   }
  }else if(window.XMLHttpRequest){ //IE 이외의 파폭,오페라 같은 브라우저에서 XMLHttpRequest 구하기
   return new XMLHttpRequest;
  }else{
   return null;
  }
 },
 /**
  * Ajax 통신을 한다.
  * @return
  */
 send: function(){
  this.req = this.getXMLHttpRequest();
  
  var httpMethod = this.method ? this.method : 'GET';
  if(httpMethod != 'GET' && httpMethod != 'POST'){
   httpMehtod = 'GET';
  }
  
  var httpParams = (this.params == null || this.params == '') ? null : this.params;
  var httpUrl = this.url;
  
  if(httpMethod == 'GET' && httpParams != null){
   httpUrl = httpUrl + "?" + httpParams;
  }
  
  this.req.open(httpMethod, httpUrl, true);
  this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  var request = this;
  this.req.onreadystatechange = function(){
   request.onStateChange.call(request);
  }
  this.req.send(httpMethod == 'POST' ? httpParams : null);
 },
 /**
  * 콜백함수 호출
  * @return
  */
 onStateChange: function(){
  this.callback(this.req);
 }  
}
/**
 * 이벤트 리스너 등록
 */
ajax.Event.addListener = function(element, name, observer, useCapture){
 useCapture = useCapture || false;
 
 if(element.addEventListener){ //기타 브라우저
  element.addEventListener(name, observer, useCapture);
 }else if(element.attachEvent){  //IE 브라우저
  element.attachEvent('on' + name, observer);
 }
}
/**
 * 등록된 이벤트 리스너 삭제
 */
ajax.Event.removeListener = function(element, name, observer, useCapture){
 useCapture = useCapture || false;
 
 if(element.removeEventListener){ //기타 브라우저  
  element.removeEventListener(name, observer, useCapture);
 }else if(element.detachEvent){  //IE 브라우저
  element.detachEvent('on' + name, observer);
 }
}

/**
 * 이벤트 대상 반환
 */
ajax.Event.getTarget = function(event){
 if(event == null) return null;
 if(event.target) return event.target; //W3C 표준 이벤트 타켓
 else if(event.srcElement) return event.srcElement; //구버전의 IE 타겟
 return null;
}

/*
 * 마우스 이벤트 종류
 *
 * click : 마우스 버튼 클릭시 발생
 * dbclick : 마우스 버튼 더블 클릭 발생시 발생(비표준)
 * mousedown : 마우스 버튼이 눌렸을 때
 * mouseup : 마우스 버튼을 뗐을 때
 * mouseover : 마우스가 영역 안으로 들어왔을 때
 * mousemove : 마우스가 영역 안에서 이동할 때
 * mouseout : 마우스가 영역 밖으로 나갈 때
 *
 */


/*
 * 마우스 클릭 버튼 판별하기
 *
 * button 프로퍼티를 사용(event.button)
 * 또는 which 프로퍼티 사용(파이어폭스, 사파리, 모질라 지원)
 *
 * button 프로퍼티 (파이어 폭스/모질라)
 * 0 : 일반버튼(보통 왼쪽 버튼)
 * 1 : 추가 버튼(보통 가운데, 또는 휠 관련)
 * 2 : 콘텍스트 버튼(보통 오른쪽 버튼)
 *
 * button 프로퍼티 IE 
 * 1 : 왼쪽 마우스 버튼 (단 click 이벤트일 경우는 0 을 반환)
 * 2 : 오른쪽 마우스 버튼
 * 3 : 휠(가운데)
 *
 * which 프로퍼티 사용 (IE 경우 undefind 값이 없음)
 * 1 : 왼쪽
 * 3 : 오른쪽
 * 2 : 휠(가운데)
 *
 */

/*
 * 마우스 발생 위치 정보
 *
 * clientX : 웹 브라우저에서 출력되는 영역에서 X 좌표값을 반환 --> X
 * clientY : 웹 브라우저에서 출력되는 영역에서 Y 좌표값을 반환 
 * screenX : 전체 화면에서 X 좌표값을 반환한다. --> X
 * screenY : 전체 화면에서 Y 좌표값을 반환한다.
 *
 */

/*
 * 브라우저 안에 스크롤 된 마우스의 마우스의 좌표 구하기
 *
 * scrollLeft, scrollTop를 이용
 *
 * clientX, clientY의 마우스 좌표를 구한 영역에 위에 코드를 사용하여 스크롤 된
 * 영역만큼 더해준다.
 */


/*
 * 마우스 이벤트로 작업을 할 경우는 오른쪽 마우스 클릭은 가급적 사용하지 않느것이 좋다
 * 이유는 클릭 이벤트 자체를 지원하지 않는 브라우저가 있기 때문이다.
 */


/**
 * 마우스 좌표값을 반환한다.
 */
ajax.Event.getMouseXY = function(event){
 var mouseX = event.clientX;
 var mouseY = event.clientY;
 
 var dd = document.documentElement; //W3C 표준 (최신 브라우저에서는 지원)
 var db = document.body; //구버전의 경우 (document.documentElement 미지원 경우)
 
 if(dd){
  mouseX += dd.scrollHeight;
  mouseY += dd.scrollTop;
 }else if(db){
  mouseX += db.scrollHeight;
  mouseY += db.scrollTop;
 }
 
 return {x: mouseX, y: mouseY};
}

/**
 * 마우스 왼쪽 버튼 클릭 여부를 boolean 형식으로 반환한다.
 */
ajax.Event.isLeftButton = function(event){
 return (event.which) ? //which 프로퍼티 여부가 존재하는지 여부
   evnet.which == 1 && event.button == 0 : //파이어폭스/모질라
    (event.type == 'click') ? event == 0 : event.button == 1; //IE경우
}

/**
 * 마우스 오른쪽 버튼 클릭 여부를 boolean 형식을 반환한다.
 */
ajax.Event.isRightButton = function(event){
 return event.button == 2; //오른쪽 버튼의 경우는 IE, 파이어폭스/모질라가 모두 동일
}

/*
 * 키보드 이벤트
 *
 * keydown : 키보드를 누를 때 발생한다.
 * keyup : 키보드에서 뗄 때 발생한다.
 * keypress : 키보드를 누를 때 발생한다.(비표준)
 */

/*
 * 키보드 이벤트 프로퍼티
 *
 * keyCode : 키 코드값
 * ctrlKey : Ctrl 키를 누른 경우 true
 * shiftKey : Shift 키를 누른 경우 true
 * altKey : Alt 키를 누른 경우 true 
 */


특정 요소를 투명하게 처리할때 IE와 기타 브라우저가 표현하는 방식이 다르기 때문에 다음과 같이 해준다.
 
var view = document.getElementById('view');
if(view.filters){
    view.style.filter = 'alpha(opacity=65)'; //IE
}else{
    view.style.opacity = 0.65; //기타브라우져
}

특정 사이트를 즐겨찾기에 추가하는 방법임다..
굳이 설명이 필요 없으리라..

<html>
<head>
 <title>즐겨찾기 추가</title>
 <script language="javascript">
 /**
 * 해당 사이트를 즐겨찾기에 추가한다.
 * 이 스크립트를 사용하기 위해서는 각 브라우저마다 기능 여부를 체크후에 사용
 *
 **/
 function addBookMark(){
     var url = "http://hmjkor.tistory.com";
     var title = "맹돌이의 블로그입니다.";
     window.external.AddFavorite(url, title);
 }
 </script>
</head>
<body>
    <a href="javascript:addBookMark();">즐겨찾기 추가</script>
</body>
</html>


브라우저의 주소창이나 탭, 즐겨찾기에 사이트만의 특정 로고나 이미지를 삽입하는 방법이다.



1. favicon.ico 제작

먼저 사용될 favicon 아이콘을 제작한다.
사이즈는 16*16, 32*32, 48*48로 제작
jpg,gif,png 등의 파일을 사이즈에 맞게 제작을 하여 파일명은 favicon, 확장자는 ico 확장자로 변경한다. 직접 제작을 해도 되나 그러지 못한 경우는 검색해보면 많이 나오니 찾아서 제작
하나 추천 : http://www.html-kit.com/favicon

2. html 페이지 코드 삽입
 
만들어진 favicon.ico를 WebRoot 하위에 업로드 함
index 페이지에 다음 코드를 삽입

방법 1

<html>
<head>
    <title>favicon</title>
     <link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>

방법 2
<html>
<head>
    <title>favicon</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
</body>
</html>


이미지가에 문제가 있는경우는 나타나지 않을 수도 있다.


특정한 페이지를 브라우저 시작페이지로 설정을 한다.
IE에서는 동작을 하나 FF 3.5에서는 동작을 안하니 사용시 각 브라우저별로 테스트 후에 사용해야 함

<a style="cursor:pointer" HREF onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://hmjkor.tistory.com');">시작페이지로</a>


 


 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<LINK REL="ShortCut ICON"  href="http://www.okjsp.pe.kr/favicon.ico">
<TITLE> New Document </TITLE>
<script language="Javascript">
function open_ShortCut() {
   var WshShell = new ActiveXObject("WScript.Shell");
   strDesktop = WshShell.SpecialFolders("Desktop");
   var oUrlLink = WshShell.CreateShortcut(strDesktop + "\\okjsp.url" );
   oUrlLink.TargetPath = "http://www.okjsp.pe.kr";
   oUrlLink.Save();
}
</script>
</HEAD>
<body>
클릭 <a href="javascript:open_ShortCut()">바탕화면아이콘 저장</a>
</BODY>
</HTML>

 
출처 : http://okjsp.pe.kr

메소드
new
Element(tagName[, attributes])


예제
<a class="link" href="/popup.html">팝업열기</a>

일반 스크립트
var ele = document.createElement('a');
ele.setAttribute('class', 'link');
ele.setAttribute('href', '/popup.html');
ele.appendChild(document.createTextNode("팝업열기"));

prototype를 이용한 스크립트
var a = new Element('a', { 'class': 'link', href: '/popup.html' }).update("팝업열기");



엘리먼트 추가, 삭제 예제

<!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" xml:lang="ko" lang="ko">
<head>
 <title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="generator" content="editplus" />
 <meta name="author" content="" /> 
 <meta http-equiv="keywords" content="enter,your,keywords,here" />
 <meta http-equiv="description" content="A short description of this page." />
 <meta http-equiv="content-type" content="text/html; charset=EUC-KR" />
 <script type="text/javascript">
 var count = 0;
 /**
 * 아이템 추가
 */
 function appendItem(){
  count++;
  var newItem = document.createElement("div");
  newItem.setAttribute("id", "item_" + count);
  var html = '새로 추가된 아이템['+count+'] <input type="button" value="삭제" onclick="removeItem('+ count +')" />';
  newItem.innerHTML = html;

  var itemListNode = document.getElementById('itemList');  
  itemListNode.appendChild(newItem);
  
 }
 /**
 * 아이템 삭제
 */
 function removeItem(idCount){
  var item = document.getElementById("item_" + idCount);
  if(item != null){
   item.parentNode.removeChild(item);
  }
 }
 </script>
</head>
<body>
 <input type="button" value="추가" onclick="appendItem()" />
 <div id="itemList"></div>
</body>
</html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <script language="JavaScript" type="text/javascript">
 <!--
 var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
 
 /**
 * option 추가
 **/
 function addOption(theSel, theText, theValue){
  var newOpt = new Option(theText, theValue);
  var selLength = theSel.length;
  theSel.options[selLength] = newOpt;
 }
 /**
 * option 삭제
 **/
 function deleteOption(theSel, theIndex){
  var selLength = theSel.length;
  if(selLength>0){
   theSel.options[theIndex] = null;
  }
 }
 
 /**
 * option 삭제
 **/
 function moveOptions(theSelFrom, theSelTo){
  
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
  
  var i;
  
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--){
   if(theSelFrom.options[i].selected){
    selectedText[selectedCount] = theSelFrom.options[i].text;
    selectedValues[selectedCount] = theSelFrom.options[i].value;
    deleteOption(theSelFrom, i);
    selectedCount++;
   }
  }
  
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--){
   addOption(theSelTo, selectedText[i], selectedValues[i]);
  }
  
  if(NS4) history.go(0);
 }
 //-->
 </script>
 </HEAD>
 <BODY>
<form action="yourpage.asp" method="post">
<table border="0">
 <tr>
  <td>
   <select name="sel1" size="10" multiple="multiple">
   <option value="1">Left1</option>
   <option value="2">Left2</option>
   <option value="3">Left3</option>
   <option value="4">Left4</option>
   <option value="5">Left5</option>
   </select>
  </td>
  <td align="center" valign="middle">
   <input type="button" value="--&gt;"
    onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
   <input type="button" value="&lt;--"
    onclick="moveOptions(this.form.sel2, this.form.sel1);" />
  </td>
  <td>
   <select name="sel2" size="10" multiple="multiple">
   <option value="1">Right1</option>
   <option value="2">Right2</option>
   <option value="3">Right3</option>
   <option value="4">Right4</option>
   <option value="5">Right5</option>
   </select>
  </td>
 </tr>
</table>
</form>
 </BODY>
</HTML>

출처 : http://www.mredkj.com/tutorials/tutorial_mixed2b.html