SsY/Class

[JavaScript] 006. 자바스크립트 활용 실습(5)

planet-si 2023. 5. 15. 12:50
728x90
자바스크립트 활용 실습
  • 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>
728x90
저작자표시 비영리 변경금지 (새창열림)