Search Results for '프로그래밍/자바 스크립트'


89 posts related to '프로그래밍/자바 스크립트'

  1. 2017/02/26 홈페이지 눈내리기
  2. 2017/02/20 "[팁]프레임 도둑 방지 스크립트"
  3. 2012/01/02 자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용
  4. 2011/12/06 레이어 공지사항(오늘 하루 그만 보기)
  5. 2011/12/06 JSON 객체를 String으로 변환하기
  6. 2011/12/06 다중 셀렉트 기본 방법
  7. 2011/12/06 모든 자바스크립트 에러 잠재우기 (에러 디버그)
  8. 2011/12/06 innerHTML 에서 script 태그 넣기
  9. 2011/12/06 문 자열 길이 체크
  10. 2011/12/06 정규 표현식(Regular Expression)
  11. 2011/12/06 자바스크립트 연습장
  12. 2011/12/06 자바스크립트로 엔터 넣기
  13. 2011/12/06 화면상의 객체 위치,크기 1
  14. 2011/12/06 모든 브라우저 버전별 확인 스크립트
  15. 2011/12/06 페이지 스크롤끝 확인 스크립트
  16. 2011/12/06 스마트폰 접속시 모바일 사이트로 이동 소스 예제
  17. 2011/12/06 구글음성 서비스 이용처리
  18. 2011/11/23 javascript - 자바스트립트 프린터( 프린트 컴포넌트 무료제공 )
  19. 2011/10/11 Scrollable HTML table
  20. 2011/09/21 금액을 한글로 표기 해주는 스크립트
  21. 2011/09/07 Javascript 예약어 1
  22. 2011/09/07 Javascript 에서 PHP 함수 사용
  23. 2011/03/06 iframe 높이 자동조절 스크립트
  24. 2011/01/27 JavaScript 웹 브라우저 버전 체크 및 Javascript 버젼 체크
  25. 2011/01/27 input type file 버튼 모양변경
  26. 2010/09/02 숫자에 컴마(,) 쓰고 한글로 숫자 표시
  27. 2010/08/18 pause 함수
  28. 2010/08/18 자바스크립트 팁 (고급 팁)
  29. 2010/08/18 [TIP] 퀵메뉴 스크립트
  30. 2010/06/07 엔터치면 다음칸으로 이동.

<script src="//cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js"></script>

 

두가지 추가 하면 메인에 눈이 내려요  




2017/02/26 15:36 2017/02/26 15:36

프레임으로 도둑질? 하려고 하다..

거꾸로 방지 하는 방법만 찾았네요..^^

저도 적용해 봐야겠네요

 

"[팁]프레임 도둑 방지 스크립트"
나도 모르는 사이 내 사이트의 특정 페이지가 다른 사이트의 프레임 내에서 사용되고 있을 수 있습니다 
만약 해당 페이지가 프레임에 갇혀 있으면 프레임에서 빠져나오게 하는 스크입트 입니다

<!---- 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->

 <SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
if (window != top) top.location.href = location.href; 
// End -->

</SCRIPT>

 




2017/02/20 01:51 2017/02/20 01:51

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 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 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.




2012/01/02 02:07 2012/01/02 02:07
<SCRIPT language=javascript>
var banner_count = 1;
var cur_banner = 1;
var timeout_id;

function all_banner_clear() {
var banner_id = "";
for( var i=1; i<= banner_count; i++) {
banner_id = 'all_banner_'+ i;
document.all[banner_id].style.visibility='hidden';
}
clearTimeout(timeout_id);
}

function all_banner_change() {
var next_banner = cur_banner+1;
var banner_id = "";
if( next_banner > banner_count ) {
next_banner = 1;
}
banner_id = 'all_banner_'+ cur_banner;
document.all[banner_id].style.visibility='hidden';
banner_id = 'all_banner_'+ next_banner;
document.all[banner_id].style.visibility='visible';

cur_banner = next_banner;
timeout_id = window.setTimeout("all_banner_change()",4000);
}

function all_banner_open() {
if (screen.width==800) {
var w_left = 0;
} else {
var w_left = (screen.width)?(screen.width-600)/2:100;
}
var banner_id = "";
for(var i = 1; i<= banner_count; i++ ) {
banner_id = 'all_banner_' + i;
document.all[banner_id].style.left=w_left;
}
if (getCookie("all_banner_img") == null) {
document.all['all_banner_1'].style.visibility='visible';
selectbox_hidden(all_banner_1);
//timeout_id = window.setTimeout("all_banner_change()",4000);
} else {
document.all['all_banner_1'].style.visibility='hidden';
selectbox_visible();
}
}

