'Develop/Script & HTML' 카테고리의 글 목록

Character-set이 UTF-8인 환경에서 EUC-KR환경으로 submit을 했을 때 한글이 깨져서 전송이 되는 문제로
JAVA 환경인 경우에는 통상적으로 전송 받는 쪽에서

request.setCharacterEncoding("euc-kr");   
또는 
String Variable_Name = new String( Input_Variable_Name.getBytes("UTF-8"),"EUC-KR") );

위와 같은 형식으로 한글에 대한 처리를 해주고는 합니다. 허나 이 방식은 JAVA에서 브라우저에 Data를 바인딩 하는 경우에는 원할하게 처리가 되었습니다만, 브라우저를 이용하는 사용자가 직접 입력한 값이나 Hidden 필드에 Script로 값을 넣어 전송 등, 위와 같은 처리를 해주어도 올바른 값을 전송받지 못하는 경우가 발생 할 수 있습니다. 특히 한글은 항상 깨지더군요.

확인한 방법으로는 Javascript로 Submit을 제어하는 경우 전송이 이루어지는 submit();구문 직전에 아래와 같은 구문을 추가해 주면 문제가 해결되었습니다. submit 직전에 브라우저 document의 설정을 변경하는 방법입니다.

// EUC-KR로 변경했던 Character-set을 폼 전송 후 원래의 Character-set으로 설정하기 위해
// 원래의 Character-set 정보를 변수에 담아 둡니다.
var defCharset = document.charset;    

if (/MSIE/.test(navigator.userAgent)) {
    document.charset = 'EUC-KR';
} else {
    form_name.acceptCharset = 'EUC-KR';
}

form_name.submit();
document.charset = defCharset;

저작자표시

라디오 버튼을 동적으로 생성하기 위해 만들었던 jQuery인데...
DWR과 같이 사용을 한터라.... 범용으로 사용하기에는 무리가 있을 수 있다.

음...데이터 형태만 맞추면 가능할지도....^^;;

/************************************************************************************

' function명: addRadioMap

' 내용 : 라디오버튼 동적으로 생성.

' jQuery.js(core)에 삽입

' strGrpName = 라디오버튼 그룹명.

' data = [{key:'string', value:'string'},{key:'string', value:'string'},{key:'string', value:'string'}] 형식

' strKey = Map데이터의 key

' strValueKey = Map데이터의 value key

*************************************************************************************/

addRadioMap: function ( strGrpName, data, strKey, strValueKey ) {

var arrText = [];

for( var iCnt in data ){

arrText[iCnt] = " <input type='radio' name='"+strGrpName

+"' id='"+data[iCnt][strKey]+"'value='"+data[iCnt][strValueKey]+"'>"+data[iCnt][strValueKey];

}

// 해당 테그의 압쪽에 넣는다.

this.prepend(arrText.join(' ')); //or this.html(arrText.join(''));

}

저작자표시

요즘은 웹 에디터를 사용하여 DB에 저장을 할 때

그냥 통째로 HTML 태그와 함께 저장을 하는 경우가 많아지는 것 같다...

그 내용을 대충 요약해서 보여줘야 하는데...

아무생각없이 조회된 내용을 몇 글자 내로 잘라서 보여 줬더니

그 속에 같이 저장된 태그들 덕에 욕먹을 뻔했던 기억이....

지금 적어놓는 건 JAVA 프로퍼티에서 걸러 줬을 때 사용하던 정규식이다..

(내가 이렇게 사용했다는 것뿐...)

참고로,

정규식은 javascript에서도 사용할 수 있다는거.....^^;;

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

// HTML 태그제거 정규식 적용

var_name = var_name.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>","").replaceAll("\r|\n| ","");

// 위에 구문이 넘 길어서 쪼개 놓으면 요렇게...

//var_name = var_name.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>","");

//var_name = var_name.replaceAll("("\r|\n| ","");

return var_name;

저작자표시

예전에 소수점 처리 때문에 꽤나 애먹었던 기억이 있다.
이리저리 검색도 해보고, 도움말도 보고....

