자바스크립트 정리

window-------------frame    ---form-----------texarea      navigator-----plugin
           --------document-----------layer       ---test                  -----mimetype
           --------location        ---link        ---fileupload
           --------history         ---image       ---password
                                   ---area        ---hidden
                                   ---anchor      ---submit
                                   ---applet      ---reset
                                   ---plugin      ---radio
                                                  ---checkbox
                                                  ---button
                                                  ---select--------------option

#########################
개체(Object) : 개체라는 말은 상당히 추상적이다. 이 개념을 알려면 "객체지향"을 공부해야 한다. 이 과에서 의미한 개체는 HTML 문서, 브라우저 윈도우, 날짜/시간과 같은 것을 의미하며 일반적으로 개체는 그 개체가 할 수 있는 일을 정의한 메소드와 그 개체의 특징을 나타내는 속성으로 구성된다.
###  date : Date는 시스템의 날짜와 시간을 얻기 위한 개체이다. 이 개체를 생성하는 방법은 다음과 같다 :

Nameofobject = new Date();
###  document : 이것은 해당 자바스크립트를 포함하고 있는 HTML 문서를 참조할 수 있는 개체를 의미한다.
###  location : Location은 특정 URL을 지징하는 개체이다. 다음과 같은 형식으로 사용된다:

parent.location='index.html'
(location이란 속성도 있는데 사용법이 서로 틀리다는 것을 기억하기 바란다.)
###  window : window는 브라우저 화면을 참조할 수 있는 개체이다.

#########################
메소드(Method) : 메소드는 어떤 개체로 하여금 어떻게 행동할지를 알려주는 하나의 명령을 의미한다.
alert() : alert는 window 개체 또는 하이퍼텍스트 링크내에서 대화 상자를 만들기 위해 사용되는 메소드이다. alert문의 괄호 안에 있는 텍스트를 대화 상자에 보여주고 OK 버튼이 함께 제공되며 사용자가 계속 진행하기 위해서는 이 버튼을 눌러야만 한다.
getMonth() : Date 개체의 메소드로 현재 월을 0~11 사이의 숫자로 반환한다.
getDate() : Date 개체의 메소드로 현재 날짜를 1~31 사이의 숫자로 반환한다.
getYear() : Date 개체의 메소드로 현재 연도를 0~99 사이의 숫자로 반환한다. (인터넷 익스플로러 5 이상에서는 4자리 숫자를 반환한다)
getFullYear() : Date 개체의 메소드로 현재 연도를 네자리 숫자로 반환한다. (넷스케이프 4.0 이상, 인터넷 익스플로러 3.x 이상에서 사용할 수 있다)
getDay() : Date 개체의 메소드로 현재 요일을 1~7 사이의 숫자로 반환한다.
getHours() : Date 개체의 메소드로 현재 시간을 0~23 사이의 숫자로 반환한다.
getMinutes() : Date 개체의 메소드로 현재 분을 0~59 사이의 숫자로 반환한다.
getSeconds() : Date 개체의 메소드로 현재 시간을 0~59 사이의 숫자로 반환한다.

Write() : Write 메소드는 Document 개체가 웹 페이지 상에 텍스트를 표시할 수 있도록 해주는 메소드이다.

 

#########################
속성(Properties) : 속성은 개체의 한 특징 또는 그 개체의 일부를 의미한다. 예를 들어 브라우저 윈도우의 상태 표시줄은 window 개체의 속성이며 windows.status로 참조된다. (표시형식 : 개체이름.속성이름)

bgColor : bgColor는 document 개체의 속성으로 HTML 문서의 배경색을 의미한다.
parent : parent는 특별히 프레임과 함께 자주 사용되는 속성으로 특정 프레임을 가리킬 때 사용된다. 만일 프레임 밖에서 사용된다면 브라우저 전체 윈도우를 가리키게 된다.
status : status는 window 개체의 속성으로 브라우저 화면의 왼쪽 하단에 위치한 상태 표시줄을 의미한다.