function all_banner_cookie() {
if (document.all.cookie_check.checked == true) {
setCookie("all_banner_img", "true", 1);
}
document.all['all_banner_1'].style.visibility = "hidden";
clearTimeout(timeout_id);
}

function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
End = document.cookie.indexOf(";", offset)
if (End == -1)
End = document.cookie.length
return unescape(document.cookie.substring(offset, End))
}
}
}

function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function selectbox_hidden(layer_id) {
var ly = eval(layer_id);

// 레이어 좌표
var ly_left = ly.offsetLeft;
var ly_top = ly.offsetTop;
var ly_right = ly.offsetLeft + ly.offsetWidth;
var ly_bottom = ly.offsetTop + ly.offsetHeight;

// 셀렉트박스의 좌표
var el;

for (i=0; i<document.forms.length; i++) {
for (k=0; k<document.forms[i].length; k++) {
el = document.forms[i].elements[k];
if (el.type == "select-one") {
var el_left = el_top = 0;
var obj = el;
if (obj.offsetParent) {
while (obj.offsetParent) {
el_left += obj.offsetLeft;
el_top += obj.offsetTop;
obj = obj.offsetParent;
}
}
el_left += el.clientLeft;
el_top += el.clientTop;
el_right = el_left + el.clientWidth;
el_bottom = el_top + el.clientHeight;

// 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
if ((ly_right >= el_left && ly_left <= el_right) && (ly_bottom >= el_top && ly_top <= el_bottom))
el.style.visibility = 'hidden';
}
}
}
}

// 감추어진 셀렉트 박스를 모두 보이게 함
function selectbox_visible() {
for (i=0; i<document.forms.length; i++) {
for (k=0; k<document.forms[i].length; k++) {
el = document.forms[i].elements[k];
if (el.type == "select-one" && el.style.visibility == 'hidden')
el.style.visibility = 'visible';
}
}
}
</SCRIPT>


<DIV id=all_banner_1 style="Z-INDEX: 8; LEFT: 400px; VISIBILITY: hidden; POSITION: absolute; TOP: 278px">
<IFRAME style="Z-INDEX: -1; ; LEFT: expression(this.nextSibling.offsetLeft); ;
WIDTH: expression(this.nextSibling.offsetWidth); POSITION: absolute; ;
TOP: expression(this.nextSibling.offsetTop); ; HEIGHT: expression(this.nextSibling.offsetHeight)"
src="about:blank" frameBorder=0></IFRAME>

<TABLE cellSpacing=0 cellPadding=0 width=400 bgColor=#ffffff border=0>
<TR>
<TD align=middle height=10></TD>
</TR>
<TR>
<TD height=5></TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" height=15>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#d0d0d0 border=0>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" bgColor=#e7e7e7 border=0>
<TR>
<TD bgColor=#ffffff>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD height=10></TD>
</TR>
<TR>
<TD align=middle height=10>
<TABLE cellSpacing=0 cellPadding=0 width="95%" border=0>
<TR>
<TD width=10>>></TD>
<TD style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 2px; LETTER-SPACING: -0.1em">알려드립니다.!!!</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; PADDING-TOP: 15px" height=10>
공지사항입니다.공지사항입니다.공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.<br />
공지사항입니다.
</TD>
</TR>
<TR>
<TD height=5></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD width="3%" bgColor=#f7f7f7 height=30></TD>
<TD width="6%" bgColor=#f7f7f7><INPUT type=checkbox name=cookie_check></TD>
<TD width="36%" bgColor=#f7f7f7>오늘 하루 그만 보기 </TD>
<TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" align=right width="55%" bgColor=#f7f7f7>
<A onfocus=this.blur(); href="javascript:all_banner_cookie();">:: 닫기 ::</A>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD align=middle height=10></TD>
</TR>
</TABLE>
</DIV>
<SCRIPT>
all_banner_open();
</SCRIPT>



2011/12/06 11:42 2011/12/06 11:42
function JSONtoString(object) {
var results = [];
for (var property in object) {
var value = object[property];
if (value)
results.push(property.toString() + ': ' + value);
}
return '{' + results.join(', ') + '}';
}
var obj = { "id":"outsider", "sex":"male" };
obj = JSONtoString(obj);
alert(obj); // {id: outsider, sex: male}
alert(typeof obj); // string

만일 prototype.js 를 쓴다면
alert(Object.toJSON(obj)); // {id: outsider, sex: male}


2011/12/06 11:40 2011/12/06 11:40
다중 셀렉트는 자주 사용되는 것이다.
간단히 동작 방법을 알아보자. 아래 방법을 가지고 응용하면 된다.

