// 객체, 객체
– 특정 값을 순서 없이 저장하는 구조
– 임의의 이름을 사용하여 값을 가져오고 삽입합니다.
– 개체를 생성할 때 ‘중괄호 {}’를 사용하십시오.
'추천 관련글,
var coworkers= {
"programmer": "egoing",
"designer": "leezche"
};– ‘대괄호()’ 또는 ‘.’를 사용하여 개체의 각 요소를 가져옵니다.
document.write(coworkers.programmer)
document.write(coworkers("programmer"))– 개체에 항목 추가: objectname(“name”)=”value”;
coworkers("bookkeeper") = "duru";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object</title>
</head>
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : " + coworkers.programmer + '<br>');
document.write("designer : " + coworkers("designer") + '<br>');
</script>
<h2>Add</h2>
<script>
coworkers("bookkeeper")="duru";
document.write("bookkeeper : " + coworkers("bookkeeper") + '<br>');
</script>
</body>
</html>// 객체 반복, 반복
– 객체의 모든 값을 얻는 방법
– for(객체 이름의 var 키) {}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object</title>
</head>
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : " + coworkers.programmer + '<br>');
document.write("designer : " + coworkers("designer") + '<br>');
</script>
<h2>Add</h2>
<script>
coworkers("bookkeeper")="duru";
document.write("bookkeeper : " + coworkers("bookkeeper") + '<br>');
coworkers("data scientist")="gildong";
document.write("data scientist : " + coworkers("data scientist") + '<br>');
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key + " : " + coworkers(key) + '<br>');
}
</script>
</body>
</html>//메서드, 속성
– 방법
– 개체 내의 함수
– 메소드가 작성된 객체를 가리키는 경우 그만큼사용
– 특성
– 객체에 해당하는 변수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object</title>
</head>
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : " + coworkers.programmer + '<br>');
document.write("designer : " + coworkers("designer") + '<br>');
</script>
<h2>Add</h2>
<script>
coworkers("bookkeeper")="duru";
document.write("bookkeeper : " + coworkers("bookkeeper") + '<br>');
coworkers("data scientist")="gildong";
document.write("data scientist : " + coworkers("data scientist") + '<br>');
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key + " : " + coworkers(key) + '<br>');
}
</script>
<h2>Property & Method</h2>
<script>
coworkers.showAll = function() {
for(var key in this) {
document.write(key + " : " + this(key) + '<br>');
}
}
coworkers.showAll();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1</title>
<script>
var Body = {
setColor:function (color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
alist(i).style.color = color;
i++;
}
}
}
function nightDayHandler(self){
if(self.value === 'night') {
Body.setBackgroundColor('black');
Body.setColor('white');
self.value="day"
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value="night"
Links.setColor('blue');
}
}
</script>
</head>
<body>
<h1><a href="http://sorrel012.m/index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<o1>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</o1>
<h2>JavaScript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A met error illum, assumenda odit accusamus voluptate reiciendis quisquam, distinctio a pariatur similique? Reiciendis earum assumenda veniam facere, ex debitis cumque consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, quo voluptatum laborum consequatur eius quas! Earum saepe asperiores impedit voluptatum eaque incidunt cupiditate quos vitae itaque. Tempore, numquam facilis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ratione doloribus error, officia facere impedit sed atque quidem, accusamus deserunt quis recusandae reiciendis id illo repudiandae dicta est. Reiciendis, fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo assumenda corrupti ratione beatae libero, nostrum omnis odit cumque explicabo repellendus. Quas placeat aperiam facilis sunt cumque, in quisquam ratione et.
</p>
</body>
</html>