세이박스

'자바스크립트'에 해당되는 글 23건

  1. node.js displays “undefined” on the console
  2. javascript에서 미리 이미지 로드하기 (1)
  3. 자바스크립트 이용해서 다음 카페 대문에 iframe 삽입하기
  4. 자바스크립트를 이용해서 여러장의 이미지 롤링하기
  5. 자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용
  6. input 입력시 한글만 입력 되도록 또는 영문만 입력 되도록 자바스크립트 제한
  7. 자바스크립트로 토스트 배너 (Toast Banner) 슬라이딩 광고 구현
  8. 자바스크립트에서 숫자 3자리 마다 콤마(,) 삽입 또는 콤마(,) 제거 하기
  9. [자바스크립트] 문자 자르기 및 특정 문자로 분리하기
  10. 자바스크립트 팝업을 띄우기 실패시 별도의 메시지 보여주기
  11. 자바스크립트 팝업 이미지 클릭시 <a 사용하지 않고 띄우기
  12. [javascript] 지정된 영역만 자바스크립트로 출력 하기
  13. input 리스트가 배열로 반복될경우, 자바스크립트로 원하는 리스트 선택하기
  14. 자바스크립트에서 confirm() 을 사용할 경우 확인, 취소 로 나오는 버튼을 Yes, No 로 바꾸기
  15. 자바스크립트 마우스 따라 다니는 이미지 2탄
  16. 자바스크립트 기초 기능 부터 활용할 수 있는 기능을 예제로 보여줌
  17. 자바스크립트 마우스 따라 다니는 이미지
  18. [자바스크립트] 뉴스 속보 한줄로 타자치듯이 보여주는 기능!
  19. 자바스크립트 함수 체크
  20. [자바스크립트] 한글 처리
  21. 자바스크립트 <a href 클릭시 팝업 띄우기 및 클릭한 URL 값 받아오기
  22. PHP 처리후 페이지 이동 하는 방법들
  23. 자바스크립트 select 셀렉트 박스 선택한 값을 받아오기

node.js displays “undefined” on the console

웹프로그램

 

node.js 첫 관문인 hello world 출력하는 것으로 시작하게 된다.

그런데, 뜻하지 않게 undefined 메시지를 만나게 된다.

당황하지 말고 아래 설정 옵션을 true 실행해 준다.

 

module.exports.repl.ignoreUndefined = true;

 

끝, 드이상 해당 메시지는 나타나지 않는다. ^^;

 

 

javascript에서 미리 이미지 로드하기

웹프로그램
롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다.
 

<script language="javascript">
function init()
{
 img1 = new Image;
 img1.src = "images/img1.jpg";
 img2 = new Image;
 img2.src = "images/img2.jpg";

 document.getElementById("num1").src = img1.src;
 document.getElementById("num2").src = img2.src;
}
</script>

<body onload="javascript:init();">
<img id="num1"><br>
<img id="num2"><br>
<body>
 

 

자바스크립트 이용해서 다음 카페 대문에 iframe 삽입하기

웹프로그램
사용자 삽입 이미지


다음 카페 대문에 광고 삽입되는것을 보고서 어떻게 구현하는 것일까?
고민하다가 소스를 보니 자바스크립트를 이용하고 있더군요.
일단, 다음 카페 설정에서 대문 설정이 있는데 html 모드로 설정 하시면 태그를 입력 할 수 있습니다.

사용자 삽입 이미지


하지만, <iframe></iframe> 태그는 사용할수 없도록 차단하고 있습니다.
차단 방법이 iframe 단어로 차단하고 있으므로 ifr ame 을 분리 하면됩니다.
하지만 이렇게 태그를 분리하면 iframe 동작을 못하게 됩니다.
따라서, 자바스크립트의 document.write() 를 이용해서 출력해주면 됩니다.

<scRIPT>document.write("<IFR"+"AME height=710 src='http://도메인' frameBorder=0 width=778 height=162 scrolling=no></IFR"+"AME>");</scRIPT>

위 소스처럼 "<ifr"+"ame ..." 으로 분리 해버리면 실제 출력은 "<iframe"으로 되지만 다음카페에서 차단 분석시에는 예외 처리 되어 버립니다.
이로써 카페 대문에 광고 및 필요한 내용을 외부로 부터 가져와서 보여 줄수가 있겠죠.
잘 응용해보세요.

제가 달인쿠폰 배너를 샘플로 제 임시 다음카페에 적용해 봤습니다.
참조 : http://cafe.daum.net/sayboxs


 ▶ 최신영화, 최신 미국드라마 무료 다운로드...

자바스크립트를 이용해서 여러장의 이미지 롤링하기

웹프로그램
쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다.

먼저 예제 이미지는 총 4장 입니다.
현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다.

1. 이미지 넘버
이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다.

<!-- 이미지 넘버링 -->
<div style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: relative; TOP: 0px; HEIGHT: 0px; display:block;">
 <div style="Z-INDEX: 1; LEFT: 800px; WIDTH: 135px; POSITION: absolute; TOP: 15px; HEIGHT: 0px">
  <table border=0 cellpadding=0 cellspacing=0 align=right>
   <tr>
    <!-- 이미지 넘버 1 -->
    <td width=20><a href="#none"><img id='num_1' src="http://dalincoupon.com/images/group/ico1_on_.gif" border=0 onclick="clickImg(1,'/mall/updir/products/99fed6c0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 2 -->
    <td width=20><a href="#none"><img id='num_2' src="http://dalincoupon.com/images/group/ico2_off_.gif" border=0 onclick="clickImg(2,'http://dalincoupon.com/mall/updir/products/1239dae0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 3 -->
    <td width=20><a href="#none"><img id='num_3' src="http://dalincoupon.com/images/group/ico3_off_.gif" border=0 onclick="clickImg(3,'http://dalincoupon.com/mall/updir/products/76acc690.jpg')"></a></td>
    <td width=5></td>
    <!-- 이미지 넘버 4 -->
    <td width=20><a href="#none"><img id='num_4' src="http://dalincoupon.com/images/group/ico4_off_.gif" border=0 onclick="clickImg(4,'http://dalincoupon.com/mall/updir/products/94a63cd0.jpg')"></a></td>
    <td width=5></td>
    <!-- 이후 이미지를 추가 하셔도 됩니다 -->
   </tr>
  </table>
 </div>
</div>
<!-- //이미지 넘버링 -->

이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다.
"num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다.


2. 대표 이미지 출력
기본적으로 출력된 첫번째 이미지를 적용 합니다.
img 태그에 id값을 "mainImage"로 적용합니다.

<!--상품 메인이미지-->
<img id="mainImage" src="http://dalincoupon.com/mall/updir/products/99fed6c0.jpg" width="950">




3. 자바스크립트 소스

<script type="text/javascript">
<!--
var numIdx = 1; //첫 이미지 배열 번호
var nextimg = 2; //다음 바뀔 이미지 배열 번호
var timerchecker = null; //롤링 시간을 초기화 하기 위한 선언

var imgs = new Array(); //이미지 URL을 배열로 담아두기
imgs[1] = "http://dalincoupon.com/mall/updir/products/99fed6c0.jpg";
imgs[2] = "http://dalincoupon.com/mall/updir/products/1239dae0.jpg";
imgs[3] = "http://dalincoupon.com/mall/updir/products/76acc690.jpg";
imgs[4] = "http://dalincoupon.com/mall/updir/products/94a63cd0.jpg";

/* 이미지 넘버를 클릭시 호출하는 함수 */
function clickImg(idx,img) {
 clearTimeout(timerchecker); //시간 초기화
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1; //마지막 이미지가 아니면 다음 +1 이미지로 이동
 } else {
  nextimg = 1; //이미지가 마지막 장이면 다음 이미지는 첫장으로 이동
 }
 /* 이미지 롤링 호출, 이용자가 클릭해서 보는 이미지 이므로 20초 지연 */
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",20000);
}

/* 이미지 롤링 함수 */
function changeImg(idx,img) {
 clearTimeout(timerchecker);
 btnNew = document.getElementById("num_"+idx);
 btnOld = document.getElementById("num_"+this.numIdx);
 btnOld.src = btnOld.src.replace("_on_","_off_");
 btnNew.src = btnNew.src.replace("_off_","_on_");
 document.getElementById("mainImage").src = img;
 this.numIdx = idx;
 if(nextimg < 4) {
  nextimg += 1;
 } else {
  nextimg = 1;
 }
 timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
}
timerchecker = window.setTimeout("changeImg(nextimg,imgs[nextimg])",5000);
//-->
</script>

자바스크립트 내부에 주석을 달아 놨지만 다시 설명을 덧붙이겠습니다.
먼저 페이지 로딩시 지정한 이미지를 배열로 담습니다.
var imgs = new Array();

그리고, timerchecker 라는 변수에 window.setTimeout(); 함수를 담습니다.
이때 적용되는 함수로는 5000 -> 5초 지연후 changeImg() 함수를 호출 됩니다.
이때 nextimg값을 전달 하므로 처음엔 changeImg(2,http://dalincoupon.com/mall/updir/products/1239dae0.jpg);
두번째 이미지 정보를 changeImg() 함수에 전달합니다.

이미지 롤링 함수에서는 전달 받은 idx와 img 값을 이용해서 다음 이미지로 변경 그리고 이미지 넘버역시 함께 변경 합니다.

만약 사용자가 이미지 넘버를 클릭시엔 이용자가 원하는 이미지를 바로 볼수 있도록 clickImg() 함수를 호출합니다.
해당 함수 역시 changeImg() 함수와 동일하지만 단, 지연시간을 20000 -> 20초로 지정하여 사진을 볼수 있는 시간을 지연해 줍니다.
20초가 지나면 다시 원래되로 changeImg() 함수가 5초 간격으로 반복 처리 됩니다.


여기서 한가지 더 응용한다면 이미지 전환할때 슬라이드 효과를 적용할수도 있지만 그럴경우 소스가 매우 복잡해져서 이정도록 적용해 봤습니다.
위 소스를 그대로 적용시 달인쿠폰 상품 이미지가 롤링 되는것을 보실 수 있을겁니다.
달인쿠폰 반값 할인 사이트 참조하세요!
김병만의 달인쿠폰 : http://dalincoupon.com


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

웹프로그램

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function QnaShow(qna) {
 /* 질문 갯수 만큼 추가 해 줍니다 */
 document.all.qna1.style.display = "none";
 document.all.qna2.style.display = "none";
 document.all.qna3.style.display = "none";
 /* 요청한 답변을 보이기 처리 입니다 */
 var obj = eval("document.all." + qna);
 obj.style.display = "block";
}
//-->
</script>



2. 테이블 소스

<table>
 <!-- 질문 1 -->
 <tr>
  <td><a href="javascript:QnaShow('qna1')">질문1</a></td>
 </tr>
 <tr id="qna1" style="display:none;">
   <td>답변1</td>
 </tr>
 <!-- 질문 2 -->
 <tr>
  <td><a href="javascript:QnaShow('qna2')">질문2</a></td>
 </tr>
 <tr id="qna2" style="display:none;">
   <td>답변2</td>
 </tr>
 <!-- 질문 3 -->
 <tr>
  <td><a href="javascript:QnaShow('qna3')">질문3</a></td>
 </tr>
 <tr id="qna3" style="display:none;">
   <td>답변3</td>
 </tr>
</table>


3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

input 입력시 한글만 입력 되도록 또는 영문만 입력 되도록 자바스크립트 제한

웹프로그램

input 입력시 한글 입력을 style로 막을수도 있지만 자바스크립트로도 막을수 있습니다.
또는 반대로 한글만 입력하도록 적용할 수도 있습니다.


1. 스타일
style='ime-mode:disabled'


2. 자바스크립트

function NumberChk(){
 if ((event.keyCode<48) || (event.keyCode>57)) {
  event.returnValue = false;
  return false;
 }else{
  return true;
 }
}

3. 적용예
<input type="text" name="txt" onkeypress="NumberChk()" style="ime-mode:disabled" />


4. 한글만 입력하도록 자바스크립트 함수 수정
function NumberChk() {
 if(event.keyCode=="") {
  event.returnValue = false;
  return false;
 }else{
  return true;
 }
}


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

자바스크립트로 토스트 배너 (Toast Banner) 슬라이딩 광고 구현

웹프로그램
엠게임 (mgame.com) 사이트 접속하면 우측 하단에 스르륵 광고가 올라 오는 것을 볼 수 있습니다.
이와 같은 광고 방식을 토스트 Toast 배너 광고 방식 이라고 합니다.
세이박스에도 구현되어 있으니 참고 하시기 바랍니다.
엠게임의 경우 보여주고 사라지는 동작만 자바스크립트로 구현하고 슬라이딩 효과는 플래시로 구현 했더군요.

사용자 삽입 이미지


하지만, 일일이 플래시에서 슬라이딩 효과를 줄려면 광고가 바뀔때 마다 적용해야하니 번거롭겠죠!
따라서, 플래시가 되었던 이미지가 되었던 어떤 내용이던지 슬라이딩 효과를 내도록 적용 해 봤습니다.
그리고, 닫기 기능도 간단하게 추가 해놨습니다.

먼저, 표시될 광고 html 소스 예제 입니다.

<body>
......

<!-- Toast Banner Source Start by Saybox -->
<div id="toast_banner" style="position:absolute; left:-229px; z-index:1000;">
 <div id="toast_ad" style="display:none; left:-2219px;">
  <table cellpadding="0" cellspacing="4" border="0" bgcolor="#FFFFFF">
   <tr>
    <td>
     <!-- 광고영역 start -->
   <script type='text/Javascript' src='http://tag.targetbanner.co.kr/mediaLive/?NjI1Jmh0dHA6Ly93d3cuc2F5Ym94LmNvLmtyJjI2NSZodHRwOi8vd3d3LnNheWJveC5jby5rciYxJjIwMTAwMjEyMDcxNjE4LmpwZyYyMTQmMjM4JmpwZw=='></script>
     <!-- 광고영역 end -->
    </td>
   </tr>
   <tr>
    <td align="center" bgcolor="#FFFFFF"><a href="javascript:messageClose()" style="font-size:11px;color:#6b6d70;">[닫기]</a></td>
   </tr>
  </table>
 </div>
</div>
<script language="javascript" src="/js/toast.js"></script>
<!-- Toast Banner Source End by Saybox -->

</body>

위 HTML 소스에서 수정할 부분은 "광고영역"에 배너 이미지 또는 플래시 등의 광고 이미지를 추가 해 줍니다.
style 소스중 "left:-225px;" 부분은 광고를 숨기기 위한 폭이므로 광고 영역보다 조금 크게 설정하시면 보이지 않습니다.

다음은 첨부된 toast.js 파일에서 수정할 부분 입니다.

var toast_ad_width = 236; //광고폭사이즈 (픽셀단위)
var toast_sliding_time = 20; //슬라이딩 속도
var toast_open_time = 5000; //배너 시작 시간
var toast_close_time = 10000; //배너 종료 시간

소스 상단 부분에 위와 같은 설정 항목이 있습니다.
항목별로 설명 합니다.

1. toast_ad_width
이미지폭 즉, 광고 폭을 지정합니다.
광고 사이즈 보다 테이블 폭을 감안해서 조금더 크게 지정 합니다.
단위는 픽셀 단위 입니다.

2. toast_sliding_time
광고 슬라이딩 속도를 지정 합니다.
20의 경우 0.02*2=0.04초 지연 속도에 해당 합니다.
슬라이딩 효과를 보면서 수치를 변경 해보시면 됩니다.
단, 플래시 광고의 경우는 용량이 큰 경우 지정된 시간보다 늦게 슬라이딩 되는 경우도 있습니다.

3. toast_open_time
Toast 광고 시작되는 시간 입니다.
5000으로 설정시 페이지 로딩이 모두 완료된 이후 부터 5초뒤 슬라이딩 효과가 시작 됩니다.

4. toast_close_time
10000 수치 입력시 광고가 오픈된뒤 10초뒤에 자동으로 닫힙니다.

* 만약 아래 [닫기]를 누를 경우 바로 close 됩니다.


적용시 주의 사항!

1. toast.js 파일 경로는 /js/폴더에 동일하게 넣으시고, 만약 경로를 변경할 경우엔 위 html 소스부분도 변경 해 주셔야 합니다.
2. 반드시 div 소스보드 <script .... src=".../toast.js"></script> 소스가 뒤에 있어야 합니다.
3. html 소스는 </body> 태그 바로 앞에 추가 하시는게 좋습니다. 다른 div 설정 영향을 안받기 위해서... 참고로, 세이박스는 그누보드 기반이라 "/tail.sub.php" 파일에 적용 했습니다. 그누보드 이용자라면 참고해서 적용하시기 바랍니다.

 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

자바스크립트에서 숫자 3자리 마다 콤마(,) 삽입 또는 콤마(,) 제거 하기

웹프로그램
자바스크립트로 사용자가 입력한 숫자에 천단위로 콤마를 삽입 하고자 하거나 빼고 싶을때 필요한 함수 입니다.

예를들어 입력된 값이 1000000원을 1,000,000원으로 바꾸고자 할 경우 setComma(1000000); 함수를 이용하시면 됩니다.
1,000,000원에서 콤마를 빼고 싶다면 RemoveComma('1,000,000'); 함수를 이용 하시면 됩니다.



//1,000단위 마다 콤마(,) 추가 하기

function setComma(str) {
  return Number(String(str).replace(/\..*|[^\d]/g, "")).toLocaleString().slice(0,-3);
}


//1,000 단위 마다 콤마(,) 제거 하기

function RemoveComma(str) {
  return parseInt(str.replace(/,/g, ""));
}


  최신영화, 최신 미국드라마 무료 다운로드... 


[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=133

[자바스크립트] 문자 자르기 및 특정 문자로 분리하기

웹프로그램

자바스크립트에서 문자를 자르거나 분리하기 위한 방법 입니다.

1. 문자를 특정 위치로 부터 지정한 길이 만큼 자리기
함수 : substr()

var a = "123456789";
var b = a.substr(0,3);
alert(b); //결과 : 123

var c = a.substr(5,2);
alert(c); //결과 : 67

php의 경우 substr(변수,자를위치,자를갯수)이미지만 자바스크립트에서는 변수.substr(자를위치,자를갯수) 방식으로 사용합니다.
자를위치는 문자열 처음이 1이 아닌 0으로 되어 있습니다. 즉, 0,1,2.. 이렇게 시작하니 착오 없으시길 바랍니다.


2. 문자열에서 특정 문자 기준으로 자르기
함수 : split()
적용예 :

var a = "010-1111-2222";
var b = a.split("-");

alert(b[0]); //결과: 010
alert(b[1]); //결과: 1111
alert(b[2]); //결과: 2222

전화번호를 예로 "-" 기준으로 잘라서 저장해 보았습니다.
"-" 는 제거되며 "-"기준으로 각 값들이 배열로 저장 됩니다.

  최신영화 보러가기... 

자바스크립트 팝업을 띄우기 실패시 별도의 메시지 보여주기

웹프로그램
자바스크립트(javascript)에서 팝업 띄우기를 실패 할 경우 alert 메시지로 팝업차단을 변경 할 것을 요청하는 방법

<script>
var f = window.open("팝업 관련 처리");
if(f == null) {
  alert('팝업이 차단 되었으니 해지 바랍니다.');
  location.href = "팝업을 해지 하는 방법이 설명된 페이지로 이동";
}
</script>

팝업을 해지 해야만 서비스 가능한 경우 위와 같이 처리 하면 가능할 것 같습니다.

자바스크립트 팝업 이미지 클릭시 <a 사용하지 않고 띄우기

웹프로그램
팝업을 띄울 때 하이퍼링크 <a></a> 테그를 사용하지 않고 이미지에 바로 적용하고 싶을 때 다음과 같이 처리 할 수 있습니다.

<img src="이미지.gif" style="border:0;cursor:pointer" onClick="window.open('popup.html','팝업','width=532,height=520,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,left=150,top=100')">

각 항목 별로 설명 하겠습니다.

src : 이미지 경로 입니다.

style : 이미지에 대한 스타일 지정

- border : 이미지의 테두리 선을 보이지 않게 하기 위해서 두께를 0 (픽셀)을 줬습니다.

- cursor : 하이퍼 링크 테그가 적용되지 않아 이미지에 마우스를 올려 놓을 때 아무런 반응이 없으면 링크가 걸려 있는지 확인이 안되겠죠. 따라서, 이미지에 마우스가 올라 올때 손가락 모양으로 표시되도록 마우스 포인터 모양을 "pointer"로 적용 했습니다.

onClick : 이미지를 클릭시 발생하는 이벤트로 자바스크립트 바로 입력 가능합니다.

- window.open() : 자바스크립트의 팝업 함수 입니다. 윈도우 창을 열라는 뜻. () 안에 윈도우 창(팝업)에 대한 설정을 입력합니다. onClick="" 에서 이미 " " 쌍따옴표를 사용했으므로 window.open() 안에서는 ' ' 홀따옴표로 각 옵션을 구분합니다. (' 팝업주소','팝업명','팝업속성')

1. 첫번째 ' ' 홀따옴표 안에 팝업으로 띄울 웹페이지 URL을 넣습니다.

2. 두번째 ' ' 홀따옴표 안에 팝업 구분값을 넣습니다. 만약 팝업을 2개이상 띄울 때 같은 이름이면 기존 팝업안에서 팝업 내용이 나타나게 됩니다. 팝업이 하나라면 아무 이름을 사용해도 상관 없습니다.

3. 세번째 ' ' 홀따옴표 안에 팝업 속성값을 넣습니다.

- width : 팝업 창 폭 (픽셀)

- height : 팝업 창 높이 (픽셀)

- toolbar : 팝업 창 상단 툴바 표시 유무 (yes, no)

- location : 팝업 창 상단 주소줄 입력란 표시 유무 (yes, no)

- status : 팝업 창 하단 상태 표시 부분 표시 유무 (yes, no)

- menubar : 팝업 창 상단 메뉴 부분 표시 유무 (yes, no)

- scrollbars : 팝업 창 우측 스크롤 부분 표시 유무 (yes, no, auto)

- resizable : 팝업 창 크기 조절 가능 유무 (yes, no)

- left : 팝업 창 뜰 때 위치 모니터의 좌측 (0,0) 기준 오른쪽으로 이동 거리 (픽셀)

- top : 팝업 창 뜰 떄 위치 모니터의 좌측 (0,0) 기준 아래쪽으로 이동 거리 (픽셀)

* 위 팝업 속성 이외에도 더 있는걸로 아는데 기본적으로 사용하는 것만 적용 했습니다.

만약, window.open() 함수를 이용해서 팝업을 띄울 때 위 옵션들을 모두 yes 즉, 새창으로 띄우고 싶다면 다음과 같이 하시면 됩니다.

<img src="이미지.gif" style="border:0;cursor:pointer" onClick="window.open('popup.html','_blank')">

아주 간단하죠!

지금까지 이미지에 하이퍼링크를 이용하지 않고 띄우는 방법이었습니다.

감사합니다. ^.^

[javascript] 지정된 영역만 자바스크립트로 출력 하기

웹프로그램

대부분 팝업을 띄워서 필요한 부분을 다시 읽어 들여서 출력을 많이 하는데 출력을 위해서 페이지를 추가로 만들어야 하는 번거로움이 생긴다.
이럴 경우 자바스크립트로 특정 부분을 지정하여 출력할 수 있다.

<script type="text/javascript">
function printIt(printThis)
{
    var win = null;
    win = window.open();
    self.focus();
    win.document.open();
    win.document.write("필요한내용을 추가로 이렇게 넣을수도 있습니다.<br>");
    win.document.write(document.getElementById('printarea').innerHTML);
    win.document.close();
    win.print();
    win.close();
}
</script>
<table>
  <tr>
    <td id="printarea">
       출력할 내용 테이블이 될수도 이미지가 될 수도 어떤 내용이든 출력 이영역 안에 내용만 출력
    </td>
  </tr>
</table>

위 소스처럼 굵게 입력한 id 값 이후 내용을 출력하게 됩니다.
따라서, div를 이용할 경우 <div id="test">내용</div> 처럼 적용하실 수도 있습니다.
출력할때만 추가적으로 내용을 넣고 싶다면 script에서 document.write를 추가하시면 됩니다.
응용해서 적용해 보시기 바랍니다. ^^

위 글은 세이박스에서 작성한 글이므로 가져 가실 때 출처 남겨 주세요! ㅋㅋ


input 리스트가 배열로 반복될경우, 자바스크립트로 원하는 리스트 선택하기

웹프로그램

input을 name 값을 배열로 반복해서 값을 담은뒤 자바스크립트에서 값을 불러 오기 위해서는 elements[] 를 이용하면 됩니다.

<input type="text" name="a[0]" value="111">
<input type="text" name="a[1]" value="222">

var b = document.list1.elements["a["+num+"]"].value;

num은 input 의 배열값입니다.
num = 0 => 111
num = 1 => 222
값이 되겠죠.

자바스크립트에서 confirm() 을 사용할 경우 확인, 취소 로 나오는 버튼을 Yes, No 로 바꾸기

웹프로그램

자바스크립트에서 cofirm() 을 사용할 경우 OK, CANCEL, 확인, 취소 로 나오는 버튼을

사용자 삽입 이미지
 

Yes, No 로 변경하고자 할경우 다음과 같이 사용합니다.

사용자 삽입 이미지



function window.confirm(str) {
 execscript('n = msgbox("'+str+'","4132")',"vbscript");
 return(n == 6);
}
if(confirm("위탁에 대한 동의를 하시겠습니까?")) {
 alert('동의 하셨습니다.');
}

※ IE 전용 기능 입니다.

자바스크립트 마우스 따라 다니는 이미지 2탄

웹프로그램
마우스 커서가 움지는 위치를 따라 다니는 이미지 기능을 앞전에 올렸는데 문제점이 스크롤을 내려 버리면 좌표값이 이상해지는 문제를 발견해서 스크롤시엔 스크롤에의한 이동된 좌표값을 추가하도록 했습니다.

사용자 삽입 이미지


<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;">
<img src="http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg">
</div>
<script>
function Move1(e) {
 document.cs.left=e.pageX + 10;
 document.cs.top=e.pageY + 10;
}
function Move2(){
 cs.style.left=event.clientX + document.body.scrollLeft;
 cs.style.top=event.clientY + document.body.scrollTop;
}
if (document.layers) {
 document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove=Move1;
}
if (document.all) {document.onmousemove=Move2;}
function Show_icon(divid) {
  cs.style.visibility = "visible";
}
function Hide_icon(divid) {
  cs.style.visibility = "hidden";
}
</script>
<img src="http://photo-media.daum-img.net/200904/15/mediadaum/20090415114211.511.jpg"  onmouseover="Show_icon()" onmouseout="Hide_icon()">

자바스크립트 기초 기능 부터 활용할 수 있는 기능을 예제로 보여줌

웹프로그램
자바스크립트 기초 기능 부터 활용할 수 있는 기능들을 예제로 보여줍니다.
해당 소스를 보고 싶으면 예제 페이지에서 마우스 우측 버튼 클릭후 소스 보기 하세요!

번호

예  제      소   스

 구분

적용 환경

1

  경고 메시지 표시하기

Message

Box


2

  프롬프트 박스로 패스워드 만들기

 

3

  Confirm 박스로 해당 페이지 표시하기

 

4

  웹 문서 나갈 때 감사 메시지 뛰우기

 

5

  시작페이지로 지정하기

 

6

  자동으로 즐겨찾기에 추가하기

 

7

  새로운 윈도우 자동으로 열기

Window


8

  클릭했을 때 새로운 윈도우 열기

 

9

  지정한 위치에 새로운 윈도우 열기

 

10

  리모콘 윈도우 만들기

 

11

  5초 후 자동으로 닫히는 윈도우

 

12

  자동으로 웹 문서 새로 고치기

 

13

  윈도주가 흔들리는 진동 효과주기

 

14

  윈도우를 자동으로 스크롤하기

 

15

  풀 스크린으로 윈도우 열기(종료: ALT + F4)


16

  채널모드로 윈도우 열기

 

17

  모달 다이얼로그 박스 열기

 

18

  팝업 윈도우가 점점 커지며 나타나는 효과

 

19

  출력을 위한 인쇄 버튼 만들기

 

20

  웹 문서에 문자열 찾는 기능 추가하기

 

21

  자바스크립트 디버깅 창

 

22

  배경색과 글자 색상 바꾸기

Document


23

  페이드 인(Fade in) 효과주기

 

24

  낮과 밤에 따라 바뀌는 배경 만들기

 

25

  마지막으로 수정한 시간 표시하기

 

26

  타이틀 바에 실시간 표시하기

 

27

  로컬디스크에서 문서 읽기 금지

 

28

  로딩(Loading)되는 장면 만들기

 

29

  다이나믹한 풍선 도움말 만들기

 

30

  DHTML로 다이나믹한 메뉴 만들기

 

31

  롤오버 이미지 1

Image


32

  롤오버 이지지 2

 

33

  롤오버 이미지로 선택 메뉴 표시하기

 

34

  링크 앞에 화살표 표시하기

 

35

  클릭하는 순간 다른 이미지로 바꾸기

 

36

  링크된 그림에 생기는 점선 없애기

 

37

  웹 문서에 이미지 뷰어 만들기 1

 

38

  웹 문서에 이미지 뷰어 만들기 2

 

39

  이미지가 바뀌는 슬라이드 효과주기

 

40

  이미지가 호수에 비치는 효과

 

41

  오버랩되면 타나나는 슬라이드 효과

 

42

  스크롤 바를 움직여도 고정되어 있는 이미지

 

43

  추천 사이트 랜덤으로 꾸미기

Link


44

  웹 문서 소스 보여주기

 

45

  히스토리 목록에 흔적 남기지 않기

 

46

  자동으로 메일 제목과 내용 입력시키기

 

47

  하이퍼텍스트에 형광펜 효과 주기

 

48

  롤오버된 하이퍼텍스트의 크기와 색 바꾸기

 

49

  한꺼번에 두 개의 프레임 내용 바꾸기

Frame


50

  다른 사이트의 프레임 잔재 없애기

 

51

  펼쳐지고 접혀지는 프레임 만들기

 

52

  IFRAME 내에 있는 문서 바꾸기

 

53

  웹 문서에 주소 입력란 넣기

Form


54

  메일 방명록 만들기

 

55

  사용자 입력의 타당성 검사하기

 

56

  라디오 버튼을 이용한 문제 풀이

 

57

  ID와 비밀번호의 타당성 검사하기

 

58

  한글 입력만 허용하는 폼문서

 

59

  숫자 입력만 허용하는 폼문서

 

60

  주민등록 번호 타당성 검사

 

61

  필수입력사항 타당성 검사

 

62

  다른사이트로 이동하는 선택 목록 만들기

 

63

  선택 목록에 이동 버튼 만들기

 

64

  선택된 URL을 다른 프레임에 출력하기

 

65

  폼 안의 글자에 타이핑 효과 주기

 

66

  폼 안에 글자 스크롤 시키기

 

67

  웹 문서에 FTP 접속 기능 추가하기

 

68

  선택된 항목에 따라 다른 선택 목록 만들기

 

69

  화면 해상도에 적합한 페이지 출력하기

Browser


70

  브라우저에 적합한 페이지 출력하기

 

71

  사용자 IP주소 나타내기

 

72

  상태 표시줄에 링크에 대한 설명 표시하기

Status


73

  상태 표시줄에 타이프 치듯 글자 출력하기

 

74

  상태 표시줄에 스크롤디는 글자 제어하기

 

75

  앞으로 가기, 뒤로 가기 버튼 만들기

History


76

  이전에 입력한 내용 기억하기

 

77

  방문 유무에 따른 다른 환영 메시지

 

78

  방문자의 방문 횟수 표시하기

 

79

  방문 횟수와 마지막 방문시간 표시하기

 

80

  공지 화면 처음 한번만 띄우기

 

81

  사용자의 선택에 따라 공지 창 열기

 

82

  현재 시간 표시하기

Time


83

  현재 시간과 날짜 표시하기

 

84

  텍스트 입력란에 현재 시간 표시하기

 

85

  문서 내에 현재 시간 표시하기

 

86

  이미지로 현재 시간 표시하기

 

87

  그림자가 비치는 시계 표시하기 1

 

88

  그림자가 비치는 시계 표시하기 2

 

89

  Data 객체로 달력 만들기

 

90

  특정일까지 남은 날짜 카운트다운하기

 

91

  사이트에 머무른 시간 표시하기

 

92

  마우스 오른쪽 버튼 사용 금지시키기

마우스

&

키보드


93

  GIP 이미지가 마우스를 따라 다니는 효과

 

94

  물결치면 마우스를 따라 다니는 글자

 

95

  물결치며 마우스를 따라다니는 이미지

 

96

  자신만의 팝업 메뉴 만들기

 

97

 지정된 사이트로 이동하는 단축키 정의하기

 

98

  접속할 때마다 다를 배경 음악 들려주기

Sound


99

  사용자가 선택한 음악 들려주기

 

100

  배경 음악을 순차적으로 들려주기

 

101

  배경 음악 무작위로 연속해서 들려주기

 

102

  링크에 마우스 대면 소리나는 사운드 효과 주기

 

103

  체계적인 트리(Tree) 메뉴 만들기

기타


104

  마우스 대면 타나나는 슬라이딩 메뉴

 

105

  웹 문서에 계산기 기능 추가하기

 

106

  마키(Marquee)기능 제어하기

 

107

  링크에 패스워드 걸어두기

 

108

  웹문서에 검색엔진 기능 추가하기

 

109

  카운트다운 후 다른 문서로 이동하기

 

 110

 자신의 홈페이지를 요일마다 변경을

 

 

111

 실시간 뉴스

 

 

112

 일기 예보

 

 

113

 우편번호 검색

 

 

114

 음악소스(bgm)

 

 

115

 전화기 멜로디

 

 

 116

 이미지 필터효과

 

 

117

 마우스를 대면 색상이 바뀌는 태그

 

 

118

 우주전광판

 

 

119

 팝업 광고창 제거

 

 

120

 연속해서 다른 음악으로 이어지는 스크립트

 

 

121

 애플랫 배너

 

 

 122

 요일 (날짜) 태그

 

 

 123

 공지사항창 1

 

 

 124

 공지사항창 2

 

 

 125

 메일창

 

 

126

공지사항창 3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

자바스크립트 마우스 따라 다니는 이미지

웹프로그램
이미지 위에 마우스를 올려 놓으면 이뿐 아이콘이 나타 나며 마우스가 돌아 다닐때 같이 따라 다니도록 하며 이미지 영역을 마우스가 벗어나면 따라다니던 마우스가 사라지게 하는 효과

사용자 삽입 이미지
<div id=cs style="visibility:hidden;position:absolute;left:10;top:10;width:125;height:35;background-Image:url('http://amsimg.daum-img.net/www2/0Cbw/cJcd/samsung_bs_12535_0415_.jpg');"></div>
<script>
document.onmousemove=function () {
 cs.style.pixelLeft=event.x+10;
 cs.style.pixelTop=event.y+5;
}
function Show_icon(divid) {
  cs.style.visibility = "visible";
}
function Hide_icon(divid) {
  cs.style.visibility = "hidden";
}
</script>
<img src="http://photo-media.daum-img.net/200904/15/mediadaum/20090415114211.511.jpg"  onmouseover="Show_icon()" onmouseout="Hide_icon()">


위소스에서 width, height 는 따라 다니는 이미지의 크기를 지정 합니다.
event.x+10, event.y+10  에서 + 값을 증가 할수록  만큼 따라 다니는 이미지가 마우스 커서에서 멀어집니다.

위 글은 세이박스에서 작성한 글입니다.

[자바스크립트] 뉴스 속보 한줄로 타자치듯이 보여주는 기능!

웹프로그램

<style>
body,table,td
{
 font-size:12px;
 font-family:굴림;
}
select,input,textarea
{
 font-size:12px;
 font-family:돋움;
}
img
{
 border : 0;
}
a:link { color:#333333; text-decoration: none;}
a:visited { color:#333333; text-decoration: none;}
a:hover { color: #3366cc; text-decoration: underline; }
a:active { color: #333333; text-decoration: none;}

.Stitle
{
 font-family:돋움;
 color:white;
 font-weight:bold;
 font-size:14px;
 cursor:pointer;
 text-decoration:none;
}
</style>
<script language="javascript">
var i_mes=0;
var message=new Array();
var messagelink=new Array();
var linktarget=new Array();
var fnt=new Array();
var fntsize=new Array();
var fntcolor=new Array();
var fntcolorlastletter=new Array();

message[i_mes]="‘꿈의직업’ 50인 후보 맹지나, 김범 사촌누나로 밝혀져 ‘화제’";
messagelink[i_mes]="http://www.gooddaysports.co.kr/news/?bset=view&cset=star&tot_code=49&code=5592";
linktarget[i_mes]="_self"
fnt[i_mes]="돋음"
fntsize[i_mes]="11px"
fntcolor[i_mes]="#404040";
fntcolorlastletter[i_mes]="#404040";
i_mes++;
message[i_mes]="박지성 역전골 어시스트로 팀 승리 ‘견인’";
messagelink[i_mes]="http://www.gooddaysports.co.kr/news/?bset=view&cset=sports&tot_code=514&code=3066";
linktarget[i_mes]="_self"
fnt[i_mes]="돋음"
fntsize[i_mes]="11px"
fntcolor[i_mes]="#404040";
fntcolorlastletter[i_mes]="#404040";
i_mes++;
message[i_mes]="김범사촌누나 맹지나 ‘꿈의직업’ 후보 50인에 선정!";
messagelink[i_mes]="http://www.gooddaysports.co.kr/news/?bset=view&cset=star&tot_code=47&code=3977";
linktarget[i_mes]="_self"
fnt[i_mes]="돋음"
fntsize[i_mes]="11px"
fntcolor[i_mes]="#404040";
fntcolorlastletter[i_mes]="#404040";
i_mes++;

var standstill=3000; // 타이핑을 완료한 후 글자가 보여지는 시간 (2000 = 2초)
var tickerwidth=500; // 타이핑 되는 부분의 가로크기
var tickerheight=11; // 타이핑 되는 부분의 세로크기
var speed=20; // 타이핑 되는 속도 - 낮을수록 빠르다
var speed_1st=10; // 타이핑 되는 속도 - 낮을수록 빠르다

var i_substring=0;
var i_presubstring=0;
var i_message=0;
var messagecontent="";
var messagebackground="";
var messagepresubstring="";
var messageaftersubstring="";

function initiateticker() {
 if (document.all) {
  donganews();
 }
 if (document.layers) {
  donganews();
 }
}

var win= null;
function NewWindow(mypage,myname,w,h,scroll){
 var winl = (screen.width-w)/2;
 var wint = (screen.height-h)/2;
 var settings ='height='+h+',';
 settings +='width='+w+',';
 settings +='top='+wint+',';
 settings +='left='+winl+',';
 settings +='scrollbars='+scroll+',';
 settings +='resizable=yes';
 win=window.open(mypage,myname,settings);
 if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
}


function getmessagecontent() {
 messagepresubstring=message[i_message].substring(0,i_presubstring);
 messageaftersubstring=message[i_message].substring(i_presubstring,i_substring);
 messagecontent="<table border=0 cellpadding=0 width="+tickerwidth+" height="+tickerheight+"><tr valign=top><td>";
 messagecontent+="<span style='position:relative; font-family:"+fnt[i_message]+";color:"+fntcolor[i_message]+";font-size:"+fntsize[i_message]+"pt;'>";
 messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>";
 messagecontent+="<font color='"+fntcolor[i_message]+"'>";
 messagecontent+=messagepresubstring;
 messagecontent+="</font>";
 messagecontent+="</a>";
 messagecontent+="</span>";
 messagecontent+="<span style='position:relative; font-family:"+fnt[i_message]+";color:"+fntcolorlastletter[i_message]+";font-size:"+fntsize[i_message]+"pt'>";
 messagecontent+="<a href='"+messagelink[i_message]+"'  onclick='NewWindow(this.href,name,850,570,yes);return false'>";
 messagecontent+="<font color='"+fntcolorlastletter[i_message]+"'>";
 messagecontent+=messageaftersubstring;
 messagecontent+="</font>";
 messagecontent+="</a>";
 messagecontent+="</span>";
 messagecontent+="</td></tr></table>";
}

function donganews() {
 if (i_substring<=message[i_message].length-1) {
  i_substring++
  i_presubstring=i_substring-1
  if (i_presubstring<0) {i_presubstring00}
  getmessagecontent()
  if (document.all) {
   ticker.innerHTML=messagecontent
   if(i_substring == 1) var timer=setTimeout("donganews()", speed_1st)
   else var timer=setTimeout("donganews()", speed)
  }
  if (document.layers) {
   document.tickerroof.document.ticker.document.write(messagecontent)
   document.tickerroof.document.ticker.document.close()
   var timer=setTimeout("donganews()", speed)
  }
 } else {
  clearTimeout(timer)
  var timer=setTimeout("changemessage()", standstill)
 }
}

function changemessage() {
 i_substring=0
 i_presubstring=0
 i_message++
 if(i_message>message.length-1) {
  i_message=0
 }
 donganews()
}


if (document.all) {
 document.write('<span ID="tickerroof" style="position:relative;width:'+tickerwidth+'px;height:'+tickerheight+'px;">');
 document.write('<span ID="ticker" style="position:absolute;top:0px;left0px"></span>');
 document.write('</span>');
}
if (document.layers) {
 document.write('<ilayer name="tickerroof" height="'+tickerheight+'" width="'+tickerwidth+'">');
 document.write('<layer name="ticker" top=0 left=0"></layer>');
 document.write('</ilayer>');
 document.close();
}

window.onload=initiateticker;
window.onresize=initiateticker;
</script>

자바스크립트 함수 체크

웹프로그램

자바스크립트에서 함수를 호출할 때 실수로 해당 함수를 기입 안한채 코딩시 오류가 발생하는 경우를 미연에 방지 하기 위한 방법.

typeof(체크할 함수) 로 체크했을 때 "undefined"라고 디턴값을 받으면 함수가 문제가 없는것으로 판단하여 함수 호출을 하지 않으므로 스크립트 오류를 예방할 수 있다.

예)
<script>
function test() {
  alert("테스트");
}

if(typeof(test()) != "undefined") test();
</script>

결과 : 테스트 메시지 출력


<script>
if(typeof(test()) != "undefined") test();
</script>

결과 : 아무처리 안함

[자바스크립트] 한글 처리

웹프로그램
 <script>
str = "test한글";
check = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/;
if(check.test(str)) alert("한글이 있습니다.");
</script>
 
입력창에 한글 만써지게.. 
아래는 자바스크립트를 이용한 한글체크 소스입니다..
아래의 코드를 이용하면 영문상태에서는 글씨가 써지지 않습니다.
<script language='javascript-x'>
function hangul() {
  if((event.keyCode < 12592) || (event.keyCode > 12687))
  event.returnValue = false
}
</script>
<input type="text" name="Name" size="10" maxlength="15" class=ad omKeyPress="hangul();">

자바스크립트 <a href 클릭시 팝업 띄우기 및 클릭한 URL 값 받아오기

웹프로그램
사용자가 <a href="">링크</a> 로 된 링크를 클릭시 이동하고자 하는 URL을 알아내거나 클릭한 페이지로 이동하기전 자신이 원하는 행동을 하고자 할때 다음과 같이 사용자 이벤트 메시지를 잡아 낼 수 있다.

다음 소스는 사용자가 링크를 클릭시 자신이 원하는 곳으로 새창을 띄운뒤 다시 부모창으로 포커스를 이동한다음 원래 클릭해서 이동하고자 한 곳을 보여주는 내용 입니다.
목적은 홈페이지 모든 소스에 클릭시 원하는 곳으로 띄운뒤 새로운 창을 띄워야 하는 기능을 추가할려고 하다 보니 아래와 같이 구현하게 되었음.
이렇게 해서 굳이 사이트 코딩을 일일이 변경 해주지 않아도 원하는 영역에 이벤트 기능을 넣을수 있음.

<html>
<script language="JavaScript">
function linkclick() {
 var e = arguments[0] || event;
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
  window.open("새창 URL","_blank"); //팝업을 새창으로 띄우기 이외에도 원하는 이벤트처리
  window.focus(); //새창이 뜬뒤 포커스를 다시 본창으로 오도록 처리
 }
}
</script>
<body onClick="linkclick()">
<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>
</body>
</html>

참고: 간혹 포커스가 다시 부모창으로 안돌아올 경우 새창 페이지에도 다음과 같이 추가해주면 확실하게 포커스가 돌아온다.
<html>
<body onLoad="opener.focus()">
</body>
</html>

위 기능을 응용하면 마우스를 스크롤 움직인다던지 특정 <input 박스를 클릭한다던지 어떠한 사용자 액션이라도 감지 하여 원하는 이벤트를 실행할 수 있습니다.
위 와 같은 기능으로 로그를 잡고자 할때에도 유용하게 쓰이겠죠.
페이지중에서 사용자가 어디를 클릭하는지 감지 하고자 할때

 if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
  alert(target);
 }

위 소스의 target은 사용자가 클릭한 URL을 담고 있으므로 target정보를 저장할 수 있으니 접속자 패턴을 분석하는데 용이할듯.
아마도 통계 분석해주는 사이트에서 보통 스크립트 한줄 삽입하는데 이와 같은 원리로 로그를 잡는것 같다. ^^

위 글은 세이박스에서 직접 작성한 것으로 퍼가실 경우 반드시 출처와 함께 남기시길 바랍니다.
출처 : 세이박스 http://saybox.tistory.com/468

PHP 처리후 페이지 이동 하는 방법들

웹프로그램
1. 메타 이동 방식
<?
echo "<meta http-qequiv='refresh' content='0; url=http://도메인'>";
?>
 
0; <- 지연시간을 설정 할 수 있습니다.
 
2. 자바스크립트 방식
<?
echo "<script-x>document.location.href='도메인';</script-x>
?>
 
document. 대신 window. 사용 가능합니다.
 
3. PHP 헤드 사용
<?
header("Location: 도메인");
?>
 
이 방식의 단점이자 장점은 사용자 메시지를 보여 줄 수 없다는 것입니다.
장점으론 사용자의 브라우저와 처리와 상관없이 이동하므로 확실하게 이동시키는 방법 인듯 합니다.
 
어쨌던 자신에게 편리한 방법으로 이용 하시면 될 듯 합니다.

자바스크립트 select 셀렉트 박스 선택한 값을 받아오기

웹프로그램

ff.bg.options[bg_frm.bg.selectedIndex].value;
ff -> 폼 이름
bg -> 셀렉트박스 이름

<script>
function bg_preview() {
 var ff = document.bg_frm;
 var url = ff.bg.options[bg_frm.bg.selectedIndex].value;
 alert(url);
}
</script>

<from name="bg_frm">
 <select name="bg" id="bg">
  <option value="1">1</option>
  <option value="2">2</option>
 </select>
</form>