<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test037.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function objTest()
{
//alert("함수 호출 확인");
// 사용자 정의 객체
// Test036.html 에서와 마찬거지로 사용자 정의 객체를 구성
// 단, 차이점 확인~!!
function Blog(b, d)
{
// 주요 속성 구성
this.body = b;
this.date = d;
// 날짜 출력용 함수 정의
this.userLocaleString = function()
{
return d.getFullYear() + "-" + (d.getMonth()+1) + "-"+d.getDate();
};
}
// 객체생성
var blog = new Blog("블로그 개설", "2022-01-14");
var str = blog.body + " / " + blog.date;
//alert(str);
// Test036.html 에서와 마찬가지로
// 사용자 정의 객체 여러개를 자바스크립트 배열 구조에 저장.
// 단, 차이점 확인~!!!
// → 자바스크립트 내장 객체 활용
var arr = [ new Blog("블로그 개설", new Date("2022/01/14"))
, new Blog("블로그 레이아웃 구성", new Date("2022/02/10"))
, new Blog("생성자 이용한 객체 생성", new Date("2022/02/16")) ];
/*
○ 자바스크립트에서의 날짜 데이터
Date 객체는 날짜와 시간 작업을 하는데 사용되는
가장 기본적인 자바스크립트 내장 객체이다.
var now = new Date();
now.toString();
now.toLocaleString();
now.toLocaleTimeString();
now.getFullYear();
now.getMonth()+1; // check 월단위는 자바처럼 0부터시작
now.getDate();
※ 주의
var userDate1 = new Date("2022/04/08"); ○
var userDate2 = new Date(2022, 4, 8); ○
var userDate3 = new Date(Apr, 8, 2022); ○
var userDate4 = new Date("2022-04-08"); Ⅹ
var userDate5 = new Date("20220408"); Ⅹ
*/
str = "<table border = '1' class = 'table'>";
str += "<tr>";
str += "<th>제목</th><th>날짜</th>";
str += "</tr>";
for (var i = 0; i < arr.length; i++)
{
str+= "<tr>";
str+= "<td>" + arr[i].body + "</td>";
str+= "<td>" + arr[i].userLocaleString() + "</td>";
str += "</tr>";
}
str += "</table>";
var result = document.getElementById("result");
result.innerHTML = str;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>자바스크립트 객체(사용자정의 객체)</h2>
<div>
<!-- 클래스 2개정의 가능 -->
<!-- 공백 구분 -->
<input type="button" value="사용자 정의 객체 테스트" class="btn control" onclick = "objTest()">
<br><br>
<div id = "result"></div>
</div>
</div>
</body>
</html>728x90
'WEB Archive' 카테고리의 다른 글
| [HTML] Javascript - 프로토타입 필기 (0) | 2024.08.21 |
|---|---|
| [HTML] Javascript - 사용자 정의 객체 생성 2 (0) | 2024.08.21 |
| [HTML] Javascript - 프로토타입구성, 사용자 정의 객체 생성 (0) | 2024.08.21 |
| [HTML] CSS 구성 살펴보기 (0) | 2024.08.20 |
| [HTML] CSS - html태그를 선택자로 활용해보기 (0) | 2024.08.20 |
댓글