자바스크립트 활용 실습
- Test038
- 프로토타입 (Prototype)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test038.html</title>
<link rel="stylesheet" type="text/css" href="mystyle/main.css">
<style type="text/css">
th {text-align: left;}
</style>
<script type="text/javascript">
// 자바스크립트 배열 객체 구성
var boardArray = new Array();
// 사용자 정의 객체 구성(→ 생성자 함수 정의)
// 기능X(내장 함수X), 속성만 3가지를 가지고 있다.
function Board(uName, uContent)
{
this.userName = uName;
this.content = uContent;
this.writeDay = new Date();
}
// check!
// 프로토타입 구성을 통해... 사용자 정의객체의 함수(기능,동작) 정의
//-- 사용자 정의 객체는 프로토타입이라는 속성을 숨겨두고 가지고 있어 사용 가능하다고 이해
// 객체이름.프로토타입.기능이름 = 함수정의 하겠다 -- 이름없는 함수 형태로 부여하게 됨
// 마지막에 붙은 세미콜론(;) 중요
//-- 메모리 소모를 줄이기 위해서 구성
// Board.prototype.userLocalString = function() {} ;
Board.prototype.userLocalString = function()
{
return this.writeDay.getFullYear() + "-"
+ (this.writeDay.getMonth()+1) + "-"
+ this.writeDay.getDate() + " "
+ this.writeDay.getHours() + ":" // 시 → getHours()
+ this.writeDay.getMinutes() + ":" // 분 → getMinutes()
+ this.writeDay.getSeconds(); // 초 → getSeconds()
} ;
//-- 위의 prototype 은 사용자의 기능에 아무런 영향이 없음.
// 글쓰기 버튼이 클릭되었을 때 호출되어 기능하는 함수
function protoTest()
{
// 확인
// alert("함수호출확인~");
var uName = document.getElementById("uName").value;
var uContent = document.getElementById("uContent").value;
var len = boardArray.length;
//확인
//alert(len);
//-- 현재 시점에서 테스트 → 0
boardArray[len] = new Board(uName, uContent);
// 확인
//alert(len);
//-- 작성이 이루어질 때 마다... → + 1
// 내용 출력 함수
print(len);
}
// 내용 출력 함수 정의
function print(idx)
{
// 내가 작성한 내용
//var table = document.getElementById("bbsTable");
//var str = "";
//str += "<tr>";
//str += "<td>" + (idx+1) + "</td>";
//str += "<td>" + boardArray[idx].userName + "</td>";
//str += "<td>" + boardArray[idx].content + "</td>";
//str += "<td>" + boardArray[idx].userLocalString() + "</td>";
//str += "</tr>";
//table.innerHTML += str;
// 풀이
// 인덱스 확인
//alert(idx);
// 컨텐츠 확인
//var strTemp = boardArray[idx].content;
//alert(strTemp);
var tableNode = document.getElementById("bbsTable");
var trNode = document.createElement("tr");
trNode.appendChild(createTdNode((idx+1).toString())); // 번호
trNode.appendChild(createTdNode(boardArray[idx].userName)); // 이름
trNode.appendChild(createTdNode(boardArray[idx].content)); // 내용
trNode.appendChild(createTdNode(boardArray[idx].userLocalString())); // 작성일
// userLocalString() 함수를 객체안에 구성하지 않았으나,
// 프로토타입으로 체인(연결)하여 사용 가능함을 확인!!
tableNode.appendChild(trNode);
}
// td 노드 생성 및 반환 함수 정의
function createTdNode(val)
{
var textNode = document.createTextNode(val);
var tdNode = document.createElement("td");
tdNode.appendChild(textNode);
return tdNode;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<p>사용자 정의 객체 및 프로토타입 활용</p>
<div>
<form>
<!-- 입력폼을 구성하는 레이아웃 테이블 → 나중에 div 로 구성해 볼 것! -->
<table class="table">
<tr>
<th>작성자</th>
<td>
<input type="text" id="uName" style="width: 150px;">
</td>
</tr>
<tr>
<th>내용</th>
<td>
<input type="text" id="uContent" style="width: 600px;">
</td>
</tr>
</table>
<br>
<input type="button" value="글쓰기" class="btn" onclick="protoTest()" style="width: 680px; height: 40px;">
<br><br>
<!-- 내용을 리스트 형식으로 볼 수 있도록 구성하는 레이아웃 테이블 -->
<table class="table" border="1" id="bbsTable">
<tr>
<th style="width: 40px;">번호</th>
<th style="width: 100px;">작성자</th>
<th style="width: 500px;">내용</th>
<th>작성일</th>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>