첫번째.
배열을 읽어와 보여 주는 방법이다. 가장 많이 사용하는 방법으로 데이타가 고정 적일때 사용한다.
배열을 따로 JS 파일을 만들어 읽어 오는 것이 좋다.
만일 배열 데이타가 수시로 바뀐다면 매번 JS 파일을 만들어 주어야 하기 때문에 여간 불편 한것이 아니다.
<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond(this.selectedIndex-1);">
<option value=''>1차 고르시오</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select name=secondOption>
<option value=''>2차</option>
</select>
</form>

<script language="javascript">
function selectSecond(n) {
fs = document.pubform.secondOption;
if(n==-1) {
fs.selectedIndex = 0;
return;
} else {
for(j=0;j<arrSecondText[n].length;j++) {
fs.options[j]=new Option(arrSecondText[n][j],arrSecondValue[n][j]);
}
fs.length=arrSecondText[n].length;
}
}

arrSecondText = new Array(2);
arrSecondValue = new Array(2);

arrSecondText[0] = new Array(6);
arrSecondValue[0] = new Array(6);

arrSecondText[0][0] = "선택";
arrSecondValue[0][0] = "";
arrSecondText[0][1] = "옵션11";
arrSecondValue[0][1] = "11";
arrSecondText[0][2] = "옵션12";
arrSecondValue[0][2] = "12";
arrSecondText[0][3] = "옵션13";
arrSecondValue[0][3] = "13";
arrSecondText[0][4] = "옵션14";
arrSecondValue[0][4] = "14";
arrSecondText[0][5] = "옵션15";
arrSecondValue[0][5] = "15";

arrSecondText[1] = new Array(6);
arrSecondValue[1] = new Array(6);

arrSecondText[1][0] = "선택";
arrSecondValue[1][0] = "";
arrSecondText[1][1] = "옵션21";
arrSecondValue[1][1] = "21";
arrSecondText[1][2] = "옵션22";
arrSecondValue[1][2] = "22";
arrSecondText[1][3] = "옵션23";
arrSecondValue[1][3] = "13";
arrSecondText[1][4] = "옵션24";
arrSecondValue[1][4] = "24";
arrSecondText[1][5] = "옵션25";
arrSecondValue[1][5] = "25";
</script>

두번째.

아래 방법도 유용하다. 서버 스크립트로 요청된 셀렉트 값을 즉시 만들어 주는 방법이다.

위 방법보다는 느리지만 자주 바뀌는 데이타라면 아래 방법이 유용하다.

<form name=pubform method=post action=''>
<select name=selectName onChange="selectSecond();">
<option value=''>1차 고르시오</option>
<option value='1'>1</option>
</select>
<select name=secondOption>
<option value=''>2차</option>
</select>
</form>

<script id="selectOption"></script>
<script language="javascript">
function selectSecond() {
selectOption.src = "optionSelect.php";
}
</script>



2011/12/06 11:40 2011/12/06 11:40
별로 권장하지는 않지만 익스플러로에
자바스크립트 에러 표시가 걸리시는 분들은 아래 스크립트를 하단에 삽입하여 보십시오.

모든 에러메시지가 출력 되지 않습니다.

window.onerror = ErrorSetting
var e_msg="";
var e_file="";
var e_line="";
function ErrorSetting(msg, file_loc, line_no) {
e_msg=msg;
e_file=file_loc;
e_line=line_no;
return true;
}

* 자바스크립트 에러 디버그

var isDebugging = true;
function ErrorSetting(msg, file_loc, line_no) {
var e_msg=msg;
var e_file=file_loc;
var e_line=line_no;
var error_d = "Error in file: " + file_loc +
"\nline number:" + line_no +
"\nMessage:" + msg;
if(isDebugging)
alert("Error Found !!!\n--------------\n"+error_d);

return true;
}
window.onerror = ErrorSetting;

조금더 확장해서 ajax로 에러 기록 할 경우

var isDebugging = false;
var logJsErrors = true;
function ErrorSetting(msg, file_loc, line_no) {
var e_msg=msg;
var e_file=file_loc;
var e_line=line_no;
var error_d = "Error in file: " + file_loc +"\nline number:"
+ line_no +
"\nMessage:" + msg;

if(logJsErrors){
theData = "file="+file_loc+"&line="+line_no+"&err="+msg;
ajaxCtrl(
function(){
return true;
},"ajxerrorLogger.php",theData
);
}

if(isDebugging)
alert("Error Found !!!\n--------------\n"+error_d);

return true;
}
window.onerror = ErrorSetting;


