목록자바스크립트 (23)
세이박스
node.js 첫 관문인 hello world 출력하는 것으로 시작하게 된다. 그런데, 뜻하지 않게 undefined 메시지를 만나게 된다. 당황하지 말고 아래 설정 옵션을 true 실행해 준다. module.exports.repl.ignoreUndefined = true; 끝, 드이상 해당 메시지는 나타나지 않는다. ^^; [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=nodejs&wr_id=8
롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다. [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=193
다음 카페 대문에 광고 삽입되는것을 보고서 어떻게 구현하는 것일까? 고민하다가 소스를 보니 자바스크립트를 이용하고 있더군요. 일단, 다음 카페 설정에서 대문 설정이 있는데 html 모드로 설정 하시면 태그를 입력 할 수 있습니다. 하지만, 태그는 사용할수 없도록 차단하고 있습니다. 차단 방법이 iframe 단어로 차단하고 있으므로 ifr ame 을 분리 하면됩니다. 하지만 이렇게 태그를 분리하면 iframe 동작을 못하게 됩니다. 따라서, 자바스크립트의 document.write() 를 이용해서 출력해주면 됩니다. 위 소스처럼 "
쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다. 먼저 예제 이미지는 총 4장 입니다. 현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다. 1. 이미지 넘버 이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다. 이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다. "num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다. 2. 대표 이미지 출력 기본적으로 출력된 첫번째 이미지를 적용 합니다. img 태그에 id값을 "mainImage"로 적용합니다. 3. 자바스크립트 소스 자바스크립트 내부..
고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다. 이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다. 1. 자바스크립트 소스 2. 테이블 소스 질문1 답변1 질문2 답변2 질문3 답변3 3. 소스 설명 : 제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다. 이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다. 먼저 모든 질문을 숨기기 처리합니다. 1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 ..
input 입력시 한글 입력을 style로 막을수도 있지만 자바스크립트로도 막을수 있습니다. 또는 반대로 한글만 입력하도록 적용할 수도 있습니다. 1. 스타일 style='ime-mode:disabled' 2. 자바스크립트 function NumberChk(){ if ((event.keyCode57)) { event.returnValue = false; return false; }else{ return true; } } 3. 적용예 4. 한글만 입력하도록 자바스크립트 함수 수정 function NumberChk() { if(event.keyCode=="") { event.returnValue = false; return false; }else{ return true; } } ▶ 최신영화, 최신 미국드라마..
엠게임 (mgame.com) 사이트 접속하면 우측 하단에 스르륵 광고가 올라 오는 것을 볼 수 있습니다. 이와 같은 광고 방식을 토스트 Toast 배너 광고 방식 이라고 합니다. 세이박스에도 구현되어 있으니 참고 하시기 바랍니다. 엠게임의 경우 보여주고 사라지는 동작만 자바스크립트로 구현하고 슬라이딩 효과는 플래시로 구현 했더군요. 하지만, 일일이 플래시에서 슬라이딩 효과를 줄려면 광고가 바뀔때 마다 적용해야하니 번거롭겠죠! 따라서, 플래시가 되었던 이미지가 되었던 어떤 내용이던지 슬라이딩 효과를 내도록 적용 해 봤습니다. 그리고, 닫기 기능도 간단하게 추가 해놨습니다. 먼저, 표시될 광고 html 소스 예제 입니다. ...... [닫기] 위 HTML 소스에서 수정할 부분은 "광고영역"에 배너 이미지 또..
자바스크립트로 사용자가 입력한 숫자에 천단위로 콤마를 삽입 하고자 하거나 빼고 싶을때 필요한 함수 입니다. 예를들어 입력된 값이 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) { ret..
자바스크립트에서 문자를 자르거나 분리하기 위한 방법 입니다. 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"; ..
자바스크립트(javascript)에서 팝업 띄우기를 실패 할 경우 alert 메시지로 팝업차단을 변경 할 것을 요청하는 방법 팝업을 해지 해야만 서비스 가능한 경우 위와 같이 처리 하면 가능할 것 같습니다. [출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=114
팝업을 띄울 때 하이퍼링크 테그를 사용하지 않고 이미지에 바로 적용하고 싶을 때 다음과 같이 처리 할 수 있습니다. 각 항목 별로 설명 하겠습니다. src : 이미지 경로 입니다. style : 이미지에 대한 스타일 지정 - border : 이미지의 테두리 선을 보이지 않게 하기 위해서 두께를 0 (픽셀)을 줬습니다. - cursor : 하이퍼 링크 테그가 적용되지 않아 이미지에 마우스를 올려 놓을 때 아무런 반응이 없으면 링크가 걸려 있는지 확인이 안되겠죠. 따라서, 이미지에 마우스가 올라 올때 손가락 모양으로 표시되도록 마우스 포인터 모양을 "pointer"로 적용 했습니다. onClick : 이미지를 클릭시 발생하는 이벤트로 자바스크립트 바로 입력 가능합니다. - window.open() : 자바스..
대부분 팝업을 띄워서 필요한 부분을 다시 읽어 들여서 출력을 많이 하는데 출력을 위해서 페이지를 추가로 만들어야 하는 번거로움이 생긴다. 이럴 경우 자바스크립트로 특정 부분을 지정하여 출력할 수 있다. 출력할 내용 테이블이 될수도 이미지가 될 수도 어떤 내용이든 출력 이영역 안에 내용만 출력 위 소스처럼 굵게 입력한 id 값 이후 내용을 출력하게 됩니다. 따라서, div를 이용할 경우 내용 처럼 적용하실 수도 있습니다. 출력할때만 추가적으로 내용을 넣고 싶다면 script에서 document.write를 추가하시면 됩니다. 응용해서 적용해 보시기 바랍니다. ^^ 위 글은 세이박스에서 작성한 글이므로 가져 가실 때 출처 남겨 주세요! ㅋㅋ
input을 name 값을 배열로 반복해서 값을 담은뒤 자바스크립트에서 값을 불러 오기 위해서는 elements[] 를 이용하면 됩니다. var b = document.list1.elements["a["+num+"]"].value; num은 input 의 배열값입니다. num = 0 => 111 num = 1 => 222 값이 되겠죠.
자바스크립트에서 cofirm() 을 사용할 경우 OK, CANCEL, 확인, 취소 로 나오는 버튼을 Yes, No 로 변경하고자 할경우 다음과 같이 사용합니다. function window.confirm(str) { execscript('n = msgbox("'+str+'","4132")',"vbscript"); return(n == 6); } if(confirm("위탁에 대한 동의를 하시겠습니까?")) { alert('동의 하셨습니다.'); } ※ IE 전용 기능 입니다. [출처] 유포유 - http://www.uforu.net/bbs/board.php?bo_table=board05&wr_id=97
마우스 커서가 움지는 위치를 따라 다니는 이미지 기능을 앞전에 올렸는데 문제점이 스크롤을 내려 버리면 좌표값이 이상해지는 문제를 발견해서 스크롤시엔 스크롤에의한 이동된 좌표값을 추가하도록 했습니다. [출처] 유포유 - http://www.uforu.net/bbs/board.php?bo_table=board05&wr_id=88
자바스크립트 기초 기능 부터 활용할 수 있는 기능들을 예제로 보여줍니다. 해당 소스를 보고 싶으면 예제 페이지에서 마우스 우측 버튼 클릭후 소스 보기 하세요! 번호 예 제 소 스 구분 적용 환경 1 경고 메시지 표시하기 Message Box 2 프롬프트 박스로 패스워드 만들기 3 Confirm 박스로 해당 페이지 표시하기 4 웹 문서 나갈 때 감사 메시지 뛰우기 5 시작페이지로 지정하기 6 자동으로 즐겨찾기에 추가하기 7 새로운 윈도우 자동으로 열기 Window 8 클릭했을 때 새로운 윈도우 열기 9 지정한 위치에 새로운 윈도우 열기 10 리모콘 윈도우 만들기 11 5초 후 자동으로 닫히는 윈도우 12 자동으로 웹 문서 새로 고치기 13 윈도주가 흔들리는 진동 효과주기 14 윈도우를 자동으로 스크롤하기 ..
이미지 위에 마우스를 올려 놓으면 이뿐 아이콘이 나타 나며 마우스가 돌아 다닐때 같이 따라 다니도록 하며 이미지 영역을 마우스가 벗어나면 따라다니던 마우스가 사라지게 하는 효과 위소스에서 width, height 는 따라 다니는 이미지의 크기를 지정 합니다. event.x+10, event.y+10 에서 + 값을 증가 할수록 만큼 따라 다니는 이미지가 마우스 커서에서 멀어집니다. 위 글은 세이박스에서 작성한 글입니다.
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; c..
자바스크립트에서 함수를 호출할 때 실수로 해당 함수를 기입 안한채 코딩시 오류가 발생하는 경우를 미연에 방지 하기 위한 방법. typeof(체크할 함수) 로 체크했을 때 "undefined"라고 디턴값을 받으면 함수가 문제가 없는것으로 판단하여 함수 호출을 하지 않으므로 스크립트 오류를 예방할 수 있다. 예) 결과 : 테스트 메시지 출력 결과 : 아무처리 안함
입력창에 한글 만써지게.. 아래는 자바스크립트를 이용한 한글체크 소스입니다.. 아래의 코드를 이용하면 영문상태에서는 글씨가 써지지 않습니다.
사용자가 링크 로 된 링크를 클릭시 이동하고자 하는 URL을 알아내거나 클릭한 페이지로 이동하기전 자신이 원하는 행동을 하고자 할때 다음과 같이 사용자 이벤트 메시지를 잡아 낼 수 있다. 다음 소스는 사용자가 링크를 클릭시 자신이 원하는 곳으로 새창을 띄운뒤 다시 부모창으로 포커스를 이동한다음 원래 클릭해서 이동하고자 한 곳을 보여주는 내용 입니다. 목적은 홈페이지 모든 소스에 클릭시 원하는 곳으로 띄운뒤 새로운 창을 띄워야 하는 기능을 추가할려고 하다 보니 아래와 같이 구현하게 되었음. 이렇게 해서 굳이 사이트 코딩을 일일이 변경 해주지 않아도 원하는 영역에 이벤트 기능을 넣을수 있음. a b c 참고: 간혹 포커스가 다시 부모창으로 안돌아올 경우 새창 페이지에도 다음과 같이 추가해주면 확실하게 포커스..
1. 메타 이동 방식