<script language= "JavaScript">
// strValue : 처리하려는 값
// strType : '* 소수점 계산. 0:절사, 1:반올림, 2:올림
function fnFixNum( strValue, strType)
{
var iType = parseInt( strType );
switch ( type )
{
case 0 : // 절사
return( parseInt( strValue ) );
break;

case 1 : // 반올림
if( strValue< 0 ){ //음수일 경우

if( ( Math.abs( strValue ) + 0.5 )
- ( parseInt( Math.abs( strValue ) + 0.5 ) ) == 0 ){
return ( ( parseInt( Math.abs( strValue ) + 0.5 ) * -1 ) +1 );
}
else
{
return ( parseInt( Math.abs( strValue ) + 0.5 ) * -1 );
}

} else { //양수 일 경우
return ( parseInt( strValue + 0.5 ) )
}
break;

case 2 : //올림
if( ( value - parseInt( strValue ) ) >= 0.1 ) {
return ( parseInt( strValue ) +1 );
}
if( ( value - parseInt( strValue ) ) <= -0.1 ){
return ( parseInt( strValue ) -1 ) ;
}

}//End switch

}//End function
</script>

javascript Trim() 함수

String.prototype.trim() = function()
{
return this.replace(/(^ *)|( *$)/g, "");
}

String.prototype.ltrim() = function()
{
return this.replace(/(^ *)/g, "");
}

String.prototype.rtrim() = function()
{
return this.replace(/( *$)/g, "");
}

function rollBanner(divId,intervalTime) {
var divId = document.getElementById(divId); // Roll Div 선언
var pTag = divId.getElementsByTagName("p")[0]; // absolute P 변수 선언
var imgTag = divId.getElementsByTagName("img"); //이미지 변수 선언 (실제로 여기선 필요없음. 다 링크가 달렸기때문에..)
var textTag = divId.getElementsByTagName("a"); // 단순 Text 변수 혹은 이미지에 걸린 링크 선언
var pWidth = pTag.offsetHeight; //p태그가 가진 Width값 변수
var speed = 1; //1픽셀씩 이동

pTag.style.top = 0 + "px"; //수정불가, 위치를 옮기고 싶다면 div 자체에 margin값을 스타일로 줘야함 (p자체가 움직이는 구조)

var bannerArray = new Array(); // 배너를 롤링하기 위해 배열복사(배열까진 필요없을것 같기도함)
bannerArray[0] = pTag.innerHTML; // 배열에 P 태그가 가지고 있는 항목 저장

if (textTag.length != 0) // a 태그가 있으면 (img로 대체할수도 있겠지)
{
if (pWidth > divId.offsetHeight) //p width값이 div width 값보다 크다면 움직여라 (작은데도 움직일거면 삭제)
{
pTag.style.top = pTag.offsetTop; //absolute P태그의 left를 선언 (offset은 읽기전용이라서..)
pTag.innerHTML=pTag.innerHTML+bannerArray[0]; //일단 처음에 배너 배열을 하나 더 복사해서 길게 만듬

var rollInterval = setInterval(
function()
{
/* onmouse Event */
pTag.onmouseover = function() {
speed=0;//이동 안함
};
pTag.onmouseout = function() {
speed=1;//1픽셀씩 이동
};

pTag.style.top = parseInt(pTag.style.top)-speed + "px";//1픽셀씩 이동
if (parseInt(pTag.style.top) % pWidth==0)
/* 배너 넓이 만큼 이동했을시 */
{

pTag.innerHTML=pTag.innerHTML+bannerArray[0]; //뒤로 배너배열 하나더 추가
}
}
,intervalTime);

}
}

}

</script>

</head>

</p>
</div>

</body>
</html>

출처 : 다른 분이 찾아준 부분이어서 모름.....

<html>
<head>
<script language="javascript">
function ExemSubmit( str )
{
//document.exem.method    = "post";    //아래 form tag에 적어두었으면 적을 필요 없음.
document.exem.action    = "URL or Page"; //아래 form tag와 중복 된다면 전송이 잘 이루어지지 않는다.
document.exem.postparameter.value = "xxxx";    //PageMode와 같은 파라메터 값을 지정하여 전송할 수 있다.

//str변수를 받아 사용할 수 있다.
}

