// 객체, Object
- 어떤 값을 순서 없이 저장하는 구조
- 각각의 이름을 이용해서 값들을 꺼내고 넣는다.
- 객체를 만들 때는 '중괄호 {}'를 이용한다.
var coworkers= {
"programmer": "egoing",
"designer": "leezche"
};
- 객체의 각 요소를 꺼낼 때는 '대괄호[]' 또는 '.'을 이용한다.
document.write(coworkers.programmer)
document.write(coworkers["programmer"])
- 객체에 요소를 추가 : 객체명["이름"]="값";
coworkers["bookkeeper"] = "duru";
- 객체에서 요소를 삭제 : delete 객체명.이름'
delete memberObject.red
- key 만 배열로 추출 : Object.keys
- value만 배열로 추출 : Object.values
- key와 value 쌍을 배열로 추출 : Object.entries
<!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>
var memberArray = ['banana', 'strawberry', 'grape'];
console.log("memberArray[0] : ", memberArray[0]);
console.log("memberArray[1] : ", memberArray[1]);
console.log("memberArray[2] : ", memberArray[2]);
console.log();
var memberObject = {
yellow:'banana',
red:'strawberry',
purple:'grape'
}
console.log("memberObject.yellow : ", memberObject.yellow)
console.log("memberObject.red : ", memberObject.red)
console.log("memberObject.purple : ", memberObject.purple)
memberObject.yellow = 'mango';
console.log("memberObject.yellow : ", memberObject.yellow)
delete memberObject.red
console.log(memberObject);// 메서드, 프로퍼티
- 메서드
- 객체 안에 담는 함수
- 메서드가 쓰인 객체를 가리킬 때 this를 사용한다.
- 프로퍼티
- 객체에 해당하는 변수
<!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="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>// this
- 어떤 메서드에서 그 메서드가 속해 있는 객체를 가리키는 특수한 키워드
var hanee = {
name:'hanee',
first:10,
second:20,
sum:function() {
return this.first+this.second;
}
}
console.log('sum:', hanee.sum());// constructor
- 공장에서 객체를 찍어내듯 객체를 양산할 수 있게 해준다.
function Person(name, first, second, third) {
this.name=name;
this.first=first;
this.second=second;
this.third=third;
this.sum = function() {
return this.first+this.second+this.third;
}
}
console.log('new Person(hanee)', new Person('hanee',10,20,30));
console.log('new Person(han)', new Person('han',10,60,50));
console.log('new Person(han)', new Person('han',10,60,50).sum());
function Person(name, first, second, third) {
this.name=name;
this.first=first;
this.second=second;
this.third=third;
this.sum = function() {
return this.first+this.second+this.third;
}
}
var hanee = new Person('hanee',10,20,30);
var han = new Person('han',10,60,50);
console.log(hanee.sum());
console.log(han.sum());'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] 상속 (0) | 2023.04.09 |
|---|---|
| [자바스크립트(JavaScript)] 파일 쪼개기 (0) | 2023.03.22 |
| [자바스크립트(JavaScript)] 함수 (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 제어문(조건문, 반복문) (0) | 2023.03.19 |
| [자바스크립트(JavaScript)] 배열(Array) (0) | 2023.03.18 |
