|
Language/JAVASCRIPT 2010. 5. 10. 15:16
< onAbort 예 >
<img name="coffeepot" src="coffeepot.gif" width="61" height="63" border="0" alt="coffeepot.gif" onAbort="return confirm(‘그림 다운로드를 중단하겠습니까?’)></p>
< onReset | onSubmit 예 >
<html>
<head>
<title>onsubmit-onreset</title>
</head>
<body>
<form name="oform" onSubmit="return confirm('폼을 제출할까요')" onReset="return confirm('폼을 초기화 할까요?')">
<p> id : <input type=" text" name="idtext" value="guest">
<p>password: <input type="text" name="passwordtext" value="guest"></p>
<p><input type="submit" name="submitbutton" value="보내기">
<input type="reset" name="resetbutton"></p>
</form>
</body>
</html>
<form name="oform" onSubmit="return confirm('폼을 제출할까요')" onReset="return confirm('폼을 초기화 할까요?')">
보내기 버튼을 클릭하면 submit 이벤트가 발생하여 폼을 제출할 것인가를 묻는 대화상자가 나타나는데 "예"를 선택하면 폼이 제출되고 그렇지 않으면 폼은 제출되지 않는데 이 이벤트는 폼을 제출하기 전에 폼의 유효성을 확인하기 위해 많이 사용된다.
"원래대로(reset)"버튼을 클릭하면 reset 이벤트가 발생하고 폼을 초기화할 것인가를 묻는 대화상자가 나타나는데 "예"를 선택하면 폼이 초기화되고 "취소"를 선택하면 폼은 초기화가 되지 않는다.
Language/JAVASCRIPT 2010. 5. 10. 15:14
onkeydown 이벤트 발생시 event.keyCode 값과
onkeypress 이벤트 발생시 event.keyCode 값이 다르다는 것을 알았다.
onkeypress 이벤트 발생시 event.keyCode 값은 다음과 같다.
이는 ASCII 값과 같음을 알게 되었다.
이벤트(Event) Key code 정리 |
키코드 |
사용키(시스템) |
키코드 |
사용키(숫자) |
13 |
ENTER |
48 |
0 |
27 |
ESC |
49 |
1 |
32 |
SPACE BAR |
50 |
2 |
|
|
51 |
3 |
|
|
52 |
4 |
|
|
53 |
5 |
|
|
54 |
6 |
|
|
55 |
7 |
|
|
56 |
8 |
|
|
57 |
9 |
키코드 |
사용키(영어 대문자) |
키코드 |
사용키(영어 소문자) |
65 |
A |
97 |
a |
66 |
B |
98 |
b |
67 |
C |
99 |
c |
68 |
D |
100 |
d |
69 |
E |
101 |
e |
70 |
F |
102 |
f |
71 |
G |
103 |
g |
72 |
H |
104 |
h |
73 |
I |
105 |
i |
74 |
J |
106 |
j |
75 |
K |
107 |
k |
76 |
L |
108 |
l |
77 |
M |
109 |
m |
78 |
N |
110 |
n |
79 |
O |
111 |
o |
80 |
P |
112 |
p |
81 |
Q |
113 |
q |
82 |
R |
114 |
r |
83 |
S |
115 |
s |
84 |
T |
116 |
t |
85 |
U |
117 |
u |
86 |
V |
118 |
v |
87 |
W |
119 |
w |
88 |
X |
120 |
x |
89 |
Y |
121 |
y |
90 |
Z |
122 |
z |
키코드 |
사용키(특수문자) |
키코드 |
사용키(특수문자) |
33 |
! |
58 |
: |
34 |
" |
59 |
; |
35 |
# |
60 |
< |
36 |
$ |
61 |
= |
37 |
% |
62 |
> |
38 |
& |
63 |
? |
39 |
' |
64 |
@ |
40 |
( |
91 |
[ |
41 |
) |
92 |
\ |
42 |
* |
93 |
] |
43 |
+ |
94 |
^ |
44 |
, |
95 |
_ |
45 |
- |
96 |
` |
46 |
. |
123 |
{ |
47 |
/ |
124 |
| |
|
|
125 |
} |
|
|
126 |
~ |
Language/JAVASCRIPT 2010. 5. 10. 15:12
- 이벤트 정의와 사용
- 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
- 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
- 이벤트 핸들러 : 프로세스를 수행하는 코드
- 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나, 폼에 입력한 데이터를 검증한다거나, 버튼을 클릭할 때 애니메이션을 나타내거나, Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다.
-
JavaScript가 정의한 이벤트
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 |
사용자가 문서나 프레임 세트를 종료함 |
- 객체 유형 정의
- 프로퍼티 : 객체에 들어 있는 데이터 값에 액세스할 때 사용.
- 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수.
- 객체 유형 만들기
사용자가 직접 객체 유형을 정의하고 특정 객체 인스턴스를 만들 수 있 는데 이렇게 만들려면 객체 유형의 특정 인스턴스를 만들 때 사용되는 함수를 정의하기만 하면 된다. 본래 이러한 생성자 함수는 다음과 같은 일을 한다.
- 객체 유형의 프로퍼티에 값을 할당한다.
- 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다.
- 객체 사용 예
- table 객체의 정의 (table.js)
function table_getValue(row,col){
return this.data[row* this.columns+col ];
}
function table_setValue(row,col,value){
this.data[row* this.columns+col ]=value;
}
function table_set(contents){
var n=contents.length;
for(var j=0;jthis.data[j]=contents[j];
}
function table_isHeader(row,col){
return this.header[row* this.columns+col ];
}
function table_makeHeader(row,col){ this.header[row* this.columns+col ]=true;
}
function table_makeNormal(row,col){ this.header[row* this.columns+col ]=false;
}
function table_makeHeaderRow(row){ for(var j=0;j< this.columns+j)
this.header[row* this.columns+col ]=true;
}
function table_makeHeaderColumn(col){ for(var i=0;i< this.rows;++i)
this.header[i* this.columns+col ]=true;
}
function table_write(doc){
doc.write("<TABLE BORDER="+ this.border+">");
for(var i=0;i< this.rows;++i) {
doc.write("<TR>");
for(var j=0;j< this.columns;++j) {
if( this.header[i* this.columns+j ]) {
doc.write("<TH>");
doc.write( this.data[i* this.columns+j ]);
doc.write("</TH>");
}
else {
doc.write("<TD>");
doc.write( this.data[i* this.columns+j ]);
doc.write("</TD>");
}
}
doc.writeln("</TR>");
}
doc.writeln("</TABLE>");
}
funtion table(rows,columns) {
this.rows=rows
this.columns=columns
this.border=0
this.data=new Array(rows*columns)
this.header=new Array(rows*columns)
this.getValue=table_getValue
this.setValue=table_setValue
this.set=table_set
this.isHeader=table_isHeader
this.makeHeader=table_makeHeader
this.makeNormal=table_makeNormal
this.makeHeaderRow=table_makeHeaderRow
this.makeHeaderColumn=table_makeHeaderColumn
this.write=table_write
}
- table 객체 사용하기
<HTML>
<HEAD>
<TITLE>Defining Object Types</TITLE
<SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
//-></SCRIPT>
</HEAD>
<BODY>
<H1>Defining Object Types</H1>
<SCRIPT LANGUAGE="JavaScript"><!-
t=new table(3,4)
contents=new
Array("This","is","a","test","of","the","table","object.","Let's","see","it","work")
t.set(contents)
t.border=4
t.makeHeaderColumn(0)
t.write(document)
//-></SCRIPT>
</BODY>
</HTML>
- 객체 유형에 프로퍼티와 메소드 추가
: prototype 프로퍼티를 통해서 인스턴스화할 수 있는 미리 정의된 객체 유형에 프로퍼티와 메소드 추가
사용 예
<HTML>
<HEAD>
<TITLE>Updating Object Types </TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
//-></SCRIPT>
</HEAD>
<BODY>
<H1>Updating Object Types</H1>
<SCRIPT LANGUAGE="JavaScript"><!-
function table_colorWrite(doc){
........
함수 정의
........
........
}
t=new table(3,4)
table.prototype.bgColor="Cyan"
table.prototype.colorWrite=table_colorWrite
.............
.............
t.colorWrite(document)
//-></SCRIPT>
</BODY>
</HTML>
- 프로퍼티와 메소드 삭제
delete objectName.propertyName
delete objectName.methodName
객 체 |
용 도 |
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에 대해서 임시적으로 지원 |
- 모든 브라우저 스크립트의 기본적인 것으로, 브라우저가 자동으로 정의하는 최상위 레벨의 객체이다. 현재 열려 있는 각 윈도우에 대해 별도의 window 객체가 정의된다.
window 객체의 프로퍼티
프로퍼티 |
설 명 |
closed |
윈도우가 닫혀 있는지 식별 |
defaultStatus |
브라우저 윈도우의 하단의 상태바에 나타나는 디폴트 상대 메시지를 지정 |
document |
윈도우에 표시되어 있는 현재 문서를 지정하는 객체 |
frames |
윈도우 객체에 들어 있는 모든 프레임 객체로 구성된 배열 |
history |
마지막으로 윈도우로 로드된 URL의 리스트를 포함하는 윈도우의 히스토리 객체 |
length |
window에 들어 있는 프레임의 수 식별 |
location |
window 객체와 관련된 URL을 지정하는 객체 |
name |
윈도우의 이름 지정 |
offscreenBuffering |
윈도우 정보의 오프스크린 버퍼링이 사용될 것인지를 지정하는 부울값
오프스크린 버퍼링은 윈도우를 나타내기 전에 윈도우의 모든 요소를 로드할 때 사용 |
opener |
윈도우를 만들거나 열 수 있도록 해주는 window 객체 지정 |
parent |
특정 윈도우를 포함하는 윈도우를 지정하는 시너님 |
self |
참조될 현재 윈도우를 지정하는 시너님 |
status |
브라우저 윈도의 하단의 상태 표시줄에 나타날 임시 메시지를 지정 |
top |
중첩된 일련의 윈도우에서 맨 위에 있는 브라우저 윈도우를 의미하는 시너님 |
window |
참조될 현재 윈도우를 식별하는 시너님 |
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) |
윈도우를 특정 위치까지 스크롤한다. |
open() 메소드의 옵션
옵 션 |
값 |
설 명 |
toolbar |
yes no |
윈도우에 툴바 제공 |
location |
yes no |
윈도우에 위치 필드 제공 |
directories |
yes no |
디렉토리 버튼 제공 |
status |
yes no |
상태 표시줄 제공 |
menubar |
yes no |
메뉴바 제공 |
scrollbars |
yes no |
스크롤 바 제공 |
resizable |
yes no |
윈도우 크기 조절 가능 |
width |
정수 |
윈도우의 폭(픽셀) |
height |
정수 |
윈도우의 높이(픽셀) |
- 프레임은 윈도우를 독립된 표시 영역들로 분할한 후, 이 영역들에 표시되는 정보들을 강력하게 컨트롤 할 수 있게 해준다.
- 프레임 객체의 프로퍼티와 메소드는 window 객체와 같지만, close() 메소드는 지원하지 않는다.
- JavaScript 에서 아주 중요한 객체로, 이 객체를 사용하면 로드될 문서를 업데이트하고 로드된 문서 안에 있는 HTML 요소에 액세스할 수 있다.
프로퍼티 |
설 명 |
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 속성의 값 식별 |
document 객체의 메소드
메 소 드 |
설 명 |
close() |
문서의 객체를 만드는 데 사용된 스트림 |
open([mimeType][,"replace"]) |
선택적인 MIME 유형으로 문서 객체를 만들 때 사용되는 흐름을 개시한다. "replace" 파라미터는 text/html MIME 유형과 함께 사용되어 히스토리 리스트에 있는 현재 문서를 대체 |
write(expr1[,expr2...,exprN]) |
문서에 표현식의 값을 기록 |
write(expr1[,expr2...,exprN]) |
개행 문자가 다음에 따라오는 문서에 표현식의 값 기록 |
- navigator 객체는 window 객체와 마찬가지로 브라우저 객체 모델에서 최상위 레벨의 객체이며, 스크립트를 실행할 때 사용되는 브라우저의 종류와 버전에 대한 정보 제공한다.
navigator 객체의 프로퍼티
프로퍼티 |
브라우저 지원 |
설 명 |
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 |
사용자 프로파일 정보에 대한 액세스를 제공하는 객체 |
navigator 객체의 메소드
메 소 드 |
설 명 |
javaEnabled() |
사용자가 브라우저의 Java 기능을 켜두었는지의 여부를 나타내는 부울값 리턴 |
taintEnabled() |
사용자가 data tainting(보안 메커니즘)을 활성화했는지 여부를 나타내는 부울값 리턴 |
preference |
서명이 되지 않은 스크립트가 보안 관련 프로퍼티를 얻고 설정할 때 사용 |
event 객체의 프로퍼티
프로퍼티 |
브라우저 |
설 명 |
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객체 지정 |
screen 객체의 프로퍼티
- height : 사용자의 화면의 현재 높이(픽셀)
- width : 사용자의 화면의 현재 너비(픽셀)
- colorDepth : 사용자의 화면/비디오 카드에서 현재 지원하는 색상당 바이트 수
- document 객체의 프로퍼티로 액세스되고, form 객체는 문서 안의 폼에 액세스할 수 있도록 해주고, 폼 관련 이벤트에 응답을 할 수 있도록 해주기 때문에 중요하다.
form 객체의 프로퍼티
프로퍼티 |
설 명 |
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 |
텍스트 영역 필드를 나타내는 객체 |
form 객체의 메소드
메 소 드 |
설 명 |
handleEvent() |
지정된 이벤트에 대한 폼의 이벤트 핸들러를 호출할 때 사용 |
submit() |
폼을 제출시 사용 |
reset |
폼의 엔트리를 디폴트 값으로 재설정시 사용 |
form 요소 객체의 프로퍼티
객 체 |
프로퍼티 |
설 명 |
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 |
객체의 값 식별 |
form 요소 객체의 메소드
객 체 |
메 소 드 |
설 명 |
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() |
텍스트 영역에 있는 텍스트 하이라이트 |
- 윈도우에 로드되어 있는 현재 문서의 URL에 액세스하거나 새로운 문서를 로드할 때 사용
location 객체의 프로퍼티
프로퍼티 |
설 명 |
hash |
URL의 앵커 부분(존재하는 경우) |
host |
URL의 hostname:port 부분 |
hostname |
URL의 host부분 |
href |
전체 URL |
pathname |
URL의 경로명 부분 |
port |
URL의 포트 부분 |
protocol |
URL의 프로토콜 부분 |
search |
URL의 쿼리 스트링 부분 |
location 객체의 메소드
- reload() : 윈도우의 현재 문서를 브라우저의 Reload 버튼에서 사용하는 정책에 따라 다시 로드
- Every time : 문서는 매번 서버에서 다시 로드
- Once per session : 서버의 문서의 날짜가 캐시에 저장되어 있는 문서보다 더 최신 날짜라는 것을 나타내면 문서는 세션당 한 번씩 서버에서 다시 로드된다. 문서가 캐시에 없는 경우에는 서버에서 로드
- Never : 문서는 가능하면 캐시에서 다시 로드, 그렇지 않으면 서버에서 로드
- replace() : URL을 파라미터로 취하여, 현재 문서 히스토리 목록에 있는 현재 문서위로 그 URL의 문서를 로드, 그러면 브라우저의 Back버튼을 클릭하여 이전 문서로 돌아갈 수 없음
- link 객체는 document 객체의 프로퍼티로, 문서에 들어있는 텍스트나 이미지 링크를 캡슐화
- links 배열은 문서에 들어있는 모든 링크의 배열
- link 객체의 메소드
handleEvent() : event 객체를 인자로 취하며 그 이벤트에 대해 적당한 이벤트 핸들러 호출
link 객체의 프로퍼티
프로퍼티 |
설 명 |
hash |
URL의 앵커 부분(존재하는 경우) |
host |
URL의 hostname:port 부분 |
hostname |
URL의 host부분 |
href |
전체 URL |
pathname |
URL의 경로명 부분 |
port |
URL의 포트 부분 |
protocol |
URL의 프로토콜 부분 |
search |
URL의 쿼리 스트링 부분 |
target |
링크의 HTML, target 속성 |
- HTML 문서 안에서 이름이 지정된 오프셋으로 사용되는 앵커 의미
- anchors 배열에는 문서의 모든 앵커가 들어있음
- 프로퍼티나 메소드 또는 이벤트를 전혀 가지고 있지 않음
- HTML 문서와 관련하여 정의된 이름이 지정된 오프셋을 추적할 때 사용
- anchor 객체는 HREF 속성을 포함하는 경우에 link 객체가 된다.
- history 객체의 프로퍼티
- current : 윈도우에 나타나는 현재 문서의 URL
- length : History 리스트의 길이
- next : History 리스트에서의 다음 URL
- previous : History 리스트에서의 이전 URL
- history 객체의 메소드
- back() : History 리스트에 이전 문서를 로드. 브라우저의 Back 버튼을 클릭하는 것과 같은 효과
- forward() : History 리스트에 다음 문서를 로드. 브라우저의 Forward 버튼을 클릭하는 것과 같은 효과
- go() : History 리스트에 있는 특정 문서로 감
- go(n) : n>0인 경우, 이 메소드는 History 리스트에서 n개의 엔트리가 앞에 있는 문서를 로드, n=0인 경우에는 현재 문서가 다시 로드되고, n<0인 경우엔 History 리스트에서 n개의 엔트리 뒤에 있는 문서를 로드
- go(string) : go()는 이 스트링을 서브스트링으로 갖고 있는 URL의 History 리스트에서 가장 가까운 문서를 로드
- document 객체의 프로퍼티
- 문서와 함께 로드된 이미지에 대한 액세스 제공
- images 배열은 문서 안에 지정되어 있는 각각의 <IMG>태그에 대한 엔트리가 들어있음
- image 객체 유형을 사용하면 키워드와 생성자로 새로운 image 객체를 명시적으로 만들 수 있다. Image() 생성자는 웹페이지의 일부로서 처음에 나타나지 않는 이미지를 만들고 미리 로드할 때 사용한다. 이러한 image 객체는 브라우저의 캐시에 저장되면 이미 나타난 이미지를 대체할 때 사용
* Image() 생성자를 사용하여 캐시된 이미지 만드는 예 cachedImage=new Image()
cachedImage.src="myImage.gif"
= > 첫번째 문장은 새로운 image 객체를 만들고 그것을 cachedImage 변수에 대입하고, 두번째 문장은 image 객체의 src프로퍼티를 myImage.gif 이미지 파일로 설정한다. 이 경우 myImage.gif는 브라우저 캐시로 로드된다. 그러면 로드된 이미지는 cachedImage 변수를 사용하여 참조 가능하다.
image 객체의 프로퍼티
프로퍼티 |
설 명 |
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 속성의 값 |
- 이미지맵은 여러 가지 다른 영역으로 나누어져 있는 이미지로서 각각의 영역은 자체 URL과 관련되어 있다. 그리고 이러한 영역과 관련된 사용자 처리 방식으로 area 객체를 제공
area 객체의 프로퍼티
프로퍼티 |
설 명 |
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 속성 |
- Array 객체를 사용하면 배열을 객체처럼 액세스 가능
- Array 객체의 프로퍼티
- length : 배열의 길이 식별
- prototype : 모든 객체 유형이 지원하는 프로퍼티로 객체 유형에 대해 추가적인 프로퍼티 및 메소드 정의 가능
- Array 객체의 메소드
- toString() : 배열의 스트링 버전 리턴, 배열 요소는 컴마로 구분
- join(separator) : 배열의 스트링 버전 리턴, 배열 요소는 seperator 스트링으로 구분, 분리자가 없으면 컴마로 구분
- reverse() : 배열의 요소를 역순으로 바꿈
- sort(comparisionFunction) : 비교 연산에 따라 배열의 요소 정렬. 비교 함수가 지정되면, 배열 요소는 사전순서로 정렬. 비교 연산이 지정되면 두개의 파라미터 p1,p2를 취하고, p1이 p2보다 작은 경우에는 음의 정수를 리턴하고, 같으면 0을 리턴하고, p1이 p2보다 크면 양의 정수 리턴
- Boolean 객체를 사용하면 부울값은 객체로서 액세스 가능
- Boolean 객체는 생성자에 대한 인자로서 값을 식별하여 만들어짐 myBoolean=new Boolean(false)
yourBoolean=new Boolean(true)
- Boolean 객체의 프로퍼티
- prototype : 모든 객체 유형이 지원하는 프로퍼티로 객체 유형에 대해 추가적인 프로퍼티 및 메소드 정의 가능
- Boolean 객체의 메소드
- toString() : 부울값에 해당하는 스트링 리턴
- valueOf() : 객체의 값에 따라 true나 false로 리턴
Date 객체의 메소드
메 소 드 |
설 명 |
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 인스턴스 만듬 |
Date(dateString) |
dateString 파라미터에 지정되어 있는 날짜로, Date 인스턴스를 만든다. dateString의 포맷은 "월,일,연도,시:분:초" |
Date(milliseconds) |
1970년 1월 1일 자정 이후 지정된 밀리초 값으로 Date 인스턴스를 만든다. |
Date(year,month,
day,hours,minutes,
seconds,milliseconds) |
년,월,일,시,분,초,밀리초 정수에 따라 지정된 날짜로 Date 인스턴스를 만든다. 연도와 월 파라미터는 제공되어야 하고 다른 나머지 파라미터가 포함되면 앞에 오는 모든 파라미터가 제공되어야 한다. |
- 함수를 객체처럼 액세스 가능하고, 이 객체는 스크립트를 실행하는 동안에 함수를 동적으로 만들고 호출할 때 사용
- Function 객체는 함수의 파라미터와 본문을 Function() 생성자에 제공하면 된다.
variable=new Function("p1","p2", ... ,"pn","body")
- Function 객체 프로퍼티
- length : 함수에 대해 정의된 파라미터의 숫자 식별
- prototype : 모든 객체 유형이 지원하는 프로퍼티로 객체 유형에 대해 추가적인 프로퍼티 및 메소드 정의 가능
- arguments : 호출시 함수에 전달되는 인자를 가리키는 배열
- caller : 특정 함수를 호출한 함수를 가리킴
- Function 객체의 메소드
- toString() : 함수의 스트링 형태 리턴
- valueOf() : 함수 자체 리턴
- new Global() 을 통해서 명시적으로 만들거나, 참조할 수 없다. 대신 해당 프로퍼티와 메소드가 전역 변수와 함수로 직접 참조됨
- Global 객체의 프로퍼티
- Nan : 숫자가 아니라는 의미
- Infinity : 양수 무한대 값 의미
- Global 객체의 메소드
- escape(string) : string을 새로운 스트링으로 변환
- eval(x) : 표현식 x의 값을 계산하고 리턴
- inFinite(number) : number가 유한하면 true를 리턴하고, 무한하면 false를 리턴
- inNaN(number) : number가 숫자가 아니면 true를 리턴하고, 숫자이면 false를 리턴
- parseFloat(string) : string을 부동 소수 값으로 파싱
- parseInt(string,radix) : string을 밑이 radix인 정수로 파싱
- unescape(string) : escape()에 들어 있는 스트링을 원래의 값으로 되돌린다.
- 수학적 상수와 함수의 표준 라이브러리 제공
- Math의 특수 인스턴스는 Math가 내장 객체이고 객체 유형이 아니기 때문에 만들어지지 않는다.
Math 프로퍼티
프로퍼티 |
설 명 |
E |
Euler의 상수. 이것은 계산을 하는 어디에서나 발견할 수 있으며 자연대수의 기초 |
LN2 |
2의 자연대수. 이것은 자연대수와 밑이 2인 대수 사이의 전환에 사용되는 간단한 상수 |
LN10 |
10의 자연대수. LN2와 마찬가지로 대수 변환에 사용 |
LOG2E |
밑이 2인 E의 대수. 이것은 밑이 10인 대수를 밑이 E인 대수로 변환시 사용 |
PI |
원의 원주 대 지름의 비율 |
SQRT1_2 |
1/2의 제곱근은 많은 삼각법 계산에서 사용 |
SQRT2 |
2의 제곱근은 대수식에서 흔히 사용 |
Math 메소드
메 소 드 |
설 명 |
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의 탄젠트 값 리턴 |
- Number 객체 유형을 사용하면 숫자를 객체로 다룰 수 있다.
- Number 객체의 프로퍼티
- MAX_VALUE : 숫자는 가능한 최대 수치값
- MIN_VALUE : 숫자는 가능한 최소 수치값
- NaN : 숫자가 아니다
- NEGATIVE_INFINITY : 숫자가 음수 무한대 값
- POSITIVE_INFINITY : 숫자가 양수 무한대 값
- prototype : 모든 객체 유형이 지원
- Number 객체의 메소드
- toString(radix) : 밑이 radix인 숫자를 나타내는 스트링 리턴
- valueOf() : Number 객체의 수치값 리턴
- Object 객체는 다른 모든 객체들이 파생되어 나가는 기반 객체로 이것의 프로퍼티와 메소드는 다른 객체 유형들에서 사용 가능
- Object 객체의 프로퍼티
- prototype : 모든 객체 유형이 지원
- constructor : 객체 생성자의 이름 식별
- Object 객체의 메소드
- toString() : 객체를 스트링 표현으로 바꾸는 역할
- valueOf() : 객체와 관련된 경우의 원시값(숫자,스트링,부울값)을 리턴하고, 그렇지 않은 경우에는 객체 자체를 리턴
- 스트링을 객체로 액세스 가능
- String 객체의 프로퍼티
- length : 문자에서 스트링의 길이 알아내는 역할
- prototype : 모든 객체 유형이 지원
String 메소드
메 소 드 |
설 명 |
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() |
객체의 스트링 값을 리턴 |
Language/JAVASCRIPT 2010. 5. 10. 15:04
getElementById
지정한 id 속성값을 가지는 개체중 첫 번째 개체를 참조하는 매서드이다. explorer에서는 id만으로 개체를 인식할 수 있는데 netscape6.x에서는 이렇게 하면 개체를 인식하지 못하는데 getElementById는 explorer와 netscape6.x에서 공통적으로 개체를 인식하는데 적용되는 것으로 개체를 인식하는데 좀 번거롭기는 하지만 어쩌면 제일 중요하다고 할 수 있다.
document.getElementById(string)
string : id 속성값을 지정하는 string
getElementsByName
같은 name 속성 값을 가진 개체의 콜렉션을 임의로 만들 수 있게 하는 매서드이다.
①collObjects = document.getElementsByName(②string)
①collObjects |
같은 name 속성값을 가지는 개체의 콜렉션을 나타내는 개체 |
②string |
콜렉션을 만들 name 속성값을 지정하는 string |
getElementsByTagName
element(태그) 이름이 같은 개체들의 콜렉션을 만드는 매서드로 explorer에서는 all 콜렉션의 tag 매서드와 같다.
①collObjects = object.getElementsByTagName(②string)
①collObjects |
같은 element 이름을 가진 개체의 콜렉션을 나타내는 개체, 주의할 것은 getElementsByTagName을 이용해서 특정한 element를 참조하면 이 element가 포함하고 있는 모든 child element도 포함된다는 것이다. |
②string |
element의 이름을 지정하는 string |
getlement.htm
<html>
<head>
<title>getElementsByName </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<SCRIPT-x>
function getelef(){
var indexx = document.form1.getele.selectedIndex
var indexxValue=document.form1.getele.options[indexx].value
var indexxseq = document.form1.sequence.selectedIndex
var resultID=document.getElementById("result");
if(indexx==0){
var getidx=document.getElementById("topmenu");
resultID.innerHTML=getidx.innerHTML
}else if(indexx==1){
var getbynamex=document.getElementsByName(indexxValue);
resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;
}else{
var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
}
}
</SCRIPT-x>
<style>
<!--
div { border-width:2; border-color:green; border-style:solid; }
-->
</style>
</head>
<body>
<form name="form1">
<p><select size="1" name="getele" onchange="getelef();">
<option value="topmenu">getElementById</option>
<option value="firstmenu">getElementsByName</option>
<option value="li">getElementsByTagName</option>
</select>
<select name="sequence" size="1" onchange="getelef();">
<option selected >1</option>
<option >2</option>
<option >3</option>
</select></p>
</form>
<UL>
<LI id="topmenu">getElementsByTagName
<UL>
<LI><BUTTON VALUE="first" NAME="firstmenu" >버튼 1</BUTTON>
<LI><BUTTON VALUE="second" NAME="firstmenu" >버튼 2</BUTTON>
<LI><BUTTON VALUE="third" NAME="firstmenu" >버튼 3</BUTTON>
</UL>
<LI id="topmenu">getElementsByName
<UL id="middlemenu" >
<LI><INPUT TYPE="text" value="type=text">
<LI><INPUT TYPE="checkbox">type=checkbox
<LI><INPUT TYPE="radio">type=radio
</UL>
</UL>
<div id="result" style="width:265px; height:160px; position:absolute; left:323px; top:36px; z-index:1;">
<p> </p>
</div>
</body>
</html>
if(indexx==0){
var getidx=document.getElementById("topmenu");
result.innerHTML=getidx.innerHTML
첫 번째 메뉴 즉 getElementById를 선택하면 topmenu라는 id를 가진 개체의 내부 html을 result라는개체의 innerHTML 속성에 대입한다. 즉 topmenu라는 개체의 innerHTML을 result라는 개체의 innerHTML로 그대로 가져가는 것이다.
}else if(indexx==1){
var getbynamex=document.getElementsByName(indexxvalue);
result.innerHTML=getbynamex[form1.sequence.selectedIndex].outerHTML;
두 번째 메뉴 즉 getElementsByName을 선택하면 그 메뉴의 value 속성값(firstmenu)을 변수 getbynamex에 대입한다. 같은 name 속성값을 가진 개체 중에서 두 번째 펼침메뉴에서 선택한 순서에 해당하는 개체의 outerHTML을 result 개체의 innerHTML로 대입한다.
}else{
var getbytagnamex = middlemenu.getElementsByTagName(indexxvalue)
result.innerHTML=getbytagnamex[form1.sequence.selectedIndex].outerHTML
세 번째 메뉴 즉 getElementsByTagName을 선택하면 그 개체의 value 속성값(li 태그)을 getbytagnamex라는 변수에 대입한다. li태그 중 오른쪽 펼침메뉴의 순서에 해당하는 순서에 있는 li태그의 outerHTML 속성을 result 개체의 innerHTML 속성에 대입한다.
}
}
function getelef(){
var indexx = document.form1.getele.selectedIndex
펼침메뉴에서 선택된 메뉴의 순서에 해당하는 정수를 변수 indexx에 대입한다.
var indexxValue=document.form1.getele.options[indexx].value
선택된 메뉴의 value 속성을 변수 indexxvalue에 대입한다. 이것이 속성 이름을 알아내는 것이다.
var indexxseq = document.form1.sequence.selectedIndex
선택된 메뉴의 순서를 지정해 주는 2번째 펼침메뉴 개체의 선택된 메뉴의 순서를 변수 indexxseq에 대입한다.
var resultID=document.getElementById("result");
선택된 값들을 오른쪽 박스에 보여주기 위해 박스 개체를 인식해서 resultID에 대입한다.
if(indexx==0){
펼침 메뉴에서 첫 번째 메뉴가 선택된 경우에 이 조건식이 실행된다. 이 메뉴는 오른쪽에 있는 메뉴의 순서와는 상관이 없다.
var getidx=document.getElementById("topmenu");
topmenu라는 개체를 인식해서 변수 getidx에 대입한다.
resultID.innerHTML=getidx.innerHTML
getidx내에 포함된 HTML을 resultID라는 박스의 내부에 그대로 포함시킨다.
}else if(indexx==1){
getElementsByName 메뉴를 선택한 경우에 이 조건식이 실행된다.
var getbynamex=document.getElementsByName(indexxValue);
getElementsByName 매서드는 indexxValue 변수에 의해 인식한 Name 속성이 지정된다. 그런데 indexxValue의 firstmenu 이므로 firstmenu라는 Name 속성을 가진 개체의 콜렉션을 변수 getbynamex라는 변수에 대입한다.
resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;
firstmenu라는 Name 속성을 가진 개체중 변수 indexxseq에 의해 지정된 순서에 해당하는 개체의 parent 개체내에 포함된 HTML을 resultID의 내부에 포함시킨다. netscape에서는 outerHTML을 지원하지 않기 때문에 우회적인 방법으로 사용했다.
}else{
그 박의 경우 즉 getElementsByTagName 메뉴를 선택한 경우에 아래의 명령문이 실행된다.
var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
middlemenu개체내에 포함된 변수 indexxValue에 지정된 개체 즉 li 태그인 개체들의 콜렉션을 변수 getbytagnamex에 대입한다.
resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
li 태그중 변수 indexxseq에 의해 지정된 개체내에 포함된 HTML을 resultID 개체내에 포함시킨다.
}
}
Language/JAVASCRIPT 2010. 5. 10. 15:02
브라우저 윈도우에 읽어들여진 HTML 문서를 나타내는 개체로 document 내에 포함된 html element, text 와 document에 대한 정보를 이용하기 위해 사용되는 개체이다.
property(속성)
|
method(메써드)
|
event handlers
|
netscape6.0
|
Expolorer
|
netscape6.0
|
Explorer
|
공통
|
title |
title |
captureEvents |
|
onBlur |
|
URL |
close |
close |
onClick |
domain |
domain |
|
|
onDblClick |
width |
|
open |
open |
onFocus |
height |
|
releaseEvents |
|
onKeyDown |
linkColor |
linkColor |
routeEvent |
|
onKeyPress |
alinkColor |
alinkColor |
write |
write |
onKeyUp |
vlinkColor |
vlinkColor |
writeln |
writeln |
onMouseDown |
bgColor |
bgColor |
|
clear |
onMouseUp |
fgColor |
fgColor |
addEventListener |
attachEvent |
onMouseOver |
links |
links |
removeEventListener |
detachEvent |
onMouseOut |
lastModified |
lastModified |
|
createElement |
onResize |
referrer |
referrer |
createElement |
|
|
forms |
forms |
createTextNode |
createTextNode |
|
anchors |
anchors |
createAttribute |
|
|
images |
images |
createDocumentFragment |
|
|
embeds |
embeds |
getElementById |
getElementById |
|
plugins |
|
getElementsByName |
getElementsByName |
|
applets |
applets |
getElementsByTagName |
getElementsByTagName |
|
cookie |
cookie |
insertBefore |
|
|
|
activeElement |
replaceChild |
|
|
|
defaultCharset |
removeChild |
|
|
|
designMode |
../data/lecture/hcjd/appendixcdChild |
|
|
|
dir |
hasChildNodes |
|
|
|
uniqueID |
cloneNode |
|
|
documentElement |
documentElement |
|
createEventObject |
|
|
expando |
|
createStyleSheet |
|
|
fileCreatedDate |
|
elementFromPoint |
|
|
fileModifiedDate |
|
execCommand |
|
|
fileSize |
|
hasFocus |
|
|
media |
|
mergeAttributes |
|
|
parentWindow |
|
mergeAttributes |
|
|
protocol |
|
setActive |
|
|
readyState |
|
|
|
|
URLUnencoded |
|
|
|
|
script-xs |
|
|
|
|
all |
|
|
|
|
frames |
|
|
|
styleSheets |
stylesheets |
|
|
|
|
children |
|
|
|
|
childNodes |
|
|
|
body |
body |
|
|
|
location |
|
|
|
|
ownerDocument |
|
|
|
|
nodeName |
|
|
|
|
nodeType |
|
|
|
|
nodeValue |
|
|
|
|
parentNode |
|
|
|
|
childNodes |
|
|
|
|
firstChild |
|
|
|
|
lastChild |
|
|
|
|
previousSibling |
|
|
|
|
nextSibling |
|
|
|
|
attributes |
|
|
|
|
< 속성 >
title
문서의 제목을 나타내는 속성으로 html에서 title태그 사이에 위치한 값을 자바스크립트에서 반영한 것이다. 문서가 제목을 가지면 그 제목이 이 속성의 값이 되고 그렇지 않으면 null이다.
URL
문서의 전체 url을 나타내는 속성이다. 이것은 통상 문서를 읽어 들일 때 지정한 window.location.href와 일치한다. 그러나 redirection은 location.href를 변경한다.
domain
문서를 제공하는 서버의 도메인 이름을 의미한다.
width, height
윈도우의 넓이와 높이가 아니라 현재 document의 넓이와 높이를 나타내는 속성으로 넓이와 높이를 별도로 지정하지 않았고 브라우저에서 스크롤 막대가 생기지 않으면 window.innerWidth, window.innerHeight과 같다.
width.html
이 예는 explorer에서는 실행되지 않는다.
<html>
<head>
<title>document</title>
<script-x language="JavaScript-x">
<!--
function widfun(){
var win1=window.open('','','width=250,height=350')
win1.document.write("document.width = " + document.width + "<p>");
win1.document.write("document.height = " + document.height + "<p>");
win1.document.write("window.innerWidth = " + window.innerWidth + "<p>");
win1.document.write("window.innerHeight = " + window.innerHeight + "<p>");
win1.document.write("window.outerWidth = " + window.outerWidth + "<p>");
win1.document.write("window.outerHeight = " + window.outerHeight + "<p>");
win1.document.write("window.pageXOffset = " + window.pageXOffset + "<p>");
win1.document.write("window.pageYOffset = " + window.pageYOffset + "<p>");
win1.document.write("window.screenX = " + window.screenX + "<p>");
win1.document.write("window.screenY = " + window.screenY );
win1.document.close()
}
// -->
</script-x>
</head>
<body>
<p>1</p><p>2</p><p>3</p><p>4</p>
<form name="oform">
<p><input type="button" name="titlebutton" value="docuemnt title 확인 버튼" OnClick="widfun();"></p>
</form>
<p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
</body>
</html>
win1.document.write("document.width = " + document.width + "<p>");
win1 윈도우에 document의 넓이를 쓴다.
win1.document.write("document.height = " + document.height + "<p>");
win1 윈도우에 document의 높이를 쓴다.
나머지 window 속성에 대해서는 widnow 개체 부분을 보라.
< color 관련 속성 >
linkColor
문서에서 링크의 색을 지정하는 속성으로 body 태그의 link 속성을 자바스크립트에서 반영한 것이다. 색 속성은 16진수 rgb값 또는 색의 이름으로 표시될 수 있다.
예
document.linkColor="aqua"
document.linkColor="00FFFF"
alinkColor - 마우스 버튼을 눌렀을 때 링크 색을 지정하는 속성으로 body 태그의 alink 속성을 자바스크립트에서 반영한 것이다.
예
document.alinkColor="aqua"
document.alinkColor="00FFFF"
vlinkcolor - 방문했던 링크의 색을 지정하는 속성으로 body태그의 vlink속성을 자바스크립트에서 반영한 것이다.
예
document.vlinkColor="aqua"
document.vlinkColor="00FFFF"
bgColor - 문서의 배경색을 지정하는 속성이다. 이것은 body 태그의 bgcolor 속성을 반영한 것이다.
예
document.bgColor="aqua"
document.bgColor="00FFFF"
fgColor - 문서의 글꼴의 색을 지정하는 속성이으로 body태그의 text 속성을 자바스립트에서 반영한 것이다.
color.html
<html>
<head>
<title>color</title>
<script-x language="JavaScript-x">
<!-- JavaScript-x
function colorfun(){
document.alinkColor="yellow"
document.vlinkColor="green"
document.linkColor="red"
document.bgColor="gray"
document.fgColor="black"
}
// - JavaScript-x - -->
</script-x>
</head>
<body onLoad="colorfun();">
<p><a href="http://www.microsoft.co.kr">링크1</a></p>
<p><a href="http://www.netscape.com">링크2</a></p>
<p><a href="http://www.Xpert.com">링크3</a></p>
</body>
</html>
document.alinkColor="yellow"
링크를 클릭했을 때 링크의 색을 노란색으로 지정한다.
document.vlinkColor="green"
방문했던 링크의 색을 녹색으로 지정한다.
document.linkColor="red"
링크의 색을 빨간색으로 지정한다.
document.bgColor="gray"
배경색을 회색으로 지정한다.
document.fgColor="black"
전경색(문자의 색)을 검정색으로 지정한다.
lastModified
문서의 최종 변경일을 나타내는 속성으로 서버가 이 정보를 제공하지 않는다면 자바스크립트는 0을 받게 되는데 이것은 GMT 1970년 1월 1일 0시 0분 0초를 의미한다.
lastmodified.htm
<html>
<head>
<title>lastModified</title>
<script-x language="JavaScript-x">
<!-- JavaScript-x
function modifiedfun(){
alert(document.lastModified);
}
// - JavaScript-x - -->
</script-x>
</head>
<body onLoad="modifiedfun();">
</body>
</html>
alert(document.lastModified);
문서의 최종 변경일을 경고 상자에 보여준다. 아래와 같은 상자가 나타날 것이다.
tags, classes, ids
netscape6.x에서 페지 되었다.
formName
문서에서 각각의 폼의 이름을 나타내는 속성이다.
예)
폼의 이름이 firstform라고 가정하면 document.firstform을 이용함으로써 이 폼을 참고할 수 있다.
form을 참고하는 방법에 대해서는 form 개체 부분을 참고하라.
referrer
사용자가 링크를 클릭할 때 호출하는 문서의 url을 나타내는 속성으로 사용자가 소스 문서에서 링크 개체를 클릭함으로써 목적 문서를 탐색할 때 referrer 속성은 소스 문서의 url을 포함한다.
중요
현재 문서가 www.netscape.com/index.html이라고 하자 여기에 www.microsoft.co.kr로 이동하는 링크를 클릭함으로 microsoft로 이동하였다고 하자 이 microsoft의 referrer속성은 www.netscape.com/index.html이 되는 것이다.
forms
문서에서 폼의 순서에 따라 배열이 만들어짐으로써 지정된 배열순서에 따라 폼을 참조할 수 있도록 하는 속성이다. 배열은 0부터 시작한다. 예컨대 N개의 폼이 이름이 차례대로 firstform, secondform, thirdform, ... Nform라고 하자 그러면 다음과 같이 폼의 순서에 따라 폼을 참조할 수 있다. 이것은 폼의 이름이 같을 때 이름으로 참조하려고 하면 두 개 이상의 폼이 이름이 같기 때문에 이름으로서 참조할 수 없게 된다. 이 때 폼의 배열 순서를 이용함으로 참조 할 수 있다 .
document.forms[0] = document.forms["firstform"] = document.firstform
document.forms[1] = document.forms["secondform"] = document.secondform
document.forms[2] = document.forms["thirdform"] = document.thirdform
document.forms[N] = document.forms["Nform"] = document.Nform
links
Area와 link개체의 소스순서에 대응하는 개체 배열을 나타내는 속성이다. 참고하는 방법에 대해서는 앞의 forms부분을 보라
anchors
소스 순서에서 anchor에 대응하는 개체의 배열을 나타내는 속성으로 배열로서 참고하는 방법은 앞의 forms와 동일하다
images
소스 순서에서 image 개체에 대응하는 배열을 나타내는 속성으로 배열을 참고하는 방법은 앞의 forms와 동일하다.
embeds
문서에 삽입된 각각의 개체의 소스 순서에 따른 배열을 나타내는 속성으로 배열을 참고하는 방법은 forms와 동일하다
layers
소스순서에서 layer개체에 대응하는 배열을 나타내는 속성이다. 배열을 이용방법에 대해서는 forms 부분을 보라, netscape6.0에서 페지되었다.
plugins
소스 순서에서 plugin개체에 대응하는 배열을 나타내는 속성이다. 배열을 이용방법에 대해서는 forms 부분을 보라
applets
소스순서에서 applet개체에 대응하는 배열을 나타내는 속성이다. 배열을 참조하는 방법에 대해서는 forms 부분을 보라
cookie
쿠기라는 것은 브라우저에 의해 cookies.txt파일에 저장된 작은 정보의 조각을 의미하는데 문서와 관련된 cookie를 나타내는 속성이다. 쿠키에 저장된 값을 확인하기 위해 substring, charAt, indexOf, lastIndexOf 같은 string 매서드를 사용해야 한다.
document.cookie [ = sCookie ]
sCookie로 지정할 수 있는 것은 아래와 같다.
name=value; ①expires=date; ②domain=domainname; ③path=path; ④secure
①expires=date; |
쿠키의 유효기간을 지정하는 것으로 유효기간을 지정하지 않으면 브라우저를 닫으면 유효기간이 종료해 쿠키가 지워지고 미래의 날짜를 유효기간으로 지정하면 쿠키는 브라우저를 통해 저장된다. 과거의 날짜를 지정하면 쿠키는 지워진다. date를 지정하기 위해서는 GMT 형식을 사용해야 한다. |
②domain=domainname; |
설정한 쿠키를 이용할 수 있도록 허용하는 도메인을 지정한다. |
③path=path; |
설정한 쿠키를 이용할 문서의 경로를 지정한다. |
④secure; |
secure로 쿠키를 설정하면 저장된 쿠키 정보는 보안이 유지된 상태에서만 접근할 수 있다. |
cookie.htm
이 예는 보안상의 문제로 비밀번호를 저장하지 않고 ID만을 저장하도록 쿠키를 이용해 만든 것이다.
<html>
<head>
<title>cookie</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<SCRIPT-x>
function SetCookie(sName, sValue){
if(document.form1.saveid.checked){
var today = new Date();
today.setDate( today.getDate() + 365 );
document.cookie = sName + "=" + escape(sValue) + "; expires=" + today.toGMTString();
}
window.location= "http://www.dialpad.co.kr"
}
function GetCookie(sName){
var cookiepiece = document.cookie.split("; ");
for (var i=0; i < cookiepiece.length; i++)
{
var piece = cookiepiece[i].split("=");
if (sName == piece[0]){
document.form1.oid.value=(unescape(piece[1]));
}
}
}
</SCRIPT-x>
<style>
<!--
#saveid { background-color:rgb(204,204,204); border-width:2; border-color:black; border-style:solid; }
.colortxt { color:black; }
-->
</style>
</head>
<body onload="GetCookie('saveid');">
<p>
<div id="saveid" style="width:344px; height:97px; position:absolute; left:64px; top:35px; z-index:1;">
<form name="form1">
<br> <font color="black"><b>아이디</b></font> :
<input type="text" name="oid" maxlength="10" size="15">
<input type="checkbox" name="saveid"><font color="black"><b>아이디 저장</b></font> <br>
<font color="black"><b>비밀번호</b></font>: <input type="password" name="password" maxlength="10" size="15">
<input class="colortxt" type="button" name="gobtn" value="go-입장" onclick="SetCookie('saveid', this.form.oid.value);" >
</p>
</form>
</div>
</body>
</html>
function SetCookie(sName, sValue){
이 함수는 쿠기의 이름과 이름 값으로 사용할 사용자가 입력한 id를 매개변수로 받는다.
if(document.form1.saveid.checked){
사용자가 id 저장을 체크했다면 이 조건식에 속한 명령문이 실행된다.
var today = new Date();
today.setDate( today.getDate() + 365 );
document.cookie = sName + "=" + escape(sValue) + "; expires=" + today.toGMTString();
현재 날짜에서 365일을 더한 값을 쿠키의 유효기간으로 지정해서 사용자가 입력한 id를 cookie에 저장한다.
}
window.location= http://www.dialpad.co.kr
현재 윈도우에 dialpad를 읽어들인다.
}
function GetCookie(sName){
var cookiepiece = document.cookie.split("; ");
쿠키의 각각의 속성은 세미콜론으로 구별한다고 했는데 각각의 속성들을 배열을 만들기 위해 split 매서드를 이용해서 만든 배열을 변수 cookiepiece 변수에 대입한다. split 매서드에 대해서는 string 개체를 보면 된다.
for (var i=0; i < cookiepiece.length; i++)
배열의 각각의 속성과 속성값을 확인하기 위해 for 명령문을 사용한다.
{
var piece = cookiepiece[i].split("=");
split 매서드를 이용해서 만든 배열에서 속성과 속성 값을 구별해내기 위해 다시 split 매서드를 사용해서 만든 배열을 변수 piece에 대입한다. 이렇게 만든 배열은 2개의 배열을 가지게 되는데 첫 번째는 속성이고 두 번째는 속성 값이다.
if (sName == piece[0]){
document.form1.oid.value=(unescape(piece[1]));
piece라는 변수의 첫 번째 배열은 속성의 이름이 되는데 속성이름이 매개변수로 지정한 이름과 같다면 그 속성의 값을 oid라는 id 입력 텍스트 박스에 대입한다.
<body onload="GetCookie('saveid');">
문서를 읽어들이기을 완료했다면 저장된 id를 자동으로 id 텍스트 박스에 입력하기 위해 GetCookie 함수를 호출한다.
activeElement
parent document가 초점을 받을 때 초점을 받은 개체를 나타내는 속성이다.
document.activeElement
defaultCharset
문서의 기본 문자셑을 나타내는 속성이다. 보기 > 인코딩을 변경하면서 확인해 보라 한국어로 지정한 경우에는 ks_c_5601-1987로 나타날 것이다
[ string = ] document.defaultCharset
string: 기본 문자셑을 나타내는 string
designMode
document가 편집될 수 있는지 없는지를 나타내거나 지정하는 속성이다.
document.designMode [ = string ]
string:string으로 지정될 수 있는 것은 다음과 같다.
On |
Document 편집될 수 있다. |
Off | Inherit |
기본값으로 편집될 수 없다. |
DIR
개체를 읽어들이는 순서를 나타내는 속성이다.
object.dir [ = string]
string: string으로 지정할 수 있는 것은 다음과 같다.
ltr |
기본값으로 왼쪽에서 오른쪽으로 읽어들인다. |
rtl |
오른쪽에서 왼쪽으로 읽어들인다. |
uniqueID
개체를 인식하는 유일한 인식자를 만드는 속성이다.
[ string = ] object.uniqueID
string: 개체를 인식하는 유일한 인식자를 나타내는 stirng
documentElement
document 의 근본(최 상위) node를 나타내는 속성으로 HTML 문서인 경우에는 explorer, netscape6.x에서는 HTML 개체이다.
[ object = ] document.documentElement
object: 최 상위 node를 나타내는 개체
expando
개체내에서 임의의 변수(속성)를 만들 수 있을 지를 지정하는 속성이다.
document.expando [ = boolean ]
boolean: 값으로 지정할 수 있는 것은 다음과 같다.
true |
기본값으로 임의의 변수를 만드는 것을 허용한다. |
false |
임의의 변수를 만드는 것을 허용하지 않는다. |
fileCreatedDate
파일이 만들어진 날짜를 나타내는 속성이다.
[ string= ] object.fileCreatedDate
string: 파일이 만들어진 날짜를 나타내는 string
fileModifiedDate
파일이 마지막으로 변경된 날짜를 나타내는 속성이다.
[ string = ] object.fileModifiedDate
string: 파일이 마지막으로 변경된 날짜를 나타내는 string
fileSize
파일 크기를 나타내는 속성이다.
[string = ] object.fileSize
string: 파일의 크기를 나타내는 string
filesize.htm
<html>
<head>
<title>fileCreatedDate-fileModifiedDate-fileSize</title>
<script-x language="JavaScript-x">
<!-- JavaScript-x
var oCreated=document.fileCreatedDate;
var oModified=document.fileModifiedDate;
var oFilesize=document.fileSize;
document.write("fileCreatedDate: " + oCreated + "<p>");
document.write("fileModifiedDate: " + oModified + "<p>" );
document.write("fileSize: " + oFilesize)
document.close();
// - JavaScript-x - -->
</script-x>
</head>
<body >
<p> </p>
</body>
</html>
var oCreated=document.fileCreatedDate;
파일이 만들어진 날짜를 변수 oCreated에 대입한다.
var oModified=document.fileModifiedDate;
파일이 변경된 날짜를 변수 oModifed에 대입한다.
var oFilesize=document.fileSize;
파일크기를 변수 oFilesize에 대입한다.
document.write("fileCreatedDate: " + oCreated + "<p>");
파일이 만들어진 날짜를 document에 쓴다.
document.write("fileModifiedDate: " + oModified + "<p>" );
파일이 변경된 날짜를 document에 쓴다.
document.write("fileSize: " + oFilesize)
파일의 크기를 document에 쓴다.
document.close();
이제 문서를 다 작성했음으로 열린 스트림을 닫고 모아진 내용물을 보여준다.
parentWindow
현재 document 개체를 포함하는 window 개체를 참조하는 속성이다.
[ object = ] document.parentWindow
protocol
url의 protocol 부분(콜론 포함)만을 나타내는 속성이다. protoco이라는 것은 컴퓨터 간에 정보를 주고 받는 규칙을 말하는 것이다.
object.protocol [ = string ]
string: 정보를 주고 받는데 사용할 프로토콜
readyState
개체의 현재 상태를 나타내는 속성이다.
[String = ] object.readyState
String: 개체 상태를 나타내는 string
uninitialized |
개체가 data를 초기화하기 않을 때 |
loading |
개체가 data를 읽어들이고 있을 때 |
loaded |
개체가 data를 읽어들이는 것을 완료했을 때 |
interactivedate |
를 전부 읽어들이지는 않았지만 사용자와 개체가 상호 이용이 가능할 때 |
complete |
개체가 완전히 초기화되었을 때 |
URLUnencoded
url에서는 빈칸 등 특수문자는 특정한 형태로 변환되어야 하는데 변환되지 않은 문서의 url을 나타내는 속성이다.
[ surl = ] document.URLUnencoded
Language/JAVASCRIPT 2010. 5. 10. 15:00
윈도우에서 사용자가 방문했던 url에 대한 정보를 포함하는 개체이다.
property(속성)
|
method(메써드)
|
netscape6.0
|
Expolorer
|
netscape6.0
|
Explorer
|
length |
length |
back |
back |
|
|
forward |
forward |
|
|
go |
go |
1) 속성
length
history 배열에 있는 리스트의 엔트리 수를 나타내는 속성이다.
2) 매서드
back
히스토리 리스트에서 이전 url을 읽어 들인다. 사용자가 브라우저에서 back버튼을 클릭하는 것과 같은 행위를 수행하며 go(-1)과 같다.
back()
forward
히스토리 리스트에서 다음 url을 읽어 들인다.
사용자가 브라우저 버튼에서 forward 버튼을 클릭하는 것과 같은 행위를 수행하며 go(1)과 같다..
forward()
go
히스토리 리스트에서 url을 읽어 들인다. go 매써드는 히스토리 리스트에서 새로운 엔트리를 만든다. 히스토리 리스트에서 새로운 엔트리를 만들지 않기 위해서는 location.replace를 사용해야 한다.
go(①delta)
go(②location)
① delta |
히스토리 리스트에서 상대적인 위치를 나타내는 정수 |
② location |
히스토리 리스트에서 전부 또는 부분 url을 나타내는 문자열 |
go 매서드는 지정된 매개변수에 의해 히스토리 리스트에서 location을 탐색한다. delta가 0이라면 현재 문서를 reload하고 0보다 크면 히스토리 리스트에서 앞쪽 엔트리 수에 해당하는 url을 읽어 들이며 0보가 작으면 히스토리 리스트에서 뒤쪽 엔트리 수에 해당하는 url을 읽어 들인다.
이 예를 실행하기 전에 7개의 이상의 사이트를 한 개의 창에서 탐색한 다음에 뒤로 3단계 이동한 다음에 실행시켜 보라 그래야만 여기에 있는 속성을 제대로 확인할 수 있다.
<html>
<head>
<title>method</title>
</head>
<body>
<form name="form1">
<p><input type="button" name="backbutton" value="history.back()" onClick="history.back()">
<input type="button" name="gobackbutton" value="history.go(-1)" onClick="history.go(-1)"></p>
<p><input type="button" name="forwardbutton" value="history.forward()" onClick="history.forward()">
<input type="button" name="goforbutton" value="history.go(1)" onClick="history.go(1)" ></p>
<p><input type="button" name="gobackbutton" value="history.go(-3)" onClick="history.go(-3)">
<input type="button" name="goforbutton" value="history.go(3)" onClick="history.go(3)"></p>
</form>
</body>
</html>
<input type="button" name="backbutton" value="history.back()" onClick="history.back()">
<input type="button" name="gobackbutton" value="history.go(-1)" onClick="history.go(-1)">
2개의 버튼은 같은 역할을 하는 것으로 현재 히스토리에서 바로 이전의 히스토리 엔트리로 이동하게 된다.
<input type="button" name="forwardbutton" value="history.forward()" onClick="history.forward()">
<input type="button" name="goforbutton" value="history.go(1)" onClick="history.go(1)" ></p>
이 2개의 버튼도 같은 역할을 하는 것으로 현재 히스트로에서 바로 다음의 히스토리 엔트리로 이동하게 된다.
<input type="button" name="gobackbutton" value="history.go(-3)" onClick="history.go(-3)">
이 버튼은 현재 히스토리에서 3단계 전의 히스토리 엔트리로 이동하게 된다.
<input type="button" name="goforbutton" value="history.go(3)" onClick="history.go(3)"></p>
이 버튼은 현재 히스토리에서 3단계 다음의 히스토리 엔트리로 이동하게 된다.
Language/JAVASCRIPT 2010. 5. 10. 14:59
docment.open
write 또는 writein 매서드의 출력을 모으기 위한 docment를 여는 매서드로 JavaScript-x 1.1버전부터 document.open 또는 document.open("text/html") 매서드는 출력을 모으는 것을 완료했으면 현재 문서를 지우며 모아진 출력은 document.close 매서드에 의해 보여지게 된다. 문서를 열면서 replace를 지정한다면 target 윈도우의 히스토리 길이는 증가하지 않게 되고 지정하지 않는다면 열린 문서는 새로운 히스토리 엔트리(url)를 가진다.
공통 |
document.open(①mimeType, ②replace) |
①mimeType |
open 매서드로 여는 문서의 type을 지정하는 문자로 기본값은 text/html이다. |
②replace |
replace는 mimeType이 "text/html"인 경우에만 지정할 수 있으며 이전 문서가 사용한 history entry를 새로운 문서가 그대로 유지하게 한다. |
Explorer |
explorer에서는 네스케프에서와 같은 방법 이외에도 document.open()를 통해 새로운 윈도우를 열수도 있는 방법을 제공하는데 이것은 window 개체의 open()매서드와 같기 때문에 window 개체 부분을 참고하면 된다.
document.open([url] [, windowname] [, windowfeatures][, Replace]) |
close
document.open 매서드로 열린 스트림을 닫고 모아진 내용물을 보여준다. 어떠 개체의 이벤트에서 window 또는 document을 지정하지 않고 함수를 호출하지 않고 close()매서드만을 호출할 때 document.close()로 인식하고 이벤트가 함수를 호출하고 그 함수에서 close()매서드만을 호출하면 window.close로 인식한다.
document.clear
현재 document을 지우는 매서드이다.
document.clear()
docment.write
지정된 윈도우의 document에 하나 이상의 html expression을 쓴다.
document.write(①expresssion1, expression2,..expressionN))
①expresssion1, expression2,..expression: JavaScript-x expressions(식, 표현)
writein
writein 매서드는 새로운 줄에서 문자를 시작한다는 것을 제외하고는 write 매서드와 같다.
Language/PHP 2010. 5. 10. 14:07
1. $_SERVER
서버와 관련된 기본 환경 변수의 배열 $_SERVER[알고싶은값] 의 형태로 사용한다.
알고 싶은 값에 들어가는 요소들에 따른 값 $_SERVER[SERVER_NAME] : 현재 호스트의 이름 $_SERVER[DOCUMENT_ROOT] : 현재 파일이 실행중인 document root 디렉토리 (웹으로 접속되는 루트) $_SERVER[PHP_SELF] : document root 를 기준으로 한 현재 실행 파일 이름 $_SERVER[SCRIPT_FILENAME] : 현재 실행 파일의 절대경로 $_SERVER[SCRIPT_NAME] : 현재 실행 파일의 이름 $_SERVER[REQUEST_URI] : 현재 실행 파일을 사용한 URI (get 파라미터를 포함한다.) $_SERVER[HTTP_REFERER] : 현재실행파일을 호출한 곳의 주소 (해당 파일로 링크가 연결된 주소) $_SERVER[REMOTE_ADDR] : 접속한 사용자의 IP
2. $_GET, $_POST
$_GET get 방식으로 넘어온 변수들 $_POST post 방식으로 넘어온 변수들
3. $_SESSION, $_COOKIE
$_SESSION 세션에 저장된 변수들 $_COOKIE 쿠키에 저장된 변수들
4. $_FILES
<input type="file" name="filename"> 을 통해 업로드된 파일의 정보
$_FILES['filename']['name'] : 파일명 $_FILES['filename']['type'] : 파일 타입 $_FILES['filename']['tmp_name'] : 업로드되어 임시 저장된 파일의 절대경로 $_FILES['filename']['error'] : 업로드 에러 코드 $_FILES['filename']['size'] : 파일 사이즈(bytes)
이외에도 많은 환경 변수들이 있으나 많이 사용하는 것들만 소개하였습니다.
아래 소스 처럼 $GLOBALS 를 출력하면 모든 환경변수들을 볼 수 있습니다.
<pre> <? print_r($GLOBALS); ?> </pre>
[ 22_1.php 소스]
모든 환경변수들이 어떤 값을 가지고 있는지 잘 파악하신다면 프로그래밍시에 많은 도움이 될것입니다.
그럼 다음 시간부터 데이터 베이스인 MySql 을 배워보도록 하겠습니다.
MySql 의 간단한 사용법을 5~6시간정도 배우고나서는 PHP와 MySql 을 같이 사용하는 강좌로 이어집니다.
출처 - http://handsome.pe.kr/44
Language/PHP 2010. 5. 10. 10:56
<?
$text = "Small";
$result = ereg("S",$text);
echo "대상문자열 Small:<br>";
$result1 = ereg("s",$text);
echo "s 문자가 있는지 검사:".$result1."<br>"; //검색한 문자(열)가 있는 경우, 1을 반환하고, 없으면 아무값도 반환하지 않는다.
echo "S 문자가 있는지 검사:".$result."<br>"; //검색한 문자(열)가 있는 경우, 1을 반환하고, 없으면 아무값도 반환하지 않는다.
$result2 = ereg("A",$text);
echo "A 문자가 있는지 검사:".$result2."<br>";
echo "ereg 함수의 경우, 대소문자를 구별함. eregi 함수를 이용해 대소문자 구별없이 확인하기<br>";
$result3 = eregi("s",$text);
echo "s 문자가 있는지 검사:".$result3."<br>"; //eregi 를 이용해 대소문자 구별없이 검사
?>
<br>
특수문자들이 정규 표현식에서 어떻게 사용하는지 보기<br>
--------------
사용예제 내용
[abc] a,b,c 로 이루어진 문자열
[a-c] a 에서 c 까지의 문자로 이루어진 문자열
[a-z] a 에서 z 까지의 문자로 이루어진 문자열
[A-Z] 대문자 A 에서 Z 까지의 문자로 이루어진 문자열
[a-zA-Z] 소문자 a 에서 z 까지, 대문자 A 에서 Z 까지의 문자로 이루어진 문자열
[0-9] 0 에서 9 까지의 숫자(문자?) 로 이루어진 문자열
[!@#_0-9] !,@,#,_ 와 0 에서 9 까지의 문자로만 이루어진 문자열
-------------
<br>
바로 앞 문자열의 개수를 지정하는 중괄호 {}
중괄호는({}) 는 바로 앞의 문자나 문자열의 개수를 지정해 주는 특수문자로, 사용 형식은 다음과 같다.
<br>
--------------
사용예제 내용
a{2}b aab 를 가진 문자열을 사용할 수 있다. 즉 (2) 는 {} 앞에 있는 문자 a 의 개수가 2개인 것을 의미
a{2,}b a 의 개수가 최소 2개 이상인 문자열을 의미. aab, aaab, aaaab 모두 사용할 수 있다.
--------------
<br>
시작과 끝을 알리는 ^,$
^,$ 는 문자열의 시작과 끝을 알리는 특수문자이다.
만약 abc 라는 문자열이 있으면 이 문자열은 a 로 시작하여 c 로 끝난다.
이때 정규 표현식에서 a 부터 검사하라는 의미로 a 앞에 문자열의 시작을 알리는 ^ 를,
c 의 끝에 문자열의 끝을 알리는 $ 를 붙여서 정규 표현식을 시작한다.
^,$ 를 표로 정리하면 다음과 같다.
<br>
---------------
사용예제 내용
^abc a 에서부터 문자가 시작되는 것을 알린다.
abc$ c 가 문자열의 끝임을 알린다.
---------------
<br>
문자열 사용 막기:
사용할 수 있는 문자열을 지정하는 정규 표현식의 문자는 [] 이다.
이와 반대로 특정 문자열을 사용할 수 없도록 지정하고 싶다면, 지정하는 대괄호 [] 사이에 삿갓(^) 표시를 입력하면 된다.
예를 들어 [^123] 과 같이 사용하면 1,2,3 숫자는 문자열로 사용할 수 없다.
<br>
<br>
<?
$text = "test1234";
$result = ereg("^[a-z]{4}[0-9]{4}$",$text);
echo $result."<br>"; // 1 출력
/*
[a-z]{4} 의 의미는, 위의 문자가 알파벳 a 에서 z 까지 4개의 문자로 이루어진 것인지 검사하는 양식이다.
test 는 소문자 a 에서 z 까지 4개의 알파벳 문자로 이루어진 것이고, 1234 는 0 에서 9 까지의 숫자중에서 4개로 이루어진 값이므로,
True 인 1 을 반환한다.
*/
?>
<br><br>
바로 앞 문자열의 반복을 의미하는 *,+,? 문자
*,+,? 문자들은 해당 문자의 바로 앞 문자를 의미하며, 그 문자가 하나 이상이라는 것을 의미한다.
이 세 개의 문자열은 비슷한 정의를 가지고 있지만, 실제 사용하는 데에는 약간의 차이를 갖는다.
다음은 이 세 가지 특수문자열을 정의하고 실제 사용하는 예를 나타낸 표이다.
<br>
--------------------------------------
사용예제 결과값 내용
a*b b,ab,aab,aaab,aaaab... b 앞에 a 가 없거나 하나 이상 존재하는 모든 문자열
a+b ab,aab,aaab,aaaab... b 앞에 a 가 최소한 하나 이상은 존재하는 모든 문자열
ab?c abc, ac a 와 c 사이에 b 가 하나 있거나 혹은 없는 문자열
--------------------------------------
<br>
정규 표현식에서 특수문자를 사용하기 위한 역슬래시(\)
정규 표현식에서 입력받은 문자열의 타당성을 검사하기 위한 특수문자가 아니라,
실제 사용해야 할 특수문자가 있을 때는 그 문자 앞에 역슬래시(\)로 해당 문자열을 이스케이프해야 한다.
특수문자를 이스케이프 한다는 이유는, 우리가 이메일이나 홈페이지 주소 등을 정규 표현식으로 검사할 때
실제 'small@small.co.kr' 와 같이 이메일 주소에 사용하는 특수문자 '.' 는 그대로 살려야 하기 때문이다.
<br>
정규 표현식 특수문자를 이용하여 이메일 주소 체크하기
<br>
$ereg = "^[_0-9a-zA-Z]+(\.[_0-9a-zA-Z-]+)*@[0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)+$";
<br>
예시 이메일주소)
small@small.co.kr
<br>
맨앞의 사용자 계정은 영문 소문자와 대문자, 숫자 그리고 음수 기호(-), 언더바(_), 점(.)과 같은
특수문자의 조합으로 구성되므로, 다음과 같은 정규 표현식을 작성할 수 있다.
<br>
^[_0-9a-zA-Z-]
<br>
정규 표현식에서 ^ 문자는 문자열의 시작을 알리는 것이다.
처음 문자열인 사용자 계정 이름의 시작을 0 에서 9 까지의 숫자나 소문자 a 에서 소문자 z, 대문자 A 에서 대문자 Z 까지 사용하게 지정.
그런데, 사용자 계정에서
.small@small.co.kr 이나 small.@small.co.kr 처럼 사용자 계정의 이름을 점(.) 으로 시작하거나 끝낼수는 없으므로,
아래의 하나의 패턴을 더 추가한다.
<br>
^[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+)*
<br>
여기서 마지막 문자열 * 는 바로 앞에 있는 괄호의 반복 () 을 뜻한다.
따라서, small, small.co, small.co.kr 등의 값들이 모두 참이 된다.
하지만, 실제 이런 사용자 계정은 없으므로,
입력한 사용자 계정 이름을 가져오고 이메일 계정을 의미하는 @ 를 붙여준다.
<br>
다시 이메일 주소의 서버 이름의 체크 정규 표현식을 만든다.
사용자 계정 이름을 검사하는 정규 표현식과 서버 이름 체크의 정규 표현식이 거의 비슷하므로,
다음과 같이 앞부분을 복사하여 하나 더 만들고, 서버 이름에는 언더바(_) 가 업으므로, 언더바(_) 를 지운다.
또, 서버 이름을 체크하는 정규 표현식이 끝나면 더 이상 이메일 주소가 없기 때문에 맨 마지막에 문자열의 끝을 알려주는 $ 문자를 입력한다.
<br>
^[_0-9a-zA-Z-]+(\.0-9a-zA-Z-]+*@(0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)+@
<br>
이제 정규 표현식과 eregi 함수만으로 이메일 주소의 타당성을 검사할수 있다.
<br>
표현식에서 () 는 그 부분들을 묶어주는 역할을 하는 듯 하다(일반 연산에서와 같은 방식으로)
단, ()* 로 사용하면,() 안의 내용을 반복 한다는 뜻.
<br><br>
<?
$ereg = "^[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+)*@[0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)+$";
$email = ".asdf.ae@asdf.co.kr";
$result = eregi($ereg,$email);
if($result==1){
echo "입력하신 이메일 주소 $email 는 정상적인 이메일 주소입니다";
}else{
echo "$email 는 정규 표현식에 어긋나는 이메일 주소 입니다";
}
?>
<br>
정규식에 일치하면 1 을 반환. 아니면 반환값 없음.
<br>
위의 이메일 주소가 정상적이라고 출력됨(정규 표현식 불완전)
출처 - http://fendee.egloos.com/1766078
Language/PHP 2010. 5. 10. 10:55
PHP는 POSIX와 Perl이라는 두 가지 스타일 정규표현식을 지원한다.(POSIX가 기본)
POSIX가 배우기 쉽고 빠르지만 이진적으로 안전하지 않다고 한다.
POSIX를 기준으로 정리 들어가 보자.
1. 문자집합과 클래스
'.'문자 : 줄바꿈문자(\n)를 제외한 모든문자를 대신할 수 있다.
ex) .at // cat, sat, mat 등과 같은 셈
문자클래스([]) : []안의 문자들을 문자클래스라 한다.
ex) [aeiou] //모든 모음(aeiou중의 한글자)이라는 의미
범위 표현(-) : 범위를 사용하기 위한것으로 문자사이에 '-'를 사용
ex) [a-zA-Z] // 모든 대소문자 중의 한글자
제외(^) : []안에서 쓰일 때 'not'의 뜻으로 제외하고자 할때 사용
ex) [^a-z] // 소문자를 제외
^[a-z] // 소문자로 시작하는 것을 가리킴
문자클래스
- [[:alnum:]] : 알파벳 문자, 숫자
- [[:alpha:]] : 알파벳 문자
- [[:lower:]] : 소문자
- [[:upper:]] : 대문자
- [[:digit:]] : 십진법의 숫자
- [[:xdigit:]] : 16진법의 숫자, 문자
- [[:punct:]] : 구두점
- [[:blank:]] : 탭, 스페이스
- [[:space:]] : 공백 문자들
- [[:cntrl:]] : 컨트롤 문자들
- [[:print:]] : 모든 출력 가능한 문자들
- [[:graph:]] : 스페이스를 제외한 모든 출력 가능 문자
반복
'+' : 앞글자가 한번이상 반복될 수 있음을 뜻한다.
'*' : 앞글자가 0번이상 반복될 수 있음을 뜻한다.
부분표현식
() : ()안의 모든 것을 나타낸다.
ex) (very )*large //'large', 'very large', 'very very large'...등과 일치
반복의 횟수 제한하기
{} : {}안에 숫자를 넣어서 반복횟수 제한,
ex) (very){3} //3번 반복
(very){2,4} // 2~4번 사이로 반복
(very){2, } // 적어도 2번이상 반복
문자열의 시작과 끝 고정하기
'^' : 시작부분에 사용되며, 문자열 앞부분에 이 표현이 있어야 함을 의미
ex) ^bob // bob로 시작하는 문자열과 일치
'$' : 뒷부분에 사용되고, 이표현으로 문자열이 끝나야 함을 의미
ex) com$ //com으로 끝나는 문자열과 일치
^[a-z]$ // a-z까지의 모든글자(글자 하나)와 일치
특수문자 사용
',', '{', '$'등의 특수문자를 사용할때에는 이스케이프 문자(역슬래시)를 사용하면 된다.
ex) \, or \{ or \$ // , { $ 문자의 사용
선택하기
'|' : 여러 문자열중 선택하기 위해
ex) com | edu | net // com이나 edu또는 net과 일치하는 문자열
//--- split()를 이용한 이메일 분리 ---//
$address = 'username@mail.com';
$arr = split('\. | @', $address);
while( list($key, $value) = each($arr) ) {
echo $value;
}
2. ereg() 함수 - 문자열중에 찾는값이 있으면 true를 반환 아니면 false를 반환한다.
> ereg("찾는값", "문자열", array [matches])
3번째 인자를 사용할 경우에는 값을 찾아낸 문자열을 [matches]에 저장한다.
// 근데 배열저장값이 찾는값하고 왜 동일하지..? 난 문자열이 나오는걸 기대했었다...
3. eregi() 함수 - ereg와 같으나 대소문자를 구분한다.
> eregi("찾는값", "문자열", array [matches])
4. ereg_replace() 함수 - 문자열중 찾는값이 나오면 치환값으로 치환한다.
> ereg_replace("찾는값", "치환값", "문자열")
5. eregi_replace() 함수 - ereg_replace와 같으나 대소문자를 구분한다.
> eregi_replace("찾는값", "치환값", "문자열")
|