function chkForm()
{
//여기에 폼을 submit할 때 체크해야하는 로직을 적으세요//
}
</script>
</head>

<body>
<form id="exem" name="exem" method="post" action="xxx.jsp" onsubmit="return chkForm();">
<input type='button' name='insert' value='저장' onClick='JavaScript:ExemSubmit("Insert")'> 
<input type='button' name='update' value='수정' onClick='JavaScript:ExemSubmit("Update")'> 
<input type='button' name='delete' value='삭제' onClick='JavaScript:ExemSubmit("Delete")'>


</form>
</body>
</html>

결국은 펌이 되어버렸네.....
dhtmlframe.document.body.innerHTML; 부분에서 body란 구문만 눈치 챘어도....
자력으로 만들 수 있었는데....

만들려고 삽질한게 2시간.....
찾아보고 펌해서 실행해본건.... 10분정도.... 허억......

일단 소스
========================================================================================================
출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=5413

기본 원리는 IFAME의을 편집 할 수 있도록 하고 자바스크립트에서 DHTML편집 할 수 있는 형태이며 저장은 자바스크립트에서 값을 변환 하고 넘기는 방식 입니다.

1. 편집창 만들기

편집창은 iframe태그를 사용 합니다.

속성으로는 다음과 같은 것들이 있습니다.

src="" iframe에서 연결 시킬 경로 width="" 너비 height="" 높이 name="" 이름으로 FRAME의 이름과 동일 하며 taget의 대상이 될 수 있습니다.

예) <iframe src="http://www.yahoo.co.kr" width="700" height="400" name="html"></ifame>

ifrme은 반드시 종료태그가 있어야 합니다.

IFRAME은 FRAME을 이미지 형식으로 만드는 태그 입니다. 하지만 일반형식은 브라우저의 내용을 그냥 읽어오는 형식 입니다. 그래서 편집 가능 하도록 자바스크립트에서 만들어 줍니다.

<HTML>

</BODY>
</HTML>

여기서 자바스크립트는 iframe이후에 넣어 줘야 합니다.
그럼 위의 파일을 html로 만들고 브라우저에서 읽어오면 편집 가능 하도록 되어 있을 것 입니다.

2. 편집툴바 만들기

<HEAD>와 </HEAD>사이에 자바 스크립트 만듭니다.

<SCRIPT langauge="javascript">
function htmledit(excute){
dhtmlframe.document.execCommand(excute);
}
</SCRIPT>

그리고 툴바에는 볼드,이탤릭,언더라인 만들고 다음 과 링크를 연결 합니다.

다음 예제를 저장 하고 브라우저를 통해 실행 합니다.

<HTML>

<SCRIPT langauge="javascript">
function htmledit(excute){
dhtmlframe.document.execCommand(excute);
}
</SCRIPT>
</HEAD>

</HTML>

브라우저에서 편집 가능 한것을 볼수 있습니다.

볼드,이탤릭,언더라인 이외 무엇이 있을까요.

cut - 자르기
copy - 복사
paste - 붙여넣기
justifyleft - 좌측정렬
justifycenter - 중심정렬
justifyright - 우측정렬
insertorderedlist - 점표시목록
insertunorderedlist - 숫자목록
outdent - 들여쓰기 줄이기
indent- 들여쓰기 늘이기
createlink - 링크
fontname - 글꼴
fontSize - 글사이즈

형식등로 사용 할 수 있습니다.

그러나 글꼴 이나 글크기등은 값이 필요 합니다. 이경우 htmledit(excute)에서 excute이외 하나더 인자가 필요 합니다. values 라고 하나 더 추가 합니다.

<SCRIPT langauge="javascript">
function htmledit(excute,values){
if(values==null){
dhtmlframe.document.execCommand(excute);
}
else
dhtmlframe.document.execCommand(excute,"",values);
}
}
</SCRIPT>

글꼴을 궁서체로 만들고 싶으면

htmledit('fontname','궁서체') 가 됩니다. 다음 예제를 테스트 해보세요

<HTML>

<HEAD>
<TITLE>웹에디터 예제3</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
</SCRIPT>
</HEAD>

<BODY>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>

</HTML>

3. 값넘기기

이제까지 HTML과 자바스크립트로만 이용 해서 만들었습니다. 이렇게 만든 값을 CGI(PHP,ASP..)등으로 보내고야 합니다. 아시다 싶이 값을 전송 하는것은 form태그를 시용 합니다.

form을 만듭니다. 그리고 form의 속성중 name을 form으로 만들고(아무거나 만들어도 상관 없겠죠)

<IFRAME>밑에 <TEXTAREA></TEXTAREA>을 만듭니다. 이름은 아무거나.. 저는 comment라 지었습니다.

그리고 HEAD자바 스크립트에 다음과 같이 추가 합니다.

function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}

아래의 예제를 실행 하고 HTML보기를 클릭 하면 HTML소스가 <TEXTAREA>에 복사 되는 것을 볼 수 있습니다.

그상태에서 다른 CGI에서 comment로 변수로 읽어 저장 되는 것 입니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제4</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>

<BODY>
<form name=form>
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><A href="javascript:datasubmit()">HTML보기</a>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</form>
</BODY>

</HTML>

그럼 다른 CGI(PHP,ASP..)을 보내기 위해 소스를 다듬어 보도록 하겠습니다.
먼저 <TEXTAREA>에 STYLE="display: none"을 추가 합니다.
그럼 <TEXTAREA STYLE="display: none">가 되며 브라우저에서 보이지 않게 됩니다.
그리고 <form>에는 제대로 보내고자 하는 CGI위치와 method를 지정 합니다.

<A href="javascript:datasubmit()">HTML보기</a>을
<input type="submit" value="확인" Onclick="datasubmit()"> 으로 바꿉니다.

<HTML>

<HEAD>
<TITLE>웹에디터 예제5</TITLE>
<SCRIPT langauge="javascript">
function htmledit(excute,values)
{
if(values==null)
{
dhtmlframe.document.execCommand(excute);
}
else
{
dhtmlframe.document.execCommand(excute,"",values);
}
}
function datasubmit()
{
form.comment.value = dhtmlframe.document.body.innerHTML;
}
</SCRIPT>
</HEAD>

<BODY>
<form name=form method=post action="test.php">
<A href="javascript:htmledit('cut');">자르기</a>
<A href="javascript:htmledit('copy');">복사</a>
<A href="javascript:htmledit('paste');">붙여넣기</a>
<A href="javascript:htmledit('justifyleft');">좌측정렬</a>
<A href="javascript:htmledit('justifycenter');">중심정렬</a>
<A href="javascript:htmledit('justifyright');">우측정렬</a>
<A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
<A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
<A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
<A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
<A href="javascript:htmledit('createlink');">링크</a><BR>
글꼴 >
<A href="javascript:htmledit('fontname','굴림');">굴림</a>
<A href="javascript:htmledit('fontname','궁서');">궁서</a>
글크기 >
<A href="javascript:htmledit('fontSize',2);">2</a>
<A href="javascript:htmledit('fontSize',3);">3</a>
<A href="javascript:htmledit('fontSize',4);">4</a>
<A href="javascript:htmledit('bold');">볼드</A>
<A href="javascript:htmledit('italic');">이탤릭</A>
<A href="javascript:htmledit('underline');">언더라인</A>
<A href="javascript:htmledit('fontname');">언더라인</A>
<P><IFRAME NAME=dhtmlframe></IFRAME>
<P><TEXTAREA NAME="comment" ROWS="3"></TEXTAREA></P>
<P><input type="submit" value="확인" Onclick="datasubmit()">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</form>
</BODY>

</HTML>

지금까지 공개 되었던 소스보다 간단하다는것을 알 수 있습니다. 하지만 중요한 요소는 다들어 가 있으며 여기서부터는 살을 붙이고 디자인도 바꾸면 됩니다. 그 몫은 여러분이 해야 할 일 입니다.

1. 모든 제어권을 새로 띄워지는 창이 가짐.
-> showModalDialog로 생성된 팝업창을 닫아야 부모창은 다른 액션을 취할 수 있음.

2. 사용방법
   window.showModalDialog("url","arguments","options");
   - url은 모달다이어로그로 열 html 문서의 주소
   - arguments는 대화 상자에 넘겨줄 인자
   - options
   dialogHeight : pixel 높이
   dialogWeight : pixel 너비
   dialogLeft 　: 좌측 상단의 x 좌표
   dialogTop 　 : 좌측 상단의 y 좌표
   center : 중앙위치설정(yes/no)
   help : help 아이콘(yes/no)
   scroll : 스크롤바(yes/no)
   resizable    : 크기조절 가능여부(yes/no)
   status : 상태표시줄 표시여부(yes/no)

3. arguments 전달방법(부모창 -> 모달창)
   1) window.showModalDialog("URL", window, "dialogWidth:600px; dialogHeight:600px;status:no;help:no");
-> arguments로 window 객체를 넘겨주었고 모달창에서는 window.dialogArguments 로 parent Object에 접근가능
   var win = window.dialogArguments;
   var pform = win.document.dataForm;
   2) 여러개의 객체를 넘기는 방법
<INPUT TYPE="text" ID="gHtxtZipNo" SIZE="10">
<INPUT TYPE="text" ID="gHtxtAddr" SIZE="30">

객체를 생성해서 넘긴다.
var oArgObj = new Object();
oArgObj.pZipNo = "123456";
oArgObj.pAddr = "zzzzzz";

window.showModalDialog("URL", oArgObj, "dialogWidth:600px; dialogHeight:600px;status:no;help:no");

모달창에서 넘어온 값을 참조방법

var paramObj = window.dialogArguments;

alert(paramObj.pZipNo);

4. Return 값 전달방법(모달창 -> 부모창)
   부모창
   -> rVal = window.showModalDialog("URL", window, "dialogWidth:600px; dialogHeight:600px;status:no;help:no");

   모달창
   -> var arg = window.dialogArguments; 부모창에서 인자로 넘어온 값
window.returnValue = 호출한 페이지로 넘길 값(위의 경우 이 값은 rVal에 저장된다)
window.close();

출처 : http://blog.naver.com/lsy94307/140011313721

Function WeekDay( In_Date )

Dim strWDay

strWDay = weekday(dates)

Select Case strWDay

Case "1"
strWDay= "일"

Case "2"
strWDay = "월"

Case "3"
strWDay = "화"

Case "4"
strWDay = "수"

Case "5"
   strWDay = "목"

Case "6"
strWDay = "금"

Case "7"
strWDay = "토"

   End Select

   WeekDay = strWDay

End Function

IE에서 setAttribute로 이벤트 생성시 문제 해결방법

2007-05-29 14:20

카테고리 : JavaScript

http://blog.paran.com/fusion/19578178

출처 : http://ani2life.egloos.com/2192418

요즘들어 이런저런 코드를 가지고 응용해 보곤 하는데...

정말 멋진 분들 많다...라는 생각과 부지런 해야겠다라는 생각을 자주하게 된다...

+++ ------------------------------------------------

아래와 같이 버튼 객체를 하나 생성합니다.

var obj = document.createElement('input');
obj.setAttribute('type','button');

그리고 이 버튼을 클릭시 경고창을 띄우도록 아래와 같이 코딩합니다.

obj.setAttribute('onclick','alert(1)');

IE에서는 동작하지 않습니다. IE7 Beta2 에서도 테스트 해봤지만 고쳐지지 않았습니다.
IE에서는 아래와 같이 코딩하여야 동작합니다.

var obj = document.createElement('<input onclick="alert(1)">');

때문에 IE와 기타 브라우저에서의 객체 생성을 다르게 해주어야 합니다.

그렇다고 navigator.userAgent 를 이용하여 브라우저를 구분하는 방식은 좋지 못한 방식입니다.
이 부분에 대한 자료를 찾지 못해서 직접 다양하게 테스트 해보고 가장 괜찮다 싶은 방법을 찾아냈습니다.

아래의 코드는 IE에서만 'tmp'라는 경고창이 뜨며 다른 브라우저에서는 null 값으로 처리됩니다.

obj["onclick"] = 'tmp';
alert(obj.getAttribute('onclick'));

이 특징을 이용하여 아래와 같은 코딩으로 IE와 기타 브라우저의 객체 생성을 방법을 구분할 수 있습니다.


var obj = document.createElement('input');
obj["onclick"] = 'tmp';

if(obj.getAttribute('onclick')){ //IE전용 객체 새로생성
    var obj = document.createElement('<input onclick="alert(1)">');
}
else{ //표준 지키는 멋진 브라우저는 기존 객체에 이벤트만 추가
    obj.setAttribute('onclick','alert(1)');
}

//나머지 속성 추가
obj.setAttribute('type','button');

아래와 같은 코드를 생각하시는 분들도 계시리라 생각합니다.

obj["onclick"] = 'alert(1)';

물론 IE에서 obj.getAttribute('onclick')을 통해 속성이 추가됐음을 확인 할 수 있지만 동작은 하지 않습니다. ^^;

언제나 IE는 브라우저들 사이에 왕따인것 같습니다.
코딩할것도 많은데 IE 때문에 이거 해결하느라 시간 다 보냈습니다. ㅠㅠ

setAttribute로 onclick속성을 만들면 이벤트가 실행됩니다.

onclick속성이 어떤 함수를 실행하기를 바란다면

setAttribute의 2번째 인수에는 그 함수의 참조를 넣어줘야 합니다.

그런데 그 함수에 인수까지 넣어줘야 한다면

인수를 넣은 함수를 실행시키는 함수를 만들어 참조를 넣어줘야 합니다.

아래와 같습니다.

buttonNode.setAttribute("onclick", function() { deleteItem(count-1); } );

그냥 deleteItem이라는 함수를 실행시킬 경우는

문자열이 아닌 deleteItem이라는 참조를 넣어주면 됩니다.

아래와 같습니다.

buttonNode.setAttribute("onclick", deleteItem );

두 개를 만들어야 두번째 버튼을 이용해 처음 만들어 진것을 지울 수 있군요 ^^;;

코드를 알아낼수있는 방법
<html>
<head>
<script>
function key_check(){
alert("키번호는 [" +event.keyCode+ "] 입니다.");
}
</script>
</head>
<body onKeyDown='key_check();'>
알고싶은 키패드를 꽉!
</body>
</html>