2011/12/06 11:40 2011/12/06 11:40
innerHTML 아래와 같이 script 태그를 넣으면 에러가 생기는 것을 볼수 있습니다.
Act.innerHTML = "<scripttype='text/javascript'>document.write('yesyo.com')</script>";

nnerHTML의 문자열에 script 가 들어 가서 문제가 생깁니다.
이것을 아래와 같이 수정하면 문제가 해결됩니다.


Act.innerHTML = "<scr" + "ipt type='text/javascript'>document.write('yesyo.com')</scr" + "ipt>";


2011/12/06 11:39 2011/12/06 11:39
lwGetByte 는 문자열의 바이트수를 출력해줍니다.
lwTrimByte 는 문자열을 원하는 수만큼 잘라줍니다.

사 용방법은 다음과 같습니다.
a = lwGetByte(str)
b = lwTrimByte(str, 400)

function lwGetByte(s) {

var ls_str = s;
var li_str_len = ls_str.length;

var i = 0;
var li_byte = 0;
var ls_one_char = "";
var ls_str2 = "";

for(i=0; i< li_str_len; i++) {
ls_one_char = ls_str.charAt(i);

if (escape(ls_one_char).length > 4) {
li_byte += 2;
} else {
li_byte++;
}

}

return li_byte;
}

function lwTrimByte(s, nMaxByte) {

var ls_str = s;
var li_str_len = ls_str.length;

var li_max = nMaxByte;
var i = 0;
var li_len = 0;
var li_byte = 0;
var ls_one_char = "";
var ls_str2 = "";

for(i=0; i< li_str_len; i++) {
ls_one_char = ls_str.charAt(i);

if (escape(ls_one_char).length > 4) {
li_byte += 2;
} else {
li_byte++;
}
if(li_byte <= li_max) {
li_len = i + 1;
}
if(li_byte > li_max) {
ls_str2 = ls_str.substr(0, li_len);
return ls_str2;
}
}
}

/*
' ------------------------------------------------------------------
' Function : fc_chk2()
' Description : Enter키를 못치게한다.
' Argument :
' Return :
' ------------------------------------------------------------------
*/
function fc_chk2()
{
if(event.keyCode == 13)
event.returnValue=false;
}
</script>

< textarea name="txt_aaa" rows="5" cols="60" onkeyup="fc_chk_byte(this,10);" onkeypress="fc_chk2()" >      


2011/12/06 11:39 2011/12/06 11:39

1. 정규 표현식이란.

문자열의 특정한 패턴을 표시하거나 검사하기 위한 규칙을 의미하며 어떤 문자열의 집합을 표시하는 텍스트 string이나 일반적인

텍스트 형시의 문서 등에서 문자열을 찾아내거나 검사하고 치환하는데 사용된다. 이러한 정규 표현식은 정규 표현식을 표시하는

특수문자와 정규 표현식을 검사하기 위한 함수가 있다.

2. 패턴을 표현하는 특수 문자

특수 문자

내용

해당문자열

.

임의의 한 글자를 의미한다.

a.b (abc, acb, afb...)

*

* 바로 앞의 문자가 없거나 한개 이상이 있을 경우

a*b (b, ab, aab, aaab...)

+

+ 바로 앞의 문자가 최소 한 개 이상일 때

a+b (ab, aab, aaab...)

?

? 바로 앞의 문자가 없거나 한 개 존재하는 경우

a?b (b, ab, cb, zb...)

^

^ 뒤에 문자열과 같은 문자열로 시작한는 경우

[] 안에서 ^ 는 [] 안의 문자를 제외한 문자를 의미한다.

^ab (ab, abc, abdr...)

$

$ 앞의 문자열과 같은 문자열로 끝나는 경우

ab$ (ab, sab, aaab...)

[]

[] 안의 문자열 중에 하나만의 문자만을 의미한다.

[a-z], [0-9], [a-zA-Z]

{}

{} 앞의 문자열의 개수를 의미한다.

a{1-3}b (ab, aab, aaab)

()

() 안의 문자는 그룹으로 인식한다.

a(bc){2} (abcbc)

|

or 연산자이다.

a(b|c)d (abd, acd)

[[:alpha:]]

모든 알파벳의 문자 한 자를 의미한다.

[a-zA-Z]와 동일

[[:digit:]]

모든 숫자 한 자를 의미한다.

[0-9]와 동일

[[:alnum:]]

알파벳과 숫자중 한 자를 의미한다.

[a-zA-Z0-9]와 동일

[[:space:]]

공백 문자를 의미한다.

[[:punct:]]

구두점을 의미

\

. * + ? ^ $ [] {} () | \ 문자를 표시할때

(\*, \\, \[1\], \|...)

3. 정규 표현식의 특수문자 사용법

1) ^a?bc : a로 시작해서 bc로 끝나는 문자(abc로 시작하는 문자)와 bc로 시작하는 모든 문자 (예 abcd, bcd)

2) ^.a : a앞에 아무 한 문자가 있어야 하고 그 문자로 시작하고 a가 들어간 문자 (예 aa, bacd, match, para)

3) a?b$ : b로 끝나는 문자열 중에 a가 없거나 한 개 이상 존재하는 문자열 (예 b, ab, aab)

4) a?b+$ : 첫 글자는 a가 있거나 없고 b가 한 개 이상이고 b로 끝나는 문자 (예 ab, b, bb, abbb, abbbb)

5) ^ab$ : 첫 글자가 a이고 끝나는 문자가 b인 경우 (예 ab)

6) [ab]cd : a나 b중에 한 글자와 cd가 포함된 acd, bcd를 포함한 문자 (예 acd, bcd, acdse)

7) ^[a-zA-Z] : 영문자로 시작하는 모든 문자 (예 a, b, c, d, ee)

8) [^ab]cd : cd 문자열 앞에 a나 b를 제외한 문자가 있는 문자열 즉, acd와 bcd를 제외한 문자열을 의미한다. (예 scd, dcd, ffcd)

9) a{2,}b : a의 개수가 최소 2개 이상이고 다음 문자가 b인 문자 (예 aab, aaabcd, aaaab)

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

정규표현식 기초

. : 다수의 한문자

? : 0개 이상의 한문자

* : 0개 이상의 문자 또는 문자열

+ : 1개 이상의 문자 또는 문자열

(chars) : (, ) 안의 문자또는 문자열을 그룹으로 묶습니다. 이 문자그룹은 Substitution(return URL)에서 $N 의 변수로 활용할수 있습니니다.

^ : 문자열의 첫문(열)을 지정합니다.

$ : 문자열의 끝 문자(열)을 지정합니다.

\(역슬래쉬) : 정규표현식에서 특별한 의미로 사용되는 문자의 특수기능을 제거합니다.(예:(, ), [, ] . 등)

{n} : 정확히 n번 반복

{n,} : n번 이상 반복

{n,m} : n 이상 m 이하 반복

[chars] : 문자들의 범위 또는 표현할 수 있는 문자들을 설정합니다.
예) [a-z] : a 부터 z 까지의 소문자, [tT] : 소문자 t 또는 대문자 T

정규표현식 단축표현들

[:alpha:] : 알파벳. [a-zA-Z] 와 같은 표현

[:alnum:] : 알파벳과 숫자. [a-zA-Z0-9] 와 같은 표현

[:digit:] : 숫자 [0-9] 와 같은 표현

[:upper:] : 대문자. [A-Z] 와 같은 표현


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

PHP는 POSIX와 Perl이라는 두 가지 스타일의 정규 표현식을 지원한다. POSIX스타일의 정규 표현식이 PHP에서 기본이지만,

Perl 스타일도 PCRE(Perl-Compitable Regular Expression)라이브러리를 사용하여 표현할수 있다.

아래의 설명은 POSIX 스타일을 기준으로 한다.


. : 문자는 줄바꿈 문자(\n)을 제외한 모든 문자를 대신할수 있다 (하나의 문자)

ex) .at : 이런 정규식은 cat, sat, mat등이 해당된다.

[a-z]at : []의 문자들은 문자 클래스라고 하고, 일치시키는 문자는 이 클래스에 속해야 한다. []안의 것들은

모두 각각 하나의 문자이다.

ex) [aeiou] : 영어의 모음에 해당되는 단어로 []안의 하나의 문자가 된다.

또한 범위를 사용해서도 표현할수 있는데 -를 사용한다.

ex) [a-zA-Z] : 대소문자 알파벳 한 문자를 의미한다.

집합의 구성원이 아니라는 표현으로 ^를 사용한다. 이는 []안에 ^가 있을경우 not이라는 의미를 가진다.

ex) [^a-z] : 소문자 알파벳 이외의 한 문자를 의미한다.


[[:alnum:]] 알파벳 문자, 숫자

[[:alpha:]] 알파벳

[[:lower:]] 소문자

[[:upper:]] 대문자

[[:digit:]] 십진법의 숫자

[[:xdigit:]] 16진법의 숫자

[[:punct:]] 구두점

[[:blank:]] 탭, 스페이스

[[:space:]] 공백 문자들

[[:cntrl:]] 컨트롤 문자들

[[:print:]] 모든 출력 가능한 문자들

[[:graph:]] 스페이스를 제외한 모든 출력 가능한 문자들


