[기초 JAVA Script] 3-11강 객체

Index
   1. 객체 조작법
   2. 모든 프로퍼티 읽기
   3. HTML 출력

객체 (object) 란?

여러 프로퍼티를 가지고 있는 데이터의 집합

1. 객체 조작법

    <script>
        var jsbook = { title: '자바스크립트 입문', price: 2500, stock: 3 };
        console.log(jsbook);
        console.log(jsbook.title);
        console.log(jsbook['price']);
        jsbook.stock = 10;
        console.log(jsbook.stock);
    </script>

 

• 객체 작성

var 변수명 = {} ;
var 변수명 = {프로퍼티명1:데이터, 프로퍼티명2:데이터, ..... , 프로퍼티명x:데이터} ; 

• 프로퍼티 읽기

console.log(jsbook.title);       
console.log(jsbook['price']);

• 프로퍼티 변경하기

jsbook.stock = 10;

---

2. 모든 프로퍼티 읽기

<script>
	var jsbook = { title: '자바스크립트 입문', price: 2500, stock: 3 };

	for (var p in jsbook) {
		console.log(p + '=' + jsbook[p]);
	}
</script>

for ... in 문 : 객체의 프로퍼티를 모두 읽어내기 위한 전용 반복문

프로퍼티명을, 변수 p 에 대입.

프로퍼티에 저장된 데이터를 jsbook[p] 로 읽어옴

>> 배열과 다르게, 객체는 순서에 관심이 없음. 마구잡이로 출력 될수 있다.

---

3. HTML 출력

<div class="main-wrapper">
		<section>
			<table>
				<tr>
					<td id="title"></td>
					<td id="price"></td>
					<td id="stock"></td>
				</tr>
			</table>
		</section>
	</div><!-- /.main-wrapper -->
	<footer>JavaScript Samples</footer>
	<script>
		var jsbook = { title: '자바스크립트 입문', price: 2500, stock: 3 };

		document.getElementById('title').textContent = jsbook.title;
		document.getElementById('price').textContent = jsbook.price + '원';
		document.getElementById('stock').textContent = jsbook.stock;
	</script>

---

 

(참고)

처음 만나는 자바스크립트 - 가노 스케하루 저자(글) · 김완섭 번역