Ajax 예제코드?

Javascript 2009. 8. 4. 21:50

var productGridDiv;
var please_wait = "<img src='/us/p2images/common/loading.gif' />";

function chkAjaBrowser()
{
 var a,ua = navigator.userAgent;
 this.bw= {
   safari    : ((a=ua.split('AppleWebKit/')[1])?a.split('(')[0]:0)>=124 ,
   konqueror : ((a=ua.split('Konqueror/')[1])?a.split(';')[0]:0)>=3.3 ,
   mozes     : ((a=ua.split('Gecko/')[1])?a.split(" ")[0]:0) >= 20011128 ,
   opera     : (!!window.opera) && ((typeof XMLHttpRequest)=='function') ,
   msie      : (!!window.ActiveXObject)?(!!createHttpRequest()):false
 }
 return (this.bw.safari||this.bw.konqueror||this.bw.mozes||this.bw.opera||this.bw.msie)
}

function createHttpRequest()
{
 if(window.ActiveXObject){
  try {
   return new ActiveXObject("Msxml2.XMLHTTP") ;
  } catch (e) {
   try {
    return new ActiveXObject("Microsoft.XMLHTTP") ;
   } catch (e2) {
    return null ;
    }
   }
 } else if(window.XMLHttpRequest){
  return new XMLHttpRequest() ;
 } else {
  return null ;
 }
}

function sendRequest(callback,data,method,url,async,sload)
{
 var oj = createHttpRequest();
 if( oj == null ) return null;
 
 var sload = (!!sendRequest.arguments[5])?sload:false;
 if(sload || method.toUpperCase() == 'GET')url += "?";
 if(sload)url=url+"t="+(new Date()).getTime();
 
 var bwoj = new chkAjaBrowser();
 var opera   = bwoj.bw.opera;
 var safari   = bwoj.bw.safari;
 var konqueror = bwoj.bw.konqueror;
 var mozes   = bwoj.bw.mozes ;

 if(opera || safari || mozes){
  oj.onload = function () { callback(oj); }
 } else {
 
  oj.onreadystatechange =function ()
  {
   if ( oj.readyState == 4 ){
    callback(oj);
   }
  }
 }

 data = uriEncode(data)
 if(method.toUpperCase() == 'GET') {
  url += data
 }

 oj.open(method,url,async);
 
 setEncHeader(oj)

 oj.send(data);

 function setEncHeader(oj){

  var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
  
  if(!window.opera){
   oj.setRequestHeader('Content-Type',contentTypeUrlenc);
  } else {
   if((typeof oj.setRequestHeader) == 'function')
    oj.setRequestHeader('Content-Type',contentTypeUrlenc);
  }
  
  return oj
 }

 return oj
}

function response(req) {
 if (req.readyState != 4)
  return;
 var tmp;
 if (req.status == 200 || req.status == 0) {
  tmp = req.responseText
 }
 
 if(tmp == 'error'){
  document.location = "/us/common/notfound.html";
 }
 document.getElementById('subtype_transparency').style.display='none';
 document.getElementById('subtype_transparency_image').style.display='none';
 productGridDiv.innerHTML = tmp;
 compare_initialize ();
}

function uriEncode(data){

 if(data!=""){
  var encdata = '';
  var datas = data.split('&');
  for(i=1;i<datas.length;i++)
  {
   var dataq = datas[i].split('=');
   encdata += '&' + encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
  }
 } else {
  encdata = "";
 }
 return encdata;
}

function open_url(url, params, targetId) {
 productGridDiv = document.getElementById(targetId)
 
// productGridDiv.innerHTML = please_wait;
// document.getElementById("subtype_transparency").style.height='2000px';
 document.getElementById('subtype_transparency').style.display='block';
 document.getElementById('subtype_transparency_image').style.display='block';

 req = sendRequest(response, params, "GET", url, true);

}



※ open_url() 함수의 콜을 시작으로 (url, params, targetId) 데이터를 갱신하여 targetId value의 레이어에 전송.

제작자 : 프리랜서 이현영 과장님....

오픈소스니까 저작권 신경안씀.

현재 작업하게 된 DockUI <-> 연동해서 작업할 계획.

어느정도 튜닝필요.

Posted by 철냄비짱
,
<script language="javascript">
   var str1 = "Happy day";
   var str2 = "우리나라 좋은나라";
   
   document.write("<pre>");
   document.writeln(str1+" 앞글자만 대문자 변환 : "+"까먹었음");
   document.writeln(str1+" 대문자 변환 : "+str1.toUpperCase());
   document.writeln(str1+" 소문자 변환 : "+str1.toLowerCase());
   document.writeln();

   document.writeln(str1+" 글자 수 : "+str1.length);  // 공백 포함
   document.writeln(str2+" 글자 수 : "+str2.length);
   document.writeln();

   document.writeln(str1+" 의 indexOf('문자') : "+str1.indexOf("a"));    // 문자의 index 값 출력
   // 0부터 시작, 대소문자 구분, 중복될 경우 앞의 값 출력, 존재하지 않을 경우 -1 출력
   document.writeln(str2+" 의 indexOf('문자') : "+str2.indexOf("나"));
   document.writeln(str2+" 의 lastIndexOf('문자') : "+str2.lastIndexOf("나"));   // 중복될 경우 마지막 값 출력
   document.writeln();

   document.writeln(str1+" 의 charAt(index번호) : "+str1.charAt(0));    // index번호에 해당하는 문자 출력
   document.writeln(str2+" 의 charAt(index번호) : "+str2.charAt(3));
   document.writeln();

   document.writeln(str1+" 의 substring(index번호1, index번호2) : "+str1.substring(0,5));   // index번호1 부터 (index번호2 -1) 까지 문자 출력
   document.writeln(str1+" 의 substring(index번호1) : "+str1.substring(1));          // index번호2 생략시 문자열 끝까지 출력
   document.writeln(str1+" 의 substring(index번호1, -index번호2) : "+str1.substring(2,-1));  // index번호 음수는 불가
   document.writeln();

   document.writeln(str1+" 의 slice(index번호1, -index번호2) : "+str1.slice(2,-1));  // index번호가 음수일 경우 오른쪽 기준으로 0부터 시작
   document.writeln(str1+" 의 slice(index번호1) : "+str1.slice(1));
   document.writeln(str1+" 의 slice(index번호1, index번호2) : "+str1.slice(0,5));  // 음수를 제외하면 substring와 같다.
   document.writeln();

   document.writeln(str1+" 의 substr(index번호, length) : "+str1.substr(2,5));  // index번호 부터 length(글자 수) 만큼 출력
   document.writeln(str1+" 의 substr(index번호, length) : "+str1.substr(2,1));

   document.write("</pre>");
  </script>

 

--------------------------------------------------------------------------------------

 

Happy day 앞글자만 대문자 변환 : 까먹었음
Happy day 대문자 변환 : HAPPY DAY
Happy day 소문자 변환 : happy day

Happy day 글자 수 : 9
우리나라 좋은나라 글자 수 : 9

Happy day 의 indexOf('문자') : 1
우리나라 좋은나라 의 indexOf('문자') : 2
우리나라 좋은나라 의 lastIndexOf('문자') : 7

Happy day 의 charAt(index번호) : H
우리나라 좋은나라 의 charAt(index번호) : 라

Happy day 의 substring(index번호1, index번호2) : Happy
Happy day 의 substring(index번호1) : appy day
Happy day 의 substring(index번호1, -index번호2) : Ha

Happy day 의 slice(index번호1, -index번호2) : ppy da
Happy day 의 slice(index번호1) : appy day
Happy day 의 slice(index번호1, index번호2) : Happy

Happy day 의 substr(index번호, length) : ppy d
Happy day 의 substr(index번호, length) : p
Posted by 철냄비짱
,

Michael Abernethy, 제품 개발 관리자, Optimal Auctions

옮긴이 : 박재호 이해영 dwkorea@kr.ibm.com

원문 게재일 : 2008 년 10 월 28 일
번역 게재일 : 2009 년 1 월 13 일

JQuery는 동적 RIA를 쉽게 개발하는 방법에 목마른 개발자를 위한 자비스크립트 라이브러리로 각광을 받고 있습니다. 브라우저 기반 응용이 데스크톱 응용을 계속 대체하고 있기에, 이런 라이브러리 활용 역시 꾸준히 증가 추세에 있습니다. jQuery 연재물에서 jQuery로 웹 응용 프로젝트를 구현하는 방법을 살펴봅시다.

도입

jQuery는 지난 몇 개월 동안에 웹 개발자를 위한 유력한 자바스크립트 라이브러리로 급속도로 세를 넓혀가고 있다. 이런 현상은 브라우저 기반 응용으로 데스크톱 응용을 교체하기 위한 RIA(Rich Internet Application) 활용과 필요성이 급격하게 늘어나는 상황과 맞물려 돌아간다. 스프레드시트부터 급여 계산에서 전자편지 응용에 이르기까지 브라우저로 데스크톱 응용을 교체해 나가는 현실이다. 이런 응용 개수가 많아지고 복잡해지면서 자바스크립트 라이브러리는 응용을 만드는 튼튼한 기초로 더욱 더 중요성이 높아질 것이다. jQuery는 개발자를 위한 필수 라이브러리가 되었다. 이 연재물에서는 jQuery를 깊숙하게 탐험하며, 개발자가 RIA를 빠르고 쉽게 만들기 위한 튼튼한 토대를 제공한다.

직전 기사에서 RIA를 만드는 세 가지 기본 구성 요소와 페이지에 상호 작용을 추가하는 방법을 배웠다. 첫 번째로 살펴본 Event 모듈은 페이지에서 사용자가 일으킨 사건을 잡아서 프로그램 상에서 반응하도록 만들었다. 이런 기능을 사용해 버튼 누르기, 마우스 이동과 같은 사용자 행동 처리용 코드를 붙인다. 다음으로 살펴본 Attributes 모듈은 페이지 엘리먼트에서 값을 얻고 엘리먼트에 값을 설정하는 방법과 변수값을 포함한 자료 객체로 취급하는 방법을 설명했다. 이런 변수값은 사용자에게 어떤 반응을 보일지 결정하는 과정에 필요한 정보 대다수를 포함한다. 마지막으로 CSS 조작 방법을 살펴보고 페이지를 다시 읽어들이지 않고서도 배치, 색상, 글꼴 등을 변경하는 방법을 익혔다. 이런 세 가지 모듈에 익숙해지면, 상호대화식 웹 페이지를 구성하는 세 가지 기초 구성 요소를 익힌 셈이다. 사용자 반응을 잡아(Event), 정보를 획득하고(Attributes), 사건과 정보를 조합한 내용을 토대로 피드백을 제공한다(CSS).

이 기사에서 동적인 웹 페이지를 구성하는 세 가지 기본 요소를 사용한다. 이런 요소는 오늘날 볼 수 있는 좀 더 첨단 웹 응용의 일부로 자리잡은 "화끈한" 효과와 기능을 제공한다. 추가 모듈이 RIA에 핵심은 아니지만, 사용자가 기억할 만한 추가 기능을 제공하며 RIA에서 사용 가능한 범위와 기능을 엄청나게 넓혀준다. 살펴볼 첫 모듈은 Effects 모듈로 엘리먼트 감추기, 엘리먼트 이동, 페이드 인/아웃과 같은 기능을 포함한다. 다시 말해 웹 페이지를 화끈하게 만드는 기능이다. 이 기사에서 설명하는 마지막 모듈은 비동기식 자바스크립트 + XML(Ajax) 모듈이다. Ajax는 RIA 하면 가장 먼저 떠오르는 단어다. Ajax는 웹 응용에 서버와 통신하는 능력을 부여해 페이지를 다시 읽어들이지 않고서도 정보를 전달하고 인출하는 기능을 제공한다(웹에 떠도는 잘못된 의견과는 달리 AJax는 단순히 멋진 자바스크립트 애니메이션 기능은 아니다). jQuery가 믿기 어려울 정도로 손쉬운 AJax 도구를 제공하며, 실제로 Ajax 사용을 자바스크립트 메서드 호출 수준으로 단순하게 만들어준다.

이 기사에서 소개하는 예제 응용은 Effects와 Ajax 모듈을 데모 웹 응용인 웹 메일로 집어넣는 방법을 보여주면서 끝을 맺는다. 몇 가지 Effects를 데모에 추가해 활력을 불어넣고, 더욱 중요하게 몇 가지 Ajax 코드를 추가해 웹 메일이 페이지를 다시 읽지 않고서도 메시지를 출력하도록 만든다.

Effects