* : 패턴이 0번 이상 반복될 수 있음을 나타내고l

+ : 한번이상 반복될 수 있음을 나타낸다.

ex) [[:alnum:]]+ : 알파벳이나 숫자 한문자가 한번이상 반복. 즉, 적어도 하나이상의 알파벳이나 숫자를 의미한다.

한 문자열 뒤에 어떤 문자열이 반복해서 나타남을 정규 표현식으로 나타낸 것은 아래와 같다.
ex) (very )*large : 이는 large, very large, very very large등과 일치한다.

{}를 통해서 반복되는 횟수를 제한할 수 있다.
{3}는 세번 반복, {2, 4}은 두번에서 네번 사이로 반복, {2, }는 적어도 2번 이상 반복의 의미이다.
ex) (very ){1, 3} : very , very very , very very very 와 일치한다.

^ : 정규 표현식의 시작부분에 사용되며, 검색하는 문자열의 맨 앞부분에 이 표현이 있어야 함을 의미한다.
$ : 정규 표현식의 뒷부분에 사용되고 이 표현으로 문자열이 끝나야 됨을 의미한다.미
^[a-z]$ : a부터 z사이의 한문자를 의미한다.

| : 선택을 표현하는 경우 사용된다.
ex) com|edu|net : com이거나 edu이거나 net인경우를 의미한다.

\ : '.', '{', '$', '-', 등의 특수문자를 정규 표현식을 위한 특수문자가 아닌 문자로 사용하고 싶을때 '\'를 붙여서 사용한다.
'\'를 표현할때는 '\\'라고 써준다.
ex) \\\$ : 이 경우 \$를 찾고자 할경우를 의미하게 된다.

POSIX 정규 표현식에서의 특수문자의 의미
1) []밖에서 사용되었을때
- / : 특수문자 이스케이프
- ^ : 문자열의 처음에서 일치되어야 함
- $ : 문자열의 끝에서 일치되어야 함
- . : 줄바꿈(\n)을 제외한 모든 문자와 한개를 의미
- | : 또는의 의미
- ( : 패턴의 시작
- ) : 패턴의 끝
- * : 0번 이상 반복됨
- + : 1번 이상 반복됨
- { : 반복 횟수 지정의 시작
- } : 반복 횟수 지정의 끝
- ? : 하위 표현식을 옵션으로 취급
2) []안에서 사용되었을때
- / : 특수문자 이스케이프
- ^ : 맨 처음 시작되었을 때만 not의 의미, 이외에는 문자로 인식
- - : 문자의 범위 지정

ex) ^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$
대소영문자, 숫자, _, -, .중 한개의 문자인데 문자열의 처음에 나타나야 되고 +가 있어서 한번이상 반복된다.
그 이후 @ 문자 한문자가 있어야 되고 대소영문자, 숫자, -중 한개의 문자인데 +가 있어서 한번이상 반복된다.
그 이후 . 문자 한문자가 있어야 되고 대소영문자, 숫자, -, .중 한개의 문자인데 +가 있어서 한번이상 반복되며 끝난다.




2011/12/06 11:39 2011/12/06 11:39
<script>
<!--
function writ() {
newwin=open('','newwin','width=500,height=500')
newwin.document.writeln("<html><body>")
newwin.document.writeln("<center><font color=green size=4><b>결과화면</b></font></center><hr& gt;")
newwin.document.writeln("<script>")
newwin.document.writeln(document.a.b.value)
newwin.document.writeln("</script>")
newwin.document.writeln("<hr></body></html>")
}
//-->
</script>

<form name=a>
<textarea name=b cols=60 rows=15>
document.write("<font color=blue>안녕하세요?</font><br>");
document.write("<font color=red>반갑습니다</font><br>");
</textarea>
<input type=button value=미리보기 onclick=writ()>
</form>



2011/12/06 11:38 2011/12/06 11:38
&#x000A;

ex)
<div id='example'>
<h2>Demo</h2>
<pre class="brush: javascript">&#x000A; // SyntaxHighlighter makes your code&#x000A; // snippets beautiful without tiring&#x000A; // your servers.&#x000A; // http://alexgorbatchev.com&#x000A; var setArray = function(elems) {&#x000A; this.length = 0;&#x000A; push.apply(this, elems);&#x000A; return this;&#x000A; }&#x000A;</pre>&#x000A;

</div>


2011/12/06 11:38 2011/12/06 11:38

