location.href 와 location.replace()
location.href = url; //history에 남는다.
location.replace(url); //history에 남지 않는다.
고로 replace로 옮겨진 페이지는 history.go(-1), history.back()으로 아무리 찾아갈려구 해도 갈수가 없다.
'개발 > 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 |
단위환산 프로그램 소스
단위 환산 프로그램입니다.
네이버에서 제공되는 소스기반으로 작성된 것입니다.
변환 단위는 온도, 속도, 압력, 부피, 넓이, 무게 질량, 길이 입니다.
'개발 > Javascript' 카테고리의 다른 글
[jquery] Form 플러그인 함수 (0) | 2010.04.06 |
---|---|
location.href 와 location.replace() (0) | 2010.03.31 |
Ajax 정복하기 (0) | 2009.10.10 |
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
Ajax 정복하기
최범균의 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
*/
'개발 > Javascript' 카테고리의 다른 글
location.href 와 location.replace() (0) | 2010.03.31 |
---|---|
단위환산 프로그램 소스 (0) | 2010.01.04 |
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
favicon 생성 (0) | 2009.09.17 |
크로스 브라우저 투명 코드 처리
if(view.filters){
}else{
view.style.opacity = 0.65; //기타브라우져
}
'개발 > Javascript' 카테고리의 다른 글
단위환산 프로그램 소스 (0) | 2010.01.04 |
---|---|
Ajax 정복하기 (0) | 2009.10.10 |
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
favicon 생성 (0) | 2009.09.17 |
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
[javascript] 사이트 즐겨찾기 추가하기
특정 사이트를 즐겨찾기에 추가하는 방법임다..
굳이 설명이 필요 없으리라..
<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>
'개발 > Javascript' 카테고리의 다른 글
Ajax 정복하기 (0) | 2009.10.10 |
---|---|
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
favicon 생성 (0) | 2009.09.17 |
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
favicon 생성
브라우저의 주소창이나 탭, 즐겨찾기에 사이트만의 특정 로고나 이미지를 삽입하는 방법이다.
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
<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>
이미지가에 문제가 있는경우는 나타나지 않을 수도 있다.
'개발 > Javascript' 카테고리의 다른 글
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
---|---|
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
[prototype.js] Element 생성하기 (0) | 2009.09.09 |
[javascript] 현재 페이지를 시작페이지로 설정하기
특정한 페이지를 브라우저 시작페이지로 설정을 한다.
IE에서는 동작을 하나 FF 3.5에서는 동작을 안하니 사용시 각 브라우저별로 테스트 후에 사용해야 함
'개발 > Javascript' 카테고리의 다른 글
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
---|---|
favicon 생성 (0) | 2009.09.17 |
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
[prototype.js] Element 생성하기 (0) | 2009.09.09 |
[HTML/JavaScript] Select list move options (0) | 2009.08.11 |
[javascript] 바탕화면에 사이트 바로가기 만들기
<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
'개발 > Javascript' 카테고리의 다른 글
favicon 생성 (0) | 2009.09.17 |
---|---|
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
[prototype.js] Element 생성하기 (0) | 2009.09.09 |
[HTML/JavaScript] Select list move options (0) | 2009.08.11 |
[HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
[prototype.js] Element 생성하기
new Element(tagName[, attributes])
예제
일반 스크립트
ele.setAttribute('class', 'link');
ele.setAttribute('href', '/popup.html');
ele.appendChild(document.createTextNode("팝업열기"));
prototype를 이용한 스크립트
엘리먼트 추가, 삭제 예제
<!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>
'개발 > Javascript' 카테고리의 다른 글
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
---|---|
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
[HTML/JavaScript] Select list move options (0) | 2009.08.11 |
[HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
HTML 특수문자코드표 (0) | 2009.07.22 |
[HTML/JavaScript] Select list move options
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript" type="text/javascript">
<!--
/**
* 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>
<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="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
<input type="button" value="<--"
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
'개발 > Javascript' 카테고리의 다른 글
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |
---|---|
[prototype.js] Element 생성하기 (0) | 2009.09.09 |
[HTML/JavaScript ]select box option 추가 삭제 예제 (0) | 2009.08.11 |
HTML 특수문자코드표 (0) | 2009.07.22 |
[Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |