Node 관련 프로퍼티 설명 (도큐먼트 탐색기능)
firstChild : 요소의 첫번째 자식 노드를 반환
lastChild : 요소의 마지막 자식 노드를 반환
previousSibling : 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 이전 자식 노드를 반환
nextSibling : 어떤 요소에서 현재 자식 노드와 같은 수준에 있는 다음 자식 노드를 반환
ownerDocument : 노드를 포함하고 있는 도큐먼트의 루트 노드를 반환
parentNode : 트리 구조에서 현재 노드를 포함하고 있는 요소를 반환
nodeName : 노드의 이름을 반환
nodeType : 노드의 형식을 숫자로 반환
nodeValue : 노드의 값을 평범한 텍스트의 형태로 설정
--------------------------------------------------------------------------------------------
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 개체로 바꾼다.
--------------------------------------------------------------------------------------------
자바스크립트만 사용하여
동적으로 폼을 생성하고 필요한 데이터를 동적으로 생성된 변수에 넣어 전송하는 방법이다.
아래 샘플은 페이지를 열자마자 a3box 에 자동으로 로그인한다.
(매번 로그인하는 귀차니즘에 쩔어서... OTL)
흔히 알고 있는것 익숙한것을 씁니다만.. 분명한 차이가 있습니다...
무엇이 다른가 봅시다.
=============================================
location.href 와 location.replace()....
=============================================
.href 와 .repalce()는 모두 location의 하위객채로 브라우저에서 URL이동때 쓰인다.
그러나 쓰는 형태를 보면 알겠지만 .href 는 프로퍼티고, .replace()는 메소드다.
location.href = http://www.naver.com <= [1] 값을 정의해야 하는프로퍼티
location.replace(http://www.naver.com) <= [2] 파라미터로 동작을 명령하는 메소드
아. 그게 뭐가 중요하냐... 브라우저가 주소만 바뀌면 되는거 아냐... 라고 하겠지만..
그게 아니라 이거지... ㅡ ㅡa
골아프겠지만, 자바스크립트에서 정의한 정확한 의미를 집어보자.
location 은 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체다.
브라우저의 주소표시줄에 있는 URL은 다음과 같이 정의된다.
protocol :// hostname : port / pathname ? search # hash
location.href는 위에 써있는 전체를 가르키며,
location.pathname 이라고 하면 같은 사이트에 파일경로만을 가르킨다.
(예를 들면...http://www.naver.com/blog/myinfo/profile.asp 라는 페이지가 떠있따면...
location.href에는 이거 전체가, location.phthname 에는 [blog/myinfo/profile.asp] 가 들어있다.)
그래서 location.href 라고 하면 브라우저의 주소표시줄에 떠있는 URL를 가르킨다.
그러므로 [1]처럼하면 브라우저의 주소표시줄 값이 변경되므로 페이지가 바뀌게 된다.
(물론 프레임, 아이프레임을 썼을땐 그 프레임의 주소가 바뀐다.)
[1]을 했을떄 일어나는 일은 우리가 주소표시줄에 키보드로 직접 주소를 넣고 엔터를 치는것과 정확히 같은 일을 일으킨다.
여기서 같은 일이란,
새로은 페이지로 이동(a)되고,
[뒤로]버튼을 누르면 이전 URL로 이동(b)되는것을 말한다.
(a) , (b)에 대해 좀만더 자세히 보자.
(a) 새로운 페이지로 이동.
브라우저 옵션을 손대지 않았을때, 브라우저의 주소값이 바뀌면 브라우저는 '인터넷 임시파일'
(C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files\)
에 캐쉬가 있는지를 먼저 보고, 있으면 그걸 보여준다.
그래서 가끔 우린 사이트내용이 바뀌었는데도, 로컬에 있는 파일을 보는 경우가 있다.
location.href로 주소이동을 했을떄 이와 같은 일이 일어난다.
(b) [뒤로]버튼을 누르면 이전 URL로 이동.
[뒤로]버튼이 정상장동되는것은 History객체에 배열처럼 이전 URL들이 기록되어있기때문이다.
우리가 [뒤로]버튼을 누르는건 History객체를 역순으로 되집어 가는 과정이다. ( history.back()이 그 일을 한다. )
location.href를 쓰면 [뒤로]버튼도 history.back()도 직접URL바꿨을때와 똑같이 작동한다.
그럼 location.replace()는 뭐가 다를까?
location.repalce()는 다음과 같이 작동한다.
1. location.replace()는 (a)의 경우 '인터넷 임시파일'을 쓰지 않는다. 매소드가 실행될때마다 매번 서버에 접속해서 페이지를 가져온다. 게시판 리스트같은 곳을 이동할때 location.href를 쓰면 새 글이 올라온것을 모르고 '로컬에 있는 파일'만 보는 일이 생길 수 있는데, location.replace()를 쓰면 이를 방지할 수 있다.
2. location.replace()은 새 페이지로 이동하는게 아니라 현재페이지를 바꿔주는 거다.
말장난 같아도 이거 중요한거다.. 왜중요한고하니...
(b)의 경우, History객체에 새로운 URL를 기록하는게 아니라 현재 페이지값을 바꾼다.
그러므로 location.replace()로 이동하고 [뒤로]버튼을 누르면 이전페이지가 아니라 이전,이전페이지가 뜬다. 이해가 안된다고?
A --> B --> C 처럼 페이지가 이동을 했다하자. (현재 당신은 C사이트에...)
B --> C로 이동할때 location.href를 썼다면
C페이지트에서 [뒤로]버튼을 누르면 B가뜬다.
하지만..
B --> C로 이동할때 location.replace()를 썼다면
C페이지에서 [뒤로]버튼을 누르면 A가뜬다.
그럼 사용자입장에선 '어 내가 클릭을 두번했나?' 하게 된다...
이런 차이로 인하여 적절히 써야 한다.
[뒤로]버튼을 눌렀을때 두페이지 이전으로 넘어가면 안되는 경우가 있는 반면,(.href를 써야겠지..)
프레임을 쓴 사이트 의 경우는 [뒤로]버튼 한두번 클릭으로 사이트를 빠져나가게 할 수도 있다. (.repalce()를 쓴경우...)
자바스크립트로 플래시 무비 삽입하기
<html>
<head>
<title>Embedding Flash with JavaScript [embed element]</title>
<script type="text/javascript" src="embed-element.js"></script>
<body>
<h1><samp>embed</samp> element</h1>
<h2>Flash movie</h2>
<div id="replaced-by-flash">
<p>Alternative content. Google and screen readers would read these lines.</p>
</div>
</body>
</html>
<script language="javascript">
JavaScript Statements
</script><script language="javascipt" src="src.js">
</script>arrayName = new Array(arrayLength)
arrayName = new Array()
arrayName = new Array(value0,value1, ..., valuen) | HTML 태그 | JavaScript 이벤트 | 설명 |
|---|---|---|
| 다양 | mouseMove | 마우스 이동 |
| <A>..</A> | Click | 마우스로 링크를 클릭 |
| dbClick | 마우스를 링크위에서 더블클릭 | |
| mouseDown | 마우스 버튼을 누름 | |
| mouseUp | 마우스 버튼을 놓음 | |
| mouseOver | 마우스를 링크위로 이동 | |
| mouseOut | 링크 위에 있던 마우스를 링크 밖으로 이동 | |
| keyDown | 사용자가 키를 누름 | |
| keyUp | 사용자가 키를 놓음 | |
| keyPress | 사용자가 키를 눌렀다가 놓음 | |
| <IMG> | abort | 사용자 액션으로 인해 이미지 로딩 작업을 중단함 |
| error | 이미지 로딩하는 동안 에러 발생 | |
| load | 이미지가 로드되고 화면에 나타남 | |
| keyDown | 사용자가 키를 누름 | |
| keyUp | 사용자가 키를 놓음 | |
| keyPress | 사용자가 키를 눌렀다가 놓음 | |
| <AREA> | mouseOver | 마우스가 클라이언트측 이미지맵의 한 영역으로 이동함 |
| mouseOut | 마우스가 이미지맵 영역 밖으로 이동 | |
| dbClick | 사용자가 이미지맵의 한 영역을 더블클릭함 | |
| <BODY>..</BODY> | Click | 사용자가 문서의 본문을 클릭 |
| dbClick | 문서의 본문을 더블 클릭함 | |
| keyDown | 키를 누름 | |
| keyUp | 키를 놓음 | |
| keyPress | 키를 눌렀다가 놓음 | |
| mouseDown | 마우스 버튼을 누름 | |
| mouseUp | 마우스 버튼을 놓음 | |
| <BODY>..</BODY> <FRAMESET>..</FRAMESET> <FRAME>..</FRAME> |
blur | 윈도우에서 현재 입력 포커스가 사라짐 |
| error | 윈도우가 로드되는 동안 에러 발생 | |
| focus | 입력 포커스가 현재 윈도우로 이동 | |
| load | 윈도우 로딩이 완료됨 | |
| unload | 윈도우를 종료함 | |
| move | 윈도우가 이동됨 | |
| resize | 윈도우의 크기가 바뀜 | |
| dragDrop | 윈도우에 객체를 드롭 | |
| <FORM>..</FORM> | submit | 사용자가 폼을 제출 |
| reset | 사용자가 폼을 재설정 | |
| <INPUT TYPE="text"> | blur | 현재 입력 포커스가 텍스트 필드에서 사라짐 |
| focus | 현재 입력 포커스가 텍스트 필드로 이동 | |
| change | 텍스트 필드가 변경되어 현재 입력 포커스가 사라짐 | |
| select | 텍스트 필드에 있는 텍스트가 선택됨 | |
| <INPUT TYPE="password"> | blur | 패스워드 필드에서 입력 포커스가 사라짐 |
| focus | 패스워드 필드에 입력 포커스 생김 | |
| <TEXTAREA>..</TEXTAREA> | blur | 텍스트 영역이 현재 입력 포커스가 사람짐 |
| focus | 텍스트 영역에 입력 포커스 생김 | |
| change | 텍스트 영역이 변경되어 입력 포커스가 사라짐 | |
| select | 텍스트 영역에서 텍스트가 선택됨 | |
| keyDown | 키를 누름 | |
| keyUp | 키를 놓음 | |
| keyPress | 키를 눌렀다 놓음 | |
| <INPUT TYPE="button"> | Click | 버튼이 클릭됨 |
| blur | 입력할 수 없도록 버튼이 흐려짐 | |
| focus | 입력할 수 있도록 포커스 생김 | |
| mouseDown | 버튼 위에서 왼쪽 마우스 버튼 누름 | |
| mouseUp | 버튼 위에서 왼쪽 마우스 버튼 놓음 | |
| <INPUT TYPE="submit"> | Click | 제출 버튼이 클릭됨 |
| blur | 제출 버튼에서 입력 포커스가 사라짐 | |
| focus | 제출 버튼에 입력 포커스 생김 | |
| <INPUT TYPE="reset"> | Click | 리셋 버튼이 클릭됨 |
| blur | 리셋 버튼에서 포커스가 사라짐 | |
| focus | 리셋 버튼에서 포터스가 놓임 | |
| <INPUT TYPE="radio"> | Click | 라디오 버튼이 클릭 |
| blur | 라디오 버튼에서 입력 포커스가 사라짐 | |
| focus | 라디오 버튼에 입력 포커스 생김 | |
| <INPUT TYPE="checkbox"> | Click | 체크 박스가 클릭 |
| blur | 체크 박스에서 입력 포커스가 사라짐 | |
| focus | 체크 박스에 입력 포커스 놓임 | |
| <INPUT TYPE="file"> | blur | 파일 업로드 폼 요소에서 입력 포커스 사라짐 |
| change | 사용자가 업로드될 파일을 선택 | |
| focus | 파일 업로드 폼 요소에 입력 포커스 놓임 | |
| <SELECT>..</SELECT> | blur | 선택 요소가 현재 입력 포커스 잃음 |
| change | 선택 요소가 변경되어 입력 포커스가 사라짐 | |
| focus | 선택 요소에 현재 입력 포커스가 놓임 |
| 이벤트핸들링속성 | 실행되는 상황 |
|---|---|
| onAbort | 이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음 |
| onBlur | 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐 |
| onChange | 텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐 |
| onClick | 링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨 |
| onDbClick | 링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭됨 |
| onDragDrop | 드래그된 객체가 윈도우나 프레임에 드롭됨 |
| onError | 이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함 |
| onFocus | 문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임 |
| onKeyDown | 키를 누름 |
| onKeyPress | 키를 눌렀다 놓음 |
| onKeyUp | 키를 놓음 |
| onLoad | 이미지나 문서, 프레임이 로드됨 |
| onMouseDown | 마우스 버튼 누름 |
| onMouseMove | 마우스를 이동함 |
| onMouseOut | 링크나 클라이언트측 이미지맵에서 마우스를 옮김 |
| onMouseOver | 마우스를 링크나 클라이언트측 이미지맵으로 옮김 |
| onMouseUp | 마우스 버튼을 놓음 |
| onMove | 사용자가 윈도우나 프레임을 이동함 |
| onReset | 폼의 리셋 버튼을 클릭하여 폼을 리셋시킴 |
| onResize | 사용자가 윈도우나 프레임의 크기를 조절 |
| onSelect | 텍스트는 텍스트 필드나 영역에서 선택됨 |
| onSubmit | 폼이 제출됨 |
| onUnload | 사용자가 문서나 프레임 세트를 종료함 |
| 객 체 | 용 도 |
|---|---|
| window 객체 | 브라우저 윈도우나 윈도우 안에 있는 프레임에 액세스할 때 사용한다. 프로퍼티와 메소드를 참조할 때, window 객체가 존재하는 경우에는 "window."접두사를 붙일 필요가 없다 |
| document 객체 | 현재 윈도우에 로드되어 있는 문서에 액세스할 때 사용한다. document 객체는 컨텐트를 제공하는 HTML 문서, 즉 HEAD와 BODY 태그가 있는 문서를 의미한다. |
| location 객체 | URL을 나타낼 때 사용한다. 이 객체는 URL객체를 만들거나 URL의 일부분에 액세스하거나 기존의 URL을 수정할 때 사용할 수 있다. |
| history 객체 | 한 윈도우 안에서 액세스된 URL의 히스토리를 유지할 때 사용 |
| frame 객체, frames 배열 | HTML 프레임에 액세스할 때 사용 frames 배열은 윈도우안에 있는 모든 프레임에 액세스할 때 사용 |
| link 객체, links 배열 | 하이퍼텍스트 링크의 텍스트 기반이나 이미지 기반 소스 앵커(anchor)에 액세스할 때 사용 links배열은 문서 안에 있는 모든 link 객체에 액세스할 때 사용한다. I.E.는 link 객체의 anchor객체를 결합한다. |
| anchor 객체, anchors 배열 | 하이퍼텍스트 링크의 타켓에 액세스할 때 사용 anchors 배열은 문서 안에 있는 모든 anchor 객체에 액세스할 때 사용 |
| image객체, images 배열 | HTML 문서에 삽입되어 있는 이미지에 액세스할 때 사용 images 배열은 문서 안에 있는 모든 image 객체에 액세스할 때 사용 |
| area 객체 | 클라이언트측 이미지맵 안에 있는 영역에 액세스할 때 사용 |
| applet 객체, applets 배열 | Java 애플릿에 액세스할 때 사용 애플릿 배열은 문서 안에 있는 모든 애플릿에 액세스할 때 사용 |
| event 객체, Event 객체 | 이벤트 발생에 대한 정보에 액세스할 때 사용 event 객체는 특정 이벤트에 대한 정보 제공 Event 객체는 이벤트를 식별하는 데 사용하는 상수 제공 |
| form 객체, forms 배열 | HTML 폼에 액세스시 사용 forms 배열은 문서 안에 있는 모든 폼에 액세스시 사용 |
| element 객체 | 폼 안에 들어있는 모든 폼 요소에 액세스시 사용 |
| text 객체 | 폼의 텍스트 필드에 액세스시 사용 |
| textarea 객체 | 폼의 텍스트 영역 필드에 액세스시 사용 |
| radio 객체 | 폼의 라디오 버튼 세트에 액세스하거나 세트 안에 있는 각각의 버튼에 액세스할 때 사용 |
| checkbox 객체 | 폼의 체크 박스에 액세스할 때 사용 |
| button 객체 | Submit나 Reset 버튼이 아닌 폼 버튼에 액세스시 사용 |
| reset 객체 | 폼의 Reset 버튼에 액세스시 사용 |
| selet 객체 | 폼의 선택 리스트에 액세스시 사용 |
| option 객체 | option 객체는 선택 리스트의 요소에 액세스시 사용 |
| password 객체 | 폼의 패스워드 필드에 액세스시 사용 |
| hidden 객체 | 폼의 숨겨진 필드에 액세스시 사용 |
| FileUpload 객체 | 폼의 파일 업로드 요소에 액세스시 사용 |
| navigator 객체 | 스크립트를 실행하고 있는 브라우저에 대한 정보에 액세스시 사용 |
| screen 객체 | 사용자의 화면의 색상 깊이와 크기에 대한 정보에 액세스시 사용 |
| embed 객체, embeds 배열 | 삽입된 객체에 액세스시 사용 embeds 배열은 문서 안에 삽입된 모든 객체에 대한 액세스 제공 |
| mimeType 객체, mimeTypes 배열 | 브라우저가 제공하는 특징 MIME 유형에 대한 정보에 액세스시 사용 mimeTypes 배열은 제공하는 모든 mimeType 객체의 배열 I.E.는 빈 배열을 리턴하면서 mimeTypes에 대해서 임시적으로 지원 |
| plugin 객체, plugins 배열 | 특정 브라우저 플러그인에 대한 정보에 액세스시 사용 plugins 배열은 브라우저가 지원하는 모든 플러그인의 배열 I.E.는 빈 배열을 리턴하면서 plugins에 대해서 임시적으로 지원 |
| 프로퍼티 | 설 명 |
|---|---|
| closed | 윈도우가 닫혀 있는지 식별 |
| defaultStatus | 브라우저 윈도우의 하단의 상태바에 나타나는 디폴트 상대 메시지를 지정 |
| document | 윈도우에 표시되어 있는 현재 문서를 지정하는 객체 |
| frames | 윈도우 객체에 들어 있는 모든 프레임 객체로 구성된 배열 |
| history | 마지막으로 윈도우로 로드된 URL의 리스트를 포함하는 윈도우의 히스토리 객체 |
| length | window에 들어 있는 프레임의 수 식별 |
| location | window 객체와 관련된 URL을 지정하는 객체 |
| name | 윈도우의 이름 지정 |
| offscreenBuffering | 윈도우 정보의 오프스크린 버퍼링이 사용될 것인지를 지정하는 부울값 오프스크린 버퍼링은 윈도우를 나타내기 전에 윈도우의 모든 요소를 로드할 때 사용 |
| opener | 윈도우를 만들거나 열 수 있도록 해주는 window 객체 지정 |
| parent | 특정 윈도우를 포함하는 윈도우를 지정하는 시너님 |
| self | 참조될 현재 윈도우를 지정하는 시너님 |
| status | 브라우저 윈도의 하단의 상태 표시줄에 나타날 임시 메시지를 지정 |
| top | 중첩된 일련의 윈도우에서 맨 위에 있는 브라우저 윈도우를 의미하는 시너님 |
| window | 참조될 현재 윈도우를 식별하는 시너님 |
| 메 소 드 | 설 명 |
|---|---|
| alert(text) | 경고 다이얼로그 박스를 표시 |
| blur() | 포커스를 윈도우에서 옮긴다 |
| setInterval(expression,milliseconds) | 지정된 타임아웃 인터벌이 지난 이후에 표현식을 반복해서 평가하거나 함수를 불러온다. |
| clearInterval(interval) | 이전에 설정된 인터벌 타이머를 클리어 |
| setTimeout(expression,milliseconds) | 타임아웃 기간이 지난 이후에 표현식을 평가하거나 함수를 호출한다. |
| clearTimeout(timer) | 이전에 설정된 타임아웃을 클리어 |
| close() | 지정된 윈도우를 닫는다. |
| confirm(text) | 확인 다이얼로그 박스를 나타낸다. |
| focus() | 윈도우로 포커스를 가져간다. |
| open(url,name,[options]) | 새로운 윈도우를 열고 새로운 window 객체를 만듬 |
| prompt(text,defaultInput) | 프롬프트 다이얼로그 박스를 나타낸다. |
| scroll(x,y) | 윈도우를 특정 위치까지 스크롤한다. |
| 옵 션 | 값 | 설 명 |
|---|---|---|
| toolbar | yes no | 윈도우에 툴바 제공 |
| location | yes no | 윈도우에 위치 필드 제공 |
| directories | yes no | 디렉토리 버튼 제공 |
| status | yes no | 상태 표시줄 제공 |
| menubar | yes no | 메뉴바 제공 |
| scrollbars | yes no | 스크롤 바 제공 |
| resizable | yes no | 윈도우 크기 조절 가능 |
| width | 정수 | 윈도우의 폭(픽셀) |
| height | 정수 | 윈도우의 높이(픽셀) |
| 프로퍼티 | 설 명 |
|---|---|
| alinkColor | <BODY> 태그의 alink 속성의 값 지정 |
| anchor | 문서에 들어 있는 배열을 참조하는 객체 |
| anchors | 문서에 들어 있는 모든 앵커의 배열 |
| applet | 문서에 들어 있는 애플릿을 참조하는 객체 |
| applets | 문서에 들어 있는 모든 애플릿의 배열 |
| area | 문서 안의 이미지맵 영역을 참조하는 객체 |
| bgColor | <BODY> 태그의 bgColor 속성의 값 식별 |
| cookie | 쿠키의 값 식별 |
| domain | 문서가 로드되는 서버의 도메인 이름 식별 |
| embeds | 문서안의 모든 플러그인의 배열 |
| fgColor | <BODY> 태그의 text 속성값 지정 |
| form | 문서 안의 폼을 참조하는 객체 |
| Forms[] | 문서 안의 모든 폼의 배열 |
| image | 문서 안의 이미지를 참조하는 객체 |
| Images[] | 문서 안의 모든 이미지의 배열 |
| lastModified | 문서가 마지막으로 수정된 날짜 |
| link | 문서 안의 링크를 참조하는 객체 |
| links | 문서 안의 모든 링크의 배열 |
| linkColor | <BODY> 태그의 link 속성의 값 식별 |
| plugin | 문서 안의 플러그인을 참조하는 객체 |
| plugins[] | 브라우저가 지원하는 플러그인을 나타내는 객체의 배열 |
| referrer | 문서에 대한 링크를 제공하는 문서의 URL |
| title | 문서의 타이틀 |
| URL | 문서의 URL |
| vlinkColor | <BODY> 태그의 vlink 속성의 값 식별 |
| 메 소 드 | 설 명 |
|---|---|
| close() | 문서의 객체를 만드는 데 사용된 스트림 |
| open([mimeType][,"replace"]) | 선택적인 MIME 유형으로 문서 객체를 만들 때 사용되는 흐름을 개시한다. "replace" 파라미터는 text/html MIME 유형과 함께 사용되어 히스토리 리스트에 있는 현재 문서를 대체 |
| write(expr1[,expr2...,exprN]) | 문서에 표현식의 값을 기록 |
| write(expr1[,expr2...,exprN]) | 개행 문자가 다음에 따라오는 문서에 표현식의 값 기록 |
| 프로퍼티 | 브라우저 지원 | 설 명 |
|---|---|---|
| appCodeName | N2, I.E3 | 브라우저 색상 이름 |
| AppMinorVersion | I.E4 | 브라우저 버전 번호 |
| appName | N2, I.E3 | 브라우저 이름 |
| appVersion | N2, I.E3 | 브라우저의 버전 |
| browserLanguage | I.E4 | 브라우저에 설정되어 있는 언어 |
| connectionSpeed | I.E4 | 브라우저가 네트워크에 연결되는 속도 |
| cookieEnabled | I.E4 | 브라우저가 쿠키를 허용하도록 설정되어 있는지의 여부 |
| cpuClass | I.E4 | 브라우저 실행시 사용되는 마이크로프로세서의 유형 |
| onLine | I.E4 | 브라우저가 현재 온라인 연결을 가지고 있는지 여부 |
| Language | N4, I.E4 | 브라우저에 설정되어 있는 언어 |
| mimeTypes | N3, I.E4 | 현재 브라우저가 지원하는 모든 MIME 유형의 배열 |
| platform | N4, I.E4 | 브라우저가 실행되는 운영체제 플랫폼 |
| plugins | N3, I.E4 | 현재 브라우저에 설치된 모든 플러그인의 배열 |
| systemLanguage | I.E4 | 운영체제의 디폴트 언어 |
| userAgent | N2, I.E3 | 브라우저에서 서버로 전송된 HTTP 프로토콜의 사용자 에이전트 헤더 |
| userLanguage | I.E4 | 사용자가 사용하는 언어 |
| userProfile | I.E4 | 사용자 프로파일 정보에 대한 액세스를 제공하는 객체 |
| 메 소 드 | 설 명 |
|---|---|
| javaEnabled() | 사용자가 브라우저의 Java 기능을 켜두었는지의 여부를 나타내는 부울값 리턴 |
| taintEnabled() | 사용자가 data tainting(보안 메커니즘)을 활성화했는지 여부를 나타내는 부울값 리턴 |
| preference | 서명이 되지 않은 스크립트가 보안 관련 프로퍼티를 얻고 설정할 때 사용 |
| 프로퍼티 | 브라우저 | 설 명 |
|---|---|---|
| data | N | DragDrop 이벤트로 인해 드롭된 객체의 URL이 들어있는 스트링 배열 |
| height, width | N | 윈도우나 프레인의 길이와 너비(픽셀표시) |
| pageX, pageY | N | 픽셀로 나타낸 커서의 수평/수직 위치(페이지에서의 상대적위치) |
| screenX, screenY | N, I.E | 픽셀로 나타낸 커서의 수평/수직 위치(화면에서의 상대적 위치) |
| layerX, layerY | N | 픽셀로 나타낸 커서의 수평/수직 위치, 이벤트가 발생한 레이어에 대한 상대적 위치. Resize 이벤트와 함께 사용하면 layerX와 layerY가 이벤트가 타겟으로 하는 객체의 길이와 너비 지정 |
| clientX와 clientY | I.E | 픽셀로 나타낸 커서의 수평/수직 위치, 이벤트가 발생한 웹페이지에서의 상대적 위치 |
| offsetX, offsetY | I.E | 픽셀로 나타낸 커서의 수평/수직 위치, 이벤트가 발생한 컨테이너에 대한 상대적 위치 |
| X, Y | I.E | 픽셀로 나타낸 커서의 수평/수직 위치, 이벤트가 발생한 문서에 대한 상대적 위치 |
| target | N | 이벤트가 전송된 원래 객체 |
| srcElement | I.E | 이벤트가 전송된 원래 객체 |
| type | N, I.E | 발생한 이벤트 유형 |
| which | N | 눌려진 마우스 버튼(왼:1, 가:2, 오:3)이나 눌려진 키의 ASCII값 |
| keyCode | I.E | 키 누름과 연관된 Unicode 키 코드를 식별 |
| button | I.E | 이벤트가 발생했을 때 눌려진 마우스 버튼 식별(0:눌려진버튼없음, 1:왼, 2:오, 4:가) |
| modifiers | N | 마우스나 키 이벤트와 연관된 수정자 키(ALT_MASK,CONTROL_MASK,SHIFT_MASK,META_MASK)를 식별 |
| altkey,ctrlkey,shiftkey | I.E | true나 false로 설정하여 이벤트가 발생했을 때 Alt키와 Control키, Shift 키 중에 어떤 것이 눌려졌는지 알려준다. |
| cancelBubble | I.E | true나 false로 설정하여 이벤트 버블링을 취소하거나 활성화한다. |
| fromElement, toElement | I.E | 이동 중인 HTML 요소 지정 |
| reason | I.E | 데이터 소스 객체에 대한 데이터 전송 상태를 나타내는데 사용 |
| returnValue | I.E | true나 false로 설정하여 이벤트 핸들러의 리턴값을 나타낸다. 이벤트 핸들러에서 true나 false를 리턴하는 것과 같다. |
| srcFilter | I.E | onfilterchange 이벤트를 시작하는 filter객체 지정 |
| 프로퍼티 | 설 명 |
|---|---|
| action | <FORM> 태그의 HTML action 속성에 대한 액세스 제공 |
| button | GUI 컨트롤 버튼을 나타내는 객체 |
| checkbox | 체크 박스 필드를 나타내는 객체 |
| elements | 폼 안에 포함되어 있는 모든 필드와 GUI 컨트롤을 포함하는 배열 |
| encoding | <FORM> 태그의 HTML enctype 속성에 대한 액세스 제공 |
| FileUpload | 파일 업로드 폼 필드를 나타내는 객체 |
| hidden | 숨겨진 폼 필드를 나타내는 객체 |
| length | elements 배열의 길이에 대한 액세스 제공 |
| method | <FORM> 태그의 HTML method 속성에 대한 액세스 제공 |
| name | 폼의 이름 식별 |
| password | 패스워드 필드를 나타내는 객체 |
| radio | 라디오 버튼 필드를 나타내는 객체 |
| reset | reset 버튼을 나타내는 객체 |
| select | 선택 항목 리스트를 나타내는 객체 |
| submit | submit 버튼을 나타내는 객체 |
| target | <FORM> 태그의 HTML target 속성에 대한 액세스 제공 |
| text | 텍스트 필드를 나타내는 객체 |
| textarea | 텍스트 영역 필드를 나타내는 객체 |
| 메 소 드 | 설 명 |
|---|---|
| handleEvent() | 지정된 이벤트에 대한 폼의 이벤트 핸들러를 호출할 때 사용 |
| submit() | 폼을 제출시 사용 |
| reset | 폼의 엔트리를 디폴트 값으로 재설정시 사용 |
| 객 체 | 프로퍼티 | 설 명 |
|---|---|---|
| button | name | 버튼의 name 속성에 대한 액세스 제공 |
| type | 객체의 유형 지정 | |
| value | 객체의 값 지정 | |
| checkbox | checked | 체크박스가 현재 체크되어 있는지를 식별 |
| defaultChecked | 체크박스가 디폴트로 체크되어 있는지 식별 | |
| name | 체크박스의 HTML name 속성에 대한 액세스 제공 | |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| FileUpload | name | 객체의 name 속성에 대한 액세스 제공 |
| type | 객체의 type 속성에 대한 액세스 제공 | |
| value | 객체의 값 식별 | |
| hidden | name | 객체의 name 속성에 대한 액세스 제공 |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| password | defaultChecked | 객체의 디폴트 값 식별 |
| name | 객체의 name 속성에 대한 액세스 제공 | |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| radio | checked | 라디오 버튼이 체크되어 있는지 식별 |
| defaultChecked | 라디오 버튼이 디폴트로 체크되어 있는지 식별 | |
| name | 객체의 name 속성에 대한 액세스 제공 | |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| reset | name | 객체의 name 속성에 대한 액세스 제공 |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| select | length | 선택 리스트의 길이 식별 |
| name | 객체의 name 속성에 대한 액세스 제공 | |
| option | 선택 리스트가 제공하는 옵션 식별하는 배열 | |
| selectedIndex | 선택 리스트 안에서 처음 선택된 옵션 식별 | |
| type | 객체의 유형 식별 | |
| submit | name | 객체의 name 속서에 대한 액세스 제공 |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| text | defaultValue | 텍스트 필드에 나타나는 디폴트 텍스트를 식별 |
| name | 객체의 name 속성에 대한 액세스 제공 | |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 | |
| textarea | defaultValue | 텍스트 영역 필드에 나타나게 되는 디폴트 텍스트 식별 |
| name | 객체의 name 속성에 대한 액세스 제공 | |
| type | 객체의 유형 식별 | |
| value | 객체의 값 식별 |
| 객 체 | 메 소 드 | 설 명 |
|---|---|---|
| button | Click() | 클릭된 버튼 시뮬레이트 |
| blur() | 포커스 잃음 | |
| focus() | 포커스 맞춤 | |
| checkbox | Click() | 클릭된 체크 박스 시뮬레이트 |
| blur() | 포커스 잃음 | |
| focus() | 포커스 맞춤 | |
| FileUpload | blur() | 포커스 잃음 |
| focus() | 포커스 맞춤 | |
| select() | 입력 영역을 선택 | |
| hidden | 없음 | |
| password | blur() | 포커스 잃음 |
| focus() | 포커스 맞춤 | |
| select() | 패스워드 필드에 나타나는 텍스트를 하이라이트 | |
| radio | Click() | 라디오 버튼 클릭 시뮬레이트 |
| blur() | 포커스 잃음 | |
| focus() | 포커스 맞춤 | |
| reset | Click() | 리셋 버튼 클릭 시뮬레이트 |
| blur() | 포커스 잃음 | |
| focus() | 포커스 맞춤 | |
| select | blur() | 포커스 잃음 |
| focus() | 포커스 맞춤 | |
| submit | Click() | 제출 버튼 클릭 시뮬레이트 |
| blur() | 포커스 잃음 | |
| focus() | 포커스 맞춤 | |
| text | blur() | 포커스 잃음 |
| focus() | 포커스 맞춤 | |
| select() | 텍스트 필드에 있는 텍스트 하이라이트 | |
| textarea | blur() | 포커스 잃음 |
| focus() | 포커스 맞춤 | |
| select() | 텍스트 영역에 있는 텍스트 하이라이트 |
| 프로퍼티 | 설 명 |
|---|---|
| hash | URL의 앵커 부분(존재하는 경우) |
| host | URL의 hostname:port 부분 |
| hostname | URL의 host부분 |
| href | 전체 URL |
| pathname | URL의 경로명 부분 |
| port | URL의 포트 부분 |
| protocol | URL의 프로토콜 부분 |
| search | URL의 쿼리 스트링 부분 |
| 프로퍼티 | 설 명 |
|---|---|
| hash | URL의 앵커 부분(존재하는 경우) |
| host | URL의 hostname:port 부분 |
| hostname | URL의 host부분 |
| href | 전체 URL |
| pathname | URL의 경로명 부분 |
| port | URL의 포트 부분 |
| protocol | URL의 프로토콜 부분 |
| search | URL의 쿼리 스트링 부분 |
| target | 링크의 HTML, target 속성 |
| 프로퍼티 | 설 명 |
|---|---|
| border | <:IMG> 태그의 BORDER 속성의 값 |
| complete | 이미지가 완전히 로드되었는지 식별 |
| height | <:IMG> 태그의 HEIGHT 속성의 값 |
| hspace | <IMG> 태그의 HSPACE 속성의 값 |
| lowsrc | <IMG> 태그의 LOWSRC 속성의 값 |
| name | <IMG> 태그의 NAME 속성의 값 |
| prototype | image 객체에 사용자 지정 프로퍼티를 추가할 때 사용 |
| src | <IMG> 태그의 SRC 속성의 값 |
| vspace | <IMG> 태그의 VSPACE 속성의 값 |
| width | <IMG> 태그의 WIDTH 속성의 값 |
| 프로퍼티 | 설 명 |
|---|---|
| hash | area 객체의 HREF 속성의 파일 오프셋 부분 |
| host | area 객체의 HREF 속성의 호스트 이름 부분 |
| hostname | area 객체의 HREF 속성의 host:port 부분 |
| href | area 객체의 완전한 HREF 속성 |
| pathname | area 객체의 HREF 속성의 경로명 부분 |
| port | area 객체의 HREF 속성의 포트 부분 |
| protocol | area 객체의 HREF 속성의 프로토콜 부분 |
| search | area 객체의 HREF 속성의 쿼리 스트링 부분 |
| target | area 객체의 TARGET 속성 |
| 메 소 드 | 설 명 |
|---|---|
| getDate() getUTCDate() setDate() setUTCDate() |
Date 객체의 날짜를 설정하거나 리턴 |
| getDay() getUTCDay() |
Date 객체의 한 주의 날짜를 설정하거나 리턴 |
| getHours() getUTCHours() setHours() setUTCHours() |
Date 객체의 시간를 설정하거나 리턴 |
| getMilliseconds() getUTCMilliseconds() setMilliseconds() setUTCMilliseconds() |
Date 객체의 밀리초 값을 설정하거나 리턴 |
| getMinutes() getUTCMinutes() setMinutes() setUTCMinutes() |
Date 객체의 분을 설정하거나 리턴 |
| getMonth() getUTCMonth() setMonth() setUTCMonth() |
Date 객체의 달을 설정하거나 리턴 |
| getSeconds() getUTCSeconds() setSeconds() setUTCSeconds() |
Date 객체의 초를 설정하거나 리턴 |
| getTime() getUTCTime() |
Date 객체의 시간을 설정하거나 리턴 |
| getTimeZoneOffset() | Date 객체의 시간대 오프셋(분)을 리턴 |
| getYear() getFullYear() getUTCFullYear() setYear() setFullYear() setUTCFullYear() |
Date 객체의 연도를 리턴하거나 설정한다. 완전한 연도를 나타내는 방법으로 4자리 연도 값을 사용한다. |
| toGMTString() | 날짜를 Internet GMT(Greenwich Mean Time) 포맷의 스트링으로 변환 |
| toLocaleString() | 날짜를 로케일(locale)포맷의 스트링으로 변환. 로케일 포맷이란 사용자가 위치해 있는 지형적 위치에서 일반적으로 사용하는 포맷 의미 |
| toString() | Date 객체의 스트링 값을 리턴 |
| valueOf() | 1970년 1월 1일 자정 이후의 밀리초 값 리턴 |
| toUTCString() | UTC에서 시간을 나타내는 스트링 값을 리턴 |
| 생 성 자 | 설 명 |
|---|---|
| Date() | 현재 날짜와 시간으로 Date 인스턴스 만듬 |
| Date(dateString) | dateString 파라미터에 지정되어 있는 날짜로, Date 인스턴스를 만든다. dateString의 포맷은 "월,일,연도,시:분:초" |
| Date(milliseconds) | 1970년 1월 1일 자정 이후 지정된 밀리초 값으로 Date 인스턴스를 만든다. |
| Date(year,month, day,hours,minutes, seconds,milliseconds) |
년,월,일,시,분,초,밀리초 정수에 따라 지정된 날짜로 Date 인스턴스를 만든다. 연도와 월 파라미터는 제공되어야 하고 다른 나머지 파라미터가 포함되면 앞에 오는 모든 파라미터가 제공되어야 한다. |
| 프로퍼티 | 설 명 |
|---|---|
| E | Euler의 상수. 이것은 계산을 하는 어디에서나 발견할 수 있으며 자연대수의 기초 |
| LN2 | 2의 자연대수. 이것은 자연대수와 밑이 2인 대수 사이의 전환에 사용되는 간단한 상수 |
| LN10 | 10의 자연대수. LN2와 마찬가지로 대수 변환에 사용 |
| LOG2E | 밑이 2인 E의 대수. 이것은 밑이 10인 대수를 밑이 E인 대수로 변환시 사용 |
| PI | 원의 원주 대 지름의 비율 |
| SQRT1_2 | 1/2의 제곱근은 많은 삼각법 계산에서 사용 |
| SQRT2 | 2의 제곱근은 대수식에서 흔히 사용 |
| 메 소 드 | 설 명 |
|---|---|
| abs(x) | x의 절대값 리턴 |
| acos(x) | x의 아크 코사인값 라디안으로 리턴 |
| asin(x) | x의 아크 사인값 라디안으로 리턴 |
| atan(x) | x의 아크 탄젠트 값을 라디안으로 리턴 |
| atan2(x,y) | (x,y)에 해당하는 극좌표의 각도를 리턴 |
| ceil(x) | x보다 크거나 작은 최소 정수값 리턴 |
| cos(x) | x의 코사인 값 리턴 |
| exp(x) | eX를 리턴 |
| floor(x) | x보다 작거나 같은 최대 정수값 리턴 |
| log(x) | x의 자연대수 리턴 |
| max(x,y) | x, y 중 큰 값 리턴 |
| min(x,y) | x, y 중 작은 값 리턴 |
| pow(x,y) | xy를 리턴 |
| random() | 0과 1사이의 임의의 숫자 리턴 |
| round(x) | x의 가장 가까운 정수로 반올림되는 값 리턴 |
| sin(x) | x의 사인값 리턴 |
| sqrt(x) | x의 제곱근 리턴 |
| tan(x) | x의 탄젠트 값 리턴 |
| 메 소 드 | 설 명 |
|---|---|
| charAt(index) | 메소드가 적용되는 스트링의 지정된 인덱스에 있는 문자로 구성된 스트링을 리턴 |
| charCodeAt(index) | 지정된 인덱스의 문자의 Unicode 인코딩 리턴 |
| fromCharCode(codes) | 문자 코드의 컴마로 구분된 시퀀스에서 스트링 만듬 |
| indexOf(pattern) | 스트링안에 들어있는 pattern 파라미터가 지정한 첫 번째 스트링의 인덱스 리턴, 패턴이 스트링 안에 들어있지 않으면 -1 리턴 |
| indexOf(pattern,startIndex) | startIndex가 지정한 위치에서 검색을 시작하는 것을 제외하면 indexOf(pattern) 메소드와 같다. |
| lastIndexOf(pattern) | 스트링에 들어 있는 pattern 파라미터가 지정한 마지막 스트링의 인덱스 리턴, 패턴이 스트링 안에 들어있지 않으면 -1 리턴 |
| lastIndexOf(pattern,startIndex) | startIndex가 지정한 위치에서 검색을 시작하는 것을 제외하면 lastIndexOf(pattern)과 같다. |
| splitSeparator() | 하나의 스트링을 분리자를 기반으로 하여 서브스트링의 배열로 분리 |
| substring(startIndex) | startIndex에서 시작하는 스트링의 서브스트링을 리턴 |
| substring(startIndex,endIndex) | startIndex에서 시작하고, endIndex에서 끝나는 스트링의 서브스트링을 리턴 |
| toLowerCase() | 소문자로 변환된 스트링의 복사본 리턴 |
| toString() | 객체의 스트링 값을 리턴 |
| toUpperCase() | 대문자로 변환된 스트링의 복사본 리턴 |
| valueOf() | 객체의 스트링 값을 리턴 |
getElementById 와 getElementsByName 의 차이는
리턴 값이 단일값이냐 배열값이냐 의 차이일 것 같다.
의 리턴값을 알고자 한다면,
그럼 getElementsByName의 예는,
이상, 주저리 끝!
|