<HTML>
<HEAD>
<TITLE>
화면상의 객체 위치,크기 </TITLE>
<SCRIPT LANGUAGE="JavaScript" >
<!--
function getBounds(tag)
{
var ret = new Object();
if(document.all) {
var rect = tag.getBoundingClientRect();
ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
ret.width = rect.right - rect.left;
ret.height = rect.bottom - rect.top;
} else {
var box = document.getBoxObjectFor(tag);
ret.left = box.x;
ret.top = box.y;
ret.width = box.width;
ret.height = box.height;
}
return ret;
}

//-->
</SCRIPT>
</HEAD>

<BODY>
<BR><BR><BR><BR><BR>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="youranytag" style="border:1px solid ;width:500px;">aa</span>

<SCRIPT LANGUAGE="JavaScript">
<!--
var box = getBounds(document.getElementById('youranytag'));
var str = "left:"+box.left+"/top:"+box.top+"/width:"+box.width+"/height:"+box.height;
alert(str);
//-->
</SCRIPT>
</BODY>
</HTML>



2011/12/06 11:38 2011/12/06 11:38

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">

// InternetVersion
function getInternetVersion(ver) {
var rv = -1; // Return value assumes failure.
var ua = navigator.userAgent;
var re = null;
if(ver == "MSIE"){
re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
}else{
re = new RegExp(ver+"/([0-9]{1,}[\.0-9]{0,})");
}
if (re.exec(ua) != null){
rv = parseFloat(RegExp.$1);
}
return rv;
}

//브라우저 종류 및 버전확인
function browserCheck(){
var ver = 0; // 브라우저 버전정보
if(navigator.appName.charAt(0) == "N"){
if(navigator.userAgent.indexOf("Chrome") != -1){
ver = getInternetVersion("Chrome");
alert("Chrome"+ver+"입니다.");
}else if(navigator.userAgent.indexOf("Firefox") != -1){
ver = getInternetVersion("Firefox");
alert("Firefox"+ver+"입니다.");
}else if(navigator.userAgent.indexOf("Safari") != -1){
ver = getInternetVersion("Safari");
alert("Safari"+ver+"입니다.");
}
}else if(navigator.appName.charAt(0) == "M"){
ver = getInternetVersion("MSIE");
alert("MSIE"+ver+"입니다.");
}
}
</script>
</head>
<body>
<input type="button" value="브라우저판별" onclick="browserCheck();">
</body>
</html>

========================================================================================

<!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">
<body>
<script>
var Station = {
check : function (type, checkStr, checkPoint)
{
var name = "ETC";
for ( var list in checkPoint )
{
if (checkStr.indexOf(list) != -1)
{
name = checkPoint[list];
}
}
escape("this." + type + " = function () { return name }") ;
return name;
},
os : function ()
{
var checkStr = navigator.platform.toLowerCase();
var checkPoint =
{
"win" : "WINDOW", "mac" : "MAC", "unix" : "UNIX", "linux" : "LINUX"
}
return this.check("os", checkStr, checkPoint );
},
browser : function ()
{
var checkStr = navigator.userAgent.toLowerCase();
var checkPoint =
{
"msie 6" : "IE6" , "msie 7" : "IE7", "firefox" : "FF", "navigator" : "NETSCAPE", "opera" : "OPERA"
}
return this.check("browser", checkStr, checkPoint);

}
}
document.write("OS : " + Station.os() + "<br/>");
document.write("Browser : " + Station.browser() + "<br/>");
</script>
</body>
</html>




2011/12/06 11:37 2011/12/06 11:37

function scrollEnd(){
var scrollheight = document.compatMode == "CSS1Compat" ? document.documentElement.scrollHeight :

document.body.scrollHeight;
var clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight :

document.body.clientHeight;
var ScrollTop = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop :

document.body.scrollTop;
var scrollPos = scrollheight - ScrollTop;

if (clientHeight == scrollPos) { // 스크롤 바가 맨 밑에 위치한다면
alert ("끝까지 확인함!!");
}

<BODY onscroll=scrollEnd();>




2011/12/06 11:37 2011/12/06 11:37

<script type="text/javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
location.href = "http://m.naver.com";
break;
}

}
</script>




2011/12/06 11:37 2011/12/06 11:37

구글번역에서 소리를 제공하는 url를 이용하여 간단한 TTS 구현 예제

<HTML>
<HEAD>
<TITLE> 구글음성서비스 </TITLE>
<META name="Generator" content="EditPlus">
<META name="Author" content="">
<META name="Keywords" content="">
<META name="Description" content="">
<SCRIPT type="text/javascript">
<!--
function doVoice(){
var str = document.getElementById("txt").value;
var urlPar="http://translate.google.co.kr/translate_tts?ie=UTF-8&q="+encodeURI(str)+"&tl=ko&prev=input";
document.getElementById("bgs").src =urlPar;

document.getElementById("view").innerText=encodeURI(str);
}
//-->
</SCRIPT>
</HEAD>

<BODY>
한글을 입력해주세요<br>

<INPUT type="text" name="txt" id="txt">
<INPUT type="button" value="음성듣기" onclick="javascript:doVoice()">
<div id="view"></div>

<bgsound id="bgs">


</BODY>
</HTML>               




2011/12/06 11:36 2011/12/06 11:36

// JavaScript Document
// Body에 object함수 호출
function object()
{
document.write("<object id='factory' style='display:none' classid='clsid:1663ed61-23eb-11d2-b92f-008048fdd814' codebase='http://www.meadroid.com/scriptx/smsx.cab'>");
document.write("</object>");
}

function printWindow()
{
factory.printing.header = "" // 머릿글
factory.printing.footer = "" // 바닥글
factory.printing.portrait = true // true 세로출력 , false 가로출력
factory.printing.leftMargin = 10
factory.printing.topMargin = 10
factory.printing.rightMargin = 10
factory.printing.bottomMargin = 10

factory.printing.Print( true, window ) // 대화상자 표시여부 / 출력될 프레임명
}

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

예)

<HEAD>

<SCRIPT language="javascript" src="FactoryPrint.js"></SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="javascript">

object(); // <BODY> 바로밑에서 호출

</SCRIPT>

</BODY>

printWindow() 함수에서 셋팅을 한후

호출하면 프린트가 됨.




2011/11/23 18:46 2011/11/23 18:46

Scrollable HTML table

Overview

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.

Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrollable HTML table</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}

table thead {
cursor: pointer;
}

table thead tr,
table tfoot tr {
background: #c0c0c0;
}

table tbody tr {
background: #f0f0f0;
}

td, th {
border: 1px solid white;
}
</style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
<thead>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</thead>

<tbody>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">30</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">31</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">32</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">33</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">34</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">35</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">36</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">37</th>
</tr>
</tbody>

<tfoot>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
* Scrollable HTML table
* http://www.webtoolkit.info/
*
**/

function ScrollableTable (tableEl, tableHeight, tableWidth) {

this.initIEengine = function () {

this.containerEl.style.overflowY = 'auto';
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
} else {
this.containerEl.style.overflowY = 'hidden';
this.tableEl.style.width = this.newWidth +'px';
}

if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
}
}

if (this.tfoot) {
var trs = this.tfoot.getElementsByTagName('tr');
for (x=0; x<trs.length; x++) {
trs[x].style.position ='relative';
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
}
}

;


}



2011/10/11 12:10 2011/10/11 12:10
<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>                                       


2011/09/21 22:48 2011/09/21 22:48
Javascript 예약어
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



2011/09/07 01:28 2011/09/07 01:28

Javascript 에서 PHP 함수 사용

Javascript 에서 PHP에서 많이 사용되는 함수를 사용하고자 할때 함수를 다시 만들거나 , 또는 PHP에서 출력을 한후에 Javascript 에서 사용할수 있도록 변수 등에 저장한 후 사용을 합니다. 기본적인 함수를 일일이 만들거나 또는 PHP에서 출력을 하지 않고 바로 PHP의 유용한 함수들을 사용할수 있는 PHP.js 프로젝트가 있습니다. 많은 브라우저에서 동일하게 동작을 하고 사용방법또한 손쉽게 사용가능합니다.

PHP.js (http://www.phpjs.org)

사용자 삽입 이미지
PHP.js

다운로드 (http://phpjs.org/packages/download/308/name:php.default.min.js)

PHP.js 지원 함수 리스트
Function overview (http://phpjs.org/functions/index)



2011/09/07 01:27 2011/09/07 01:27
<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>


2011/03/06 10:13 2011/03/06 10:13

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>




2011/01/27 01:15 2011/01/27 01:15
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() 메소드를 쓰는것이 좋겠구,
각각 장점과 단점이 있으며 선택해서 쓰시면 될 것 같습니다.



2011/01/27 01:14 2011/01/27 01:14
숫자에 컴마(,) 쓰고 한글로 숫자 표시

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,''); 와 같이 쓰면 됩니다.


2010/09/02 18:07 2010/09/02 18:07
function pause(ms)
{
    var date=new Date();
    curDate=null;
    do{var curDate=new Date();}
    while( curDate - date < ms);
};



2010/08/18 21:02 2010/08/18 21:02
 

ㅇ 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;
   }

 



2010/08/18 21:01 2010/08/18 21:01
 

<!-- 퀵메뉴스크립트 -->
<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>




2010/08/18 20:56 2010/08/18 20:56
<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>



2010/06/07 14:16 2010/06/07 14:16