Effects 모듈은 이름처럼 "심각한" 웹 페이지가 회피해야 하는 애니메이션과 특수 효과만 포함한다고 지레짐작하기 쉽다. 하지만 이런 기능으로 끝나지 않는다. 거의 모든 응용에서 특정 페이지 엘리먼트를 가리거나 다른 페이지 엘리먼트 상태에 맞춰 끄고 켤 필요가 있다. 이런 변화 유형이 RIA에 중요한 이유는 페이지를 한 번만 읽으면서 모든 페이지 엘리먼트를 가져온 다음에 특정 엘리먼트를 표시하고 가리는 방식으로 필요한 정보만 보여주기 때문이다. 페이지를 다시 읽는 대안은 좋은 해법이 아니다. div를 감추고 보여주는 두 가지 선택이 가능한 콤보 박스를 생각해보자. 명백히 콤보 박스가 바뀔 때마다 div를 감추고 보여주려고 페이지를 다시 읽어들이는 것보다 클라이언트 쪽 코드에서 단순히 div를 감추고 보여주는 방식이 훨씬 더 쉽고 효율적이다. 단순히 감추고 보여주느냐 페이드 인/아웃 효과를 주느냐는 설계자 마음이다.

위에서 언급한 바와 같이 가장 기초적인 효과는 show()hide() 함수다. 두 함수는 아주 직관적이며, 척 보면 알겠지만 페이지에 있는 특정 엘리먼트를 보여주고 감춘다.


Listing 1. show()와 hide() 함수
				
// 페이지에 나오는 모든 <p>를 보여준다.
$("p").show();

// 페이지에 나오는 모든 <p>를 감춘다.
$("p").hide();

// 페이지에 나오는 모든 <p:odd>를 감춘다.
$("p:odd").hide();

이런 기본적인 기능 이외에, show()hide() 함수는 보여주고 감추는 동작 방식을 좀 더 세부적으로 제어하는 기능도 제공한다. 문서에 따르면 "우아한" 보여주기/감추기 기능은 show()를 페이드 인과 슬라이딩 아웃 조합으로 해석한다.

몇 가지 예제를 살펴보기 앞서, 잠시 한 걸음 물러서서 Effects 함수에 인수를 전달하는 방법을 살펴보자. (일반적인 show()hide() 함수는 예외지만) 함수마다 효과를 완료하고 나서 부르는 함수와 얼마나 빠르거나 느리게 효과를 보여줄지 제어하는 속력을 전달할 수 있다. 속력 인수로 "slow", "fast", "normal"이라는 문자열 중 하나를 지정한다. 추가로 애니메이션 주기를 정확하게 제어할 필요가 있다면 인수로 밀리 초 단위의 숫자를 넘긴다. Effects 함수로 넘기는 두 번째 인수는 함수이며, 효과를 끝내고 나서 호출되는 함수다. 이렇게 하는 이유는 여러 효과를 좀 더 큰 효과 하나로 결합할 때 특정 효과가 끝나고 나서 다음 효과를 지시하는 안정적인 제어 방법을 제공하기 때문이다.


Listing 2. 복잡한 효과
				
// "picture"라는 ID를 지정한 img는 감춰진 상태로 시작한다.
// "showPicture" 버튼이 눌러졌을 때 "picture"라는 ID를 지정한 img를 보여주고
// 애니메이션을 한다. 따라서 잽싸게 페이드인과 슬라이드 아웃을 보여준 다음에
// 쇼가 끝나면 그림에 달린 캡션을 보여준다.
// 캡션은 항상 <img> 태그 오른쪽으로 펼쳐진다.

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// document.ready() 함수 내부에 들어갈 jQuery 코드

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
   $("#picture").show("fast", function(){
       $("#picture").next().show();
   });
});

// 실제 프로그램 코드보다 설명이 더 길어졌음에 주목하자!

Effects 모듈은 show()hide()와 아주 비슷해서 궁극적으로 똑같은 작업을 수행하는 다른 함수를 지원한다. 여기서는 아주 구체적인 동작을 수행하게 만드는 함수 군을 소개하겠다. slideDown()slideUp() 함수는 페이지 엘리먼트를 보여주고 감추는 함수다. 하지만 슬라이딩 다운/업으로 엘리먼트에 애니메이션 효과를 준다(작명에 아주 머리가 파았을 테다!). 조금 전에 설명한 개선된 hide()show() 함수처럼, 슬라이드 속력과 작업이 끝나면 호출될 함수를 제어할 수 있다. 한걸음 더 나가서 여기에는 페이지 엘리먼트를 보여주고/감추기 위한 다른 옵션도 있다. fadeIn()fadeOut() 함수는 이름이 의미하듯이 페이지 엘리먼트를 투명해질 때까지 페이드 효과를 줘서 최종적으로 사라지게 만든다. 이 옵션에도 속력과 작업이 끝나면 호출될 함수를 지정할 수 있다.

페이지 엘리먼트를 완전히 감추거나 보여주지 않는 흥미로운 함수가 하나 더 있다. fadeTo()라는 함수는 페이지 엘리먼트를 일부 투명하게 만든다. RIA에서 이런 기능이 아주 중요한 이유는 투명도는 특정 엘리먼트를 페이지에서 강조하는 훌륭한 수단이며, 페이지에서 비활성 영역을 보여주는 데 사용할 수 있기 때문이다. 예를 들어, 페이지에 여러 탭이 있는 상황에서 다른 탭이 선택하지 못한다는 사실을 강조하려고 나머지 탭에 투명도를 적용할 수 있다. 아니면 페이지 폼에서, 현재 초점이 어떤 Form 엘리먼트에 맞춰져 있는지 사용자에게 알려주고 싶을 때도 초점이 없는 모든 엘리먼트에 투명도를 가하면 구분이 가능하다. 또한 투명도 자체 효과만 해도 정말 멋지다. 뭔가를 디자인할 때 "애플이 하면 진짜 멋지다"라는 일반적인 후광 효과를 따르면 된다.


Listing 3. 멋진 효과를 추가하기 위해 fadeTo() 활용하기
				
// 페이지에 있는 모든 form 엘리먼트에 60%라는 투명도를 준다.
// 현재 초점이 있는 엘리먼트는 투명도 효과에서 제외한다.
// 애플처럼 보이지 않는가?

$(":input").fadeTo("fast", .60);
$(":input").focus(function(){
    $(this).fadeTo("fast", 1);
});
$(":input").blur(function(){
    $(this).fadeTo("fast, .60);
    });

Effects 모듈에서 소개하고픈 마지막 함수는 가장 멋지지만 가장 실수도 저지르기 쉬운 함수다. 이는 전용 애니메이션 메서드로 애니메이션에 필요한 모든 매개변수를 지정하면 나머지는 jQuery가 알아서 처리한다. 매개변수 배열에 최종값으로 넘기면 jQuery는 배열에 정의된 값을 판단해 역시 매개변수로 넘긴 속력을 적용해서 마지막 값에 이를 때까지 페이지 엘리먼트를 부드럽게 움직여준다. Listing 4는 전용 애니메이션 메서드 예를 보여준다. 말하지 않아도 알겠지만 이 함수 응용 분야는 제한이 없으므로, 독자적인 전용 애니메이션이 필요하다고 느낄 때 유용하게 써먹기 바란다.


Listing 4. 전용 애니메이션 메서드
				
// 버튼을 클릭하면, "movingDiv"라는 ID가 붙은 div에 전용 애니메이션 효과를 적용한다.
$("#myButton").click(function(){
   $("#movingDiv").animate({
      // "movingDiv"에 속한 width, opacity, fontSize를 늘리며, 5초 동안 지속한다.
      width: 700;
      opacity: 0.5;
      fontSize: "18px";
   }, 5000);
   });

Ajax

최근에 "Ajax를 사용합니까?"라는 유행어가 모든 웹 페이지에 등장하고 있지만, 모든 사람이 Ajax가 진짜로 무엇을 의미하는지 아는 건 아니다. "Ajax"를 구글에서 검색해 보면 (다른 검색 결과와 마찬가지로) 수백만 건에 이르는 결과가 나타나지만 Ajax 용어가 품고 있는 사상이 무엇인지를 혼동하고 있다는 증거처럼 보인다. Ajax는 몇몇 페이지에서 보여주는 진짜 멋진 애니메이션도 아니며 진짜 멋진 그림자가 아래에 깔린 팝업 창도 아니다. 단지 Ajax가 멋지기 때문에 웹 페이지에서 보여주는 모든 흥미로운 효과를 Ajax라고 부르지는 않는다. Ajax의 핵심은 간단하게 말해 클라이언트 쪽 웹 페이지가 페이지를 다시 읽어들일 필요 없이 서버와 정보를 주고받는 수단일 따름이다. Ajax가 페이지에서 화끈한 효과를 주지는 못하지만, 웹 응용이 데스크톱 응용을 흉내내기 위한 수단을 제공한다. 따라서 Ajax를 둘러싼 소문은 근거가 있다. Ajax를 광범위하게 사용하는 관례는 오늘날 볼 수 있는 RIA 부문의 급격한 성장을 견인하고 있다.

jQuery는 Ajax를 엄청나게 쉽게 만들어준다! 과장해 추켜세울 의도는 없다. 자바스크립트 라이브러리의 도움 없이 Ajax로 작업한다면 XMLHttpRequests를 사용해야 하는데, 마이크로소프트(Microsoft®)와 파이어폭스가 사용하는 XMLHttpRequests 사이에 벌어진 차이점을 인지하고 반환 코드를 파싱하고 그 밖에 온갖 작업을 몸소 진행해야 한다. jQuery는 Ajax를 함수 호출 한방에 끝내버린다. 농담이 아니다. 과거 100행에 이르는 코드는 현재 서너 줄이면 끝난다. 믿기 어려운 시간 절약이 아닌가? 개인적으로 jQuery를 알기 전에는 여기저기 Ajax 함수를 추가하는 데 상당한 작업이 필요한 듯이 보였다. jQuery를 사용하면 Ajax가 너무나도 단순한 작업으로 변하기에 Ajax가 제공하는 모든 기능을 십분 활용하도록 응용 프로그램을 수정해왔다. 일반 함수 호출처럼 단순하다면 사용하지 못할 이유가 무엇이랴?

독자적인 Ajax 코드를 만드는 데 가장 널리 사용하는 함수인 post()get() 메서드에 초점을 맞추자. 두 함수는 현재 이 기사를 읽고 있는 시점에서 일반적인 jQuery 함수와 상당히 비슷하게 동작한다. URL과 넘길 매개변수를 명세하고 Ajax 메서드를 종료할 때 수행하는 함수를 명세하면 된다. 두 함수를 설정하는 방식 때문에 jQuery에서 다른 함수 호출과 정확하게 일치하는 방식으로 Ajax 메서드를 호출할 수 있게 되었다. Listing 5를 살펴보자.


Listing 5. Ajax post()와 get() 메서드
				
// 이 코드는 myTest.php라는 php 파일에 들어간다.
// Ajax 예제를 설명하다가 PHP를 다룬 이유가 무엇일까?
// 자바/JSP를 설명하자면 지면이 부족하다.
// 서블릿 코드도 보여줘야 하기 때문이다. 하지만 PHP를 사용하면 이런 번거로움이 없다.
// 물론 두 함수는 PHP와 자바/JSP에서 제대로 동작한다.
<?php
     echo "This is my return String";
?>

// jQuery에서 Ajax를 호출하는 방법이 얼마나 간단한지를 보여준다.
// post 함수
$.post("myTest.php", {}, function(data){
   $("p").text(data);
});

// get 함수
$.get("myTest.php", {}, function(data){
   $("p").text(data);
   });

두 예제를 보면 알겠지만, 해당 함수는 다른 jQuery 함수와 거의 흡사하며, 자바스크립트 라이브러리 없이 Ajax 프로그램을 작성하는 경우와 비교해 훨씬 더 사용하기 쉽다. Ajax 호출 함수를 확장하기 위해 사용 가능한 몇 가지 인수가 있다. 첫 번째 인수는 두말할 필요없이 호출할 URL이 되어야 한다. PHP 파일, JSP 파일, 서블릿이 될 수 있으며, 실제로 요청을 처리할 수만 있다면 뭐든 가능하다. (나중에 예제 응용을 보면 알겠지만) 요청에 반드시 반응할 필요도 없다. 두 번째 인수는 옵션으로 post/get으로 넘길 자료를 담는다. 이 인수는 배열 형태다. 일반적으로 페이지에서 사용자 ID 등 Form 엘리먼트에 들어있는 정보를 넘길 때 사용한다. 서버 쪽 파일에서 요청을 처리하는 데 필요한 모든 내용을 담고 있다. 세 번째 인수는 역시 옵션이며 Ajax 함수가 성공적으로 끝나고 나서 호출할 함수다. 이 함수는 일반적으로 서버에서 전달하는 정보 결과를 처리하는 코드를 포함한다. Listing 6은 네 번째 인수 설명에 앞서 첫 세 인수를 활용하는 예제를 보여준다.


Listing 6. 추가 인수를 받아들이는 post 메서드
				
// username과 password 입력 필드를 페이지에 추가한다.
<input type=text id="username">
<input type=password id="pass">

// 서버 기반 PHP 파일을 호출한다. 서버쪽으로 전달한 정보를 이 파일 내부에서 처리한다.
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()});

// 거꾸로, 이 PHP 파일은 받은 결과를 처리할 함수에게 정보를 반환할 수 있다.
$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
           // data 변수는 서버에서 반환된 텍스트를 포함한다.
           // 미리 설정할 내용은 없으며, jQuery가 알아서 대신 처리해준다.
           if (data != "ERROR")
              $("#responseDiv").text(data);
       }
       );

지금까지 jQuery로 Ajax를 다루는 방법은 아주 직관적이고 쉽다는 사실을 확인했다. 하지만 단순히 텍스트 문자열이 아니라 서버에서 좀 더 복잡한 정보를 다루기 시작하면 일이 꼬이기 시작한다. 더 많은 Ajax 호출이 걸려있는 좀 더 복잡한 웹 페이지에서 반환 자료는 XML 형태도 가능하다. 반환 자료는 또한 JSON 객체 형태가 될 수도 있다(JSON은 기본적으로 자바스크립트 코드에서 사용 가능한 객체를 정의하는 프로토콜이다). jQuery는 네 번째 옵션 인수로 서버에서 기대하는 반환 값 유형을 미리 정의하는 get/post 메서드에 넘기도록 허용한다. XML 문자열을 위해 "xml"이라는 문자열을 넘기고, HTML 문자열(또는 평문)을 위해 "html"이라는 문자열을 넘기고, 자바스크립트 코드를 위해 "script"라는 문자열을 넘기고, JSON 객체를 위해 "json"이라는 문자열을 넘긴다. 따라서 예를 들어, 반환 객체를 "json" 유형으로 지정하면 jQuery는 자동으로 서버에서 오는 반응 문자열을 JSON 객체로 바꿔 즉시 참조가 가능하게 만든다.


Listing 7. Ajax에서 반환 유형 명세하기
				
// 반환 객체를 JSON 객체 유형으로 정의하고, 객체 형 변환이나 평가 과정을 거치지
// 않고서 내부 필드를 참조하도록 반환 객체를 JSON 객체로 처리한다.

$.post("myFormProcessor.php", {username: $("#username").val(), 
                               password: $("#pass").val()},
       function(data){
          // jQuery는 이미 결과 자료를 JSON 객체로 변환했기에, 
          // 즉시 내부 필드를 참조할 수 있다.
          // 좀 더 깔끔한 코드를 제공하며, 향후 변경에 대응이 가능하다.
          // XML 결과를 직접 처리하는 경우와 비교하면 작업이 훨씬 쉬워진다.
          $("#username").text(data.username);
          $("#address").text(data.address);
          $("#phone").text(data.phone);
       }, 
       "json"  // 여기서 반환 유형이 JSON이라고 명세한다.
       ); 

설명에 시간을 들일 만한 또 다른 Ajax 함수는 load()이며, 사용자가 특정 페이지를 읽어서 결과로 HTML을 얻도록 만들어준다. 설명만 보면 그다지 흥미를 못 느낄지도 모르겠다. 하지만 시작 시점에서 웹 페이지를 파싱하듯이 jQuery 코드를 사용해 반환된 정보를 파싱하는 능력이 생긴다. 이게 무슨 이야기일까? 웹 페이지를 읽은 다음에 jQuery로 파싱이 가능한 능력을 토대로 아주 효율적이고 프로그램 작성이 쉬운 웹 로봇을 직접 만들 수 있다. 특정 페이지에서 어떤 정보 유형도 수집할 수 있다. 예제를 한번 살펴보자.


Listing 8. load() 함수 예
				
// 야후 주식 시세를 호출하는 방법으로 아주 기본적인 주식 시세 시스템을 구축한 다음에
// 야후 주식 시세 페이지에서 정보를 긁어온다.
// 여기서는 IBM 주식 가격을 찾아 "stockPrice"로 ID를 설정한 텍스트 필드에서 보여준다.
// 주식 가격을 포함한 ID는 "yfs_190_ibm"이다.
$("#stockPrice").load("http://finance.yahoo.com/q?s=ibm #yfs_l90_ibm").text();

Ajax 모듈에서 소개할 마지막 두 함수는 Ajax 작업을 훌륭하게 보조해 주는 진짜 유틸리티 함수다. 이미 여러 차례 지적한 바와 같이 클라이언트와 서버 사이에서 일어나는 상호 작용 대다수는 폼과 폼이 포함하는 엘리먼트를 둘러싸고 일어난다. 이런 통신 유형이 아주 일반적이므로 jQuery에는 두 가지 유틸리티 함수가 있어서 HTTP 질의 문자열이거나 JSON 문자열 형태로 서버 쪽에 전달할 매개변수 생성을 도와준다. Ajax가 요구하는 조건에 맞춰 지원하는 유틸리티 함수를 골라 활용한다. 활용법이 아주 간단한 이유는 전체 폼을 캡슐화하므로 개발 도중에 자유롭게 엘리먼트를 추가, 삭제, 변경할 수 있기 때문이다. Listing 9는 이런 예제를 보여준다.


Listing 9. serialize()serializeArray() 함수
				
// serialize() 함수는 지정 엘리먼트에 들어있는 모든 폼 엘리먼트를 살핀 다음에
// 자동으로 엘리먼트의 모든 정보를 포함하는 <element name>=<element value>&
// 형태로 HTTP 문자열을 만든다.
// 예는 "firstname=Michael&lastname=Abernethy"와 같다.
// 이렇게 만든 문자열을 Ajax 호출로 정보를 전달할 URL 뒤에 덧붙인다.
$.post("myFormProcessor.php?" + $("#myForm").serialize());

// 또한 serializeArray() 함수로 비슷한 작업을 수행할 수도 있다.
// 폼을 JSON 형태로 변환한다.
$.post("myFormProcessor.php", {json: $("#myForm").serializeArray()});

여기서 배운 모든 내용을 하나로 합치기

모든 내용을 하나로 합쳐서 만든 데모 웹 응용인 웹 메일을 마지막으로 살펴보자. 이미 지난 연재물에서 충분히 익숙하게 살펴보았을 것이다. 정보 획득을 위해 클라이언트 쪽에서 서버 쪽으로 여러 Ajax 호출을 수행한다. 여기서는 메시지를 읽고 메시지를 지울 때 AJax를 활용한다. 그러고 나서 Effects를 활용해 사용자가 메시지를 지울 때 즉시 화면에서 메시지를 사라지게 만든다. 심지어 사용자가 페이지를 다시 읽지 않으며 Ajax 호출을 활용해 비동기식으로 실제 삭제가 일어나지만 이런 삭제 동작이 즉시 일어난다. 직접 만든 웹 응용에서 Ajax 호출이 얼마나 쉬운지를 살펴보고 데스크톱 응용을 진짜로 흉내내기 위해 Ajax를 활용하는 방법을 살펴보고, Effects를 활용해 응용 프로그램 사용성을 높이는 방법을 예제를 보면서 최종적으로 확인한다.


Listing 10. 예제 웹 응용: 메시지 삭제하기
				
// 먼저 메시지 삭제를 처리하는 방법을 살펴보자.

// 첫 단계는 실제로 메시지를 지울 버튼 생성이다.
<input type=button id="delete" value="Delete">

// 다음으로 테이블 각 행에 체크박스를 추가해 사용자가 삭제를 원하는 메시지를
// 선택하도록 만든다. 이런 체크박스를 나중에 활용할 텐데, 여기에 들어있는 정보는
// 아주 중요하다(예시라고 부른다).
// 각 체크박스 값이 message.id라는 사실에 주목하자.

<tr class="messageRow" id="<%=message.id %>">
<input type=checkbox name="delId" value="<%=message.id%>" class=selectable>

// 이제 HTML이 완료되었으므로 삭제를 수행하는 jQuery 코드를 살펴보자.

// 먼저, 삭제 버튼에 이벤트를 추가한다. 버튼을 누르면 체크된 메시지를 지우기 시작한다.

$("#delete").click(function() {
   deleteMessages();
});

// 마지막으로 deleteMessage() 함수를 정의하자. 오늘 배운 내용에서 가장
// 중요한 내용을 담고 있다.
// 모든 기사에서 다룬 내용을 완성하는 함수이므로, 동작 원리를 자세히 설명하겠다.
// 참고 1 - 아주 구체적인 검색 매개변수를 넘겨 체크된 체크박스를 하나씩
// 순회하며 "selectable" 클래스 멤버만 찾도록 만든다.
// 참고 2 - 체크박스 값이 포함된 테이블 행 ID와 동일하므로, Effects 모듈을 사용해
// 전체 테이블 행을 감출 수 있다. 체크박스 값을 전달하고 표 행을 다시 얻은 다음에 감춘다.
// 참고 3 - Ajax를 호출해 실제로 DB에서 메시지를 삭제한다. messageID를 서버에 전달해
// 삭제될 항목을 알도록 만든다. 체크박스 값에 포함된 정보를 Ajax 호출 과정에서 전달한다.
// 성공인지 아닌지 신경쓰지 않기 때문에 서버에서 돌아오는 대답을 무시한다.

function deleteMessages()
{
    $(".selectable:checked").each(function() {
        $("#"+$(this).val()).remove();
        $.post("<%=HtmlServlet.DELETE_MESSAGES%>.do", {delId: $(this).val()});
    });
    }

두 번째 예제로, 메시지를 읽는 방법을 살펴보자. jQuery에서 Ajax를 활용하는 예를 보여준다.


Listing 11. 예제 웹 응용: 메시지 읽기
				

// 지금까지 예제에서 코드 대부분을 살펴보았으므로, 코드에서 Ajax 부분만 초점을 맞춘다.
// 참고 1 - Ajax 호출을 하면서 인수 네 개를 정의해 넘긴다.
// 메시지를 읽으려면 서버에 두 변수를 넘겨야 한다.
// 첫 번째는 메시지 ID로 읽기를 원하는 메시지가 무엇인지 알아야 하기 때문이다.
// 두 번째는 현재 뷰로 .. 어떤 목적으로 사용했는지 기억나지 않는다.
// (그다지 중요하지 않는 듯이 보인다)
// 참고 2 - Ajax 함수로 넘기는 네 번째 인수는 "json"이다.
// Ajax 호출로 JSON 객체를 반환하라는 표식이다. jQuery는 결과로 반환되는
// 문자열을 JSON 객체로 자동으로 변환한다.
// 참고 3 - eval() 함수를 사용하지 않고 JSON 객체를 직접 다루고 있다는 점에 주목하자.
// jQuery가 객체를 만들었기 때문이다. 따라서 필드를 직접 참조할 수 있다.
$(".messageRow").dblclick(function() {
    if ($(this).hasClass("mail_unread"))
    {
        $(this).removeClass("mail_unread");
    }
    $.post("<%=HtmlServlet.READ_MESSAGE%>.do", {messageId: $(this).attr("id"),
                                                     view: "<%=view %>"}, 
      function(data){
        if (data != "ERROR")
        {
             // JSON 객체를 활용한다.
             $("#subject").val(data.subject);
             $("#message").val(data.message);
             $("#from").val(data.from);
         }
      }, "json");
    $.blockUI(readMess, {width:'540px', height:'300px'});
    });

결론

jQuery와 같은 자바스크립트 라이브러리는 데스크톱에서 브라우저로 응용 프로그램을 이식함에 따라 점점 더 중요해진다. 이런 응용은 점점 더 복잡해지므로, 웹 응용 프로젝트에서 jQuery와 같은 튼튼한 교차 브라우저 해법을 필수로 요구한다. jQuery는 다른 자바스크립트 라이브러리와 격차를 벌이기 시작했으며, 필요한 모든 작업을 수행하는 능력과 함께 손쉬운 개발 특성 때문에 많은 개발자가 jQuery를 핵심 라이브러리로 선택하고 있다.

연재물 세 번째 기사에서, 응용에 풍부함을 더해 데스크톱 응용과 웹 응용 사이에 경계를 허무는 두 가지 모듈을 익혔다. 이번 기사에서 가장 강력하게 추가한 내용은 Ajax 모듈로, 다른 jQuery 메서드 호출처럼 간단하고 직관적인 인터페이스를 제공함으로써 Ajax를 아주 쉽게 활용하도록 만든다. 페이지를 다시 읽느라 지연되는 짜증을 겪지 않고서 응용 프로그램 반응 속력을 높이는 훌륭한 도구로 몇 가지 예제를 곁들여 Ajax의 위력도 살펴보았다. Effects 패키지에 대한 내용도 빠지지 않았다. 애니메이션과 페이지 엘리먼트 감추기/보여주기 기능을 적절하게 사용한다면 좋은 UI 디자인이라는 강력한 지원군을 얻게 된다. Ajax와 Effect를 결합해 효율적으로 활용하면 웹 사이트에 동적인 능력을 상당히 강화할 수 있다.

마지막으로 웹 응용 예제를 다시 한번 살펴보았고, AJax 모듈을 추가해 페이지를 다시 읽어들이지 않고도 메시지를 읽고 삭제하는 방법을 익혔다. 그러고 나서 Ajax와 Effect 조합으로 페이지를 다시 읽어들이지 않고도 사용자 페이지와 DB 웹 응용에서 메시지를 삭제하는 방법을 익혔다. 사용자에게 메시지 삭제는 투명한 과정이며, 미리 정해진 방식에 맞춰 프로그램 상에서 동작한다.

이 기사는 모든 jQuery 배포판에 따라오는 핵심 라이브러리에 대한 소개 내용으로 마무리를 한다. 연재물에서 jQuery에 포함된 모든 모듈을 살펴보았으며, jQuery로 작업하는 과정이 쉽고 직관적이라는 사실을 보여줬다. 또한 어떤 웹 응용을 만들거나 jQuery는 RIA 유형에 무관하게 제 자리를 잡고 있다는 사실을 확인했다. 자바스크립트가 요구하는 수준에 맞춰 튼튼한 토대를 제공하기 때문이다. 연재물은 직접 코드를 작성하는 과정에서 jQuery를 아주 자연스럽게 활용하는 수준에 이르도록 독자들을 이끌었다. 첫 번째 기사는 jQuery 동작 방식, 페이지 엘리먼트 탐색을 위한 활용 방법, 엘리먼트를 순회하는 방법, Array 객체와 같은 방식으로 접근하는 방법을 설명했고, 두 번째 기사는 풍부함을 제공하는 토대로 세 가지 모듈을 소개했다. 마지막으로 세 번째 기사는 완벽하고 복잡한 웹 응용을 만들기 위한 프레임워크를 위한 마지막 퍼즐 조각을 보여줬다.





위로


다운로드 하십시오

설명 이름 크기 다운로드 방식
예제 애플리케이션을 담은 Zip 파일 jquery.zip 69KB HTTP
다운로드 방식에 대한 정보


참고자료



필자소개

Mike Abernethy

10년에 걸친 기술 경험을 통해 Michael Abernethy는 광범위한 기술을 토대로 광범위한 클라이언트와 작업해 왔다. 현재 경매 소프트웨어 회사인 Optimal Auctions에서 제품 개발 관리자로 일한다. Abernethy는 요즘 RIA

Posted by 철냄비짱
,

JAVASCRIPT (Menu)

(예제) (다운로드) 왼쪽의 사각 모양에 화살표
(예제) (다운로드) 심은하 팬 페이지 메뉴
(예제) (다운로드) 서브메뉴가 메뉴 위로
(예제) (다운로드) 밑으로 서브메뉴 아이콘까지
(예제) (다운로드) 서브메뉴가 아래로 쫙
(예제) (다운로드) 옆으로 서브메뉴가 나옴
(예제) (다운로드) 메뉴버튼 옆에 화살표가
(예제) (다운로드) 메뉴로 써 보시면 좋습니다
(예제) (다운로드) cafe i의 메뉴
(예제) (다운로드) 커피컵 홈페이지 메뉴
(예제) (다운로드) 획기적인 효과입니다
(예제) (다운로드) 이미지 클릭시 링크
(예제) (다운로드) 가운데에 서브메뉴 및 자동차
(예제) (다운로드) 메뉴 형식으로 좋음
(예제) (다운로드) 타이틀 화면에 좋음
(예제) (다운로드) 위에서 서브메뉴까지
(예제) (다운로드) 메뉴판이 마우스를
(예제) (다운로드) 메뉴 밑에 내용 설명
(예제) (다운로드) 메뉴를 마우스로 끌어서
(예제) (다운로드) 드롭다운 메뉴밑에 내용이
(예제) (다운로드) 슬라이딩 메뉴
(예제) (다운로드) 체크 박스를 이용한 메뉴
(예제) (다운로드) 풍선글 메뉴
(예제) (다운로드) 마우스 가면 서브메뉴가
(예제) (다운로드) 반투명 메뉴
(예제) (다운로드) 메뉴로 쓰면 대단합니다.
(예제) (다운로드) 이런 메뉴를 과연
(예제) (다운로드) MS홈이나 요즘 많이 쓰임.
(예제) (다운로드) 예쁜 탐색기 메뉴.
(예제) (다운로드) 다이나믹 뉴스메뉴.
(예제) (다운로드) 하이홈 자료실 메뉴.
(예제) (다운로드) 다이나믹 쿨 프레임 메뉴.
(예제) (다운로드) 메뉴로 쓰면 이보다 더?.
(예제) (다운로드) 마우스 가면 서브메뉴 쫙...
(예제) (다운로드) 마우스가 가면 펼쳐짐.
(예제) (다운로드) 상단에 나타나는 펼침 메뉴
(예제) (다운로드) 아무곳이나 클릭하면 메뉴가
(예제) (다운로드) TD, bgcolor계속 바뀜

(예제) (다운로드) 위에서 서브메뉴까지
(예제) (다운로드) 윈도우 메뉴처럼 밑으로
(예제) (다운로드) 최근에 폭발적으로 사용함
(예제) (다운로드) 설명이 나오는 메뉴
(예제) (다운로드) 서브메뉴가 밑으로
(예제) (다운로드) 메뉴 형식(익스플로우)
(예제) (다운로드) 메뉴 관련(DHTML)지원
(예제) (다운로드) 마우스를 대면 서브메뉴
(예제) (다운로드) DHTML Vertical Menus
(예제) (다운로드) 병무청 홈페이지 메뉴
(예제) (다운로드) 왼쪽 마우스 클릭 해봐
(예제) (다운로드) 왼쪽 마우스를 클릭하면
(예제) (다운로드) 스크립트로 이런 것을
(예제) (다운로드) 마우스 갖다대면 풍선글이
(예제) (다운로드) 마우스 갖다대면 나오는 메뉴
(예제) (다운로드) 마우스 왼쪽을 누르면 메뉴
(예제) (다운로드) 하나씩 내려오는 메뉴
(예제) (다운로드) 창이 있는 메뉴판
(예제) (다운로드) 바뀌는 메뉴판
(예제) (다운로드) 슬라이딩 메뉴
(예제) (다운로드) 클릭하면 그림과 메뉴가 쫙
(예제) (다운로드) 깔끔한 메뉴
(예제) (다운로드) Double Combobox
(예제) (다운로드) 한번 보시겠어요.
(예제) (다운로드) 서브메뉴 다이나믹 메뉴.
(예제) (다운로드) ADCON 다이나믹 메뉴.
(예제) (다운로드) site Navigation Menu
(예제) (다운로드) 하이텔 메뉴 분석.
(예제) (다운로드) Cool Button Menu.
(예제) (다운로드) 색이 있는 셀렉트 컬러
(예제) (다운로드) 서브메뉴 지원(네츠도 됨).
(예제) (다운로드) 새로운 형식의 메뉴
(예제) (다운로드) 스크롤바에 상관없는 메뉴
(예제) (다운로드) 정지된 메뉴판(가로).
(예제) (다운로드) 고정 메뉴판 서브메뉴도
(예제) (다운로드) 고정 메뉴판 서브메뉴도
(예제) (다운로드) 선택하면 이동 풀다운 메뉴
(예제) (다운로드) 오른쪽 마우스 클릭시 나옴

JAVASCRIPT (Text)

(예제) (다운로드) 텍스트가 좌우로 스크롤
(예제) (다운로드) 텍스트가 우에서 좌로
(예제) (다운로드) 흐르듯 흘러가는 배너
(예제) (다운로드) 이미지에 가면 설명이
(예제) (다운로드) 다이나믹 HTML을 이용
(예제) (다운로드) 다이나믹 HTML 로고
(예제) (다운로드) 폼안에 글자가 타이프치듯
(예제) (다운로드) 애플릿 효과와 비슷
(예제) (다운로드) 링크 시키면 색이 변함
(예제) (다운로드) 마우스를 가져다 대 보세요.
(예제) (다운로드) 누르면 텍스트가 날아옴
(예제) (다운로드) 접속시마다 말이 바뀜
(예제) (다운로드) red sign 스크립트
(예제) (다운로드) 글이 다가오는 듯한 느낌
(예제) (다운로드) 누르면 텍스트가 사라지는
(예제) (다운로드) 텍스트가 마구 깜박임
(예제) (다운로드) 텍스트가 살며시 변함
(예제) (다운로드) 뱅뱅도는 글자
(예제) (다운로드) 굼벵이 같이 흐르는 글
(예제) (다운로드) 링크에 따라 다른색의 글.
(예제) (다운로드) 텍스트를 이용한 배너
(예제) (다운로드) 버튼에서 텍스트가 깜박
(예제) (다운로드) 인트로 화면으로 좋음
(예제) (다운로드) 점선 효과입니다.
(예제) (다운로드) 텍스트가 춤을 춥니다
(예제) (다운로드) Marquee 태그 이용 예제
(예제) (다운로드) 색이 변하는 글자
(예제) (다운로드) 페이드 되는 글자
(예제) (다운로드) 배너처럼 글자가 커짐
(예제) (다운로드) 파도처럼 움직이는 글
(예제) (다운로드) 글자 색 변환 소스
(예제) (다운로드) 왼쪽에서 날아오는 글
(예제) (다운로드) 3D 텍스트 효과
(예제) (다운로드) 물결치는 텍스트
(예제) (다운로드) 뱅뱅돌면서 날은는 글
(예제) (다운로드) 그림자가 있는 텍스트
(예제) (다운로드) 한 문장씩 페이드
(예제) (다운로드) 제자리에서 회전
(예제) (다운로드) 롤러 코스터 텍스트
(예제) (다운로드) 마퀴 제어
(예제) (다운로드) 클릭으로 폰트를 바꾼다
(예제) (다운로드) 텍스트 멀티

(예제) (다운로드) 아래로 떨어지는 글
(예제) (다운로드) 여기저기서 날아오는 글
(예제) (다운로드) 아래로 텍스트 스크롤
(예제) (다운로드) 커졌다 작아졌다 테이블
(예제) (다운로드) 안내창 텍스트가 위로
(예제) (다운로드) 링크 메시지가 이곳 저곳으로
(예제) (다운로드) 텍스트가 한문장씩 위로
(예제) (다운로드) 글자 변환 예제
(예제) (다운로드) 속보를 넣을때 사용
(예제) (다운로드) 글의 blendtrans효과
(예제) (다운로드) 한문장씩 나타났다 사라짐
(예제) (다운로드) 인트로 화면으로 좋음
(예제) (다운로드) 두줄의 텍스트가 좌,우로
(예제) (다운로드) 타이핑 치는 듯한 효과
(예제) (다운로드) 다이나믹 HTML(ZOOM)
(예제) (다운로드) 글자가 가운데서 커지면서
(예제) (다운로드) 텍스트가 한글자씩 색 변함
(예제) (다운로드) 글이 한꺼번에 위로 스크롤
(예제) (다운로드) 텍스트 애니메이션
(예제) (다운로드) 스타일시트를 이용한 폰트
(예제) (다운로드) 하이퍼 링크가 반짝.
(예제) (다운로드) 링크 된 곳이 깜빡.
(예제) (다운로드) 텍스트가 춤을..
(예제) (다운로드) 텍스트가 커졌다 작아짐
(예제) (다운로드) 글이 위, 아래로 펼쳐짐
(예제) (다운로드) css filter examples
(예제) (다운로드) 텍스트를 계단처럼 배열
(예제) (다운로드) 시간에 따라서 다른 글
(예제) (다운로드) 네온사인 효과의 글
(예제) (다운로드) 스크롤 & 페이드
(예제) (다운로드) 그림자가 움직이는 글
(예제) (다운로드) Pulsating Text
(예제) (다운로드) Glowing Text
(예제) (다운로드) Shock Wave Text
(예제) (다운로드) 파도타기 하는 글
(예제) (다운로드) 항시 위에 있는 글
(예제) (다운로드) 대각선으로 나오는 글
(예제) (다운로드) 왼쪽에서 세로로 글
(예제) (다운로드) 두가지 색으로 링크
(예제) (다운로드) 다양한 마퀴효과
(예제) (다운로드) 필터적용된텍스트,이미지
(예제) (다운로드) 

JAVASCRIPT (Mouse)

(예제) (다운로드) 마우스를 글이 바뀌면서
(예제) (다운로드) 마우스를 눈이 따라다님
(예제) (다운로드) 클릭시 꽃이 뿌려짐
(예제) (다운로드) 마우스를 그림이 따라와요
(예제) (다운로드) 링크된 곳에 가면 골뱅이가
(예제) (다운로드) 링크된 곳에 가면 원이
(예제) (다운로드) 화살표가 잔상을 남기며
(예제) (다운로드) 원을 그리는 공이 마우스를
(예제) (다운로드) 따라다니는 오색모양 점들
(예제) (다운로드) 스치기만 해도 링크
(예제) (다운로드) 따라다니기 색다르죠
(예제) (다운로드) 따라다니는 괘선
(예제) (다운로드) 따라다니는 글 나랑같이
(예제) (다운로드) 오른쪽 키 사용시 오류창이
(예제) (다운로드) 마우스가 가면 메모가
(예제) (다운로드) 스크롤바 색깔바꾸기
(예제) (다운로드) 투명한 Iframe.
(예제) (다운로드) 바퀴에 가면 멈추는 콘트롤
(예제) (다운로드) 타이틀 바가 물흐르듯..
(예제) (다운로드) 브라우저 타이틀 애니메이션
(예제) (다운로드) 마우스 올리고 내릴때 변환
(예제) (다운로드) X축과 Y축의 스크롤바
(예제) (다운로드) 마우스 가면 설명 글..
(예제) (다운로드) 상태바에 변경된 주소를..
(예제) (다운로드) 마우스 커서의 설명
(예제) (다운로드) 타이틀에 날짜와 시간
(예제) (다운로드) 상태바에 두개 동시 메세지
(예제) (다운로드) 타이틀 두개 메시지 랜덤
(예제) (다운로드) 타이틀에 스크롤 되는 글
(예제) (다운로드) 마우스 올리면 상태바 마퀴
(예제) (다운로드) 타이틀에 나타나는 시간
(예제) (다운로드) 타이틀에 나오는 메시지
(예제) (다운로드) 프리젠테이션 상태바
(예제) (다운로드) 타이틀에 머무는 시간
(예제) (다운로드) 타이틀에 랜덤 메시지
(예제) (다운로드) 상태바가 반짝거림
(예제) (다운로드) 상태바 앞쪽으로 이동 글
(예제) (다운로드) 상태 한자씩 날아와 붙음
(예제) (다운로드) 상태 양쪽에서 중앙으로
(예제) (다운로드) 타이틀이 줄었다 늘었다

(예제) (다운로드) 마우스 가면 색 변함
(예제) (다운로드) 별 원이 커졌다 작아졌다
(예제) (다운로드) 상태바 스크립트
(예제) (다운로드) 상태바에 글씨 나타남
(예제) (다운로드) 상태바 관련 스크립트
(예제) (다운로드) 상태바에 시간이
(예제) (다운로드) 상태바 계속 깜박임
(예제) (다운로드) 시간 따라 다른 메세지
(예제) (다운로드) 특수문자가 변환
(예제) (다운로드) 상태바 글자 깜박이기
(예제) (다운로드) 상태바의 글자 양옆에서
(예제) (다운로드) 위쪽 상태바에 글자가
(예제) (다운로드) 상태바에 머무는 시간
(예제) (다운로드) 글 쓰면 상태바에 그대로
(예제) (다운로드) 마우스 가면 무슨 일이.
(예제) (다운로드) 홈주소가 애니메이션
(예제) (다운로드) 오른쪽 마우스 금지와..
(예제) (다운로드) 마우스 가면 애니
(예제) (다운로드) 상태바의 효과.
(예제) (다운로드) 별 따르다 클릭시 꽃이
(예제) (다운로드) 클릭하면 이미지가 바뀜.
(예제) (다운로드) 마우스 가면 이미지 쏙
(예제) (다운로드) 마우스 가면 흑백에서 컬러
(예제) (다운로드) 마우스 금지 상태바 시계
(예제) (다운로드) 스크롤바 up,down 버튼
(예제) (다운로드) 상태 카운트 사이트 이동
(예제) (다운로드) 한 글자씩 모여서 문장
(예제) (다운로드) 마우스 가면 상태 난수표.
(예제) (다운로드) 타이틀에 현재 시간이
(예제) (다운로드) 상태바 년월일요일시간
(예제) (다운로드) 상태바 X,Y 좌표값
(예제) (다운로드) 상태바 간단한 메시지
(예제) (다운로드) 상태바 링크주소 감추기
(예제) (다운로드) 페이지 스크롤 하기
(예제) (다운로드) 버튼으로 스크롤바 on,off
(예제) (다운로드) 두가지 색 변환 스크롤바
(예제) (다운로드) 번쩍이는 스크롤 바
(예제) (다운로드) 롤오버 스크롤바
(예제) (다운로드) 휠마우스처럼 사용됨
(예제) (다운로드) 마우스로테이블페이드효과

JAVASCRIPT (Window)

(예제) (다운로드) 클릭시 사라지는 공지창
(예제) (다운로드) 창이 자동으로 닫힘
(예제) (다운로드) 자동으로 뜨는 창
(예제) (다운로드) 공지사항 2000
(예제) (다운로드) 창이 뜨면서 닫기 버튼
(예제) (다운로드) 새 창에서 뉴스 타이핑
(예제) (다운로드) 마우스 가면 작은 창
(예제) (다운로드) 공지사항 안내창
(예제) (다운로드) 공지사항, 클릭시 사라짐
(예제) (다운로드) 클릭하면 안내창이 뜸
(예제) (다운로드) 안내창이 줄었다 늘었다
(예제) (다운로드) 창이 나와 가운데 머물다
(예제) (다운로드) 안내문을 보여주는
(예제) (다운로드) 공지로 배경색 글자 변환
(예제) (다운로드) 다이나믹 HTML스크립트
(예제) (다운로드) 버튼 없이 체크로 안열림
(예제) (다운로드) 버튼을 클릭하면 새로운 창이
(예제) (다운로드) 창 여러개 띄우기
(예제) (다운로드) 메뉴가 전부 뜨고 창이
(예제) (다운로드) 매일 다른 명언이 나타남
(예제) (다운로드) 박스창 띄우기..
(예제) (다운로드) 유용한 Alert Box.
(예제) (다운로드) 화면에 테두리 두르기
(예제) (다운로드) 채널 모드로 화면 띄움
(예제) (다운로드) 창틀 없는 윈도우
(예제) (다운로드) 사이즈 조절 가능 창.
(예제) (다운로드) 창틀없는 윈도우 소스
(예제) (다운로드) 스크립트 쿨 브라우저..
(예제) (다운로드) 로딩시 해상도 상관없이 꽉
(예제) (다운로드) 마우스가 가면 창이 보임
(예제) (다운로드) 이미지에 맞춰 창 조절
(예제) (다운로드) 위로 스크롤되는 윈도우
(예제) (다운로드) 윈도우를 채널모드로
(예제) (다운로드) 윈도우를 원하는 크기로
(예제) (다운로드) 창을 닫으면 팝업창이
(예제) (다운로드) 윈도우 화면 제어하기
(예제) (다운로드) 방향키로 브라우저 크기
(예제) (다운로드) 클릭시마다 윈도우 변환
(예제) (다운로드) 관계없이 화면에 맞게
(예제) (다운로드) 메세지 남기면 접속시 봄
(예제) (다운로드) 지정된 크기에 맞춰 팝업창
(예제) (다운로드) 일정 시간 지나면 창 닫음
(예제) (다운로드) 새창서링크부모창링크창꽥
(예제) (다운로드) 웹 페이지 대화 상자
(예제) (다운로드) 새창을전체창으로열면서크기
(예제) (다운로드) 새창 연 윈도우 닫기버튼
(예제) (다운로드) 팝업열기전 테두리선보이게
(예제) (다운로드) 팝업 리모콘 소스
(예제) (다운로드) 해상도 1024*768고정 보임
(예제) (다운로드) 항상 위에 있는 팝업
(예제) (다운로드) 팝업이 자동으로 ON,OFF
(예제) (다운로드) 화살표로 브라우저 움직임
(예제) (다운로드) 새창열고 항상 제일 위에
(예제) (다운로드) 새창의 크기와 위치 조정
(예제) (다운로드) 마우스에 따라 새창ON,OFF
(예제) (다운로드) 로딩시 자동 전체 새창
(예제) (다운로드) 체크박스 클릭시 팝업창이
(예제) (다운로드) 새창을 열때 중앙에
(예제) (다운로드) 항시 페이지 하단에
(예제) (다운로드) 깔끔한 뉴스 알림창
(예제) (다운로드) 지정된시간마다 광고바뀜
(예제) (다운로드) 각항목 돌다일정시간멈춤
(예제) (다운로드) 브라우저최대화최소화
(예제) (다운로드) 브라우저프레임조정
(예제) (다운로드) 현제 페이지 저장하기

(예제) (다운로드) 열림이 위,아래서 가운데
(예제) (다운로드) 새창 띄우며 메뉴창 없앰
(예제) (다운로드) 화면보호기 스크립트
(예제) (다운로드) 브라우저가 열릴때 가운데
(예제) (다운로드) 브라우저 열림이 좌우로
(예제) (다운로드) 새 창이 커지면서 뜸
(예제) (다운로드) 점점 커지는 창 띄우기
(예제) (다운로드) 날마다 바뀌는 속담
(예제) (다운로드) 접속시 광고창이 뜨게함
(예제) (다운로드) 뉴스 스크립트
(예제) (다운로드) 드롭다운 메시지
(예제) (다운로드) 당신의 브라우저 정보는
(예제) (다운로드) 브라우저 정보를 알려줌
(예제) (다운로드) 스크린 정보를 알려주는
(예제) (다운로드) 브라우저와 전 페이지 정보
(예제) (다운로드) 클릭시 공지창 안열림
(예제) (다운로드) 브라우저 전 페이지 알림(2)
(예제) (다운로드) 윈도우 샘플 네가지
(예제) (다운로드) 테두리 깜박거리기.
(예제) (다운로드) 깜박거리는 테이블
(예제) (다운로드) 스므쓰하게 페이지(접속시)
(예제) (다운로드) 스므쓰하게 페이지(나갈때)
(예제) (다운로드) 갑자기 아래로 내려가요.
(예제) (다운로드) 홈피 이전 되었다면 이걸
(예제) (다운로드) 사이트 이동시 자동닫힘.
(예제) (다운로드) 공지창이 사라지는 모습
(예제) (다운로드) 항시 중앙 다른창 위에
(예제) (다운로드) 틀 없이 새창(chromeless)
(예제) (다운로드) 주어진 크기로 창이 열림
(예제) (다운로드) 스크롤바만 보이고 점멸
(예제) (다운로드) 모든바 점멸
(예제) (다운로드) 주어진 크기로 클릭시
(예제) (다운로드) tabstript
(예제) (다운로드) tooltip
(예제) (다운로드) i-frame
(예제) (다운로드) chromeless
(예제) (다운로드) 배너 바뀌고 클릭시 새페이지
(예제) (다운로드) 카운트 후 현재창 새페이지
(예제) (다운로드) 정한 시간 후 새창 새페이지
(예제) (다운로드) 크기조절시 화면 중앙에
(예제) (다운로드) 나올 이미지 맞춰서 새창
(예제) (다운로드) 새창을 항시 중앙, 젤 위
(예제) (다운로드) 버튼 클릭시 새로고침
(예제) (다운로드) 좌표값을 줘서 창 움직임
(예제) (다운로드) 정해진 시간 후 새로고침
(예제) (다운로드) 일정 시간 후 창이 닫힘
(예제) (다운로드) 익스 아니면 다른 페이지로
(예제) (다운로드) 익스나 넷스에 따라 다른 홈
(예제) (다운로드) 브라우저에 따라 다른 페이지
(예제) (다운로드) 일정 시간 후 지정된 페이지
(예제) (다운로드) 메인서 카운트 현재창 새창
(예제) (다운로드) 자동으로 팝업이 열리고 닫힘
(예제) (다운로드) 페이지 직접 들어가면 다른
(예제) (다운로드) 지정된 시간 후 닫기
(예제) (다운로드) 뉴스 공지창으로 좋음
(예제) (다운로드) 페이지 내에서 위치이동
(예제) (다운로드) 체인징되는 뉴스공지
(예제) (다운로드) 카운트끝나면 팝업닫힘
(예제) (다운로드) 서서히 사라지는 공지창
(예제) (다운로드) 움직이는 공지창
(예제) (다운로드) 클릭시 사라지는 공지창
(예제) (다운로드) 날짜별나타나는시간,글
(예제) (다운로드) 웹페이지캐릭터보이기
(예제) (다운로드) 팝업 하루에 한번 고정
(예제) (다운로드) 주소창안에 이미지 넣기

JAVASCRIPT (Image)

(예제) (다운로드) 텍스트 위로 구름이
(예제) (다운로드) 희미하게 나타나는 이미지
(예제) (다운로드) 사진 자료 이용 때 좋음
(예제) (다운로드) 이미지가 아래서 위로
(예제) (다운로드) 사진을 이용할 때
(예제) (다운로드) 이미지 왼쪽에서 우로
(예제) (다운로드) 이미지 우에서 좌로
(예제) (다운로드) 마우스 가면 이미지 나타남
(예제) (다운로드) 클릭해야 이미지가
(예제) (다운로드) 가면 이미지가 위,아래로
(예제) (다운로드) 그림을 복제할 수 있다
(예제) (다운로드) 축구공이 위 아래로 마구
(예제) (다운로드) 축구공이 아리로 뚝..
(예제) (다운로드) 하트모양 나타났다 사라짐
(예제) (다운로드) 블라인드 효과.
(예제) (다운로드) 마우스 가면 이미지 테두리
(예제) (다운로드) 이미지창이 클릭시 위에서
(예제) (다운로드) 물방울 이미지가 위로
(예제) (다운로드) 방문시 다른 이미지가
(예제) (다운로드) 누르면 들어가는 느낌
(예제) (다운로드) 잔상을 보이며 이동
(예제) (다운로드) 자동 페이딩
(예제) (다운로드) 부드러운 이미지 전환
(예제) (다운로드) 버튼으로 이미지 전환
(예제) (다운로드) 이미지 슬라이드 보기
(예제) (다운로드) 이미지 마우스가면 설명
(예제) (다운로드) 클릭시 이미지 크기 변환
(예제) (다운로드) 선택시 이미지 체인지
(예제) (다운로드) 드래그 하면 이미지 커짐
(예제) (다운로드) 더블클릭시 이미지 커짐
(예제) (다운로드) 링크에가면레이어그림변환
(예제) (다운로드) 이미지가 조금씩 커짐
(예제) (다운로드) 텍스트와 이미지 흔들기

(예제) (다운로드) 고소영과 김희선 초등때
(예제) (다운로드) 열두개의 그림이 빠르게
(예제) (다운로드) 꽃이 뿌려지는
(예제) (다운로드) 야한 사진
(예제) (다운로드) 하늘에서 꽃눈이
(예제) (다운로드) 사진이 부드럽게 전환
(예제) (다운로드) 사진밑에 비추는 그림자
(예제) (다운로드) 이미지 두개 스무스하게
(예제) (다운로드) 풍선이 날아 다녀요
(예제) (다운로드) 공지사항 모서리를 한바퀴
(예제) (다운로드) Corss Browser
(예제) (다운로드) 마우스 따라 다니는 이미지
(예제) (다운로드) 이미지가 날아다녀요.
(예제) (다운로드) 이미지 좌.우로 우.좌로
(예제) (다운로드) 이미지가 아래로 스크롤
(예제) (다운로드) 이미지 원하는 위치에 고정
(예제) (다운로드) 마우스 가면 다른 이미지로
(예제) (다운로드) 이미지 클릭시 큰 이미지로
(예제) (다운로드) 이미지 버튼 모음
(예제) (다운로드) 이미지가 없으면 경고 창
(예제) (다운로드) 더블클릭시 프린트 이미지
(예제) (다운로드) 이미지가 회전하는 효과
(예제) (다운로드) 지도 설명용 Map Zoomer
(예제) (다운로드) 이미지 필터를 이용한..
(예제) (다운로드) 이미지가 전체 모니터 여행
(예제) (다운로드) 이미지를 버튼으로 앞뒤로
(예제) (다운로드) 이미지보이기에러시다음그림
(예제) (다운로드) 여러개의 레이어 만드는
(예제) (다운로드) 레이어가 좌,우로 이동
(예제) (다운로드) Iframe를 사용 이동
(예제) (다운로드) 이미지 페이딩
(예제) (다운로드) 이미지슬라이딩스크롤
(예제) (다운로드) 이미지 바뀌면 음악도

JAVASCRIPT (Time)

(예제) (다운로드) 카운트다운후 접속
(예제) (다운로드) 카운트다운 후 지정사이트
(예제) (다운로드) 로딩후 접속
(예제) (다운로드) 페이지 로딩
(예제) (다운로드) 이미지많아로딩지연시메세지
(예제) (다운로드) 로딩 후 접속
(예제) (다운로드) 페이지 로딩되기 전 메세지
(예제) (다운로드) Microbians.com 로딩바 우선
(예제) (다운로드) 로딩이 아주 멋지게....
(예제) (다운로드) 홈피 나이와 시간 알림
(예제) (다운로드) 달력과 시간이 표시됨
(예제) (다운로드) 달력 관련 스크립트(1)
(예제) (다운로드) 공학용 계산기(사운드)
(예제) (다운로드) 달력 관련 스크립트(2)
(예제) (다운로드) 키티 시계
(예제) (다운로드) 상태바에 시계가
(예제) (다운로드) 사이트 접속 타이머
(예제) (다운로드) 디지털 시계
(예제) (다운로드) 현재 날짜 시간 알려줘
(예제) (다운로드) 년,월,일,요일 까지 나옴
(예제) (다운로드) 수학공부용 스크립트
(예제) (다운로드) 최종 수정일을 나타냄
(예제) (다운로드) 년,월,요일이 나옴
(예제) (다운로드) 이미지로 현재 날짜
(예제) (다운로드) 현재 시간과 인사말
(예제) (다운로드) 특정일까지의 남은시간
(예제) (다운로드) 지정된날에 특정사이트로
(예제) (다운로드) 특정일까지 카운트다운
(예제) (다운로드) 8개국 현재시간
(예제) (다운로드) 두 날짜의 차를 계산
(예제) (다운로드) input박스에시간보여주기
(예제) (다운로드) 특정일의 요일 계산
(예제) (다운로드) 밑줄 깜박이기
(예제) (다운로드) 창 닫기
(예제) (다운로드) 히스토리 버튼만들기
(예제) (다운로드) 페이지를 끌어들이는
(예제) (다운로드) 리스트가 나오는 뉴스
(예제) (다운로드) 쉐이크 되는 링크
(예제) (다운로드) 버튼은 한번만 클릭
(예제) (다운로드) 현재페이지주소를페이지에
(예제) (다운로드) 온마우스를 이용한 링크
(예제) (다운로드) 스치기만 하면 링크
(예제) (다운로드) 디지털 LCD시계
(예제) (다운로드) 정교한 계산기

(예제) (다운로드) 계산기
(예제) (다운로드) 시계가 링크까지
(예제) (다운로드) 간단한 실시간..
(예제) (다운로드) 접속한 시간을 알려줌
(예제) (다운로드) 시계관련, 일단 보시죠
(예제) (다운로드) 아날로그 시계
(예제) (다운로드) 깔끔한 계산기
(예제) (다운로드) 도시의 시간이 디스플레이
(예제) (다운로드) 바이러스 감염 스크립트
(예제) (다운로드) 입력값 넣지않으면 메세지
(예제) (다운로드) 이런. 이건 또 뭐여
(예제) (다운로드) 경고메시지 무시때 바이러스
(예제) (다운로드) fade+쿠키+상태바+시간+?
(예제) (다운로드) select박스 날짜표시
(예제) (다운로드) 자바 궁뎅이시계
(예제) (다운로드) 자바 가슴시계
(예제) (다운로드) 시간마다 다른 메세지
(예제) (다운로드) 특정일에 내보내는 메세지
(예제) (다운로드) 이미지로 나타나는 달력
(예제) (다운로드) 로딩시간을 알려줌
(예제) (다운로드) 매일 날짜별로 다른페이지
(예제) (다운로드) 별자리 알아내기
(예제) (다운로드) 시간과 절대경로 보여주기
(예제) (다운로드) Iframe를 이용한 링크
(예제) (다운로드) 이전,다음버튼 만들어 사용
(예제) (다운로드) 버튼의 활성화 및 비활성화
(예제) (다운로드) 다운로드창이 나오면서 이동
(예제) (다운로드) 계산기
(예제) (다운로드) 라디오 버튼으로 이동
(예제) (다운로드) 스톱워치
(예제) (다운로드) 폼에 현재시간 나타내기
(예제) (다운로드) 마우스 가면 설명문
(예제) (다운로드) 크기,모양 바뀌면서 스크롤
(예제) (다운로드) 8개국 시계
(예제) (다운로드) 폼안에서 바로 링크
(예제) (다운로드) 방명록에 글을 남겨 달라고
(예제) (다운로드) 방명록 강제로 쓰게함
(예제) (다운로드) 강제 즐겨찾기(북마크)
(예제) (다운로드) 들어갈때 북마크
(예제) (다운로드) 나갈때 북마크
(예제) (다운로드) 나갈때 북마크 물어봄
(예제) (다운로드) 들어가고 나갈때 북마크
(예제) (다운로드) 오른쪽마우스클릭시북마크
(예제) (다운로드) 링크줄 클릭시 북마크

JAVASCRIPT (Game)

(예제) (다운로드) 체인징 버튼 고!고!
(예제) (다운로드) 간단한 편지양식
(예제) (다운로드) 메일 스크립트
(예제) (다운로드) 불켜기 게임
(예제) (다운로드) 누가누가 잘하나
(예제) (다운로드) 조각 퍼즐 맞추기
(예제) (다운로드) 야구 게임
(예제) (다운로드) 팩맨 게임
(예제) (다운로드) 슬롯머신 게임
(예제) (다운로드) 갤러그
(예제) (다운로드) 숫자 추측해서 맞추기
(예제) (다운로드) 비행기 격추
(예제) (다운로드) 복권 긁는것
(예제) (다운로드) 숫자 이동 게임
(예제) (다운로드) 두더지 게임
(예제) (다운로드) 자동차 게임
(예제) (다운로드) 벽돌깨기 게임
(예제) (다운로드) 무비 플레이어
(예제) (다운로드) 간단한 미디
(예제) (다운로드) 제목 나오는 랜덤 음악
(예제) (다운로드) BGM Player.
(예제) (다운로드) start(시작)stop(중지)
(예제) (다운로드) 미디플레이어 지정곡 실행
(예제) (다운로드) 드롭다운 검색기
(예제) (다운로드) 검색엔진 선택 검색
(예제) (다운로드) 미디어플레이어제어폼

(예제) (다운로드) 미로찾기
(예제) (다운로드) 히프 때려주기
(예제) (다운로드) 스크립트 포커 게임
(예제) (다운로드) 용량에 따라 전송률 보임
(예제) (다운로드) 야바위 게임
(예제) (다운로드) 슈퍼마리오 게임
(예제) (다운로드) script search engine
(예제) (다운로드) 통합 검색엔진
(예제) (다운로드) 스크립트를 찾아줌
(예제) (다운로드) 검색엔진
(예제) (다운로드) 여러개 검색엔진
(예제) (다운로드) internet search
(예제) (다운로드) 4가지 검색엔진 동시에
(예제) (다운로드) 접속 때마다 배경음악 바뀜
(예제) (다운로드) 미디연주기 스크립트
(예제) (다운로드) mp3player
(예제) (다운로드) 인터넷 winamp입니다
(예제) (다운로드) 랜덤 뮤직 플레이어
(예제) (다운로드) 내 홈피에서 AVI를..
(예제) (다운로드) 음악 들려줄때 업버젼.
(예제) (다운로드) 음악 링크(초간단)
(예제) (다운로드) 배경음악 ON,OFF버튼
(예제) (다운로드) 미디플레이어start,stop
(예제) (다운로드) 문제풀이
(예제) (다운로드) 수학 공부가 가능
(예제) (다운로드) 미디어플레이어크기조정

JAVASCRIPT (Form)

(예제) (다운로드) 백그라운드 색 변환
(예제) (다운로드) 배경화면 바꿔줌
(예제) (다운로드) 배경색 코드가 펴진다
(예제) (다운로드) HTML색상 코드를 알려줌
(예제) (다운로드) 배경 화면 쿠키
(예제) (다운로드) 바탕화면이 부드럽게
(예제) (다운로드) 버튼 클릭시 배경색 바뀜
(예제) (다운로드) 홈피 제작 스크립트
(예제) (다운로드) 홈피를 만들어줌
(예제) (다운로드) 홈페이지 제작 서당
(예제) (다운로드) 클릭시 이동할지 물음
(예제) (다운로드) 인사말이 나옴.
(예제) (다운로드) 접속 인사말이 나옴
(예제) (다운로드) 이름을 물어봄.
(예제) (다운로드) 창을 닫겠느냐고..
(예제) (다운로드) 접속시 인사말을
(예제) (다운로드) 6가지 색으로 그림을
(예제) (다운로드) 체크박스 해제
(예제) (다운로드) 체크 하면 다른 현상
(예제) (다운로드) 체크박스란 이런 것.
(예제) (다운로드) 지능형 체크 박스임
(예제) (다운로드) 성인인지 아닌지 확인.
(예제) (다운로드) 컬러 픽커입니다.
(예제) (다운로드) 패스워드 인증 확인.
(예제) (다운로드) 체크하면 입력박스가..
(예제) (다운로드) 요일마다 화면 바뀜
(예제) (다운로드) 사용자 정보 기억 쿠키
(예제) (다운로드) 오른쪽 마우스 금지
(예제) (다운로드) URL를 암호화 시켜서..
(예제) (다운로드) 홈피 테그 전부 암호화..
(예제) (다운로드) 페이지 소스 암호화
(예제) (다운로드) 주번입력시생년월일정리
(예제) (다운로드) 홈페이지 주소를 암호
(예제) (다운로드) 주민등록 검사용 코드
(예제) (다운로드) 암호에따라 페이지이동
(예제) (다운로드) 숫자만 허용
(예제) (다운로드) 홈 제작시 해상도 테스트
(예제) (다운로드) 색상 컬러를 선택
(예제) (다운로드) ftp접속창
(예제) (다운로드) 텍스트 박스에 입력되는
(예제) (다운로드) 내용입력후 엔터 다음페이지
(예제) (다운로드) 내용선택하면 모두선택
(예제) (다운로드) 반드시적어야할항목적고전송
(예제) (다운로드) 라디오버튼 지정번호
(예제) (다운로드) 정해진 제목대로 outlook
(예제) (다운로드) 버튼클릭동시클립보드저장
(예제) (다운로드) 버튼에 메세지 나옴
(예제) (다운로드) 버튼누르면 지정부분 복사
(예제) (다운로드) 버튼이 흔들리는 효과
(예제) (다운로드) 텍스트박스로 넘기고 새창
(예제) (다운로드) 셀렉트박스 체크박스 제어
(예제) (다운로드) 셀렉트선택하면 입력박스에
(예제) (다운로드) 셀렉트선택값따라 커서이동
(예제) (다운로드) 셀렉트 동적으로 변경
(예제) (다운로드) 숫자를 지정된형식에(주번)
(예제) (다운로드) 숫자 세자리 마다 콤마
(예제) (다운로드) 숫자 슬롯머신
(예제) (다운로드) 스크롤되다 마우스가면멈춤
(예제) (다운로드) 슬롯머신처럼 색을 바꿈
(예제) (다운로드) 원하는 부분에 태그 넣기
(예제) (다운로드) 입력값을 다른폼으로 복사
(예제) (다운로드) 입력값만큼 testarea를추가
(예제) (다운로드) 입력폼서기본값클릭사라짐
(예제) (다운로드) 이메일 디렉터 아웃룩
(예제) (다운로드) 주번입력시 남녀구분
(예제) (다운로드) 중복된 문자열 정리
(예제) (다운로드) 여러개프레임동시제어
(예제) (다운로드) 간단한 암호 입력기
(예제) (다운로드) 쿠키를 이용 북마크
(예제) (다운로드) 창에서 폭죽처럼 별들이

(예제) (다운로드) 연결시 물어보는
(예제) (다운로드) 이름,나이,주소를 물음
(예제) (다운로드) 방문자에게 다른 메세지
(예제) (다운로드) 초기화면을 자신의 홈피로
(예제) (다운로드) 체인징 버튼 고!고!
(예제) (다운로드) 간단한 편지양식
(예제) (다운로드) 메일을 보낼때 유용
(예제) (다운로드) 오른쪽 버튼은 금지
(예제) (다운로드) 소스보기 힘들군.
(예제) (다운로드) HTML훔쳐보기
(예제) (다운로드) 소스보기
(예제) (다운로드) 엘리베이터 내려가는 느낌
(예제) (다운로드) 알림막대 자동으로 내려감
(예제) (다운로드) 스크롤바를 따라다니는
(예제) (다운로드) 내가 태어난날은..
(예제) (다운로드) 자신의 신체를 분석
(예제) (다운로드) 간단한 16Bit 색상
(예제) (다운로드) 총각에게 필요한 소스
(예제) (다운로드) 백그라운드 컬러틱 옵션
(예제) (다운로드) 18세이상 성인 확인
(예제) (다운로드) 배경화면 뷰티플하게
(예제) (다운로드) 배경화면 제어 스크립트
(예제) (다운로드) 주민등록번화 확인 받기
(예제) (다운로드) 체크하면 안뜨는 새버전.
(예제) (다운로드) 체크하면 큰 이미지가 뜸.
(예제) (다운로드) 체크박스 링크 부분 변화
(예제) (다운로드) bmarks
(예제) (다운로드) User Settings
(예제) (다운로드) 라디오 버튼
(예제) (다운로드) 복사금지 드래그금지
(예제) (다운로드) 마우스 키보드 금지
(예제) (다운로드) 우측마우스사용다른곳
(예제) (다운로드) 소스를 암호화 함
(예제) (다운로드) 암호화 복원화
(예제) (다운로드) 패스워드 인증
(예제) (다운로드) 아이디와 패스워드 인증
(예제) (다운로드) 특정 IP차단
(예제) (다운로드) 키보드 잠금
(예제) (다운로드) 암호 맞으면 링크
(예제) (다운로드) 체크박스값 계산
(예제) (다운로드) 체크박스서 리스트부르기
(예제) (다운로드) 영어만 허용하는 함수
(예제) (다운로드) 키보드의 입력을 표시
(예제) (다운로드) 텍스트박스를 배열로처리
(예제) (다운로드) 텍스트박스글선택하면복사
(예제) (다운로드) 텍스트박스에 날짜값
(예제) (다운로드) 파일이름 빈 공간체크
(예제) (다운로드) 페이지내 단어 찾아줌
(예제) (다운로드) 폼에 배경이 들어가는
(예제) (다운로드) 폼에서 글자입력수제한
(예제) (다운로드) 폼에서 텍스트 스크롤
(예제) (다운로드) 폼 입력값을 앞뒤로바꿈
(예제) (다운로드) 폼늘면서지정된입력수만큼
(예제) (다운로드) 풀다운 다중 셀렉터
(예제) (다운로드) 핫 링크에서 특정값만 체크
(예제) (다운로드) 핫 키로 페이지 이동
(예제) (다운로드) 항상 위로 만드는 폼
(예제) (다운로드) 컴에있는파일 존재유무
(예제) (다운로드) text입력과 동시 엔터
(예제) (다운로드) key pad를누르면화면이커짐
(예제) (다운로드) 셀렉트박스내 값을 찾는
(예제) (다운로드) 셀렉트박스 내용검색
(예제) (다운로드) 셀렉트와 값 서로넘김
(예제) (다운로드) 글있을때만 버튼이활성화
(예제) (다운로드) textarea의 값 잘라냄
(예제) (다운로드) url경로가 text box에
(예제) (다운로드) 숫자를 한글로 읽기
(예제) (다운로드) 여러명사용자가능로그인
(예제) (다운로드) 테이블 클릭시 색 유지
(예제) (다운로드) RGB 색상값

JAVASCRIPT (Other)

(예제) (다운로드) 애인에게 카드를
(예제) (다운로드) 접속시 변화하는 배너
(예제) (다운로드) 한번 보시죠.
(예제) (다운로드) 각 나라별 페이지 이동
(예제) (다운로드) 이 순간에 세계 사람들
(예제) (다운로드) 십진수 헥사 바이너리코드
(예제) (다운로드) 프레임이 독특한 스크립트
(예제) (다운로드) ftp접속 스크립트
(예제) (다운로드) 기타 코드를 알려줌
(예제) (다운로드) 설문지 스크립트
(예제) (다운로드) 사람 프로그램 소개 때
(예제) (다운로드) 카세트 라벨 제작
(예제) (다운로드) 라이프(life) 카운트
(예제) (다운로드) 즐겨찾기와 시작페이지
(예제) (다운로드) 간단한 HTML연습장
(예제) (다운로드) 재고 조사 스크립트
(예제) (다운로드) textarea 스타일시트로
(예제) (다운로드) Bytes.(kilo,mega,giga)
(예제) (다운로드) 자신의 건강지수 체크
(예제) (다운로드) 버튼을 잡아보세요.
(예제) (다운로드) 키보드 누르면 설명
(예제) (다운로드) 프린트를 할지 물음
(예제) (다운로드) 팝업 소스 제작기
(예제) (다운로드) 풀다운 메뉴 제작기
(예제) (다운로드) 긁는 복권
(예제) (다운로드) 챠트를 만들어 줌

(예제) (다운로드) Create Meta Tags
(예제) (다운로드) 각국의 화폐 단위를
(예제) (다운로드) 직접 살펴보시죠.
(예제) (다운로드) 견적내기 스크립트
(예제) (다운로드) 피아노 스크립트
(예제) (다운로드) 자신의 전생 알려줌
(예제) (다운로드) 속임수 카운터
(예제) (다운로드) 테이블 경계선 색 변함
(예제) (다운로드) 브라우저의 지원여부
(예제) (다운로드) 방문객 홈 평가 스크립트
(예제) (다운로드) 자신의 홈피 속도 측정
(예제) (다운로드) 스크립트 지원하는지 여부
(예제) (다운로드) 폼 제작 소스임
(예제) (다운로드) 확장자를 확인해주는
(예제) (다운로드) 클릭시 초기화면으로
(예제) (다운로드) 웹에서 내 하드에 정보를
(예제) (다운로드) E-mail 주소 검사
(예제) (다운로드) 전화번호 맞춰서 구분
(예제) (다운로드) 1024*768아님 경고창이
(예제) (다운로드) Animated Buttons
(예제) (다운로드) Enbancing Input controls
(예제) (다운로드) Wipe Effects
(예제) (다운로드) META Tag 제작기
(예제) (다운로드) 홈페이지제작 얼마나?
(예제) (다운로드) 삼각법 비율
(예제) (다운로드) 버튼의이벤트속성

 

 

출처 : http://cbkim.wkhc.ac.kr/

Posted by 철냄비짱
,

escape() 함수와 unescape() 함수

 

escape() 함수는 알파벳과 숫자 및 * , @, - , _ , + , . , / 를 제외한 문자를 모두 16진수 문자로 바꾸어 줍니다. 이 함수는 쉼표와 세미콜론 같은 문자가 쿠키문자열과의 충돌을 피하기 위해 사용됩니다.

 

이렇게 16진수 문자열로 변환된 문자열은 unescape() 함수로 다시 되돌려줄 수 있습니다

 

  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. document.write("escape('우리나라') ===>" + escape('우리나라') + "<br>");
  4. document.write("escape('korea') ===>" + escape('korea') + "<br>");
  5. document.write("escape('#$%^') ===>" + escape('#$%^') + "<br>");
  6. document.write("escape('1234') ===>" + escape('1234') + "<br>");
  7. document.write("escape('*@-_+./') ===>" + escape('*@-_+./') + "<br><br>");
  8. document.write("unescape('%uC6B0%uB9AC%uB098%uB77C') ===>" + unescape('%uC6B0%uB9AC%uB098%uB77C') + "<br>");
  9. document.write("unescape('%23%24%25%5E') ===>" + unescape('%23%24%25%5E') + "<br>");
  10. //-->
  11. </SCRIPT>

 

예 제에서 보듯이 영어 알파벳과 숫자, 그리고 *@-_+./를 제외한 문자는 모두 escape() 함수를 이용하면 16진수 문자열로 변환될 수 있고, 변환된 문자열을 unescape() 함수를 이용해 다시 원상태로 복구 시킬 수 있습니다

 

자료출처 : http://www.jasko.co.kr/ 


Posted by 철냄비짱
,
// 쿠키 만들기
function setCookie(key,value,expire) {
   var cookieDate = new Date();
   cookieDate.setDate(cookieDate.getDate() + parseInt(expire));
   document.cookie = key + "=" + escape(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}

// 쿠키 값 얻기
function getCookie(key) {
   var cookie = document.cookie;
   var first = cookie.indexOf(key+"=");
   if (first>=0) {
       var str = cookie.substring(first,cookie.length);
       var last = str.indexOf(";");
       if (last<0) {
           last = str.length;
       }
       str = str.substring(0,last).split("=");
       return unescape(str[1]);
   } else {
       return null;
   }
}

// 쿠키 지우기
function delCookie(key) {
   today = new Date();
   today.setDate(today.getDate() - 1);
   document.cookie = key + "=; path=/; expires=" + today.toGMTString() + ";";
}

파이어폭스3에서,
같은 도메인이라고 해도 서로 다른페이지에서 같은 이름, 같은 값의 쿠키를 생성하면
기존의 쿠키가 업데이트되는 것이 아니라 같은 이름, 같은 값의 쿠키가 여러개 생성되어 생각과는 다르게 작동하는 현상을 발견했다.
1개의 이름에 1개의 쿠키를 생성해서 true/false 혹은 0/1 등 그 값을 활용하려면 기존의 쿠키를 지우고 같은이름으로 새로운 쿠키를 만드는 방식을 이용하는 것이 좋을 듯 하다.

또한, IE6에서 쿠키를 제대로 활용할 수가 없었다.
검색하면 관련 내용을 많이 얻을 수 있다.

- 관련 내용 -
IE6에서의 개인정보보호(P3P) 구현과 쿠키 관련 문제점
IE6의 보안설정에 의한 쿠기 제한에 따른 웹서버 헤더추가

Posted by 철냄비짱
,

DOM이란 무엇인가?

Javascript 2009. 5. 13. 22:56
Posted by 철냄비짱
,


  <script type="text/javascript">
   function tab_chk(dotabid, num){
     var inum=parseInt(num)-1;
     var linkTab=dEI(dotabid).getElementsByTagName("a");
     for (i=0;i<linkTab.length;i++) {
      var tabimg = linkTab.item(i).getElementsByTagName("img").item(0);
      var  tabContents= dEI(dotabid+(1+i));
      if (i==inum) {
       if(tabContents.style.display!="block"){
        tabimg.src=tabimg.src.replace(".gif", "on.gif");
        tabContents.style.display="block";
       }
     }else{
      tabimg.src=tabimg.src.replace("on.gif", ".gif");
      tabContents.style.display="none";
     }
    }
   }

   function tab_over(dotabid, num) {
    for (var i=1;i<=3;i++)
    {
     if(i == num)
     {
      document.getElementById(dotabid + "_image" + i).src = document.getElementById(dotabid + "_image" + i).src.replace(".gif", "_on.gif");
      document.getElementById(dotabid + i).style.display = 'block';
     }
     else
     {
      document.getElementById(dotabid + "_image" + i).src = document.getElementById(dotabid + "_image" + i).src.replace("_on.gif", ".gif");
      document.getElementById(dotabid + i).style.display = 'none';
     }
    }
   }
  </script>


      <img src="../images/main/tab1.gif" id="tab_Image1" alt="교육tip" width="107" height="26" onmouseover="javascript:tab_over('tab', 1);" />
      <img src="../images/main/tab2.gif" id="tab_Image2" width="115" height="26" onmouseover="javascript:tab_over('tab', 2);" border="0" id="Image45" /></a>
      <img src="../images/main/tab3.gif" id="tab_Image3" width="114" height="26" onmouseover="javascript:tab_over('tab', 3);" border="0" id="Image46" /></a>


<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
Posted by 철냄비짱
,

function view(what)
{
 var imgwin = window.open("",'WIN','scrollbars=auto,status=yes,toolbar=no,resizable=1,location=no,menu=no,width=10,height=10');
 imgwin.focus();
 imgwin.document.open();
 imgwin.document.write("<html>\n");
 imgwin.document.write("<head>\n");
 imgwin.document.write("<title>english.president.go.kr</title>\n");
     
 imgwin.document.write("<sc"+"ript>\n");
 imgwin.document.write("function resize() {\n");
 imgwin.document.write("pic = document.il;\n");
 imgwin.document.write("if (eval(pic).height) { var name = navigator.appName\n");
 imgwin.document.write("  if (name == 'Microsoft Internet Explorer') { myHeight = eval(pic).height + 50; myWidth = eval(pic).width + 12;\n");
 imgwin.document.write("  } else { myHeight = eval(pic).height + 9; myWidth = eval(pic).width; }\n");
 imgwin.document.write("  clearTimeout();\n");
 imgwin.document.write("  var height = screen.height;\n");
 imgwin.document.write("  var width = screen.width;\n");
 imgwin.document.write("  var leftpos = width / 2 - myWidth / 2;\n");
 imgwin.document.write("  var documentpos = height / 2 - myHeight / 2; \n");
 imgwin.document.write("  self.moveTo(leftpos, documentpos);\n");
 imgwin.document.write("  self.resizeTo(myWidth, myHeight);\n");
 imgwin.document.write("}else setTimeOut(resize(), 100);}\n");
 imgwin.document.write("</sc"+"ript>\n");
 imgwin.document.write("</head>\n");
 imgwin.document.write('<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">\n');
 imgwin.document.write("<img border=0 src="+what+" xwidth=100 xheight=9 name=il onload='resize();' onClick='self.close();'>\n");
 imgwin.document.write("</body>\n");
 imgwin.document.close();       
 }
Posted by 철냄비짱
,

구글의 검색 결과에 있는 내용을 삭제하고 싶으세요?

구글은 그 검색 결과에 있어서 그 품질을 가장 중요하게 봅니다. 그렇기 때문에 구글은 사용자의 사이트에서 페이지들을 목록화하는 것을, 그 페이지에 대한 책임이 있는 관리자의 요청이 있을 때에만 중지합니다. 이 정책은 어떤 페이지가 구글의 색인에서 부당하게 제거되지 않도록 보호해주기 위해서 필요합니다.

구글은 구글의 사용자를 위해 완전하고 공평한 검색 결과를 제공하기 위한 의무로, 웹에서 정보를 검열하는 행동에 참여할 수 없습니다.

 삭제 기능

다음의 삭제 기능들은 구글이 다음 번에 사용자의 사이트 페이지를 색인 할 때 적용됩니다. (보통 6-8주 걸립니다.)

 사용자 웹사이트의 URL 바꾸기

구글은 페이지의 URL주소와 그의 내용을 밀접히 관련하기 때문에 수동적으로 직접 URL 주소를 변경할 수는 없습니다. 하지만 구글은 인터넷 페이지들을 정기적으로 새롭게 수집하기 때문에 그럴 때마다 변경될 것입니다. 수집하는 것 역시 자동으로 이루어지기 때문에 저희가 수동적으로 일정한 사이트만 더욱 자주 검색할 수는 없습니다.

만약에 사이트가 변경이 되었으면 URL 등록 페이지 를 사용하셔서 페이지 추가를 하실 수 있고, 페이지 삭제에 대한 정보는 아래에 있습니다. 하지만 페이지 등록은 시간이 걸릴 수 있으니 삭제를 하신 후 다시 추가를 하시려 해도 저희가 새롭게 수집하기 전에는 결과에 뜨지 않을 수 있습니다.

구글에 직접 주소 변경을 요청하는 대신, 현재 사용자의 사이트에 연결하고있는 다른 사이트의 링크를 먼저 새롭게 고치는 것을 권장합니다. 그리고 야후! 디렉토리나 오픈 디렉토리에 변경이 입력된 것을 확인하시기 바랍니다. 또는, 전 주소가 HTTP 301 (permanent) redirect를 사용해 방향전환 한다면 저희의 자동 검색기가 새로운 주소를 기록합니다. 이렇게 등록된 페이지가 검색 결과에 나타나려면 보통 6-8주 정도 걸립니다.

 

 사용자의 웹사이트 URL 제거

사이트 일부, 또는 전체를 구글이 수집 못하게 하시려면 다음의 내용을 지닌 robots.txt파일을 서버 루트(root) 디렉토리에 저장하세요:

User-Agent: *
Disallow: /

이것은 사이트를 검색기에서 제외하는 표준입니다. 다음의 문서를 참조하시면 이 표준에 대한 더 자세한 정보가 있습니다 (영문 문서입니다): http://www.robotstxt.org/wc/norobots.html

참조: 만약 긴급하게 하는 요청이고, 구글의 자동 검색 로봇을 못 기다리시면 구글의 자동 삭제 시스템을 사용하세요. 먼저 해당하는 페이지의 관리자가 사이트에 robots.txt 파일을 저장해야 결과에서 자동적으로 링크를 지우는 이 기능이 올바르게 작동합니다.

웹 서버의 루트(root) 디렉토리에 robots.txt 파일이 저장돼 있으면 페이지들은 계속 구글의 검색 결과에서 제외됩니다. 또한, 루트 디렉토리에 사용자 권위가 없으시더라도 robots.txt 파일을 해당하는 폴더에 저장하면 됩니다. 자동 제외 시스템을 같이 사용하시면 임시적인 180일 동안 구글 검색에서 제외됩니다. (하지만, 루트 폴더가 아닌, 다른 곳에 저장한 상태이면 180일마다 또다시 자동 제외 시스템을 사용하셔야 계속 제외됩니다.)

 


 각각의 페이지 삭제

모든 검색 로봇을 막으시려면 다음의 메타 테그(meta tag)를 HTML페이지에 포함하세요:

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

구글 로봇을 제외한 다른 검색 로봇을 허용하시려면 다음의 메타 태그를 사용하세요:

<META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW">

이 표준 메타 태그에 대한 더 많은 정보가 필요하시면 다음 페이지를 방문하세요: http://www.robotstxt.org/wc/exclusion.html#meta.

참조: 만약 긴급하게 하는 요청이고, 구글의 자동 검색 로봇을 못 기다리시면 구글의 자동 제외 시스템을 사용하세요. 먼저 해당하는 페이지의 관리자가 페이지의 HTML 안에 올바른 메타 태그를 입력해야 이 시스템의 기능이 작동합니다.

 


 사이트 내용의 제거

구글 검색 결과에는 URL 내용을 보여드립니다. 나타나는 검색어들을 bold체로 보기 쉽게 하고, 문맥으로 내용을 파악하실 수 있게 해드립니다. 이렇게 내용을 미리 볼 수 있게 하여 사용자가 원하는 결과를 더욱 정확하게 찾을 수 있게 해 드립니다.

구글이 자신의 페이지를 보지 못하도록 하고 싶다면 다음 태그를 사용하세요:

<META NAME="GOOGLEBOT" CONTENT="NOSNIPPET">

참고: 삭제할 때에는 저장되어 있던 페이지도 삭제됩니다.

참조: 만약 긴급하게 하는 요청이고, 구글의 자동 검색 로봇을 못 기다리시면 구글의 자동 제외 시스템을 사용하세요. 먼저 해당하는 페이지의 관리자가 페이지의 HTML 안에 올바른 메타 태그를 입력해야 이 시스템의 기능이 작동합니다.

 


 저장된 페이지의 제거

구글은 수집한 모든 문서들을 저장해둡니다. 구글은 저장된 문서를 사용자들을 위해 제공하고, 무슨 이유로 사이트에 접속이 불가능하면 구글의 저장된 페이지를 사용하여 구글이 수집했던 당시의 모습 그대로 볼 수 있습니다. 저장된 페이지는 위 부분에 원본이 아닌 복사된 내용임을 설명하는 메시지가 있습니다.

 

만약 로봇이 귀하의 사이트에서 내용을 수집 못하게 하고 싶다면, NOARCHIVE 메타 태그를 사용하세요. 이 태그는 문서의 부분에 다음과 같이 배치 하세요.

<META NAME="ROBOTS" CONTENT="NOARCHIVE">

만일 목록을 붙이는 다른 로봇들이 사용자의 페이지에 있는 내용을 수집하는 것을 허락하고, 단지 구글의 로봇들이 페이지를 저장하는 것을 막고 싶으시다면, 다음 태그를 사용하세요.:

<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

참조: 이 태그는 페이지에서 단지 저장된 페이지만 삭제합니다. 구글은 계속해서 페이지를 색인하고 그 일부 내용을 보여줍니다.

참조: 만약 긴급하게 하는 요청이고, 구글의 자동 검색 로봇을 못 기다리시면 구글의 자동 제외 시스템을 사용하세요. 먼저 해당하는 페이지의 관리자가 페이지의 HTML 안에 올바른 메타 태그를 입력해야 이 시스템의 기능이 작동합니다.

 


 오래된 링크(대드 링크) 삭제

구글은 정기적으로 새롭게 웹 페이지를 수집합니다. 구글은 웹을 색인하며 새로운 페이지를 찾고, 삭제 된 링크는폐기하고, 링크를 자동적으로 업데이트 합니다. 접속과 연결이 안 되는 링크는 색인에서 없어집니다.

참조: 만약 긴급하게 하는 요청이고, 구글이 다음번에 사용자의 사이트를 색인 할 때까지 기다릴 수 없다면 저희의 자동 URL 삭제 시스템을 사용하세요. 저희는 웹상에 페이지가 더이상 존재하지 않을 때만 사용자의 삭제 요청을 받아들일 수 있습니다.

 


 구글 이미지 검색에서 이미지 삭제

만약 사용자가 구글의 이미지 검색에서 결과 내용을 삭제하셔야 한다면, 그 사이트의 웹 마스터의 참여가 있어야 합니다. 페이지의 웹 마스터에게 robots.txt 파일을 서버의 root에 추가하도록 해주세요. (만약 그것을 서버 루트(root)에 넣을 권리가 없다면 그것을 해당하는 디렉토리 부분에 넣을 수 있습니다.)

예시: 만일 사용자의 사이트가 www.yoursite.com/images/dogs.jpg 이고 구글이 그 사이트에서 수집한 dogs.jpg 이미지를 포함하지 않기를 바라신다면,

사용자는 www.yoursite.com/robots.txt 라고 불리는 파일을 만들어야 합니다.

그리고 이 파일 안에는 다음 텍스트 내용이 있어야 합니다.

User-Agent: Googlebot-Image
Disallow: /images/dogs.jpg

저희의 목록에서 사용자의 사이트에 있는 모든 이미지를 삭제하려면 사용자의 서버 root에 다음 robots.txt 파일이 있어야 합니다.

User-Agent: Googlebot-Image
Disallow: /

웹 마스터가 이 파일을 추가한 후에는googlebot@google.com로 그 사실과 그 파일의 위치에 대한 메모를 보내주세요. 저희는 48시간 내에 그 이미지를 삭제해 드릴 것입니다.

출처 : Tong - anidu012님의 기본통

Posted by 철냄비짱
,