JavaScript 기초정리2

Javascript/Ajax 2008. 8. 21. 16:01

3.3) 자바스크립트 내장 객체

3.3.1) Date 객체

* Date객체를 사용하면 날짜와 시간을 표시하거나 설정할 수 있다. 자바스크립트에서는 그리니치 표준시(GMT)로 1970년 1월 1일 00:00:00을 사용한다.

* 사용자 컴퓨터의 현재 날짜와 시간을 자동으로 지정할 수 있다.

예) 객체이름 = new Date()

* 특정 날짜와 시간을 지정할 수 있다.

예) 객체이름 = new Date("month, day, year, hh:mm:ss")

객체이름 = new Date(year, month, day)

객체이름 = new Date(year, month, day, hours, minutes, seconds)

* Date객체의 Method

Method	설명
getYear()/setYear()	년도 표시/설정
getMonth()/setMonth()	월 표시/설정 0(1월) ~ 11(12월)
getDate()/setDate()	일 표시/설정 (1 ~ 31)
getDay()/setDay()	요일 표시/설정 0(일) ~ 6(토)
getHours()/setHours()	0 ~ 23시를 표시/설정
getMinute()/setMinute()	0 ~ 59분을 표시/설정
getSecond()/setSecond()	0 ~ 59초를 표시/설정
getFullYear()/setFullYear()	년도 수를 4자리로 표시/설정
toStrings()	날짜와 시간을 문자열로 변환
toGMTString()	날짜와 시간을 GMT 문자열로 변환

3.3.2) String 객체

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

* [속성]

length : 문자열의 길이

* String객체의 Method

Method	설명
charAt(n)	지정된 위치의 문자를 반환 : n은 index번호
charCodeAt(n)	지정된 위치에 있는 문자의 Unicode번호를 반환
concat(문자열)	두개의 문자열을 병합
indexOf(문자열)	왼쪽부터 검색해서 지정된 문자열의 위치를 반환
lastIndexOf(문자열)	오른쪽부터 검색해서 지정된 문자열의 위치를 반환
split(분리자)	분리자를 기준으로 문자열을 분리
substring(A, B)	A에서 시작해서 B전까지의 문자열 반환
substr(A, n)	A에서 시작해서 n만큼의 문자열 반환

3.3.3) Array 객체

* 배열의 이름과 index 번호로 접근한다.

* [속성]

length : 배열의 길이

* Array 객체의 Method

Method	설명
join(문자열)	배열의 값들을 결합해서 하나의 문자열로 만든다.
reverse()	배열의 순서를 반대로 바꿔 준다.
sort(비교함수)	비교함수를 생략하면 오름차순 정렬
slice(start, end)	배열의 일부를 선택해서 새로운 배열생성 예) a.slice(0,2) --> a[0], a[1]을 의미한다. (end의 index는 포함되지 않는다.)
concat(배열이름)	두개의 배열을 concatenation해서 하나의 배열로 만든다. 예) a.concat(b) --> 배열 a와 배열 b가 합해져서 새로운 배열 생성

3.4) 사용자 정의 객체

사용자 정의객체는 생성자 함수(Constructor)와 new keyword를 이용하여 다음과 같은 방식으로 만든다.

I. Parameter가 없는 User Object

[형식]

function 함수명()

{

this.Property1;

this.Property2;

…

}

사용자 정의객체이름 = new 함수명();

* 예제

<HTML>

<HEAD>

function member()

{

this.name;

this.phone;

this.address;

}

mem = new member();

mem.name = "자바누리";

mem.age = "123-4567";

mem.address = "서울 강남구 대치동";

document.write("<H3>회원명 : " + mem.name + "</H3>");

document.write("<H3>전화번호 : " + mem.age + "</H3>");

document.write("<H3>주소 : " + mem.address + "</H3>");

</SCRIPT>

</HEAD>

</HTML>

II. Parameter가 있는 User Object

* [형식]

function 함수명(parameter1, parameter2...)

{

this.Property1 = parameter1;

this.Property2 = parameter2;

…

}

사용자 정의객체이름 = new 함수명( argument1, argument2, ..);

* 예제

<HTML>

<HEAD>

function member(name, phone, addr)

{

this.name = name;

this.phone = phone;

this.address = addr;

}

mem = new member("자바누리", "123-4567", "서울 강남구 대치동");

document.write("<H3>회원명 : " + mem.name + "</H3>");

document.write("<H3>전화번호 : " + mem.age + "</H3>");

document.write("<H3>주소 : " + mem.address + "</H3>");

</SCRIPT>

</HEAD>

</HTML>

III. 사용자 정의객체에서 Method 정의

* [형식]

function 함수명(parameter1, parameter2...)

{

this.Property1 = parameter1;

this.Property2 = parameter2;

…

this.Method1 = 메소드명;

...

}

function 메소드명()

{

…

}

사용자 정의객체이름 = new 함수명( argument1, argument2, ..);

* 예제

<HTML>

<HEAD>

function member(name, phone, addr)

{

this.name = name;

this.phone = phone;

this.address = addr;

this.showmember = show;

}

function show()

{

document.write("<H3>회원명 : " + mem.name + "</H3>");

document.write("<H3>전화번호 : " + mem.age + "</H3>");

document.write("<H3>주소 : " + mem.address + "</H3>");

}

mem = new member("자바누리", "123-4567", "서울 강남구 대치동");

mem.showmember();

</SCRIPT>

</HEAD>

</HTML>

4장. 이벤트와 이벤트 핸들링

4.1) 이벤트와 이벤트 핸들러

* Event는 Web Browser에서 일어나는 어떤 사건을 말한다. 즉 사용자가 버튼을 클릭하거나, 폼을 전송하거나, 마우스를 글자 위에 가져 간다거나, 브라우저를 종료 시키는 등의 행위가 바로 이벤트라고 할 수 있다.

이벤트 핸들러(Event Handler)는 이러한 이벤트를 처리해 주는 것을 말한다. 예를 들어 사용자가 버튼을 클릭하면 이를 인식하고 정의된 코드를 실행시켜 주는 것이 바로 이벤트 핸들러의 역할이다.

이벤트 핸들러는 이벤트에 on을 붙이는 형식으로 표현하며 일반적으로 HTML태그에 포함시켜 사용한다.

* 이벤트 핸들러 사용

버튼을 누를 때 click()이벤트가 발생하며, 이 이벤트를 onClick이벤트 핸들러가 받아서 처리한다.

<HTML>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

* 이벤트 핸들러에서의 함수호출

자바스크립트에서의 함수호출은 이벤트 핸들러를 이용하는 경우가 일반적이다.

즉 함수를 스크립트 문에 넣어 두고 부분에서 필요할 때 호출하는 형식을 많이 사용한다.

<HTML>

<HEAD>

function func()

{

alert("자바누리 자바스크립트 강좌입니다.");

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

4.2) 이벤트 핸들러의 종류

브라우저에 따라 사용할 수 있는 이벤트 핸들러와 각각의 이벤트 핸들러가 사용될 수 있는 태그는 차이가 있다.

이벤트 핸들러	이벤트 발생시점	사용태그 or 객체
onAbort	이미지 읽는 것을 취소할 때	img
onBlur	포커스를 잃어버렸을 때	모든 Form요소, body, window객체
onChange	Form요소의 값이 변했을 때	INPUT TYPE=text, Select, Textarea
onClick	마우스를 클릭했을 때	A, Area, Input Type=button, Checkbox, Radio, Reset, Submit, Document객체
onDblClick	마우스를 더블 클릭했을 때	A, Area, Input Type=button, Checkbox, Radio, Reset, Submit, Document객체
onError	이미지나 문서를 불러올 때, 에러가 났을 때	img, window객체
onFocus	포커스를 받을 때	모든 Form요소, body, window객체
onKeydown	Key가 눌러졌을 때	A, Area, Img, Textarea, document객체
onKeypress	Key를 눌렀다 놓았을 때	A, Area, Img, Textarea, document객체
onKeypress	Key를 눌렀다 놓았을 때	A, Area, Img, Textarea, document객체
onKeyup	Key를 놓았을 때	A, Area, Img, Textarea, document객체
onLoad	문서의 로딩이 완료되었을 때	Img, Body, Frameset, Window객체
onMousedown	마우스 버튼을 눌렀을 때	A, Area, Input Type=button, document객체
onMouseup	마우스 버튼을 놓았을 때	A, Area, Input Type=button, document객체
onMousemove	마우스가 움직일 때
onMouseout	해당 영역을 벗어났을 때	A, Area
onMouseover	해당 영역에 마우스를 놓았을 때	A, Area
onReset	Reset 버튼을 눌렀을 때	form
onResize	Frame이나 윈도우의 크기가 변경될 때	Window객체
onSelect	해당 Field를 선택했을 때	Input Type=text, textarea
onSubmit	Submit 버튼을 눌렀을 때	Form
onUnload	해당 문서를 빠져 나갈 때	Body, Frameset, Window객체

5장. MessageBox

5.1) 경고(alert)

* [형식]

alert('문자열');

* 사용자의 주의를 환기 시킬 필요가 있을 때 경고(alert) Message를 출력한다. alert('문자열')의 문자열에 '\n'을 사용하면 문자열의 줄바꿈이 일어난다.

* 문자열은 double quote(")나 single quote(')로 감싸야 하는데 주로 (")를 사용한다. 단 (")가 중첩될 경우 (')를 사용한다.

* 예제

<HTML>

<BODY>

<A HREF="javascript:alert('제이콤텍입니다.')">Login</A><BR>

<A HREF="javascript:alert('자바누리입니다.')">Logout</A><BR>

</BODY>

</HTML>

5.2) Prompt

* [형식]

prompt('Display Message', '초기값');

* 사용자의 입력상태에 따라 다른 반응을 보이고자 할 때 Prompt Box를 사용한다. 이것은 alert와는 달리 단독으로 사용되는 경우는 드물고 다른 자바스크립트 코드들과 함께 사용된다.

* 초기값이 없으면 ''를 사용한다.

* 예제

<HTML>

<HEAD>

function login()

{

pass = prompt('Password를 입력하세요', '');

if (pass == "1234")

location.href = "welcome.html";

else

alert("Password를 다시 입력해 주세요!");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

※ window.location.href는 해당 URL로 이동시키는 역할을 한다.

5.3) Confirm

* [형식]

confirm('문자열');

* Confirm Box는 말 그대로 뭔가를 확인할 때 사용하는 Box이다.

* 확인버튼을 누르면 true, 취소버튼을 누르면 false가 return된다.

* 예제

<HTML>

<HEAD>

sure = confirm("자바누리로 이동하시겠습니까?");

if (sure)

location.href = "www.javanuri.com";

else

document.write("<H3>자바누리로 이동하지 않았습니다.</H3>");

</SCRIPT>

</HEAD>

</HTML>

6장. Form

6.1) Form

<Form>태그의 유일한 목적은 클라이언트측에서 사용자로부터 수집된 데이터를 서버(Server)에 전송하는 것이다.

클라이언트 자체는 데이터를 처리할 만큼 강력하지 못하기 때문에 정보를 처리하는 것은 항상 서버의 몫이었다. 그러나 자바스크립트는 <FORM>태그에 강력한 처리 수단을 제공한다.

그러므로 자바스크립트를 이용하면 무조건 Server쪽으로 Data 처리를 넘기는 것이 아니라 Client에서 Validation을 하므로 Server의 부담을 줄일 수 있다.

Form객체의 속성(property)들은 다음과 같은 것이 있다.

* [형식]

- Action

Form을 전송할 때 Server에서 실행하고자 하는 program이름을 지정할 때 사용한다. (주로 servlet을 의미한다)

- Encoding

Form이 전달되는 암호화 방법을 지정한다.

- Method

Form이 서버에 전달되는 방식을 지정한다. post방식과 get방식이 있으며 생략하면 get방식이 지정된다.

6.2) Input Validation

6.2.1) Radio Button을 이용한 예제

* [속성]

속성	설명
checked	Radio버튼이 선택되어 있으면 true, 아니면 false
defaultChecked	초기값으로 선택되어 있으면 true, 아니면 false
length	라디오 버튼의 수
name	라디오 버튼의 이름
value	라디오 버튼의 값

* [메소드]

메소드	설명
click()	Radio버튼 클릭
blur()	Radio버튼의 Focus를 제거한다.
focus()	Radio버튼에 Focus를 준다
name	라디오 버튼의 이름

* 예제 - 실행

<HTML>

<HEAD>

function valid(x)

{

var count = 0;

for ( i=0; i < x.item.length; i++ )

{

if( x.item[i].checked )

count += 1;

}

if ( count == 0 )

alert("Check된 항목이 없습니다!");

else

{

if ( x.item[1].checked )

alert("맞았습니다.");

else

alert("틀렸습니다!\n\nJava입니다.");

}

</SCRIPT>

</HEAD>

<BODY>

<H4>자바누리 Site는 어떤 Language로 이루어졌을까요?</H4>

<INPUT TYPE="button" NAME="myButton" VALUE="정답확인"

onClick="valid(this.form)">

</FORM>

</BODY>

</HTML>

※ this란 객체 자신을 의미하는 것이다.

this.form은 폼의 하위요소에서 상위 요소인 폼을 참조하기 위한 방법이다. 예제에서 this.form은 document.myForm을 참조하는 것으로 함수를 호출하는 버튼 즉 myButton이 속한 Form을 가리킨다.

valid(this)식으로 사용하면 this가 참조하는것은 document.myForm.myButton이 되는것이다

6.2.2) ID와 Password Validation 예제

[예제 설명] - 실행

사용자가 입력한 ID와 Password를 몇 가지 조건을 이용해서 검사한다.

ID는 반드시 입력을 받아야 하며 ID의 길이는 4~15 사이의 alphabet과 숫자만 허용한다. ID에는 공백문자를 허용하지 않는다.

암호는 4글자 이상 입력해야 하고 alphabet과 숫자만 허용하며, 공백문자는 허용하지 않는다.

[화면]

<HTML>

<HEAD>

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<H3>ID와 Password Validation</H3>

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

<TH COLSPAN=2><INPUT TYPE="button"

VALUE="확인" onClick="valid(this.form)">

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

[JavaScript File : id_password.js]

function valid(x)

{

var alphaDigit

= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

// ID Validation

if (x.id.value == "")

{

alert("ID를 입력해 주세요");

x.id.focus();

return;

}

if (x.id.value.length < 4 || x.id.value.length > 15)

{

alert("ID는 4~15자 이내여야 합니다.");

x.id.focus();

return;

}

if (x.id.value.indexOf(" ") >=0 )

{

alert("ID에는 공백이 들어가면 안됩니다.");

x.id.focus();

return;

}

for ( i=0; i < x.id.value.length; i++ )

{

if ( alphaDigit.indexOf(x.id.value.substring(i, i+1)) == -1 )

{

alert("ID는 영문과 숫자의 조합만을 사용할 수 있습니다.");

x.id.focus();

return;

}

// Password Validation

if ( x.passwd.value == "" )

{

alert("암호를 입력해 주세요");

x.passwd.focus();

return;

}

if ( x.passwd.value.length < 4 )

{

alert("비밀번호는 4자리 이상 입력하셔야 합니다.");

x.passwd.value="";

x.passwd.focus();

return;

}

if (x.passwd.value.indexOf(" ") >=0 )

{

alert("Password에는 공백이 들어가면 안됩니다.");

x.passwd.value="";

x.passwd.focus();

return;

}

alert("성공적으로 ID와 Password를 입력했습니다!");

}

6.2.3) 숫자 입력만 허용하는 예제

[예제 설명] - 실행

사용자가 숫자를 입력하지 않고 다른 문자를 입력한 경우 경고 메시지를 출력해 주는 예제이다. 전화번호나 우편번호 등 숫자만 사용되어야 하는 경우에 사용할 수 있다.

입력 Field에는 숫자와 하이픈(-)만을 허용하도록 한다.

[화면]

<HTML>

<HEAD>

</SCRIPT>

</HEAD>

<H3>전화번호를 입력하세요!"

전화번호 : <INPUT TYPE="text" NAME="phone" MAXLENGTH="12">

<INPUT TYPE="button" VALUE="확인"

onClick="return validPhone(this.form.phone);">

</FORM>

</BODY>

</HTML>

[JavaScript File : validation.js]

function isNumber(x)

{

var isNum = true;

for ( inx=0; inx < x.length; inx++ )

{

if ( ( x.charAt(inx) < '0' || x.charAt(inx) > '9') && x.charAt(inx) != '-' )

isNum = false;

}

return isNum;

}

function validPhone(phone)

{

validPhoneNum = false;

if ( phone.value.length == 0 )

{

alert("전화번호를 입력하세요");

phone.focus();

}

else

{

if ( isNumber( phone.value ) )

{

alert("전화번호는 " + phone.value + " 입니다.");

phone.focus();

phone.select();

validPhoneNum = true;

}

else

{

alert("전화번호는 숫자와 -(하이픈)만 허용합니다.");

phone.focus();

phone.select();

}

return validPhoneNum;

}

6.2.4) 사용자 입력의 타당성 검증 예제

[예제 설명] - 실행

성명과 내용은 반드시 입력되어야 하며, 어떠한 문자도 허용한다.

메일은 @과 .는 메일 ID에 반드시 포함되어야 한다. (단 이 예제에서는 @이나 .의 위치는 상관하지 않는다.)

[화면]

<HTML>

<HEAD>

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="guest" METHOD="post" ACTION="inform.html"

ENCTYPE="text/plain" onSubmit="return valid(this);">

<BR>

<TABLE>

</TR>

</TR>

</TR>

<TR>

</TR>

</TABLE>

</FORM>

</CENTER>

</BODY>

</HTML>

[JavaScript File : user_input.js]

function valid(x)

{

if ( x.name.value == "" )

{

alert("이름을 입력하세요!");

x.name.focus();

return false;

}

if ( x.Email.value == "" )

{

alert("전자우편 주소를 입력하세요!");

x.Email.focus();

return false;

}

else if ( x.Email.value.indexOf('@') == -1 || x.Email.value.indexOf('.') == -1 )

{

alert("잘못된 Email주소입니다.\n정확한 주소를 입력하세요.");

x.Email.focus();

return false;

}

if ( x.remark.value == "" )

{

alert("내용을 입력해야 합니다." );

x.remark.focus();

return false;

}

else

return true;

}

[inform.html]

<HTML>

<BODY>

<H3>방명록을 작성해 주셔서 감사합니다.</H3>

<BR>

</BODY>

</HTML>

ABOUT ME

Developer Developer

티스토리툴바

ABOUT ME

관련글 관련글 더보기

티스토리툴바