#########################
에러(Error) : 에러 또는 오류 메시지 창은 스크립트 안에 뭔가 문제가 있을 경우 발생한다. 크게 두 가지 종류가 있는데 구문(Syntax) 오류와 런타임(RunTIme) 오류이다.
구문 오류(Syntax Error) : 스크립트 안에 잘못된 철자가 있거나 컴퓨터가 인식하기 어려운 텍스트가 있을 경우, 자바스크립트 문법에 어긋난 경우 발생한다.
런타임 오류(Run-Time Error) : 런타임 오류는 잘못된 자바스크립트 명령어를 사용했을 때 발생한다.

 

#########################
이벤트 핸들러(Event Handlers) : 이벤트 핸들러는 HTML 코드에 내장되는 자바스크립트 명령어다. 사용자와 웹 페이지 사이의 상호 작용을 위해 HTML 코드와 함께 사용된다.
onBlur : onBlur는 사용자가 select, text, textarea 폼 요소에 있다가 그 요소에서 벗어나게 될 때 발생하는 이벤트 핸들러이다. 즉, 사용자가 그 아이템에 대한 포커스를 잃을 때 발생한다.
onChange : onChange는 사용자가 select, text, textarea 폼 요소에 있는 텍스트를 변경한 후 그 요소를 떠날 때 발생하게 된다.
on_click : on_click은 사용자가 링크와 같은 오브젝트를 클릭할 때 발생한다.
on_focus : on_focus는 사용자가 select, text, textarea 폼 요소를 선택할 때 발생한다. 즉 사용자가 그 폼 요소에 포커스를 맞출 때 발생한다.
onLoad : onLoad는 웹 페이지가 열릴 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.
on_mouseOver : on_mouseOver는 사용자가 링크 위에 마우스를 올려 놓았을 때 발생하는 이벤트 핸들러이다.
onSelect : onSelect는 사용자가 text, textarea 폼 요소에 있는 텍스트의 일부 또는 전체를 선택할 때 발생한다.
onSubmit : onSubmit은 submit 버튼 폼 요소를 사용자가 틀릭할 때 발생한다.
onUnLoad : onUnload는 사용자가 웹 페이지를 떠날 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.

#########################
주석(Comment) : 주석은 더블 슬래쉬(//)로 표시한다. 주석 처리하고 싶은 텍스트의 왼쪽 옆에 "//" 표시를 해주면 된다. "//"는 // 표시의 오른 쪽에 있는 라인 전체를 주석 처리하는 것이다. 만일 주석 처리하고 싶은 줄이 여러 줄이라면 // 대신 시작을 "/*"로 끝을 "*/"로 막아 주면 된다. 즉, /*와 */ 사이에 있는 모든 내용이 주석 처리 된다는 것이다.

#########################
컴마(comma : ",") : 자바스크립트 이벤트 핸들러를 동시에 여러 개 사용하고자 할 때 컴마(,)를 사용한다.

 

###################################################################################
window.alert('내용');//경고창
prompt('내용',초기값);//입력값 받기
confirm('내용');//확인,취소
print();//현 윈도우를 인쇄하고자 할 때

 

parseInt(변수); 소수점자리 그냥 버림
parseFloat(변수);
Math.ceil(변수); 소수점자리없앤정수(소수점자리 값 올림)
Math.floor(변수); 소수점자리없앤정수(소수점자리 값 내림)
Math.round(변수); 소수점자리없앤정수(소수점자리 값 반올림)

 

var test;
var myArray = new Array();
var myArray = new Array(5);
var myArray = new Array('1','2','5','4','3');
myArray[0] = '1';
myArray[0][0] = '1';

 

if(비교값1){처리내용1}elseif(비교값2){처리내용2}else{비교값3};
논리연산자 && (AND), || (OR), ! (NOT)
연산기호 ==,<,>,<=,>=,!=
switch (비교내용) {
 case '1':
  처리내용1; break;
 case '2':
  처리내용2; break;
 default:
  처리내용3; break;
}

 

function 함수명(초기값){ 처리내용; 리턴값; }
return 반환값;

 

for(i=0;i<5;i++){처리내용}
while(i<5){처리내용};

isNaN(변수); -> 숫자 false 문자 true

length -> 문자열의 길이
myArray.length; -> 변수길이
myArray.sort();
var myString = new String("나는 String 개체입니다");
var lengthOfString = myString.length;
charAt(위치값) -> 문자열에서 한문자 선택
charCodeAt(위치값) -> 문자열에 한문자 코드값
myString = String.fromCharCode(65,66,67); -> 문자 코드를 문자열로 변환 (ABC)
indexOf('앞부분 부터 찾을문자');
lastIndexOf('뒷부분 부터 찾을 문자') -> 문자열의 위치를 반환, 없을 경우 -1반환
substr(시작위치,복사할문자수); -> 문자열의 일부분 복사하기
substring(시작위치,끝위치);
myDate.toString(); -> 숫자를 문자열로 반환
myString.toLowerCase(); -> 문자열의 소문자 변환
myString.toUpperCase(); -> 문자열의 대문자 변환

Math.PI 파이값
Math.floor((Math.random() *  6) + 1); -> 1~6사이에 난수를 발생한다.
Math.pow(제곱근, 변수) -> 제곱 Math.pow(4,2) = 16
Math.abs(변수); -> 절대값

concat() -> var TestArray = TestA.concat(TestB); TesTA와 TestB에 배열을 결합
slice() -> var slicedArray = TestA.slice(1,3); TestA에 인덱스1에서 부터 인덱스 3까지를 가져온다.
join() -> var TestString = TestA.join("<br>"); TestA를 문자열로 변환 1<br>2<br>5<br>4<br>3...
sort() -> TestA.sort(); 배열을 순서대로 정렬
reverse() -> TestA.reverse(); 배열을 역순으로 정렬

 

var myDate = new Date();
var myDate = new Date(949278000000);
var myDate = new Date("1 jan 2003");
var myDate = new Date(2000,0,31,15,35,20,20); 2000년 1월 31일 35분 20초 20밀리
getDate() -> myDate.getDate(); 날짜를 반환
getDay() -> myDate.getDay(); 요일을 정수로 반환
getMonth() -> myDate.getMonth(); 월을 정수로 반환
getFullYear() -> myDate.getFullYear; 년을 네 자리 수로 반환
setDate() -> myDate.setDate(27); 날짜를 설정
setMonth() -> myDate.Month(1); 월을 설정
setFullYear() -> myDate.setFullYear(2003); 년을 설정
myDate.getHours(); 시간
myDate.getMinutes(); 분
myDate.getSeconds(); 초
myDate.getMilliseconds; 밀리

 

window.location;
window.location.replace(URL);
window.location.href(URL);
window.location.reload();

window.history; window.history.go(-1); window.history.go(1); window.history.go(3);

window.navigator

window.screen;
window.screen.height;//화면 높이
window.screen.width; //화면 너비
window.screen.colorDepth;//사용가능한 색상수
window.screen.pixelDepth;//한 픽셀당 비트수

window.document;
window.document.bgColor = "skyblue";
window.document.write('내용');
window.document.forms[인덱스]
window.document.form1.length;
window.document.images[이름명]
window.document.images[이름명].src = "값.gif"
window.document.images[이름명].value = "처리이름"
window.document.links[인덱스]
window.document.links[인덱스].on_click = "이름명";

window.defaultStatus = '하이' -> 상태 표시줄 메시지-항상 보여주기 위한 상태표시줄 메시지

window.status = '하이' -> 상태 표시줄 메시지

onLoad="처리내용";//웹페이지 열때//body,frameset(여러개의 프레임의 경우)
onunload="처리내용";//웹페이지 닫을때//body,frameset
onresize="처리내용";//윈도우나 프레임의 크기를 바꾸었을 때

on_click="처리내용";//클릭했을 때
on_mouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때
on_mousedown="처리내용";//마우스 버튼을 눌렀을 때
on_mouseover="처리내용";//링크 위로 마우스가 지나갔을 때
on_mouseout="처리내용";//마우스가 링크나 특정 영역 안에 있다가 나갔을 때
on_mousemove="처리내용";//마우스를 움직였을 때
on_mouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때

on_focus="처리내용";//포커스를 맞출 때 발생한다.
onblur="처리내용";//포커스를 잃을 때
onreset="처리내용";//입력 양식에서 취소reset시켰을 때
onsubmit="처리내용";//submit버튼을 누를 때
onselect="처리내용";//텍스트를 블럭 지정할때
onchange="처리내용";//내용이 바뀔때

onkeydown="처리내용";//키를 입력했을 때
onkeypress="처리내용";//키를 눌렀을 때
onkeyup="처리내용";//키를 눌렀다 놓았을 때

 

window 객체의 메소드
blur();//특정 객체의 포커스 없애기
click();//입력 양식이나 링크를 마우스로 클릭했을 때
focus(); -> txtAge.focus();//특정 개체에 포커스가 가도록 만들기
select(); -> txtAge.select();//입력 양식의 한 필드 블록 지정했을 때

onabort -> 이미지의 로딩을 취소할 때 발생한다.
on_error -> 페이지를 로딩하면서 오류가 생길 때 발생한다.
//이미지나 문서가 전송되는 도중에 네트웍이 끊어지거나 시스템이 다운되는 등의 여러가지 이유로 에러가 생겼을 때

**********************************************************************************************
**********************************************************************************************
Button 개체
이벤트 - onblur, on_click, on_focus, on_mousedown, on_mouseup
프로퍼티 - form, name, type, value
메서드 - blur(), click(), focus()

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CheckBox 개체
이벤트 - onblur, on_click, on_focus
프로퍼티 - checked, defaultChecked, form, name, type, value

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
document 개체//body,head,title태그 안
이벤트 - on_click, ondblclick, onkeydown, onkeypress, onkeyup, on_mousedown, on_mouseup
프로퍼티
- alinkColor(링크를 클릭했을 때 나타나는 색), vlinkColor(이전에 방문했던 링크를 표시하는 색),linkColor(문서에서 링크를 표시하는 색), links(문서에 있는 링크들의 배열)
-anchors(문서에 있는 표식들의 배열), applets(문서에 있는 자바애플릿의 배열),embeds(문서에 있는 플러그인들의 배열),  form_name, forms(문서에 있는 입력양식들의 배열), images(문서에 있는 이미지들의 배열) ->.length로 배열 [0]...
-bgColor, fgColor(문서의 전경색),cookie(클라이언트의 pc에 저장된 정보), domain(현재 문서의 도메인 이름), lastModified(문서가 마지막으로 수정된 날짜), referrer(링크로 현재 문서에 왔을 때 이전 문서의 url위치), title(문서의 제목), URL(문서의 URL주소)
메서드 - close()(문서에 데이타를 출력하는 것을 마무리), open()(문서에 데이타를 출력하기 위해 준비시키는 것), write()(문서에 데이타 출력), writeln()(문서에 데이터 출력(줄바꾸기 포함))

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
history 개체
프로퍼티 - length
메서드 - back(), forward(), go()

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
img 개체
이벤트 - onabort, on_error, onload
프로퍼티 - border, complete, height , hspace, lowsrc, name, src, vspace, width
**********************************************************************************************
**********************************************************************************************
window.document.form1.textarea1.value;
window.document.form1.radio1[인덱스].checked = true;
window.document.form1.radio1[인덱스].checked = false;
window.document.form1[인덱스].type == "checkbox"; -> form1에 checkbox형인 체크박스

var myNewOption = new Option("TheText","TheValue","TheTest");
document.form1.selectObject.option[0] = myNewOption; -> 항목설정
document.form1.selectObject.option[0] = null; -> 항목제거
document.form1.selectObject.options[2].text == 수요일;
document.form1.selectObject.options[2] == null;
form1.secondDay.options[form1.secondDay.selectedIndex].value
form1.firstDay.options[nowDate.getDate() - 1].selected = true;

secondDate.valueOf(); -> 1970년 1월 1일부터 date개체에 저장한 시각까지의 시간을 밀리초 단위로 반환

window.name -> 프레임의 윈도우 객체 이름
window.parent; -> 프레임의 부모의 윈도우가 가지고 있는 window개체에 접근//프레임에서 현재프레임의 상위 프레임
window.parent.location.href -> 현재윈도우의 부모의 주소
var formobject = window.parent.parent.fraMenu.document.form1;
formobject.choosePage.selectedIndex = linkIndex;

window.top; -> 최상위 프레임에 접근(현재 프레임의)
window.parent.parent.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.location.relace("myPagename.htm"); -> 최상위 페이지 수정
return window.top.addPage(window.location.href);

window.self; -> 현재 window 개체의 참조를 반환

window.open("파일명","target","width=크기,height=크기,left=위치,top=위치,directories=yn,copyHistory=yn,location=yn,resizable=yn,scrollbars=yn,status=yn,toolbar=yn"); -> 새창열기
width=크기 -> 새윈도우의 폭
height=크기 -> 새윈도우의 높이
left=위치 -> 윈도우의 위치를 왼쪽 끝을 기준
top=위치 -> 윈도우의 위치를 위쪽 끝을 기준
directories=yn -> 디렉토리 버튼을 보여준다. (연결)익스플로러 연결도구모음, 익스플로러 전용yew||no
copyHistory=yn -> 윈도우의 히스토리를 복사
location=yn -> 주소 입력창
resizable=yn -> 사용자가 윈도우의 크기를 조정 유무
scrollbars=yn -> 스크롤바 사용 유무
status=yn -> 상태 표시줄
toolbar=yn -> 툴바

window.close; -> 창닫기

window.opener; -> 기존 윈도우의 window 개체의 참조를 반환한다.//open()메소드로 윈도우를 열였을 때 호출한 윈도우
window.opener.document.bgcolor = "RED";
window.opener.document.form1.text1.value;

newWindow.resizeTo(350,200);
newWindow.moveTo(100,400);

newWindow.resizeBy(100,200);
newWindow.moveBy(20,50);

var myString = "A,B,C";
var myTextArray = myString.split(','); -> myTextArray[0]="A",myTextArray[1]="B",myTextArray[2]="C"

var myString = "본 행사는 5월 21일에 개최합니다";
var myCleanedUpString = myString.replace("5월","6월"); -> 본 행사는 6월 21일에 개최합니다

var myString = "1234567890";
alert (myString.search("7")); -> 6을 출력;

var myString = "1997, 1998, 1999, 2000, 2001, 2002";
myMatchArray = myString.match("2000");
alert(mymatchArray.length); -> myMatchArray = ('2000','2000','2001','2002')

RegExp() -> 정규식 생성자
var myRegExp =new RegExp("\\b'|'\\b");
/검색내용/gi -> g 전체를 검색, i 대소문자 구분하지 않음
\d -> 0부터 9사이의 숫자
\D -> 숫자가 아닌 모든 문자
\w -> A-Z,a-z,0-9,언더스코어 문자_와 같은 모든 단어문자
\W -> 단어 문자가 아닌 모든 문자
\s -> 탭,개행문자,캐리지 리턴, 폼 피드,수직 탭등 모든 공백 문자
\S -> 공백 문자가 아닌 모든 문자
.  -> 모든 단일 문자
[...] -> 중괄호 안에 있는 모든 문자중의 하나
[^...] -> 중괄호 안의 문자를 제외한 모든 문자
1-880-888-5474와 일치하는 정규식 -> /\d-\d\d\d-\d\d\d-\d\d\d\d/

{n} -> n개의 앞 요소와 일치한다.
{n,} -> n개 이상의 앞 요소와 일치한다.
{n,m} -> n개 이상 m개 이하의 앞 요소와 일치한다.
? -> 0개나 1개의 앞 요소와 일치한다.
+ -> 1개 이상의 앞 요소와 일치한다.
* -> 0개 이상의 앞 요소와 일치한다.
1-880-888-5474와 일치하는 정규식 -> /\d-\d{3}-\d{3}-\d{4}/

처음 /와 마지막 /는 이 사이에 있는 문자가 정규식임을 자바스크립트에게 알려준다.

/Paula?/ -> a가 있을수도 있고 없을 수도 있다.

^ -> 맨처음
$ -> 마지막
\b -> 단어 경계에 일치
\B -> 단어 경계가 아닌 위치에 일치

var myRegExp = /(\d{4}/g;
myString = myString.replace(myRegExp,"the year $1") -> the year 1999, the year 2000,...

한번실행후 끝
window.setTimeout("처리내용",시간); -> myTimerID = window.setTimeout("alert('시간 끝')",3000); 3초후 실행,고유한 식별아이디 반환
clearTimeout(myTimerID);

일정 시간 간격을 두고 연속적으로 실행
myTimerID = setInterval("myFunction()",5000);
clearInterval(myTimerID);

document.body.scrollWidth / 10; -> 윈도우의 내부 폭을 픽셀 단위로 알아내기

document.cookie = "UserName=홍길동;expires=Tue, 28 Dec 2010 00:00:00;";
var expireDate =new Date();
expdate.setTime(expireDate.getTime() + 1000 * 3600 * 24 * 30); // 30일
expireDate.setMonth(expireDate.getMonth()+6); -> 만기일 설정
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";";
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";path=/mystore;"; <- /mystore 디렉토리에서도 접근 가능

escape(변수);
unescape(변수);

setCookie("Name","Bob","","");
setCookie("Age","101","","");
alert(document.cookie);

var expireDate =new Date();
expireDate.setMonth(expireDate.getMonth()+12); -> 만기일 설정
setCookie("Name","Bob","/mystore",expireDate.toGMTString());

--동적 HTML--
<div id="div1">내용</div>
<p id="mypara">단락</p>
document.all["mypara"];
mypara.innerText="hi~~~~~~~~~~";
mypara.style.color='red';

mypara.style.left = 값+"px";
mypara.innerHTML; -> 인라인수준
div1.outerHTML; -> 블록수준

beforeBegin -> 시작 태그 바로 앞
afterBegin  -> 태그 바로 다음
beforeEnd   -> 종료 태그 바로 앞
afterEnd    -> 종료 태그 바로 다음
div1.insertAdjacentHTML("beforeBegin","<BR>");

이벤트
event.screenX
event.screenY
event.button -> 0 안누름 1 왼쪽누름 2 오른쪽누름 3 왼쪽오른쪽누름 4 가운데 누름 5왼쪽가운데누름 6오른쪽가운데누름 7 버튼3개다누름

fromElement, srcElement, toElement

var xPos = parseInt( srcElement.offsetLeft );
var yPos = parseInt( srcElement.offsetTop );
srcElement.width;
srcElement.tagName;
srcElement.RollOver; -> <TD ID="WoodOak" RollOver Rollout CLASS="TDMenu"....>
srcElement.backgroundColor = "blue";
menuToHide.contains(event.toElement)

<LAYER> -> 페이지 내 레이어에 포함되지 않은 컨텐츠 '앞'에 보이지 않는 사각형의 화면 공간을 만든다.
<ILAYER> -> 상대 위치로 지정하며 위치를 바꿀 수 있는 인라인 레이어를 생성한다.

<LAYER ID="myLayer1" LEFT="100" TOP="250">
 <H3>Layer에 있는 컨텐츠</H3>
 <P>Layer에 있는 단락</P>
</LAYER>

<ILAYER ID="myLayer1" LEFT="100" TOP="250">
 <H3>ILayer에 있는 컨텐츠</H3>
 <P>ILayer에 있는 단락</P>
</ILAYER>

자바스크립트에서의 참조법은 document 개체를 통해서 레이어의 ID를 쓰면된다.
document.myLayer1.left = 200;
document.myLayer1.top = 200;
document.myILayer1.bgColor = "red";
myLayer1.MoveTo(200,150); -> 인자에서 지정한 화면의 한 지점으로 태그를 이동
myLayer1.Moveby(200,150); -> 넘겨받은 인자만큼 태그를 이동

<LAYER ID="myLayer1" LEFT="100" TOP="250" Z-INDEX="1"> -> 레이어의 순서는 각자의 Z-INDEX 속성에서 결정한다. 기본값 0
myLayer1.zIndex=1;//레이어의 순서 지정
myLayer1.moveAbove(myLayer2);  //레이어를 위로 이동
myLayer2.moveBelow(myLayer1);  //레이어를 아래로 이동

DOM개체
Node -> 도큐먼트 내의 모든 노드는 자신만의 Node개체를 가지고 있다.
NodeList -> 이 개체는 모든 Node개체의 목록이다.
NamedNodepMap -> 이 개체는 인덱스가 아니라 이름으로 모든 Node개체에 접근할 수 있도록 한다.

document.getElementById(idvalue) -> 요소의 ID속성의 값을 넘겨받았을 때 요소의 참조(노드)를 반환한다.
<h1 id="heading1">제목입니다</h1>
<script language="javascript">
 var H1Element = document.getElementById("heading1");
 H1Element.style.fontFamily="궁서체";
</script>
 -> 제목의 폰트가 궁서체로 변경됨

<script language="javascript">
 var TDElement0 = document.getElementByTagName("TD").item(0);
 var TDElement1 = document.getElementByTagName("TD").item(1);
 TDElement0.style.fontFamily="바탕체";
 TDElement1.style.fontFamily="바탕체";
</script>
 -> 따옴표 안에 "< >" 없이 쓴다. <TD>

document.documentElement.tagName; -> 요소의 태그명을 설정하거나 반환 (최상위 HTML>

Node 개체의 프로퍼티
firstChild -> 요소의 첫번째 자식 노드를 반환
lastChild -> 요소의 마지막 자식 노드를 반환
previousSibling ->
어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환
nextSibling -> 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환
ownerDocument -> 노드를 포함하고 있는 도큐먼트의 루트 노드를 반환
parentNode -> 트리 구조에서 현재 노드를 포함하고 있는 요소를 반환
nodeName -> 노드의 이름을 반환
nodeType -> 노드의 형식을 숫자로 반환
nodeValue -> 노드의 값을 평범한 텍스트의 형태로 설정
<script language="javascript">
 var H1Element = document.getElementById("heading1");
 H1Element.style.fontFamily="궁서체";
 var PElement = H1Element.nextSibling;
 PElement.style.fontFamily="궁서체";
</script>

Node 개체의 메서드
appendChild(new node) -> 자식 노드의 목록의 끝에 새로운 node 개체를 추가한다.
cloneNode(child option) -> 인자로 제공한 node 개체와 똑같은 새로운 node 개체를 만든다. 이때 선택 사항으로 모든 자식 노드를 포함할 수도 있다.
hasChildNodes() -> 어떤 노드가 자식 노드를 가지고 있을 경우 true를 반환한다.
insertBefore(new node, current node) -> 자식 노드의 목록에서 현재 노드로 지정한 노드 앞에 새로운 node 개체를 추가한다.
removeChild(child node) -> node 개체의 자식 노드 목록에서 하나의 자식 노드를 제거한다.
replaceChild(new child, old child) -> 예전 자식 node 개체를 새로운 자식 node 개체로 바꾼다.

document 개체의 메서드
createElement(element name) -> 지정한 이름으로 요소 노드를 만든다.
createTextNode(text) -> 지정한 이름으로 텍스트 노드를 만든다.
CreateAttribute(attribute name) -> 지정한 이름으로 속성 노드를 만든다.

var newText;
var newElem;

newText = document.createTextNode("제목입니다")
newElem = document.createElement("H1")
newElem.appendChild(newText)
document.body.appendChild(newElem)

newText = document.createTextNode("단락에 있는 텍스트입니다")
newElem = document.createElement("P")
newElem.appendChild(newText)
document.body.appendChild(newElem)

Element 개체의 메서드(속성을 얻고 설정하기)
getAttribute(attribute name) -> 속성의 값을 반환한다.
setAttribute(attribute name, value) -> 속성의 값을 설정한다.
removeAttribute(attribute name) -> 속성의 값을 삭제하고 기본값으로 수정한다.

newElem.setAttribute("align","center");
newElem.getAttribute("align");

event 개체의 프로퍼티
bubbles -> 이벤트가 하나의 요소에서 다른 요소로 제어권을 넘겨줄 수 있는지의 여부를 알려준다.
cancelable -> 이벤트가 자신의 기본 작업을 취소할 수 있는지의 여부를 알려준다.
currentTarget -> 이벤트가 현재 이벤트 흐름의 어떤 단계에 있는지 알려준다.
eventPhase -> 이벤트가 현재 이벤트 흐름의 어떤 단계에 있는지 알려준다.
type -> 이벤트의 이름을 알려준다.

mouse 이벤트 개체의 프로퍼티
altKey -> 이벤트가 발생했을 때 Alt키가 눌렸는지의 여부를 알려준다.
button -> 어떤 마우스 버튼이 눌렸는지를 알려준다.
clientX -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터가 위치한 지점의 수평 좌표를 알려준다.
clientY -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터가 위치한 지점의 수직 좌표를 알려준다.
ctrlKey -> 이벤트가 발생했을 때 Ctrl키가 눌렸는지의 여부를 알려준다.
metaKey -> 이벤트가 발생했을 때 메타키가 눌렸는지의 여부를 알려준다.
screenX -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터의 화면 좌표의 원점에 상대적인 수평 좌표 위치를 알려준다.
screenY -> 이벤트가 발생했을 때 브라우저 윈도우에서 마우스 포인터의 화면 좌표의 원점에 상대적인 수직 좌표 위치를 알려준다.
shiftKey -> 이벤트가 발생했을 때 Shift키가 눌렸는지의 여부를 알려준다.

페이지에 AtiveX 컨트롤을 추가할려면 <OBJECT>태그를 써야 한다. <OBJECT> 태그에는 모든 컨트롤에 공통적인 2가지 중요한 속성이 있는데, 이는 CLASSID와 CODEBASE이다. CLASSID 속성은 컨트롤의 제작자가 컴파일 할 때 부여한 고유한 식별자이며, CODEBASE 속성은 ActiveX컨트롤을 찾을수 있는 URL을 가지고 있다.

바로 이러한 문제점 들 때문에 상속된 하위객체에 접근을 하기
위해서는 상속정의된 프로퍼티로 접근을 하는게 애러를 방지 한다는 것입니다.
즉, test_form.children[0] 혹은 test_form.lastChild 로 접근을 하면 콘트롤 할 수 있다는 것이죠...
이때 모든 윈도우 하위객체는 대부분 collection 에 all 프로퍼티와 element 객체에 하위구성요소에 대한 인서턴스 참조값들을
저장하게 되는데 이것으로 액세스 하면 문제 발생을 줄일 수
있다는 것입니다. 물론 글로벌 참조프로퍼티인 id 는 되도록이면
하위객체에 잘 사용하지 말고 window 객체 바로 밑 일 경우
this 로 접근이 가능하도록 사용을 하면 문제 해결에 도움이
될 듯 합니다.
그럼...

 

function debug(testNode) {
 var aa;
     for(key in testNode)
     {
         inputValue = testNode[key];
  aa += key + " : " + inputValue + "\r\n";
     }
 window.clipboardData.setData('Text', aa);
 alert('복사완료');
}

function debug2(testNode) {
 window.clipboardData.setData('Text', eval("document.all."+testNode+".outerHTML"));
 alert('복사완료');
}

 

 

-----------------------
 모든 마우스 이벤트 
-----------------------
onkeydown처럼 마우스를 눌렀을때는 on_mouseDown이벤트가 발생합니다.
그외의 이벤트로는

on_click - 클릭했을때
on_mouseOver - 마우스 포인터를 객체 위로 옮겼을 때 (꼭 누르지 않아도 됩니다)
on_mouseOut - 마우스 포인터를 객체에서 다른곳으로 옮길때
on_mouseup
oncontextmenu
onrowexit
onbeforepaste
onactivate
on_mousemove
onmove
onselectstart
oncontrolselect
onkeypress
oncut
onrowenter
on_mousedown
onpaste
onreadystatechange
onbeforedeactivate
onkeydown
onlosecapture
ondrag
ondragstart
oncellchange
onfilterchange
onrowsinserted
ondatasetcomplete
on_mousewheel
ondragenter
onblur
onresizeend
on_errorupdate
onbeforecopy
ondblclick
onkeyup
onresizestart
on_mouseover
on_mouseleave
onmoveend
onresize
ondrop
onpage
onrowsdelete
on_focusout
ondatasetchanged
ondeactivate
onpropertychange
ondragover
onhelp
ondragend
onbeforeeditfocus
on_focus
onscroll
onbeforeactivate
onbeforecut
on_click
oncopy
on_focusin
onbeforeupdate
ondataavailable
onmovestart
on_mouseout
on_mouseenter
onlayoutcomplete
onafterupdate
ondragleave
onbeforeunload
onafterprint
onbeforeprint
onload
onselect
onunload