Window 객체

window 객체는 계층적 구조로 되어 있는 자바스크립트 계층구조 중에서 최상위에 있는 어른(?) 객체입니다. 이 객체는 그 자체적으로도 여러 가지 작업을 수행하지만 대부분 이 객체의 자식들인 하위객체를 이용해서 많은 일들을 수행하게 됩니다.

예를들어 우리는 경고창을 띄우는데 alert() 라는 메소드를 아무런 생각없이 사용하고, 문장을 출력하는데 document.write() 메소드를 사용하지만 실제로 이들 메소드는 window.alert(), window.document.write() 가 올바른 사용법입니다. 하지만, 대부분의 경우 최상위 객체인 window 는 자연스럽게 생략하여 사용해도 이 어른(?)은 이해를 다 해 줍니다. 자식사랑은 끝이 없군요.

window 객체의 속성과 메소드는 다음과 같습니다

속성

메소드

closed

창의 닫힘여부(true/false)

alert()

경고창을 보여줍니다 

defaultStatus

상태표시줄의 초기문자열

blur()

focus를 제거합니다

document

document 객체

clearInterval()

setInterval()메소드에의해 수행되고 있는 함수를 중지합니다

frames

프레임 객체

clearTimeout()

setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다

history

history 객체

close()

창을 닫습니다

length

프레임의 수

comfirm()

확인버튼이 있는 창을 엽니다 

location

location 객체

focus()

focus를 줍니다

name

창의 이름

moveBy()

상대적 좌표로 창을 이동합니다

opener

현재창을 열어준 윈도우

moveTo()

절대위치로 창을 이동합니다

parent

부모 프레임

open()

새로운 창을 열어줍니다

self

현재창 자신

print()

화면의 내용을 프린트로 출력합니다 

status

상태표시줄의 문자열

prompt()

입력란이 있는 대화상자를 엽니다 

top

가장 앞쪽 창

resizeBy()

상대적 크기를 이용해서 창의 크기를 변경합니다 

window

현재창(=self)

resizeTo()

절대크기로 창크기를 변경합니다 

 

 

scroll()

창을 스크롤 시킵니다 

 

 

scrollBy()

상대적 좌표로 창을 스크롤 시킵니다 

 

 

scrollTo()

절대적 좌표로 창을 스크롤 시킵니다 

 

 

setInterval()

일정시간 간격으로 지정함수를 반복 호출 합니다

 

 

setTimeout()

일정시간 후 지정함수를 호출 합니다

먼저, 팝업창을 만들어 주는 window.open() 메소드를 보겠습니다. window.open() 메소드의 사용법은 다음과 같습니다.

window.open("팝업창으로 보여줄 문서","팝업창의 이름","옵션")

  • <SCRIPT LANGUAGE="JavaScript">
  • <!--
  • window.open("http://www.dreamwiz.com", "dreamwiz", "width=500,height=300,left=0,top=0,resizable=no");
  • //-->
  • </SCRIPT>

<input type="button" value="sample" name="formbutton1" />

이 예문은 http://www.dreamwiz.com 페이지를 가로 500픽셀, 높이 300 픽셀의 크기로 왼족위 모서리에 붙게 팝업창으로 열어줍니다. 두 번째 인자인 "dreamwiz" 는 뭐냐구요? 이 부분은 팝업창의 이름을 말하는 것으로 프레임 문서에서 타겟(target) 처럼 사용할 수 있습니다.. 즉, <a href="xxx.html" target="dreamwiz">열기</a> 처럼 사용하게 되면, 현재 드림위즈 홈페이지가 열려있는 팝업창에 xxx.html 문서가 열리게 되는 것이랍니다. 이 두 번째 인자에 아무것도 입력하지 않으려면 그냥 "" 만 표시 해 줍니다. (예) : window.open("http://www.dreamwiz.com", "", "옵션들")

세 번째 인자에는 옵션들을 설정 합니다. 이곳에서 사용할 수 있는 옵션에는 아래와 같은 것들이 있습니다

menubar

yes/no, 1/0

메뉴바를 보여주거나 숨깁니다

toolbar

yes/no, 1/0

도구막대를 보여주거나 숨깁니다

directories

yes/no, 1/0

디렉토리바를 보여주거나 숨깁니다

scrollbars

yes/no, 1/0

스크롤바를 보여주거나 숨깁니다

status

yes/no, 1/0

상태표시줄을 보여주거나 숨깁니다

location

yes/no, 1/0

주소표시줄을 보여주거나 숨깁니다

width

픽셀

팝업 윈도우의 가로크기를 지정합니다

height

픽셀

팝업 윈도우의 높이를 지정합니다

left

픽셀

팝업 윈도우의 x축 위치를 지정합니다

top

픽셀

팝업 윈도우의 y축 위치를 지정합니다

resizable

yes/no 1/0

