Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Everything has an expiration date

Javascript 20231129 [프로그램소스] - Test036 본문

[Javascript]/Program source (Javascript)

Javascript 20231129 [프로그램소스] - Test036

Jelly-fish 2023. 12. 5. 17:48

 

WebApp03

 

Test036.html

 

 

 

Test036.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test036.html</title>

<style type="text/css">
	
	th {text-align: left;}
	td {background-color: #ffeeff;}
	* {margin: 10pt;}

</style>


<script type="text/javascript">

	function objTest()
	{
		// 확인
		//alert("함수 호출~!!!");
		
		// 사용자 정의 객체(생성자) 정의
		function Blog(b, d)
		{
			// 객체를 구성하는 속성
			this.body = b;
			this.date = d;
			
		}
		
		// 객체 생성
		var blog = new Blog("블로그 개설", "2023-11-15");
		
		// 생성된 객체의 속성(멤버) 접근
		var str = blog.body + " / " + blog.date;
		
		// 확인
		//alert(str);
		//--==>> 블로그 개설 / 2023-11-15
		
		/*
		var ob1 = new Blog("블로그 개설", "2023-11-15");
		var ob2 = new Blog("블로그 레이아웃 구성", "2023-11-16");
		var ob3 = new Blog("생성자 이용한 객체 생성", "2023-11-17");
		
		var arr = [ob1, ob2, ob3];
		*/

		var arr = [ new Blog("블로그 개설", "2023-11-15")
				  , new Blog("블로그 레이아웃 구성", "2023-11-16")
				  , new Blog("생성자 이용한 객체 생성", "2023-11-17") ];
		
		str = "<table border='1' class='table' id='blogTbl'>";
		str += "<tr><th>제목</th><th>날짜</th></tr>";
		
		// [내 풀잉]=======================================
		/*
		for (var i = 0; i < arr.length; i++)
		{
			str += "<tr><td>" + arr[i].body + "</td>"
				  + "<td>" + arr[i].date + "</td></tr>";
			
		}
		*/
		//=================================================
		
		// [선생님 해설!]==================================
		for (var i=0; i < arr.length; i++)
		{
			str += "<tr>";
			str += "<td>" + arr[i].body + "</td>";
			str += "<td>" + arr[i].date + "</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>
		<input type="button" value="사용자 정의 객체 테스트" class="btn control"
		onclick="objTest()">
		<br><br>
		
		<div id="result"></div>
	</div>
	
	

</div>

</body>
</html>

'[Javascript] > Program source (Javascript)' 카테고리의 다른 글

Javascript 20231206 [프로그램소스] - Test037, Test038, main(css)  (1) 2023.12.06
Javascript 20231129 [프로그램소스] - [팝업창 구현 참고~!!!]  (0) 2023.12.05
Javascript 20231205 [프로그램소스] - Test030, Test030_1, Test031, Test031_1  (1) 2023.12.05
Javascript 20231205 [프로그램소스] - Test027, Test027_1, Test028, Test029  (1) 2023.12.05
★★★Javascript 20231204 [프로그램소스] - Test25_1, Test26, Test26_1  (0) 2023.12.04
'[Javascript]/Program source (Javascript)' Related Articles more