티스토리 뷰
내장 객체를 이용한 사용자 정의 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test036.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;
// 날짜 출력용 함수 정의(기능 구성)
this.userLocalString = function ()
{
return d.getFullYear() + "-" + (d.getMonth()+1)+ "-" + d.getDate();
};
}
// 객체 생성
var blog = new Blog("블로그 개설", "2019-07-29");
// 생성된 객체의 속성(멤버) 접근
var str = blog.body + " / " + blog.date;
// 테스트
//alert(str);
//--==>> 블로그 개설 / 2019-07-29
// Test065.html 에서와 마찬가지로
// 사용자 정의 객체 여러개를 자바스크립트 배열 구조에 저장
// 단, 차이점 확인~~!!!!
// 사용자 정의 객체를 여러 개 배열 구조에 저장
// new Date() 라는 자바스크립트 내장객체를 사용해야함
var arr = [ new Blog("블로그 레이아웃 구성", new Date("2019/08/10"))
, new Blog("블로그 컨셉 검토",new Date("2019/08/22"))
, new Blog("블로그 학습내용 정리",new Date("2019/10/22"))];
str ="<table class='tbl'>";
str += "<tr><th>제목</th><th>일자</th></tr>"
// <case 1> 내장객체를 이용한 반복문으로 출력
/* for (var i = 0; i < arr.length; i++)
{
str +="<tr>";
str +="<td>" + arr[i].body + "</td>";
str +="<td>" + arr[i].date + "</td>";
str +="</tr>";
} */
// <case 2>
//userLocalString() 이라는 기능 적용 (위에서 선언한 대로)
for(var i=0; i<arr.length; i++)
{
str +="<tr>";
str +="<td>"+arr[i].body + "</td>";
str +="<td>"+arr[i].userLocalString()+"</td>";
str +="</tr>";
}
str += "</table>";
//확인
var vResult = document.getElementById("result");
result.innerHTML = str;
/*
○ 자바스크립트에서의 날짜 데이터
Date 객체는 날짜와 시간 작업을 하는데 사용되는
가장 기본적인 자바스크립트 내장 객체이다.
//Date객체와 함께 활용할수 있는 것들.
var now=new Date();
now.toString();
now.toLocaleString();
now.toLocaleDateString();
now.toLocaleTimeString();
now.getFullYear();
now.getMonth(); //꺼내쓸때는 +1 넣을때는 -1 (월 단위는 자바에서 처름 0부터 시작하므로 !!!★★★)
now.getDate();
※주의※
var userDate1=new Date("2019/10/22"); //가능
var userDate2=new Date(2019,5,3); //가능
var userDate1=new Date("May,3,2019"); //가능
var userDate1=new Date("2019-11-11"); //★★★불가능★★★
var userDate1=new Date("20191215"); //★★★불가능★★★
*/
}
</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>
'Web(국비) > 자바스크립트' 카테고리의 다른 글
| JavaScript 개요 및 기본문법 (0) | 2019.10.22 |
|---|---|
| JavaScript -방명록 작성 (사용자 정의 함수 활용) (2) | 2019.10.22 |
| JavaScript - 사용자 정의 객체 (0) | 2019.10.22 |
| HTML ＊ CSS ＊ JavaScript 마무리 정리 (0) | 2019.10.22 |
| JavaScript -메뉴 보이기/감추기 (0) | 2019.10.22 |