Key	KeyCode	Key	KeyCode	Key	KeyCode
BackSpace	8	0	48	KeyPad 0	96
Tab	9	1	49	KeyPad 1	97
ENTER	13	2	50	KeyPad 2	98
SHIFT	16	3	51	KeyPad 3	99
CTRL	17	4	52	KeyPad 4	100
ALT	18	5	53	KeyPad 5	101
PUSEBREAK	19	6	54	KeyPad 6	102
CAPSLOOK	20	7	55	KeyPad 7	103
한/영	21	8	56	KeyPad 8	104
한자	25	9	57	KeyPad 9	105
ESC	27	A	65	.	110
SPACE BAR	32	B	66	/	111
PAGEUP	33	C	67	*	106
PAGEDOWN	34	D	68	+	107
END	35	E	69	-	109
HOME	36	F	70	NUMLOCK	144
INSERT	45	G	71	SCROLLLOCK	145
DELEDT	46	H	72
→	37	I	73
←	38	J	74
↑	39	K	75
↓	40	L	76
윈도우(왼쪽)	91	M	77
윈도우(오른쪽)	92	N	78
기능키	93	O	79
F1	112	P	80
F2	113	Q	81
F3	114	R	82
F4	115	S	83
F5	116	T	84
F6	117	U	85
F7	118	V	86
F8	119	W	87
F9	120	X	88
F10	121	Y	89
F11	122	Z	90
F12	123	-	189
		`	192
		/	220
		=	187

Ajax로 구성된 어플리케이션을 분석하다보면, getElementById( )란 함수를 자주 보게 된다. 이것은 document 오브젝트에 내장된 함수로서, 현재 브라우저내의 오브젝트를 id 기준으로 찾아내고 해당 오브젝트에 대한 참조를 반환한다.

우선 간단히 살펴보자. 다음 예제는 input 텍스트를 찾아서 해당 내용을 경고창(alert)으로 출력하는 예제이다.

<body>
<input id="input_txt" type="text" value="getElementId로 값 구하기" />
<script type="text/javascript">
var inputTxt = document.getElementById('input_txt');
alert(inputTxt.value);
</script>
</body>

위 코드에서 input 텍스트 필드에 id가 input_txt로 설정되어 있고, 텍스트 필드의 내용(value)으로 'getElementId로 값 구하기'라고 설정되어 있다. 그리고 자바스크립트에서 document.getElementById('input_txt')로 텍스트 필드의 참조를 구한다. 이 참조는 inputTxt에 저장되고 inputTxt.value는 텍스트 필드의 내용(value) 값을 가리키는 것이다.

getElementById( ) 이외에 getElementByTagName( )과 getElementByName( ) 함수를 통해 원하는 오브젝트에 대한 접근이 가능하다. 하지만 전자는 바로 유니크한 오브젝트에 접근하는 것이 아니고(태그의 연관배열을 리턴하고 getElementByTagName('TD').item(0)과 같이 접근해야 함), 후자는 IE에서만 가능하다. 따라서 id로 구별하여 접근할 수 있는 getElementById( )를 많이 쓴다.

innerHTML 속성

document.write( )를 사용하면 화면에 출력이 가능하다. 그런데 이것은 페이지가 로딩될 때에만 출력된다(지금까지 내가 알기론...). 예를 들어 이미 화면이 모두 로딩 된 다음 추가 텍스트를 특정 위치에 다시 뿌려줄 수 없다. 이런 상황에서는 <div>의 innerHTML 속성을 사용해서 화면출력을 할 수 있다.

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>innerHTML 출력</title>
		<script type="text/javascript">			
			function printOut(){				
				var inputTxt = document.getElementById('input_txt').value;
				var outputForm = document.getElementById('output_form');

				outputForm.innerHTML = inputTxt;
			}
		</script>		
	</head>
	<body>
		<div>
			출력할 문자열을 입력하세요 :
			<input id="input_txt" type="text" />
			<input type="button" value="출력" onclick="printOut();" />
		</div>
		<div id="output_form">
		</div>
	</body>
</html>

위 코드를 실행하면 getElementById('input_txt')로 입력한 텍스트의 값을 구하고, '출력' 버튼을 누르는 순간 getElementById('output_form')을 찾아서 outputForm으로 참조하고 innerHTML 속성을 바꾸어 입력 문자열을 출력한다.

오늘은 여기까지...

이 글의 저작권은 asoop.com에 있습니다.
출처를 명확히 밝히는 조건으로 스크랩 및 상업적 이용을 허락합니다.

제목이 너무 복잡해 보이긴 합니다만 달리 표현할 방법이 없네요. 요즘 웹디자인할 때
플래쉬 무비를 여러 개 사용하다 보니 위치가 서로 겹치는 경우가 많은데 이때
앞뒤 순서(z-index) 설정하는 부분이 약간 복잡하게 되 있습니다.

특히 몇 가지 사항에 대해 잘 못 알고 있는 분들이 계셔서 참고 삼아 글 올립니다.

div 태그의 z-index 속성으로 순서를 정할 때 플래쉬가 포함되면 z-index가 기능하지
않습니다만 플래쉬무비 파라미터에 <PARAM NAME=wmode VALUE=transparent>를
포함시키면 z-index가 제대로 작동하게 됩니다.

특히 중첩된 두개의 레이어가 모두 플래쉬를 포함할 경우는 둘 다 위의 파라미터를 추가해
줘야 합니다. 둘 중 하나가 이 파라미터를 갖지 않으면 이넘이 모든 레이어의 위에 보여
지게 됩니다.

이렇게 되는 원인은 wmode 파라미터 설정이 갖는 의미가 단순히 플래쉬 무비를 투명
하게 하는데 있지 않고 다른 div들과의 z-index관계에 자신을 포함시키느냐의 여부까지
결정한다는데 있습니다. 이해하기 어려운 부분인데요 이 파라미터를 갖기 전에는 어떤
경우에도 z값을 부정해 버리지만 파라미터를 주면 z오더를 충실히 이행하는 z-index
준수 그룹으로 편입되어 버리는 것입니다. 즉 'wmode에 transparent를 주는 것은 말
그대로 투명도라는 특성을 주는 것이다' 라는 단순한 설정이 아니라 z오더에 대해
무시하던 플래쉬 무비를 z오더에 충실하게끔 만들어 준다는 것입니다.

참고로 혹시 오해하실 분이 계실것 같아서 말씀드리는 것은 여기서 플래쉬의 transparent
속성이 적용되는 것은 정확하게는 그 무비의 배경입니다. 그 무비의 스테이지 안에 위치한
배경을 제외한 다른 내용은 모두 보여지게 되는 것입니다. 자칫 특정한 이미지를 배경으로
사용하신 경우는 마치 transparent가 적용되지 않는 걸로 착각하실 수가 있습니다.

Syntax

HTML { overflow-x : sOverflow }

Scripting object.style.overflowX [ = sOverflow ]

HTML	{ overflow-x : sOverflow }
Scripting	object.style.overflowX [ = sOverflow ]

Possible Values

sOverflow String that specifies or receives one of the following values.

visible Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.

scroll Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

hidden Content that exceeds the dimensions of the object is not shown.

auto Content is clipped and scrolling is added only when necessary.

n readyState Property

XML 문서의 현재 상태를 가리킨다.

Ø Syntax

lValue = oXMLDOMDocument.readyState

Ø Remarks

Long integer.

이 속성은 읽기 전용이다. 문서의 상태 지시와 XML 문서 객체의 전송상태를 위한 값을 돌려준다.

LOADING (1)	처리를 위한 데이터를 읽기 위한 로드 진행을 나타낸다. 그러나 데이터 파싱을 시작하지는 않는다. 표준 ReadyState 정의들의 목적은 데이터를 BLOB 속성과 동등해야 한다.
LOADED (2)	읽기, 파싱할 데이터의 처리준비를 위한 프러퍼티 읽기 완료를 나타낸다. 그러나 객체 생성 이전 단계이다.
INTERACTIVE (3)	객체 모델이 가져온 데이터 셋의 실행 가능여부, 읽기, 파싱과 같은 정보를 가진다. 객체 모델이 현 상태에서 가능할지라도 읽기 전용 속성을 가진다.
COMPLETED (4)	문서의 로드가 성공하거나 실패하거나 완전히 로드됨을 나타낸다.

Ø Example

문서가 비동기적으로 loading될 때 ready 상태의 차례를 알려주는 Jscript/HTML 예제이다.

var xmldoc;

function Load()

{

xmldoc = new ActiveXObject("Microsoft.XMLDOM");

xmldoc.onreadystatechange = CheckState;

xmldoc.load(URL.value);

}

function CheckState()

{

var state = xmldoc.readyState;

RESULTS.innerHTML += "readyState = " + state + "<BR>"

if (state == 4)

{

var err = xmldoc.parseError;

if (err.errorCode != 0)

RESULTS.innerHTML += err.reason + "<BR>"

else RESULTS.innerHTML +="success" + "<BR>"

}

URL: <input type=text size=60 id=URL>

출처 : http://home.postech.ac.kr/%7Ekelee/homedata/web/dom/viewbody3.htm

Alchemist Hand`s