팝업윈도우의 크기를 사용자가 임의로 수정할 수 있는지 여부를 지정합니다

fullscreen

 

전체화면 모드로 열어줍니다

channelmode

 

채널모드 창으로 열어줍니다

옵션인자를 지정하지 않으면 현재 창의 모양과 같은 형태로 팝업윈도우가 열리게 되고, 어느 한가지 옵션만 지정하면 나머지는 모두 디폴트 값으로 no 가 설정 됩니다.

버튼을 클릭하면 아무런 옵션이 없는 팝업 윈도우가 열리게 하는 코드는 아래와 같습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function winOpen() {
  10. window.open("http://www.dreamwiz.com","dreamwiz");
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY>
  18.  
  19. <input type=button onclick="winOpen();" value="옵션없이 팝업윈도우 열기">
  20.  
  21. </BODY>
  22.  
  23. </HTML>

<input type="button" value="sample" name="formbutton1" />

위에서 보듯이 옵션을 사용하지 않으면 <a href="xxx.html" target="_blank">열기</a> 처럼 태그를 사용한 것과 같은 효과를 줍니다. 이 옵션 인자는 지정하지 않아도 되지만, 두 번재 인자인 name 은 사용하지 않더라도 반드시 "" 으로 표시해 주어야 한다는 것은 명심하기 바랍니다.

그럼, 이번에는 몇가지 옵션만 선별적으로 주는 예를 보겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function winOpen() {
  10. window.open("http://www.dreamwiz.com","dreamwiz","location=yes,width=400,height=300");
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY>
  18.  
  19. <input type=button onclick="winOpen();" value="location=yes,width=400,height=300">
  20.  
  21. </BODY>
  22.  
  23. </HTML>

<input type="button" value="sample" name="formbutton1" />

위의 예에서 보듯이 특정 옵션을 지정하면 나머지 옵션값은 자동으로 no를 준 것과 같은 효과를 나타냅니다. 옵션을 줄때 주의할점은 절대 공백을 주어서는 안됩니다. 공백을 주게되면 네츠케이프 등에서는 에러를 발생시킬 수 있습니다

이번에는 잘 이용하면 아주 요긴하게 사용될 수 있는 fullscreen 모드와 channelmode 옵션으로 팝업윈도우를 열어보도록 하겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function fullOpen() { // fullscreen 모드로 열기 함수
  10. window.open("http://www.dreamwiz.com","dreamwiz","fullscreen");
  11. }
  12.  
  13. function channelOpen() { // 채널모드로 열기 함수
  14. window.open("http://www.dreamwiz.com","dreamwiz","channelmode");
  15. }
  16. //-->
  17. </SCRIPT>
  18.  
  19. </HEAD>
  20.  
  21. <BODY>
  22.  
  23. <input type=button onclick="fullOpen();" value="fullscreen">
  24. <p>fullscreen 윈도우를 닫으려면 Alt+F4 키를 누르세요
  25. <p>
  26. <input type=button onclick="channelOpen();" value="channelmode">
  27.  
  28. </BODY>
  29.  
  30. </HTML>

<input type="button" value="sample" name="formbutton1" />

 

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


<html>

<head>
    <script>
  //keycode 알아내기
  function key_check()
  {
   alert("키번호는 [" +event.keyCode+ "] 입니다.");
  }
   
  function isChk(e)
  {
   if(!e) var e = window.event;
   if(e.keyCode) code = e.keyCode;
   else if(e.which) code = e.which;
    
   if((code==44))
   {
    alert(', 는 사용불가능합니다.');
   
    if(e.keyCode) e.returnValue = false;
    else if(e.which) e.preventDefault();
   }
  }
    </script>
</head>

<body>

막음예제.. ASCII : 44번. ","<br/>
<input type="text" onkeypress="isChk(event);"><br/>
=========================<br/>
키값확인용 : <input type="text" onKeyDown='key_check();'><br />
==========================<br/>
onkeypress 이벤트 : ASCII 값 <br/>
onKeyDown 이벤트 : KeyCode값 <br/>
<pre>
keycode List
=================================================================
키                | 코드(숫자)
=================================================================
←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105


.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
\(중간) = 220

[출처] keycode알아내기|작성자 쭈
http://blog.naver.com/manymoa?Redirect=Log&logNo=150082517784
</pre>
</body>
</html>

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


[자바스크립트] 필드 유효성 검사


/**
* 입력값이 NULL인지 체크
*/

function
 isNull(input) {
    if (input.value == null input.value == "") {
        return true;
    }
    return false;
}
  
/**
* 입력값에 스페이스 이외의 의미있는 값이 있는지 체크
* ex) if (isEmpty(form.keyword)) {
*         alert("검색조건을 입력하세요.");
*     }
*/

function
 isEmpty(input) {
    if (input.value == null input.value.replace(/ /gi,"") == "") {
        return true;
    }
    return false;
}
  
/**
* 입력값에 특정 문자(chars)가 있는지 체크
* 특정 문자를 허용하지 않으려 할 때 사용
* ex) if (containsChars(form.name,"!,*&^%$#@~;")) {
*         alert("이름 필드에는 특수 문자를 사용할 수 없습니다.");
*     }
*/

function
 containsChars(input,chars) {
    for (var inx = 0; inx < input.value.length; inx++) {
       if (chars.indexOf(input.value.charAt(inx)) != -1)
           return true;
    }
    return false;
}
  
/**
* 입력값이 특정 문자(chars)만으로 되어있는지 체크
* 특정 문자만 허용하려 할 때 사용
* ex) if (!containsCharsOnly(form.blood,"ABO")) {
*         alert("혈액형 필드에는 A,B,O 문자만 사용할 수 있습니다.");
*     }
*/

function
 containsCharsOnly(input,chars) {
    for (var inx = 0; inx < input.value.length; inx++) {
       if (chars.indexOf(input.value.charAt(inx)) == -1)
           return false;
    }
    return true;
}
  
/**
* 입력값이 알파벳인지 체크
* 아래 isAlphabet() 부터 isNumComma()까지의 메소드가
* 자주 쓰이는 경우에는 var chars 변수를 
* global 변수로 선언하고 사용하도록 한다.
* ex) var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
*     var lowercase = "abcdefghijklmnopqrstuvwxyz"; 
*     var number    = "0123456789";
*     function isAlphaNum(input) {
*         var chars = uppercase + lowercase + number;
*         return containsCharsOnly(input,chars);
*     }
*/

function
 isAlphabet(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 알파벳 대문자인지 체크
*/

function
 isUpperCase(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 알파벳 소문자인지 체크
*/

function
 isLowerCase(input) {
    var chars = "abcdefghijklmnopqrstuvwxyz";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값에 숫자만 있는지 체크
*/

function
 isNumber(input) {
    var chars = "0123456789";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 알파벳,숫자로 되어있는지 체크
*/

function
 isAlphaNum(input) {
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 숫자,대시(-)로 되어있는지 체크
*/

function
 isNumDash(input) {
    var chars = "-0123456789";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 숫자,콤마(,)로 되어있는지 체크
*/

function
 isNumComma(input) {
    var chars = ",0123456789";
    return containsCharsOnly(input,chars);
}
  
/**
* 입력값이 사용자가 정의한 포맷 형식인지 체크
* 자세한 format 형식은 자바스크립트의 `regular expression`을 참조
*/

function
 isValidFormat(input,format) {
    if (input.value.search(format) != -1) {
        return true//올바른 포맷 형식
    }
    return false;
}
  
/**
* 입력값이 이메일 형식인지 체크
* ex) if (!isValidEmail(form.email)) {
*         alert("올바른 이메일 주소가 아닙니다.");
*     }
*/

function
 isValidEmail(input) {
//    var format = /^(\S+)@(\S+)\.([A-Za-z]+)$/;
    var format = /^((\w[\-\.])+)@((\w[\-\.])+)\.([A-Za-z]+)$/;
    return isValidFormat(input,format);
}
  
/**
* 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크
*/

function
 isValidPhone(input) {
    var format = /^(\d+)-(\d+)-(\d+)$/;
    return isValidFormat(input,format);
}
  
/**
* 입력값의 바이트 길이를 리턴
* ex) if (getByteLength(form.title) > 100) {
*         alert("제목은 한글 50자(영문 100자) 이상 입력할 수 없습니다.");
*     }
* Author : Wonyoung Lee
*/

function
 getByteLength(input) {
    var byteLength = 0;
    for (var inx = 0; inx < input.value.length; inx++) {
        var oneChar = escape(input.value.charAt(inx));
        if ( oneChar.length == 1 ) {
            byteLength ++;
        } else if (oneChar.indexOf("%u") != -1) {
            byteLength += 2;
        } else if (oneChar.indexOf("%") != -1) {
            byteLength += oneChar.length/3;
        }
    }
    return byteLength;
}
  
/**
* 입력값에서 콤마를 없앤다.
*/

function
 removeComma(input) {
    return input.value.replace(/,/gi,"");
}
  
/**
* 선택된 라디오버튼이 있는지 체크
*/

function
 hasCheckedRadio(input) {
    if (input.length > 1) {
        for (var inx = 0; inx < input.length; inx++) {
            if (input[inx].checked) return true;
        }
    } else {
        if (input.checked) return true;
    }
    return false;
}
  
/**
* 선택된 체크박스가 있는지 체크
*/

function
 hasCheckedBox(input) {
    return hasCheckedRadio(input);
}
YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


KEYDOWN (ctrl, alt, 오른쪽마우스, 왼쪽 마우스 기타 막기)  =[WEB]JavaScript / [WEB]프로그램 

2008/03/26 20:33

복사 http://hacking80.blog.me/30029394314

function click() { 
if ((event.button==2) ||  (event.button==3)) { 
 //alert("오른쪽 버튼은 사용하실 수없습니다");
 return true;
 //return false;

}

function keypressed(){ 
 var key=event.keyCode;

 if (event.ctrlKey == true ){
//   alert('Ctrl키 사용불가능 합니다.');
   return false;
 }
 if (event.altKey == true ){
//  alert('Alt키는 사용불가능 합니다.');
  return false;
 }
 if (event.keyCode == 13 ){
  return false;
 }
 if(event.keyCode == 0) {
    event.keyCode = 0;
    return false;
 }
 if (event.keyCode == 27) { // ESC Key 
    event.keyCode = 0;
       return false;
    }
    if (event.keyCode >= 112 && event.keyCode <= 123) { //F1 ~ F12
    event.keyCode = 0;
    return false;
  }

}

document.onmousedown=click ; 
document.onkeydown=keypressed ;

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


JAVASCRIPT 이벤트 핸들러 정리입니다.
 

onabort 이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)
onactivate

개체가 활성활 될 때 발생(태그의 기능이 작용할 때 발생하는 이벤트로

예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)

onafterprint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한후에 발생
onafterupdate

데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가

업데이트 되었을 때 발생(데이터 개체부분 참조)

onbeforeactivate 개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate를 참고)
onbeforecopy 선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
onbeforecut 선택 영역이 지워지기 바로 직전에 발생
onbeforedeactivate

모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔때 발생

(activeElement는 개체를 지칭하는 예약어로도 쓰임)

onbeforeeditfocus

편집가능한 개체 내부에 포함된 개체가 편집활성화 된 상태가 되거나

혹은 편집가능한 개체가 제어를 위해 선택될때

onbeforepaste 시스템의 클립보드에서 문서로 붙여넣기 될때 대상 개체에서 발생
onbeforeprint 문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생
onbeforeunload 페이지가 언로드되기 직전에 발생
onbeforeupdate

데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가

업데이트 되기전에 발생(데이터 개체부분 참조)

onblur 개체가 포커스를 잃었을 때
onbounce 마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드 될때 발생
oncellchange 데이터제공 개체에서 데이터가 변화할때 발생
onchange 개체 혹은 선택영역의 내용이 바뀔 때 발생
onclick 개체위에서 마우스의 왼쪽 버튼을 누를때 발생
oncontextmenu 클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열때 발생
oncontrolselect 사용자가 개체의 제어 영역을 만들때 발생
oncopy 시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생
oncut 시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생
ondataavailable

비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가

도착할 때 마다 정기적으로 발생

ondatasetchanged 데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될때 발생
ondatasetcomplete 데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될때 발생
ondblclick 사용자가 개체에 더블클릭 할때 발생
ondeactivate 모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할때 발생
ondrag 드래그 상태가 지속되는 동안 소스 객체로 부터 발생
ondragend 드래그 상태가 끝날때 소스 객체로 부터 발생
ondragenter 사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역으로 이동할때 타겟 개체에서 발생
ondragleave 사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역을 떠날때 타겟 개체에서 발생
ondragover

사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역내에서 드래그할 때

계속적으로 타겟 개체에서 발생

ondragstart 선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생
ondrop

드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타겟 개체에 드롭되었을 때

타겟 개체어서 발생

onerror 개체가 로드되는 동안 발생하는 이벤트
onerrorupdate

데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할 때

데이터 영역 개체에서 발생

onfilterchange 비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생
onfinish 마퀴개체의 loop가 완료되었을 때 발생
onfocus 개체가 포커스를 받았을 때 발생
onfocusin 개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생
onfocusout 포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생
onhelp 브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때
onkeydown 사용자가 키를 눌렀을 때
onkeypress 기능키를 제외한 키를 눌렀을 때 발생
onkeyup 사용자가 키를 놓았을 때 발생
onlayoutcomplete

소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때

현재 LayoutRect개체를 모두 채우는 것이 끝났을 때 발생

onload 브라우저가 개체를 로드한 후에 발생
onlosecapture 개체가 마우스 캡쳐를 잃었을 때 발생
onmousedown 개체위에 마우스 버튼을 누를때 발생(좌우 어느 버튼이든)
onmouseenter 개체 안으로 마우스 포인터가 들어올때 발생
onmouseleave 개체의 경계밖으로 마우스 포인터가 이동할 때 발생
onmousemove 개체위에서 마우스가 움직일때 발생
onmouseout 개체밖으로 마우스 포인터가 빠져나갈 때 발생
onmouseover 개체위로 마우스 포인터가 들어올때 발생
onmouseup 마우스가 개체위에 있는 동안 마우스를 누른상태에서 해제될때 발생
onmousewheel 마우스 휠이 돌아갈때 발생
onmove 개체가 움직일 때 발생
onmoveend 개체가 움직임이 끝날 때 발생
onmovestart 개체가 움직이기 시작할 때 발생
onpaste 문서에 클립보드로 부터 데이터가 전송될때 타겟 개체에서 발생
onpropertychange 개체의 속성이 바뀔대 발생
onreadystatechange 개체의 상태가 변화할때 발생
onreset 폼을 사용자가 리셋할 경우 발생
onresize 개체의 크기가 바뀔때 발생
onresizeend 제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날때 발생
onresizestart 제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할때 발생
onrowenter

데이터 소스내에서 현재 열이 변화되거나 개체에 새로운 유용한

데이터가 입력될때 발생

onrowexit 데이터 소스 콘트르롤이 개체내의 현재 열을 변화시킬 때 발생
onrowsdelete 레코드셋에서 열이 삭제될때 발생
onrowsinserted 현재 레코드셋에 새로운 열이 추가된후에 발생(데이터 개체에서)
onscroll 사용자가 개체내이 스크롤 바를 스크롤 할때 발생
onselect 현재 선택된 영역이 바뀔때 발생
onselectionchange 문서의 선택 영역의 상태가 바뀔때 발생
onselectstart 개체가 선택되기 시작할때 발생
onstart 마퀴개체에서 매 루프가 시작될때 발생
onstop 사용자가 stop버튼을 눌렀을 경우 혹은 페이지를 떠날때 발생
onsubmit 폼이 전송되기 바로전에 발생
onunload 개체가 언로드되기 직전에 발생

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


2.2. 자바스크립트의 객체들

자바스크립트에는 크게 브라우저 객체와 내장객체로 나누어 볼 수 있습니다. 브라우저객체는 웹브라우저(익스플로러, 네츠케이프 등)와 관련된 객체들이고, 내장객체는 자바스크립트 자체에 내장되어 있는 객체들입니다

브라우저 관련 객체로는 navigator, window, document, frame, history, location, form, image, link, radio, text, checkbox, select, textarea 등이 있으며, 내장객체로는 Date, Array, String, Math 등이 있습니다

자바스크립트에서는 브라우저관련 객체에 계층적으로 접근합니다.

☆ 네츠케이프와 익스플로러의 브라우저 객체 모형

2.3. 브라우저 객체별 속성과 메소드

2.3.1. navigator : 브라우저의 이름, 버전 등 브라우저 관련 정보를 알려줍니다

 

속성

appCodeName

브라우저 코드 이름을 알려줍니다

appName

브라우저의 이름을 알려줍니다

appVersion

브라우저의 버전정보를 알려줍니다

userAgent

브라우저의 User Agent를 알려줍니다

platform

사용중인 시스템 정보를 알려줍니다

메소드

JavaEnabled()

자바 사용이 가능한지 여부를 true, false 형태로 알려줍니다

 

2.3.2. event : 이벤트에 관한 속성 정보를 알려줍니다

 

네츠케이프

익스플로러

pageX

페이지를 기준으로 이벤트가 발생한 X 좌표

clientX

클라이언트 영역 내에서 이벤트가 발생한 X 좌표

pageY

페이지를 기준으로 이벤트가 발생한 Y 좌표

clientY

클라이언트 영역 내에서 이벤트가 발생한 Y 좌표

screenX

화면을 기준으로 이벤트가 발생한 X 좌표

screenX

화면 영역 내에서 이벤트가 발생한 X 좌표

screenY

화면을 기준으로 이벤트가 발생한 Y 좌표

screenY

화면 영역 내에서 이벤트가 발생한 Y 좌표

which

마우스버튼의 종류(1=왼쪽, 2=가운데, 3=오른쪽) 또는 입력키의 ASCII 값

keyCode

눌려진 키보드의 ASCII 값

target

이벤트가 발생한 HTML 요소

button

마우스 버튼의 종류 (0=없음, 1=왼쪽, 2=오른쪽, 3= 왼쪽+오른쪽, 4=중간,5=왼쪽+중간,6=오른쪽+중간,7=왼쪽+중간+오른쪽)

type

이벤트의 종류

srcElement

이벤트가 발생한 HTML 요소

 

type

이벤트의 종류

cancelBubble

상위단계의 이벤트 핸들러 처리여부(처리=false)

 

2.3.3. screen : 사용자 컴퓨터의 해상도와 색상에 관련된 정보

 

속성

availHeight

윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 높이

availWidth

윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 넓이

height

화면의 높이

width

화면의 넓이

colorDepth

사용가능한 색상 수

 

2.3.4. window : 계층 구조상의 최상위 객체

 

속성

메소드

closed

창의 닫힘여부(true/false)

alert!()

경고창을 보여줍니다

defaultStatus

상태표시줄의 초기문자열

blur()

focus를 제거합니다

document

document 객체

clearInterval()

setInterval()메소드에의해 수행되고 있는 함수를 중지합니다

frames

프레임 객체

clearTimeout()

setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다

history

history 객체

close()

창을 닫습니다

length

프레임의 수

comfirm()

확인버튼이 있는 창을 엽니다

location

location 객체

focus()

focus를 줍니다

name

창의 이름

moveBy()

상대적 좌표로 창을 이동합니다

opener

현재창을 열어준 윈도우

moveTo!()

절대위치로 창을 이동합니다

parent

부모 프레임

open()

새로운 창을 열어줍니다

self

현재창 자신

print()

화면의 내용을 프린트로 출력합니다

status

상태표시줄의 문자열

prompt()

입력란이 있는 대화상자를 엽니다

top

가장 앞쪽 창

resizeBy()

상대적 크기를 이용해서 창의 크기를 변경합니다

window

현재창(=self)

resizeTo!()

절대크기로 창크기를 변경합니다

 

scroll()

창을 스크롤 시킵니다

scrollBy()

상대적 좌표로 창을 스크롤 시킵니다

scrollTo()

절대적 좌표로 창을 스크롤 시킵니다

setInterval()

일정시간 간격으로 지정함수를 반복 호출 합니다

setTimeout()

일정시간 후 지정함수를 호출 합니다

 

2.3.5. history 객체 : 방문한 URL에 관한 정보를 보여줍니다

 

속성

length

브라우저의 history 목록에 저장된 URL의 갯수

메소드

back()

한단계 전 URL 로 이동


forward()

한단계 뒤 URL 로 이동


go()

지정된 단계의 URL 로 이동

 

2.3.6. location : 현재문서의 URL에 관한 정보를 제공합니다

 

속성

hash

앵커부분(하이퍼링크의 # 이하부분)

host

URL의 호스트부분

hostname

URL의 호스트와 Port 부분

href

문서의 URL

pathname

URL의 경로부분

port

URL의 Port 부분

protocol

URL의 프로토콜 부분

search

URL의 쿼리정보(? 이하의 부분)

메소드

reload()

문서를 새로고칩니다

replace()

현재의 URL을 새로운 URL 로 고칩니다

 

2.3.7. document : HTML 문서

 

속성

alinkColor

링크클릭시 색상

anchors

앵커 객체

applet!s

애플릿 객체

bgColor

배경색상

cookie

쿠키 파일의 정보

domain

문서가 있는 서버의 도메인 이름

embeds

embed 객체

fgColor

문서의 텍스트 색상

forms

form 객체

lastModified

문서의 최종수정일 정보

linkColor

하이퍼링크 색상

links

link 객체

referrer

현재 문서를 불러온 이전문서 정보

title

문서의 제목

URL

문서의 URL

vlinkColor

방문한 적이 있는 링크 색상

메소드

close()

문자열 출력 중지

open()

문자열 출력 시작

write()

문자열 출력

writeIn()

지정된 윈도우의 문서에 HTML 형식으로 쓰면서 줄을 바꾸어 줍니다.

 

2.3.8. Image 객체 : 문서내에 있는 이미지에 관한 정보를 담고 있습니다.

<img src="이미지명" name=img_name> 과 같은 태그에 의해 생성되는 객체입니다

 

속성

border

이미지의 테두리 값

complete

이미지 로드가 완료 되었는지 여부(true/false)

height

이미지의 높이

width

이미지의 가로크기

hspace

이미지의 수평여백

vspace

이미지의 수직여백

length

이미지의 개수

lowsrc

lowsrc 로 설정한 이미지의 URL

name

이미지의 name

src

이미지의 URL


2.3.9. Form 객체 : 입력양식에 관한 객체

<form name=myform> 태그에 의해 생성되는 객체입니다

 

속성

action

폼 태그의 action 속성

button

버튼 객체

checkbox

체크박스 객체

elements

폼의 하위 객체

encoding

폼태그의 enctype 속성

fileupload

fileupload 객체

hidden

hidden 객체

length

엘리먼트의 개수

method

폼 태그의 method 속성

name

form 의 이름

password

password 객체

radio

radio 객체

reset

reset 객체

select

select 객체

submit

submit 객체

target

폼태그의 target 속성

text

text box 객체

textarea

textarea 객체

메소드

submit()

폼 양식을 전송합니다

reset()

폼 양식을 초기화 합니다

 

2.3.10. button 객체 : 폼 객체의 하위객체인 버튼 객체입니다

<input type=button> 태그에 의해 생성되는 객체 입니다

 

속성

form

버튼의 상위 폼 객체


name

버튼의 이름


type

버튼의 타입


value

버튼의 값

메소드

blur()

포커스 해제


click()

버튼을 클릭


focus()

버튼에 포커스를 줍니다

 

2.3.11. checkbox 객체 : 폼 객체의 하위객체인 체크박스 객체

<input type=checkbod> 태그에 의해 생성되는 객체 입니다

 

속성

checked

체크되어 있는지 여부(true/false)


defaultChecked

기본값으로 체크되어 있는지 여부(true/false)


form

상위 폼 객체


name

체크박스의 이름 속성


type

체크박스의 타입 속성


value

체크박스의 value 속성

메소드

blur()

포커스를 해제합니다


click()

체크박스를 클릭합니다


focus()

포커스를 줍니다

 

2.3.12. fileupload 객체 : 폼 객체의 하위객체인 fileupload 객체

<input type=file> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성

메소드

blur()

포커스를 해제합니다


focus()

포커스를 줍니다

 

2.3.13. hidden 객체 : 폼의 하위 객체인 hidden 객체

<input type=hidden> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성

 

2.3.14. password 객체 : 폼의 하위객체인 password 객체입니다

<input type=password> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

focus()

포커스를 줍니다

 

2.3.15. radio 객체 : 폼의 하위객체인 라디오버튼 객체입니다

<input type=radio> 태그에 의해 생성되는 객체 입니다

 

속성

checked

체크되어 있는지 여부(true/false)

defaultChecked

기본값으로 체크되어 있는지 여부(true/false)

form

상위 폼 객체

length

라디오버튼의 개수

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

 

2.3.16. reset 객체 : 폼의 하위객체인 reset 버튼 객체입니다

<input type=reset> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

 

2.3.17. submit 객체 : 폼의 하위 객체인 submit 객체입니다

<input type=submit> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

click()

버튼을 클릭합니다

focus()

포커스를 줍니다

 

2.3.18. text 객체 : 폼의 하위객체인 텍스트박스 객체입니다

<input type=text> 태그에 의해 생성되는 객체 입니다

 

속성

defaultValue

text box 의 초기문자열

form

상위 폼 객체

name

name 속성

type

type 속성

value

value 속성

메소드

blur()

포커스를 해제합니다

select()

텍스트박스 입력란의 문자열을 선택합니다

focus()

포커스를 줍니다

 

2.3.19. select 객체 : 폼 버튼의 하위객체인 목록상자 객체입니다. 하위객체로 option을 가지고 있습니다

<select><option></option></select> 태그에 의해 생성되는 객체 입니다

 

속성

form

상위 폼 객체

length

option 의 수

name

name 속성

options

option 객체

selectedIndex

선택된 항목의 index

type

type 속성(select 유형)

메소드

blur()

포커스를 해제합니다

focus()

포커스를 줍니다

option객체의 속성

defaultSelected

기본값으로 선택된 항목(true/false)

index

현재옵션의 인덱스

selected

선택된 상태(true/false)

text

<option> 다음에 오는 문자열

value

value 속성

 

2.3.20. textarea : 폼의 하위객체인 textarea 객체입니다

<textarea></textarea> 태그에 의해 생성되는 객체 입니다

 

속성

defaultValue

초기문자열


form

상위 폼 객체


name

name 속성


type

type 속성


value

value 속성

메소드

blur()

포커스를 해제합니다


select()

textarea 입력란의 문자열을 선택합니다


focus()

포커스를 줍니다

 

2.4. 자바스크립트의 내장 객체

 

객체명

내용

Array

동종의 데이터들을 저장하고 다루기 위해 사용하는 배열 객체

Date

날짜와 시간과 관련된 내용을 처리하는 객체

Math

수학 계산을 위한 객체

String

문자열 처리를 위한 객체

 

2.4.1. 배열(Array) 객체

여러개의 데이터를 참조할 때 각 변수를 선언하지 않고 하나의 배열 이름과 구성 번호로 접근하기 위해 접근합니다

배열객체 이름 = new Array()

배열객체 이름 = new Array(배열수)

배열객체 이름 = new Array(배열1, 배열2,...)

 

 

속성

length

배열의 길이 정보를 담고 있습니다

메소드

join(문자열)

배열에 들어있는 문자열을 결합합니다

reverse()

배열의 순서를 바꾸어 줍니다

sort(compareFunction)

배열을 정열합니다

slice(처음,끝)

배열의 일부를 새로운 배열로 만듭니다

concat(배열객체명)

두 개의 배열을 합쳐서 하나의 배열로 만듭니다


2.4.2. Date 객체

날자와 시간을 표시하거나 설정하는데 사용되는 객체입니다

자바스크립트에서는 그리니치표준시(GMT) 1970년 1월 1일 00시 00분 00초 가 기준입니다

객체이름 = new Date()
 

 

getYear()/setYear()

연도표시/설정

getMonth()/setMonth()

월(0-11)표시/설정

getDate()/setDate()

일(1-31)표시/설정

getDay()/setDay()

요일(0-6)표시/설정

getHours()/setHours()

시(0-23)표시/설정

getMinutes()/setMinutes()

분(0-59)표시/설정

getSeconds()/setSeconds()

초(0-59)표시/설정

getTimes()/setTimes()

기준시(1970년1월1일00:00:00)를 기준으로 경과된 시간을 milisecond 로 표시/설정

toString()

날짜와 시간을 문자열로 변환

toLocaleString()

날짜와 시간을 지역시간 문자열로 변환

toGMTString()

날짜와 시간을 GMT 문자열로 변환

getTimezoneOffse()

GMT 와 지역시간의 차이를 분단위로 표시

getFullYear()/setFullyear()

연도수를 4자리수로 표시/설정

 

2.4.3. Math 객체

수학계산을 위해 사용되는 객체로 실제 사용빈도는 높지 않으나 랜덤하게 데이터를 추출 하는데 많이 사용됩니다.

 

속성

E

자연로그 밑에 사용되는 오일러 상수

LN10

10의 자연로그

LN2

2의 자연로그

Log10E


LOG2E


PI

원주율

SQRT1_2

1/2의 제곱근

SQRT2

2의 제곱근

메소드

abs(n)

n의 절대값

acos(n)

n의 역 코사인 값

asin(n)

n의 역 사인값

atan(n)

n의 역 탄젠트값

atan2(x,y)

지정된 x,y 좌표에서의 역 탄젠트 값을 반환

cos(n)

n의 코사인값

sin(n)

n의 사인 값

sqrt(n)

n의 제곱근

tan(n)

n 의 탄젠트 값

ceil(n)

n을 올림한 값

exp(n)

오일러 상수 e를 n승 한 값

floor(n)

n을 내림한 값

log(n)

n의 자연로그 값

max(n,m)

둘 중 큰 수

min(n,m)

둘 중 작은 수

pow(n,m)

n 의 m 승

random()

0과 1사이의 난수 반환

round(n)

n을 반올림한 값

 

2.4.4. String 객체

String 객체는 글자의 모양을 지정하거나 문자열을 처리하기 위해 사용됩니다.

 

속성

length

문자열의 길이

 

    2.4.4.1. 글자의 모양과 관련된 메소드

 

메소드

anchor("name")

앵크를 설정 합니다

<A NAME="name">

big()

약간 큰 글씨로 설정 합니다

<BIG>

blink()

글자를 깜빡이게 합니다(NC)

<BLINK>

bold()

글자를 진하게 합니다

<B>

fixed()

글자를 타자체로 설정합니다

<TT>

fontcolor("color")

글자색을 지정합니다

<FONT COLOR="color">

fontsize("size")

글자 크기를 지정합니다

<FONT SIZE="size">

italics()

이탤릭체로 지정합니다

<I>

link("url")

하이퍼링크를 설정합니다

<A HREF="url">

small()

약간 작은 글씨로 합니다

<SMALL>

strike()

취소선을 긋습니다

<SRIKE>

sub()

아래첨자로 설정합니다

<SUB>

sup()

윗첨자로 설정합니다

<SUP>

toLowerCase()

소문자로 변환합니다


toUpperCase()

대문자로 변환합니다



    2.4.4.2. 문자열 처리를 위한 메소드

 

charAt(n)

n 번째의 문자열을 반환합니다

charCodeAt(n)

n 번째의 문자의 유니코드 번호를 반환합니다

concat(문자열)

두 개의 문자열을 합칩니다

fromCharCode(x,y,..)

유니코드번호를 문자열로 변환합니다

indexOf(문자열)

왼쪽부터 지정된 문자열의 위치를 반환합니다

lastIndexOf(문자열)

오른쪽부터 지정된 문자열의 위치를 반환합니다

split(분리자)

분리자를 기준으로 문자열을 분리합니다

substring(A,B)

A부터 B 이전까지의 문자열을 반환합니다

substr(A,n)

A부터 n 만큼의 문자열을 반환합니다


2.7. 변수

변수(Variable)란 데이터를 저장하는 장소로 어떤 내용을 담아두는 용기에 비유할 수 있습니다.

일반적으로 변수 선언은 아래와 같은 방법을 사용합니다

var myVar=변수값

myVar=변수값

var myVar1, myVar2, myVar3...

 


변수의 이름은 a-Z 까지의 알파벳과 0-9까지의 숫자, 언더바(Under Bar ; "_")의 조합으로 사용할 수 있습니다. 하지만 변수이름의 첫글자는 반드시 알파벳이나 언더바로 시작되어야 합니다.

또한, 변수명으로 자바스크립트 예약어는 사용할 수 없습니다

자바스크립트 예약어

 

abstract

case

continue

extends

for

import!

long

private

static

throw

var

boolean

catch

default

false

function

in

native

protected

super

throw

void

break

char

do

final

goto

instanceof

new

public

switch

transient

while

byte

class

double

finally

if

int

null

return

synchronized

true

with

case

const

else

float

implements

interface

package

short

this

try


 
출처 
YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST