폼 객체

 

1. text 객체

 

주요 메서드와 속성

설명

name

텍스트 박스의 이름

value

텍스트 박스의 값

 

WebContent/form/text.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>text.html</title>

<script>

function copyFunc(ff){

ori = ff.ori.value;

ff.copy.value = ori;

}

</script>

</head>

<body>

<h1>text 입력상자의 값 제어</h1>

<form name='frm'>

원본 : <input type='text' name='ori' value='park'><br>

사본 : <input type='text' name='copy' value=''>

<p>

<input type='button' value='copy' onclick='copyFunc(this.form)'>

</form>

</body>

</html>

 

[실행결과]

 

2. radio 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebConent/form/radio.html

 

<html>

<head>

<title>라됴객체 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

for(i=; i < l ; ++i){

if(f.chk[i].checked){

f.re.style.backgroundColor=f.chk[i].value

f.re.value=f.chk[i].value}

}

}

</script>

</head>

<body>

<form name=ff>

<table border=0>

<th><center>Box의 색상을 고르시요</center></th>

<tr>

<td>

<textarea name=re rows=cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="radio" name=chk value="#330000">검정

<input type="radio" name=chk value="#3300FF">파랑

<input type="radio" name=chk value="#00FF00">녹색

<input type="radio" name=chk value="#FF0000">빨강<br>

<input type="radio" name=chk value="#FFFF00">노랑

<input type="radio" name=chk value="#FFFFFF">흰색

<input type="radio" name=chk value="#FF9900">오랜지

<input type=button name=bu value="click" onclick="mclick(this.form)">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

3. checkbox 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebContent/form/checkbox2.html

 

<html>

<head>

<title> Check Box2 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

f.re.value=""

for(i=; i<l ; i++){

if(f.chk[i].checked) {f.re.value=f.re.value + f.chk[i].value + "\n"}

}

}

</script>

</head>

<body>

<form name="ff" method="post">

<table border=0>

<th>마음에 드는 연예인을 고르시요</th>

<tr>

<td>

<textarea name=re rows=cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="checkbox" name=chk value="황수정">황수정

<input type="checkbox" name=chk value="채림">채림

<input type="checkbox" name=chk value="황신혜">황신혜

<input type="checkbox" name=chk value="김미화">김미화<br>

<input type="checkbox" name=chk value="이영자">이영자

<input type="checkbox" name=chk value="고두심">고두심

<input type="checkbox" name=chk value="신지">신지<br>

<input type=button name=bu value="선택" onclick="mclick(this.form)">

<input type=reset value="취소">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

4. select 객체

 

1) 객체명.selectedIndex : 선택한 항목의 번호(0번부터)

2) 객체명.[객체명.options.selectedIndex].value : 선택한 항목의 값.

3)객체명.[객체명.options.selectedIndex].text : 선택한 항목의 text.

 

WebContent/form/select.html

 

<HTML>

<HEAD>

<title> </title>

<script language="JavaScript">

function mclick(f,n){

f.tt.style.backgroundColor=n

}

function chang(f){

f.tt.style.backgroundColor=f.sel.options[f.sel.options.selectedIndex].value

}

</script>

</HEAD>

<BODY>

<b><h3>Select 를 이용하여 바탕 색상 바꾸기</h3></b><p>

<form name="ff">

<input type=text name=tt >

<select name="sel" onChange="chang(this.form)">

<option value="#000000">검은색

<option value="#006600">녹색

<option value="#00FF00">연두색

<option value="#FF0000">뻘건색

<option value="#FFFFFF">흰색

</select>

<input type="button" value="white" onClick="mclick(this.form, 'white')">

</form>

</BODY>

</HTML>

 

 

 

 

5. reset 버튼 객체

 

각 항목의 값을 초기값으로 셋팅한다.

특정항목에 값이 있을때 reset 되지 않도록 제어하는 예제임.

 

WebContent/form/onReset.html

<HTML>

<HEAD>

<TITLE>onReset()-1</TITLE>

<style>

input{font-size:40;}

</style>

<script>

function fun(ff)

{

if(ff.irum.value ==""return true;

else return false;

}

</script>

</HEAD>

<BODY>

<h3> 이름 항목에 값이 있으면 리셋버튼의 기능 중지</h3>

<form name="frm" onReset="return fun(this)">

Name <input type="text" name="irum" value=""><br>

Address <input type="text" name="addre" value=""><br>

<input type=reset value="다시">

</form>

</BODY>

</HTML>

 

[실행결과]

 

 

 

 

6. onSubmit 버튼

 

폼에 있는 정보를 서버로 전달하는 기능


WRITTEN BY
빨강꼬마

,

텍스트박스(<input type="text"> 태그) 객체 다루기



1. value 속성.


//Script40.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var msg = document.getElementById("msg");

msg.style.display = "none";

var result = document.getElementById("result");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

if(id.value=="admin" && pw.value =="1234") {

result.innerHTML = "회원으로 로그인 되었습니다.";

} else {

result.innerHTML = "아이디 또는 패스워드가 틀렸습니다.";

}

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

아이디<input type="text" id="id">

패스워드<input type="password" id="pw">

<input type="button" value="로그인" onclick="myFunc()">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>




2. readonly, disabled 속성


//Script41.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myCheck(obj) {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

var btn = document.getElementById("btn");

if(obj.checked) {

//약관동의 선택한 경우

//아아디, 패스워드 입력가능상태로 변경

//회원가입버튼을 사용가능상태로 변경

id.readOnly = false;

pw.readOnly = false;

btn.disabled = false;

} else {

//약관동의 취소한 경우

//아이디, 패스워드에 입력된 데이터 삭제

//아아디, 패스워드 입력 불가 상태로 변경

//회원가입버튼을 사용 불가 상태로 변경

id.value = "";

pw.value = "";

id.readOnly = true;

pw.readOnly = true;

btn.disabled = true;

}

}

function myFunc() {

var id = document.getElementById("id");

var pw = document.getElementById("pw");

//공백 제거 기능 추가 필요.-> 사용자 함수 구현 -> trim()함수 (자바스크립트에는 이 함수가 없음.)

if (id.value == "" || pw.value == "") {

msg.style.display = "inline";

id.focus();

} else {

result.innerHTML = "회원으로 가입되었습니다.";

}

}

</script>

</head>

<body>

<div>

<h2>텍스트 박스 객체 다루기</h2>

<form>

<input type="checkbox" id="check" onclick="myCheck(this)"> 약관동의<br>

아이디<input type="text" id="id" readOnly="readOnly"><br>

패스워드<input type="password" id="pw" readOnly="readOnly"><br>

<input type="button" id="btn" value="회원가입" onclick="myFunc()" disabled="disabled">

<span id="msg" style="color:red; display:none;">아이디 또는 패스워드를 채워야 합니다.</span>

</form>

<h3>출력----------------------</h3>

<div id="result"></div>

</div>

</body>

</html>






선택목록(<select> 태그) 객체 다루기



1. selected 속성, onchange 이벤트 지원


//Script42.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc(obj) {

var emailAddr = obj.options[obj.selectedIndex].value;

var email02 = document.getElementById("email02");

if (emailAddr == "2") {

//직접입력.

email02.value = "";

email02.readOnly = false; //Only 에서 O는 대문자 표기

email02.focus();

} else {

email02.readOnly = true;

email02.value = emailAddr;

}

}


</script>

</head>

<body>

<div>

<h2>선택목록 객체 다루기</h2>

<form>

이메일

<input type="text" id="email01">

@

<input type="text" id="email02" readOnly="readOnly">

<select id="emailAddr" onchange="myFunc(this)">

<option value="">선택</option>

<option value="naver.com" selected="selected">naver.com</option>

<option value="nate.com">nate.com</option>

<option value="hanmail.net">hanmail.net</option>

<option value="2">직접입력</option>

</select>

</form>

</div>


</body>

</html>



//Script43.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>


<script type="text/javascript">

function myFunc(obj) {

var jikwi = obj.options[obj.selectedIndex].value;

var msg = document.getElementById("msg");

var basicpay = document.getElementById("basicpay");

msg.style.display = "none";

switch(jikwi) {

case "1":

msg.style.display = "inline";

msg.innerHTML = "100만원 이상";

break;

case "2":

msg.style.display = "inline";

msg.innerHTML = "120만원 이상";

break;

case "3":

msg.style.display = "inline";

msg.innerHTML = "200만원 이상";

break;

}

basicpay.focus();

}

</script>


</head>

<body>

<div>

<h2>선택목록 객체 다루기2</h2>

<form>

직위

<select id="jikwi" onchange="myFunc(this)">

<option value="1">사원</option>

<option value="2">대리</option>

<option value="3">과장</option>

</select><br>

기본급

<input type="text" id="basicpay" style="width:80px;">

<span id="msg" style="color:red;display:none;"></span>

<br>

<input type="button" value="직원등록">

</form>

</div>

</body>

</html>






윈도우(브라우저 자신) 객체 다루기



1. window 객체는 자바스크립트에서는 브라우저 자신을 의미.


2. 최상위 객체. 생략 가능.


3. 팝업창을 생성할 때 window.open(), window.close() 사용.


//Script44.html -> 부모창


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function myPopup() {

window.open("Script44_1.html", "popup", "width=200, height=400");

//window.open("http://www.gmarket.co.kr/popup/indexPopunder.html", "popup", "width=400, height=450");

}

</script>

</head>

<body onload="myPopup()">

<div>

<h2>윈도우 객체 다루기</h2>

<p>

<a href="javascript:myPopup()" >로그인 전용 화면</a>

</p>

</div>

</body>

</html>





//Script44_1.html -> 자식창


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

</head>

<body>

<div>

<h3>광고 페이지</h3>

<a href ="javascript:window.close();">close</a>

</div>

</body>

</html>






DOM (Document Object Model)


1. HTML 태그를 객체로 받아들여서 객체를 다루는 명령.


2. 태그 수정, 삭제, 추가 등이 가능하다.


//DOM01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//Node - 엘리먼트, 속성 등의 객체

//Element - 태그 객체

//Attribute - 속성 객체

var parent = document.getElementById("target");


var str = "";

/*

var nodeList = parent.childNodes;

str += "nodeList.length : " + nodeList.length + "<br>";

for (var a=0; a<nodeList.length; a++) { 

str += "nodeList[" + a + "].nodeType : " + nodeList[a].nodeType + "<br>";

str += "nodeList[" + a + "].nodeValue : " + nodeList[a].nodeValue + "<br>";

}

//nodeType이 1이면 엘리먼트

//nodeType이 2이면 속성

//nodeType이 3이면 텍스트

var pnode = nodeList[0]; //첫 번째 <p> 엘리먼트

var textnode = pnode.childNodes[0]; // <p> 엘리먼트의 텍스트

str += "textnode.nodeValue : " + textnode.nodeValue;  // <p> 엘리먼트의 텍스트 값

*/

//순차적으로 텍스트 노드를 접근해서 출력

var pNodes = parent.childNodes;

for (var a=0; a<pNodes.length; a++) {

str += pNodes[a].firstChild.nodeValue + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;


}


</script>

</head>

<body>

<div>

<h2>DOM</h2>

<form>

<input type="button" value="DOM테스트" onclick="myFunc()">

</form>


<div id="target"><p>첫번째 문장</p><p>두번째 문장</p><p>세번째 문장</p></div>

<h2>출력 --------------------------</h2>

<div id="result"></div>

</div>

</body>

</html>



//DOM02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc(status) {


var ulNode = document.getElementById("subjectLists");

var liNodes = ulNode.childNodes;

for (var a=0; a<liNodes.length; a++) {

var inputNode = liNodes[a].firstChild;

if(inputNode.nodeType == 1) {

inputNode.checked = status;

}

}

}


</script>

</head>

<body>

<div>

<h2>DOM 테스트 2</h2>

<div>

<a href="javascript:myFunc(true)">전체선택</a> / <a href="javascript:myFunc(false)">전체해제</a>

</div>

<form>

<h3>강의 가능 과목</h3>


<!-- <ul> 태그에서 <li> 태그 입력시 줄바꿈 처리하지 말것-->

<ul id="subjectLists" style="list-style:none"><li><input type="checkbox">Java SE</li><li><input type="checkbox">Oracle</li><li><input type="checkbox">JSP &amp; Servlet</li></ul>

</form>

</div>

</body>

</html>





//DOM03.html







문제) 자바스크립트의 DOM 기능을 이용해서 방명록을 작성할 것.

-> wedding.html 파일 및 img 폴더를 이클립스에 복사해서 사용할 것.

-> 번호 및 날짜는 자바스크립트에서 자동 입력되도록 할 것.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>홍길동, 박길순 결혼식 청접장</title>

<style type="text/css">

.style1 {color:red;}

a {

text-decoration: none;

color:gray;

}

a:hover {

text-decoration: underline;

color:red;

}

</style>

<script type="text/javascript">

function textCountCheck(obj, target) {

var len = obj.value.length;

var targetObj = document.getElementById(target);

targetObj.innerText = len;

}

//테이블 동적 생성

function guestFormSubmit() {

var count = 2;

var name = document.getElementById("uname");

var content = document.getElementById("content");


var trNode = document.createElement("tr");

var tdNode = createTdNode(count++);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = createTdNode(name.value);

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


trNode.appendChild(createTdNode(content.value));


tdNode = createTdNode(getSysTime());

tdNode.setAttribute("align", "center");

trNode.appendChild(tdNode);


tdNode = document.createElement("td");

tdNode.appendChild(createDelBtnNode());

tdNode.setAttribute("align", "center");

var tableNode = document.getElementById("result");

var tbodyNode = tableNode.firstChild;

tbodyNode.appendChild(trNode);


name.value = "";

content.value = "";

name.focus();

}

function createTdNode(val) {

//<td>val</td>

var txtNode = document.createTextNode(val);

var tdNode = document.createElement("td");

tdNode.appendChild(txtNode);

return tdNode;

}

//시스템 시간찍기

function getSysTime() {

        var d = new Date();

        var s =

          leadingZeros(d.getHours(), 2) + ':' +

          leadingZeros(d.getMinutes(), 2) + ':' +

          leadingZeros(d.getSeconds(), 2);

        return s;

    }

    //숫자의 자리수 를 0으로 채우기

    function leadingZeros(n, digits) {

    var zero = '';

        n = n.toString();

        if (n.length < digits) {

        for (i = 0; i < digits - n.length; i++)

        zero += '0';

        }

        return zero + n;

    }

    

    //테이블 삭제 전용 버튼 처리 함수

function createDelBtnNode() {

var btn = document.createElement("input");

btn.setAttribute("type", "button");

btn.setAttribute("value", "삭제");

btn.onclick = function() {

deleteNode(this);

};

return btn;

}

function deleteNode(obj) {

if (confirm("삭제할까요?")) {

var tdNode = obj.parentNode;

var trNode = tdNode.parentNode;

var tbodyNode = trNode.parentNode;

tbodyNode.removeChild(trNode);

}

}

</script>

</head>

<body>

<div>

<div><a href="">[Admin Login]</a></div>

<img src="img/WeddingPhoto.jpg" width="400" height="300">

<div>

<h3>홍길동, 박길순의 결혼식 청첩장 사이트</h3>

일시 : 2013.01.23 <span class="style1">(D-48</span>)</span><br> 

장소 : KH정보교육원<br> 

찾아오시는 방법 : 지하철 2호선 당산역 3번 출구 동화빌딩 3층<br>

<br>

</div>

<div>방명록에 글을 남겨주세요~</div>

<form>

<table>

<tbody>

<tr>

<td>글쓴이</td>

<td>

<input type="text" id="uname" name="uname"

onkeyup="textCountCheck(this, 'nameLen')">

(<span id="nameLen" class="style1">0</span>/50)

</td>

</tr>

<tr>

<td>글내용</td>

<td>

<input type="text" size="80" id="content" name="content"

onkeyup="textCountCheck(this, 'contentLen')">

(<span id="contentLen" class="style1">0</span>/200)

<a href="javascript:guestFormSubmit()">[글쓰기]</a>

</td>

</tr>

</tbody>

</table>

</form>

<table cellpadding="3" border="1" id="result"><tbody><tr><th width="60">번호</th><th width="100">글쓴이</th><th width="400">글내용</th><th width="180">작성일</th></tr><tr><td align="center">1</td><td align="center">주인장</td><td>많은 참석 바랍니다.</td><td align="center"></td></tr></tbody></table>

</div>

</body>

</html>






사용자 정의 객체




1. 객체는 사용자 정의 객체와 내장 객체로 구분.


2. 객체의 멤버인 속성과 메소드는 .(dot) 연산자를 이용해서 접근.


3. 사용자 정의 객체 형식


//객체명은 첫 글자를 대문자로 표기

function 객체명(인자리스트) {

//속성 정의

this.멤버명 = 값;


//메소드 정의

this.메소드명 = function(인자리스트) {

//실행문;

};

}



//객체 생성

new 변수 = new 객체명();


//접근 방법

변수.멤버명

변수.메소드명();


변수.멤버명 = 값;   -- setter의 역할과 비슷.

var 변수 = 변수.멤버명;  -- getter의 역할과 비슷.


변수.메소드명(); -- 리턴값없을때 실행하고 끝

var 변수 = 변수.메소드명(); -- 리턴값있을때 실행과 동시에 리턴값 변수에 저장




//OOP01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", "2012-11-13") // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", "2012-11-14")

  ,new Blog("new연산자를 이용해서 객체생성", "2012-11-15")];

var str = "";

//객체의 하위 멤버(속성) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].date + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//객체 생성 - 현재 시스템 날짜 리턴

var date = new Date();

//Date 객체의 하위 멤버(메소드) 접근

var str = "";

str += date.getFullYear() + "<br>";

str += (date.getMonth()+1) + "<br>";

str += date.getDate() + "<br>";

str += date.getDay() + "<br>";

str += date.getTime() + "<br>";

str += date.toDateString() + "<br>";

str += date.toLocaleDateString() + "<br>";

str += date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

//YYYY-MM-DD 형식 문자열 -> 사용자 정의 형식 필요

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>내장 객체</h2>

<form>

<input type="button" value="내장 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



//OOP03.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">


function myFunc() {

//사용자 객체 정의

function Blog(body, date) {

//속성 정의

this.body = body; //매개변수 body를 속성에 셋팅

this.date = date; //매개변수 date를 속성에 셋팅

/* //메소드 정의 -> 인스턴스 형식

//YYYY-MM-DD 형식의 날짜 문자열

this.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

}; */

//메소드 정의 -> 스태틱 형식 (prototype)

//YYYY-MM-DD 형식의 날짜 문자열

Blog.prototype.toUserDateString = function(date) {

var result = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();

return result;

};

}

//객체 생성 -> 배열에 저장

var blog = [new Blog("사용자 정의 객체 테스트", new Date("2012-11-13")) // 배열 선언과 동시에 값지정.

          ,new Blog("생성자 작성시 첫글자는 대문자", new Date("2012-11-14"))

  ,new Blog("new연산자를 이용해서 객체생성", new Date("2012-11-15"))];

var str = "";

//객체의 하위 멤버인 날짜를 기준으로 정렬 추가

blog.sort(

function(obj1, obj2) {

//return obj1.date - obj2.date; //ACS

return obj2.date - obj1.date; //DESC

}

);

//객체의 하위 멤버(속성, 메소드) 접근

for (var a=0; a<blog.length; a++) {

str += blog[a].body + " / ";

str += blog[a].toUserDateString(blog[a].date) + "<br>";

}

var result = document.getElementById("result");

result.innerHTML = str;

}


</script>

</head>

<body>

<div>

<h2>사용자 정의 객체</h2>

<form>

<input type="button" value="사용자 정의 객체" onclick="myFunc()">

</form>

<h3>출력--------------------</h3>

<div id="result"></div>

</div>

</body>

</html>



WRITTEN BY
빨강꼬마

,