<script>
function trans_han(sour, targ){
s = document.getElementsByName(sour)[0].value;
t = document.getElementById(targ);
if(s.length > 16){
t.innerHTML = '숫자가 너무 큽니다';
return;
} else if(isNaN(s)){
t.innerHTML = '숫자가 아닙니다';
return;
}
b1 = ' 일이삼사오육칠팔구';
b2 = '천백십조천백십억천백십만천백십원';
tmp = '';
cnt = 0;
while(s != ''){
cnt++;
tmp1 = b1.substring(s.substring(s.length-1,s.length), Number(s.substring(s.length-1,s.length))+1); // 숫자
tmp2 = b2.substring(b2.length-1,b2.length); // 단위
if(tmp1==' '){ // 숫자가 0일때
if(cnt%4 == 1){ // 4자리로 끊어 조,억,만,원 단위일때만 붙여줌
tmp = tmp2 + tmp;
}
} else{
if(tmp1 == '일' && cnt%4 != 1){ // 단위가 조,억,만,원일때만 숫자가 일을 붙여주고 나머지는 생략 ex) 삼백일십만=> 삼백십만
tmp = tmp2 + tmp;
} else{
tmp = tmp1 + tmp2 + tmp; // 그외에는 단위와 숫자 모두 붙여줌
}
}
b2 = b2.substring(0, b2.length-1);
s = s.substring(0, s.length-1);
}
tmp = tmp.replace('억만','억').replace('조억','조'); // 조,억,만,원 단위는 모두 붙였기 때문에 필요없는 단위 제거
t.innerHTML = tmp;
}
</script>
<input type='text' name='price' size='15' maxlength='16' onkeyup="trans_han(this.name,'trans_price');" /> <span id='trans_price'></span>
Search Results for '프로그래밍/자바 스크립트'
100 posts related to '프로그래밍/자바 스크립트'
- 2011/09/21 금액을 한글로 표기 해주는 스크립트
- 2011/09/07 Javascript 예약어 1
- 2011/09/07 Javascript 에서 PHP 함수 사용
- 2011/03/06 iframe 높이 자동조절 스크립트
- 2011/01/27 JavaScript 웹 브라우저 버전 체크 및 Javascript 버젼 체크
- 2011/01/27 input type file 버튼 모양변경
- 2010/09/02 숫자에 컴마(,) 쓰고 한글로 숫자 표시
- 2010/08/18 pause 함수
- 2010/08/18 자바스크립트 팁 (고급 팁)
- 2010/08/18 [TIP] 퀵메뉴 스크립트
- 2010/06/07 엔터치면 다음칸으로 이동.
- 2010/06/07 아이피 주소인지 아닌지 체크하는 함수
- 2010/06/07 상태표시줄 링크 없애기
- 2010/06/01 iframe resize 함수
- 2010/06/01 구글맵처럼 큰 이미지를 분할해서 보는 자바스크립트
- 2010/04/08 [스크립트] 스크립트 한 줄로 IE6 죽이기
- 2010/03/18 상태표시줄 링크 없애기
- 2010/03/14 JavaScript - 외부 이미지 크기 구하기
- 2010/02/11 JavaScript Table Sorter
- 2009/08/27 [javascript]웹 브라우저 버전확인
- 2009/08/17 내 컴퓨터에 있는 사진보기..[소스]
- 2009/08/01 자주쓰는 자바스크립트 함수 모음
- 2009/08/01 자바스크립트 시간,날짜 계산
- 2009/08/01 자바스크립트 아날로그 시계 소스
- 2009/08/01 자바스크립트 폼 리셋
- 2009/07/16 금액을 한글로 표기 해주는 스크립트;
- 2009/05/04 [스크립트] 마우스 오른쪽클릭방지 해제 스크립트
- 2009/04/21 Trim 공백제거
- 2009/04/21 경고없이 창닫기
- 2009/04/16 자바스크립트 라이브러리 Jquery 플러그인
Javascript 예약어
Java keyword (Javascript 예약됨)
ECMAScript 예약어
그외 예약어
break continue do for import new this void case default else function in return typeof while comment delete export if label switch var with
Java keyword (Javascript 예약됨)
abstract implements protected boolean instanceOf public byte int short char interface static double long synchronized false native throws final null transient float package true goto private
ECMAScript 예약어
catch enum throw class extends try const finally debugger super
그외 예약어
alert eval Link outerHeight scrollTo Anchor FileUpload location outerWidth Select Area find Location Packages self arguments focus locationbar pageXoffset setInterval Array Form Math pageYoffset setTimeout assign Frame menubar parent status blur frames MimeType parseFloat statusbar Boolean Function moveBy parseInt stop Button getClass moveTo Password String callee Hidden name personalbar Submit caller history NaN Plugin sun captureEvents History navigate print taint Checkbox home navigator prompt Text clearInterval Image Navigator prototype Textarea clearTimeout Infinity netscape Radio toolbar close innerHeight Number ref top closed innerWidth Object RegExp toString confirm isFinite onBlur releaseEvents unescape constructor isNan onError Reset untaint Date java onFocus resizeBy unwatch defaultStatus JavaArray onLoad resizeTo valueOf document JavaClass onUnload routeEvent watch Document JavaObject open scroll window Element JavaPackage opener scrollbars Window escape length Option scrollBy
출처 : http://www.quackit.com/javascript/javascript_reserved_words.cfm
출처 : http://www.quackit.com/javascript/javascript_reserved_words.cfm
Javascript 에서 PHP 함수 사용
Javascript 에서 PHP에서 많이 사용되는 함수를 사용하고자 할때 함수를 다시 만들거나 , 또는 PHP에서 출력을 한후에 Javascript 에서 사용할수 있도록 변수 등에 저장한 후 사용을 합니다. 기본적인 함수를 일일이 만들거나 또는 PHP에서 출력을 하지 않고 바로 PHP의 유용한 함수들을 사용할수 있는 PHP.js 프로젝트가 있습니다. 많은 브라우저에서 동일하게 동작을 하고 사용방법또한 손쉽게 사용가능합니다.PHP.js (http://www.phpjs.org)
PHP.js 지원 함수 리스트
Function overview (http://phpjs.org/functions/index)
<script language='javascript'>
<!--
function changeHeight() {
//아이프레임 안쪽 페이지 높이를 먼저구하신후
var the_height=document.getElementById('content').contentWindow.document.body.scrollHeight;
// 아이프레임 높이를 바꿔주시면 됩니다.
document.getElementById('content').height=the_height; }
//-->
</script>
<iframe id='content'
frameborder=0
width=100%
scrolling=no
onLoad="changeHeight();"
src='content.php'>
</iframe>
<!--
function changeHeight() {
//아이프레임 안쪽 페이지 높이를 먼저구하신후
var the_height=document.getElementById('content').contentWindow.document.body.scrollHeight;
// 아이프레임 높이를 바꿔주시면 됩니다.
document.getElementById('content').height=the_height; }
//-->
</script>
<iframe id='content'
frameborder=0
width=100%
scrolling=no
onLoad="changeHeight();"
src='content.php'>
</iframe>
1. 자바스크립트란?
- 자바스크립트는 선마이크로시스템즈(Sun Micro Systems)와 넷스케이프에서 공동으로 개발한 스크립트 언어
- 자바스크립트 정적인 HTML 문서를 동적을 만드는 것
스크립트 언어 : 컴퓨터 프로세서가 아닌 다른 프로그램에 의해서 변역이 되거나 수행되어지는 프로그램의 명령어를 말한다.
2. 자바스크립트의 특징
- 자바스크립트는 인터프리팅 언어
- 데이터 타입에 구애 받지 않음
- 대소문자 구별
- 객체지향스크립트 언어
3. 자바스크립트 기본 문법
- javascript문법 직접 입력
<Head>
<script language="javascript">
<!--
스크립트 문법
//-->
</script>
</Head>
예
<html>
<head>
<title>소스1-1</title>
<script>
document.write("<h3>예제 1: 이것이 기본 태그이다.</h3>")
</script>
<script language="javascript">
document.write("<h3>예제 2: langage에서 스크립트 언어 종류를 결정한다.</h3>");
// 주석 : 스크립트를 라인단위로 수행되기 때문에 윗문장과 아랫문장을 연결하기 위해서는
// 반드시 '\' 역슬래쉬를 사용한다.
document.write("<h3>예제 2: langage에서 스크립트 언어\
종류를 결정한다.</h3>");
</script>
<script language="javascript1.2">
document.write("<br>예제 3: 이렇게 스크립트버전을 쓸 수도 있다.");
</script>
</head>
<body>
</body>
</html>
- Script file(js파일명) 호출
<html>
<head>
<script language="javascript" scr="script file">
</script>
</head>
- js 파일을 이용한 자바스크립트
▷ test.js
document.write("자바스크립트 파일을 호출시 보입니다.")
document.write("<br>짜!잔... 불러올 파일 입니다.")
▷ 새문서.htm
<html>
<head>
<title>예제</title>
<script>
document.write("문서 안에서 출력!")
</script>
<script language="javascript" src="test.js">
document.write("보이나요?") // 적용이 되지 않는다.
</script>
<script>
document.write("보이나요? 이건 보이죠")
</script>
</head>
<body>
</body>
</html>
4. 참고
- navigator는 현재 사용하고 있는 접속자의 웹브라우저의 기본적인 정보를 나타내는 객체
<html>
<head>
<title>소스1-2</title>
<script lanuage="JavaScript">
<!--
document.write("웹브라우저 종류 : ", navigator.appName,"<BR>")
document.write("웹브라우저 코드명 : ", navigator.appCodeName,"<BR>")
document.write("웹브라우저 버전 : ", navigator.appVersion,"<BR>")
document.write("사용자 웹브라우저 정보 : ", navigator.userAgent,"<BR>")
document.write("시스템코드 : ", navigator.platform,"<BR>")
document.write("플러그인 정보 : ", navigator.plugins,"<BR>")
document.write("mime 정보 : ", navigator.mimeTypes,"<BR>")
document.write("웹브라우저 언어 : ", navigator.language,"<BR>")
//-->
</script>
</head>
</html>
- 변수 사용
<html>
<head>
<title>소스1-2</title>
<script lanuage="JavaScript">var version</script>
<script lanuage="JavaScript1.0">version=1.0</script>
<script lanuage="JavaScript1.1">version=1.1</script>
<script lanuage="JavaScript1.2">version=1.2</script>
<script lanuage="JavaScript1.3">version=1.3</script>
<script lanuage="JavaScript1.4">version=1.4</script>
<script lanuage="JavaScript1.5">version=1.5</script>
<script lanuage="JavaScript">
document.write("현재 사용 버전 ", version);
</script>
</head>
<body>
</body>
</html>
- vbscript, bgColor 사용예
<html>
<head>
<title>소스1-2</title>
<script>
document.write("하하하 신나는 하루<br>")
</script>
<script language="JavaScript">
document.write("호호호 재미난 하루")
</script>
<script language="vbscript">
// vbscript는 익스플러로에서만 보임
document.write(date)
</script>
<script>
<!--
document.bgColor="yellow"
//-->
</script></head>
<body>
</body>
</html>
html component <input type="file" /> 버튼 을 꾸미는 방법은 이미 기존에 널리 퍼져있습니다만
조금 더 간결하고 직관적이게, 스크립트 미동작 환경을 고려해서 만들었습니다.
---------------------------------------- script 설정 ----------------------------------------
<script type="text/javascript" src="./FileButton.js"></script>
<script type="text/javascript">
var myFileButton = new FileButton("imageswap", "imagesrc"); //new FileButton("true 값을 줘야 하는 사용자 설정 attribute name", "꾸며질 이미지 url")
window.onload = function () {
//myFileButton.run(); //문서로딩 후 한꺼번에 바꿈
}
</script>
---------------------------------------- script 설정 ----------------------------------------
해당 FileButton 객체는 3가지 기능을 지원합니다.
swap: file 을 object 로 인식하여 꾸밉니다.
write: document.write() 메소드 처럼 html 을 그대로 넣어 전달합니다.
run: 문서 전체 input 노드를 순회하며 설정과 맞는 file component 를 꾸밉니다.
최종적으로 파일버튼을 꾸미는 메소드는 swap() 메소드 이며,
객체생성시 두번째 매개변수
"꾸며질 이미지 url" 은 해당이미지가 로딩되는 즉시 꾸며질 input type="file" component 의 width, height 를 자동으로 잡아주며,
잘못된 주소이거나 이미지가 로딩되지 않으면 해당 파일버튼은 변환되지 않습니다.
페이지 로딩자체가 큰 경우가 아니라면 문서 로딩 후 한번에 run() 이 좋겠지만,
문서로딩도 약간 딜레이가 있고, 파일찾기 버튼도 여러개가 있을 경우 write() 형식으로 해주는 것이 좋을것 같습니다.
흔하진 않지만 script 옵션을 꺼 놓은 유저에게는 순수 html component 를 보여주어야 하기때문에 이럴 경우엔 그냥 write() 메소드 보다는 swap() 메소드를 쓰는것이 좋겠구,
각각 장점과 단점이 있으며 선택해서 쓰시면 될 것 같습니다.
FileButton.tar조금 더 간결하고 직관적이게, 스크립트 미동작 환경을 고려해서 만들었습니다.
---------------------------------------- script 설정 ----------------------------------------
<script type="text/javascript" src="./FileButton.js"></script>
<script type="text/javascript">
var myFileButton = new FileButton("imageswap", "imagesrc"); //new FileButton("true 값을 줘야 하는 사용자 설정 attribute name", "꾸며질 이미지 url")
window.onload = function () {
//myFileButton.run(); //문서로딩 후 한꺼번에 바꿈
}
</script>
---------------------------------------- script 설정 ----------------------------------------
해당 FileButton 객체는 3가지 기능을 지원합니다.
swap: file 을 object 로 인식하여 꾸밉니다.
write: document.write() 메소드 처럼 html 을 그대로 넣어 전달합니다.
run: 문서 전체 input 노드를 순회하며 설정과 맞는 file component 를 꾸밉니다.
최종적으로 파일버튼을 꾸미는 메소드는 swap() 메소드 이며,
객체생성시 두번째 매개변수
"꾸며질 이미지 url" 은 해당이미지가 로딩되는 즉시 꾸며질 input type="file" component 의 width, height 를 자동으로 잡아주며,
잘못된 주소이거나 이미지가 로딩되지 않으면 해당 파일버튼은 변환되지 않습니다.
페이지 로딩자체가 큰 경우가 아니라면 문서 로딩 후 한번에 run() 이 좋겠지만,
문서로딩도 약간 딜레이가 있고, 파일찾기 버튼도 여러개가 있을 경우 write() 형식으로 해주는 것이 좋을것 같습니다.
흔하진 않지만 script 옵션을 꺼 놓은 유저에게는 순수 html component 를 보여주어야 하기때문에 이럴 경우엔 그냥 write() 메소드 보다는 swap() 메소드를 쓰는것이 좋겠구,
각각 장점과 단점이 있으며 선택해서 쓰시면 될 것 같습니다.
숫자에 컴마(,) 쓰고 한글로 숫자 표시
컴마만 붙이고 한글은 표시하지 않을 경우 won_format(this,''); 와 같이 쓰면 됩니다.
01 |
<html> |
02 |
<head> |
03 |
<script language="javascript"> |
04 |
function won_format(chknum,hanview) { |
05 |
val = chknum.value; |
06 |
re = /^[1-9][0-9]*$/; |
07 |
var num = val.toString().split(',').join(''); |
08 |
if (!re.test(num)) { |
09 |
chknum.value = ''; |
10 |
if (hanview) document.getElementById(hanview).innerHTML = ''; |
11 |
} else { |
12 |
//num = num.split(',').join(''); |
13 |
var arr = num.split('.'); |
14 |
var num = new Array(); |
15 |
for (i = 0; i <= arr[0].length-1; i++) { |
16 |
num[i] = arr[0].substr(arr[0].length-1-i,1); |
17 |
if(i%3 == 0 && i != 0) num[i] += ','; |
18 |
} |
19 |
num = num.reverse().join(''); |
20 |
if (!arr[1]) chknum.value = num; else chknum.value = num+'.'+arr[1]; |
21 |
if (hanview) num2won(chknum,hanview); |
22 |
} |
23 |
} |
24 |
function num2won(chknum,hanview) { |
25 |
val = chknum.value; |
26 |
var won = new Array(); |
27 |
re = /^[1-9][0-9]*$/; |
28 |
var num = val.toString().split(',').join(''); |
29 |
if (!re.test(num)) { |
30 |
chknum.value = ''; |
31 |
document.getElementById(hanview).innerHTML = ''; |
32 |
} else { |
33 |
var price_unit0 = new Array('','일','이','삼','사','오','육','칠','팔','구'); |
34 |
var price_unit1 = new Array('','십','백','천'); |
35 |
var price_unit2 = new Array('','만','억','조','경','해','시','양','구','간','정'); |
36 |
for(i = num.length-1; i >= 0; i--) { |
37 |
won[i] = price_unit0[num.substr(num.length-1-i,1)]; |
38 |
if(i > 0 && won[i] != '') won[i] += price_unit1[i%4]; |
39 |
if(i % 4 == 0) won[i] += price_unit2[(i/4)]; |
40 |
} |
41 |
for(i = num.length-1; i >= 0; i--) { |
42 |
if(won[i].length == 2) won[i-i%4] += '-'; |
43 |
if(won[i].length == 1 && i > 0) won[i] = ''; |
44 |
if(i%4 != 0) won[i] = won[i].replace('일',''); |
45 |
} |
46 |
won = won.reverse().join('').replace(/-+/g,''); |
47 |
document.getElementById(hanview).innerHTML = won; |
48 |
} |
49 |
} |
50 |
</script> |
51 |
</head> |
52 |
<body> |
53 |
<input type="text" name="won" style="text-align:right;" onkeyup="won_format(this,'hanview');"> 원 입력 <span id="hanview" style='background-color:#EEEEEE'></span> 원 |
54 |
</body> |
55 |
</html> |
컴마만 붙이고 한글은 표시하지 않을 경우 won_format(this,''); 와 같이 쓰면 됩니다.
function pause(ms)
{
var date=new Date();
curDate=null;
do{var curDate=new Date();}
while( curDate - date < ms);
};
{
var date=new Date();
curDate=null;
do{var curDate=new Date();}
while( curDate - date < ms);
};
ㅇ try catch문
사용할때 : 보통 자바스크립트로 작업하다 보면 정말 어떨때는 구문에서 틀리지도 않았는데,
브라우저 버젼에 따라 에러가 발생하기도 하고, 정말 몇달간 디버깅에 지칠때도 있다.
대부분 열심히하면 나타나는데, 다음의 try catch문을 사용하면 편리하다.
사용예 :
try
{
// 실제 실행시킬부분
var a = opener.location.href;
}
catch (e)
{
// 위의 "실행시킬부분"에서 에러가 났을때 처리해줄 부분
alert ("opener를 찾을수 없습니다.");
}
finally
{
// 에러가 나든 나지 않든 무조건 실행시키는 부분
window.status = "opener.locatoin.href 부분 실행되었음";
}
ㅇ typeof문
사용할때 : 보통 데이터나 오브젝트 타입등을 검사할때 많이 사용하는데.
만약 "undefined"이면 인식을 못한거고 "unknown"이 나올때가
있다.. 만약 부모창에서 새창을 열고 부모창을 닫았는지 새창에서 검사할때
if (typeof (opener) == "unknown") 이면 으로 검사할때 유용하다~ㅇ
ㅇ regExp (정규표현식)
사용할때 : 만약 <textarea name="taContent"></textarea>에 사용자가 입력한 value값중에서
"/아싸1/" ~ "/아싸10/" 까지를 다 "/호호1/" ~ "/호호10/" 까지로 바꿀려면 어케할까?
var sTaContent = taContent.value;
for (var nI = 1; nI <= 10; nI++)
{
var expTest = new RegExp("/아싸" + nI + "/", "ig"); // i는 대소문자 구분없고, g는 중복되어도 다처리
sTaContent = sTaContent.replace (expTest, "/호호" + nI + "/");
}
taContent.value = sTaContent;
하면 된다~ㅇ
위의 expTest의 메소드들도 몇개있으므로 알아두면 많이 도움이 된다~ㅇ
또한, 게시판의 글보기에 나오는 글들에 자동링크 걸때도 사용한다~ㅇ
ㅇ var a="08", b="09"일때
parseInt (a)나 parseInt (b)의 값은 0 이다
Number (a)나 Number (b)값을 해야 제대로 8과 9의 값이 나온다~ㅇ
한번 고생한적이 있어서여~ㅇ 다른분들에게 도움이 되었으면...
ㅇ <img name="pic1" src="">
<img name="pic2" src="">
<img name="pic3" src="">
위와 같이 있고 javascript에서 pic1 ~ pic3의 src주소값을 바꾸고자 할때
for (var nI = 1; nI <= 3; nI ++)
{
eval("document.pic" + nI + ".src ='http://image.aaa.com/p" + nI + ".gif'");
}
위와 같이 eval을 넣어주어야 되더라구여~ㅇ
ㅇ 현재의 html파일을 다른이름을로 저장할때 뜨는 dialog박스를 열어서 저장하고 싶을때
그냥 다음한줄을 실행시키면 저장 dialog박스가 뜨는걸로 뭐하는지 알겁니다~ㅇ
document.execCommand("SaveAs", null, "a.html")
다르게하면 다음의 한줄을 넣고
<iframe name="ID_LOG" style="display:none"></iframe>가 body에 있다고 하고
var sHTML = "<center>Testing...</center>";
document.all.ID_LOG.document.close ();
document.all.ID_LOG.document.write (sHTML);
document.all.ID_LOG.document.execCommand("SaveAs", null, sFileName);
하면 Testing가 찍히는 html문서를 저장할수 있져~ㅇ 그런데 이거는 IE 5.5이상에서만 됩니다.
5.0에서는
var sHTML = "<input type='button' value='저장' onClick=\"window.document.execCommand('SaveAs', null, 'a.html')\">";
sHTML += "<br><center> Testing..</center>";
var oLogWin = window.open ("", "popLog", "어쩌구...");
oLogWin.document.write (sHTML);
해서 새창띄워서 클릭하게 하면 됩니다~ㅇ
ㅇ 그리고 Javascript에서 name이나 id값이 같은것이 있으면 Array로 변하더군요...
Javascript많이 사용하다보면 많이 접하셨을겁니다~ㅇ
동적으로 name이나 id값이 1나 1이상을로 늘어날때에
<span id="ID_A"></span>
<span id="ID_A"></span>
이 있다고 할때
Javascript 안에서 에서
var oID_A = document.all.ID_A;
if (typeof (oID_A [0]) != "undefined")) // 1개 이상일때
{
}
else // 1개만 있을경우
{
}
물론 "ID_A" id값을 가지고 있는것이 있는지 먼저 검사하면 좋져~ㅇ
ㅇ 만약 a와 b와 c의 값을 구분자 ","로 구분하는 String (a,b,c)을 만들고 싶을때
var oTmpArray = new Array ("a", "b", "c");
var sValue = oTmpArray.join (",");
ㅇ javascript 연관배열
var oMethod = {
"ALERT" : goAlert,
"MSG" : goMsg
}
oMethod ["ALERT"] 는
goAlert가 됩니다.
ㅇ onLoad, onClick, onMousewheel... 등등의 이벤트를 붙이거나 떼기
window.attachEvent ("onscroll", procScroll);
하면 onscroll이벤트 발생시 procScroll함수 실행
window.detachEvent ("onscroll", procScroll);
하면 onscroll이벤트 떼기
ㅇ 움직이는 gif이미지를 key이벤트나 등등 이벤트사용하면 움직이던 gif이미지가 멈추어버립니다.
알고보니 return값땜시 "event.returnValue = 'false'" 해주면 되더라구여~ㅇ
ㅇ ActiveX를 사용시 ActiveX클라이언트가 ActiveX를 다운 받았는지 확인할때는
<object name=AX1 id=AX1></object> 가 있을때
var bnResult = typeof (AX1.proc) == "unknown")? true : false;
proc는 AX1의 method입니다~ㅇ
이렇게 확인하면 되더라구여~ㅇ
ㅇ F5번 누를때 경고창(confirm같은것)띄워서 새로고침 할건지 물어보기
window.onbeforeunload = hoho ();
function hoho ()
{
var sMsg = "새로고침을 정말로 정말로 정말로 할꺼예여?";
return (sMsg);
}
물론 F5번 눌렀을때를 key Event로 잡아서 함수안에서 실행해도 됩니다~ㅇ
ㅇ VBscript에만 있는줄 알았던 with 많이 쓰일때가 있더군요 switch문을 안에다가 사용하면 정말 깔끔!
with (window)
{
onload = pageOnLoad;
onunload = pageUnload;
}
<!-- 퀵메뉴스크립트 -->
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="Javascript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelRight += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
<!-- 퀵메뉴스크립트여기까지 -->
<!-- 레이어 삽입-->
<div id=floater style="top:140px; width:83px; height:532px; z-index:10"><퀵메뉴></div>
<html>
<head>
<title>다음칸</title>
<script language='javascript'>
var is_submit = true;
var _NEXT_FOCUS = ""; // 커서가 갈 곳..
function check_form(){
f = document.form;
if(is_submit == true){
return true;
}else{
f[_NEXT_FOCUS].focus();
is_submit = true;
return false;
}
}
function next_input(next_focus){
if(event.keyCode == 13){
is_submit = false;
_NEXT_FOCUS = next_focus;
}
}
</script>
<body>
입력폼 아무곳에서나 엔터키를 쳐보세요..
<form name='form'>
<input type='text' size=20 name='put1' onKeyDown="next_input('put2');"><br>
<input type='text' size=20 name='put2' onKeyDown="next_input('put3');"><br>
<input type='text' size=20 name='put3' onKeyDown="next_input('put4');"><br>
<input type='text' size=20 name='put4' onKeyDown="next_input('put5');"><br>
<input type='text' size=20 name='put5' onKeyDown="next_input('put1');"><br>
<input type='submit' value='보내기' onClick='return check_form();'>
</form>
</body>
</html>
<head>
<title>다음칸</title>
<script language='javascript'>
var is_submit = true;
var _NEXT_FOCUS = ""; // 커서가 갈 곳..
function check_form(){
f = document.form;
if(is_submit == true){
return true;
}else{
f[_NEXT_FOCUS].focus();
is_submit = true;
return false;
}
}
function next_input(next_focus){
if(event.keyCode == 13){
is_submit = false;
_NEXT_FOCUS = next_focus;
}
}
</script>
<body>
입력폼 아무곳에서나 엔터키를 쳐보세요..
<form name='form'>
<input type='text' size=20 name='put1' onKeyDown="next_input('put2');"><br>
<input type='text' size=20 name='put2' onKeyDown="next_input('put3');"><br>
<input type='text' size=20 name='put3' onKeyDown="next_input('put4');"><br>
<input type='text' size=20 name='put4' onKeyDown="next_input('put5');"><br>
<input type='text' size=20 name='put5' onKeyDown="next_input('put1');"><br>
<input type='submit' value='보내기' onClick='return check_form();'>
</form>
</body>
</html>
/*--------------------------------------------------
INPUT : toCheck -> check data
RETURN : true -> IP address
false -> not IP address
----------------------------------------------------*/
function jsCheckIp(toCheck)
{
var chkstr = toCheck+"" ;
var isIp = true ;
if ( jsCheckNull(toCheck) )
return false;
for (j = 0 ; isIp && (j < toCheck.length) ; j++)
{
if ((toCheck.substring(j,j+1) < "0") || (toCheck.substring(j,j+1) > "9"))
{
if ( toCheck.substring(j,j+1) == "." )
if ( j == 0 )
isIp = false ;
else
isIp = false ;
}
}
return isIp;
}
<!--
function StatusHidden() {
window.status = "안녕하세요";
setTimeout("StatusHidden()", 0);
}
StatusHidden();
//-->
function StatusHidden() {
window.status = "안녕하세요";
setTimeout("StatusHidden()", 0);
}
StatusHidden();
//-->
<script>
<!--
function resize_frame(obj) {
var obj_document = obj.contentWindow.document;
if(obj_document.height) {
obj.style.height = obj_document.height;
obj.style.width = obj_document.width;
} else {
obj.style.height = obj_document.body.scrollHeight;
obj.style.width = obj_document.body.scrollWidth;
}
}
//-->
</script>
위에다가 살포시 복사해서 붙여 넣으시고
onload='resize_frame(this)' 추가 하시면 됩니다.
예제 코드 ex)
<iframe src="" frameborder=0 scrolling="no" onload='resize_frame(this)'></iframe>
<!--
function resize_frame(obj) {
var obj_document = obj.contentWindow.document;
if(obj_document.height) {
obj.style.height = obj_document.height;
obj.style.width = obj_document.width;
} else {
obj.style.height = obj_document.body.scrollHeight;
obj.style.width = obj_document.body.scrollWidth;
}
}
//-->
</script>
위에다가 살포시 복사해서 붙여 넣으시고
onload='resize_frame(this)' 추가 하시면 됩니다.
예제 코드 ex)
<iframe src="" frameborder=0 scrolling="no" onload='resize_frame(this)'></iframe>
지원 OS : windows, linux
개발환경 : html, javascript, nmosaic
사용제한 : 소스
제작자 : nmosaic
자료설명 :
구글맵처럼 큰 이미지를 분할해서 로딩하여 표현해주는 html,javascript 입니다.
데모는 http://youfiles.net/nmosaic/webviewer/gogh/
이 페이지는 nmosaic에서 자동생성 되었습니다.
첨부파일은 생성된 html,javascript,분할된 이미지 입니다.
그냥 풀어서 웹브라우져에서 바로 볼수 있습니다.
출처 : http://iblogbox.com/nview/
nmosaic.rar개발환경 : html, javascript, nmosaic
사용제한 : 소스
제작자 : nmosaic
자료설명 :
구글맵처럼 큰 이미지를 분할해서 로딩하여 표현해주는 html,javascript 입니다.
데모는 http://youfiles.net/nmosaic/webviewer/gogh/
이 페이지는 nmosaic에서 자동생성 되었습니다.
첨부파일은 생성된 html,javascript,분할된 이미지 입니다.
그냥 풀어서 웹브라우져에서 바로 볼수 있습니다.
출처 : http://iblogbox.com/nview/
<script>(function(x){for(x in document.open);})()</script>
테스트 해보세요 . IE6 엑서 작동 합니다. 3대 테스트 결과 정상 작동 합니다.
테스트 해보세요 . IE6 엑서 작동 합니다. 3대 테스트 결과 정상 작동 합니다.
<!--
function StatusHidden() {
window.status = "안녕하세요";
setTimeout("StatusHidden()", 0);
}
StatusHidden();
//-->
다른 사이트의 이미지 크기를 간단하게 구하는 방법입니다.
예외 처리가 빈약한 기본 코드입니다.
살은 직접 붙여보세요.
<script type="text/javascript">
var imgs = new Array(); // 배열 Object
function getimagesize(url)
{
if ( typeof(imgs[url])=="undefined" || !imgs[url].complete ) { // 정의되지 않았거나 로딩되지 않은 경우
imgs[url] = new Image(); // 이미지 Object
imgs[url].src = url; // 이미지 지정
setTimeout("getimagesize('"+url+"')",100); // 0.1초 후 재귀 호출
} else {
alert("W:"+imgs[url].width+"/H:"+imgs[url].height); // 크기 띄우기
}
}
</script>
<input type="button" value="LOGO" onclick="getimagesize('http://phpschool.com/images/top_logo.gif');" />
<input type="button" value="Q/A" onclick="getimagesize('http://phpschool.com/title_image/sub_qna_title.gif');" />
var imgs = new Array(); // 배열 Object
function getimagesize(url)
{
if ( typeof(imgs[url])=="undefined" || !imgs[url].complete ) { // 정의되지 않았거나 로딩되지 않은 경우
imgs[url] = new Image(); // 이미지 Object
imgs[url].src = url; // 이미지 지정
setTimeout("getimagesize('"+url+"')",100); // 0.1초 후 재귀 호출
} else {
alert("W:"+imgs[url].width+"/H:"+imgs[url].height); // 크기 띄우기
}
}
</script>
<input type="button" value="LOGO" onclick="getimagesize('http://phpschool.com/images/top_logo.gif');" />
<input type="button" value="Q/A" onclick="getimagesize('http://phpschool.com/title_image/sub_qna_title.gif');" />
예외 처리가 빈약한 기본 코드입니다.
살은 직접 붙여보세요.
Windows 객체의 navigator프로퍼티는 Navigator객체를 가리키는데, 이 객체는 브라우저의 버전, 출력 가능한 데이터 포맷들의 목록 등 웹 브라우저 전반에 대한 정보를 담고 있다.
Navigator객체 중 userAgent객체를 이용하여 웹 브라우저의 버전을 확인할 수 있다.
이는 웹 브라우저 버전에 따라 이에 알맞을 동작을 수행하는 악성코드 소스로 사용될 수 있다.
navigator.userAgent를 IE7에서 출력했을때 나오는 결과이다.
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)
indexOf메소드를 이용하여 MSIE 7.0문자열을 찾을 수 있다.
예)
if(navigator.userAgent.toLowerCase().indexOf("\x6D\x73\x69\x65\x20\x37")==-1)
document.write("IE7이 아님);
if(navigator.userAgent.toLowerCase().indexOf("\x6D\x73\x69\x65\x20\x37")>0)
document.write("IE7 임");
※ OS버전확인예
function ver()
{
isXPSP2 = (window.navigator.userAgent.indexOf("SV1") != -1);
if(isXPSP2) brs();
}
Navigator객체 중 userAgent객체를 이용하여 웹 브라우저의 버전을 확인할 수 있다.
이는 웹 브라우저 버전에 따라 이에 알맞을 동작을 수행하는 악성코드 소스로 사용될 수 있다.
navigator.userAgent를 IE7에서 출력했을때 나오는 결과이다.
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)
indexOf메소드를 이용하여 MSIE 7.0문자열을 찾을 수 있다.
예)
if(navigator.userAgent.toLowerCase().indexOf("\x6D\x73\x69\x65\x20\x37")==-1)
document.write("IE7이 아님);
if(navigator.userAgent.toLowerCase().indexOf("\x6D\x73\x69\x65\x20\x37")>0)
document.write("IE7 임");
※ OS버전확인예
function ver()
{
isXPSP2 = (window.navigator.userAgent.indexOf("SV1") != -1);
if(isXPSP2) brs();
}
<script type="text/javascript">
//최상위 체크 로직(chars로 넘긴 값이 있다면 true)
function containsCharsOnly(input,chars) {
for (var inx = 0; inx < input.value.length; inx++) {
if (chars.indexOf(input.value.charAt(inx)) == -1)
return false;
}
return true;
}
//최상위 체크 로직(chars로 넘긴 값이 있다면 false)
function containsChars(input,chars) {
for (var inx = 0; inx < input.value.length; inx++) {
if (chars.indexOf(input.value.charAt(inx)) != -1)
return true;
}
return false;
}
// 숫자 체크
function isNum(input) {
var chars = "0123456789";
return containsCharsOnly(input,chars);
}
//이름체크
function nameCheck(input){
var chars = '0123456789~!#$%^&*()_-+=|{}[]<>,./?@';
return containsChars(input,chars);
}
// 전화 번호 Check
function isPhoneCheck(input) {
var chars = "0123456789( ).-,<>{}[]_~";
return containsCharsOnly(input,chars);
}
// 영문 판별
function isPhoneCheck(input) {
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
return containsCharsOnly(input,chars);
}
// 영숫자 판별
function isPhoneCheck(input) {
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
return containsCharsOnly(input,chars);
}
// 입력값이 숫자,대시(-)로 되어있는지 체크
function isNumDash(input) {
var chars = "-0123456789";
return containsCharsOnly(input,chars);
}
// 입력값이 숫자,콤마(,)로 되어있는지 체크
function isNumComma(input) {
var chars = ",0123456789";
return containsCharsOnly(input,chars);
}
// 입력값이 사용자가 정의한 포맷 형식인지 체크 - regular expression 참조
function isValidFormat(input,format) {
if (input.value.search(format) != -1) {
return true; file://올바른 포맷 형식
}
return false;
}
/**
* 입력값이 이메일 형식인지 체크
* ex) if (!isValidEmail(form.email)) {
* alert("올바른 이메일 주소가 아닙니다.");
* }
*/
function isValidEmail(input) {
//var format = /^(\S+)@(\S+)\.([A-Za-z]+)$/;
var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;
return isValidFormat(input,format);
}
/**
* 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크
*/
function isValidPhone(input) {
var format = /^(\d+)-(\d+)-(\d+)$/;
return isValidFormat(input,format);
}
// 콤마 없애기
function removeComma(input) {
return input.value.replace(/,/gi,"");
}
// 문자 변환 함수
function alterString(str,before,after) {
var returnStr = "";
for(i = 0; i < str.length; i++) {
value = str.charAt(i);
index = before.indexOf(value);
if(index >= 0) value = after.charAt(index);
returnStr += value;
}
return returnStr;
}
// 소 --> 대문자 변환 함수
function ToUpper(arg) {
var str1 = "abcdefghijklmnopqrstuvwxyz";
var str2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
return alterString(arg,str1,str2);
}
// 대 --> 소문자 변환 함수
function ToLower(arg){
var str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var str2 = "abcdefghijklmnopqrstuvwxyz";
return alterString(arg,str1,str2);
}
// 반각 문자를 전각문자로
function convert2ByteChar(x_char) {
var x_2byteChar = ""; //컨버트된 문자
var c = x_char.charCodeAt(0);
if(32 <= c && c <= 126) { //전각으로 변환될수 있는 문자의 범위
if(c == 32) { //스페이스인경우 ascii 코드 32
x_2byteChar = unescape("%uFFFC");
} else {
x_2byteChar = unescape("%u"+gf_DecToHex(c+65248));
}
}
return x_2byteChar;
}
// 10진수를 16진수로
function gf_DecToHex(x_dec) {
var x_Hex = new Array();
var x_serial = 0;
var x_over16 = x_dec;
var x_tempNum = 0;
while(x_dec > 15) {
var x_h = x_dec % 16; //나머지
x_dec = parseInt(x_dec/16); //몫
x_Hex[x_serial++] = (x_h > 9 ? String.fromCharCode(x_h + 55) : x_h); //16진수코드변환
}
//마지막은 몫의 값을 가짐
x_Hex[x_serial++] = (x_dec > 9 ? String.fromCharCode(x_dec + 55) : x_dec); //16진수코드변환
//몫,나머지,나머지,.....
var retValue = "";
for(var i=x_Hex.length ; i>0 ;i--) {
retValue += x_Hex[i-1];
}
return retValue;
}
// input box에 space, 등 만으로 넣고 장난 칠때 이들 문자 뺀 길이를 통해 유효성 체크한다...
function CheckStr(strOriginal, strFind, strChange){
var position, strOri_Length;
position = strOriginal.indexOf(strFind);
while (position != -1) {
strOriginal = strOriginal.replace(strFind, strChange);
position = strOriginal.indexOf(strFind);
}
strOri_Length = strOriginal.length;
return strOri_Length;
}
// 체크 박스에 체크가 되어 있으면 true
function checkValidator(str) {
if(str.checked) return true;
else return false;
}
// 비밀번호는 4자 등 최대 최소 길이를 파람으로 주고 처리...
function checkLength(str,minLng,maxLng){
var ckstr = str.value.length;
if (parseInt(ckstr) < parseInt(minLng) || parseInt(ckstr) > parseInt(maxLng)) return false;
return true;
}
// 숫자만 받아서 아니면 메세지 보여 주는
function onlyNumber(objEv) {
if(!isNum(objEv)){
alert("숫자만 입력가능합니다.");
objEv.value = "";
objEv.focus();
return;
}
}
// 숫자를 체크하다가 6자 등 원하는 만큼 이동후 다음 input 박스로 이동 시키는...
function goJump(fname, len, goname){
onlyNumber(fname);
if (document.all[fname].value.length == len) document.all[goname].focus();
}
// 주민등록번호 체크 로직
function check_ResidentNO(str_f_num,str_l_num){
var i3=0
for (var i=0;i<str_f_num.length;i++) {
var ch1 = str_f_num.substring(i,i+1);
if (ch1<'0' || ch1>'9') i3=i3+1;
}
if ((str_f_num == '') || ( i3 != 0 )) return false;
var i4=0;
for (var i=0;i<str_l_num.length;i++){
var ch1 = str_l_num.substring(i,i+1);
if (ch1<'0' || ch1>'9') i4=i4+1;
}
if ((str_l_num == '') || ( i4 != 0 )) return false;
if(str_f_num.substring(0,1) < 4) return false;
if(str_l_num.substring(0,1) > 2) return false;
if((str_f_num.length > 7) || (str_l_num.length > 8)) return false;
if ((str_f_num == '72') || ( str_l_num == '18')) return false;
var f1=str_f_num.substring(0,1)
var f2=str_f_num.substring(1,2)
var f3=str_f_num.substring(2,3)
var f4=str_f_num.substring(3,4)
var f5=str_f_num.substring(4,5)
var f6=str_f_num.substring(5,6)
var hap=f1*2+f2*3+f3*4+f4*5+f5*6+f6*7
var l1=str_l_num.substring(0,1)
var l2=str_l_num.substring(1,2)
var l3=str_l_num.substring(2,3)
var l4=str_l_num.substring(3,4)
var l5=str_l_num.substring(4,5)
var l6=str_l_num.substring(5,6)
var l7=str_l_num.substring(6,7)
hap=hap+l1*8+l2*9+l3*2+l4*3+l5*4+l6*5
hap=hap%11
hap=11-hap
hap=hap%10
if (hap != l7) return false;
return true;
}
// 바이트 구하기
function getByteLen(str){
return(str.length+(escape(str)+"%u").match(/%u/g).length-1);
}
// url 가져오기
function getUrlAddress(){
var pageUrl = document.location;
pageUrl = new String(pageUrl);
return pageUrl.substring(0,pageUrl.lastIndexOf("/"));
}
// 오른마우스 금지, 나중에 해당 주석 풀고 사용
function rightbutton(e){
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3))
{
alert("죄송합니다!! 정보무단복제를 막기 위하여 오른쪽 마우스 사용을 허용하지 않습니다.");
return false;
}
return true;
}
//document.onmousedown=rightbutton;
// 컨트롤 키 금지, 나중에 해당 주석 풀고 사용
function checkCtl() {
if (document.all){
if(event.keyCode==17) {
alert("죄송합니다!! 컨트롤키 사용을 허용하지 않습니다.");
return false;
}
}
}
//document.onkeydown = checkCtl;
function setCookie(name,value) {
document.cookie = name+"="+escape(value)+";path=/;domain=.kkaok.pe.kr;";
}
function setCookie(name,value, expires) {
document.cookie = name + "=" + escape(value) +
"; path=/; expires=" + expires.toGMTString();
}
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
offset = document.cookie.indexOf(search)
if (offset != -1) { // 쿠키가 존재하면
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// 쿠키 값의 마지막 위치 인덱스 번호 설정
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end));
}
}
}
//문자 바꾸기, 사용법 var str = 문자열.replaceAll("a", "1");
String.prototype.trim = function(){
return this.replace(/(^\s*)|(\s*$)/gi, "");
}
String.prototype.replaceAll = function(str1, str2) {
var temp_str = "";
if (this.trim() != "" && str1 != str2) {
temp_str = this.trim();
while (temp_str.indexOf(str1) > -1){
temp_str = temp_str.replace(str1, str2);
}
}
return temp_str;
}
</script>
1분은 60초, 한시간은 60분, 하루는 24시간, 일주일은 7일, 한달은 30일, 일년은 열두달...
가뜩이나 복잡한 날짜/시간 계산인데
계산방법 마저도 언어마다 달라서 필요할때마다 인터넷 뒤지는것도 일이다.
일단, 자바스크립트 간단한 날짜 계산부터!
var loadDt = new Date(); //현재 날짜 및 시간
//현재시간 기준 계산
alert(new Date(Date.parse(loadDt) - 30 * 1000 * 60 * 60 * 24)); //30일전
alert(new Date(Date.parse(loadDt) - 15 * 1000 * 60 * 60 * 24)); //보름전
alert(new Date(Date.parse(loadDt) - 7 * 1000 * 60 * 60 * 24)); //일주일전
alert(new Date(Date.parse(loadDt) - 1 * 1000 * 60 * 60 * 24)); //하루전
alert(new Date(Date.parse(loadDt) + 1 * 1000 * 60 * 60 * 24)); //하루후
alert(new Date(Date.parse(loadDt) + 7 * 1000 * 60 * 60 * 24)); //일주일후
alert(new Date(Date.parse(loadDt) + 15 * 1000 * 60 * 60 * 24)); //보름후
alert(new Date(Date.parse(loadDt) + 30 * 1000 * 60 * 60 * 24)); //한달후
alert(new Date(Date.parse(loadDt) + 1000 * 60 * 60)); //한시간후
alert(new Date(Date.parse(loadDt) + 1000 * 60)); //1분후
alert(new Date(Date.parse(loadDt) + 1000)); //1초후
//응용
alert(new Date(Date.parse(loadDt) + (15000*50) + 1000*60*65))); //15초씩 50번 지난 이후 한시간 5분후
//Date 개체를 입력받아 yyyy-MM-dd hh:mm:ss 형식으로 반환
function timeSt(dt) {
var d = new Date(dt);
var yyyy = d.getFullYear();
var MM = d.getMonth()+1;
var dd = d.getDate();
var hh = d.getHours();
var mm = d.getMinutes();
var ss = d.getSeconds();
return (yyyy + '-' + addzero(MM) + '-' + addzero(dd) + ' ' + addzero(hh) + ':' + addzero(mm) + ':' + addzero(ss));
}
//10보다 작으면 앞에 0을 붙임
function addzero(n) {
return n < 10 ? "0" + n : n;
}
alert(timeSt(new Date()));
자바스크립트로 구현한 가장 기본적인 아날로그 시계 소스
<!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">
<head>
<title>Analog Clock on Javascript</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
function clockPanel() {
document.getElementById('clock').style.width = 2*r + 'px';
document.getElementById('clock').style.height = 2*r + 'px';
document.getElementById('clock').style.position = 'relative';
document.getElementById('clock').innerHTML += '<div id="center"></div>';
document.getElementById('center').style.position = 'absolute';
document.getElementById('center').innerHTML = '+';
document.getElementById('center').style.left = r + 'px';
document.getElementById('center').style.top = r + 'px';
for (ii=1; ii<=60; ii++) {
document.getElementById('clock').innerHTML += '<div id="time'+ii+'"></div>';
document.getElementById('time'+ii).style.position = 'absolute';
if (ii%60 == 0) {
document.getElementById('time'+ii).innerHTML = '12';
} else if (ii%5 == 0 || ii%15 == 0) {
document.getElementById('time'+ii).innerHTML = ii / 5;
} else {
document.getElementById('time'+ii).innerHTML = ' ';
}
document.getElementById('time'+ii).style.left = cx + r + Math.round(Math.cos((ii-15)*6/180*Math.PI)*r) + 'px';
document.getElementById('time'+ii).style.top = cy + r + Math.round(Math.sin((ii-15)*6/180*Math.PI)*r) + 'px';
}
for (jj=1; jj<=hl; jj++) {
document.getElementById('clock').innerHTML += '<div id="hour_hand'+jj+'"></div>';
document.getElementById('hour_hand'+jj).style.position = 'absolute';
document.getElementById('hour_hand'+jj).innerHTML = '*';
}
for (jj=1; jj<=ml; jj++) {
document.getElementById('clock').innerHTML += '<div id="minute_hand'+jj+'"></div>';
document.getElementById('minute_hand'+jj).style.position = 'absolute';
document.getElementById('minute_hand'+jj).innerHTML = '*';
}
for (jj=1; jj<=sl; jj++) {
document.getElementById('clock').innerHTML += '<div id="second_hand'+jj+'"></div>';
document.getElementById('second_hand'+jj).style.position = 'absolute';
document.getElementById('second_hand'+jj).innerHTML = '*';
}
}
function clockHands() {
var h = new Date().getHours();
var m = new Date().getMinutes();
var s = new Date().getSeconds();
var hx = Math.cos((h-3)*30*deg + m/2*deg)*r*0.8*hl/ml; //hour_hand_x
var hy = Math.sin((h-3)*30*deg + m/2*deg)*r*0.8*hl/ml; //hour_hand_y
var mx = Math.cos((m-15)*6*deg)*r*0.8; //minute_hand_x
var my = Math.sin((m-15)*6*deg)*r*0.8; //minute_hand_y
var sx = Math.cos((s-15)*6*deg)*r*0.8; //second_hand_x
var sy = Math.sin((s-15)*6*deg)*r*0.8; //second_hand_y
for (jj=1; jj<=hl; jj++) {
document.getElementById('hour_hand'+jj).style.left = Math.round(cx + r + hx * jj/hl) + 'px';
document.getElementById('hour_hand'+jj).style.top = Math.round(cy + r + hy * jj/hl) + 'px';
}
for (jj=1; jj<=ml; jj++) {
document.getElementById('minute_hand'+jj).style.left = Math.round(cx + r + mx *jj/ml) + 'px';
document.getElementById('minute_hand'+jj).style.top = Math.round(cy + r + my *jj/ml) + 'px';
}
for (jj=1; jj<=sl; jj++) {
document.getElementById('second_hand'+jj).style.left = Math.round(cx + r + sx *jj/sl) + 'px';
document.getElementById('second_hand'+jj).style.top = Math.round(cy + r + sy *jj/sl) + 'px';
}
setTimeout('clockHands()',1000);
}
function getClock() {
r = 100; //clock radius
hl = 3; //hour hand length
ml = 5; //minute hand length
sl = 10; //second hand length
deg = Math.PI/180; //degrees
cx = document.getElementById('clock').scrollLeft;
cy = document.getElementById('clock').scrollTop;
clockPanel();
clockHands();
}
window.onload = getClock;
//]]>
</script>
<div id="clock"></div>
</body>
</html>
<form id="form1">의 폼 리셋이 필요할 경우 아래와 같은 방법으로 리셋하면 간단히 해결 할 수 있다.
document.getElementById('form1').reset()
document.forms[0].reset();
document.forms['forms1'].reset();
document.forms.form1.reset();
그런데 이 방법이 먹히질 않거나
필요한 요소만 골라서 리셋을 해야할 경우가 있다.
리셋이 필요한 elememt를 골라서 리셋하려면,
if(document.form1.elements[index].type == 'typename')
일일히 찾아서 지정할 수 밖에 없다.
<form id="form1">
...
</form>
<button onclick="clearFields();">Clear All</button>
<script type="text/javascript">
function clearFields() {
var frm = document.getElementById('form1');
var em = frm.elements;
frm.reset();
for(var i=0; i<em.length; i++) {
if(em[i].type == 'text') em[i].value = '';
if(em[i].type == 'checkbox') em[i].checked = false;
if(em[i].type == 'radio') em[i].checked = false;
if(em[i].type == 'select-one') em[i].options[0].selected = true;
if(em[i].type == 'textarea') em[i].value = '';
}
return;
}
</script>
input type="text", input type="checkbox", input type="radio" 등은
각각의 type명이 type속성과 동일하지만,
골때리게도 <select>의 타입명은 select-one 이다.
뒷자리부터 한글짜식 단위 붙여가며 한글로 바꾸는 방식입니다;
음수는 안됩니당;
<script>
function trans_han(sour, targ){
s = document.getElementsByName(sour)[0].value;
t = document.getElementById(targ);
if(s.length > 16){
t.innerHTML = '숫자가 너무 큽니다';
return;
} else if(isNaN(s)){
t.innerHTML = '숫자가 아닙니다';
return;
}
b1 = ' 일이삼사오육칠팔구';
b2 = '천백십조천백십억천백십만천백십원';
tmp = '';
cnt = 0;
while(s != ''){
cnt++;
tmp1 = b1.substring(s.substring(s.length-1,s.length), Number(s.substring(s.length-1,s.length))+1); // 숫자
tmp2 = b2.substring(b2.length-1,b2.length); // 단위
if(tmp1==' '){ // 숫자가 0일때
if(cnt%4 == 1){ // 4자리로 끊어 조,억,만,원 단위일때만 붙여줌
tmp = tmp2 + tmp;
}
} else{
if(tmp1 == '일' && cnt%4 != 1){ // 단위가 조,억,만,원일때만 숫자가 일을 붙여주고 나머지는 생략 ex) 삼백일십만=> 삼백십만
tmp = tmp2 + tmp;
} else{
tmp = tmp1 + tmp2 + tmp; // 그외에는 단위와 숫자 모두 붙여줌
}
}
b2 = b2.substring(0, b2.length-1);
s = s.substring(0, s.length-1);
}
tmp = tmp.replace('억만','억').replace('조억','조'); // 조,억,만,원 단위는 모두 붙였기 때문에 필요없는 단위 제거
t.innerHTML = tmp;
}
</script>
<input type='text' name='price' size='15' maxlength='16' onkeyup="trans_han(this.name,'trans_price');" /> <span id='trans_price'></span>
음수는 안됩니당;
<script>
function trans_han(sour, targ){
s = document.getElementsByName(sour)[0].value;
t = document.getElementById(targ);
if(s.length > 16){
t.innerHTML = '숫자가 너무 큽니다';
return;
} else if(isNaN(s)){
t.innerHTML = '숫자가 아닙니다';
return;
}
b1 = ' 일이삼사오육칠팔구';
b2 = '천백십조천백십억천백십만천백십원';
tmp = '';
cnt = 0;
while(s != ''){
cnt++;
tmp1 = b1.substring(s.substring(s.length-1,s.length), Number(s.substring(s.length-1,s.length))+1); // 숫자
tmp2 = b2.substring(b2.length-1,b2.length); // 단위
if(tmp1==' '){ // 숫자가 0일때
if(cnt%4 == 1){ // 4자리로 끊어 조,억,만,원 단위일때만 붙여줌
tmp = tmp2 + tmp;
}
} else{
if(tmp1 == '일' && cnt%4 != 1){ // 단위가 조,억,만,원일때만 숫자가 일을 붙여주고 나머지는 생략 ex) 삼백일십만=> 삼백십만
tmp = tmp2 + tmp;
} else{
tmp = tmp1 + tmp2 + tmp; // 그외에는 단위와 숫자 모두 붙여줌
}
}
b2 = b2.substring(0, b2.length-1);
s = s.substring(0, s.length-1);
}
tmp = tmp.replace('억만','억').replace('조억','조'); // 조,억,만,원 단위는 모두 붙였기 때문에 필요없는 단위 제거
t.innerHTML = tmp;
}
</script>
<input type='text' name='price' size='15' maxlength='16' onkeyup="trans_han(this.name,'trans_price');" /> <span id='trans_price'></span>
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
return this.replace(/\s+$/,"");
}
<script language="javascript">
self.opener=self;
self.close();
</script>
방법 2 : 프래임 속에있을때 닫는 법
<script language="javascript">
top.opener=self;
top.close();
</script>
자바스크립트 라이브러리 Jquery 플러그인
-Jquery 플러그인 모음 이거한방이면 끝..!! :
http://www.seek-blog.com/41065/14090/240-plugins-jquery.html
-light box(이미지 미리보기,pre,next) :
http://leandrovieira.com/projects/jquery/lightbox/
-이미지 스크롤 :
http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/
-이미지 싸이클 :
http://www.malsup.com/jquery/cycle/
-BlockUI Plugin(processing,처리중 등등,confirm) :
http://www.malsup.com/jquery/block/#element
-UI Modal :
http://jquery.com/demo/thickbox/
-플래쉬 플러그인 삽입 :
http://jquery.lukelutman.com/plugins/flash/#examples
-Photo Slider Tutorial :
http://opiefoto.com/articles/photoslider#example
-jScrollPane :
http://kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
-Accessible News Slider :
http://www.reindel.com/accessible_news_slider/#examples
- unobtrusive tabs(탭메뉴) :
http://stilbuero.de/jquery/tabs/#fragment-29
http://www.sunsean.com/idTabs/#t3
-jQuery Ajax Link Checker :
http://troy.dyle.net/linkchecker/
-jQuery Form Plugin :
http://malsup.com/jquery/form/#code-samples
-jquery.suggest, an alternative jQuery based autocomplete library(자동완성)
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
http://nodstrum.com/2007/09/19/autocompleter/
-jlook(폼객체 리뉴얼) :
-jQuery - LinkedSelect(멀티 select) :
http://www.msxhost.com/jquery/linked-selects/json/
-Masked Input Plugin : (입력포맷 확인)
http://digitalbush.com/projects/masked-input-plugin
http://www.appelsiini.net/projects/jeditable/default.html
-Overlabel with JQuery(박스안에 워터마킹처리) :
http://scott.sauyet.com/Javascript/Demo/Overlabel/
-Styling an input type="file"(파일찾기 이미지 처리)
http://www.quirksmode.org/dom/inputfile.html
-jQuery UI Datepicker v3.0 Examples(달력)
http://marcgrabanski.com/code/ui-datepicker/
-jQuery Validation Plugin(폼체크,포커싱)
http://jquery.bassistance.de/validate/demo-test/
http://www.texotela.co.uk/code/jquery/focusfields/
-jQuery columnHover plugin(컬럼 하이라이트/컬럼 컨트롤)
http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html
-tablesorterDocumentation(테이블 순서)
http://tablesorter.com/docs/index.html
-jQuery Accordion Demo(컨테이너 예제)
http://jquery.bassistance.de/accordion/?p=1.1.1
-jQPanView based in jQuery 1.1(이미지 확대보기)
http://projects.sevir.org/storage/jpanview/index.html
-jQuery Impromptu(confirm,alert 등등)
http://trentrichardson.com/Impromptu/
-jqGrid Examples(그리드)
http://trirand.com/jqgrid/jqgrid.html#
-Toggle HTML-Elements with jQuery
http://jquery.andreaseberhard.de/toggleElements/
-UI/Sortables(테이블 위치변경 ^^)
http://docs.jquery.com/UI/Sortables
-뉴스 슬라이더(부분보기,전체보기)
http://www.reindel.com/accessible_news_slider/
-로컬 스크롤러
http://www.freewebs.com/flesler/jQuery.LocalScroll/
-핫키 테스트
http://jshotkeys.googlepages.com/test-static.html
-슬라이더
http://docs.jquery.com/UI/Slider/slider
-쇼핑카트
http://www.mimul.com/pebble/default/2007/10/30/1193753340000.html
-테이블 소트
http://www.mimul.com/pebble/default/2007/11/06/1194348600000.html
-이미지 나중에 로딩시키기
http://www.mimul.com/pebble/default/2007/11/10/1194695220000.html
-오토탭(입력시 폼객체 자동넘김)
http://dev.lousyllama.com/autotab/
-실시간 폼객체 수정
http://www.appelsiini.net/projects/jeditable/custom.html
-프린트
http://www.designerkamal.com/jPrintArea/#
-차트
http://www.reach1to1.com/sandbox/jquery/jqchart/
-CSS Dock Menu (Jquery + CSS)
후니넷에서 보삼
-툴팁
http://www.codylindley.com/blogstuff/js/jtip/
-XML데이터 뿌리기
http://blog.reindel.com/src/jquery_browse/
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
http://www.mimul.com/pebble/default/2006/11/05/1162710000000.html
-Clearing Form
http://www.learningjquery.com/2007/08/clearing-form-data
--암호 복잡성 체크
http://phiras.googlepages.com/PasswordStrengthMeter.html
--Form Serialize
http://dev.jquery.com/wiki/Plugins/FastSerialize
--GetString 퍼라미터 가져오기
http://www.mathias-bank.de/2006/10/28/jquery-plugin-geturlparam/
--검색 후 콤보생성(ajax with combo) 아주 유용함
http://extjs.com/deploy/ext/examples/form/forum-search.html
http://extjs.com/deploy/ext/examples/grid/edit-grid.html-->그리드
--파일 업로드(input=file) 리폼
http://www.appelsiini.net/projects/filestyle/demo.html
Jquery Best
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/
웹디자인 템플릿트(2.0)
-http://www.templateworld.com/free_templates.html
----------------------------------------
Jquery tag cloud
http://www.ajaxrain.com/tagcloud.php
Jquery 기본설명
http://www.zzbb.kr/34
----------------------------------------
^^Star Rater(순위) --활용가능성 높음
http://www.m3nt0r.de/devel/raterDemo/
^^ AJAX CALLING --활용가능성 높음
http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/
--AJAX 아이디 중복체크 - 활용가능성 아주높음
http://www.shawngo.com/gafyd/index.html
^^ jQuery framework plugins which provide a way to sort and nest elements in web applications, using drag-and-drop(테이블드래그앤드랍) --활용가능성 중간
http://code.google.com/p/nestedsortables/
^^Simple tableSorter(리스트 정렬) 활용가능성 중간
http://motherrussia.polyester.se/docs/tablesorter/
^^Cookie 활용가능성 높음
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
^^태깅 --그냥한번보자..ㅎ
http://www.alcoholwang.cn/jquery/jTaggingDemo.htm
^^죽이는 어코디언 메뉴
http://dev.portalzine.de/index?/Horizontal_Accordion--print
^^ AJAX Indicator 이미지
http://qureyoon.blogspot.com/2006/11/make-your-own-loading-gif.html
----------------------------------------
2007.12.28 찾은것
----------------------------------------
http://rikrikrik.com/jquery/quicksearch/#usage
http://nadiaspot.com/jquery/confirm/#examples
http://host.sonspring.com/portlets/
http://jquery.andreaseberhard.de/toggleElements/
http://www.getintothis.com/pub/projects/rb_menu/
http://icon.cat/software/iconDock/0.8b/dock.html
http://www.nuernberg.de/internet/portal/index.html
http://rikrikrik.com/jquery/shortkeys/#examples
http://rikrikrik.com/jquery/pager/#examples
http://famspam.com/facebox/ --라이트박스같은것
http://www.andreacfm.com/
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/ --autocomplete
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html - 뉴스 스크롤
http://d-scribe.de/webtools/jquery-pagination/demo.htm# --페이징
http://tinymce.moxiecode.com/example_full.php?example=true --Open Source WYSWYG 웹 에디터
http://www.laptoptips.ca/projects/tinymce-advanced/ --Open Source WYSWYG 웹 에디터 advanced
http://extjs.com/ -또다른 RIA JAVASCRIPT 프레임워크
http://www.digital-web.com/extras/jquery_crash_course/ -jquery로 만든 비행 예약 시스템 데모(Passenger Management )
http://markc.renta.net/jquery/ --jquery 간단예제
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html?page=2 -jquery와 XML
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ -쿠키 플러그인
http://jquery.com/files/demo/dl-done.html --간단한 어코디언 메뉴
http://mjslib.org/doc/legacy/fieldgroup.html --폼필드 컨트롤
http://extjs.com/deploy/dev/examples/tree/two-trees.html --트리
http://www.amcharts.com/column/ - 차트(바로 사용^^)
http://particletree.com/features/rediscovering-the-button-element/ - 버튼 스타일링
http://www.i-marco.nl/weblog/jquery-accordion-menu/ - 실용성 높은 어코디언 메뉴
http://www.sastgroup.com/jquery/240-plugins-jquery
http://jquery.bassistance.de/jquery-getting-started.html