<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test035.html</title>
<link rel="stylesheet" type ="text/css" href="css/main.css">
<script type="text/javascript">
function main()
{
//사용자 정의 객체(생성자) 정의
function Blog(b,d)
{
// 객체를 구성하는 속성
this.body=b;
this.date=d;
}
// 객체 생성
var blog = new Blog("블로그 개설", "2019-07-29");
// 생성된 객체의 속성(멤버) 접근
var str = blog.body + " / " + blog.date;
// 테스트
//alert(str);
//--==>> 블로그 개설 / 2019-07-29
//사용자 정의 객체를 여러 개 배열 구조에 저장
var arr = [ new Blog("블로그 레이아웃 구성", "2019-08-10")
, new Blog("블로그 학습내용 주요실습","2019-08-27")
, new Blog("생성자를 이용한 객체 생성","2019-10-22")];
str ="<table class='tbl'>";
str += "<tr><th>제목</th><th>날짜</th></tr>";
for(var i=0; i<arr.length; i++)
{
str+="<tr>";
str+="<td>"+arr[i].body+"</td>";
str+="<td>"+arr[i].date+"</td>";
str+="</td>";
}
str+="</table>";
//확인
var vResult=document.getElementById("result");
result.innerHTML=str;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자 정의 객체)</h2>
<div>
<input type="button" value ="사용자 정의 객체 테스트" class="btn" onclick="main()">
<br><br>
<div id ="result"></div>
</div>
</div>
</body>
</html>